wip

2026-04-22 08:44:41 +01:00 · 2024-10-08 15:39:44 +02:00
parent a5b4f6cc78
commit ec0843d737
33 changed files with 895 additions and 527 deletions
--- a/app/(auth)/(tabs)/(home)/index.tsx
+++ b/app/(auth)/(tabs)/(home)/index.tsx
@@ -25,7 +25,7 @@ import {
 import NetInfo from "@react-native-community/netinfo";
 import { QueryFunction, useQuery, useQueryClient } from "@tanstack/react-query";
 import { useNavigation, useRouter } from "expo-router";
-import { useAtom } from "jotai";
+import { useAtom, useAtomValue } from "jotai";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import {
  ActivityIndicator,
@@ -57,8 +57,8 @@ export default function index() {
  const queryClient = useQueryClient();
  const router = useRouter();

-  const [api] = useAtom(apiAtom);
-  const [user] = useAtom(userAtom);
+  const api = useAtomValue(apiAtom);
+  const user = useAtomValue(userAtom);

  const [loading, setLoading] = useState(false);
  const [settings, _] = useSettings();
@@ -226,6 +226,7 @@ export default function index() {
            await getItemsApi(api).getResumeItems({
              userId: user.Id,
              enableImageTypes: ["Primary", "Backdrop", "Thumb"],
+              includeItemTypes: ["Movie", "Series", "Episode"],
            })
          ).data.Items || [],
        type: "ScrollingCollectionList",
@@ -340,7 +341,7 @@ export default function index() {

  const insets = useSafeAreaInsets();

-  if (e1 || e2 || !api)
+  if (e1 || e2)
    return (
      <View className="flex flex-col items-center justify-center h-full -mt-6">
        <Text className="text-3xl font-bold mb-2">Oops!</Text>
--- a/app/(auth)/(tabs)/(home)/settings.tsx
+++ b/app/(auth)/(tabs)/(home)/settings.tsx
@@ -74,7 +74,7 @@ export default function settings() {
          registerBackgroundFetchAsync
        </Button> */}
        <View>
-          <Text className="font-bold text-lg mb-2">Information</Text>
+          <Text className="font-bold text-lg mb-2">User Info</Text>

          <View className="flex flex-col rounded-xl overflow-hidden border-neutral-800 divide-y-2 divide-solid divide-neutral-800 ">
            <ListItem title="User" subTitle={user?.Name} />
--- a/app/(auth)/play-music.tsx
+++ b/app/(auth)/play-music.tsx
@@ -1,12 +1,308 @@
-import { StatusBar } from "expo-status-bar";
-import { View, ViewProps } from "react-native";
-
-interface Props extends ViewProps {}
+import { Text } from "@/components/common/Text";
+import AlbumCover from "@/components/posters/AlbumCover";
+import { Controls } from "@/components/video-player/Controls";
+import { useAndroidNavigationBar } from "@/hooks/useAndroidNavigationBar";
+import { useOrientation } from "@/hooks/useOrientation";
+import { useOrientationSettings } from "@/hooks/useOrientationSettings";
+import { useWebSocket } from "@/hooks/useWebsockets";
+import { apiAtom } from "@/providers/JellyfinProvider";
+import {
+  PlaybackType,
+  usePlaySettings,
+} from "@/providers/PlaySettingsProvider";
+import { useSettings } from "@/utils/atoms/settings";
+import { getBackdropUrl } from "@/utils/jellyfin/image/getBackdropUrl";
+import { getAuthHeaders } from "@/utils/jellyfin/jellyfin";
+import { secondsToTicks } from "@/utils/secondsToTicks";
+import { Api } from "@jellyfin/sdk";
+import { getPlaystateApi } from "@jellyfin/sdk/lib/utils/api";
+import * as Haptics from "expo-haptics";
+import { Image } from "expo-image";
+import { useFocusEffect } from "expo-router";
+import { useAtomValue } from "jotai";
+import { debounce } from "lodash";
+import React, { useCallback, useMemo, useRef, useState } from "react";
+import { Dimensions, Pressable, StatusBar, View } from "react-native";
+import { useSharedValue } from "react-native-reanimated";
+import Video, { OnProgressData, VideoRef } from "react-native-video";

 export default function page() {
+  const { playSettings, playUrl, playSessionId } = usePlaySettings();
+  const api = useAtomValue(apiAtom);
+  const [settings] = useSettings();
+  const videoRef = useRef<VideoRef | null>(null);
+  const poster = usePoster(playSettings, api);
+  const videoSource = useVideoSource(playSettings, api, poster, playUrl);
+  const firstTime = useRef(true);
+
+  const screenDimensions = Dimensions.get("screen");
+
+  const [isPlaybackStopped, setIsPlaybackStopped] = useState(false);
+  const [showControls, setShowControls] = useState(true);
+  const [ignoreSafeAreas, setIgnoreSafeAreas] = useState(false);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [isBuffering, setIsBuffering] = useState(true);
+
+  const progress = useSharedValue(0);
+  const isSeeking = useSharedValue(false);
+  const cacheProgress = useSharedValue(0);
+
+  if (!playSettings || !playUrl || !api || !videoSource || !playSettings.item)
+    return null;
+
+  const togglePlay = useCallback(
+    async (ticks: number) => {
+      console.log("togglePlay");
+      Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+      if (isPlaying) {
+        videoRef.current?.pause();
+        await getPlaystateApi(api).onPlaybackProgress({
+          itemId: playSettings.item?.Id!,
+          audioStreamIndex: playSettings.audioIndex
+            ? playSettings.audioIndex
+            : undefined,
+          subtitleStreamIndex: playSettings.subtitleIndex
+            ? playSettings.subtitleIndex
+            : undefined,
+          mediaSourceId: playSettings.mediaSource?.Id!,
+          positionTicks: Math.floor(ticks),
+          isPaused: true,
+          playMethod: playUrl.includes("m3u8") ? "Transcode" : "DirectStream",
+          playSessionId: playSessionId ? playSessionId : undefined,
+        });
+      } else {
+        videoRef.current?.resume();
+        await getPlaystateApi(api).onPlaybackProgress({
+          itemId: playSettings.item?.Id!,
+          audioStreamIndex: playSettings.audioIndex
+            ? playSettings.audioIndex
+            : undefined,
+          subtitleStreamIndex: playSettings.subtitleIndex
+            ? playSettings.subtitleIndex
+            : undefined,
+          mediaSourceId: playSettings.mediaSource?.Id!,
+          positionTicks: Math.floor(ticks),
+          isPaused: false,
+          playMethod: playUrl.includes("m3u8") ? "Transcode" : "DirectStream",
+          playSessionId: playSessionId ? playSessionId : undefined,
+        });
+      }
+    },
+    [isPlaying, api, playSettings?.item?.Id, videoRef, settings]
+  );
+
+  const play = useCallback(() => {
+    console.log("play");
+    videoRef.current?.resume();
+    reportPlaybackStart();
+  }, [videoRef]);
+
+  const pause = useCallback(() => {
+    console.log("play");
+    videoRef.current?.pause();
+  }, [videoRef]);
+
+  const stop = useCallback(() => {
+    console.log("stop");
+    setIsPlaybackStopped(true);
+    videoRef.current?.pause();
+    reportPlaybackStopped();
+  }, [videoRef]);
+
+  const reportPlaybackStopped = async () => {
+    await getPlaystateApi(api).onPlaybackStopped({
+      itemId: playSettings?.item?.Id!,
+      mediaSourceId: playSettings.mediaSource?.Id!,
+      positionTicks: Math.floor(progress.value),
+      playSessionId: playSessionId ? playSessionId : undefined,
+    });
+  };
+
+  const reportPlaybackStart = async () => {
+    await getPlaystateApi(api).onPlaybackStart({
+      itemId: playSettings?.item?.Id!,
+      audioStreamIndex: playSettings.audioIndex
+        ? playSettings.audioIndex
+        : undefined,
+      subtitleStreamIndex: playSettings.subtitleIndex
+        ? playSettings.subtitleIndex
+        : undefined,
+      mediaSourceId: playSettings.mediaSource?.Id!,
+      playMethod: playUrl.includes("m3u8") ? "Transcode" : "DirectStream",
+      playSessionId: playSessionId ? playSessionId : undefined,
+    });
+  };
+
+  const onProgress = useCallback(
+    async (data: OnProgressData) => {
+      if (isSeeking.value === true) return;
+      if (isPlaybackStopped === true) return;
+
+      const ticks = data.currentTime * 10000000;
+
+      progress.value = secondsToTicks(data.currentTime);
+      cacheProgress.value = secondsToTicks(data.playableDuration);
+      setIsBuffering(data.playableDuration === 0);
+
+      if (!playSettings?.item?.Id || data.currentTime === 0) return;
+
+      await getPlaystateApi(api).onPlaybackProgress({
+        itemId: playSettings.item.Id,
+        audioStreamIndex: playSettings.audioIndex
+          ? playSettings.audioIndex
+          : undefined,
+        subtitleStreamIndex: playSettings.subtitleIndex
+          ? playSettings.subtitleIndex
+          : undefined,
+        mediaSourceId: playSettings.mediaSource?.Id!,
+        positionTicks: Math.round(ticks),
+        isPaused: !isPlaying,
+        playMethod: playUrl.includes("m3u8") ? "Transcode" : "DirectStream",
+        playSessionId: playSessionId ? playSessionId : undefined,
+      });
+    },
+    [playSettings?.item.Id, isPlaying, api, isPlaybackStopped]
+  );
+
+  useFocusEffect(
+    useCallback(() => {
+      play();
+
+      return () => {
+        stop();
+      };
+    }, [play, stop])
+  );
+
+  const { orientation } = useOrientation();
+  useOrientationSettings();
+  useAndroidNavigationBar();
+
+  useWebSocket({
+    isPlaying: isPlaying,
+    pauseVideo: pause,
+    playVideo: play,
+    stopPlayback: stop,
+  });
+
  return (
-    <View className="">
-      <StatusBar hidden={false} />
+    <View
+      style={{
+        width: screenDimensions.width,
+        height: screenDimensions.height,
+        position: "relative",
+      }}
+      className="flex flex-col items-center justify-center"
+    >
+      <StatusBar hidden />
+
+      <View className="h-screen w-screen top-0 left-0 flex flex-col items-center justify-center p-4 absolute z-0">
+        <Image
+          source={poster}
+          style={{ width: "100%", height: "100%", resizeMode: "contain" }}
+        />
+      </View>
+
+      <Pressable
+        onPress={() => {
+          setShowControls(!showControls);
+        }}
+        className="absolute z-0 h-full w-full opacity-0"
+      >
+        <Video
+          ref={videoRef}
+          source={videoSource}
+          style={{ width: "100%", height: "100%" }}
+          resizeMode={ignoreSafeAreas ? "cover" : "contain"}
+          onProgress={onProgress}
+          onError={() => {}}
+          onLoad={() => {
+            if (firstTime.current === true) {
+              play();
+              firstTime.current = false;
+            }
+          }}
+          progressUpdateInterval={500}
+          playWhenInactive={true}
+          allowsExternalPlayback={true}
+          playInBackground={true}
+          pictureInPicture={true}
+          showNotificationControls={true}
+          ignoreSilentSwitch="ignore"
+          fullscreen={false}
+          onPlaybackStateChanged={(state) => {
+            setIsPlaying(state.isPlaying);
+          }}
+        />
+      </Pressable>
+
+      <Controls
+        item={playSettings.item}
+        videoRef={videoRef}
+        togglePlay={togglePlay}
+        isPlaying={isPlaying}
+        isSeeking={isSeeking}
+        progress={progress}
+        cacheProgress={cacheProgress}
+        isBuffering={isBuffering}
+        showControls={showControls}
+        setShowControls={setShowControls}
+        setIgnoreSafeAreas={setIgnoreSafeAreas}
+        ignoreSafeAreas={ignoreSafeAreas}
+        enableTrickplay={false}
+      />
    </View>
  );
 }
+
+export function usePoster(
+  playSettings: PlaybackType | null,
+  api: Api | null
+): string | undefined {
+  const poster = useMemo(() => {
+    if (!playSettings?.item || !api) return undefined;
+    return playSettings.item.Type === "Audio"
+      ? `${api.basePath}/Items/${playSettings.item.AlbumId}/Images/Primary?tag=${playSettings.item.AlbumPrimaryImageTag}&quality=90&maxHeight=200&maxWidth=200`
+      : getBackdropUrl({
+          api,
+          item: playSettings.item,
+          quality: 70,
+          width: 200,
+        });
+  }, [playSettings?.item, api]);
+
+  return poster ?? undefined;
+}
+
+export function useVideoSource(
+  playSettings: PlaybackType | null,
+  api: Api | null,
+  poster: string | undefined,
+  playUrl?: string | null
+) {
+  const videoSource = useMemo(() => {
+    if (!playSettings || !api || !playUrl) {
+      return null;
+    }
+
+    const startPosition = playSettings.item?.UserData?.PlaybackPositionTicks
+      ? Math.round(playSettings.item.UserData.PlaybackPositionTicks / 10000)
+      : 0;
+
+    return {
+      uri: playUrl,
+      isNetwork: true,
+      startPosition,
+      headers: getAuthHeaders(api),
+      metadata: {
+        artist: playSettings.item?.AlbumArtist ?? undefined,
+        title: playSettings.item?.Name || "Unknown",
+        description: playSettings.item?.Overview ?? undefined,
+        imageUri: poster,
+        subtitle: playSettings.item?.Album ?? undefined,
+      },
+    };
+  }, [playSettings, api, poster]);
+
+  return videoSource;
+}
--- a/app/(auth)/play-offline-video.tsx
+++ b/app/(auth)/play-offline-video.tsx
@@ -1,5 +1,7 @@
 import { Controls } from "@/components/video-player/Controls";
-import { useWebSocket } from "@/hooks/useWebsockets";
+import { useAndroidNavigationBar } from "@/hooks/useAndroidNavigationBar";
+import { useOrientation } from "@/hooks/useOrientation";
+import { useOrientationSettings } from "@/hooks/useOrientationSettings";
 import { apiAtom } from "@/providers/JellyfinProvider";
 import {
  PlaybackType,
@@ -7,17 +9,18 @@ import {
 } from "@/providers/PlaySettingsProvider";
 import { useSettings } from "@/utils/atoms/settings";
 import { getBackdropUrl } from "@/utils/jellyfin/image/getBackdropUrl";
-import { getAuthHeaders } from "@/utils/jellyfin/jellyfin";
 import orientationToOrientationLock from "@/utils/OrientationLockConverter";
 import { secondsToTicks } from "@/utils/secondsToTicks";
 import { Api } from "@jellyfin/sdk";
-import { getPlaystateApi } from "@jellyfin/sdk/lib/utils/api";
 import * as Haptics from "expo-haptics";
+import * as NavigationBar from "expo-navigation-bar";
+import { useFocusEffect } from "expo-router";
 import * as ScreenOrientation from "expo-screen-orientation";
 import { useAtomValue } from "jotai";
 import React, {
  useCallback,
  useEffect,
+  useLayoutEffect,
  useMemo,
  useRef,
  useState,
@@ -25,16 +28,11 @@ import React, {
 import { Dimensions, Platform, Pressable, StatusBar, View } from "react-native";
 import { useSharedValue } from "react-native-reanimated";
 import Video, { OnProgressData, VideoRef } from "react-native-video";
-import * as NavigationBar from "expo-navigation-bar";
-import { useLocalSearchParams, useGlobalSearchParams, Link } from "expo-router";
-
-import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";

 export default function page() {
  const { playSettings, playUrl } = usePlaySettings();

  const api = useAtomValue(apiAtom);
-  const [settings] = useSettings();
  const videoRef = useRef<VideoRef | null>(null);
  const videoSource = useVideoSource(playSettings, api, playUrl);
  const firstTime = useRef(true);
@@ -45,27 +43,19 @@ export default function page() {
  const [ignoreSafeAreas, setIgnoreSafeAreas] = useState(false);
  const [isPlaying, setIsPlaying] = useState(false);
  const [isBuffering, setIsBuffering] = useState(true);
-  const [orientation, setOrientation] = useState(
-    ScreenOrientation.OrientationLock.UNKNOWN
-  );

  const progress = useSharedValue(0);
  const isSeeking = useSharedValue(false);
  const cacheProgress = useSharedValue(0);

-  if (!playSettings || !playUrl || !api || !videoSource || !playSettings.item)
-    return null;
-
  const togglePlay = useCallback(async () => {
    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
    if (isPlaying) {
-      setIsPlaying(false);
      videoRef.current?.pause();
    } else {
-      setIsPlaying(true);
      videoRef.current?.resume();
    }
-  }, [isPlaying, api, playSettings?.item?.Id, videoRef, settings]);
+  }, [isPlaying]);

  const play = useCallback(() => {
    setIsPlaying(true);
@@ -77,67 +67,29 @@ export default function page() {
    videoRef.current?.pause();
  }, [videoRef]);

-  useEffect(() => {
-    play();
-    return () => {
-      stop();
-    };
-  });
+  useFocusEffect(
+    useCallback(() => {
+      play();

-  useEffect(() => {
-    const orientationSubscription =
-      ScreenOrientation.addOrientationChangeListener((event) => {
-        setOrientation(
-          orientationToOrientationLock(event.orientationInfo.orientation)
-        );
-      });
+      return () => {
+        stop();
+      };
+    }, [play, stop])
+  );

-    ScreenOrientation.getOrientationAsync().then((orientation) => {
-      setOrientation(orientationToOrientationLock(orientation));
-    });
+  const { orientation } = useOrientation();
+  useOrientationSettings();
+  useAndroidNavigationBar();

-    return () => {
-      orientationSubscription.remove();
-    };
+  const onProgress = useCallback(async (data: OnProgressData) => {
+    if (isSeeking.value === true) return;
+    progress.value = secondsToTicks(data.currentTime);
+    cacheProgress.value = secondsToTicks(data.playableDuration);
+    setIsBuffering(data.playableDuration === 0);
  }, []);

-  useEffect(() => {
-    if (settings?.autoRotate) {
-      // Don't need to do anything
-    } else if (settings?.defaultVideoOrientation) {
-      ScreenOrientation.lockAsync(settings.defaultVideoOrientation);
-    }
-
-    if (Platform.OS === "android") {
-      NavigationBar.setVisibilityAsync("hidden");
-      NavigationBar.setBehaviorAsync("overlay-swipe");
-    }
-
-    return () => {
-      if (settings?.autoRotate) {
-        ScreenOrientation.unlockAsync();
-      } else {
-        ScreenOrientation.lockAsync(
-          ScreenOrientation.OrientationLock.PORTRAIT_UP
-        );
-      }
-
-      if (Platform.OS === "android") {
-        NavigationBar.setVisibilityAsync("visible");
-        NavigationBar.setBehaviorAsync("inset-swipe");
-      }
-    };
-  }, [settings]);
-
-  const onProgress = useCallback(
-    async (data: OnProgressData) => {
-      if (isSeeking.value === true) return;
-      progress.value = secondsToTicks(data.currentTime);
-      cacheProgress.value = secondsToTicks(data.playableDuration);
-      setIsBuffering(data.playableDuration === 0);
-    },
-    [playSettings?.item.Id, isPlaying, api]
-  );
+  if (!playSettings || !playUrl || !api || !videoSource || !playSettings.item)
+    return null;

  return (
    <View
@@ -158,7 +110,6 @@ export default function page() {
        <Video
          ref={videoRef}
          source={videoSource}
-          paused={!isPlaying}
          style={{ width: "100%", height: "100%" }}
          resizeMode={ignoreSafeAreas ? "cover" : "contain"}
          onProgress={onProgress}
@@ -176,7 +127,9 @@ export default function page() {
          showNotificationControls={true}
          ignoreSilentSwitch="ignore"
          fullscreen={false}
-          onPlaybackStateChanged={(state) => setIsPlaying(state.isPlaying)}
+          onPlaybackStateChanged={(state) => {
+            if (isSeeking.value === false) setIsPlaying(state.isPlaying);
+          }}
        />
      </Pressable>

@@ -198,25 +151,6 @@ export default function page() {
  );
 }

-export function usePoster(
-  playSettings: PlaybackType | null,
-  api: Api | null
-): string | undefined {
-  const poster = useMemo(() => {
-    if (!playSettings?.item || !api) return undefined;
-    return playSettings.item.Type === "Audio"
-      ? `${api.basePath}/Items/${playSettings.item.AlbumId}/Images/Primary?tag=${playSettings.item.AlbumPrimaryImageTag}&quality=90&maxHeight=200&maxWidth=200`
-      : getBackdropUrl({
-          api,
-          item: playSettings.item,
-          quality: 70,
-          width: 200,
-        });
-  }, [playSettings?.item, api]);
-
-  return poster ?? undefined;
-}
-
 export function useVideoSource(
  playSettings: PlaybackType | null,
  api: Api | null,
--- a/app/(auth)/play-video.tsx
+++ b/app/(auth)/play-video.tsx
@@ -1,4 +1,7 @@
 import { Controls } from "@/components/video-player/Controls";
+import { useAndroidNavigationBar } from "@/hooks/useAndroidNavigationBar";
+import { useOrientation } from "@/hooks/useOrientation";
+import { useOrientationSettings } from "@/hooks/useOrientationSettings";
 import { useWebSocket } from "@/hooks/useWebsockets";
 import { apiAtom } from "@/providers/JellyfinProvider";
 import {
@@ -8,25 +11,22 @@ import {
 import { useSettings } from "@/utils/atoms/settings";
 import { getBackdropUrl } from "@/utils/jellyfin/image/getBackdropUrl";
 import { getAuthHeaders } from "@/utils/jellyfin/jellyfin";
-import orientationToOrientationLock from "@/utils/OrientationLockConverter";
 import { secondsToTicks } from "@/utils/secondsToTicks";
 import { Api } from "@jellyfin/sdk";
 import { getPlaystateApi } from "@jellyfin/sdk/lib/utils/api";
 import * as Haptics from "expo-haptics";
-import * as ScreenOrientation from "expo-screen-orientation";
-import { useAtomValue } from "jotai";
-import React, {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
-import { Dimensions, Platform, Pressable, StatusBar, View } from "react-native";
-import { useSharedValue } from "react-native-reanimated";
-import Video, { OnProgressData, VideoRef } from "react-native-video";
-import * as NavigationBar from "expo-navigation-bar";
 import { useFocusEffect } from "expo-router";
+import { useAtomValue } from "jotai";
+import React, { useCallback, useMemo, useRef, useState } from "react";
+import { Dimensions, Pressable, StatusBar, View } from "react-native";
+import { useSharedValue } from "react-native-reanimated";
+import Video, {
+  OnProgressData,
+  VideoRef,
+  SelectedTrack,
+  SelectedTrackType,
+} from "react-native-video";
+import { WithDefault } from "react-native/Libraries/Types/CodegenTypes";

 export default function page() {
  const { playSettings, playUrl, playSessionId } = usePlaySettings();
@@ -44,9 +44,6 @@ export default function page() {
  const [ignoreSafeAreas, setIgnoreSafeAreas] = useState(false);
  const [isPlaying, setIsPlaying] = useState(false);
  const [isBuffering, setIsBuffering] = useState(true);
-  const [orientation, setOrientation] = useState(
-    ScreenOrientation.OrientationLock.UNKNOWN
-  );

  const progress = useSharedValue(0);
  const isSeeking = useSharedValue(false);
@@ -59,7 +56,6 @@ export default function page() {
    async (ticks: number) => {
      Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
      if (isPlaying) {
-        setIsPlaying(false);
        videoRef.current?.pause();
        await getPlaystateApi(api).onPlaybackProgress({
          itemId: playSettings.item?.Id!,
@@ -76,7 +72,6 @@ export default function page() {
          playSessionId: playSessionId ? playSessionId : undefined,
        });
      } else {
-        setIsPlaying(true);
        videoRef.current?.resume();
        await getPlaystateApi(api).onPlaybackProgress({
          itemId: playSettings.item?.Id!,
@@ -98,19 +93,16 @@ export default function page() {
  );

  const play = useCallback(() => {
-    setIsPlaying(true);
    videoRef.current?.resume();
    reportPlaybackStart();
  }, [videoRef]);

  const pause = useCallback(() => {
-    setIsPlaying(false);
    videoRef.current?.pause();
  }, [videoRef]);

  const stop = useCallback(() => {
    setIsPlaybackStopped(true);
-    setIsPlaying(false);
    videoRef.current?.pause();
    reportPlaybackStopped();
  }, [videoRef]);
@@ -142,7 +134,7 @@ export default function page() {
  const onProgress = useCallback(
    async (data: OnProgressData) => {
      if (isSeeking.value === true) return;
-      if (isPlaybackStopped) return;
+      if (isPlaybackStopped === true) return;

      const ticks = data.currentTime * 10000000;

@@ -180,50 +172,9 @@ export default function page() {
    }, [play, stop])
  );

-  useEffect(() => {
-    const orientationSubscription =
-      ScreenOrientation.addOrientationChangeListener((event) => {
-        setOrientation(
-          orientationToOrientationLock(event.orientationInfo.orientation)
-        );
-      });
-
-    ScreenOrientation.getOrientationAsync().then((orientation) => {
-      setOrientation(orientationToOrientationLock(orientation));
-    });
-
-    return () => {
-      orientationSubscription.remove();
-    };
-  }, []);
-
-  useEffect(() => {
-    if (settings?.autoRotate) {
-      // Don't need to do anything
-    } else if (settings?.defaultVideoOrientation) {
-      ScreenOrientation.lockAsync(settings.defaultVideoOrientation);
-    }
-
-    if (Platform.OS === "android") {
-      NavigationBar.setVisibilityAsync("hidden");
-      NavigationBar.setBehaviorAsync("overlay-swipe");
-    }
-
-    return () => {
-      if (settings?.autoRotate) {
-        ScreenOrientation.unlockAsync();
-      } else {
-        ScreenOrientation.lockAsync(
-          ScreenOrientation.OrientationLock.PORTRAIT_UP
-        );
-      }
-
-      if (Platform.OS === "android") {
-        NavigationBar.setVisibilityAsync("visible");
-        NavigationBar.setBehaviorAsync("inset-swipe");
-      }
-    };
-  }, [settings]);
+  const { orientation } = useOrientation();
+  useOrientationSettings();
+  useAndroidNavigationBar();

  useWebSocket({
    isPlaying: isPlaying,
@@ -232,6 +183,36 @@ export default function page() {
    stopPlayback: stop,
  });

+  const selectedSubtitleTrack = useMemo(() => {
+    const a = playSettings?.mediaSource?.MediaStreams?.find(
+      (s) => s.Index === playSettings.subtitleIndex
+    );
+    console.log(a);
+    return a;
+  }, [playSettings]);
+
+  const [hlsSubTracks, setHlsSubTracks] = useState<
+    {
+      index: number;
+      language?: string | undefined;
+      selected?: boolean | undefined;
+      title?: string | undefined;
+      type: any;
+    }[]
+  >([]);
+
+  const selectedTextTrack = useMemo(() => {
+    for (let st of hlsSubTracks) {
+      if (st.title === selectedSubtitleTrack?.DisplayTitle) {
+        return {
+          type: SelectedTrackType.TITLE,
+          value: selectedSubtitleTrack?.DisplayTitle ?? "",
+        };
+      }
+    }
+    return undefined;
+  }, [hlsSubTracks]);
+
  return (
    <View
      style={{
@@ -251,7 +232,6 @@ export default function page() {
        <Video
          ref={videoRef}
          source={videoSource}
-          paused={!isPlaying}
          style={{ width: "100%", height: "100%" }}
          resizeMode={ignoreSafeAreas ? "cover" : "contain"}
          onProgress={onProgress}
@@ -270,7 +250,14 @@ export default function page() {
          showNotificationControls={true}
          ignoreSilentSwitch="ignore"
          fullscreen={false}
-          onPlaybackStateChanged={(state) => setIsPlaying(state.isPlaying)}
+          onPlaybackStateChanged={(state) => {
+            if (isSeeking.value === false) setIsPlaying(state.isPlaying);
+          }}
+          onTextTracks={(data) => {
+            console.log("onTextTracks ~", data);
+            setHlsSubTracks(data.textTracks as any);
+          }}
+          selectedTextTrack={selectedTextTrack}
        />
      </Pressable>

--- a/app/_layout.tsx
+++ b/app/_layout.tsx
@@ -9,6 +9,7 @@ import { PlaySettingsProvider } from "@/providers/PlaySettingsProvider";
 import { orientationAtom } from "@/utils/atoms/orientation";
 import { Settings, useSettings } from "@/utils/atoms/settings";
 import { BACKGROUND_FETCH_TASK } from "@/utils/background-tasks";
+import { writeToLog } from "@/utils/log";
 import { cancelJobById, getAllJobsByDeviceId } from "@/utils/optimize-server";
 import { ActionSheetProvider } from "@expo/react-native-action-sheet";
 import { BottomSheetModalProvider } from "@gorhom/bottom-sheet";
@@ -198,8 +199,10 @@ const checkAndRequestPermissions = async () => {
      const { status } = await Notifications.requestPermissionsAsync();

      if (status === "granted") {
+        writeToLog("INFO", "Notification permissions granted.");
        console.log("Notification permissions granted.");
      } else {
+        writeToLog("ERROR", "Notification permissions denied.");
        console.log("Notification permissions denied.");
      }

@@ -208,6 +211,11 @@ const checkAndRequestPermissions = async () => {
      console.log("Already asked for notification permissions before.");
    }
  } catch (error) {
+    writeToLog(
+      "ERROR",
+      "Error checking/requesting notification permissions:",
+      error
+    );
    console.error("Error checking/requesting notification permissions:", error);
  }
 };
@@ -403,6 +411,7 @@ async function saveDownloadedItemInfo(item: BaseItemDto) {

    await AsyncStorage.setItem("downloadedItems", JSON.stringify(items));
  } catch (error) {
+    writeToLog("ERROR", "Failed to save downloaded item information:", error);
    console.error("Failed to save downloaded item information:", error);
  }
 }