feat(i18n): localize hardcoded UI strings and fix misspelled keys

Move remaining hardcoded English strings (player menus, technical-info overlay, music/now-playing, live TV, TV search badges, MPV subtitle settings, accessibility labels, not-found screen, session picker) to en.json, and correct misspelled keys (occured -> occurred, autorized -> authorized, liraries -> libraries, jellyseer -> jellyseerr) along with their usages.
2026-06-13 01:10:22 +01:00 · 2026-06-10 22:29:16 +02:00
parent 0a2dadffd2
commit 0d47c8d43a
32 changed files with 200 additions and 90 deletions
--- a/components/PlatformDropdown.tsx
+++ b/components/PlatformDropdown.tsx
@@ -1,5 +1,6 @@
 import { Ionicons } from "@expo/vector-icons";
 import { BottomSheetScrollView } from "@gorhom/bottom-sheet";
+import { t } from "i18next";
 import React, { useEffect } from "react";
 import { Platform, StyleSheet, TouchableOpacity, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
@@ -380,7 +381,7 @@ const PlatformDropdownComponent = ({

  return (
    <TouchableOpacity onPress={handlePress} activeOpacity={0.7}>
-      {trigger || <Text className='text-white'>Open Menu</Text>}
+      {trigger || <Text className='text-white'>{t("common.open_menu")}</Text>}
    </TouchableOpacity>
  );
 };
--- a/components/PlayButton.tsx
+++ b/components/PlayButton.tsx
@@ -502,8 +502,8 @@ export const PlayButton: React.FC<Props> = ({
  return (
    <TouchableOpacity
      disabled={!item}
-      accessibilityLabel='Play button'
-      accessibilityHint='Tap to play the media'
+      accessibilityLabel={t("accessibility.play_button")}
+      accessibilityHint={t("accessibility.play_hint")}
      onPress={onPress}
      className={"relative flex-1"}
    >
--- a/components/PlayButton.tv.tsx
+++ b/components/PlayButton.tv.tsx
@@ -2,6 +2,7 @@ import { Ionicons } from "@expo/vector-icons";
 import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
 import { useAtom } from "jotai";
 import { useCallback, useEffect } from "react";
+import { useTranslation } from "react-i18next";
 import { TouchableOpacity, View } from "react-native";
 import Animated, {
  Easing,
@@ -36,6 +37,7 @@ export const PlayButton: React.FC<Props> = ({
  colors,
  ...props
 }: Props) => {
+  const { t } = useTranslation();
  const [globalColorAtom] = useAtom(itemThemeColorAtom);

  // Use colors prop if provided, otherwise fallback to global atom
@@ -168,8 +170,8 @@ export const PlayButton: React.FC<Props> = ({

  return (
    <TouchableOpacity
-      accessibilityLabel='Play button'
-      accessibilityHint='Tap to play the media'
+      accessibilityLabel={t("accessibility.play_button")}
+      accessibilityHint={t("accessibility.play_hint")}
      onPress={onPress}
      className={"relative"}
      {...props}
--- a/components/PlayInRemoteSession.tsx
+++ b/components/PlayInRemoteSession.tsx
@@ -6,6 +6,7 @@ import {
 import { getSessionApi } from "@jellyfin/sdk/lib/utils/api/session-api";
 import { useAtomValue } from "jotai";
 import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
 import {
  FlatList,
  Modal,
@@ -31,6 +32,7 @@ export const PlayInRemoteSessionButton: React.FC<Props> = ({
  const [modalVisible, setModalVisible] = useState(false);
  const api = useAtomValue(apiAtom);
  const { sessions, isLoading } = useAllSessions({} as useSessionsProps);
+  const { t } = useTranslation();
  const handlePlayInSession = async (sessionId: string) => {
    if (!api || !item.Id) return;

@@ -65,7 +67,9 @@ export const PlayInRemoteSessionButton: React.FC<Props> = ({
        <View style={styles.centeredView}>
          <View style={styles.modalView}>
            <View style={styles.modalHeader}>
-              <Text style={styles.modalTitle}>Select Session</Text>
+              <Text style={styles.modalTitle}>
+                {t("home.sessions.select_session")}
+              </Text>
              <TouchableOpacity onPress={() => setModalVisible(false)}>
                <Ionicons name='close' size={24} color='white' />
              </TouchableOpacity>
@@ -78,7 +82,7 @@ export const PlayInRemoteSessionButton: React.FC<Props> = ({
                </View>
              ) : !sessions || sessions.length === 0 ? (
                <Text style={styles.noSessionsText}>
-                  No active sessions found
+                  {t("home.sessions.no_active_sessions")}
                </Text>
              ) : (
                <FlatList
@@ -98,7 +102,7 @@ export const PlayInRemoteSessionButton: React.FC<Props> = ({
                        </Text>
                        {session.NowPlayingItem && (
                          <Text style={styles.nowPlaying} numberOfLines={1}>
-                            Now playing:{" "}
+                            {t("home.sessions.now_playing")}{" "}
                            {session.NowPlayingItem.SeriesName
                              ? `${session.NowPlayingItem.SeriesName} :`
                              : ""}
--- a/components/downloads/DownloadCard.tsx
+++ b/components/downloads/DownloadCard.tsx
@@ -173,7 +173,9 @@ export const DownloadCard = ({ process, ...props }: DownloadCardProps) => {

            {isTranscoding && (
              <View className='bg-purple-600/20 px-2 py-0.5 rounded-md mt-1 self-start'>
-                <Text className='text-xs text-purple-400'>Transcoding</Text>
+                <Text className='text-xs text-purple-400'>
+                  {t("home.downloads.transcoding")}
+                </Text>
              </View>
            )}

--- a/components/livetv/TVGuideProgramCell.tsx
+++ b/components/livetv/TVGuideProgramCell.tsx
@@ -1,4 +1,5 @@
 import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
+import { t } from "i18next";
 import React from "react";
 import { Animated, Pressable, StyleSheet, View } from "react-native";
 import { Text } from "@/components/common/Text";
@@ -68,7 +69,7 @@ export const TVGuideProgramCell: React.FC<TVGuideProgramCellProps> = ({
            <Text
              style={[styles.liveBadgeText, { fontSize: typography.callout }]}
            >
-              LIVE
+              {t("player.live")}
            </Text>
          </View>
        )}
--- a/components/livetv/TVLiveTVPage.tsx
+++ b/components/livetv/TVLiveTVPage.tsx
@@ -235,7 +235,7 @@ export const TVLiveTVPage: React.FC = () => {
            marginBottom: 24,
          }}
        >
-          Live TV
+          {t("live_tv.title")}
        </Text>

        {/* Tab Bar */}
--- a/components/login/TVLogin.tsx
+++ b/components/login/TVLogin.tsx
@@ -437,7 +437,7 @@ export const TVLogin: React.FC = () => {
      } else {
        Alert.alert(
          t("login.connection_failed"),
-          t("login.an_unexpected_error_occured"),
+          t("login.an_unexpected_error_occurred"),
        );
      }
    } finally {
@@ -499,7 +499,7 @@ export const TVLogin: React.FC = () => {
        const message =
          error instanceof Error
            ? error.message
-            : t("login.an_unexpected_error_occured");
+            : t("login.an_unexpected_error_occurred");
        Alert.alert(t("login.connection_failed"), message);
        goToQRScreen();
      } finally {
@@ -523,7 +523,7 @@ export const TVLogin: React.FC = () => {
        } else {
          Alert.alert(
            t("login.connection_failed"),
-            t("login.an_unexpected_error_occured"),
+            t("login.an_unexpected_error_occurred"),
          );
        }
      } finally {
@@ -768,7 +768,7 @@ export const TVLogin: React.FC = () => {
              const message =
                error instanceof Error
                  ? error.message
-                  : t("login.an_unexpected_error_occured");
+                  : t("login.an_unexpected_error_occurred");
              Alert.alert(t("login.connection_failed"), message);
              goToQRScreen();
            });
--- a/components/search/TVSearchTabBadges.tsx
+++ b/components/search/TVSearchTabBadges.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import { useTranslation } from "react-i18next";
 import { Animated, Pressable, View } from "react-native";
 import { Text } from "@/components/common/Text";
 import { useTVFocusAnimation } from "@/components/tv/hooks/useTVFocusAnimation";
@@ -88,6 +89,8 @@ export const TVSearchTabBadges: React.FC<TVSearchTabBadgesProps> = ({
  showDiscover,
  disabled = false,
 }) => {
+  const { t } = useTranslation();
+
  if (!showDiscover) {
    return null;
  }
@@ -101,13 +104,13 @@ export const TVSearchTabBadges: React.FC<TVSearchTabBadgesProps> = ({
      }}
    >
      <TVSearchTabBadge
-        label='Library'
+        label={t("search.library")}
        isSelected={searchType === "Library"}
        onPress={() => setSearchType("Library")}
        disabled={disabled}
      />
      <TVSearchTabBadge
-        label='Discover'
+        label={t("search.discover")}
        isSelected={searchType === "Discover"}
        onPress={() => setSearchType("Discover")}
        disabled={disabled}
--- a/components/settings/MpvSubtitleSettings.tsx
+++ b/components/settings/MpvSubtitleSettings.tsx
@@ -1,5 +1,6 @@
 import { Ionicons } from "@expo/vector-icons";
 import { useMemo } from "react";
+import { useTranslation } from "react-i18next";
 import { Platform, Switch, View, type ViewProps } from "react-native";
 import { Stepper } from "@/components/inputs/Stepper";
 import { Text } from "../common/Text";
@@ -17,20 +18,21 @@ export const MpvSubtitleSettings: React.FC<Props> = ({ ...props }) => {
  const isTv = Platform.isTV;
  const media = useMedia();
  const { settings, updateSettings } = media;
+  const { t } = useTranslation();

  const alignXOptions: AlignX[] = ["left", "center", "right"];
  const alignYOptions: AlignY[] = ["top", "center", "bottom"];

  const alignXLabels: Record<AlignX, string> = {
-    left: "Left",
-    center: "Center",
-    right: "Right",
+    left: t("home.settings.subtitles.align.left"),
+    center: t("home.settings.subtitles.align.center"),
+    right: t("home.settings.subtitles.align.right"),
  };

  const alignYLabels: Record<AlignY, string> = {
-    top: "Top",
-    center: "Center",
-    bottom: "Bottom",
+    top: t("home.settings.subtitles.align.top"),
+    center: t("home.settings.subtitles.align.center"),
+    bottom: t("home.settings.subtitles.align.bottom"),
  };

  const alignXOptionGroups = useMemo(() => {
@@ -60,16 +62,18 @@ export const MpvSubtitleSettings: React.FC<Props> = ({ ...props }) => {
  return (
    <View {...props}>
      <ListGroup
-        title='MPV Subtitle Settings'
+        title={t("home.settings.subtitles.mpv_settings_title")}
        description={
          <Text className='text-[#8E8D91] text-xs'>
-            Advanced subtitle customization for MPV player
+            {t("home.settings.subtitles.mpv_settings_description")}
          </Text>
        }
      >
        {!isTv && (
          <>
-            <ListItem title='Vertical Margin'>
+            <ListItem
+              title={t("home.settings.subtitles.mpv_subtitle_margin_y")}
+            >
              <Stepper
                value={settings.mpvSubtitleMarginY ?? 0}
                step={5}
@@ -81,7 +85,7 @@ export const MpvSubtitleSettings: React.FC<Props> = ({ ...props }) => {
              />
            </ListItem>

-            <ListItem title='Horizontal Alignment'>
+            <ListItem title={t("home.settings.subtitles.mpv_subtitle_align_x")}>
              <PlatformDropdown
                groups={alignXOptionGroups}
                trigger={
@@ -96,11 +100,11 @@ export const MpvSubtitleSettings: React.FC<Props> = ({ ...props }) => {
                    />
                  </View>
                }
-                title='Horizontal Alignment'
+                title={t("home.settings.subtitles.mpv_subtitle_align_x")}
              />
            </ListItem>

-            <ListItem title='Vertical Alignment'>
+            <ListItem title={t("home.settings.subtitles.mpv_subtitle_align_y")}>
              <PlatformDropdown
                groups={alignYOptionGroups}
                trigger={
@@ -115,13 +119,13 @@ export const MpvSubtitleSettings: React.FC<Props> = ({ ...props }) => {
                    />
                  </View>
                }
-                title='Vertical Alignment'
+                title={t("home.settings.subtitles.mpv_subtitle_align_y")}
              />
            </ListItem>
          </>
        )}

-        <ListItem title='Opaque Background'>
+        <ListItem title={t("home.settings.subtitles.opaque_background")}>
          <Switch
            value={settings.mpvSubtitleBackgroundEnabled ?? false}
            onValueChange={(value) =>
@@ -131,7 +135,7 @@ export const MpvSubtitleSettings: React.FC<Props> = ({ ...props }) => {
        </ListItem>

        {settings.mpvSubtitleBackgroundEnabled && (
-          <ListItem title='Background Opacity'>
+          <ListItem title={t("home.settings.subtitles.background_opacity")}>
            <Stepper
              value={settings.mpvSubtitleBackgroundOpacity ?? 75}
              step={5}
--- a/components/settings/QuickConnect.tsx
+++ b/components/settings/QuickConnect.tsx
@@ -58,7 +58,7 @@ export const QuickConnect: React.FC<Props> = ({ ...props }) => {
          successHapticFeedback();
          Alert.alert(
            t("home.settings.quick_connect.success"),
-            t("home.settings.quick_connect.quick_connect_autorized"),
+            t("home.settings.quick_connect.quick_connect_authorized"),
          );
          setQuickConnectCode(undefined);
          bottomSheetModalRef?.current?.close();
--- a/components/tv/TVPosterCard.tsx
+++ b/components/tv/TVPosterCard.tsx
@@ -1,6 +1,7 @@
 import { Ionicons } from "@expo/vector-icons";
 import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
 import { Image } from "expo-image";
+import { t } from "i18next";
 import { useAtomValue } from "jotai";
 import React, { useMemo, useRef, useState } from "react";
 import {
@@ -371,7 +372,7 @@ export const TVPosterCard: React.FC<TVPosterCardProps> = ({
          fontWeight: "700",
        }}
      >
-        Now Playing
+        {t("music.now_playing")}
      </Text>
    </View>
  ) : null;
--- a/components/tv/TVSubtitleResultCard.tsx
+++ b/components/tv/TVSubtitleResultCard.tsx
@@ -1,5 +1,6 @@
 import { Ionicons } from "@expo/vector-icons";
 import React from "react";
+import { useTranslation } from "react-i18next";
 import {
  ActivityIndicator,
  Animated,
@@ -28,6 +29,7 @@ export const TVSubtitleResultCard = React.forwardRef<
  const styles = createStyles(typography);
  const { focused, handleFocus, handleBlur, animatedStyle } =
    useTVFocusAnimation({ scaleAmount: 1.03 });
+  const { t } = useTranslation();

  return (
    <Pressable
@@ -152,7 +154,7 @@ export const TVSubtitleResultCard = React.forwardRef<
                },
              ]}
            >
-              <Text style={styles.flagText}>Hash Match</Text>
+              <Text style={styles.flagText}>{t("player.hash_match")}</Text>
            </View>
          )}
          {result.hearingImpaired && (
--- a/components/video-player/controls/BottomControls.tsx
+++ b/components/video-player/controls/BottomControls.tsx
@@ -183,7 +183,7 @@ export const BottomControls: FC<BottomControlsProps> = ({
          <SkipButton
            showButton={showSkipButton}
            onPress={skipIntro}
-            buttonText='Skip Intro'
+            buttonText={t("player.skip_intro")}
          />
          {/* Smart Skip Credits behavior:
              - Show "Skip Credits" if there's content after credits OR no next episode
@@ -193,7 +193,7 @@ export const BottomControls: FC<BottomControlsProps> = ({
              showSkipCreditButton && (hasContentAfterCredits || !nextItem)
            }
            onPress={skipCredit}
-            buttonText='Skip Credits'
+            buttonText={t("player.skip_credits")}
          />
          {settings.autoPlayNextEpisode !== false &&
            (settings.maxAutoPlayEpisodeCount.value === -1 ||
--- a/components/video-player/controls/ContinueWatchingOverlay.tsx
+++ b/components/video-player/controls/ContinueWatchingOverlay.tsx
@@ -27,7 +27,7 @@ const ContinueWatchingOverlay: React.FC<ContinueWatchingOverlayProps> = ({
      }
    >
      <Text className='text-2xl font-bold text-white py-4 '>
-        Are you still watching ?
+        {t("player.still_watching")}
      </Text>
      <Button
        onPress={() => {
--- a/components/video-player/controls/HeaderControls.tsx
+++ b/components/video-player/controls/HeaderControls.tsx
@@ -4,6 +4,7 @@ import type {
  MediaSourceInfo,
 } from "@jellyfin/sdk/lib/generated-client";
 import { type FC, useCallback, useState } from "react";
+import { useTranslation } from "react-i18next";
 import { Platform, TouchableOpacity, View } from "react-native";
 import useRouter from "@/hooks/useAppRouter";
 import { useControlsSafeAreaInsets } from "@/hooks/useControlsSafeAreaInsets";
@@ -57,6 +58,7 @@ export const HeaderControls: FC<HeaderControlsProps> = ({
  showTechnicalInfo = false,
  onToggleTechnicalInfo,
 }) => {
+  const { t } = useTranslation();
  const router = useRouter();
  const insets = useControlsSafeAreaInsets();
  const lightHapticFeedback = useHaptic("light");
@@ -127,8 +129,8 @@ export const HeaderControls: FC<HeaderControlsProps> = ({
            onPress={toggleOrientation}
            disabled={isTogglingOrientation}
            className='aspect-square flex flex-col rounded-xl items-center justify-center p-2'
-            accessibilityLabel='Toggle screen orientation'
-            accessibilityHint='Toggles the screen orientation between portrait and landscape'
+            accessibilityLabel={t("accessibility.toggle_orientation")}
+            accessibilityHint={t("accessibility.toggle_orientation_hint")}
          >
            <MaterialIcons
              name='screen-rotation'
--- a/components/video-player/controls/TechnicalInfoOverlay.tsx
+++ b/components/video-player/controls/TechnicalInfoOverlay.tsx
@@ -7,6 +7,7 @@ import {
  useMemo,
  useState,
 } from "react";
+import { useTranslation } from "react-i18next";
 import { Platform, StyleSheet, Text, View } from "react-native";
 import Animated, {
  Easing,
@@ -184,6 +185,7 @@ export const TechnicalInfoOverlay: FC<TechnicalInfoOverlayProps> = memo(
    currentAudioIndex,
  }) => {
    const typography = useScaledTVTypography();
+    const { t } = useTranslation();
    const insets = useSafeAreaInsets();
    const safeInsets = useControlsSafeAreaInsets();
    const [info, setInfo] = useState<TechnicalInfo | null>(null);
@@ -312,13 +314,13 @@ export const TechnicalInfoOverlay: FC<TechnicalInfoOverlayProps> = memo(
          )}
          {info?.videoCodec && (
            <Text style={textStyle}>
-              Video: {formatCodec(info.videoCodec)}
+              {t("player.technical_info.video")} {formatCodec(info.videoCodec)}
              {info.fps ? ` @ ${formatFps(info.fps)} fps` : ""}
            </Text>
          )}
          {info?.audioCodec && (
            <Text style={textStyle}>
-              Audio: {formatCodec(info.audioCodec)}
+              {t("player.technical_info.audio")} {formatCodec(info.audioCodec)}
              {streamInfo?.audioChannels
                ? ` ${formatAudioChannels(streamInfo.audioChannels)}`
                : ""}
@@ -326,12 +328,13 @@ export const TechnicalInfoOverlay: FC<TechnicalInfoOverlayProps> = memo(
          )}
          {streamInfo?.subtitleCodec && (
            <Text style={textStyle}>
-              Subtitle: {formatCodec(streamInfo.subtitleCodec)}
+              {t("player.technical_info.subtitle")}{" "}
+              {formatCodec(streamInfo.subtitleCodec)}
            </Text>
          )}
          {(info?.videoBitrate || info?.audioBitrate) && (
            <Text style={textStyle}>
-              Bitrate:{" "}
+              {t("player.technical_info.bitrate")}{" "}
              {info.videoBitrate
                ? formatBitrate(info.videoBitrate)
                : info.audioBitrate
@@ -341,21 +344,26 @@ export const TechnicalInfoOverlay: FC<TechnicalInfoOverlayProps> = memo(
          )}
          {info?.cacheSeconds !== undefined && (
            <Text style={textStyle}>
-              Buffer: {info.cacheSeconds.toFixed(1)}s
+              {t("player.technical_info.buffer")} {info.cacheSeconds.toFixed(1)}
+              s
            </Text>
          )}
          {info?.voDriver && (
            <Text style={textStyle}>
-              VO: {info.voDriver}
+              {t("player.technical_info.vo")} {info.voDriver}
              {info.hwdec ? ` / ${info.hwdec}` : ""}
            </Text>
          )}
          {info?.droppedFrames !== undefined && info.droppedFrames > 0 && (
            <Text style={[textStyle, styles.warningText]}>
-              Dropped: {info.droppedFrames} frames
+              {t("player.technical_info.dropped_frames", {
+                count: info.droppedFrames,
+              })}
            </Text>
          )}
-          {!info && !playMethod && <Text style={textStyle}>Loading...</Text>}
+          {!info && !playMethod && (
+            <Text style={textStyle}>{t("player.technical_info.loading")}</Text>
+          )}
        </View>
      </Animated.View>
    );
--- a/components/video-player/controls/VideoScalingModeSelector.tsx
+++ b/components/video-player/controls/VideoScalingModeSelector.tsx
@@ -1,5 +1,6 @@
 import { Ionicons } from "@expo/vector-icons";
 import React, { useMemo } from "react";
+import { useTranslation } from "react-i18next";
 import { Platform, View } from "react-native";
 import {
  type OptionGroup,
@@ -54,6 +55,7 @@ export const AspectRatioSelector: React.FC<AspectRatioSelectorProps> = ({
  onRatioChange,
  disabled = false,
 }) => {
+  const { t } = useTranslation();
  const lightHapticFeedback = useHaptic("light");

  const handleRatioSelect = (ratio: AspectRatio) => {
@@ -66,7 +68,10 @@ export const AspectRatioSelector: React.FC<AspectRatioSelectorProps> = ({
      {
        options: ASPECT_RATIO_OPTIONS.map((option) => ({
          type: "radio" as const,
-          label: option.label,
+          label:
+            option.id === "default"
+              ? t("player.aspect_ratio_original")
+              : option.label,
          value: option.id,
          selected: option.id === currentRatio,
          onPress: () => handleRatioSelect(option.id),
@@ -94,7 +99,7 @@ export const AspectRatioSelector: React.FC<AspectRatioSelectorProps> = ({

  return (
    <PlatformDropdown
-      title='Aspect Ratio'
+      title={t("player.aspect_ratio")}
      groups={optionGroups}
      trigger={trigger}
      bottomSheetConfig={{
--- a/components/video-player/controls/dropdown/DropdownView.tsx
+++ b/components/video-player/controls/dropdown/DropdownView.tsx
@@ -1,6 +1,7 @@
 import { Ionicons } from "@expo/vector-icons";
 import { useLocalSearchParams } from "expo-router";
 import { useCallback, useMemo, useRef } from "react";
+import { useTranslation } from "react-i18next";
 import { Platform, View } from "react-native";
 import { BITRATES } from "@/components/BitrateSelector";
 import {
@@ -47,6 +48,7 @@ const DropdownView = ({
  const { settings, updateSettings } = useSettings();
  const router = useRouter();
  const isOffline = useOfflineMode();
+  const { t } = useTranslation();

  const { subtitleIndex, audioIndex, bitrateValue, playbackPosition } =
    useLocalSearchParams<{
@@ -101,7 +103,7 @@ const DropdownView = ({
    // Quality Section
    if (!isOffline) {
      groups.push({
-        title: "Quality",
+        title: t("player.menu.quality"),
        options:
          BITRATES?.map((bitrate) => ({
            type: "radio" as const,
@@ -116,7 +118,7 @@ const DropdownView = ({
    // Subtitle Section
    if (subtitleTracks && subtitleTracks.length > 0) {
      groups.push({
-        title: "Subtitles",
+        title: t("player.menu.subtitles"),
        options: subtitleTracks.map((sub) => ({
          type: "radio" as const,
          label: sub.name,
@@ -128,7 +130,7 @@ const DropdownView = ({

      // Subtitle Scale Section
      groups.push({
-        title: "Subtitle Scale",
+        title: t("player.menu.subtitle_scale"),
        options: SUBTITLE_SCALE_PRESETS.map((preset) => ({
          type: "radio" as const,
          label: preset.label,
@@ -142,7 +144,7 @@ const DropdownView = ({
    // Audio Section
    if (audioTracks && audioTracks.length > 0) {
      groups.push({
-        title: "Audio",
+        title: t("player.menu.audio"),
        options: audioTracks.map((track) => ({
          type: "radio" as const,
          label: track.name,
@@ -156,7 +158,7 @@ const DropdownView = ({
    // Speed Section
    if (setPlaybackSpeed) {
      groups.push({
-        title: "Speed",
+        title: t("player.menu.speed"),
        options: PLAYBACK_SPEEDS.map((speed) => ({
          type: "radio" as const,
          label: speed.label,
@@ -174,8 +176,8 @@ const DropdownView = ({
          {
            type: "action" as const,
            label: showTechnicalInfo
-              ? "Hide Technical Info"
-              : "Show Technical Info",
+              ? t("player.menu.hide_technical_info")
+              : t("player.menu.show_technical_info"),
            onPress: onToggleTechnicalInfo,
          },
        ],
@@ -185,6 +187,7 @@ const DropdownView = ({
    return groups;
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [
+    t,
    isOffline,
    bitrateValue,
    changeBitrate,
@@ -217,7 +220,7 @@ const DropdownView = ({

  return (
    <PlatformDropdown
-      title='Playback Options'
+      title={t("player.menu.playback_options")}
      groups={optionGroups}
      trigger={trigger}
      expoUIConfig={{}}
--- a/components/video-player/controls/hooks/useRemoteControl.ts
+++ b/components/video-player/controls/hooks/useRemoteControl.ts
@@ -3,6 +3,7 @@ import { Alert } from "react-native";
 import { type SharedValue, useSharedValue } from "react-native-reanimated";
 import { useTVBackPress } from "@/hooks/useTVBackPress";
 import { useTVEventHandler } from "@/hooks/useTVEventHandler";
+import i18n from "@/i18n";

 interface UseRemoteControlProps {
  showControls: boolean;
@@ -124,17 +125,23 @@ export function useRemoteControl({

      // Controls are hidden, so confirm before leaving playback.
      Alert.alert(
-        "Stop Playback",
+        i18n.t("player.stopPlayback"),
        videoTitleRef.current
-          ? `Stop playing "${videoTitleRef.current}"?`
-          : "Are you sure you want to stop playback?",
+          ? i18n.t("player.stopPlayingTitle", {
+              title: videoTitleRef.current,
+            })
+          : i18n.t("player.stopPlayingConfirm"),
        [
          {
-            text: "Cancel",
+            text: i18n.t("common.cancel"),
            style: "cancel",
            onPress: () => onCancelExitRef.current?.(),
          },
-          { text: "Stop", style: "destructive", onPress: onBackRef.current },
+          {
+            text: i18n.t("common.stop"),
+            style: "destructive",
+            onPress: onBackRef.current,
+          },
        ],
      );
      return true;