wip

components/ItemContent.tsx

@@ -21,7 +21,14 @@ import { Image } from "expo-image";
 import { useNavigation } from "expo-router";
 import * as ScreenOrientation from "expo-screen-orientation";
 import { useAtom } from "jotai";
-import React, { useEffect, useMemo, useRef, useState } from "react";
+import React, {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import { View } from "react-native";
 import { useCastDevice } from "react-native-google-cast";
 import Animated from "react-native-reanimated";
@@ -34,17 +41,10 @@ import { MoreMoviesWithActor } from "./MoreMoviesWithActor";
 export const ItemContent: React.FC<{ item: BaseItemDto }> = React.memo(
   ({ item }) => {
     const [api] = useAtom(apiAtom);
-    const [user] = useAtom(userAtom);
-    const { playSettings, setPlaySettings, playUrl } = usePlaySettings();
+    const { setPlaySettings, playUrl } = usePlaySettings();
 
     const castDevice = useCastDevice();
     const navigation = useNavigation();
-    const [settings] = useSettings();
-
-    const [maxBitrate, setMaxBitrate] = useState<Bitrate>({
-      key: "Max",
-      value: undefined,
-    });
 
     const [loadingLogo, setLoadingLogo] = useState(true);
 
@@ -89,7 +89,11 @@ export const ItemContent: React.FC<{ item: BaseItemDto }> = React.memo(
       });
 
       setPlaySettings((prev) => ({
-        ...prev,
+        audioIndex: undefined,
+        subtitleIndex: undefined,
+        mediaSourceId: undefined,
+        bitrate: undefined,
+        mediaSource: undefined,
         item,
       }));
     }, [item]);

components/PlayButton.tsx

@@ -1,5 +1,4 @@
 import { apiAtom } from "@/providers/JellyfinProvider";
-import { usePlayback } from "@/providers/PlaybackProvider";
 import { itemThemeColorAtom } from "@/utils/atoms/primaryColor";
 import { getParentBackdropImageUrl } from "@/utils/jellyfin/image/getParentBackdropImageUrl";
 import { getPrimaryImageUrl } from "@/utils/jellyfin/image/getPrimaryImageUrl";
@@ -40,7 +39,6 @@ const MIN_PLAYBACK_WIDTH = 15;
 export const PlayButton: React.FC<Props> = ({ item, url, ...props }) => {
   const { showActionSheetWithOptions } = useActionSheet();
   const client = useRemoteMediaClient();
-  const { setCurrentlyPlayingState } = usePlayback();
   const mediaStatus = useMediaStatus();
 
   const [colorAtom] = useAtom(itemThemeColorAtom);
@@ -64,7 +62,11 @@ export const PlayButton: React.FC<Props> = ({ item, url, ...props }) => {
 
   const onPress = async () => {
     if (!url || !item) {
-      console.warn("No URL or item provided to PlayButton");
+      console.warn(
+        "No URL or item provided to PlayButton",
+        url?.slice(0, 100),
+        item?.Id
+      );
       return;
     }
     if (!client) {

components/video-player/Controls.tsx

@@ -19,7 +19,13 @@ import React, {
   useRef,
   useState,
 } from "react";
-import { Dimensions, Pressable, TouchableOpacity, View } from "react-native";
+import {
+  Dimensions,
+  Platform,
+  Pressable,
+  TouchableOpacity,
+  View,
+} from "react-native";
 import { Slider } from "react-native-awesome-slider";
 import Animated, {
   runOnJS,
@@ -34,6 +40,7 @@ import { VideoRef } from "react-native-video";
 import { Text } from "../common/Text";
 import { itemRouter } from "../common/TouchableItemRouter";
 import { Loader } from "../Loader";
+import { TAB_HEIGHT } from "@/constants/Values";
 
 interface Props {
   item: BaseItemDto;
@@ -67,12 +74,12 @@ export const Controls: React.FC<Props> = ({
   setIgnoreSafeAreas,
 }) => {
   const [settings] = useSettings();
-  const [api] = useAtom(apiAtom);
   const router = useRouter();
   const segments = useSegments();
   const insets = useSafeAreaInsets();
 
   const screenDimensions = Dimensions.get("screen");
+  const windowDimensions = Dimensions.get("window");
 
   const op = useSharedValue<number>(1);
   const tr = useSharedValue<number>(10);
@@ -243,8 +250,8 @@ export const Controls: React.FC<Props> = ({
           position: "absolute",
           top: 0,
           left: 0,
-          width: screenDimensions.width,
-          height: screenDimensions.height,
+          width: windowDimensions.width,
+          height: windowDimensions.height,
         },
       ]}
     >
@@ -299,8 +306,8 @@ export const Controls: React.FC<Props> = ({
               position: "absolute",
               top: 0,
               left: 0,
-              width: screenDimensions.width,
-              height: screenDimensions.height,
+              width: windowDimensions.width + 100,
+              height: windowDimensions.height + 100,
             },
             animatedStyles,
           ]}
@@ -313,8 +320,8 @@ export const Controls: React.FC<Props> = ({
           position: "absolute",
           top: 0,
           left: 0,
-          width: screenDimensions.width,
-          height: screenDimensions.height,
+          width: windowDimensions.width,
+          height: windowDimensions.height,
         }}
         pointerEvents="none"
         className={`flex flex-col items-center justify-center
@@ -338,7 +345,7 @@ export const Controls: React.FC<Props> = ({
       >
         <TouchableOpacity
           onPress={toggleIgnoreSafeAreas}
-          className="aspect-square flex flex-col bg-neutral-800 rounded-xl items-center justify-center p-2"
+          className="aspect-square flex flex-col bg-neutral-800/90 rounded-xl items-center justify-center p-2"
         >
           <Ionicons
             name={ignoreSafeAreas ? "contract-outline" : "expand"}
@@ -350,7 +357,7 @@ export const Controls: React.FC<Props> = ({
           onPress={() => {
             router.back();
           }}
-          className="aspect-square flex flex-col bg-neutral-800 rounded-xl items-center justify-center p-2"
+          className="aspect-square flex flex-col bg-neutral-800/90 rounded-xl items-center justify-center p-2"
         >
           <Ionicons name="close" size={24} color="white" />
         </TouchableOpacity>
@@ -360,10 +367,10 @@ export const Controls: React.FC<Props> = ({
         style={[
           {
             position: "absolute",
-            width: screenDimensions.width - insets.left - insets.right,
-            maxHeight: screenDimensions.height,
+            width: windowDimensions.width - insets.left - insets.right,
+            maxHeight: windowDimensions.height,
             left: insets.left,
-            bottom: insets.bottom,
+            bottom: Platform.OS === "ios" ? insets.bottom : insets.bottom,
           },
           animatedBottomStyles,
         ]}
@@ -388,7 +395,7 @@ export const Controls: React.FC<Props> = ({
               ? "flex-row space-x-6 py-2 px-4 rounded-full"
               : "flex-col-reverse py-4 px-4 rounded-2xl"
           } 
-              items-center  bg-neutral-800`}
+              items-center  bg-neutral-800/90`}
         >
           <View className="flex flex-row items-center space-x-4">
             <TouchableOpacity