chore(i18n): localize hardcoded UI strings

Co-authored-by: lance chant <13349722+lancechant@users.noreply.github.com>

app/(auth)/(tabs)/(home)/settings.tv.tsx

@@ -645,7 +645,7 @@ export default function SettingsTV() {
             formatValue={(v) => `${v.toFixed(1)}x`}
           />
           <TVSettingsStepper
-            label='Vertical Margin'
+            label={t("home.settings.subtitles.mpv_subtitle_margin_y")}
             value={settings.mpvSubtitleMarginY ?? 0}
             onDecrease={() => {
               const newValue = Math.max(
@@ -663,11 +663,11 @@ export default function SettingsTV() {
             }}
           />
           <TVSettingsOptionButton
-            label='Horizontal Alignment'
+            label={t("home.settings.subtitles.mpv_subtitle_align_x")}
             value={alignXLabel}
             onPress={() =>
               showOptions({
-                title: "Horizontal Alignment",
+                title: t("home.settings.subtitles.mpv_subtitle_align_x"),
                 options: alignXOptions,
                 onSelect: (value) =>
                   updateSettings({
@@ -677,11 +677,11 @@ export default function SettingsTV() {
             }
           />
           <TVSettingsOptionButton
-            label='Vertical Alignment'
+            label={t("home.settings.subtitles.mpv_subtitle_align_y")}
             value={alignYLabel}
             onPress={() =>
               showOptions({
-                title: "Vertical Alignment",
+                title: t("home.settings.subtitles.mpv_subtitle_align_y"),
                 options: alignYOptions,
                 onSelect: (value) =>
                   updateSettings({

app/(auth)/(tabs)/(libraries)/music/[libraryId]/artists.tsx

@@ -89,7 +89,7 @@ export default function ArtistsScreen() {
     return (
       <View className='flex-1 justify-center items-center bg-black px-6'>
         <Text className='text-neutral-500 text-center'>
-          Missing music library id.
+          {t("music.missing_library_id")}
         </Text>
       </View>
     );

app/(auth)/(tabs)/(libraries)/music/[libraryId]/playlists.tsx

@@ -122,7 +122,7 @@ export default function PlaylistsScreen() {
     return (
       <View className='flex-1 justify-center items-center bg-black px-6'>
         <Text className='text-neutral-500 text-center'>
-          Missing music library id.
+          {t("music.missing_library_id")}
         </Text>
       </View>
     );

app/(auth)/(tabs)/(libraries)/music/[libraryId]/suggestions.tsx

@@ -226,7 +226,7 @@ export default function SuggestionsScreen() {
     return (
       <View className='flex-1 justify-center items-center bg-black px-6'>
         <Text className='text-neutral-500 text-center'>
-          Missing music library id.
+          {t("music.missing_library_id")}
         </Text>
       </View>
     );

app/(auth)/now-playing.tsx

@@ -14,6 +14,7 @@ import React, {
   useRef,
   useState,
 } from "react";
+import { useTranslation } from "react-i18next";
 import {
   ActivityIndicator,
   Dimensions,
@@ -72,6 +73,7 @@ const ARTWORK_SIZE = SCREEN_WIDTH - 80;
 type ViewMode = "player" | "queue";
 
 export default function NowPlayingScreen() {
+  const { t } = useTranslation();
   const [api] = useAtom(apiAtom);
   const [user] = useAtom(userAtom);
   const router = useRouter();
@@ -230,7 +232,9 @@ export default function NowPlayingScreen() {
             paddingBottom: Platform.OS === "android" ? insets.bottom : 0,
           }}
         >
-          <Text className='text-neutral-500'>No track playing</Text>
+          <Text className='text-neutral-500'>
+            {t("music.no_track_playing")}
+          </Text>
         </View>
       </BottomSheetModalProvider>
     );
@@ -267,7 +271,7 @@ export default function NowPlayingScreen() {
                     : "text-neutral-500"
                 }
               >
-                Now Playing
+                {t("music.now_playing")}
               </Text>
             </TouchableOpacity>
             <TouchableOpacity
@@ -718,6 +722,7 @@ const QueueView: React.FC<QueueViewProps> = ({
   onRemoveFromQueue,
   onReorderQueue,
 }) => {
+  const { t } = useTranslation();
   const renderQueueItem = useCallback(
     ({ item, drag, isActive, getIndex }: RenderItemParams<BaseItemDto>) => {
       const index = getIndex() ?? 0;
@@ -831,13 +836,15 @@ const QueueView: React.FC<QueueViewProps> = ({
       ListHeaderComponent={
         <View className='px-4 py-2'>
           <Text className='text-neutral-400 text-xs uppercase tracking-wider'>
-            {history.length > 0 ? "Playing from queue" : "Up next"}
+            {history.length > 0
+              ? t("music.playing_from_queue")
+              : t("music.up_next")}
           </Text>
         </View>
       }
       ListEmptyComponent={
         <View className='flex-1 items-center justify-center py-20'>
-          <Text className='text-neutral-500'>Queue is empty</Text>
+          <Text className='text-neutral-500'>{t("music.queue_empty")}</Text>
         </View>
       }
     />

app/(auth)/tv-subtitle-modal.tsx

@@ -192,6 +192,7 @@ const SubtitleResultCard = React.forwardRef<
 >(({ result, hasTVPreferredFocus, isDownloading, onPress }, ref) => {
   const { focused, handleFocus, handleBlur, animatedStyle } =
     useTVFocusAnimation({ scaleAmount: 1.03 });
+  const { t } = useTranslation();
 
   return (
     <Pressable
@@ -328,7 +329,7 @@ const SubtitleResultCard = React.forwardRef<
               ]}
             >
               <Text style={[styles.flagText, { fontSize: scaleSize(10) }]}>
-                Hash Match
+                {t("player.hash_match")}
               </Text>
             </View>
           )}

app/+not-found.tsx

@@ -1,17 +1,20 @@
 import { Link, Stack } from "expo-router";
+import { useTranslation } from "react-i18next";
 import { StyleSheet } from "react-native";
 
 import { ThemedText } from "@/components/ThemedText";
 import { ThemedView } from "@/components/ThemedView";
 
 export default function NotFoundScreen() {
+  const { t } = useTranslation();
+
   return (
     <>
-      <Stack.Screen options={{ title: "Oops!" }} />
+      <Stack.Screen options={{ title: t("home.oops") }} />
       <ThemedView style={styles.container}>
-        <ThemedText type='title'>This screen doesn't exist.</ThemedText>
+        <ThemedText type='title'>{t("not_found.title")}</ThemedText>
         <Link href={"/home"} style={styles.link}>
-          <ThemedText type='link'>Go to home screen!</ThemedText>
+          <ThemedText type='link'>{t("not_found.go_home")}</ThemedText>
         </Link>
       </ThemedView>
     </>

app/_layout.tsx

@@ -85,7 +85,8 @@ configureReanimatedLogger({
 if (!Platform.isTV) {
   Notifications.setNotificationHandler({
     handleNotification: async () => ({
-      shouldShowAlert: true,
+      shouldShowBanner: true,
+      shouldShowList: true,
       shouldPlaySound: true,
       shouldSetBadge: false,
     }),
@@ -350,9 +351,12 @@ function Layout() {
       notificationListener.current =
         Notifications?.addNotificationReceivedListener(
           (notification: Notification) => {
+            // Log only the title — serializing the whole notification touches
+            // the deprecated dataString getter (deprecation warning) and dumps
+            // noisy payloads into the console.
             console.log(
-              "Notification received while app running",
-              notification,
+              "Notification received while app running:",
+              notification.request.content.title,
             );
           },
         );

components/PlatformDropdown.tsx

@@ -1,6 +1,7 @@
 import { Ionicons } from "@expo/vector-icons";
 import { BottomSheetScrollView } from "@gorhom/bottom-sheet";
 import React, { useEffect } from "react";
+import { useTranslation } from "react-i18next";
 import { Platform, StyleSheet, TouchableOpacity, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { Text } from "@/components/common/Text";
@@ -209,6 +210,7 @@ const PlatformDropdownComponent = ({
   expoUIConfig,
   bottomSheetConfig,
 }: PlatformDropdownProps) => {
+  const { t } = useTranslation();
   const { showModal, hideModal, isVisible } = useGlobalModal();
 
   // Handle controlled open state for Android
@@ -380,7 +382,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>
   );
 };

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"}
     >

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}

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} :`
                               : ""}

components/downloads/DownloadCard.tsx

@@ -1,7 +1,7 @@
 import { Ionicons } from "@expo/vector-icons";
 import { Image } from "expo-image";
-import { t } from "i18next";
 import { useMemo } from "react";
+import { useTranslation } from "react-i18next";
 import {
   ActivityIndicator,
   TouchableOpacity,
@@ -35,6 +35,7 @@ interface DownloadCardProps extends TouchableOpacityProps {
 }
 
 export const DownloadCard = ({ process, ...props }: DownloadCardProps) => {
+  const { t } = useTranslation();
   const { cancelDownload } = useDownload();
   const router = useRouter();
   const queryClient = useNetworkAwareQueryClient();
@@ -173,7 +174,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>
             )}
 

components/downloads/SeriesCard.tsx

@@ -16,9 +16,12 @@ export const SeriesCard: React.FC<{ items: BaseItemDto[] }> = ({ items }) => {
   const { showActionSheetWithOptions } = useActionSheet();
   const router = useRouter();
 
+  // Keyed on SeriesId so recycled FlashList cells re-read the correct poster
+  // instead of freezing the first-rendered series' image (empty deps bug).
   const base64Image = useMemo(() => {
-    return storage.getString(items[0].SeriesId!);
-  }, []);
+    const seriesId = items[0]?.SeriesId;
+    return seriesId ? storage.getString(seriesId) : undefined;
+  }, [items[0]?.SeriesId]);
 
   const deleteSeries = useCallback(
     async () =>

components/home/Home.tsx

@@ -221,33 +221,22 @@ const HomeMobile = () => {
       queryKey,
       queryFn: async ({ pageParam = 0 }) => {
         if (!api) return [];
-        // Use getItems (not getLatestMedia) so we get item-level results
-        // filtered by type from a specific library. getLatestMedia is
-        // episode-oriented and groups results, which drops Series when
-        // combined with a parentId + includeItemTypes filter.
-        //
-        // The specific reason for this is jellyfin 12.0 returns episodes, seasons, or shows,
-        // but we only handle shows in our recently added in [shows] section. So we need to filter by type at the item level.
-        //
-        // For Series we sort by DateLastContentAdded so shows bubble up when
-        // a new episode is added (series cards for new episodes, matching how
-        // Jellyfin's "Latest" row worked pre-12.0). Movies use DateCreated.
-        const response = await getItemsApi(api).getItems({
-          userId: user?.Id,
-          parentId,
-          includeItemTypes,
-          recursive: true,
-          sortBy: includeItemTypes.includes("Series")
-            ? ["DateLastContentAdded"]
-            : ["DateCreated"],
-          sortOrder: ["Descending"],
-          startIndex: pageParam,
-          limit: pageSize,
-          fields: ["PrimaryImageAspectRatio"],
-          imageTypeLimit: 1,
-          enableImageTypes: ["Primary", "Backdrop", "Thumb"],
-        });
-        return response.data.Items || [];
+        // getLatestMedia doesn't support startIndex, so we fetch all and slice client-side
+        const allData =
+          (
+            await getUserLibraryApi(api).getLatestMedia({
+              userId: user?.Id,
+              limit: 10,
+              fields: ["PrimaryImageAspectRatio"],
+              imageTypeLimit: 1,
+              enableImageTypes: ["Primary", "Backdrop", "Thumb"],
+              includeItemTypes,
+              parentId,
+            })
+          ).data || [];
+
+        // Simulate pagination by slicing
+        return allData.slice(pageParam, pageParam + pageSize);
       },
       type: "InfiniteScrollingCollectionList",
       pageSize,
@@ -261,7 +250,9 @@ const HomeMobile = () => {
 
     const latestMediaViews = collections.map((c) => {
       const includeItemTypes: BaseItemKind[] =
-        c.CollectionType === "tvshows" ? ["Series"] : ["Movie"];
+        c.CollectionType === "tvshows" || c.CollectionType === "movies"
+          ? []
+          : ["Movie"];
       const title = t("home.recently_added_in", { libraryName: c.Name });
       const queryKey: string[] = [
         "home",

components/livetv/TVGuideProgramCell.tsx

@@ -1,5 +1,6 @@
 import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
 import React from "react";
+import { useTranslation } from "react-i18next";
 import { Animated, Pressable, StyleSheet, View } from "react-native";
 import { Text } from "@/components/common/Text";
 import { useTVFocusAnimation } from "@/components/tv/hooks/useTVFocusAnimation";
@@ -22,6 +23,7 @@ export const TVGuideProgramCell: React.FC<TVGuideProgramCellProps> = ({
   disabled = false,
   refSetter,
 }) => {
+  const { t } = useTranslation();
   const typography = useScaledTVTypography();
   const { focused, handleFocus, handleBlur } = useTVFocusAnimation({
     scaleAmount: 1,
@@ -68,7 +70,7 @@ export const TVGuideProgramCell: React.FC<TVGuideProgramCellProps> = ({
             <Text
               style={[styles.liveBadgeText, { fontSize: typography.callout }]}
             >
-              LIVE
+              {t("player.live")}
             </Text>
           </View>
         )}

components/livetv/TVLiveTVPage.tsx

@@ -235,7 +235,7 @@ export const TVLiveTVPage: React.FC = () => {
             marginBottom: 24,
           }}
         >
-          Live TV
+          {t("live_tv.title")}
         </Text>
 
         {/* Tab Bar */}

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}

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}

components/settings/StorageSettings.tsx

@@ -1,6 +1,6 @@
-import { useQuery } from "@tanstack/react-query";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { useTranslation } from "react-i18next";
-import { Platform, View } from "react-native";
+import { Alert, Platform, View } from "react-native";
 import { toast } from "sonner-native";
 import { Text } from "@/components/common/Text";
 import { Colors } from "@/constants/Colors";
@@ -12,6 +12,7 @@ import { ListItem } from "../list/ListItem";
 export const StorageSettings = () => {
   const { deleteAllFiles, appSizeUsage } = useDownload();
   const { t } = useTranslation();
+  const queryClient = useQueryClient();
   const successHapticFeedback = useHaptic("success");
   const errorHapticFeedback = useHaptic("error");
 
@@ -27,16 +28,38 @@ export const StorageSettings = () => {
         used: (app.total - app.remaining) / app.total,
       };
     },
+    // Keep the bar moving while a download is writing to disk.
+    refetchInterval: 10 * 1000,
   });
 
-  const onDeleteClicked = async () => {
-    try {
-      await deleteAllFiles();
-      successHapticFeedback();
-    } catch (_e) {
-      errorHapticFeedback();
-      toast.error(t("home.settings.toasts.error_deleting_files"));
-    }
+  const onDeleteClicked = () => {
+    Alert.alert(
+      t("home.settings.storage.delete_all_downloaded_files_confirm"),
+      t("home.settings.storage.delete_all_downloaded_files_confirm_desc"),
+      [
+        {
+          text: t("common.cancel"),
+          style: "cancel",
+        },
+        {
+          text: t("common.ok"),
+          style: "destructive",
+          onPress: async () => {
+            try {
+              await deleteAllFiles();
+              successHapticFeedback();
+            } catch (_e) {
+              errorHapticFeedback();
+              toast.error(t("home.settings.toasts.error_deleting_files"));
+            } finally {
+              // Reflect the freed space immediately instead of waiting for
+              // the next poll.
+              queryClient.invalidateQueries({ queryKey: ["appSize"] });
+            }
+          },
+        },
+      ],
+    );
   };
 
   const calculatePercentage = (value: number, total: number) => {

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 && (

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 ||

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={() => {

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'

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,7 +344,9 @@ export const TechnicalInfoOverlay: FC<TechnicalInfoOverlayProps> = memo(
           )}
           {info?.cacheSeconds !== undefined && (
             <Text style={textStyle}>
-              Buffer: {info.cacheSeconds.toFixed(1)}s
+              {t("player.technical_info.buffer_seconds", {
+                seconds: info.cacheSeconds.toFixed(1),
+              })}
               {info?.demuxerMaxBytes !== undefined
                 ? ` (cap ${info.demuxerMaxBytes}MB` +
                   `${info.demuxerMaxBackBytes !== undefined ? ` / ${info.demuxerMaxBackBytes}MB back` : ""}` +
@@ -352,7 +357,7 @@ export const TechnicalInfoOverlay: FC<TechnicalInfoOverlayProps> = memo(
           )}
           {info?.voDriver && (
             <Text style={textStyle}>
-              VO: {info.voDriver}
+              {t("player.technical_info.vo")} {info.voDriver}
               {info.hwdec ? ` / ${info.hwdec}` : ""}
             </Text>
           )}
@@ -364,10 +369,14 @@ export const TechnicalInfoOverlay: FC<TechnicalInfoOverlayProps> = memo(
           )}
           {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>
     );

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={{

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={{}}

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;

hooks/useJellyseerr.ts

@@ -143,7 +143,7 @@ export class JellyseerrApi {
         if (inRange(status, 200, 299)) {
           if (data.version < "2.0.0") {
             const error = t(
-              "jellyseerr.toasts.jellyseer_does_not_meet_requirements",
+              "jellyseerr.toasts.jellyseerr_does_not_meet_requirements",
             );
             toast.error(error);
             throw Error(error);

providers/Downloads/fileOperations.ts

@@ -96,5 +96,24 @@ export function getDownloadedItemSize(id: string): number {
  */
 export function calculateTotalDownloadedSize(): number {
   const items = getAllDownloadedItems();
-  return items.reduce((sum, item) => sum + (item.videoFileSize || 0), 0);
+  return items.reduce((sum, item) => {
+    // Trickplay bytes count too — getDownloadedItemSize models per-item size
+    // as video + trickplay, the total must match.
+    const trickplaySize = item.trickPlayData?.size ?? 0;
+    // Read the live file size on disk so the total reflects actual usage and
+    // self-heals items whose stored videoFileSize is 0 (old schema, or
+    // `fileInfo.size` was undefined at download time). Fall back to the stored
+    // value if the file can't be stat'd.
+    if (item.videoFilePath) {
+      try {
+        const file = new File(filePathToUri(item.videoFilePath));
+        if (file.exists) {
+          return sum + (file.size ?? item.videoFileSize ?? 0) + trickplaySize;
+        }
+      } catch (error) {
+        console.warn("Failed to stat downloaded file for size:", error);
+      }
+    }
+    return sum + (item.videoFileSize ?? 0) + trickplaySize;
+  }, 0);
 }

providers/Downloads/hooks/useDownloadOperations.ts

@@ -289,7 +289,24 @@ export function useDownloadOperations({
   );
 
   const appSizeUsage = useCallback(async () => {
-    const totalSize = calculateTotalDownloadedSize();
+    let totalSize = calculateTotalDownloadedSize();
+
+    // Also count in-progress downloads (they write straight to their final
+    // path) so the growing file shows up as app usage instead of drifting
+    // into the generic device share until completion.
+    for (const process of processes) {
+      try {
+        const file = new File(
+          Paths.document,
+          `${generateFilename(process.item)}.mp4`,
+        );
+        if (file.exists) {
+          totalSize += file.size ?? 0;
+        }
+      } catch {
+        // File not created yet — ignore.
+      }
+    }
 
     try {
       const [freeDiskStorage, totalDiskCapacity] = await Promise.all([
@@ -310,7 +327,7 @@ export function useDownloadOperations({
         appSize: totalSize,
       };
     }
-  }, []);
+  }, [processes]);
 
   return {
     startBackgroundDownload,

providers/WebSocketProvider.tsx

@@ -173,7 +173,7 @@ export const WebSocketProvider = ({ children }: WebSocketProviderProps) => {
     const protocol = api.basePath.includes("https") ? "wss" : "ws";
     const url = `${protocol}://${api.basePath
       .replace("https://", "")
-      .replace("http://", "")}/socket?ApiKey=${
+      .replace("http://", "")}/socket?api_key=${
       api.accessToken
     }&deviceId=${deviceId}`;
 

translations/en.json

@@ -270,6 +270,10 @@
         "mpv_subtitle_margin_y": "Vertical margin",
         "mpv_subtitle_align_x": "Horizontal align",
         "mpv_subtitle_align_y": "Vertical align",
+        "mpv_settings_title": "MPV Subtitle Settings",
+        "mpv_settings_description": "Advanced subtitle customization for MPV player",
+        "opaque_background": "Opaque Background",
+        "background_opacity": "Background Opacity",
         "align": {
           "left": "Left",
           "center": "Center",
@@ -384,6 +388,8 @@
         "device_usage": "Device {{availableSpace}}%",
         "size_used": "{{used}} of {{total}} used",
         "delete_all_downloaded_files": "Delete all downloaded files",
+        "delete_all_downloaded_files_confirm": "Delete All Downloaded Files?",
+        "delete_all_downloaded_files_confirm_desc": "Are you sure you want to delete all downloaded files? This action cannot be undone.",
         "music_cache_title": "Music cache",
         "music_cache_description": "Automatically cache songs as you listen for smoother playback and offline support",
         "clear_music_cache": "Clear music cache",
@@ -435,10 +441,13 @@
     },
     "sessions": {
       "title": "Sessions",
-      "no_active_sessions": "No active sessions"
+      "no_active_sessions": "No active sessions",
+      "select_session": "Select Session",
+      "now_playing": "Now playing:"
     },
     "downloads": {
       "downloads_title": "Downloads",
+      "transcoding": "Transcoding",
       "series": "Series",
       "movies": "Movies",
       "other_media": "Other media",
@@ -494,6 +503,8 @@
     "none": "None",
     "track": "Track",
     "cancel": "Cancel",
+    "stop": "Stop",
+    "open_menu": "Open Menu",
     "delete": "Delete",
     "ok": "OK",
     "remove": "Remove",
@@ -595,7 +606,31 @@
   },
   "player": {
     "live": "LIVE",
+    "menu": {
+      "quality": "Quality",
+      "subtitles": "Subtitles",
+      "subtitle_scale": "Subtitle Scale",
+      "audio": "Audio",
+      "speed": "Speed",
+      "playback_options": "Playback Options",
+      "show_technical_info": "Show Technical Info",
+      "hide_technical_info": "Hide Technical Info"
+    },
+    "technical_info": {
+      "video": "Video:",
+      "audio": "Audio:",
+      "subtitle": "Subtitle:",
+      "bitrate": "Bitrate:",
+      "buffer_seconds": "Buffer: {{seconds}}s",
+      "vo": "VO:",
+      "dropped_frames": "Dropped: {{count}} frames",
+      "loading": "Loading..."
+    },
     "mpv_player_title": "MPV player",
+    "aspect_ratio": "Aspect Ratio",
+    "aspect_ratio_original": "Original",
+    "hash_match": "Hash Match",
+    "still_watching": "Are you still watching?",
     "error": "Error",
     "failed_to_get_stream_url": "Failed to get the stream URL",
     "an_error_occurred_while_playing_the_video": "An error occurred while playing the video. Check logs in settings.",
@@ -695,6 +730,7 @@
     "no_data_available": "No data available"
   },
   "live_tv": {
+    "title": "Live TV",
     "next": "Next",
     "previous": "Previous",
     "coming_soon": "Coming soon",
@@ -766,7 +802,7 @@
     "request_selected": "Request selected",
     "n_selected": "{{count}} selected",
     "toasts": {
-      "jellyseer_does_not_meet_requirements": "Seerr server does not meet minimum version requirements! Please update to at least 2.0.0",
+      "jellyseerr_does_not_meet_requirements": "Seerr server does not meet minimum version requirements! Please update to at least 2.0.0",
       "jellyseerr_test_failed": "Seerr test failed. Please try again.",
       "failed_to_test_jellyseerr_server_url": "Failed to test Seerr server url",
       "issue_submitted": "Issue submitted!",
@@ -779,6 +815,16 @@
       "failed_to_decline_request": "Failed to decline request"
     }
   },
+  "accessibility": {
+    "play_button": "Play button",
+    "play_hint": "Tap to play the media",
+    "toggle_orientation": "Toggle screen orientation",
+    "toggle_orientation_hint": "Toggles the screen orientation between portrait and landscape"
+  },
+  "not_found": {
+    "title": "This screen doesn't exist.",
+    "go_home": "Go to home screen!"
+  },
   "tabs": {
     "home": "Home",
     "search": "Search",
@@ -789,6 +835,12 @@
   },
   "music": {
     "title": "Music",
+    "no_track_playing": "No track playing",
+    "queue_empty": "Queue is empty",
+    "playing_from_queue": "Playing from queue",
+    "up_next": "Up next",
+    "now_playing": "Now Playing",
+    "missing_library_id": "Missing music library id.",
     "tabs": {
       "suggestions": "Suggestions",
       "albums": "Albums",

utils/jellyfin/audio/getAudioStreamUrl.ts

@@ -52,7 +52,7 @@ export const getAudioStreamUrl = async (
       container: mediaSource?.Container || "mp3",
       mediaSourceId: mediaSource?.Id || "",
       deviceId: api.deviceInfo.id,
-      ApiKey: api.accessToken,
+      api_key: api.accessToken,
       userId,
     });
 

utils/jellyfin/media/getDownloadUrl.ts

@@ -50,7 +50,7 @@ export const getDownloadUrl = async ({
   if (maxBitrate.key === "Max" && !streamDetails?.mediaSource?.TranscodingUrl) {
     console.log("Downloading item directly");
     return {
-      url: `${api.basePath}/Items/${mediaSource.Id}/Download?ApiKey=${api.accessToken}`,
+      url: `${api.basePath}/Items/${mediaSource.Id}/Download?api_key=${api.accessToken}`,
       mediaSource: streamDetails?.mediaSource ?? null,
     };
   }

utils/jellyfin/media/getPlaybackUrl.ts

@@ -40,7 +40,7 @@ export const getPlaybackUrl = async (
 
   const queryParams = new URLSearchParams({
     deviceId: api.deviceInfo?.id || "",
-    ApiKey: api.accessToken || "",
+    api_key: api.accessToken || "",
     Tag: ETag || "",
     MediaSourceId: Id || "",
   });

utils/jellyfin/media/getStreamUrl.ts

@@ -73,7 +73,7 @@ const getPlaybackUrl = (
     subtitleStreamIndex: params.subtitleStreamIndex?.toString() || "",
     audioStreamIndex: params.audioStreamIndex?.toString() || "",
     deviceId: params.deviceId || api.deviceInfo.id,
-    ApiKey: api.accessToken,
+    api_key: api.accessToken,
     startTimeTicks: params.startTimeTicks?.toString() || "0",
     maxStreamingBitrate: params.maxStreamingBitrate?.toString() || "",
     userId: params.userId,

utils/trickplay.ts

@@ -61,5 +61,5 @@ export const generateTrickplayUrl = (item: BaseItemDto, sheetIndex: number) => {
   const api = store.get(apiAtom);
   const resolution = getTrickplayInfo(item)?.resolution;
   if (!resolution || !api) return null;
-  return `${api.basePath}/Videos/${item.Id}/Trickplay/${resolution}/${sheetIndex}.jpg?ApiKey=${api.accessToken}`;
+  return `${api.basePath}/Videos/${item.Id}/Trickplay/${resolution}/${sheetIndex}.jpg?api_key=${api.accessToken}`;
 };