Remove redundant code

components/chapters/ChapterList.tsx

@@ -11,7 +11,6 @@ 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,
@@ -39,7 +38,6 @@ function ChapterListComponent({
   onClose,
 }: ChapterListProps) {
   const { t } = useTranslation();
-  const safeArea = useControlsSafeAreaInsets();
   const listRef = useRef<FlatList<ChapterEntry>>(null);
 
   const entries = useMemo(() => sortedChapters(chapters), [chapters]);
@@ -81,17 +79,7 @@ function ChapterListComponent({
       supportedOrientations={["portrait", "landscape"]}
     >
       <Pressable onPress={onClose} style={styles.backdrop}>
-        <Pressable
-          onPress={(e) => e.stopPropagation()}
-          style={[
-            styles.sheet,
-            {
-              marginLeft: safeArea.left,
-              marginRight: safeArea.right,
-              paddingBottom: safeArea.bottom,
-            },
-          ]}
-        >
+        <Pressable onPress={(e) => e.stopPropagation()} style={styles.sheet}>
           <View style={styles.header}>
             <Text style={styles.title}>{t("chapters.title")}</Text>
             <Pressable
@@ -172,12 +160,14 @@ 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/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,6 +75,9 @@ interface BottomControlsProps {
     minutes: number;
     seconds: number;
   };
+
+  // Chapter props
+  chapterPositions?: number[];
 }
 
 export const BottomControls: FC<BottomControlsProps> = ({
@@ -108,10 +111,11 @@ export const BottomControls: FC<BottomControlsProps> = ({
   trickPlayUrl,
   trickplayInfo,
   time,
+  chapterPositions = [],
 }) => {
   const { settings } = useSettings();
   const { t } = useTranslation();
-  const insets = useControlsSafeAreaInsets();
+  const insets = useSafeAreaInsets();
   const [chapterListVisible, setChapterListVisible] = useState(false);
 
   // Only expose chapter UI when there are at least two real markers.
@@ -142,9 +146,13 @@ export const BottomControls: FC<BottomControlsProps> = ({
       style={[
         {
           position: "absolute",
-          right: insets.right,
-          left: insets.left,
-          bottom: Math.max(insets.bottom - 17, 0),
+          right:
+            (settings?.safeAreaInControlsEnabled ?? true) ? insets.right : 0,
+          left: (settings?.safeAreaInControlsEnabled ?? true) ? insets.left : 0,
+          bottom:
+            (settings?.safeAreaInControlsEnabled ?? true)
+              ? Math.max(insets.bottom - 17, 0)
+              : 0,
         },
       ]}
       className={"flex flex-col px-2"}
@@ -180,6 +188,17 @@ 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}
@@ -211,17 +230,6 @@ 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 = useControlsSafeAreaInsets();
+  const insets = useSafeAreaInsets();
 
   return (
     <View
       style={{
         position: "absolute",
         top: "50%",
-        left: insets.left,
-        right: insets.right,
+        left: (settings?.safeAreaInControlsEnabled ?? true) ? insets.left : 0,
+        right: (settings?.safeAreaInControlsEnabled ?? true) ? insets.right : 0,
         flexDirection: "row",
         justifyContent: "space-between",
         alignItems: "center",

components/video-player/controls/Controls.tsx

@@ -219,6 +219,7 @@ export const Controls: FC<Props> = ({
     hasNextChapter,
     goToPreviousChapter,
     goToNextChapter,
+    chapterPositions,
   } = useChapterNavigation({
     chapters: item.Chapters,
     progress,
@@ -584,6 +585,7 @@ 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,6 +5,7 @@ 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,
@@ -16,10 +17,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,
@@ -45,7 +46,8 @@ export const EpisodeList: React.FC<Props> = ({ item, close, goToItem }) => {
     scrollViewRef.current?.scrollToIndex(index, 100);
   };
   const isOffline = useOfflineMode();
-  const insets = useControlsSafeAreaInsets();
+  const { settings } = useSettings();
+  const insets = useSafeAreaInsets();
 
   // Set the initial season index
   useEffect(() => {
@@ -180,9 +182,12 @@ export const EpisodeList: React.FC<Props> = ({ item, close, goToItem }) => {
         backgroundColor: "black",
         height: "100%",
         width: "100%",
-        paddingTop: insets.top,
-        paddingLeft: insets.left,
-        paddingRight: insets.right,
+        paddingTop:
+          (settings?.safeAreaInControlsEnabled ?? true) ? insets.top : 0,
+        paddingLeft:
+          (settings?.safeAreaInControlsEnabled ?? true) ? insets.left : 0,
+        paddingRight:
+          (settings?.safeAreaInControlsEnabled ?? true) ? insets.right : 0,
       }}
     >
       <View

components/video-player/controls/HeaderControls.tsx

@@ -5,11 +5,12 @@ 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";
@@ -57,8 +58,9 @@ export const HeaderControls: FC<HeaderControlsProps> = ({
   showTechnicalInfo = false,
   onToggleTechnicalInfo,
 }) => {
+  const { settings } = useSettings();
   const router = useRouter();
-  const insets = useControlsSafeAreaInsets();
+  const insets = useSafeAreaInsets();
   const lightHapticFeedback = useHaptic("light");
   const { orientation, lockOrientation } = useOrientation();
   const [isTogglingOrientation, setIsTogglingOrientation] = useState(false);
@@ -97,9 +99,10 @@ export const HeaderControls: FC<HeaderControlsProps> = ({
       style={[
         {
           position: "absolute",
-          top: insets.top,
-          left: insets.left,
-          right: insets.right,
+          top: (settings?.safeAreaInControlsEnabled ?? true) ? insets.top : 0,
+          left: (settings?.safeAreaInControlsEnabled ?? true) ? insets.left : 0,
+          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,8 +268,14 @@ export const TechnicalInfoOverlay: FC<TechnicalInfoOverlayProps> = memo(
           left: Math.max(insets.left, 48) + 20,
         }
       : {
-          top: safeInsets.top + HEADER_LAYOUT.CONTAINER_PADDING + 4,
-          left: safeInsets.left + HEADER_LAYOUT.CONTAINER_PADDING + 20,
+          top:
+            (settings?.safeAreaInControlsEnabled ?? true)
+              ? 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

@@ -1,18 +0,0 @@
-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 response = await fetch(url);
-      blob = await response.blob();
+      const downloaded = await File.downloadFileAsync(url, tmpFile, {
+        idempotent: true,
+      });
+      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(

modules/mpv-player/ios/MpvPlayerView.swift

@@ -81,6 +81,7 @@ class MpvPlayerView: ExpoView {
 	private func setupView() {
 		clipsToBounds = true
 		backgroundColor = .black
+		configureAudioSession()
 
 		videoContainer = UIView()
 		videoContainer.translatesAutoresizingMaskIntoConstraints = false
@@ -140,26 +141,21 @@ class MpvPlayerView: ExpoView {
 		CATransaction.commit()
 	}
 
-	// MARK: - Audio Session & Notifications
-
 	private func configureAudioSession() {
-		let session = AVAudioSession.sharedInstance()
+		let audioSession = AVAudioSession.sharedInstance()
 		do {
-			try session.setCategory(.playback, mode: .moviePlayback, policy: .longFormAudio, options: [])
-			try session.setActive(true)
+			try audioSession.setCategory(
+				.playback,
+				mode: .moviePlayback,
+				policy: .longFormAudio,
+				options: []
+			)
+			try audioSession.setActive(true)
 		} catch {
 			print("Failed to configure audio session: \(error)")
 		}
 	}
-
-	/// 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])
-	}
+	// MARK: - Audio Session & Notifications
 
 	private func setupNotifications() {
 		// Handle audio session interruptions (e.g., incoming calls, other apps playing audio)
@@ -274,7 +270,6 @@ class MpvPlayerView: ExpoView {
 
 	func play() {
 		intendedPlayState = true
-		configureAudioSession()
 		setupRemoteCommands()
 		renderer?.play()
 		pipController?.setPlaybackRate(1.0)
@@ -445,7 +440,6 @@ class MpvPlayerView: ExpoView {
 		renderer?.stop()
 		displayLayer.removeFromSuperlayer()
 		clearNowPlayingInfo()
-		tearDownAudioSession()
 		NotificationCenter.default.removeObserver(self)
 	}
 }
@@ -525,7 +519,9 @@ extension MpvPlayerView: MPVLayerRendererDelegate {
 	}
 
 	func renderer(_: MPVLayerRenderer, didSelectAudioOutput audioOutput: String) {
-		print("[MPV] Audio output ready (\(audioOutput)), syncing Now Playing")
+		// Audio output is now active - this is the right time to activate audio session and set Now Playing
+		print("[MPV] Audio output ready (\(audioOutput)), activating audio session and syncing Now Playing")
+		nowPlayingManager.activateAudioSession()
 		syncNowPlaying(isPlaying: !isPaused())
 	}
 }