wip

components/ItemContent.tsx

@@ -32,20 +32,20 @@ import { Chromecast } from "./Chromecast";
 import { ItemHeader } from "./ItemHeader";
 import { MediaSourceSelector } from "./MediaSourceSelector";
 import { MoreMoviesWithActor } from "./MoreMoviesWithActor";
+import { useOrientation } from "@/hooks/useOrientation";
 
 export const ItemContent: React.FC<{ item: BaseItemDto }> = React.memo(
   ({ item }) => {
     const [api] = useAtom(apiAtom);
-    const { setPlaySettings, playUrl, playSettings } = usePlaySettings();
-    const [settings] = useSettings();
+
+    const { setPlaySettings, playSettings } = usePlaySettings();
+    const { orientation } = useOrientation();
     const navigation = useNavigation();
+    const insets = useSafeAreaInsets();
+    const [settings] = useSettings();
 
     const [loadingLogo, setLoadingLogo] = useState(true);
 
-    const [orientation, setOrientation] = useState(
-      ScreenOrientation.Orientation.PORTRAIT_UP
-    );
-
     useFocusEffect(
       useCallback(() => {
         if (!settings) return;
@@ -111,22 +111,6 @@ export const ItemContent: React.FC<{ item: BaseItemDto }> = React.memo(
       }));
     };
 
-    useEffect(() => {
-      const subscription = ScreenOrientation.addOrientationChangeListener(
-        (event) => {
-          setOrientation(event.orientationInfo.orientation);
-        }
-      );
-
-      ScreenOrientation.getOrientationAsync().then((initialOrientation) => {
-        setOrientation(initialOrientation);
-      });
-
-      return () => {
-        ScreenOrientation.removeOrientationChangeListener(subscription);
-      };
-    }, []);
-
     const [headerHeight, setHeaderHeight] = useState(350);
 
     useImageColors({ item });
@@ -149,13 +133,9 @@ export const ItemContent: React.FC<{ item: BaseItemDto }> = React.memo(
     }, [item]);
 
     useEffect(() => {
-      // If landscape
-      if (orientation !== ScreenOrientation.Orientation.PORTRAIT_UP) {
+      if (orientation !== ScreenOrientation.OrientationLock.PORTRAIT_UP)
         setHeaderHeight(230);
-        return;
-      }
-
-      if (item.Type === "Movie") setHeaderHeight(500);
+      else if (item.Type === "Movie") setHeaderHeight(500);
       else setHeaderHeight(350);
     }, [item.Type, orientation]);
 
@@ -165,8 +145,6 @@ export const ItemContent: React.FC<{ item: BaseItemDto }> = React.memo(
       return Boolean(logoUrl && loadingLogo);
     }, [loadingLogo, logoUrl]);
 
-    const insets = useSafeAreaInsets();
-
     return (
       <View
         className="flex-1 relative"

components/PlayButton.tsx

@@ -1,11 +1,15 @@
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+import { usePlaySettings } from "@/providers/PlaySettingsProvider";
 import { itemThemeColorAtom } from "@/utils/atoms/primaryColor";
+import { useSettings } from "@/utils/atoms/settings";
 import { getParentBackdropImageUrl } from "@/utils/jellyfin/image/getParentBackdropImageUrl";
 import { getPrimaryImageUrl } from "@/utils/jellyfin/image/getPrimaryImageUrl";
+import { getStreamUrl } from "@/utils/jellyfin/media/getStreamUrl";
+import { chromecastProfile } from "@/utils/profiles/chromecast";
 import { runtimeTicksToMinutes } from "@/utils/time";
 import { useActionSheet } from "@expo/react-native-action-sheet";
 import { Feather, Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
-import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+import { useRouter } from "expo-router";
 import { useAtom, useAtomValue } from "jotai";
 import { useCallback, useEffect, useMemo } from "react";
 import { Alert, Linking, Platform, TouchableOpacity, View } from "react-native";
@@ -27,11 +31,6 @@ import Animated, {
 } from "react-native-reanimated";
 import { Button } from "./Button";
 import { Text } from "./common/Text";
-import { useRouter } from "expo-router";
-import { useSettings } from "@/utils/atoms/settings";
-import { getStreamUrl } from "@/utils/jellyfin/media/getStreamUrl";
-import { chromecastProfile } from "@/utils/profiles/chromecast";
-import { usePlaySettings } from "@/providers/PlaySettingsProvider";
 
 interface Props extends React.ComponentProps<typeof Button> {}
 
@@ -59,7 +58,9 @@ export const PlayButton: React.FC<Props> = ({ ...props }) => {
   const [settings] = useSettings();
 
   const directStream = useMemo(() => {
-    return !url?.includes("m3u8");
+    if (!url || url.length === 0) return "Loading...";
+    if (url.includes("m3u8")) return "Transcoded stream";
+    return "Direct stream";
   }, [url]);
 
   const item = useMemo(() => {
@@ -318,10 +319,11 @@ export const PlayButton: React.FC<Props> = ({ ...props }) => {
   return (
     <View>
       <TouchableOpacity
+        disabled={!item || !url}
         accessibilityLabel="Play button"
         accessibilityHint="Tap to play the media"
         onPress={onPress}
-        className="relative"
+        className={`relative`}
         {...props}
       >
         <View className="absolute w-full h-full top-0 left-0 rounded-xl z-10 overflow-hidden">

hooks/useOrientation.ts

@@ -24,5 +24,5 @@ export const useOrientation = () => {
     };
   }, []);
 
-  return { orientation };
+  return { orientation, setOrientation };
 };

providers/PlaySettingsProvider.tsx

@@ -105,9 +105,11 @@ export const PlaySettingsProvider: React.FC<{ children: React.ReactNode }> = ({
           audioStreamIndex: newSettings?.audioIndex ?? 0,
           subtitleStreamIndex: newSettings?.subtitleIndex ?? -1,
           userId: user.Id,
-          forceDirectPlay: settings.forceDirectPlay,
         });
 
+        console.log("getStreamUrl ~");
+        console.log(`${data?.url?.slice(0, 100)}...${data?.url?.slice(-50)}`);
+
         _setPlaySettings(newSettings);
         setPlayUrl(data?.url!);
         setPlaySessionId(data?.sessionId!);