chore(deps): Update react monorepo to v19.2.7

Co-authored-by: Gauvain <contact@uruk.dev>

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

@@ -40,6 +40,8 @@ const Layout = () => {
         keyboardDismissMode='none'
         screenOptions={{
           tabBarBounces: true,
+          tabBarActiveTintColor: "#FFFFFF",
+          tabBarInactiveTintColor: "#9CA3AF",
           tabBarLabelStyle: {
             fontSize: TAB_LABEL_FONT_SIZE,
             fontWeight: "600",

app/(auth)/player/direct-player.tsx

@@ -274,6 +274,11 @@ export default function DirectPlayerPage() {
     };
 
     if (itemId) {
+      setItem(null);
+      setDownloadedItem(null);
+      // Clear the previous episode's stream so the loader gate stays closed
+      // until the new item's stream resolves (avoids a stale MPV source frame).
+      setStream(null);
       fetchItemData();
     }
   }, [itemId, offline, api, user?.Id]);
@@ -316,6 +321,12 @@ export default function DirectPlayerPage() {
           return null;
         }
 
+        // Ensure item matches the current itemId to avoid race conditions
+        if (item.Id !== itemId) {
+          setStreamStatus({ isLoading: false, isError: false });
+          return null;
+        }
+
         let result: Stream | null = null;
         if (offline && downloadedItem?.mediaSource) {
           const url = downloadedItem.videoFilePath;
@@ -388,6 +399,7 @@ export default function DirectPlayerPage() {
     item,
     user?.Id,
     downloadedItem,
+    offline,
   ]);
 
   useEffect(() => {

bun.lock

@@ -57,8 +57,8 @@
         "lodash": "4.18.1",
         "nativewind": "^2.0.11",
         "patch-package": "^8.0.0",
-        "react": "19.2.3",
+        "react": "19.2.7",
-        "react-dom": "19.2.3",
+        "react-dom": "19.2.7",
         "react-i18next": "17.0.8",
         "react-native": "npm:react-native-tvos@0.85.3-0",
         "react-native-awesome-slider": "^2.9.0",
@@ -111,7 +111,7 @@
         "expo-doctor": "1.19.7",
         "husky": "9.1.7",
         "lint-staged": "17.0.5",
-        "react-test-renderer": "19.2.3",
+        "react-test-renderer": "19.2.7",
         "typescript": "5.9.3",
       },
     },
@@ -1529,11 +1529,11 @@
 
     "raw-body": ["raw-body@3.0.2", "", { "dependencies": { "bytes": "~3.1.2", "http-errors": "~2.0.1", "iconv-lite": "~0.7.0", "unpipe": "~1.0.0" } }, "sha512-K5zQjDllxWkf7Z5xJdV0/B0WTNqx6vxG70zJE4N0kBs4LovmEYWJzQGxC9bS9RAKu3bgM40lrd5zoLJ12MQ5BA=="],
 
-    "react": ["react@19.2.3", "", {}, "sha512-Ku/hhYbVjOQnXDZFv2+RibmLFGwFdeeKHFcOTlrt7xplBnya5OGn/hIRDsqDiSUcfORsDC7MPxwork8jBwsIWA=="],
+    "react": ["react@19.2.7", "", {}, "sha512-HNe9WslTbXmFK8o8cmwgAeJFSBvt1bPdHCVKtaaV+WlAN36mpT4hcRpwbf3fY56ar2oIXzsBpOAiIRHAdY0OlQ=="],
 
     "react-devtools-core": ["react-devtools-core@6.1.5", "", { "dependencies": { "shell-quote": "^1.6.1", "ws": "^7" } }, "sha512-ePrwPfxAnB+7hgnEr8vpKxL9cmnp7F322t8oqcPshbIQQhDKgFDW4tjhF2wjVbdXF9O/nyuy3sQWd9JGpiLPvA=="],
 
-    "react-dom": ["react-dom@19.2.3", "", { "dependencies": { "scheduler": "^0.27.0" }, "peerDependencies": { "react": "^19.2.3" } }, "sha512-yELu4WmLPw5Mr/lmeEpox5rw3RETacE++JgHqQzd2dg+YbJuat3jH4ingc+WPZhxaoFzdv9y33G+F7Nl5O0GBg=="],
+    "react-dom": ["react-dom@19.2.7", "", { "dependencies": { "scheduler": "^0.27.0" }, "peerDependencies": { "react": "^19.2.7" } }, "sha512-t0BRVXvbiE/o20Hfw669rLbMCDWtYZLvmJigy2f0MxsXF+71pxhR3xOkspmsO8h3ZlNzyibAmtCa3l4lYKk6gQ=="],
 
     "react-fast-compare": ["react-fast-compare@3.2.2", "", {}, "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ=="],
 
@@ -1541,7 +1541,7 @@
 
     "react-i18next": ["react-i18next@17.0.8", "", { "dependencies": { "@babel/runtime": "^7.29.2", "html-parse-stringify": "^3.0.1", "use-sync-external-store": "^1.6.0" }, "peerDependencies": { "i18next": ">= 26.2.0", "react": ">= 16.8.0", "react-dom": "*", "react-native": "*", "typescript": "^5 || ^6" }, "optionalPeers": ["react-dom", "react-native", "typescript"] }, "sha512-0ooKbGLU8JXhe1zwpQUWIeXSgLPOfwJmgheWRIUpcoA0CpyabpGhayjdG+/eA5esC1AQ8h2jWpXjJfzQzeDOCw=="],
 
-    "react-is": ["react-is@19.2.6", "", {}, "sha512-XjBR15BhXuylgWGuslhDKqlSayuqvqBX91BP8pauG8kd1zY8kotkNWbXksTCNRarse4kuGbe2kIY05ARtwNIvw=="],
+    "react-is": ["react-is@19.2.7", "", {}, "sha512-kZFnouyVv7eP/Phmrlo9FK+zcAdriZJvzxXHF1Sl1P377WSGe2G/JxVolhTrB/jeV47lKImhNUsijjHAAbcl/A=="],
 
     "react-native": ["react-native-tvos@0.85.3-0", "", { "dependencies": { "@react-native-tvos/virtualized-lists": "0.85.3-0", "@react-native/assets-registry": "0.85.3", "@react-native/codegen": "0.85.3", "@react-native/community-cli-plugin": "0.85.3", "@react-native/gradle-plugin": "0.85.3", "@react-native/js-polyfills": "0.85.3", "@react-native/normalize-colors": "0.85.3", "abort-controller": "^3.0.0", "anser": "^1.4.9", "ansi-regex": "^5.0.0", "babel-plugin-syntax-hermes-parser": "0.33.3", "base64-js": "^1.5.1", "commander": "^12.0.0", "flow-enums-runtime": "^0.0.6", "hermes-compiler": "250829098.0.10", "invariant": "^2.2.4", "memoize-one": "^5.0.0", "metro-runtime": "^0.84.3", "metro-source-map": "^0.84.3", "nullthrows": "^1.1.1", "pretty-format": "^29.7.0", "promise": "^8.3.0", "react-devtools-core": "^6.1.5", "react-refresh": "^0.14.0", "regenerator-runtime": "^0.13.2", "scheduler": "0.27.0", "semver": "^7.1.3", "stacktrace-parser": "^0.1.10", "tinyglobby": "^0.2.15", "whatwg-fetch": "^3.0.0", "ws": "^7.5.10", "yargs": "^17.6.2" }, "peerDependencies": { "@react-native/jest-preset": "0.85.3", "@types/react": "^19.1.1", "react": "^19.2.3" }, "optionalPeers": ["@react-native/jest-preset", "@types/react"], "bin": { "react-native": "cli.js" } }, "sha512-Q9gUndppXbGEiYlQ8eudkdH7rDXdY+KM74Btd5xqMvXHgo7ZXdwI1hKvStmI47KmTaDn0NOmcRl2yBwHfc5+5A=="],
 
@@ -1599,7 +1599,7 @@
 
     "react-native-text-ticker": ["react-native-text-ticker@1.15.0", "", {}, "sha512-d/uK+PIOhsYMy1r8h825iq/nADiHsabz3WMbRJSnkpQYn+K9aykUAXRRhu8ZbTAzk4CgnUWajJEFxS5ZDygsdg=="],
 
-    "react-native-track-player": ["react-native-track-player@github:lovegaoshi/react-native-track-player#33a3ecd", { "peerDependencies": { "react": "*", "react-native": "*", "react-native-windows": "*", "shaka-player": "^4.7.9" }, "optionalPeers": ["react-native-windows", "shaka-player"] }, "lovegaoshi-react-native-track-player-33a3ecd"],
+    "react-native-track-player": ["react-native-track-player@github:lovegaoshi/react-native-track-player#33a3ecd", { "peerDependencies": { "react": "*", "react-native": "*", "react-native-windows": "*", "shaka-player": "^4.7.9" }, "optionalPeers": ["react-native-windows", "shaka-player"] }, "lovegaoshi-react-native-track-player-33a3ecd", "sha512-vfkld2jUj7EPkAjIc/Vbx4Q4MtOOLmYtCYCE2dWJsyLnPqgj1f0xVzBxbeVP7dfT+eSh4KIXfdxESXaHgrXIlw=="],
 
     "react-native-udp": ["react-native-udp@4.1.7", "", { "dependencies": { "buffer": "^5.6.0", "events": "^3.1.0" } }, "sha512-NUE3zewu61NCdSsLlj+l0ad6qojcVEZPT4hVG/x6DU9U4iCzwtfZSASh9vm7teAcVzLkdD+cO3411LHshAi/wA=="],
 
@@ -1621,7 +1621,7 @@
 
     "react-style-singleton": ["react-style-singleton@2.2.3", "", { "dependencies": { "get-nonce": "^1.0.0", "tslib": "^2.0.0" }, "peerDependencies": { "@types/react": "*", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ=="],
 
-    "react-test-renderer": ["react-test-renderer@19.2.3", "", { "dependencies": { "react-is": "^19.2.3", "scheduler": "^0.27.0" }, "peerDependencies": { "react": "^19.2.3" } }, "sha512-TMR1LnSFiWZMJkCgNf5ATSvAheTT2NvKIwiVwdBPHxjBI7n/JbWd4gaZ16DVd9foAXdvDz+sB5yxZTwMjPRxpw=="],
+    "react-test-renderer": ["react-test-renderer@19.2.7", "", { "dependencies": { "react-is": "^19.2.7", "scheduler": "^0.27.0" }, "peerDependencies": { "react": "^19.2.7" } }, "sha512-U4TyPDJ9MsC8rFimXuJum8w40aPc9kbOZYO8Pc2/4A884i8hwJsMNA/JNyuOc/f2/37wHvk7HjpVl1V4re7Dig=="],
 
     "read-cache": ["read-cache@1.0.0", "", { "dependencies": { "pify": "^2.3.0" } }, "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA=="],
 
@@ -2009,6 +2009,8 @@
 
     "@react-native/metro-babel-transformer/@babel/core": ["@babel/core@7.28.6", "", { "dependencies": { "@babel/code-frame": "^7.28.6", "@babel/generator": "^7.28.6", "@babel/helper-compilation-targets": "^7.28.6", "@babel/helper-module-transforms": "^7.28.6", "@babel/helpers": "^7.28.6", "@babel/parser": "^7.28.6", "@babel/template": "^7.28.6", "@babel/traverse": "^7.28.6", "@babel/types": "^7.28.6", "@jridgewell/remapping": "^2.3.5", "convert-source-map": "^2.0.0", "debug": "^4.1.0", "gensync": "^1.0.0-beta.2", "json5": "^2.2.3", "semver": "^6.3.1" } }, "sha512-H3mcG6ZDLTlYfaSNi0iOKkigqMFvkTKlGUYlD8GW7nNOYRrevuA46iTypPyv+06V3fEmvvazfntkBU34L0azAw=="],
 
+    "@react-navigation/core/react-is": ["react-is@19.2.6", "", {}, "sha512-XjBR15BhXuylgWGuslhDKqlSayuqvqBX91BP8pauG8kd1zY8kotkNWbXksTCNRarse4kuGbe2kIY05ARtwNIvw=="],
+
     "@react-navigation/elements/color": ["color@4.2.3", "", { "dependencies": { "color-convert": "^2.0.1", "color-string": "^1.9.0" } }, "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A=="],
 
     "@react-navigation/material-top-tabs/color": ["color@4.2.3", "", { "dependencies": { "color-convert": "^2.0.1", "color-string": "^1.9.0" } }, "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A=="],
@@ -2057,6 +2059,8 @@
 
     "expo-router/color": ["color@4.2.3", "", { "dependencies": { "color-convert": "^2.0.1", "color-string": "^1.9.0" } }, "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A=="],
 
+    "expo-router/react-is": ["react-is@19.2.6", "", {}, "sha512-XjBR15BhXuylgWGuslhDKqlSayuqvqBX91BP8pauG8kd1zY8kotkNWbXksTCNRarse4kuGbe2kIY05ARtwNIvw=="],
+
     "fast-glob/glob-parent": ["glob-parent@5.1.2", "", { "dependencies": { "is-glob": "^4.0.1" } }, "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow=="],
 
     "fbjs/promise": ["promise@7.3.1", "", { "dependencies": { "asap": "~2.0.3" } }, "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg=="],

components/PlatformDropdown.tsx

@@ -1,13 +1,7 @@
 import { Ionicons } from "@expo/vector-icons";
 import { BottomSheetScrollView } from "@gorhom/bottom-sheet";
-import React, { useEffect, useState } from "react";
+import React, { useEffect } from "react";
-import {
+import { Platform, StyleSheet, TouchableOpacity, View } from "react-native";
-  type LayoutChangeEvent,
-  Platform,
-  StyleSheet,
-  TouchableOpacity,
-  View,
-} from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { Text } from "@/components/common/Text";
 import { useGlobalModal } from "@/providers/GlobalModalProvider";
@@ -217,24 +211,6 @@ const PlatformDropdownComponent = ({
 }: PlatformDropdownProps) => {
   const { showModal, hideModal, isVisible } = useGlobalModal();
 
-  // @expo/ui's <Host> (SDK 55) fills its available space by default, and
-  // `matchContents` doesn't help here: it reports the native Menu's size via
-  // setStyleSize and overrides any explicit size. Instead we measure the
-  // trigger's intrinsic size in plain RN (off-layout) and pin it on the Host.
-  const [triggerSize, setTriggerSize] = useState<{
-    width: number;
-    height: number;
-  } | null>(null);
-
-  const handleMeasureTrigger = (e: LayoutChangeEvent) => {
-    const { width, height } = e.nativeEvent.layout;
-    setTriggerSize((prev) =>
-      prev && prev.width === width && prev.height === height
-        ? prev
-        : { width, height },
-    );
-  };
-
   // Handle controlled open state for Android
   useEffect(() => {
     if (Platform.OS === "android" && controlledOpen === true) {
@@ -265,25 +241,11 @@ const PlatformDropdownComponent = ({
   }, [isVisible, controlledOpen, controlledOnOpenChange]);
 
   if (Platform.OS === "ios" && !Platform.isTV) {
-    // Pin the wrapper to the measured trigger size. @expo/ui's <Host> (SDK 55)
+    // @expo/ui's <Host> can't size to content, so an in-flow invisible copy of
-    // fills its parent and reports its own size via setStyleSize, so it can't
+    // the trigger sizes the wrapper while the Host overlays the real Menu.
-    // size itself to content. If the wrapper has no size, the Host's `flex: 1`
-    // height depends on the parent while the parent depends on the Host — a
-    // circular dependency that collapses to 0 for any selector nested more than
-    // one level deep (so only the first, shallowest dropdown stays visible).
-    // Giving the wrapper the measured size breaks the cycle; the Host then
-    // fills a concrete box.
     return (
-      <View style={triggerSize ?? { opacity: 0 }}>
+      <View>
-        {/* Hidden measurer: lays the trigger out off-flow to capture its
+        <View pointerEvents='none' aria-hidden style={{ opacity: 0 }}>
-            intrinsic size. Absolutely positioned WITHOUT right/bottom so it
-            sizes to the trigger's content rather than to its parent. */}
-        <View
-          style={{ position: "absolute", top: 0, left: 0, opacity: 0 }}
-          pointerEvents='none'
-          aria-hidden
-          onLayout={handleMeasureTrigger}
-        >
           {trigger}
         </View>
         <Host style={[StyleSheet.absoluteFill, expoUIConfig?.hostStyle as any]}>

components/chapters/ChapterList.tsx

@@ -11,6 +11,7 @@ import { useTranslation } from "react-i18next";
 import { FlatList, Modal, Pressable, StyleSheet, View } from "react-native";
 import { Text } from "@/components/common/Text";
 import { Colors } from "@/constants/Colors";
+import { useControlsSafeAreaInsets } from "@/hooks/useControlsSafeAreaInsets";
 import {
   type ChapterEntry,
   chapterStartsMs,
@@ -38,6 +39,7 @@ function ChapterListComponent({
   onClose,
 }: ChapterListProps) {
   const { t } = useTranslation();
+  const safeArea = useControlsSafeAreaInsets();
   const listRef = useRef<FlatList<ChapterEntry>>(null);
 
   const entries = useMemo(() => sortedChapters(chapters), [chapters]);
@@ -79,7 +81,17 @@ function ChapterListComponent({
       supportedOrientations={["portrait", "landscape"]}
     >
       <Pressable onPress={onClose} style={styles.backdrop}>
-        <Pressable onPress={(e) => e.stopPropagation()} style={styles.sheet}>
+        <Pressable
+          onPress={(e) => e.stopPropagation()}
+          style={[
+            styles.sheet,
+            {
+              marginLeft: safeArea.left,
+              marginRight: safeArea.right,
+              paddingBottom: safeArea.bottom,
+            },
+          ]}
+        >
           <View style={styles.header}>
             <Text style={styles.title}>{t("chapters.title")}</Text>
             <Pressable
@@ -160,14 +172,12 @@ const styles = StyleSheet.create({
   backdrop: {
     flex: 1,
     justifyContent: "flex-end",
-    backgroundColor: "rgba(0,0,0,0.6)",
   },
   sheet: {
     backgroundColor: Colors.background,
     borderTopLeftRadius: 16,
     borderTopRightRadius: 16,
     maxHeight: "70%",
-    paddingBottom: 24,
   },
   header: {
     flexDirection: "row",

components/series/SeasonEpisodesCarousel.tsx

@@ -31,8 +31,12 @@ export const SeasonEpisodesCarousel: React.FC<Props> = ({
 }) => {
   const [api] = useAtom(apiAtom);
   const [user] = useAtom(userAtom);
-  const isOffline = useOfflineMode();
   const router = useRouter();
+  const isOffline = useOfflineMode();
+  // Read the live (cached) downloads DB inside the query rather than the
+  // provider's downloadedItems snapshot, so refetches after
+  // updateDownloadedItem() reflect the latest state instead of a stale
+  // refreshKey-gated snapshot. getAllDownloadedItems() is cached, so this stays cheap.
   const { getDownloadedItems } = useDownload();
 
   const scrollRef = useRef<HorizontalScrollRef>(null);

components/video-player/controls/BottomControls.tsx

@@ -8,10 +8,10 @@ import { useTranslation } from "react-i18next";
 import { Pressable, View } from "react-native";
 import { Slider } from "react-native-awesome-slider";
 import { type SharedValue } from "react-native-reanimated";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { ChapterList } from "@/components/chapters/ChapterList";
 import { ChapterTicks } from "@/components/chapters/ChapterTicks";
 import { Text } from "@/components/common/Text";
+import { useControlsSafeAreaInsets } from "@/hooks/useControlsSafeAreaInsets";
 import { useSettings } from "@/utils/atoms/settings";
 import { chapterMarkers, chapterNameAt } from "@/utils/chapters";
 import NextEpisodeCountDownButton from "./NextEpisodeCountDownButton";
@@ -75,9 +75,6 @@ interface BottomControlsProps {
     minutes: number;
     seconds: number;
   };
-
-  // Chapter props
-  chapterPositions?: number[];
 }
 
 export const BottomControls: FC<BottomControlsProps> = ({
@@ -111,11 +108,10 @@ export const BottomControls: FC<BottomControlsProps> = ({
   trickPlayUrl,
   trickplayInfo,
   time,
-  chapterPositions = [],
 }) => {
   const { settings } = useSettings();
   const { t } = useTranslation();
-  const insets = useSafeAreaInsets();
+  const insets = useControlsSafeAreaInsets();
   const [chapterListVisible, setChapterListVisible] = useState(false);
 
   // Only expose chapter UI when there are at least two real markers.
@@ -146,13 +142,9 @@ export const BottomControls: FC<BottomControlsProps> = ({
       style={[
         {
           position: "absolute",
-          right:
+          right: insets.right,
-            (settings?.safeAreaInControlsEnabled ?? true) ? insets.right : 0,
+          left: insets.left,
-          left: (settings?.safeAreaInControlsEnabled ?? true) ? insets.left : 0,
+          bottom: Math.max(insets.bottom - 17, 0),
-          bottom:
-            (settings?.safeAreaInControlsEnabled ?? true)
-              ? Math.max(insets.bottom - 17, 0)
-              : 0,
         },
       ]}
       className={"flex flex-col px-2"}
@@ -188,17 +180,6 @@ export const BottomControls: FC<BottomControlsProps> = ({
           ) : null}
         </View>
         <View className='flex flex-row items-center space-x-2 shrink-0'>
-          {hasChapters && (
-            <Pressable
-              onPress={() => setChapterListVisible(true)}
-              hitSlop={10}
-              className='justify-center mr-4'
-              accessibilityRole='button'
-              accessibilityLabel={t("chapters.open")}
-            >
-              <Ionicons name='bookmarks' size={24} color='white' />
-            </Pressable>
-          )}
           <SkipButton
             showButton={showSkipButton}
             onPress={skipIntro}
@@ -230,6 +211,17 @@ export const BottomControls: FC<BottomControlsProps> = ({
                 onPress={handleNextEpisodeManual}
               />
             )}
+          {hasChapters && (
+            <Pressable
+              onPress={() => setChapterListVisible(true)}
+              hitSlop={10}
+              className='justify-center ml-4'
+              accessibilityRole='button'
+              accessibilityLabel={t("chapters.open")}
+            >
+              <Ionicons name='bookmarks' size={24} color='white' />
+            </Pressable>
+          )}
         </View>
       </View>
       <View

components/video-player/controls/CenterControls.tsx

@@ -1,9 +1,9 @@
 import { Ionicons } from "@expo/vector-icons";
 import type { FC } from "react";
 import { Platform, TouchableOpacity, View } from "react-native";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { Text } from "@/components/common/Text";
 import { Loader } from "@/components/Loader";
+import { useControlsSafeAreaInsets } from "@/hooks/useControlsSafeAreaInsets";
 import { useSettings } from "@/utils/atoms/settings";
 import AudioSlider from "./AudioSlider";
 import BrightnessSlider from "./BrightnessSlider";
@@ -42,15 +42,15 @@ export const CenterControls: FC<CenterControlsProps> = ({
   goToNextChapter,
 }) => {
   const { settings } = useSettings();
-  const insets = useSafeAreaInsets();
+  const insets = useControlsSafeAreaInsets();
 
   return (
     <View
       style={{
         position: "absolute",
         top: "50%",
-        left: (settings?.safeAreaInControlsEnabled ?? true) ? insets.left : 0,
+        left: insets.left,
-        right: (settings?.safeAreaInControlsEnabled ?? true) ? insets.right : 0,
+        right: insets.right,
         flexDirection: "row",
         justifyContent: "space-between",
         alignItems: "center",

components/video-player/controls/Controls.tsx

@@ -219,7 +219,6 @@ export const Controls: FC<Props> = ({
     hasNextChapter,
     goToPreviousChapter,
     goToNextChapter,
-    chapterPositions,
   } = useChapterNavigation({
     chapters: item.Chapters,
     progress,
@@ -366,7 +365,9 @@ export const Controls: FC<Props> = ({
         { applyLanguagePreferences: true },
       );
 
-      const queryParams = new URLSearchParams({
+      // Use setParams instead of replace to avoid unmounting/remounting the player,
+      // which would create a new MPV native view and crash with "mp_initialize already initialized".
+      router.setParams({
         ...(offline && { offline: "true" }),
         itemId: item.Id ?? "",
         audioIndex: defaultAudioIndex?.toString() ?? "",
@@ -375,11 +376,17 @@ export const Controls: FC<Props> = ({
         bitrateValue: bitrateValue?.toString(),
         playbackPosition:
           item.UserData?.PlaybackPositionTicks?.toString() ?? "",
-      }).toString();
+      });
-
-      router.replace(`player/direct-player?${queryParams}` as any);
     },
-    [settings, subtitleIndex, audioIndex, mediaSource, bitrateValue, router],
+    [
+      settings,
+      subtitleIndex,
+      audioIndex,
+      mediaSource,
+      bitrateValue,
+      router,
+      offline,
+    ],
   );
 
   const goToPreviousItem = useCallback(() => {
@@ -585,7 +592,6 @@ export const Controls: FC<Props> = ({
               trickPlayUrl={trickPlayUrl}
               trickplayInfo={trickplayInfo}
               time={isSliding || showRemoteBubble ? time : remoteTime}
-              chapterPositions={chapterPositions}
             />
           </Animated.View>
         </>

components/video-player/controls/EpisodeList.tsx

@@ -5,7 +5,6 @@ import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { atom, useAtom } from "jotai";
 import { useEffect, useMemo, useRef } from "react";
 import { TouchableOpacity, View } from "react-native";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
 import ContinueWatchingPoster from "@/components/ContinueWatchingPoster";
 import {
   HorizontalScroll,
@@ -17,10 +16,10 @@ import {
   SeasonDropdown,
   type SeasonIndexState,
 } from "@/components/series/SeasonDropdown";
+import { useControlsSafeAreaInsets } from "@/hooks/useControlsSafeAreaInsets";
 import { useDownload } from "@/providers/DownloadProvider";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { useOfflineMode } from "@/providers/OfflineModeProvider";
-import { useSettings } from "@/utils/atoms/settings";
 import {
   getDownloadedEpisodesForSeason,
   getDownloadedSeasonNumbers,
@@ -46,8 +45,7 @@ export const EpisodeList: React.FC<Props> = ({ item, close, goToItem }) => {
     scrollViewRef.current?.scrollToIndex(index, 100);
   };
   const isOffline = useOfflineMode();
-  const { settings } = useSettings();
+  const insets = useControlsSafeAreaInsets();
-  const insets = useSafeAreaInsets();
 
   // Set the initial season index
   useEffect(() => {
@@ -59,6 +57,11 @@ export const EpisodeList: React.FC<Props> = ({ item, close, goToItem }) => {
     }
   }, []);
 
+  // Read the live (cached) downloads DB inside the query rather than the
+  // provider's downloadedItems snapshot. The snapshot only refreshes on the
+  // provider refreshKey, so after updateDownloadedItem() invalidates
+  // ["episodes"]/["seasons"] (e.g. progress/played writes) the refetch would
+  // return stale data. getAllDownloadedItems() is cached, so this stays cheap.
   const { getDownloadedItems } = useDownload();
 
   const seasonIndex = seasonIndexState[item.ParentId ?? ""];
@@ -182,12 +185,9 @@ export const EpisodeList: React.FC<Props> = ({ item, close, goToItem }) => {
         backgroundColor: "black",
         height: "100%",
         width: "100%",
-        paddingTop:
+        paddingTop: insets.top,
-          (settings?.safeAreaInControlsEnabled ?? true) ? insets.top : 0,
+        paddingLeft: insets.left,
-        paddingLeft:
+        paddingRight: insets.right,
-          (settings?.safeAreaInControlsEnabled ?? true) ? insets.left : 0,
-        paddingRight:
-          (settings?.safeAreaInControlsEnabled ?? true) ? insets.right : 0,
       }}
     >
       <View

components/video-player/controls/HeaderControls.tsx

@@ -5,12 +5,11 @@ import type {
 } from "@jellyfin/sdk/lib/generated-client";
 import { type FC, useCallback, useState } from "react";
 import { Platform, TouchableOpacity, View } from "react-native";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
 import useRouter from "@/hooks/useAppRouter";
+import { useControlsSafeAreaInsets } from "@/hooks/useControlsSafeAreaInsets";
 import { useHaptic } from "@/hooks/useHaptic";
 import { useOrientation } from "@/hooks/useOrientation";
 import { OrientationLock } from "@/packages/expo-screen-orientation";
-import { useSettings } from "@/utils/atoms/settings";
 import { HEADER_LAYOUT, ICON_SIZES } from "./constants";
 import DropdownView from "./dropdown/DropdownView";
 import { PlaybackSpeedScope } from "./utils/playback-speed-settings";
@@ -58,9 +57,8 @@ export const HeaderControls: FC<HeaderControlsProps> = ({
   showTechnicalInfo = false,
   onToggleTechnicalInfo,
 }) => {
-  const { settings } = useSettings();
   const router = useRouter();
-  const insets = useSafeAreaInsets();
+  const insets = useControlsSafeAreaInsets();
   const lightHapticFeedback = useHaptic("light");
   const { orientation, lockOrientation } = useOrientation();
   const [isTogglingOrientation, setIsTogglingOrientation] = useState(false);
@@ -99,10 +97,9 @@ export const HeaderControls: FC<HeaderControlsProps> = ({
       style={[
         {
           position: "absolute",
-          top: (settings?.safeAreaInControlsEnabled ?? true) ? insets.top : 0,
+          top: insets.top,
-          left: (settings?.safeAreaInControlsEnabled ?? true) ? insets.left : 0,
+          left: insets.left,
-          right:
+          right: insets.right,
-            (settings?.safeAreaInControlsEnabled ?? true) ? insets.right : 0,
           padding: HEADER_LAYOUT.CONTAINER_PADDING,
         },
       ]}

components/video-player/controls/TechnicalInfoOverlay.tsx

@@ -16,8 +16,8 @@ import Animated, {
 } from "react-native-reanimated";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { useScaledTVTypography } from "@/constants/TVTypography";
+import { useControlsSafeAreaInsets } from "@/hooks/useControlsSafeAreaInsets";
 import type { TechnicalInfo } from "@/modules/mpv-player";
-import { useSettings } from "@/utils/atoms/settings";
 import { HEADER_LAYOUT } from "./constants";
 
 type PlayMethod = "DirectPlay" | "DirectStream" | "Transcode";
@@ -184,8 +184,8 @@ export const TechnicalInfoOverlay: FC<TechnicalInfoOverlayProps> = memo(
     currentAudioIndex,
   }) => {
     const typography = useScaledTVTypography();
-    const { settings } = useSettings();
     const insets = useSafeAreaInsets();
+    const safeInsets = useControlsSafeAreaInsets();
     const [info, setInfo] = useState<TechnicalInfo | null>(null);
 
     const opacity = useSharedValue(0);
@@ -268,14 +268,8 @@ export const TechnicalInfoOverlay: FC<TechnicalInfoOverlayProps> = memo(
           left: Math.max(insets.left, 48) + 20,
         }
       : {
-          top:
+          top: safeInsets.top + HEADER_LAYOUT.CONTAINER_PADDING + 4,
-            (settings?.safeAreaInControlsEnabled ?? true)
+          left: safeInsets.left + HEADER_LAYOUT.CONTAINER_PADDING + 20,
-              ? insets.top + HEADER_LAYOUT.CONTAINER_PADDING + 4
-              : HEADER_LAYOUT.CONTAINER_PADDING + 4,
-          left:
-            (settings?.safeAreaInControlsEnabled ?? true)
-              ? insets.left + HEADER_LAYOUT.CONTAINER_PADDING + 20
-              : HEADER_LAYOUT.CONTAINER_PADDING + 20,
         };
 
     const textStyle = Platform.isTV

hooks/useControlsSafeAreaInsets.ts

@@ -0,0 +1,18 @@
+import {
+  type EdgeInsets,
+  useSafeAreaInsets,
+} from "react-native-safe-area-context";
+import { useSettings } from "@/utils/atoms/settings";
+
+const ZERO_INSETS: EdgeInsets = { top: 0, right: 0, bottom: 0, left: 0 };
+
+/**
+ * Returns safe-area insets to apply to in-player controls, honoring the
+ * `safeAreaInControlsEnabled` user setting. When the setting is disabled,
+ * returns zero insets so controls can sit flush against the screen edges.
+ */
+export const useControlsSafeAreaInsets = (): EdgeInsets => {
+  const { settings } = useSettings();
+  const insets = useSafeAreaInsets();
+  return settings.safeAreaInControlsEnabled ? insets : ZERO_INSETS;
+};

hooks/useImageStorage.ts

@@ -1,3 +1,4 @@
+import { File, Paths } from "expo-file-system";
 import { useCallback } from "react";
 import { storage } from "@/utils/mmkv";
 
@@ -12,36 +13,28 @@ const useImageStorage = () => {
     }
   }, []);
 
+  /**
+   * expo-file-system instead of fetch+Blob+FileReader: the latter silently
+   * resolves to an empty payload under RN's New Architecture.
+   */
   const image2Base64 = useCallback(async (url?: string | null) => {
     if (!url) return null;
 
-    let blob: Blob;
+    const tmpFile = new File(
+      Paths.cache,
+      `img-${Date.now()}-${Math.random().toString(36).slice(2)}.jpg`,
+    );
     try {
-      // Fetch the data from the URL
+      const downloaded = await File.downloadFileAsync(url, tmpFile, {
-      const response = await fetch(url);
+        idempotent: true,
-      blob = await response.blob();
+      });
+      return await downloaded.base64();
     } catch (error) {
       console.warn("Error fetching image:", error);
       return null;
+    } finally {
+      if (tmpFile.exists) tmpFile.delete();
     }
-
-    // Create a FileReader instance
-    const reader = new FileReader();
-
-    // Convert blob to base64
-    return new Promise<string>((resolve, reject) => {
-      reader.onloadend = () => {
-        if (typeof reader.result === "string") {
-          // Extract the base64 string (remove the data URL prefix)
-          const base64 = reader.result.split(",")[1];
-          resolve(base64);
-        } else {
-          reject(new Error("Failed to convert image to base64"));
-        }
-      };
-      reader.onerror = reject;
-      reader.readAsDataURL(blob);
-    });
   }, []);
 
   const saveImage = useCallback(

hooks/usePlaybackManager.ts

@@ -109,30 +109,35 @@ export const usePlaybackManager = ({
     staleTime: 0,
   });
 
+  /**
+   * Derive prev/next from the current item's real position in the adjacent
+   * list rather than from the array length. `getEpisodes({ adjacentTo })` does
+   * not guarantee a fixed [prev, current, next] shape — at the first/last
+   * episode it can still return the current item as the first/last entry — so
+   * length-based indexing wrongly surfaces the current episode as "previous".
+   */
+  const currentIndex = useMemo(
+    () => adjacentItems?.findIndex((e) => e.Id === item?.Id) ?? -1,
+    [adjacentItems, item],
+  );
+
+  /** A neighbour is only navigable if it has an actual media file (not a
+   * "Virtual"/missing episode placeholder, e.g. an absent Special). */
+  const isNavigable = (episode?: BaseItemDto | null): episode is BaseItemDto =>
+    !!episode && episode.Id !== item?.Id && episode.LocationType !== "Virtual";
+
   const previousItem = useMemo(() => {
-    if (!adjacentItems || adjacentItems.length <= 1) {
+    if (!adjacentItems || currentIndex <= 0) return null;
-      return null;
+    const candidate = adjacentItems[currentIndex - 1];
-    }
+    return isNavigable(candidate) ? candidate : null;
-
+  }, [adjacentItems, currentIndex, item]);
-    if (adjacentItems.length === 2) {
-      return adjacentItems[0].Id === item?.Id ? null : adjacentItems[0];
-    }
-
-    return adjacentItems[0];
-  }, [adjacentItems, item]);
 
   /** The next item in the series */
   const nextItem = useMemo(() => {
-    if (!adjacentItems || adjacentItems.length <= 1) {
+    if (!adjacentItems || currentIndex < 0) return null;
-      return null;
+    const candidate = adjacentItems[currentIndex + 1];
-    }
+    return isNavigable(candidate) ? candidate : null;
-
+  }, [adjacentItems, currentIndex, item]);
-    if (adjacentItems.length === 2) {
-      return adjacentItems[1].Id === item?.Id ? null : adjacentItems[1];
-    }
-
-    return adjacentItems[2];
-  }, [adjacentItems, item]);
 
   /**
    * Reports playback progress.

modules/mpv-player/ios/MpvPlayerModule.swift

@@ -213,7 +213,7 @@ public class MpvPlayerModule: Module {
       }
 
       // Defines events that the view can send to JavaScript
-      Events("onLoad", "onPlaybackStateChange", "onProgress", "onError", "onTracksReady")
+      Events("onLoad", "onPlaybackStateChange", "onProgress", "onError", "onTracksReady", "onPictureInPictureChange")
     }
   }
 }

modules/mpv-player/ios/MpvPlayerView.swift

@@ -61,6 +61,7 @@ class MpvPlayerView: ExpoView {
 	let onProgress = EventDispatcher()
 	let onError = EventDispatcher()
 	let onTracksReady = EventDispatcher()
+	let onPictureInPictureChange = EventDispatcher()
 
 	private var currentURL: URL?
 	private var cachedPosition: Double = 0
@@ -81,7 +82,6 @@ class MpvPlayerView: ExpoView {
 	private func setupView() {
 		clipsToBounds = true
 		backgroundColor = .black
-		configureAudioSession()
 
 		videoContainer = UIView()
 		videoContainer.translatesAutoresizingMaskIntoConstraints = false
@@ -141,21 +141,26 @@ class MpvPlayerView: ExpoView {
 		CATransaction.commit()
 	}
 
+	// MARK: - Audio Session & Notifications
+
 	private func configureAudioSession() {
-		let audioSession = AVAudioSession.sharedInstance()
+		let session = AVAudioSession.sharedInstance()
 		do {
-			try audioSession.setCategory(
+			try session.setCategory(.playback, mode: .moviePlayback, policy: .longFormAudio, options: [])
-				.playback,
+			try session.setActive(true)
-				mode: .moviePlayback,
-				policy: .longFormAudio,
-				options: []
-			)
-			try audioSession.setActive(true)
 		} catch {
 			print("Failed to configure audio session: \(error)")
 		}
 	}
-	// MARK: - Audio Session & Notifications
+
+	/// Deactivate the session AND reset the category — `setActive(false)` alone
+	/// leaves `.playback`/`.longFormAudio` on the shared singleton, so any later
+	/// reactivation (foreground, route change, other modules) re-steals audio.
+	private func tearDownAudioSession() {
+		let session = AVAudioSession.sharedInstance()
+		try? session.setActive(false, options: .notifyOthersOnDeactivation)
+		try? session.setCategory(.ambient, mode: .default, options: [.mixWithOthers])
+	}
 
 	private func setupNotifications() {
 		// Handle audio session interruptions (e.g., incoming calls, other apps playing audio)
@@ -270,6 +275,7 @@ class MpvPlayerView: ExpoView {
 
 	func play() {
 		intendedPlayState = true
+		configureAudioSession()
 		setupRemoteCommands()
 		renderer?.play()
 		pipController?.setPlaybackRate(1.0)
@@ -440,6 +446,7 @@ class MpvPlayerView: ExpoView {
 		renderer?.stop()
 		displayLayer.removeFromSuperlayer()
 		clearNowPlayingInfo()
+		tearDownAudioSession()
 		NotificationCenter.default.removeObserver(self)
 	}
 }
@@ -519,9 +526,7 @@ extension MpvPlayerView: MPVLayerRendererDelegate {
 	}
 
 	func renderer(_: MPVLayerRenderer, didSelectAudioOutput audioOutput: String) {
-		// Audio output is now active - this is the right time to activate audio session and set Now Playing
+		print("[MPV] Audio output ready (\(audioOutput)), syncing Now Playing")
-		print("[MPV] Audio output ready (\(audioOutput)), activating audio session and syncing Now Playing")
-		nowPlayingManager.activateAudioSession()
 		syncNowPlaying(isPlaying: !isPaused())
 	}
 }
@@ -633,6 +638,9 @@ extension MpvPlayerView: PiPControllerDelegate {
 		print("PiP did start: \(didStartPictureInPicture)")
 		// Ensure current time is synced when PiP starts
 		pipController?.setCurrentTimeFromSeconds(cachedPosition, duration: cachedDuration)
+		// Notify JS of the actual PiP active state. `didStartPictureInPicture`
+		// is `false` when AVKit reports a failure to start, so reflect that.
+		onPictureInPictureChange(["isActive": didStartPictureInPicture])
 	}
 	
 	func pipController(_ controller: PiPController, willStopPictureInPicture: Bool) {
@@ -651,6 +659,9 @@ extension MpvPlayerView: PiPControllerDelegate {
 		if _isZoomedToFill {
 			displayLayer.videoGravity = .resizeAspectFill
 		}
+		// Notify JS that PiP has fully stopped so the controls overlay can
+		// be re-mounted when the user returns to full screen.
+		onPictureInPictureChange(["isActive": false])
 	}
 	
 	func pipController(_ controller: PiPController, restoreUserInterfaceForPictureInPictureStop completionHandler: @escaping (Bool) -> Void) {

package.json

@@ -78,8 +78,8 @@
     "lodash": "4.18.1",
     "nativewind": "^2.0.11",
     "patch-package": "^8.0.0",
-    "react": "19.2.3",
+    "react": "19.2.7",
-    "react-dom": "19.2.3",
+    "react-dom": "19.2.7",
     "react-i18next": "17.0.8",
     "react-native": "npm:react-native-tvos@0.85.3-0",
     "react-native-awesome-slider": "^2.9.0",
@@ -132,7 +132,7 @@
     "expo-doctor": "1.19.7",
     "husky": "9.1.7",
     "lint-staged": "17.0.5",
-    "react-test-renderer": "19.2.3",
+    "react-test-renderer": "19.2.7",
     "typescript": "5.9.3"
   },
   "expo": {

providers/Downloads/database.ts

@@ -4,28 +4,68 @@ import type { DownloadedItem, DownloadsDatabase } from "./types";
 
 const DOWNLOADS_DATABASE_KEY = "downloads.v2.json";
 
+// Performance optimization: Cache the parsed database to avoid repeated JSON.parse calls
+let cachedDb: DownloadsDatabase | null = null;
+let cacheVersion = 0;
+
+// Performance optimization: Cache the flattened items array
+let cachedItems: DownloadedItem[] | null = null;
+let itemsCacheVersion = -1;
+
+// Performance optimization: Index for O(1) item lookups by ID
+let itemIndex: Map<string, DownloadedItem> | null = null;
+let indexCacheVersion = -1;
+
 /**
  * Get the downloads database from storage
+ * PERFORMANCE: Caches the parsed database to avoid repeated JSON.parse calls.
+ * NOTE: Returns the shared cached instance — do NOT mutate it directly. Go
+ * through addDownloadedItem/updateDownloadedItem/removeDownloadedItem so
+ * saveDownloadsDatabase() runs and the derived caches stay consistent.
  */
 export function getDownloadsDatabase(): DownloadsDatabase {
+  // Return cached database if available
+  if (cachedDb !== null) {
+    return cachedDb;
+  }
+
+  // Parse from storage and cache the result
   const file = storage.getString(DOWNLOADS_DATABASE_KEY);
   if (file) {
-    return JSON.parse(file) as DownloadsDatabase;
+    cachedDb = JSON.parse(file) as DownloadsDatabase;
+    return cachedDb;
   }
-  return { movies: {}, series: {}, other: {} };
+
+  const emptyDb = { movies: {}, series: {}, other: {} };
+  cachedDb = emptyDb;
+  return emptyDb;
 }
 
 /**
  * Save the downloads database to storage
+ * PERFORMANCE: Updates cache and invalidates derived caches
  */
 export function saveDownloadsDatabase(db: DownloadsDatabase): void {
   storage.set(DOWNLOADS_DATABASE_KEY, JSON.stringify(db));
+  // Update the cache with the new database
+  cachedDb = db;
+  // Invalidate derived caches (items array and index)
+  cachedItems = null;
+  itemIndex = null;
+  cacheVersion++;
 }
 
 /**
  * Get all downloaded items as a flat array
+ * PERFORMANCE: Caches the flattened array to avoid rebuilding on every call
  */
 export function getAllDownloadedItems(): DownloadedItem[] {
+  // Return cached items if available and up-to-date
+  if (cachedItems !== null && itemsCacheVersion === cacheVersion) {
+    return cachedItems;
+  }
+
+  // Build the items array from the database
   const db = getDownloadsDatabase();
   const items: DownloadedItem[] = [];
 
@@ -47,34 +87,41 @@ export function getAllDownloadedItems(): DownloadedItem[] {
     }
   }
 
+  // Cache the result
+  cachedItems = items;
+  itemsCacheVersion = cacheVersion;
+
   return items;
 }
 
 /**
- * Get a downloaded item by its ID
+ * Build or refresh the item index for O(1) lookups
  */
-export function getDownloadedItemById(id: string): DownloadedItem | undefined {
+function ensureItemIndex(): void {
-  const db = getDownloadsDatabase();
+  if (itemIndex !== null && indexCacheVersion === cacheVersion) {
-
+    return; // Index is up-to-date
-  if (db.movies[id]) {
-    return db.movies[id];
   }
 
-  for (const series of Object.values(db.series)) {
+  // Build new index from all items
-    for (const season of Object.values(series.seasons)) {
+  itemIndex = new Map<string, DownloadedItem>();
-      for (const episode of Object.values(season.episodes)) {
+  const items = getAllDownloadedItems();
-        if (episode.item.Id === id) {
+
-          return episode;
+  for (const item of items) {
-        }
+    if (item.item.Id) {
-      }
+      itemIndex.set(item.item.Id, item);
     }
   }
 
-  if (db.other?.[id]) {
+  indexCacheVersion = cacheVersion;
-    return db.other[id];
+}
-  }
 
-  return undefined;
+/**
+ * Get a downloaded item by its ID
+ * PERFORMANCE: Uses O(1) index lookup instead of O(n²) iteration
+ */
+export function getDownloadedItemById(id: string): DownloadedItem | undefined {
+  ensureItemIndex();
+  return itemIndex!.get(id);
 }
 
 /**
@@ -221,4 +268,5 @@ export function updateDownloadedItem(
  */
 export function clearAllDownloadedItems(): void {
   saveDownloadsDatabase({ movies: {}, series: {}, other: {} });
+  // saveDownloadsDatabase already invalidates caches
 }