From b25cdce702d97d05882924cbe65d752d64243f4d Mon Sep 17 00:00:00 2001
From: Fredrik Burmester <fredrik.burmester@gmail.com>
Date: Fri, 4 Oct 2024 12:08:45 +0200
Subject: [PATCH 01/10] first commit

---
 app/(auth)/play-video.tsx | 104 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 104 insertions(+)
 create mode 100644 app/(auth)/play-video.tsx

diff --git a/app/(auth)/play-video.tsx b/app/(auth)/play-video.tsx
new file mode 100644
index 00000000..66050da7
--- /dev/null
+++ b/app/(auth)/play-video.tsx
@@ -0,0 +1,104 @@
+import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+import { useSettings } from "@/utils/atoms/settings";
+import { getBackdropUrl } from "@/utils/jellyfin/image/getBackdropUrl";
+import { getAuthHeaders } from "@/utils/jellyfin/jellyfin";
+import { Api } from "@jellyfin/sdk";
+import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
+import { useRouter } from "expo-router";
+import { atom, useAtom } from "jotai";
+import { useMemo, useRef, useState } from "react";
+import Video, { VideoRef } from "react-native-video";
+
+type PlaybackType = {
+  item: BaseItemDto;
+  mediaSourceId: string;
+  subtitleIndex: number;
+  audioIndex: number;
+  url: string;
+  quality: any;
+};
+
+export const playInfoAtom = atom<PlaybackType | null>(null);
+
+export default function page() {
+  const [playInfo, setPlayInfo] = useAtom(playInfoAtom);
+  const [api] = useAtom(apiAtom);
+  const [user] = useAtom(userAtom);
+  const [settings] = useSettings();
+  const router = useRouter();
+  const videoRef = useRef<VideoRef | null>(null);
+  const poster = usePoster(playInfo, api);
+  const videoSource = useVideoSource(playInfo, api, poster);
+
+  const [ignoreSafeArea, setIgnoreSafeArea] = useState(false);
+
+  if (!playInfo || !api || !videoSource) return null;
+
+  return (
+    <Video
+      ref={videoRef}
+      source={videoSource}
+      style={{ width: "100%", height: "100%" }}
+      resizeMode={ignoreSafeArea ? "cover" : "contain"}
+      onProgress={handleVideoProgress}
+      onLoad={(data) => (max.value = secondsToTicks(data.duration))}
+      onError={handleVideoError}
+      playWhenInactive={true}
+      allowsExternalPlayback={true}
+      playInBackground={true}
+      pictureInPicture={true}
+      showNotificationControls={true}
+      ignoreSilentSwitch="ignore"
+      fullscreen={false}
+    />
+  );
+}
+
+export function usePoster(
+  playInfo: PlaybackType | null,
+  api: Api | null
+): string | undefined {
+  const poster = useMemo(() => {
+    if (!playInfo?.item || !api) return undefined;
+    return playInfo.item.Type === "Audio"
+      ? `${api.basePath}/Items/${playInfo.item.AlbumId}/Images/Primary?tag=${playInfo.item.AlbumPrimaryImageTag}&quality=90&maxHeight=200&maxWidth=200`
+      : getBackdropUrl({
+          api,
+          item: playInfo.item,
+          quality: 70,
+          width: 200,
+        });
+  }, [playInfo?.item, api]);
+
+  return poster ?? undefined;
+}
+
+export function useVideoSource(
+  playInfo: PlaybackType | null,
+  api: Api | null,
+  poster: string | undefined
+) {
+  const videoSource = useMemo(() => {
+    if (!playInfo || !api) return null;
+
+    const startPosition = playInfo.item?.UserData?.PlaybackPositionTicks
+      ? Math.round(playInfo.item.UserData.PlaybackPositionTicks / 10000)
+      : 0;
+
+    return {
+      uri: playInfo.url,
+      isNetwork: true,
+      startPosition,
+      headers: getAuthHeaders(api),
+      metadata: {
+        artist: playInfo.item?.AlbumArtist ?? undefined,
+        title: playInfo.item?.Name || "Unknown",
+        description: playInfo.item?.Overview ?? undefined,
+        imageUri: poster,
+        subtitle: playInfo.item?.Album ?? undefined,
+      },
+    };
+  }, [playInfo, api, poster]);
+
+  return videoSource;
+}

From bf1efd7ca28807884c792b805a5431299b264600 Mon Sep 17 00:00:00 2001
From: Fredrik Burmester <fredrik.burmester@gmail.com>
Date: Sat, 5 Oct 2024 09:29:42 +0200
Subject: [PATCH 02/10] chore

---
 app/(auth)/play-video.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/(auth)/play-video.tsx b/app/(auth)/play-video.tsx
index 66050da7..09851ef7 100644
--- a/app/(auth)/play-video.tsx
+++ b/app/(auth)/play-video.tsx
@@ -40,9 +40,9 @@ export default function page() {
       source={videoSource}
       style={{ width: "100%", height: "100%" }}
       resizeMode={ignoreSafeArea ? "cover" : "contain"}
-      onProgress={handleVideoProgress}
-      onLoad={(data) => (max.value = secondsToTicks(data.duration))}
-      onError={handleVideoError}
+      onProgress={() => {}}
+      onLoad={(data) => {}}
+      onError={() => {}}
       playWhenInactive={true}
       allowsExternalPlayback={true}
       playInBackground={true}

From 0233862fc1b004a8d3f9fe7bb334042ecf2c8644 Mon Sep 17 00:00:00 2001
From: Fredrik Burmester <fredrik.burmester@gmail.com>
Date: Sun, 6 Oct 2024 13:03:16 +0200
Subject: [PATCH 03/10] wip

---
 app/(auth)/play-video.tsx            | 191 +++++++++---
 app/_layout.tsx                      | 115 +++----
 components/AudioTrackSelector.tsx    |  87 +++---
 components/ItemContent.tsx           | 142 ++-------
 components/MediaSourceSelector.tsx   |  67 ++--
 components/PlayButton.tsx            |   6 +-
 components/SubtitleTrackSelector.tsx |  65 ++--
 components/video-player/Controls.tsx | 451 +++++++++++++++++++++++++++
 hooks/useAdjacentEpisodes.ts         |  44 +--
 hooks/useTrickplay.ts                |  26 +-
 providers/PlaySettingsProvider.tsx   | 118 +++++++
 utils/atoms/settings.ts              |   2 +-
 utils/jellyfin/media/getStreamUrl.ts |  18 +-
 13 files changed, 941 insertions(+), 391 deletions(-)
 create mode 100644 components/video-player/Controls.tsx
 create mode 100644 providers/PlaySettingsProvider.tsx

diff --git a/app/(auth)/play-video.tsx b/app/(auth)/play-video.tsx
index 09851ef7..7e8e2d17 100644
--- a/app/(auth)/play-video.tsx
+++ b/app/(auth)/play-video.tsx
@@ -1,104 +1,191 @@
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
-import { useSettings } from "@/utils/atoms/settings";
+import { settingsAtom, useSettings } from "@/utils/atoms/settings";
 import { getBackdropUrl } from "@/utils/jellyfin/image/getBackdropUrl";
 import { getAuthHeaders } from "@/utils/jellyfin/jellyfin";
+import { getStreamUrl } from "@/utils/jellyfin/media/getStreamUrl";
 import { Api } from "@jellyfin/sdk";
-import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
+import {
+  BaseItemDto,
+  MediaSourceInfo,
+} from "@jellyfin/sdk/lib/generated-client";
 import { useRouter } from "expo-router";
 import { atom, useAtom } from "jotai";
-import { useMemo, useRef, useState } from "react";
-import Video, { VideoRef } from "react-native-video";
-
-type PlaybackType = {
-  item: BaseItemDto;
-  mediaSourceId: string;
-  subtitleIndex: number;
-  audioIndex: number;
-  url: string;
-  quality: any;
-};
-
-export const playInfoAtom = atom<PlaybackType | null>(null);
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import Video, { OnProgressData, VideoRef } from "react-native-video";
+import settings from "./(tabs)/(home)/settings";
+import iosFmp4 from "@/utils/profiles/iosFmp4";
+import native from "@/utils/profiles/native";
+import old from "@/utils/profiles/old";
+import {
+  PlaybackType,
+  usePlaySettings,
+} from "@/providers/PlaySettingsProvider";
+import { StatusBar, View } from "react-native";
+import React from "react";
+import { Controls } from "@/components/video-player/Controls";
+import { reportPlaybackProgress } from "@/utils/jellyfin/playstate/reportPlaybackProgress";
+import { useSharedValue } from "react-native-reanimated";
+import { secondsToTicks } from "@/utils/secondsToTicks";
 
 export default function page() {
-  const [playInfo, setPlayInfo] = useAtom(playInfoAtom);
+  const { playSettings, setPlaySettings, playUrl, reportStopPlayback } =
+    usePlaySettings();
   const [api] = useAtom(apiAtom);
   const [user] = useAtom(userAtom);
   const [settings] = useSettings();
   const router = useRouter();
   const videoRef = useRef<VideoRef | null>(null);
-  const poster = usePoster(playInfo, api);
-  const videoSource = useVideoSource(playInfo, api, poster);
+  const poster = usePoster(playSettings, api);
+  const videoSource = useVideoSource(playSettings, api, poster, playUrl);
 
   const [ignoreSafeArea, setIgnoreSafeArea] = useState(false);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [isBuffering, setIsBuffering] = useState(true);
 
-  if (!playInfo || !api || !videoSource) return null;
+  const progress = useSharedValue(0);
+  const isSeeking = useSharedValue(false);
+  const cacheProgress = useSharedValue(0);
+
+  useEffect(() => {
+    console.log("play-video ~", playUrl);
+  });
+
+  if (!playSettings || !playUrl || !api || !videoSource || !playSettings.item)
+    return null;
+
+  const togglePlay = useCallback(
+    (ticks: number) => {
+      if (isPlaying) {
+        videoRef.current?.pause();
+        reportPlaybackProgress({
+          api,
+          itemId: playSettings?.item?.Id,
+          positionTicks: ticks,
+          sessionId: undefined,
+          IsPaused: true,
+        });
+      } else {
+        videoRef.current?.resume();
+        reportPlaybackProgress({
+          api,
+          itemId: playSettings?.item?.Id,
+          positionTicks: ticks,
+          sessionId: undefined,
+          IsPaused: false,
+        });
+      }
+    },
+    [isPlaying, api, playSettings?.item?.Id, videoRef]
+  );
+
+  useEffect(() => {
+    if (!isPlaying) {
+      togglePlay(playSettings.item?.UserData?.PlaybackPositionTicks || 0);
+    }
+  }, [isPlaying]);
+
+  const onProgress = useCallback(
+    (data: OnProgressData) => {
+      if (isSeeking.value === true) return;
+      progress.value = secondsToTicks(data.currentTime);
+      cacheProgress.value = secondsToTicks(data.playableDuration);
+      setIsBuffering(data.playableDuration === 0);
+
+      if (!playSettings?.item?.Id || data.currentTime === 0) return;
+      const ticks = data.currentTime * 10000000;
+      reportPlaybackProgress({
+        api,
+        itemId: playSettings?.item.Id,
+        positionTicks: ticks,
+        sessionId: undefined,
+        IsPaused: !isPlaying,
+      });
+    },
+    [playSettings?.item.Id, isPlaying, api]
+  );
 
   return (
-    <Video
-      ref={videoRef}
-      source={videoSource}
-      style={{ width: "100%", height: "100%" }}
-      resizeMode={ignoreSafeArea ? "cover" : "contain"}
-      onProgress={() => {}}
-      onLoad={(data) => {}}
-      onError={() => {}}
-      playWhenInactive={true}
-      allowsExternalPlayback={true}
-      playInBackground={true}
-      pictureInPicture={true}
-      showNotificationControls={true}
-      ignoreSilentSwitch="ignore"
-      fullscreen={false}
-    />
+    <View className="relative h-screen w-screen flex flex-col items-center justify-center">
+      <StatusBar hidden />
+      <Video
+        ref={videoRef}
+        source={videoSource}
+        paused={!isPlaying}
+        style={{ width: "100%", height: "100%" }}
+        resizeMode={ignoreSafeArea ? "cover" : "contain"}
+        onProgress={onProgress}
+        onLoad={(data) => {}}
+        onError={() => {}}
+        playWhenInactive={true}
+        allowsExternalPlayback={true}
+        playInBackground={true}
+        pictureInPicture={true}
+        showNotificationControls={true}
+        ignoreSilentSwitch="ignore"
+        fullscreen={false}
+        onPlaybackStateChanged={(state) => setIsPlaying(state.isPlaying)}
+      />
+      <Controls
+        item={playSettings.item}
+        videoRef={videoRef}
+        togglePlay={togglePlay}
+        isPlaying={isPlaying}
+        isSeeking={isSeeking}
+        progress={progress}
+        cacheProgress={cacheProgress}
+      />
+    </View>
   );
 }
 
 export function usePoster(
-  playInfo: PlaybackType | null,
+  playSettings: PlaybackType | null,
   api: Api | null
 ): string | undefined {
   const poster = useMemo(() => {
-    if (!playInfo?.item || !api) return undefined;
-    return playInfo.item.Type === "Audio"
-      ? `${api.basePath}/Items/${playInfo.item.AlbumId}/Images/Primary?tag=${playInfo.item.AlbumPrimaryImageTag}&quality=90&maxHeight=200&maxWidth=200`
+    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: playInfo.item,
+          item: playSettings.item,
           quality: 70,
           width: 200,
         });
-  }, [playInfo?.item, api]);
+  }, [playSettings?.item, api]);
 
   return poster ?? undefined;
 }
 
 export function useVideoSource(
-  playInfo: PlaybackType | null,
+  playSettings: PlaybackType | null,
   api: Api | null,
-  poster: string | undefined
+  poster: string | undefined,
+  playUrl?: string | null
 ) {
   const videoSource = useMemo(() => {
-    if (!playInfo || !api) return null;
+    if (!playSettings || !api || !playUrl) {
+      return null;
+    }
 
-    const startPosition = playInfo.item?.UserData?.PlaybackPositionTicks
-      ? Math.round(playInfo.item.UserData.PlaybackPositionTicks / 10000)
+    const startPosition = playSettings.item?.UserData?.PlaybackPositionTicks
+      ? Math.round(playSettings.item.UserData.PlaybackPositionTicks / 10000)
       : 0;
 
     return {
-      uri: playInfo.url,
+      uri: playUrl,
       isNetwork: true,
       startPosition,
       headers: getAuthHeaders(api),
       metadata: {
-        artist: playInfo.item?.AlbumArtist ?? undefined,
-        title: playInfo.item?.Name || "Unknown",
-        description: playInfo.item?.Overview ?? undefined,
+        artist: playSettings.item?.AlbumArtist ?? undefined,
+        title: playSettings.item?.Name || "Unknown",
+        description: playSettings.item?.Overview ?? undefined,
         imageUri: poster,
-        subtitle: playInfo.item?.Album ?? undefined,
+        subtitle: playSettings.item?.Album ?? undefined,
       },
     };
-  }, [playInfo, api, poster]);
+  }, [playSettings, api, poster]);
 
   return videoSource;
 }
diff --git a/app/_layout.tsx b/app/_layout.tsx
index 828f4005..206aa7ab 100644
--- a/app/_layout.tsx
+++ b/app/_layout.tsx
@@ -6,6 +6,7 @@ import {
 } from "@/providers/JellyfinProvider";
 import { JobQueueProvider } from "@/providers/JobQueueProvider";
 import { PlaybackProvider } from "@/providers/PlaybackProvider";
+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";
@@ -317,62 +318,68 @@ function Layout() {
             <ActionSheetProvider>
               <BottomSheetModalProvider>
                 <JellyfinProvider>
-                  <PlaybackProvider>
-                    <StatusBar style="light" backgroundColor="#000" />
-                    <ThemeProvider value={DarkTheme}>
-                      <Stack
-                        initialRouteName="/home"
-                        screenOptions={{
-                          autoHideHomeIndicator: true,
-                        }}
-                      >
-                        <Stack.Screen
-                          name="(auth)/(tabs)"
-                          options={{
-                            headerShown: false,
-                            title: "",
+                  <PlaySettingsProvider>
+                    <PlaybackProvider>
+                      <StatusBar style="light" backgroundColor="#000" />
+                      <ThemeProvider value={DarkTheme}>
+                        <Stack initialRouteName="/home">
+                          <Stack.Screen
+                            name="(auth)/(tabs)"
+                            options={{
+                              headerShown: false,
+                              title: "",
+                            }}
+                          />
+                          <Stack.Screen
+                            name="(auth)/play"
+                            options={{
+                              headerShown: false,
+                              autoHideHomeIndicator: true,
+                              title: "",
+                              animation: "fade",
+                            }}
+                          />
+                          <Stack.Screen
+                            name="(auth)/play-video"
+                            options={{
+                              headerShown: false,
+                              autoHideHomeIndicator: true,
+                              title: "",
+                              animation: "fade",
+                            }}
+                          />
+                          <Stack.Screen
+                            name="(auth)/play-music"
+                            options={{
+                              headerShown: false,
+                              autoHideHomeIndicator: true,
+                              title: "",
+                              animation: "fade",
+                            }}
+                          />
+                          <Stack.Screen
+                            name="login"
+                            options={{ headerShown: false, title: "Login" }}
+                          />
+                          <Stack.Screen name="+not-found" />
+                        </Stack>
+                        <Toaster
+                          duration={4000}
+                          toastOptions={{
+                            style: {
+                              backgroundColor: "#262626",
+                              borderColor: "#363639",
+                              borderWidth: 1,
+                            },
+                            titleStyle: {
+                              color: "white",
+                            },
                           }}
+                          closeButton
                         />
-                        <Stack.Screen
-                          name="(auth)/play"
-                          options={{
-                            headerShown: false,
-                            autoHideHomeIndicator: true,
-                            title: "",
-                            animation: "fade",
-                          }}
-                        />
-                        <Stack.Screen
-                          name="(auth)/play-music"
-                          options={{
-                            headerShown: false,
-                            autoHideHomeIndicator: true,
-                            title: "",
-                            animation: "fade",
-                          }}
-                        />
-                        <Stack.Screen
-                          name="login"
-                          options={{ headerShown: false, title: "Login" }}
-                        />
-                        <Stack.Screen name="+not-found" />
-                      </Stack>
-                      <Toaster
-                        duration={4000}
-                        toastOptions={{
-                          style: {
-                            backgroundColor: "#262626",
-                            borderColor: "#363639",
-                            borderWidth: 1,
-                          },
-                          titleStyle: {
-                            color: "white",
-                          },
-                        }}
-                        closeButton
-                      />
-                    </ThemeProvider>
-                  </PlaybackProvider>
+                      </ThemeProvider>
+                    </PlaybackProvider>
+                  </PlaySettingsProvider>
                 </JellyfinProvider>
               </BottomSheetModalProvider>
             </ActionSheetProvider>
diff --git a/components/AudioTrackSelector.tsx b/components/AudioTrackSelector.tsx
index 7a01caba..bde7e8cb 100644
--- a/components/AudioTrackSelector.tsx
+++ b/components/AudioTrackSelector.tsx
@@ -1,56 +1,60 @@
-import { TouchableOpacity, View } from "react-native";
+import { useSettings } from "@/utils/atoms/settings";
+import { useAtom } from "jotai";
+import { useEffect, useMemo } from "react";
+import { TouchableOpacity, View, ViewProps } from "react-native";
 import * as DropdownMenu from "zeego/dropdown-menu";
 import { Text } from "./common/Text";
-import { atom, useAtom } from "jotai";
-import {
-  BaseItemDto,
-  MediaSourceInfo,
-} from "@jellyfin/sdk/lib/generated-client/models";
-import { useEffect, useMemo } from "react";
-import { MediaStream } from "@jellyfin/sdk/lib/generated-client/models";
-import { tc } from "@/utils/textTools";
-import { useSettings } from "@/utils/atoms/settings";
+import { usePlaySettings } from "@/providers/PlaySettingsProvider";
 
-interface Props extends React.ComponentProps<typeof View> {
-  source: MediaSourceInfo;
-  onChange: (value: number) => void;
-  selected: number;
-}
+interface Props extends ViewProps {}
 
-export const AudioTrackSelector: React.FC<Props> = ({
-  source,
-  onChange,
-  selected,
-  ...props
-}) => {
+export const AudioTrackSelector: React.FC<Props> = ({ ...props }) => {
+  const { playSettings, setPlaySettings, playUrl } = usePlaySettings();
   const [settings] = useSettings();
 
+  const selectedIndex = useMemo(() => {
+    return playSettings?.audioIndex;
+  }, [playSettings?.audioIndex]);
+
   const audioStreams = useMemo(
-    () => source.MediaStreams?.filter((x) => x.Type === "Audio"),
-    [source]
+    () =>
+      playSettings?.mediaSource?.MediaStreams?.filter(
+        (x) => x.Type === "Audio"
+      ),
+    [playSettings?.mediaSource]
   );
 
-  const selectedAudioSteam = useMemo(
-    () => audioStreams?.find((x) => x.Index === selected),
-    [audioStreams, selected]
+  const selectedAudioStream = useMemo(
+    () => audioStreams?.find((x) => x.Index === selectedIndex),
+    [audioStreams, selectedIndex]
   );
 
+  // Set default audio stream only if none is selected and we have audio streams
   useEffect(() => {
-    const defaultAudioIndex = audioStreams?.find(
+    if (playSettings?.audioIndex !== undefined || !audioStreams?.length) return;
+
+    const defaultAudioIndex = audioStreams.find(
       (x) => x.Language === settings?.defaultAudioLanguage
     )?.Index;
-    if (defaultAudioIndex !== undefined && defaultAudioIndex !== null) {
-      onChange(defaultAudioIndex);
-      return;
-    }
-    const index = source.DefaultAudioStreamIndex;
-    if (index !== undefined && index !== null) {
-      onChange(index);
-      return;
-    }
 
-    onChange(0);
-  }, [audioStreams, settings]);
+    if (defaultAudioIndex !== undefined) {
+      setPlaySettings((prev) => ({
+        ...prev,
+        audioIndex: defaultAudioIndex,
+      }));
+    } else {
+      const index = playSettings?.mediaSource?.DefaultAudioStreamIndex ?? 0;
+      setPlaySettings((prev) => ({
+        ...prev,
+        audioIndex: index,
+      }));
+    }
+  }, [
+    audioStreams,
+    settings?.defaultAudioLanguage,
+    playSettings?.mediaSource,
+    setPlaySettings,
+  ]);
 
   return (
     <View
@@ -65,7 +69,7 @@ export const AudioTrackSelector: React.FC<Props> = ({
             <Text className="opacity-50 mb-1 text-xs">Audio</Text>
             <TouchableOpacity className="bg-neutral-900  h-10 rounded-xl border-neutral-800 border px-3 py-2 flex flex-row items-center justify-between">
               <Text className="" numberOfLines={1}>
-                {selectedAudioSteam?.DisplayTitle}
+                {selectedAudioStream?.DisplayTitle}
               </Text>
             </TouchableOpacity>
           </View>
@@ -85,7 +89,10 @@ export const AudioTrackSelector: React.FC<Props> = ({
               key={idx.toString()}
               onSelect={() => {
                 if (audio.Index !== null && audio.Index !== undefined)
-                  onChange(audio.Index);
+                  setPlaySettings((prev) => ({
+                    ...prev,
+                    audioIndex: audio.Index,
+                  }));
               }}
             >
               <DropdownMenu.ItemTitle>
diff --git a/components/ItemContent.tsx b/components/ItemContent.tsx
index 1634be65..7488fdf4 100644
--- a/components/ItemContent.tsx
+++ b/components/ItemContent.tsx
@@ -15,21 +15,11 @@ import { useImageColors } from "@/hooks/useImageColors";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { useSettings } from "@/utils/atoms/settings";
 import { getLogoImageUrlById } from "@/utils/jellyfin/image/getLogoImageUrlById";
-import { getStreamUrl } from "@/utils/jellyfin/media/getStreamUrl";
-import { chromecastProfile } from "@/utils/profiles/chromecast";
-import iosFmp4 from "@/utils/profiles/iosFmp4";
-import native from "@/utils/profiles/native";
-import old from "@/utils/profiles/old";
-import {
-  BaseItemDto,
-  MediaSourceInfo,
-} from "@jellyfin/sdk/lib/generated-client/models";
-import { getMediaInfoApi } from "@jellyfin/sdk/lib/utils/api";
-import { useQuery } from "@tanstack/react-query";
+import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
 import { Image } from "expo-image";
 import { useNavigation } from "expo-router";
 import * as ScreenOrientation from "expo-screen-orientation";
-import { useAtom } from "jotai";
+import { useAtom, useAtomValue } from "jotai";
 import React, { useEffect, useMemo, useRef, useState } from "react";
 import { View } from "react-native";
 import { useCastDevice } from "react-native-google-cast";
@@ -39,20 +29,18 @@ import { Chromecast } from "./Chromecast";
 import { ItemHeader } from "./ItemHeader";
 import { MediaSourceSelector } from "./MediaSourceSelector";
 import { MoreMoviesWithActor } from "./MoreMoviesWithActor";
+import { usePlaySettings } from "@/providers/PlaySettingsProvider";
 
 export const ItemContent: React.FC<{ item: BaseItemDto }> = React.memo(
   ({ item }) => {
     const [api] = useAtom(apiAtom);
     const [user] = useAtom(userAtom);
+    const { playSettings, setPlaySettings, playUrl } = usePlaySettings();
 
     const castDevice = useCastDevice();
     const navigation = useNavigation();
     const [settings] = useSettings();
-    const [selectedMediaSource, setSelectedMediaSource] =
-      useState<MediaSourceInfo | null>(null);
-    const [selectedAudioStream, setSelectedAudioStream] = useState<number>(-1);
-    const [selectedSubtitleStream, setSelectedSubtitleStream] =
-      useState<number>(-1);
+
     const [maxBitrate, setMaxBitrate] = useState<Bitrate>({
       key: "Max",
       value: undefined,
@@ -99,6 +87,11 @@ export const ItemContent: React.FC<{ item: BaseItemDto }> = React.memo(
             </View>
           ),
       });
+
+      setPlaySettings((prev) => ({
+        ...prev,
+        item,
+      }));
     }, [item]);
 
     useEffect(() => {
@@ -111,87 +104,6 @@ export const ItemContent: React.FC<{ item: BaseItemDto }> = React.memo(
       else headerHeightRef.current = 400;
     }, [item, orientation]);
 
-    const { data: sessionData } = useQuery({
-      queryKey: ["sessionData", item.Id],
-      queryFn: async () => {
-        if (!api || !user?.Id || !item.Id) {
-          return null;
-        }
-        const playbackData = await getMediaInfoApi(api!).getPlaybackInfo(
-          {
-            itemId: item.Id,
-            userId: user?.Id,
-          },
-          {
-            method: "POST",
-          }
-        );
-
-        return playbackData.data;
-      },
-      enabled: !!item.Id && !!api && !!user?.Id,
-      staleTime: 0,
-    });
-
-    const { data: playbackUrl } = useQuery({
-      queryKey: [
-        "playbackUrl",
-        item.Id,
-        maxBitrate,
-        castDevice?.deviceId,
-        selectedMediaSource?.Id,
-        selectedAudioStream,
-        selectedSubtitleStream,
-        settings,
-        sessionData?.PlaySessionId,
-      ],
-      queryFn: async () => {
-        if (!api || !user?.Id) {
-          return null;
-        }
-
-        if (
-          item.Type !== "Program" &&
-          (!sessionData || !selectedMediaSource?.Id)
-        ) {
-          return null;
-        }
-
-        let deviceProfile: any = iosFmp4;
-
-        if (castDevice?.deviceId) {
-          deviceProfile = chromecastProfile;
-        } else if (settings?.deviceProfile === "Native") {
-          deviceProfile = native;
-        } else if (settings?.deviceProfile === "Old") {
-          deviceProfile = old;
-        }
-
-        console.log("playbackUrl...");
-
-        const url = await getStreamUrl({
-          api,
-          userId: user.Id,
-          item,
-          startTimeTicks: item.UserData?.PlaybackPositionTicks || 0,
-          maxStreamingBitrate: maxBitrate.value,
-          sessionData,
-          deviceProfile,
-          audioStreamIndex: selectedAudioStream,
-          subtitleStreamIndex: selectedSubtitleStream,
-          forceDirectPlay: settings?.forceDirectPlay,
-          height: maxBitrate.height,
-          mediaSourceId: selectedMediaSource?.Id,
-        });
-
-        console.info("Stream URL:", url);
-
-        return url;
-      },
-      enabled: !!api && !!user?.Id && !!item.Id,
-      staleTime: 0,
-    });
-
     const logoUrl = useMemo(() => getLogoImageUrlById({ api, item }), [item]);
 
     const loading = useMemo(() => {
@@ -200,6 +112,14 @@ export const ItemContent: React.FC<{ item: BaseItemDto }> = React.memo(
 
     const insets = useSafeAreaInsets();
 
+    // useFocusEffect(
+    //   useCallback(() => {
+    //     return () => {
+    //       setPlaySettings(null);
+    //     };
+    //   }, [setPlaySettings])
+    // );
+
     return (
       <View
         className="flex-1 relative"
@@ -256,31 +176,13 @@ export const ItemContent: React.FC<{ item: BaseItemDto }> = React.memo(
                     onChange={(val) => setMaxBitrate(val)}
                     selected={maxBitrate}
                   />
-                  <MediaSourceSelector
-                    className="mr-1"
-                    item={item}
-                    onChange={setSelectedMediaSource}
-                    selected={selectedMediaSource}
-                  />
-                  {selectedMediaSource && (
-                    <>
-                      <AudioTrackSelector
-                        className="mr-1"
-                        source={selectedMediaSource}
-                        onChange={setSelectedAudioStream}
-                        selected={selectedAudioStream}
-                      />
-                      <SubtitleTrackSelector
-                        source={selectedMediaSource}
-                        onChange={setSelectedSubtitleStream}
-                        selected={selectedSubtitleStream}
-                      />
-                    </>
-                  )}
+                  <MediaSourceSelector className="mr-1" />
+                  <AudioTrackSelector className="mr-1" />
+                  <SubtitleTrackSelector />
                 </View>
               )}
 
-              <PlayButton item={item} url={playbackUrl} className="grow" />
+              <PlayButton item={item} url={playUrl} className="grow" />
             </View>
 
             {item.Type === "Episode" && (
diff --git a/components/MediaSourceSelector.tsx b/components/MediaSourceSelector.tsx
index 31977b26..452ef9f8 100644
--- a/components/MediaSourceSelector.tsx
+++ b/components/MediaSourceSelector.tsx
@@ -1,41 +1,43 @@
-import { tc } from "@/utils/textTools";
-import {
-  BaseItemDto,
-  MediaSourceInfo,
-} from "@jellyfin/sdk/lib/generated-client/models";
+import { convertBitsToMegabitsOrGigabits } from "@/utils/bToMb";
+import { useAtom } from "jotai";
 import { useEffect, useMemo } from "react";
 import { TouchableOpacity, View } from "react-native";
 import * as DropdownMenu from "zeego/dropdown-menu";
 import { Text } from "./common/Text";
-import { convertBitsToMegabitsOrGigabits } from "@/utils/bToMb";
+import { usePlaySettings } from "@/providers/PlaySettingsProvider";
 
-interface Props extends React.ComponentProps<typeof View> {
-  item: BaseItemDto;
-  onChange: (value: MediaSourceInfo) => void;
-  selected: MediaSourceInfo | null;
-}
+interface Props extends React.ComponentProps<typeof View> {}
 
-export const MediaSourceSelector: React.FC<Props> = ({
-  item,
-  onChange,
-  selected,
-  ...props
-}) => {
-  const mediaSources = useMemo(() => {
-    return item.MediaSources;
-  }, [item]);
+export const MediaSourceSelector: React.FC<Props> = ({ ...props }) => {
+  const { playSettings, setPlaySettings, playUrl } = usePlaySettings();
 
-  const selectedMediaSource = useMemo(
-    () =>
-      mediaSources
-        ?.find((x) => x.Id === selected?.Id)
-        ?.MediaStreams?.find((x) => x.Type === "Video")?.DisplayTitle || "",
-    [mediaSources, selected]
-  );
+  const selectedMediaSource = useMemo(() => {
+    console.log(
+      "selectedMediaSource",
+      playSettings?.mediaSource?.MediaStreams?.length
+    );
+    return (
+      playSettings?.mediaSource?.MediaStreams?.find((x) => x.Type === "Video")
+        ?.DisplayTitle || "N/A"
+    );
+  }, [playSettings?.mediaSource]);
 
+  // Set default media source on component mount
   useEffect(() => {
-    if (mediaSources?.length) onChange(mediaSources[0]);
-  }, [mediaSources]);
+    if (
+      playSettings?.item?.MediaSources?.length &&
+      !playSettings?.mediaSource
+    ) {
+      console.log(
+        "Setting default media source",
+        playSettings?.item?.MediaSources?.[0].Id
+      );
+      setPlaySettings((prev) => ({
+        ...prev,
+        mediaSource: playSettings?.item?.MediaSources?.[0],
+      }));
+    }
+  }, [playSettings?.item?.MediaSources, setPlaySettings]);
 
   const name = (name?: string | null) => {
     if (name && name.length > 40)
@@ -71,11 +73,14 @@ export const MediaSourceSelector: React.FC<Props> = ({
           sideOffset={8}
         >
           <DropdownMenu.Label>Media sources</DropdownMenu.Label>
-          {mediaSources?.map((source, idx: number) => (
+          {playSettings?.item?.MediaSources?.map((source, idx: number) => (
             <DropdownMenu.Item
               key={idx.toString()}
               onSelect={() => {
-                onChange(source);
+                setPlaySettings((prev) => ({
+                  ...prev,
+                  mediaSource: source,
+                }));
               }}
             >
               <DropdownMenu.ItemTitle>
diff --git a/components/PlayButton.tsx b/components/PlayButton.tsx
index a50249c5..7a0a2aff 100644
--- a/components/PlayButton.tsx
+++ b/components/PlayButton.tsx
@@ -65,8 +65,7 @@ export const PlayButton: React.FC<Props> = ({ item, url, ...props }) => {
   const onPress = async () => {
     if (!url || !item) return;
     if (!client) {
-      setCurrentlyPlayingState({ item, url });
-      router.push("/play");
+      router.push("/play-video");
       return;
     }
     const options = ["Chromecast", "Device", "Cancel"];
@@ -163,8 +162,7 @@ export const PlayButton: React.FC<Props> = ({ item, url, ...props }) => {
             });
             break;
           case 1:
-            setCurrentlyPlayingState({ item, url });
-            router.push("/play");
+            router.push("/play-video");
             break;
           case cancelButtonIndex:
             break;
diff --git a/components/SubtitleTrackSelector.tsx b/components/SubtitleTrackSelector.tsx
index ea535a0a..5c5a3cac 100644
--- a/components/SubtitleTrackSelector.tsx
+++ b/components/SubtitleTrackSelector.tsx
@@ -1,55 +1,46 @@
-import { TouchableOpacity, View } from "react-native";
+import { usePlaySettings } from "@/providers/PlaySettingsProvider";
+import { useSettings } from "@/utils/atoms/settings";
+import { tc } from "@/utils/textTools";
+import { useEffect, useMemo } from "react";
+import { TouchableOpacity, View, ViewProps } from "react-native";
 import * as DropdownMenu from "zeego/dropdown-menu";
 import { Text } from "./common/Text";
-import { atom, useAtom } from "jotai";
-import {
-  BaseItemDto,
-  MediaSourceInfo,
-} from "@jellyfin/sdk/lib/generated-client/models";
-import { useEffect, useMemo } from "react";
-import { MediaStream } from "@jellyfin/sdk/lib/generated-client/models";
-import { tc } from "@/utils/textTools";
-import { useSettings } from "@/utils/atoms/settings";
 
-interface Props extends React.ComponentProps<typeof View> {
-  source: MediaSourceInfo;
-  onChange: (value: number) => void;
-  selected: number;
-}
+interface Props extends ViewProps {}
 
-export const SubtitleTrackSelector: React.FC<Props> = ({
-  source,
-  onChange,
-  selected,
-  ...props
-}) => {
+export const SubtitleTrackSelector: React.FC<Props> = ({ ...props }) => {
+  const { playSettings, setPlaySettings, playUrl } = usePlaySettings();
   const [settings] = useSettings();
 
   const subtitleStreams = useMemo(
-    () => source.MediaStreams?.filter((x) => x.Type === "Subtitle") ?? [],
-    [source]
+    () =>
+      playSettings?.mediaSource?.MediaStreams?.filter(
+        (x) => x.Type === "Subtitle"
+      ) ?? [],
+    [playSettings?.mediaSource]
   );
 
   const selectedSubtitleSteam = useMemo(
-    () => subtitleStreams.find((x) => x.Index === selected),
-    [subtitleStreams, selected]
+    () => subtitleStreams.find((x) => x.Index === playSettings?.subtitleIndex),
+    [subtitleStreams, playSettings?.subtitleIndex]
   );
 
   useEffect(() => {
-    // const index = source.DefaultAudioStreamIndex;
-    // if (index !== undefined && index !== null) {
-    //   onChange(index);
-    //   return;
-    // }
     const defaultSubIndex = subtitleStreams?.find(
       (x) => x.Language === settings?.defaultSubtitleLanguage?.value
     )?.Index;
     if (defaultSubIndex !== undefined && defaultSubIndex !== null) {
-      onChange(defaultSubIndex);
+      setPlaySettings((prev) => ({
+        ...prev,
+        subtitleIndex: defaultSubIndex,
+      }));
       return;
     }
 
-    onChange(-1);
+    setPlaySettings((prev) => ({
+      ...prev,
+      subtitleIndex: -1,
+    }));
   }, [subtitleStreams, settings]);
 
   if (subtitleStreams.length === 0) return null;
@@ -88,7 +79,10 @@ export const SubtitleTrackSelector: React.FC<Props> = ({
           <DropdownMenu.Item
             key={"-1"}
             onSelect={() => {
-              onChange(-1);
+              setPlaySettings((prev) => ({
+                ...prev,
+                subtitleIndex: -1,
+              }));
             }}
           >
             <DropdownMenu.ItemTitle>None</DropdownMenu.ItemTitle>
@@ -98,7 +92,10 @@ export const SubtitleTrackSelector: React.FC<Props> = ({
               key={idx.toString()}
               onSelect={() => {
                 if (subtitle.Index !== undefined && subtitle.Index !== null)
-                  onChange(subtitle.Index);
+                  setPlaySettings((prev) => ({
+                    ...prev,
+                    subtitleIndex: subtitle.Index,
+                  }));
               }}
             >
               <DropdownMenu.ItemTitle>
diff --git a/components/video-player/Controls.tsx b/components/video-player/Controls.tsx
new file mode 100644
index 00000000..558a2caa
--- /dev/null
+++ b/components/video-player/Controls.tsx
@@ -0,0 +1,451 @@
+import { useAdjacentEpisodes } from "@/hooks/useAdjacentEpisodes";
+import { useCreditSkipper } from "@/hooks/useCreditSkipper";
+import { useIntroSkipper } from "@/hooks/useIntroSkipper";
+import { useTrickplay } from "@/hooks/useTrickplay";
+import { apiAtom } from "@/providers/JellyfinProvider";
+import { useSettings } from "@/utils/atoms/settings";
+import { getBackdropUrl } from "@/utils/jellyfin/image/getBackdropUrl";
+import { getAuthHeaders } from "@/utils/jellyfin/jellyfin";
+import { writeToLog } from "@/utils/log";
+import orientationToOrientationLock from "@/utils/OrientationLockConverter";
+import { secondsToTicks } from "@/utils/secondsToTicks";
+import { formatTimeString, ticksToSeconds } from "@/utils/time";
+import { Ionicons } from "@expo/vector-icons";
+import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
+import { Image } from "expo-image";
+import { useRouter, useSegments } from "expo-router";
+import * as ScreenOrientation from "expo-screen-orientation";
+import { useAtom } from "jotai";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import {
+  Alert,
+  BackHandler,
+  Dimensions,
+  Share,
+  TouchableOpacity,
+  View,
+} from "react-native";
+import { Slider } from "react-native-awesome-slider";
+import {
+  runOnJS,
+  SharedValue,
+  useAnimatedReaction,
+  useSharedValue,
+} from "react-native-reanimated";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { OnProgressData, ReactVideoProps, VideoRef } from "react-native-video";
+import { itemRouter } from "../common/TouchableItemRouter";
+import { Loader } from "../Loader";
+import { Text } from "../common/Text";
+
+const windowDimensions = Dimensions.get("window");
+const screenDimensions = Dimensions.get("screen");
+
+interface Props {
+  item: BaseItemDto;
+  videoRef: React.MutableRefObject<VideoRef | null>;
+  isPlaying: boolean;
+  togglePlay: (ticks: number) => void;
+  isSeeking: SharedValue<boolean>;
+  cacheProgress: SharedValue<number>;
+  progress: SharedValue<number>;
+}
+
+export const Controls: React.FC<Props> = ({
+  item,
+  videoRef,
+  togglePlay,
+  isPlaying,
+  isSeeking,
+  progress,
+  cacheProgress,
+}) => {
+  const [settings] = useSettings();
+  const [api] = useAtom(apiAtom);
+  const router = useRouter();
+  const segments = useSegments();
+  const insets = useSafeAreaInsets();
+
+  const { previousItem, nextItem } = useAdjacentEpisodes({ item });
+  const { trickPlayUrl, calculateTrickplayUrl, trickplayInfo } =
+    useTrickplay(item);
+
+  const [showControls, setShowControls] = useState(true);
+  const [isBuffering, setIsBufferingState] = useState(true);
+  const [ignoreSafeArea, setIgnoreSafeArea] = useState(false);
+  const [orientation, setOrientation] = useState(
+    ScreenOrientation.OrientationLock.UNKNOWN
+  );
+
+  // Seconds
+  const [currentTime, setCurrentTime] = useState(0);
+  const [remainingTime, setRemainingTime] = useState(0);
+
+  const min = useSharedValue(0);
+  const max = useSharedValue(item.RunTimeTicks || 0);
+
+  const [dimensions, setDimensions] = useState({
+    window: windowDimensions,
+    screen: screenDimensions,
+  });
+
+  useEffect(() => {
+    const dimensionsSubscription = Dimensions.addEventListener(
+      "change",
+      ({ window, screen }) => {
+        setDimensions({ window, screen });
+      }
+    );
+
+    const orientationSubscription =
+      ScreenOrientation.addOrientationChangeListener((event) => {
+        setOrientation(
+          orientationToOrientationLock(event.orientationInfo.orientation)
+        );
+      });
+
+    ScreenOrientation.getOrientationAsync().then((orientation) => {
+      setOrientation(orientationToOrientationLock(orientation));
+    });
+
+    return () => {
+      dimensionsSubscription.remove();
+      orientationSubscription.remove();
+    };
+  }, []);
+
+  const from = useMemo(() => segments[2], [segments]);
+
+  const updateTimes = useCallback(
+    (currentProgress: number, maxValue: number) => {
+      const current = ticksToSeconds(currentProgress);
+      const remaining = ticksToSeconds(maxValue - current);
+
+      setCurrentTime(current);
+      setRemainingTime(remaining);
+    },
+    []
+  );
+
+  const { showSkipButton, skipIntro } = useIntroSkipper(
+    item.Id,
+    currentTime,
+    videoRef
+  );
+
+  const { showSkipCreditButton, skipCredit } = useCreditSkipper(
+    item.Id,
+    currentTime,
+    videoRef
+  );
+
+  useAnimatedReaction(
+    () => ({
+      progress: progress.value,
+      max: max.value,
+      isSeeking: isSeeking.value,
+    }),
+    (result) => {
+      if (result.isSeeking === false) {
+        runOnJS(updateTimes)(result.progress, result.max);
+      }
+    },
+    [updateTimes]
+  );
+
+  const isLandscape = useMemo(() => {
+    return orientation === ScreenOrientation.OrientationLock.LANDSCAPE_LEFT ||
+      orientation === ScreenOrientation.OrientationLock.LANDSCAPE_RIGHT
+      ? true
+      : false;
+  }, [orientation]);
+
+  useEffect(() => {
+    if (item) {
+      progress.value = item?.UserData?.PlaybackPositionTicks || 0;
+      max.value = item.RunTimeTicks || 0;
+    }
+  }, [item]);
+
+  const toggleControls = () => setShowControls(!showControls);
+
+  const handleSliderComplete = (value: number) => {
+    progress.value = value;
+    isSeeking.value = false;
+    videoRef.current?.seek(value / 10000000);
+  };
+
+  const handleSliderChange = (value: number) => {
+    calculateTrickplayUrl(value);
+  };
+
+  const handleSliderStart = useCallback(() => {
+    if (showControls === false) return;
+    isSeeking.value = true;
+  }, []);
+
+  const handleSkipBackward = useCallback(async () => {
+    if (!settings) return;
+    try {
+      const curr = await videoRef.current?.getCurrentPosition();
+      if (curr !== undefined) {
+        videoRef.current?.seek(Math.max(0, curr - settings.rewindSkipTime));
+      }
+    } catch (error) {
+      writeToLog("ERROR", "Error seeking video backwards", error);
+    }
+  }, [settings]);
+
+  const handleSkipForward = useCallback(async () => {
+    if (!settings) return;
+    try {
+      const curr = await videoRef.current?.getCurrentPosition();
+      if (curr !== undefined) {
+        videoRef.current?.seek(Math.max(0, curr + settings.forwardSkipTime));
+      }
+    } catch (error) {
+      writeToLog("ERROR", "Error seeking video forwards", error);
+    }
+  }, [settings]);
+
+  const handleGoToPreviousItem = useCallback(() => {
+    if (!previousItem || !from) return;
+    const url = itemRouter(previousItem, from);
+    // @ts-ignore
+    router.push(url);
+  }, [previousItem, from, router]);
+
+  const handleGoToNextItem = useCallback(() => {
+    if (!nextItem || !from) return;
+    const url = itemRouter(nextItem, from);
+    // @ts-ignore
+    router.push(url);
+  }, [nextItem, from, router]);
+
+  const toggleIgnoreSafeArea = useCallback(() => {
+    setIgnoreSafeArea((prev) => !prev);
+  }, []);
+
+  return (
+    <View className="absolute h-screen w-screen top-0 left-0">
+      <View className="relative">
+        {(showControls || isBuffering) && (
+          <View
+            pointerEvents="none"
+            className=" bg-black/50 z-0 w-screen h-screen absolute top-0 left-0"
+          ></View>
+        )}
+
+        {isBuffering && (
+          <View
+            pointerEvents="none"
+            className="fixed top-0 left-0 w-screen h-screen flex flex-col items-center justify-center"
+          >
+            <Loader />
+          </View>
+        )}
+
+        {showSkipButton && (
+          <View
+            style={[
+              {
+                position: "absolute",
+                bottom: isLandscape ? insets.bottom + 26 : insets.bottom + 70,
+                right: isLandscape ? insets.right + 32 : insets.right + 16,
+                height: 70,
+              },
+            ]}
+            className="z-10"
+          >
+            <TouchableOpacity
+              onPress={skipIntro}
+              className="bg-purple-600 rounded-full px-2.5 py-2 font-semibold"
+            >
+              <Text className="text-white">Skip Intro</Text>
+            </TouchableOpacity>
+          </View>
+        )}
+
+        {showSkipCreditButton && (
+          <View
+            pointerEvents={showSkipCreditButton ? "auto" : "none"}
+            className={`z-10 absolute bottom-16 right-4 ${
+              showSkipCreditButton ? "opacity-100" : "opacity-0"
+            }`}
+          >
+            <TouchableOpacity
+              onPress={skipCredit}
+              className="bg-purple-600 rounded-full px-2.5 py-2 font-semibold"
+            >
+              <Text className="text-white">Skip Credits</Text>
+            </TouchableOpacity>
+          </View>
+        )}
+
+        <View className="absolute top-16 right-4 flex flex-row items-center space-x-2 z-10">
+          <TouchableOpacity
+            onPress={toggleIgnoreSafeArea}
+            className="aspect-square flex flex-col bg-neutral-800 rounded-xl items-center justify-center p-2"
+          >
+            <Ionicons
+              name={ignoreSafeArea ? "contract-outline" : "expand"}
+              size={24}
+              color="white"
+            />
+          </TouchableOpacity>
+          <TouchableOpacity
+            onPress={() => {
+              router.back();
+            }}
+            className="aspect-square flex flex-col bg-neutral-800 rounded-xl items-center justify-center p-2"
+          >
+            <Ionicons name="close" size={24} color="white" />
+          </TouchableOpacity>
+        </View>
+
+        <View
+          pointerEvents={showControls ? "auto" : "none"}
+          className={`absolute bottom-4 left-0 w-screen p-4 ${
+            showControls ? "opacity-100" : "opacity-0"
+          }`}
+        >
+          <View className="shrink flex flex-col justify-center h-full mb-2">
+            <Text className="font-bold">{item?.Name}</Text>
+            {item?.Type === "Episode" && (
+              <Text className="opacity-50">{item.SeriesName}</Text>
+            )}
+            {item?.Type === "Movie" && (
+              <Text className="text-xs opacity-50">{item?.ProductionYear}</Text>
+            )}
+            {item?.Type === "Audio" && (
+              <Text className="text-xs opacity-50">{item?.Album}</Text>
+            )}
+          </View>
+          <View
+            className={`flex ${
+              isLandscape
+                ? "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`}
+          >
+            <View className="flex flex-row items-center space-x-4">
+              <TouchableOpacity
+                style={{
+                  opacity: !previousItem ? 0.5 : 1,
+                }}
+                onPress={handleGoToPreviousItem}
+              >
+                <Ionicons name="play-skip-back" size={24} color="white" />
+              </TouchableOpacity>
+              <TouchableOpacity onPress={handleSkipBackward}>
+                <Ionicons
+                  name="refresh-outline"
+                  size={26}
+                  color="white"
+                  style={{
+                    transform: [{ scaleY: -1 }, { rotate: "180deg" }],
+                  }}
+                />
+              </TouchableOpacity>
+              <TouchableOpacity
+                onPress={() => {
+                  togglePlay(progress.value);
+                }}
+              >
+                <Ionicons
+                  name={isPlaying ? "pause" : "play"}
+                  size={30}
+                  color="white"
+                />
+              </TouchableOpacity>
+              <TouchableOpacity onPress={handleSkipForward}>
+                <Ionicons name="refresh-outline" size={26} color="white" />
+              </TouchableOpacity>
+              <TouchableOpacity
+                style={{
+                  opacity: !nextItem ? 0.5 : 1,
+                }}
+                onPress={handleGoToNextItem}
+              >
+                <Ionicons name="play-skip-forward" size={24} color="white" />
+              </TouchableOpacity>
+            </View>
+            <View className={`flex flex-col w-full shrink`}>
+              <Slider
+                theme={{
+                  maximumTrackTintColor: "rgba(255,255,255,0.2)",
+                  minimumTrackTintColor: "#fff",
+                  cacheTrackTintColor: "rgba(255,255,255,0.3)",
+                  bubbleBackgroundColor: "#fff",
+                  bubbleTextColor: "#000",
+                  heartbeatColor: "#999",
+                }}
+                cache={cacheProgress}
+                onSlidingStart={handleSliderStart}
+                onSlidingComplete={handleSliderComplete}
+                onValueChange={handleSliderChange}
+                containerStyle={{
+                  borderRadius: 100,
+                }}
+                renderBubble={() => {
+                  if (!trickPlayUrl || !trickplayInfo) {
+                    return null;
+                  }
+                  const { x, y, url } = trickPlayUrl;
+
+                  const tileWidth = 150;
+                  const tileHeight = 150 / trickplayInfo.aspectRatio!;
+                  return (
+                    <View
+                      style={{
+                        position: "absolute",
+                        bottom: 0,
+                        left: 0,
+                        width: tileWidth,
+                        height: tileHeight,
+                        marginLeft: -tileWidth / 4,
+                        marginTop: -tileHeight / 4 - 60,
+                        zIndex: 10,
+                      }}
+                      className=" bg-neutral-800 overflow-hidden"
+                    >
+                      <Image
+                        cachePolicy={"memory-disk"}
+                        style={{
+                          width: 150 * trickplayInfo?.data.TileWidth!,
+                          height:
+                            (150 / trickplayInfo.aspectRatio!) *
+                            trickplayInfo?.data.TileHeight!,
+                          transform: [
+                            { translateX: -x * tileWidth },
+                            { translateY: -y * tileHeight },
+                          ],
+                        }}
+                        source={{ uri: url }}
+                        contentFit="cover"
+                      />
+                    </View>
+                  );
+                }}
+                sliderHeight={10}
+                thumbWidth={0}
+                progress={progress}
+                minimumValue={min}
+                maximumValue={max}
+              />
+              <View className="flex flex-row items-center justify-between mt-0.5">
+                <Text className="text-[12px] text-neutral-400">
+                  {formatTimeString(currentTime)}
+                </Text>
+                <Text className="text-[12px] text-neutral-400">
+                  -{formatTimeString(remainingTime)}
+                </Text>
+              </View>
+            </View>
+          </View>
+        </View>
+      </View>
+    </View>
+  );
+};
diff --git a/hooks/useAdjacentEpisodes.ts b/hooks/useAdjacentEpisodes.ts
index 6cf47b18..92ad4fb5 100644
--- a/hooks/useAdjacentEpisodes.ts
+++ b/hooks/useAdjacentEpisodes.ts
@@ -7,69 +7,59 @@ import { useAtom } from "jotai";
 import { apiAtom } from "@/providers/JellyfinProvider";
 
 interface AdjacentEpisodesProps {
-  currentlyPlaying?: CurrentlyPlayingState | null;
+  item?: BaseItemDto | null;
 }
 
-export const useAdjacentEpisodes = ({
-  currentlyPlaying,
-}: AdjacentEpisodesProps) => {
+export const useAdjacentEpisodes = ({ item }: AdjacentEpisodesProps) => {
   const [api] = useAtom(apiAtom);
 
   const { data: previousItem } = useQuery({
-    queryKey: [
-      "previousItem",
-      currentlyPlaying?.item.ParentId,
-      currentlyPlaying?.item.IndexNumber,
-    ],
+    queryKey: ["previousItem", item?.ParentId, item?.IndexNumber],
     queryFn: async (): Promise<BaseItemDto | null> => {
       if (
         !api ||
-        !currentlyPlaying?.item.ParentId ||
-        currentlyPlaying?.item.IndexNumber === undefined ||
-        currentlyPlaying?.item.IndexNumber === null ||
-        currentlyPlaying.item.IndexNumber - 2 < 0
+        !item?.ParentId ||
+        item?.IndexNumber === undefined ||
+        item?.IndexNumber === null ||
+        item?.IndexNumber - 2 < 0
       ) {
         console.log("No previous item");
         return null;
       }
 
       const res = await getItemsApi(api).getItems({
-        parentId: currentlyPlaying.item.ParentId!,
-        startIndex: currentlyPlaying.item.IndexNumber! - 2,
+        parentId: item.ParentId!,
+        startIndex: item.IndexNumber! - 2,
         limit: 1,
       });
 
       return res.data.Items?.[0] || null;
     },
-    enabled: currentlyPlaying?.item.Type === "Episode",
+    enabled: item?.Type === "Episode",
   });
 
   const { data: nextItem } = useQuery({
-    queryKey: [
-      "nextItem",
-      currentlyPlaying?.item.ParentId,
-      currentlyPlaying?.item.IndexNumber,
-    ],
+    queryKey: ["nextItem", item?.ParentId, item?.IndexNumber],
     queryFn: async (): Promise<BaseItemDto | null> => {
       if (
         !api ||
-        !currentlyPlaying?.item.ParentId ||
-        currentlyPlaying?.item.IndexNumber === undefined ||
-        currentlyPlaying?.item.IndexNumber === null
+        !item?.ParentId ||
+        item?.IndexNumber === undefined ||
+        item?.IndexNumber === null
       ) {
         console.log("No next item");
         return null;
       }
 
       const res = await getItemsApi(api).getItems({
-        parentId: currentlyPlaying.item.ParentId!,
-        startIndex: currentlyPlaying.item.IndexNumber!,
+        parentId: item.ParentId!,
+        startIndex: item.IndexNumber!,
         limit: 1,
       });
 
       return res.data.Items?.[0] || null;
     },
-    enabled: currentlyPlaying?.item.Type === "Episode",
+    enabled: item?.Type === "Episode",
   });
 
   return { previousItem, nextItem };
diff --git a/hooks/useTrickplay.ts b/hooks/useTrickplay.ts
index bf51709b..f1e61b8d 100644
--- a/hooks/useTrickplay.ts
+++ b/hooks/useTrickplay.ts
@@ -1,11 +1,9 @@
 // hooks/useTrickplay.ts
 
-import { useState, useCallback, useMemo, useRef } from "react";
-import { Api } from "@jellyfin/sdk";
-import { SharedValue } from "react-native-reanimated";
-import { CurrentlyPlayingState } from "@/providers/PlaybackProvider";
-import { useAtom } from "jotai";
 import { apiAtom } from "@/providers/JellyfinProvider";
+import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
+import { useAtom } from "jotai";
+import { useCallback, useMemo, useRef, useState } from "react";
 
 interface TrickplayData {
   Interval?: number;
@@ -28,21 +26,19 @@ interface TrickplayUrl {
   url: string;
 }
 
-export const useTrickplay = (
-  currentlyPlaying?: CurrentlyPlayingState | null
-) => {
+export const useTrickplay = (item: BaseItemDto) => {
   const [api] = useAtom(apiAtom);
   const [trickPlayUrl, setTrickPlayUrl] = useState<TrickplayUrl | null>(null);
   const lastCalculationTime = useRef(0);
   const throttleDelay = 200; // 200ms throttle
 
   const trickplayInfo = useMemo(() => {
-    if (!currentlyPlaying?.item.Id || !currentlyPlaying?.item.Trickplay) {
+    if (!item.Id || !item.Trickplay) {
       return null;
     }
 
-    const mediaSourceId = currentlyPlaying.item.Id;
-    const trickplayData = currentlyPlaying.item.Trickplay[mediaSourceId];
+    const mediaSourceId = item.Id;
+    const trickplayData = item.Trickplay[mediaSourceId];
 
     if (!trickplayData) {
       return null;
@@ -59,7 +55,7 @@ export const useTrickplay = (
           data: trickplayData[firstResolution],
         }
       : null;
-  }, [currentlyPlaying]);
+  }, [item]);
 
   const calculateTrickplayUrl = useCallback(
     (progress: number) => {
@@ -69,7 +65,7 @@ export const useTrickplay = (
       }
       lastCalculationTime.current = now;
 
-      if (!trickplayInfo || !api || !currentlyPlaying?.item.Id) {
+      if (!trickplayInfo || !api || !item.Id) {
         return null;
       }
 
@@ -95,13 +91,13 @@ export const useTrickplay = (
       const newTrickPlayUrl = {
         x: rowInTile,
         y: colInTile,
-        url: `${api.basePath}/Videos/${currentlyPlaying.item.Id}/Trickplay/${resolution}/${tileIndex}.jpg?api_key=${api.accessToken}`,
+        url: `${api.basePath}/Videos/${item.Id}/Trickplay/${resolution}/${tileIndex}.jpg?api_key=${api.accessToken}`,
       };
 
       setTrickPlayUrl(newTrickPlayUrl);
       return newTrickPlayUrl;
     },
-    [trickplayInfo, currentlyPlaying, api]
+    [trickplayInfo, item, api]
   );
 
   return { trickPlayUrl, calculateTrickplayUrl, trickplayInfo };
diff --git a/providers/PlaySettingsProvider.tsx b/providers/PlaySettingsProvider.tsx
new file mode 100644
index 00000000..1008f6cc
--- /dev/null
+++ b/providers/PlaySettingsProvider.tsx
@@ -0,0 +1,118 @@
+import React, {
+  createContext,
+  useState,
+  useContext,
+  useEffect,
+  useCallback,
+} from "react";
+import {
+  BaseItemDto,
+  MediaSourceInfo,
+} from "@jellyfin/sdk/lib/generated-client";
+import { settingsAtom } from "@/utils/atoms/settings";
+import { apiAtom, userAtom } from "./JellyfinProvider";
+import { useAtomValue } from "jotai";
+import iosFmp4 from "@/utils/profiles/iosFmp4";
+import native from "@/utils/profiles/native";
+import old from "@/utils/profiles/old";
+import { getStreamUrl } from "@/utils/jellyfin/media/getStreamUrl";
+import { reportPlaybackStopped } from "@/utils/jellyfin/playstate/reportPlaybackStopped";
+
+export type PlaybackType = {
+  item?: BaseItemDto | null;
+  mediaSource?: MediaSourceInfo | null;
+  subtitleIndex?: number | null;
+  audioIndex?: number | null;
+  quality?: any | null;
+};
+
+type PlaySettingsContextType = {
+  playSettings: PlaybackType | null;
+  setPlaySettings: React.Dispatch<React.SetStateAction<PlaybackType | null>>;
+  playUrl: string | null;
+  reportStopPlayback: (ticks: number) => Promise<void>;
+};
+
+const PlaySettingsContext = createContext<PlaySettingsContextType | undefined>(
+  undefined
+);
+
+export const PlaySettingsProvider: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => {
+  const [playSettings, setPlaySettings] = useState<PlaybackType | null>(null);
+  const [playUrl, setPlayUrl] = useState<string | null>(null);
+
+  const api = useAtomValue(apiAtom);
+  const settings = useAtomValue(settingsAtom);
+  const user = useAtomValue(userAtom);
+
+  const reportStopPlayback = useCallback(
+    async (ticks: number) => {
+      const id = playSettings?.item?.Id;
+      setPlaySettings(null);
+
+      await reportPlaybackStopped({
+        api,
+        itemId: id,
+        sessionId: undefined,
+        positionTicks: ticks,
+      });
+    },
+    [playSettings?.item?.Id, api]
+  );
+
+  useEffect(() => {
+    const fetchPlayUrl = async () => {
+      if (!api || !user || !settings) {
+        setPlayUrl(null);
+        return;
+      }
+
+      // Determine the device profile
+      let deviceProfile: any = iosFmp4;
+      if (settings?.deviceProfile === "Native") deviceProfile = native;
+      if (settings?.deviceProfile === "Old") deviceProfile = old;
+
+      const url = await getStreamUrl({
+        api,
+        deviceProfile,
+        item: playSettings?.item,
+        mediaSourceId: playSettings?.mediaSource?.Id,
+        startTimeTicks: 0,
+        maxStreamingBitrate: 0,
+        audioStreamIndex: playSettings?.audioIndex
+          ? playSettings?.audioIndex
+          : 0,
+        subtitleStreamIndex: playSettings?.subtitleIndex
+          ? playSettings?.subtitleIndex
+          : -1,
+        userId: user.Id,
+        forceDirectPlay: false,
+        sessionData: null,
+      });
+
+      setPlayUrl(url);
+    };
+
+    fetchPlayUrl();
+  }, [api, settings, user, playSettings]);
+
+  return (
+    <PlaySettingsContext.Provider
+      value={{ playSettings, setPlaySettings, playUrl, reportStopPlayback }}
+    >
+      {children}
+    </PlaySettingsContext.Provider>
+  );
+};
+
+export const usePlaySettings = () => {
+  const context = useContext(PlaySettingsContext);
+  if (context === undefined) {
+    throw new Error(
+      "usePlaySettings must be used within a PlaySettingsProvider"
+    );
+  }
+  return context;
+};
diff --git a/utils/atoms/settings.ts b/utils/atoms/settings.ts
index cabfc8cf..72583b12 100644
--- a/utils/atoms/settings.ts
+++ b/utils/atoms/settings.ts
@@ -133,7 +133,7 @@ const saveSettings = async (settings: Settings) => {
 };
 
 // Create an atom to store the settings in memory
-const settingsAtom = atom<Settings | null>(null);
+export const settingsAtom = atom<Settings | null>(null);
 
 // A hook to manage settings, loading them on initial mount and providing a way to update them
 export const useSettings = () => {
diff --git a/utils/jellyfin/media/getStreamUrl.ts b/utils/jellyfin/media/getStreamUrl.ts
index b8b802e0..fa7413df 100644
--- a/utils/jellyfin/media/getStreamUrl.ts
+++ b/utils/jellyfin/media/getStreamUrl.ts
@@ -1,15 +1,12 @@
-import ios from "@/utils/profiles/ios";
+import iosFmp4 from "@/utils/profiles/iosFmp4";
 import { Api } from "@jellyfin/sdk";
 import {
   BaseItemDto,
   MediaSourceInfo,
   PlaybackInfoResponse,
 } from "@jellyfin/sdk/lib/generated-client/models";
+import { getMediaInfoApi } from "@jellyfin/sdk/lib/utils/api";
 import { getAuthHeaders } from "../jellyfin";
-import iosFmp4 from "@/utils/profiles/iosFmp4";
-import { getItemsApi, getMediaInfoApi } from "@jellyfin/sdk/lib/utils/api";
-import { isPlainObject } from "lodash";
-import { Alert } from "react-native";
 
 export const getStreamUrl = async ({
   api,
@@ -64,14 +61,7 @@ export const getStreamUrl = async ({
         },
       }
     );
-
-    const mediaSourceId = res0.data.MediaSources?.[0].Id;
-    const liveStreamId = res0.data.MediaSources?.[0].LiveStreamId;
-
     const transcodeUrl = res0.data.MediaSources?.[0].TranscodingUrl;
-
-    console.log("transcodeUrl", transcodeUrl);
-
     if (transcodeUrl) return `${api.basePath}${transcodeUrl}`;
   }
 
@@ -131,7 +121,9 @@ export const getStreamUrl = async ({
     url = `${api.basePath}${mediaSource.TranscodingUrl}`;
   }
 
-  if (!url) throw new Error("No url");
+  if (!url) {
+    return null;
+  }
 
   return url;
 };

From 862e783de15f3d1a2cec939f281d1c77fce8133f Mon Sep 17 00:00:00 2001
From: Fredrik Burmester <fredrik.burmester@gmail.com>
Date: Sun, 6 Oct 2024 15:11:06 +0200
Subject: [PATCH 04/10] wip

---
 app/(auth)/play-video.tsx            | 151 ++++---
 components/BitrateSelector.tsx       |  34 +-
 components/ItemContent.tsx           |  18 +-
 components/PlayButton.tsx            |   5 +-
 components/video-player/Controls.tsx | 624 +++++++++++++++------------
 hooks/useCreditSkipper.ts            |   3 +
 hooks/useIntroSkipper.ts             |   3 +
 providers/PlaySettingsProvider.tsx   |   6 +-
 8 files changed, 484 insertions(+), 360 deletions(-)

diff --git a/app/(auth)/play-video.tsx b/app/(auth)/play-video.tsx
index 7e8e2d17..cf7b29f2 100644
--- a/app/(auth)/play-video.tsx
+++ b/app/(auth)/play-video.tsx
@@ -1,31 +1,30 @@
+import { Controls } from "@/components/video-player/Controls";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
-import { settingsAtom, useSettings } from "@/utils/atoms/settings";
-import { getBackdropUrl } from "@/utils/jellyfin/image/getBackdropUrl";
-import { getAuthHeaders } from "@/utils/jellyfin/jellyfin";
-import { getStreamUrl } from "@/utils/jellyfin/media/getStreamUrl";
-import { Api } from "@jellyfin/sdk";
-import {
-  BaseItemDto,
-  MediaSourceInfo,
-} from "@jellyfin/sdk/lib/generated-client";
-import { useRouter } from "expo-router";
-import { atom, useAtom } from "jotai";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import Video, { OnProgressData, VideoRef } from "react-native-video";
-import settings from "./(tabs)/(home)/settings";
-import iosFmp4 from "@/utils/profiles/iosFmp4";
-import native from "@/utils/profiles/native";
-import old from "@/utils/profiles/old";
 import {
   PlaybackType,
   usePlaySettings,
 } from "@/providers/PlaySettingsProvider";
-import { StatusBar, View } from "react-native";
-import React from "react";
-import { Controls } from "@/components/video-player/Controls";
+import { useSettings } from "@/utils/atoms/settings";
+import { getBackdropUrl } from "@/utils/jellyfin/image/getBackdropUrl";
+import { getAuthHeaders } from "@/utils/jellyfin/jellyfin";
 import { reportPlaybackProgress } from "@/utils/jellyfin/playstate/reportPlaybackProgress";
-import { useSharedValue } from "react-native-reanimated";
+import orientationToOrientationLock from "@/utils/OrientationLockConverter";
 import { secondsToTicks } from "@/utils/secondsToTicks";
+import { Api } from "@jellyfin/sdk";
+import * as Haptics from "expo-haptics";
+import { useRouter } from "expo-router";
+import * as ScreenOrientation from "expo-screen-orientation";
+import { useAtom } from "jotai";
+import React, {
+  useCallback,
+  useEffect,
+  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, setPlaySettings, playUrl, reportStopPlayback } =
@@ -38,24 +37,31 @@ export default function page() {
   const poster = usePoster(playSettings, api);
   const videoSource = useVideoSource(playSettings, api, poster, playUrl);
 
+  const windowDimensions = Dimensions.get("window");
+  const screenDimensions = Dimensions.get("screen");
+
+  const [showControls, setShowControls] = useState(true);
+  const [ignoreSafeAreas, setIgnoreSafeAreas] = useState(false);
   const [ignoreSafeArea, setIgnoreSafeArea] = 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);
 
-  useEffect(() => {
-    console.log("play-video ~", playUrl);
-  });
-
   if (!playSettings || !playUrl || !api || !videoSource || !playSettings.item)
     return null;
 
   const togglePlay = useCallback(
     (ticks: number) => {
+      Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+      console.log("togglePlay", ticks);
       if (isPlaying) {
+        setIsPlaying(false);
         videoRef.current?.pause();
         reportPlaybackProgress({
           api,
@@ -65,6 +71,7 @@ export default function page() {
           IsPaused: true,
         });
       } else {
+        setIsPlaying(true);
         videoRef.current?.resume();
         reportPlaybackProgress({
           api,
@@ -78,15 +85,19 @@ export default function page() {
     [isPlaying, api, playSettings?.item?.Id, videoRef]
   );
 
+  const play = useCallback(() => {
+    setIsPlaying(true);
+    videoRef.current?.resume();
+  }, [videoRef]);
+
   useEffect(() => {
-    if (!isPlaying) {
-      togglePlay(playSettings.item?.UserData?.PlaybackPositionTicks || 0);
-    }
-  }, [isPlaying]);
+    play();
+  }, []);
 
   const onProgress = useCallback(
     (data: OnProgressData) => {
       if (isSeeking.value === true) return;
+
       progress.value = secondsToTicks(data.currentTime);
       cacheProgress.value = secondsToTicks(data.playableDuration);
       setIsBuffering(data.playableDuration === 0);
@@ -104,27 +115,65 @@ export default function page() {
     [playSettings?.item.Id, isPlaying, api]
   );
 
+  useEffect(() => {
+    const orientationSubscription =
+      ScreenOrientation.addOrientationChangeListener((event) => {
+        setOrientation(
+          orientationToOrientationLock(event.orientationInfo.orientation)
+        );
+      });
+
+    ScreenOrientation.getOrientationAsync().then((orientation) => {
+      setOrientation(orientationToOrientationLock(orientation));
+    });
+
+    return () => {
+      orientationSubscription.remove();
+    };
+  }, []);
+
+  const isLandscape = useMemo(() => {
+    return orientation === ScreenOrientation.OrientationLock.LANDSCAPE_LEFT ||
+      orientation === ScreenOrientation.OrientationLock.LANDSCAPE_RIGHT
+      ? true
+      : false;
+  }, [orientation]);
+
   return (
-    <View className="relative h-screen w-screen flex flex-col items-center justify-center">
+    <View
+      style={{
+        width: screenDimensions.width,
+        height: screenDimensions.height,
+        position: "relative",
+      }}
+      className="flex flex-col items-center justify-center"
+    >
       <StatusBar hidden />
-      <Video
-        ref={videoRef}
-        source={videoSource}
-        paused={!isPlaying}
-        style={{ width: "100%", height: "100%" }}
-        resizeMode={ignoreSafeArea ? "cover" : "contain"}
-        onProgress={onProgress}
-        onLoad={(data) => {}}
-        onError={() => {}}
-        playWhenInactive={true}
-        allowsExternalPlayback={true}
-        playInBackground={true}
-        pictureInPicture={true}
-        showNotificationControls={true}
-        ignoreSilentSwitch="ignore"
-        fullscreen={false}
-        onPlaybackStateChanged={(state) => setIsPlaying(state.isPlaying)}
-      />
+      <Pressable
+        onPress={() => {
+          setShowControls(!showControls);
+        }}
+        className="absolute z-0 h-full w-full"
+      >
+        <Video
+          ref={videoRef}
+          source={videoSource}
+          paused={!isPlaying}
+          style={{ width: "100%", height: "100%" }}
+          resizeMode={ignoreSafeAreas ? "cover" : "contain"}
+          onProgress={onProgress}
+          onError={() => {}}
+          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}
@@ -133,6 +182,12 @@ export default function page() {
         isSeeking={isSeeking}
         progress={progress}
         cacheProgress={cacheProgress}
+        isBuffering={isBuffering}
+        showControls={showControls}
+        setShowControls={setShowControls}
+        isLandscape={isLandscape}
+        setIgnoreSafeAreas={setIgnoreSafeAreas}
+        ignoreSafeAreas={ignoreSafeAreas}
       />
     </View>
   );
diff --git a/components/BitrateSelector.tsx b/components/BitrateSelector.tsx
index 128e561d..28674c48 100644
--- a/components/BitrateSelector.tsx
+++ b/components/BitrateSelector.tsx
@@ -1,7 +1,8 @@
 import { TouchableOpacity, View } from "react-native";
 import * as DropdownMenu from "zeego/dropdown-menu";
 import { Text } from "./common/Text";
-import { useMemo } from "react";
+import { useEffect, useMemo } from "react";
+import { usePlaySettings } from "@/providers/PlaySettingsProvider";
 
 export type Bitrate = {
   key: string;
@@ -9,7 +10,7 @@ export type Bitrate = {
   height?: number;
 };
 
-const BITRATES: Bitrate[] = [
+export const BITRATES: Bitrate[] = [
   {
     key: "Max",
     value: undefined,
@@ -42,17 +43,11 @@ const BITRATES: Bitrate[] = [
 ];
 
 interface Props extends React.ComponentProps<typeof View> {
-  onChange: (value: Bitrate) => void;
-  selected: Bitrate;
   inverted?: boolean;
 }
 
-export const BitrateSelector: React.FC<Props> = ({
-  onChange,
-  selected,
-  inverted,
-  ...props
-}) => {
+export const BitrateSelector: React.FC<Props> = ({ inverted, ...props }) => {
+  const { setPlaySettings, playSettings } = usePlaySettings();
   const sorted = useMemo(() => {
     if (inverted)
       return BITRATES.sort(
@@ -63,6 +58,18 @@ export const BitrateSelector: React.FC<Props> = ({
     );
   }, []);
 
+  const selected = useMemo(() => {
+    return sorted.find((b) => b.value === playSettings?.bitrate?.value);
+  }, [playSettings?.bitrate]);
+
+  // Set default bitrate on load
+  useEffect(() => {
+    setPlaySettings((prev) => ({
+      ...prev,
+      bitrate: BITRATES[0],
+    }));
+  }, []);
+
   return (
     <View
       className="flex shrink"
@@ -77,7 +84,7 @@ export const BitrateSelector: React.FC<Props> = ({
             <Text className="opacity-50 mb-1 text-xs">Quality</Text>
             <TouchableOpacity className="bg-neutral-900 h-10 rounded-xl border-neutral-800 border px-3 py-2 flex flex-row items-center justify-between">
               <Text style={{}} className="" numberOfLines={1}>
-                {BITRATES.find((b) => b.value === selected.value)?.key}
+                {selected?.key}
               </Text>
             </TouchableOpacity>
           </View>
@@ -96,7 +103,10 @@ export const BitrateSelector: React.FC<Props> = ({
             <DropdownMenu.Item
               key={b.key}
               onSelect={() => {
-                onChange(b);
+                setPlaySettings((prev) => ({
+                  ...prev,
+                  bitrate: b,
+                }));
               }}
             >
               <DropdownMenu.ItemTitle>{b.key}</DropdownMenu.ItemTitle>
diff --git a/components/ItemContent.tsx b/components/ItemContent.tsx
index 7488fdf4..fcdf5c23 100644
--- a/components/ItemContent.tsx
+++ b/components/ItemContent.tsx
@@ -13,13 +13,14 @@ import { CurrentSeries } from "@/components/series/CurrentSeries";
 import { SeasonEpisodesCarousel } from "@/components/series/SeasonEpisodesCarousel";
 import { useImageColors } from "@/hooks/useImageColors";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+import { usePlaySettings } from "@/providers/PlaySettingsProvider";
 import { useSettings } from "@/utils/atoms/settings";
 import { getLogoImageUrlById } from "@/utils/jellyfin/image/getLogoImageUrlById";
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
 import { Image } from "expo-image";
 import { useNavigation } from "expo-router";
 import * as ScreenOrientation from "expo-screen-orientation";
-import { useAtom, useAtomValue } from "jotai";
+import { useAtom } from "jotai";
 import React, { useEffect, useMemo, useRef, useState } from "react";
 import { View } from "react-native";
 import { useCastDevice } from "react-native-google-cast";
@@ -29,7 +30,6 @@ import { Chromecast } from "./Chromecast";
 import { ItemHeader } from "./ItemHeader";
 import { MediaSourceSelector } from "./MediaSourceSelector";
 import { MoreMoviesWithActor } from "./MoreMoviesWithActor";
-import { usePlaySettings } from "@/providers/PlaySettingsProvider";
 
 export const ItemContent: React.FC<{ item: BaseItemDto }> = React.memo(
   ({ item }) => {
@@ -112,14 +112,6 @@ export const ItemContent: React.FC<{ item: BaseItemDto }> = React.memo(
 
     const insets = useSafeAreaInsets();
 
-    // useFocusEffect(
-    //   useCallback(() => {
-    //     return () => {
-    //       setPlaySettings(null);
-    //     };
-    //   }, [setPlaySettings])
-    // );
-
     return (
       <View
         className="flex-1 relative"
@@ -171,11 +163,7 @@ export const ItemContent: React.FC<{ item: BaseItemDto }> = React.memo(
               <ItemHeader item={item} className="mb-4" />
               {item.Type !== "Program" && (
                 <View className="flex flex-row items-center justify-start w-full h-16">
-                  <BitrateSelector
-                    className="mr-1"
-                    onChange={(val) => setMaxBitrate(val)}
-                    selected={maxBitrate}
-                  />
+                  <BitrateSelector className="mr-1" />
                   <MediaSourceSelector className="mr-1" />
                   <AudioTrackSelector className="mr-1" />
                   <SubtitleTrackSelector />
diff --git a/components/PlayButton.tsx b/components/PlayButton.tsx
index 7a0a2aff..c0a8e1ca 100644
--- a/components/PlayButton.tsx
+++ b/components/PlayButton.tsx
@@ -63,7 +63,10 @@ export const PlayButton: React.FC<Props> = ({ item, url, ...props }) => {
   }, [url]);
 
   const onPress = async () => {
-    if (!url || !item) return;
+    if (!url || !item) {
+      console.warn("No URL or item provided to PlayButton");
+      return;
+    }
     if (!client) {
       router.push("/play-video");
       return;
diff --git a/components/video-player/Controls.tsx b/components/video-player/Controls.tsx
index 558a2caa..91a5f160 100644
--- a/components/video-player/Controls.tsx
+++ b/components/video-player/Controls.tsx
@@ -4,11 +4,7 @@ import { useIntroSkipper } from "@/hooks/useIntroSkipper";
 import { useTrickplay } from "@/hooks/useTrickplay";
 import { apiAtom } from "@/providers/JellyfinProvider";
 import { useSettings } from "@/utils/atoms/settings";
-import { getBackdropUrl } from "@/utils/jellyfin/image/getBackdropUrl";
-import { getAuthHeaders } from "@/utils/jellyfin/jellyfin";
 import { writeToLog } from "@/utils/log";
-import orientationToOrientationLock from "@/utils/OrientationLockConverter";
-import { secondsToTicks } from "@/utils/secondsToTicks";
 import { formatTimeString, ticksToSeconds } from "@/utils/time";
 import { Ionicons } from "@expo/vector-icons";
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
@@ -16,30 +12,28 @@ import { Image } from "expo-image";
 import { useRouter, useSegments } from "expo-router";
 import * as ScreenOrientation from "expo-screen-orientation";
 import { useAtom } from "jotai";
-import React, { useCallback, useEffect, useMemo, useState } from "react";
-import {
-  Alert,
-  BackHandler,
-  Dimensions,
-  Share,
-  TouchableOpacity,
-  View,
-} from "react-native";
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { Dimensions, Pressable, TouchableOpacity, View } from "react-native";
 import { Slider } from "react-native-awesome-slider";
-import {
+import Animated, {
   runOnJS,
   SharedValue,
   useAnimatedReaction,
+  useAnimatedStyle,
   useSharedValue,
+  withTiming,
 } from "react-native-reanimated";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { OnProgressData, ReactVideoProps, VideoRef } from "react-native-video";
+import { VideoRef } from "react-native-video";
+import { Text } from "../common/Text";
 import { itemRouter } from "../common/TouchableItemRouter";
 import { Loader } from "../Loader";
-import { Text } from "../common/Text";
-
-const windowDimensions = Dimensions.get("window");
-const screenDimensions = Dimensions.get("screen");
 
 interface Props {
   item: BaseItemDto;
@@ -49,6 +43,12 @@ interface Props {
   isSeeking: SharedValue<boolean>;
   cacheProgress: SharedValue<number>;
   progress: SharedValue<number>;
+  isBuffering: boolean;
+  showControls: boolean;
+  setShowControls: (shown: boolean) => void;
+  ignoreSafeAreas?: boolean;
+  setIgnoreSafeAreas: React.Dispatch<React.SetStateAction<boolean>>;
+  isLandscape: boolean;
 }
 
 export const Controls: React.FC<Props> = ({
@@ -58,7 +58,13 @@ export const Controls: React.FC<Props> = ({
   isPlaying,
   isSeeking,
   progress,
+  isBuffering,
   cacheProgress,
+  showControls,
+  setShowControls,
+  isLandscape,
+  ignoreSafeAreas,
+  setIgnoreSafeAreas,
 }) => {
   const [settings] = useSettings();
   const [api] = useAtom(apiAtom);
@@ -66,60 +72,62 @@ export const Controls: React.FC<Props> = ({
   const segments = useSegments();
   const insets = useSafeAreaInsets();
 
+  const screenDimensions = Dimensions.get("screen");
+
+  const op = useSharedValue<number>(1);
+  const tr = useSharedValue<number>(10);
+  const animatedStyles = useAnimatedStyle(() => {
+    return {
+      opacity: op.value,
+    };
+  });
+  const animatedTopStyles = useAnimatedStyle(() => {
+    return {
+      opacity: op.value,
+      transform: [
+        {
+          translateY: -tr.value,
+        },
+      ],
+    };
+  });
+  const animatedBottomStyles = useAnimatedStyle(() => {
+    return {
+      opacity: op.value,
+      transform: [
+        {
+          translateY: tr.value,
+        },
+      ],
+    };
+  });
+
+  useEffect(() => {
+    if (showControls || isBuffering) {
+      op.value = withTiming(1, { duration: 200 });
+      tr.value = withTiming(0, { duration: 200 });
+    } else {
+      op.value = withTiming(0, { duration: 200 });
+      tr.value = withTiming(10, { duration: 200 });
+    }
+  }, [showControls, isBuffering]);
+
   const { previousItem, nextItem } = useAdjacentEpisodes({ item });
   const { trickPlayUrl, calculateTrickplayUrl, trickplayInfo } =
     useTrickplay(item);
 
-  const [showControls, setShowControls] = useState(true);
-  const [isBuffering, setIsBufferingState] = useState(true);
-  const [ignoreSafeArea, setIgnoreSafeArea] = useState(false);
-  const [orientation, setOrientation] = useState(
-    ScreenOrientation.OrientationLock.UNKNOWN
-  );
-
-  // Seconds
-  const [currentTime, setCurrentTime] = useState(0);
-  const [remainingTime, setRemainingTime] = useState(0);
+  const [currentTime, setCurrentTime] = useState(0); // Seconds
+  const [remainingTime, setRemainingTime] = useState(0); // Seconds
 
   const min = useSharedValue(0);
   const max = useSharedValue(item.RunTimeTicks || 0);
 
-  const [dimensions, setDimensions] = useState({
-    window: windowDimensions,
-    screen: screenDimensions,
-  });
-
-  useEffect(() => {
-    const dimensionsSubscription = Dimensions.addEventListener(
-      "change",
-      ({ window, screen }) => {
-        setDimensions({ window, screen });
-      }
-    );
-
-    const orientationSubscription =
-      ScreenOrientation.addOrientationChangeListener((event) => {
-        setOrientation(
-          orientationToOrientationLock(event.orientationInfo.orientation)
-        );
-      });
-
-    ScreenOrientation.getOrientationAsync().then((orientation) => {
-      setOrientation(orientationToOrientationLock(orientation));
-    });
-
-    return () => {
-      dimensionsSubscription.remove();
-      orientationSubscription.remove();
-    };
-  }, []);
-
   const from = useMemo(() => segments[2], [segments]);
 
   const updateTimes = useCallback(
     (currentProgress: number, maxValue: number) => {
       const current = ticksToSeconds(currentProgress);
-      const remaining = ticksToSeconds(maxValue - current);
+      const remaining = ticksToSeconds(maxValue - currentProgress);
 
       setCurrentTime(current);
       setRemainingTime(remaining);
@@ -153,13 +161,6 @@ export const Controls: React.FC<Props> = ({
     [updateTimes]
   );
 
-  const isLandscape = useMemo(() => {
-    return orientation === ScreenOrientation.OrientationLock.LANDSCAPE_LEFT ||
-      orientation === ScreenOrientation.OrientationLock.LANDSCAPE_RIGHT
-      ? true
-      : false;
-  }, [orientation]);
-
   useEffect(() => {
     if (item) {
       progress.value = item?.UserData?.PlaybackPositionTicks || 0;
@@ -173,6 +174,9 @@ export const Controls: React.FC<Props> = ({
     progress.value = value;
     isSeeking.value = false;
     videoRef.current?.seek(value / 10000000);
+    setTimeout(() => {
+      videoRef.current?.resume();
+    }, 200);
   };
 
   const handleSliderChange = (value: number) => {
@@ -182,7 +186,7 @@ export const Controls: React.FC<Props> = ({
   const handleSliderStart = useCallback(() => {
     if (showControls === false) return;
     isSeeking.value = true;
-  }, []);
+  }, [showControls]);
 
   const handleSkipBackward = useCallback(async () => {
     if (!settings) return;
@@ -190,6 +194,9 @@ export const Controls: React.FC<Props> = ({
       const curr = await videoRef.current?.getCurrentPosition();
       if (curr !== undefined) {
         videoRef.current?.seek(Math.max(0, curr - settings.rewindSkipTime));
+        setTimeout(() => {
+          videoRef.current?.resume();
+        }, 200);
       }
     } catch (error) {
       writeToLog("ERROR", "Error seeking video backwards", error);
@@ -202,6 +209,9 @@ export const Controls: React.FC<Props> = ({
       const curr = await videoRef.current?.getCurrentPosition();
       if (curr !== undefined) {
         videoRef.current?.seek(Math.max(0, curr + settings.forwardSkipTime));
+        setTimeout(() => {
+          videoRef.current?.resume();
+        }, 200);
       }
     } catch (error) {
       writeToLog("ERROR", "Error seeking video forwards", error);
@@ -222,230 +232,280 @@ export const Controls: React.FC<Props> = ({
     router.push(url);
   }, [nextItem, from, router]);
 
-  const toggleIgnoreSafeArea = useCallback(() => {
-    setIgnoreSafeArea((prev) => !prev);
+  const toggleIgnoreSafeAreas = useCallback(() => {
+    setIgnoreSafeAreas((prev) => !prev);
   }, []);
 
   return (
-    <View className="absolute h-screen w-screen top-0 left-0">
-      <View className="relative">
-        {(showControls || isBuffering) && (
-          <View
-            pointerEvents="none"
-            className=" bg-black/50 z-0 w-screen h-screen absolute top-0 left-0"
-          ></View>
-        )}
-
-        {isBuffering && (
-          <View
-            pointerEvents="none"
-            className="fixed top-0 left-0 w-screen h-screen flex flex-col items-center justify-center"
-          >
-            <Loader />
-          </View>
-        )}
-
-        {showSkipButton && (
-          <View
-            style={[
-              {
-                position: "absolute",
-                bottom: isLandscape ? insets.bottom + 26 : insets.bottom + 70,
-                right: isLandscape ? insets.right + 32 : insets.right + 16,
-                height: 70,
-              },
-            ]}
-            className="z-10"
-          >
-            <TouchableOpacity
-              onPress={skipIntro}
-              className="bg-purple-600 rounded-full px-2.5 py-2 font-semibold"
-            >
-              <Text className="text-white">Skip Intro</Text>
-            </TouchableOpacity>
-          </View>
-        )}
-
-        {showSkipCreditButton && (
-          <View
-            pointerEvents={showSkipCreditButton ? "auto" : "none"}
-            className={`z-10 absolute bottom-16 right-4 ${
-              showSkipCreditButton ? "opacity-100" : "opacity-0"
-            }`}
-          >
-            <TouchableOpacity
-              onPress={skipCredit}
-              className="bg-purple-600 rounded-full px-2.5 py-2 font-semibold"
-            >
-              <Text className="text-white">Skip Credits</Text>
-            </TouchableOpacity>
-          </View>
-        )}
-
-        <View className="absolute top-16 right-4 flex flex-row items-center space-x-2 z-10">
-          <TouchableOpacity
-            onPress={toggleIgnoreSafeArea}
-            className="aspect-square flex flex-col bg-neutral-800 rounded-xl items-center justify-center p-2"
-          >
-            <Ionicons
-              name={ignoreSafeArea ? "contract-outline" : "expand"}
-              size={24}
-              color="white"
-            />
-          </TouchableOpacity>
-          <TouchableOpacity
-            onPress={() => {
-              router.back();
-            }}
-            className="aspect-square flex flex-col bg-neutral-800 rounded-xl items-center justify-center p-2"
-          >
-            <Ionicons name="close" size={24} color="white" />
-          </TouchableOpacity>
-        </View>
-
-        <View
-          pointerEvents={showControls ? "auto" : "none"}
-          className={`absolute bottom-4 left-0 w-screen p-4 ${
-            showControls ? "opacity-100" : "opacity-0"
-          }`}
+    <View
+      style={[
+        {
+          position: "absolute",
+          top: 0,
+          left: 0,
+          width: screenDimensions.width,
+          height: screenDimensions.height,
+        },
+      ]}
+    >
+      <View
+        style={[
+          {
+            position: "absolute",
+            bottom: isLandscape ? insets.bottom + 55 : insets.bottom + 97,
+            right: isLandscape ? insets.right : insets.right,
+          },
+        ]}
+        className={`z-10 p-4
+          ${showSkipButton ? "opacity-100" : "opacity-0"}
+        `}
+      >
+        <TouchableOpacity
+          onPress={skipIntro}
+          className="bg-purple-600 rounded-full px-2.5 py-2 font-semibold"
         >
-          <View className="shrink flex flex-col justify-center h-full mb-2">
-            <Text className="font-bold">{item?.Name}</Text>
-            {item?.Type === "Episode" && (
-              <Text className="opacity-50">{item.SeriesName}</Text>
-            )}
-            {item?.Type === "Movie" && (
-              <Text className="text-xs opacity-50">{item?.ProductionYear}</Text>
-            )}
-            {item?.Type === "Audio" && (
-              <Text className="text-xs opacity-50">{item?.Album}</Text>
-            )}
-          </View>
-          <View
-            className={`flex ${
-              isLandscape
-                ? "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`}
-          >
-            <View className="flex flex-row items-center space-x-4">
-              <TouchableOpacity
-                style={{
-                  opacity: !previousItem ? 0.5 : 1,
-                }}
-                onPress={handleGoToPreviousItem}
-              >
-                <Ionicons name="play-skip-back" size={24} color="white" />
-              </TouchableOpacity>
-              <TouchableOpacity onPress={handleSkipBackward}>
-                <Ionicons
-                  name="refresh-outline"
-                  size={26}
-                  color="white"
-                  style={{
-                    transform: [{ scaleY: -1 }, { rotate: "180deg" }],
-                  }}
-                />
-              </TouchableOpacity>
-              <TouchableOpacity
-                onPress={() => {
-                  togglePlay(progress.value);
-                }}
-              >
-                <Ionicons
-                  name={isPlaying ? "pause" : "play"}
-                  size={30}
-                  color="white"
-                />
-              </TouchableOpacity>
-              <TouchableOpacity onPress={handleSkipForward}>
-                <Ionicons name="refresh-outline" size={26} color="white" />
-              </TouchableOpacity>
-              <TouchableOpacity
-                style={{
-                  opacity: !nextItem ? 0.5 : 1,
-                }}
-                onPress={handleGoToNextItem}
-              >
-                <Ionicons name="play-skip-forward" size={24} color="white" />
-              </TouchableOpacity>
-            </View>
-            <View className={`flex flex-col w-full shrink`}>
-              <Slider
-                theme={{
-                  maximumTrackTintColor: "rgba(255,255,255,0.2)",
-                  minimumTrackTintColor: "#fff",
-                  cacheTrackTintColor: "rgba(255,255,255,0.3)",
-                  bubbleBackgroundColor: "#fff",
-                  bubbleTextColor: "#000",
-                  heartbeatColor: "#999",
-                }}
-                cache={cacheProgress}
-                onSlidingStart={handleSliderStart}
-                onSlidingComplete={handleSliderComplete}
-                onValueChange={handleSliderChange}
-                containerStyle={{
-                  borderRadius: 100,
-                }}
-                renderBubble={() => {
-                  if (!trickPlayUrl || !trickplayInfo) {
-                    return null;
-                  }
-                  const { x, y, url } = trickPlayUrl;
+          <Text className="text-white">Skip Intro</Text>
+        </TouchableOpacity>
+      </View>
 
-                  const tileWidth = 150;
-                  const tileHeight = 150 / trickplayInfo.aspectRatio!;
-                  return (
-                    <View
-                      style={{
-                        position: "absolute",
-                        bottom: 0,
-                        left: 0,
-                        width: tileWidth,
-                        height: tileHeight,
-                        marginLeft: -tileWidth / 4,
-                        marginTop: -tileHeight / 4 - 60,
-                        zIndex: 10,
-                      }}
-                      className=" bg-neutral-800 overflow-hidden"
-                    >
-                      <Image
-                        cachePolicy={"memory-disk"}
-                        style={{
-                          width: 150 * trickplayInfo?.data.TileWidth!,
-                          height:
-                            (150 / trickplayInfo.aspectRatio!) *
-                            trickplayInfo?.data.TileHeight!,
-                          transform: [
-                            { translateX: -x * tileWidth },
-                            { translateY: -y * tileHeight },
-                          ],
-                        }}
-                        source={{ uri: url }}
-                        contentFit="cover"
-                      />
-                    </View>
-                  );
+      <View
+        style={{
+          position: "absolute",
+          bottom: isLandscape ? insets.bottom + 52 : insets.bottom + 94,
+          right: isLandscape ? insets.right : insets.right,
+          height: 70,
+        }}
+        pointerEvents={showSkipCreditButton ? "auto" : "none"}
+        className={`z-10 p-4 ${
+          showSkipCreditButton ? "opacity-100" : "opacity-0"
+        }`}
+      >
+        <TouchableOpacity
+          onPress={skipCredit}
+          className="bg-purple-600 rounded-full px-2.5 py-2 font-semibold"
+        >
+          <Text className="text-white">Skip Credits</Text>
+        </TouchableOpacity>
+      </View>
+
+      <Pressable
+        onPress={() => {
+          toggleControls();
+        }}
+      >
+        <Animated.View
+          style={[
+            {
+              position: "absolute",
+              top: 0,
+              left: 0,
+              width: screenDimensions.width,
+              height: screenDimensions.height,
+            },
+            animatedStyles,
+          ]}
+          className={`bg-black/50 z-0`}
+        ></Animated.View>
+      </Pressable>
+
+      <View
+        style={{
+          position: "absolute",
+          top: 0,
+          left: 0,
+          width: screenDimensions.width,
+          height: screenDimensions.height,
+        }}
+        pointerEvents="none"
+        className={`flex flex-col items-center justify-center
+            ${isBuffering ? "opacity-100" : "opacity-0"}
+          `}
+      >
+        <Loader />
+      </View>
+
+      <Animated.View
+        style={[
+          {
+            position: "absolute",
+            top: insets.top,
+            right: insets.right,
+          },
+          animatedTopStyles,
+        ]}
+        pointerEvents={showControls ? "auto" : "none"}
+        className={`flex flex-row items-center space-x-2 z-10 p-4`}
+      >
+        <TouchableOpacity
+          onPress={toggleIgnoreSafeAreas}
+          className="aspect-square flex flex-col bg-neutral-800 rounded-xl items-center justify-center p-2"
+        >
+          <Ionicons
+            name={ignoreSafeAreas ? "contract-outline" : "expand"}
+            size={24}
+            color="white"
+          />
+        </TouchableOpacity>
+        <TouchableOpacity
+          onPress={() => {
+            router.back();
+          }}
+          className="aspect-square flex flex-col bg-neutral-800 rounded-xl items-center justify-center p-2"
+        >
+          <Ionicons name="close" size={24} color="white" />
+        </TouchableOpacity>
+      </Animated.View>
+
+      <Animated.View
+        style={[
+          {
+            position: "absolute",
+            width: screenDimensions.width - insets.left - insets.right,
+            maxHeight: screenDimensions.height,
+            left: insets.left,
+            bottom: insets.bottom,
+          },
+          animatedBottomStyles,
+        ]}
+        pointerEvents={showControls ? "auto" : "none"}
+        className={`flex flex-col p-4 `}
+      >
+        <View className="shrink flex flex-col justify-center h-full mb-2">
+          <Text className="font-bold">{item?.Name}</Text>
+          {item?.Type === "Episode" && (
+            <Text className="opacity-50">{item.SeriesName}</Text>
+          )}
+          {item?.Type === "Movie" && (
+            <Text className="text-xs opacity-50">{item?.ProductionYear}</Text>
+          )}
+          {item?.Type === "Audio" && (
+            <Text className="text-xs opacity-50">{item?.Album}</Text>
+          )}
+        </View>
+        <View
+          className={`flex ${
+            isLandscape
+              ? "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`}
+        >
+          <View className="flex flex-row items-center space-x-4">
+            <TouchableOpacity
+              style={{
+                opacity: !previousItem ? 0.5 : 1,
+              }}
+              onPress={handleGoToPreviousItem}
+            >
+              <Ionicons name="play-skip-back" size={24} color="white" />
+            </TouchableOpacity>
+            <TouchableOpacity onPress={handleSkipBackward}>
+              <Ionicons
+                name="refresh-outline"
+                size={26}
+                color="white"
+                style={{
+                  transform: [{ scaleY: -1 }, { rotate: "180deg" }],
                 }}
-                sliderHeight={10}
-                thumbWidth={0}
-                progress={progress}
-                minimumValue={min}
-                maximumValue={max}
               />
-              <View className="flex flex-row items-center justify-between mt-0.5">
-                <Text className="text-[12px] text-neutral-400">
-                  {formatTimeString(currentTime)}
-                </Text>
-                <Text className="text-[12px] text-neutral-400">
-                  -{formatTimeString(remainingTime)}
-                </Text>
-              </View>
+            </TouchableOpacity>
+            <TouchableOpacity
+              onPress={() => {
+                togglePlay(progress.value);
+              }}
+            >
+              <Ionicons
+                name={isPlaying ? "pause" : "play"}
+                size={30}
+                color="white"
+              />
+            </TouchableOpacity>
+            <TouchableOpacity onPress={handleSkipForward}>
+              <Ionicons name="refresh-outline" size={26} color="white" />
+            </TouchableOpacity>
+            <TouchableOpacity
+              style={{
+                opacity: !nextItem ? 0.5 : 1,
+              }}
+              onPress={handleGoToNextItem}
+            >
+              <Ionicons name="play-skip-forward" size={24} color="white" />
+            </TouchableOpacity>
+          </View>
+          <View className={`flex flex-col w-full shrink`}>
+            <Slider
+              theme={{
+                maximumTrackTintColor: "rgba(255,255,255,0.2)",
+                minimumTrackTintColor: "#fff",
+                cacheTrackTintColor: "rgba(255,255,255,0.3)",
+                bubbleBackgroundColor: "#fff",
+                bubbleTextColor: "#000",
+                heartbeatColor: "#999",
+              }}
+              cache={cacheProgress}
+              onSlidingStart={handleSliderStart}
+              onSlidingComplete={handleSliderComplete}
+              onValueChange={handleSliderChange}
+              containerStyle={{
+                borderRadius: 100,
+              }}
+              renderBubble={() => {
+                if (!trickPlayUrl || !trickplayInfo) {
+                  return null;
+                }
+                const { x, y, url } = trickPlayUrl;
+
+                const tileWidth = 150;
+                const tileHeight = 150 / trickplayInfo.aspectRatio!;
+                return (
+                  <View
+                    style={{
+                      position: "absolute",
+                      bottom: 0,
+                      left: 0,
+                      width: tileWidth,
+                      height: tileHeight,
+                      marginLeft: -tileWidth / 4,
+                      marginTop: -tileHeight / 4 - 60,
+                      zIndex: 10,
+                    }}
+                    className=" bg-neutral-800 overflow-hidden"
+                  >
+                    <Image
+                      cachePolicy={"memory-disk"}
+                      style={{
+                        width: 150 * trickplayInfo?.data.TileWidth!,
+                        height:
+                          (150 / trickplayInfo.aspectRatio!) *
+                          trickplayInfo?.data.TileHeight!,
+                        transform: [
+                          { translateX: -x * tileWidth },
+                          { translateY: -y * tileHeight },
+                        ],
+                      }}
+                      source={{ uri: url }}
+                      contentFit="cover"
+                    />
+                  </View>
+                );
+              }}
+              sliderHeight={10}
+              thumbWidth={0}
+              progress={progress}
+              minimumValue={min}
+              maximumValue={max}
+            />
+            <View className="flex flex-row items-center justify-between mt-0.5">
+              <Text className="text-[12px] text-neutral-400">
+                {formatTimeString(currentTime)}
+              </Text>
+              <Text className="text-[12px] text-neutral-400">
+                -{formatTimeString(remainingTime)}
+              </Text>
             </View>
           </View>
         </View>
-      </View>
+      </Animated.View>
     </View>
   );
 };
diff --git a/hooks/useCreditSkipper.ts b/hooks/useCreditSkipper.ts
index 2fb2940d..56cfe6f3 100644
--- a/hooks/useCreditSkipper.ts
+++ b/hooks/useCreditSkipper.ts
@@ -63,6 +63,9 @@ export const useCreditSkipper = (
     if (!creditTimestamps || !videoRef.current) return;
     try {
       videoRef.current.seek(creditTimestamps.Credits.End);
+      setTimeout(() => {
+        videoRef.current?.resume();
+      }, 200);
     } catch (error) {
       writeToLog("ERROR", "Error skipping intro", error);
     }
diff --git a/hooks/useIntroSkipper.ts b/hooks/useIntroSkipper.ts
index df05462e..3def1120 100644
--- a/hooks/useIntroSkipper.ts
+++ b/hooks/useIntroSkipper.ts
@@ -59,6 +59,9 @@ export const useIntroSkipper = (
     if (!introTimestamps || !videoRef.current) return;
     try {
       videoRef.current.seek(introTimestamps.IntroEnd);
+      setTimeout(() => {
+        videoRef.current?.resume();
+      }, 200);
     } catch (error) {
       writeToLog("ERROR", "Error skipping intro", error);
     }
diff --git a/providers/PlaySettingsProvider.tsx b/providers/PlaySettingsProvider.tsx
index 1008f6cc..05769508 100644
--- a/providers/PlaySettingsProvider.tsx
+++ b/providers/PlaySettingsProvider.tsx
@@ -17,13 +17,14 @@ import native from "@/utils/profiles/native";
 import old from "@/utils/profiles/old";
 import { getStreamUrl } from "@/utils/jellyfin/media/getStreamUrl";
 import { reportPlaybackStopped } from "@/utils/jellyfin/playstate/reportPlaybackStopped";
+import { Bitrate } from "@/components/BitrateSelector";
 
 export type PlaybackType = {
   item?: BaseItemDto | null;
   mediaSource?: MediaSourceInfo | null;
   subtitleIndex?: number | null;
   audioIndex?: number | null;
-  quality?: any | null;
+  bitrate?: Bitrate | null;
 };
 
 type PlaySettingsContextType = {
@@ -64,6 +65,7 @@ export const PlaySettingsProvider: React.FC<{ children: React.ReactNode }> = ({
 
   useEffect(() => {
     const fetchPlayUrl = async () => {
+      console.log("something changed, fetching url", playSettings?.item?.Id);
       if (!api || !user || !settings) {
         setPlayUrl(null);
         return;
@@ -80,7 +82,7 @@ export const PlaySettingsProvider: React.FC<{ children: React.ReactNode }> = ({
         item: playSettings?.item,
         mediaSourceId: playSettings?.mediaSource?.Id,
         startTimeTicks: 0,
-        maxStreamingBitrate: 0,
+        maxStreamingBitrate: playSettings?.bitrate?.value,
         audioStreamIndex: playSettings?.audioIndex
           ? playSettings?.audioIndex
           : 0,

From d6f02bd970827b0dc09164ead647aaeead8ddc7a Mon Sep 17 00:00:00 2001
From: Fredrik Burmester <fredrik.burmester@gmail.com>
Date: Sun, 6 Oct 2024 16:33:29 +0200
Subject: [PATCH 05/10] wip

---
 app/(auth)/play-video.tsx                     | 147 +++++++++++++-----
 app/_layout.tsx                               | 114 +++++++-------
 components/ItemContent.tsx                    |  24 +--
 components/PlayButton.tsx                     |   8 +-
 components/video-player/Controls.tsx          |  35 +++--
 hooks/useWebsockets.ts                        | 112 +++++++++++++
 providers/PlaySettingsProvider.tsx            |  36 ++++-
 utils/jellyfin/media/getStreamUrl.ts          |  11 ++
 .../playstate/reportPlaybackProgress.ts       |  54 ++++---
 9 files changed, 394 insertions(+), 147 deletions(-)
 create mode 100644 hooks/useWebsockets.ts

diff --git a/app/(auth)/play-video.tsx b/app/(auth)/play-video.tsx
index cf7b29f2..d6bb866c 100644
--- a/app/(auth)/play-video.tsx
+++ b/app/(auth)/play-video.tsx
@@ -1,5 +1,6 @@
 import { Controls } from "@/components/video-player/Controls";
-import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+import { useWebSocket } from "@/hooks/useWebsockets";
+import { apiAtom } from "@/providers/JellyfinProvider";
 import {
   PlaybackType,
   usePlaySettings,
@@ -7,14 +8,13 @@ import {
 import { useSettings } from "@/utils/atoms/settings";
 import { getBackdropUrl } from "@/utils/jellyfin/image/getBackdropUrl";
 import { getAuthHeaders } from "@/utils/jellyfin/jellyfin";
-import { reportPlaybackProgress } from "@/utils/jellyfin/playstate/reportPlaybackProgress";
 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 { useRouter } from "expo-router";
 import * as ScreenOrientation from "expo-screen-orientation";
-import { useAtom } from "jotai";
+import { useAtomValue } from "jotai";
 import React, {
   useCallback,
   useEffect,
@@ -22,27 +22,23 @@ import React, {
   useRef,
   useState,
 } from "react";
-import { Dimensions, Pressable, StatusBar, View } from "react-native";
+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";
 
 export default function page() {
-  const { playSettings, setPlaySettings, playUrl, reportStopPlayback } =
-    usePlaySettings();
-  const [api] = useAtom(apiAtom);
-  const [user] = useAtom(userAtom);
+  const { playSettings, playUrl } = usePlaySettings();
+  const api = useAtomValue(apiAtom);
   const [settings] = useSettings();
-  const router = useRouter();
   const videoRef = useRef<VideoRef | null>(null);
   const poster = usePoster(playSettings, api);
   const videoSource = useVideoSource(playSettings, api, poster, playUrl);
 
-  const windowDimensions = Dimensions.get("window");
   const screenDimensions = Dimensions.get("screen");
 
   const [showControls, setShowControls] = useState(true);
   const [ignoreSafeAreas, setIgnoreSafeAreas] = useState(false);
-  const [ignoreSafeArea, setIgnoreSafeArea] = useState(false);
   const [isPlaying, setIsPlaying] = useState(false);
   const [isBuffering, setIsBuffering] = useState(true);
   const [orientation, setOrientation] = useState(
@@ -57,59 +53,127 @@ export default function page() {
     return null;
 
   const togglePlay = useCallback(
-    (ticks: number) => {
+    async (ticks: number) => {
       Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
-      console.log("togglePlay", ticks);
       if (isPlaying) {
         setIsPlaying(false);
         videoRef.current?.pause();
-        reportPlaybackProgress({
-          api,
-          itemId: playSettings?.item?.Id,
-          positionTicks: ticks,
-          sessionId: undefined,
-          IsPaused: true,
+        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: true,
+          playMethod: playUrl.includes("m3u8") ? "Transcode" : "DirectStream",
         });
       } else {
         setIsPlaying(true);
         videoRef.current?.resume();
-        reportPlaybackProgress({
-          api,
-          itemId: playSettings?.item?.Id,
-          positionTicks: ticks,
-          sessionId: undefined,
-          IsPaused: false,
+        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: false,
+          playMethod: playUrl.includes("m3u8") ? "Transcode" : "DirectStream",
         });
       }
     },
-    [isPlaying, api, playSettings?.item?.Id, videoRef]
+    [isPlaying, api, playSettings?.item?.Id, videoRef, settings]
   );
 
   const play = useCallback(() => {
     setIsPlaying(true);
     videoRef.current?.resume();
+    reportPlaybackStart();
   }, [videoRef]);
 
+  const pause = useCallback(() => {
+    setIsPlaying(false);
+    videoRef.current?.pause();
+  }, [videoRef]);
+
+  const stop = useCallback(() => {
+    setIsPlaying(false);
+    videoRef.current?.pause();
+    reportPlaybackStopped();
+  }, [videoRef]);
+
+  const reportPlaybackStopped = async () => {
+    await getPlaystateApi(api).onPlaybackStopped({
+      itemId: playSettings?.item?.Id!,
+      mediaSourceId: playSettings.mediaSource?.Id!,
+      positionTicks: progress.value,
+    });
+  };
+
+  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",
+    });
+  };
+
+  const firstTime = useRef(true);
   useEffect(() => {
     play();
+
+    if (Platform.OS === "android") {
+      NavigationBar.setVisibilityAsync("hidden");
+      NavigationBar.setBehaviorAsync("overlay-swipe");
+    }
+
+    return () => {
+      stop();
+
+      if (Platform.OS === "android") {
+        NavigationBar.setVisibilityAsync("visible");
+        NavigationBar.setBehaviorAsync("inset-swipe");
+      }
+    };
   }, []);
 
   const onProgress = useCallback(
-    (data: OnProgressData) => {
+    async (data: OnProgressData) => {
       if (isSeeking.value === 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;
-      const ticks = data.currentTime * 10000000;
-      reportPlaybackProgress({
-        api,
-        itemId: playSettings?.item.Id,
-        positionTicks: ticks,
-        sessionId: undefined,
-        IsPaused: !isPlaying,
+
+      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",
       });
     },
     [playSettings?.item.Id, isPlaying, api]
@@ -139,6 +203,13 @@ export default function page() {
       : false;
   }, [orientation]);
 
+  const { isConnected } = useWebSocket({
+    isPlaying: isPlaying,
+    pauseVideo: pause,
+    playVideo: play,
+    stopPlayback: stop,
+  });
+
   return (
     <View
       style={{
@@ -163,6 +234,12 @@ export default function page() {
           resizeMode={ignoreSafeAreas ? "cover" : "contain"}
           onProgress={onProgress}
           onError={() => {}}
+          onLoad={() => {
+            if (firstTime.current === true) {
+              play();
+              firstTime.current = false;
+            }
+          }}
           playWhenInactive={true}
           allowsExternalPlayback={true}
           playInBackground={true}
diff --git a/app/_layout.tsx b/app/_layout.tsx
index 206aa7ab..30c525bb 100644
--- a/app/_layout.tsx
+++ b/app/_layout.tsx
@@ -319,66 +319,64 @@ function Layout() {
               <BottomSheetModalProvider>
                 <JellyfinProvider>
                   <PlaySettingsProvider>
-                    <PlaybackProvider>
-                      <StatusBar style="light" backgroundColor="#000" />
-                      <ThemeProvider value={DarkTheme}>
-                        <Stack initialRouteName="/home">
-                          <Stack.Screen
-                            name="(auth)/(tabs)"
-                            options={{
-                              headerShown: false,
-                              title: "",
-                            }}
-                          />
-                          <Stack.Screen
-                            name="(auth)/play"
-                            options={{
-                              headerShown: false,
-                              autoHideHomeIndicator: true,
-                              title: "",
-                              animation: "fade",
-                            }}
-                          />
-                          <Stack.Screen
-                            name="(auth)/play-video"
-                            options={{
-                              headerShown: false,
-                              autoHideHomeIndicator: true,
-                              title: "",
-                              animation: "fade",
-                            }}
-                          />
-                          <Stack.Screen
-                            name="(auth)/play-music"
-                            options={{
-                              headerShown: false,
-                              autoHideHomeIndicator: true,
-                              title: "",
-                              animation: "fade",
-                            }}
-                          />
-                          <Stack.Screen
-                            name="login"
-                            options={{ headerShown: false, title: "Login" }}
-                          />
-                          <Stack.Screen name="+not-found" />
-                        </Stack>
-                        <Toaster
-                          duration={4000}
-                          toastOptions={{
-                            style: {
-                              backgroundColor: "#262626",
-                              borderColor: "#363639",
-                              borderWidth: 1,
-                            },
-                            titleStyle: {
-                              color: "white",
-                            },
+                    <StatusBar style="light" backgroundColor="#000" />
+                    <ThemeProvider value={DarkTheme}>
+                      <Stack initialRouteName="/home">
+                        <Stack.Screen
+                          name="(auth)/(tabs)"
+                          options={{
+                            headerShown: false,
+                            title: "",
                           }}
-                          closeButton
                         />
-                      </ThemeProvider>
-                    </PlaybackProvider>
+                        <Stack.Screen
+                          name="(auth)/play"
+                          options={{
+                            headerShown: false,
+                            autoHideHomeIndicator: true,
+                            title: "",
+                            animation: "fade",
+                          }}
+                        />
+                        <Stack.Screen
+                          name="(auth)/play-video"
+                          options={{
+                            headerShown: false,
+                            autoHideHomeIndicator: true,
+                            title: "",
+                            animation: "fade",
+                          }}
+                        />
+                        <Stack.Screen
+                          name="(auth)/play-music"
+                          options={{
+                            headerShown: false,
+                            autoHideHomeIndicator: true,
+                            title: "",
+                            animation: "fade",
+                          }}
+                        />
+                        <Stack.Screen
+                          name="login"
+                          options={{ headerShown: false, title: "Login" }}
+                        />
+                        <Stack.Screen name="+not-found" />
+                      </Stack>
+                      <Toaster
+                        duration={4000}
+                        toastOptions={{
+                          style: {
+                            backgroundColor: "#262626",
+                            borderColor: "#363639",
+                            borderWidth: 1,
+                          },
+                          titleStyle: {
+                            color: "white",
+                          },
+                        }}
+                        closeButton
+                      />
+                    </ThemeProvider>
                   </PlaySettingsProvider>
                 </JellyfinProvider>
               </BottomSheetModalProvider>
diff --git a/components/ItemContent.tsx b/components/ItemContent.tsx
index fcdf5c23..51920364 100644
--- a/components/ItemContent.tsx
+++ b/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]);
diff --git a/components/PlayButton.tsx b/components/PlayButton.tsx
index c0a8e1ca..a91e8688 100644
--- a/components/PlayButton.tsx
+++ b/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) {
diff --git a/components/video-player/Controls.tsx b/components/video-player/Controls.tsx
index 91a5f160..6310f2f2 100644
--- a/components/video-player/Controls.tsx
+++ b/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
diff --git a/hooks/useWebsockets.ts b/hooks/useWebsockets.ts
new file mode 100644
index 00000000..d25714fc
--- /dev/null
+++ b/hooks/useWebsockets.ts
@@ -0,0 +1,112 @@
+import { useEffect, useState } from "react";
+import { Alert } from "react-native";
+import { Router, useRouter } from "expo-router";
+import { Api } from "@jellyfin/sdk";
+import { useAtomValue } from "jotai";
+import {
+  apiAtom,
+  getOrSetDeviceId,
+  userAtom,
+} from "@/providers/JellyfinProvider";
+import { useQuery } from "@tanstack/react-query";
+
+interface UseWebSocketProps {
+  isPlaying: boolean;
+  pauseVideo: () => void;
+  playVideo: () => void;
+  stopPlayback: () => void;
+}
+
+export const useWebSocket = ({
+  isPlaying,
+  pauseVideo,
+  playVideo,
+  stopPlayback,
+}: UseWebSocketProps) => {
+  const router = useRouter();
+  const user = useAtomValue(userAtom);
+  const api = useAtomValue(apiAtom);
+  const [ws, setWs] = useState<WebSocket | null>(null);
+  const [isConnected, setIsConnected] = useState(false);
+
+  const { data: deviceId } = useQuery({
+    queryKey: ["deviceId"],
+    queryFn: async () => {
+      return await getOrSetDeviceId();
+    },
+    staleTime: Infinity,
+  });
+
+  useEffect(() => {
+    if (!deviceId || !api?.accessToken) return;
+
+    const protocol = api?.basePath.includes("https") ? "wss" : "ws";
+
+    const url = `${protocol}://${api?.basePath
+      .replace("https://", "")
+      .replace("http://", "")}/socket?api_key=${
+      api?.accessToken
+    }&deviceId=${deviceId}`;
+
+    const newWebSocket = new WebSocket(url);
+
+    let keepAliveInterval: NodeJS.Timeout | null = null;
+
+    newWebSocket.onopen = () => {
+      setIsConnected(true);
+      keepAliveInterval = setInterval(() => {
+        if (newWebSocket.readyState === WebSocket.OPEN) {
+          newWebSocket.send(JSON.stringify({ MessageType: "KeepAlive" }));
+        }
+      }, 30000);
+    };
+
+    newWebSocket.onerror = (e) => {
+      console.error("WebSocket error:", e);
+      setIsConnected(false);
+    };
+
+    newWebSocket.onclose = (e) => {
+      if (keepAliveInterval) {
+        clearInterval(keepAliveInterval);
+      }
+    };
+
+    setWs(newWebSocket);
+
+    return () => {
+      if (keepAliveInterval) {
+        clearInterval(keepAliveInterval);
+      }
+      newWebSocket.close();
+    };
+  }, [api, deviceId, user]);
+
+  useEffect(() => {
+    if (!ws) return;
+
+    ws.onmessage = (e) => {
+      const json = JSON.parse(e.data);
+      const command = json?.Data?.Command;
+
+      console.log("[WS] ~ ", json);
+
+      if (command === "PlayPause") {
+        console.log("Command ~ PlayPause");
+        if (isPlaying) pauseVideo();
+        else playVideo();
+      } else if (command === "Stop") {
+        console.log("Command ~ Stop");
+        stopPlayback();
+        router.canGoBack() && router.back();
+      } else if (json?.Data?.Name === "DisplayMessage") {
+        console.log("Command ~ DisplayMessage");
+        const title = json?.Data?.Arguments?.Header;
+        const body = json?.Data?.Arguments?.Text;
+        Alert.alert(title, body);
+      }
+    };
+  }, [ws, stopPlayback, playVideo, pauseVideo, isPlaying, router]);
+
+  return { isConnected };
+};
diff --git a/providers/PlaySettingsProvider.tsx b/providers/PlaySettingsProvider.tsx
index 05769508..2c966762 100644
--- a/providers/PlaySettingsProvider.tsx
+++ b/providers/PlaySettingsProvider.tsx
@@ -18,6 +18,8 @@ import old from "@/utils/profiles/old";
 import { getStreamUrl } from "@/utils/jellyfin/media/getStreamUrl";
 import { reportPlaybackStopped } from "@/utils/jellyfin/playstate/reportPlaybackStopped";
 import { Bitrate } from "@/components/BitrateSelector";
+import ios from "@/utils/profiles/ios";
+import { getSessionApi } from "@jellyfin/sdk/lib/utils/api";
 
 export type PlaybackType = {
   item?: BaseItemDto | null;
@@ -30,7 +32,7 @@ export type PlaybackType = {
 type PlaySettingsContextType = {
   playSettings: PlaybackType | null;
   setPlaySettings: React.Dispatch<React.SetStateAction<PlaybackType | null>>;
-  playUrl: string | null;
+  playUrl?: string | null;
   reportStopPlayback: (ticks: number) => Promise<void>;
 };
 
@@ -65,14 +67,16 @@ export const PlaySettingsProvider: React.FC<{ children: React.ReactNode }> = ({
 
   useEffect(() => {
     const fetchPlayUrl = async () => {
-      console.log("something changed, fetching url", playSettings?.item?.Id);
-      if (!api || !user || !settings) {
+      if (!api || !user || !settings || !playSettings) {
+        console.log("fetchPlayUrl ~ missing params");
         setPlayUrl(null);
         return;
       }
 
+      console.log("fetchPlayUrl ~ fetching url", playSettings?.item?.Id);
+
       // Determine the device profile
-      let deviceProfile: any = iosFmp4;
+      let deviceProfile: any = ios;
       if (settings?.deviceProfile === "Native") deviceProfile = native;
       if (settings?.deviceProfile === "Old") deviceProfile = old;
 
@@ -100,6 +104,30 @@ export const PlaySettingsProvider: React.FC<{ children: React.ReactNode }> = ({
     fetchPlayUrl();
   }, [api, settings, user, playSettings]);
 
+  useEffect(() => {
+    let deviceProfile: any = ios;
+    if (settings?.deviceProfile === "Native") deviceProfile = native;
+    if (settings?.deviceProfile === "Old") deviceProfile = old;
+
+    const postCaps = async () => {
+      if (!api) return;
+      await getSessionApi(api).postFullCapabilities({
+        clientCapabilitiesDto: {
+          AppStoreUrl: "https://apps.apple.com/us/app/streamyfin/id6593660679",
+          DeviceProfile: deviceProfile,
+          IconUrl:
+            "https://github.com/fredrikburmester/streamyfin/blob/master/assets/images/adaptive_icon.png",
+          PlayableMediaTypes: ["Audio", "Video"],
+          SupportedCommands: ["Play"],
+          SupportsMediaControl: true,
+          SupportsPersistentIdentifier: true,
+        },
+      });
+    };
+
+    postCaps();
+  }, [settings]);
+
   return (
     <PlaySettingsContext.Provider
       value={{ playSettings, setPlaySettings, playUrl, reportStopPlayback }}
diff --git a/utils/jellyfin/media/getStreamUrl.ts b/utils/jellyfin/media/getStreamUrl.ts
index fa7413df..2b7d0cf6 100644
--- a/utils/jellyfin/media/getStreamUrl.ts
+++ b/utils/jellyfin/media/getStreamUrl.ts
@@ -35,6 +35,11 @@ export const getStreamUrl = async ({
   mediaSourceId?: string | null;
 }) => {
   if (!api || !userId || !item?.Id) {
+    console.log("getStreamUrl: missing params", {
+      api: api?.basePath,
+      userId,
+      item: item?.Id,
+    });
     return null;
   }
 
@@ -122,6 +127,12 @@ export const getStreamUrl = async ({
   }
 
   if (!url) {
+    console.log("getStreamUrl: no url found", {
+      api: api.basePath,
+      userId,
+      item: item.Id,
+      mediaSourceId,
+    });
     return null;
   }
 
diff --git a/utils/jellyfin/playstate/reportPlaybackProgress.ts b/utils/jellyfin/playstate/reportPlaybackProgress.ts
index d015482a..1342690a 100644
--- a/utils/jellyfin/playstate/reportPlaybackProgress.ts
+++ b/utils/jellyfin/playstate/reportPlaybackProgress.ts
@@ -2,6 +2,16 @@ import { Api } from "@jellyfin/sdk";
 import { getAuthHeaders } from "../jellyfin";
 import { postCapabilities } from "../session/capabilities";
 import { Settings } from "@/utils/atoms/settings";
+import {
+  getMediaInfoApi,
+  getPlaystateApi,
+  getSessionApi,
+} from "@jellyfin/sdk/lib/utils/api";
+import { DeviceProfile } from "@jellyfin/sdk/lib/generated-client";
+import { getOrSetDeviceId } from "@/providers/JellyfinProvider";
+import ios from "@/utils/profiles/ios";
+import native from "@/utils/profiles/native";
+import old from "@/utils/profiles/old";
 
 interface ReportPlaybackProgressParams {
   api?: Api | null;
@@ -33,31 +43,29 @@ export const reportPlaybackProgress = async ({
   console.info("reportPlaybackProgress ~ IsPaused", IsPaused);
 
   try {
-    await postCapabilities({
-      api,
+    await getPlaystateApi(api).onPlaybackProgress({
       itemId,
-      sessionId,
-      deviceProfile,
+      audioStreamIndex: 0,
+      subtitleStreamIndex: 0,
+      mediaSourceId: itemId,
+      positionTicks: Math.round(positionTicks),
+      isPaused: IsPaused,
+      isMuted: false,
+      playMethod: "Transcode",
     });
-  } catch (error) {
-    console.error("Failed to post capabilities.", error);
-    throw new Error("Failed to post capabilities.");
-  }
-
-  try {
-    await api.axiosInstance.post(
-      `${api.basePath}/Sessions/Playing/Progress`,
-      {
-        ItemId: itemId,
-        PlaySessionId: sessionId,
-        IsPaused,
-        PositionTicks: Math.round(positionTicks),
-        CanSeek: true,
-        MediaSourceId: itemId,
-        EventName: "timeupdate",
-      },
-      { headers: getAuthHeaders(api) }
-    );
+    // await api.axiosInstance.post(
+    //   `${api.basePath}/Sessions/Playing/Progress`,
+    //   {
+    //     ItemId: itemId,
+    //     PlaySessionId: sessionId,
+    //     IsPaused,
+    //     PositionTicks: Math.round(positionTicks),
+    //     CanSeek: true,
+    //     MediaSourceId: itemId,
+    //     EventName: "timeupdate",
+    //   },
+    //   { headers: getAuthHeaders(api) }
+    // );
   } catch (error) {
     console.error(error);
   }

From aa567494026159e706b371f5b143b4c25a60448c Mon Sep 17 00:00:00 2001
From: Fredrik Burmester <fredrik.burmester@gmail.com>
Date: Sun, 6 Oct 2024 22:48:31 +0200
Subject: [PATCH 06/10] wip

---
 app/(auth)/play-music.tsx            |   2 -
 app/(auth)/play-offline-video.tsx    | 246 +++++++++++
 app/(auth)/play-video.tsx            |  63 +--
 app/(auth)/play.tsx                  |  48 --
 app/_layout.tsx                      |  29 +-
 components/AudioTrackSelector.tsx    |  88 ++--
 components/BitrateSelector.tsx       |  36 +-
 components/FullScreenMusicPlayer.tsx | 544 -----------------------
 components/FullScreenVideoPlayer.tsx | 626 ---------------------------
 components/ItemContent.tsx           | 101 ++++-
 components/MediaSourceSelector.tsx   |  69 ++-
 components/SubtitleTrackSelector.tsx |  65 +--
 components/music/SongsListItem.tsx   |   7 +-
 components/video-player/Controls.tsx |  17 +-
 hooks/useAdjacentEpisodes.ts         |   1 -
 hooks/useDownloadedFileOpener.ts     |  70 ++-
 providers/PlaySettingsProvider.tsx   | 126 +++---
 providers/PlaybackProvider.tsx       | 393 -----------------
 18 files changed, 611 insertions(+), 1920 deletions(-)
 create mode 100644 app/(auth)/play-offline-video.tsx
 delete mode 100644 app/(auth)/play.tsx
 delete mode 100644 components/FullScreenMusicPlayer.tsx
 delete mode 100644 components/FullScreenVideoPlayer.tsx
 delete mode 100644 providers/PlaybackProvider.tsx

diff --git a/app/(auth)/play-music.tsx b/app/(auth)/play-music.tsx
index 879ffff5..d6c3266c 100644
--- a/app/(auth)/play-music.tsx
+++ b/app/(auth)/play-music.tsx
@@ -1,4 +1,3 @@
-import { FullScreenMusicPlayer } from "@/components/FullScreenMusicPlayer";
 import { StatusBar } from "expo-status-bar";
 import { View, ViewProps } from "react-native";
 
@@ -8,7 +7,6 @@ export default function page() {
   return (
     <View className="">
       <StatusBar hidden={false} />
-      <FullScreenMusicPlayer />
     </View>
   );
 }
diff --git a/app/(auth)/play-offline-video.tsx b/app/(auth)/play-offline-video.tsx
new file mode 100644
index 00000000..51625d10
--- /dev/null
+++ b/app/(auth)/play-offline-video.tsx
@@ -0,0 +1,246 @@
+import { Controls } from "@/components/video-player/Controls";
+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 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 { 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);
+
+  const screenDimensions = Dimensions.get("screen");
+
+  const [showControls, setShowControls] = useState(true);
+  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]);
+
+  const play = useCallback(() => {
+    setIsPlaying(true);
+    videoRef.current?.resume();
+  }, [videoRef]);
+
+  const stop = useCallback(() => {
+    setIsPlaying(false);
+    videoRef.current?.pause();
+  }, [videoRef]);
+
+  useEffect(() => {
+    play();
+    return () => {
+      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 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]
+  );
+
+  return (
+    <View
+      style={{
+        width: screenDimensions.width,
+        height: screenDimensions.height,
+        position: "relative",
+      }}
+      className="flex flex-col items-center justify-center"
+    >
+      <StatusBar hidden />
+      <Pressable
+        onPress={() => {
+          setShowControls(!showControls);
+        }}
+        className="absolute z-0 h-full w-full"
+      >
+        <Video
+          ref={videoRef}
+          source={videoSource}
+          paused={!isPlaying}
+          style={{ width: "100%", height: "100%" }}
+          resizeMode={ignoreSafeAreas ? "cover" : "contain"}
+          onProgress={onProgress}
+          onError={() => {}}
+          onLoad={() => {
+            if (firstTime.current === true) {
+              play();
+              firstTime.current = false;
+            }
+          }}
+          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}
+      />
+    </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,
+  playUrl?: string | null
+) {
+  const videoSource = useMemo(() => {
+    if (!playSettings || !api || !playUrl) {
+      return null;
+    }
+
+    const startPosition = 0;
+
+    return {
+      uri: playUrl,
+      isNetwork: false,
+      startPosition,
+      metadata: {
+        artist: playSettings.item?.AlbumArtist ?? undefined,
+        title: playSettings.item?.Name || "Unknown",
+        description: playSettings.item?.Overview ?? undefined,
+        subtitle: playSettings.item?.Album ?? undefined,
+      },
+    };
+  }, [playSettings, api]);
+
+  return videoSource;
+}
diff --git a/app/(auth)/play-video.tsx b/app/(auth)/play-video.tsx
index d6bb866c..348e1451 100644
--- a/app/(auth)/play-video.tsx
+++ b/app/(auth)/play-video.tsx
@@ -34,6 +34,7 @@ export default function page() {
   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");
 
@@ -131,25 +132,6 @@ export default function page() {
     });
   };
 
-  const firstTime = useRef(true);
-  useEffect(() => {
-    play();
-
-    if (Platform.OS === "android") {
-      NavigationBar.setVisibilityAsync("hidden");
-      NavigationBar.setBehaviorAsync("overlay-swipe");
-    }
-
-    return () => {
-      stop();
-
-      if (Platform.OS === "android") {
-        NavigationBar.setVisibilityAsync("visible");
-        NavigationBar.setBehaviorAsync("inset-swipe");
-      }
-    };
-  }, []);
-
   const onProgress = useCallback(
     async (data: OnProgressData) => {
       if (isSeeking.value === true) return;
@@ -179,6 +161,13 @@ export default function page() {
     [playSettings?.item.Id, isPlaying, api]
   );
 
+  useEffect(() => {
+    play();
+    return () => {
+      stop();
+    };
+  }, []);
+
   useEffect(() => {
     const orientationSubscription =
       ScreenOrientation.addOrientationChangeListener((event) => {
@@ -196,14 +185,35 @@ export default function page() {
     };
   }, []);
 
-  const isLandscape = useMemo(() => {
-    return orientation === ScreenOrientation.OrientationLock.LANDSCAPE_LEFT ||
-      orientation === ScreenOrientation.OrientationLock.LANDSCAPE_RIGHT
-      ? true
-      : false;
-  }, [orientation]);
+  useEffect(() => {
+    if (settings?.autoRotate) {
+      // Don't need to do anything
+    } else if (settings?.defaultVideoOrientation) {
+      ScreenOrientation.lockAsync(settings.defaultVideoOrientation);
+    }
 
-  const { isConnected } = useWebSocket({
+    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]);
+
+  useWebSocket({
     isPlaying: isPlaying,
     pauseVideo: pause,
     playVideo: play,
@@ -262,7 +272,6 @@ export default function page() {
         isBuffering={isBuffering}
         showControls={showControls}
         setShowControls={setShowControls}
-        isLandscape={isLandscape}
         setIgnoreSafeAreas={setIgnoreSafeAreas}
         ignoreSafeAreas={ignoreSafeAreas}
       />
diff --git a/app/(auth)/play.tsx b/app/(auth)/play.tsx
deleted file mode 100644
index 5ca25b2b..00000000
--- a/app/(auth)/play.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import { FullScreenVideoPlayer } from "@/components/FullScreenVideoPlayer";
-import { useSettings } from "@/utils/atoms/settings";
-import * as NavigationBar from "expo-navigation-bar";
-import * as ScreenOrientation from "expo-screen-orientation";
-import { StatusBar } from "expo-status-bar";
-import { useEffect } from "react";
-import { Platform, View, ViewProps } from "react-native";
-
-interface Props extends ViewProps {}
-
-export default function page() {
-  const [settings] = useSettings();
-
-  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]);
-
-  return (
-    <View className="">
-      <StatusBar hidden />
-      <FullScreenVideoPlayer />
-    </View>
-  );
-}
diff --git a/app/_layout.tsx b/app/_layout.tsx
index 30c525bb..9b18a08f 100644
--- a/app/_layout.tsx
+++ b/app/_layout.tsx
@@ -5,7 +5,6 @@ import {
   JellyfinProvider,
 } from "@/providers/JellyfinProvider";
 import { JobQueueProvider } from "@/providers/JobQueueProvider";
-import { PlaybackProvider } from "@/providers/PlaybackProvider";
 import { PlaySettingsProvider } from "@/providers/PlaySettingsProvider";
 import { orientationAtom } from "@/utils/atoms/orientation";
 import { Settings, useSettings } from "@/utils/atoms/settings";
@@ -313,12 +312,12 @@ function Layout() {
   return (
     <GestureHandlerRootView style={{ flex: 1 }}>
       <QueryClientProvider client={queryClientRef.current}>
-        <JobQueueProvider>
-          <DownloadProvider>
-            <ActionSheetProvider>
-              <BottomSheetModalProvider>
-                <JellyfinProvider>
-                  <PlaySettingsProvider>
+        <ActionSheetProvider>
+          <JobQueueProvider>
+            <JellyfinProvider>
+              <PlaySettingsProvider>
+                <DownloadProvider>
+                  <BottomSheetModalProvider>
                     <StatusBar style="light" backgroundColor="#000" />
                     <ThemeProvider value={DarkTheme}>
                       <Stack initialRouteName="/home">
@@ -330,7 +329,7 @@ function Layout() {
                           }}
                         />
                         <Stack.Screen
-                          name="(auth)/play"
+                          name="(auth)/play-video"
                           options={{
                             headerShown: false,
                             autoHideHomeIndicator: true,
@@ -339,7 +338,7 @@ function Layout() {
                           }}
                         />
                         <Stack.Screen
-                          name="(auth)/play-video"
+                          name="(auth)/play-offline-video"
                           options={{
                             headerShown: false,
                             autoHideHomeIndicator: true,
@@ -377,12 +376,12 @@ function Layout() {
                         closeButton
                       />
                     </ThemeProvider>
-                  </PlaySettingsProvider>
-                </JellyfinProvider>
-              </BottomSheetModalProvider>
-            </ActionSheetProvider>
-          </DownloadProvider>
-        </JobQueueProvider>
+                  </BottomSheetModalProvider>
+                </DownloadProvider>
+              </PlaySettingsProvider>
+            </JellyfinProvider>
+          </JobQueueProvider>
+        </ActionSheetProvider>
       </QueryClientProvider>
     </GestureHandlerRootView>
   );
diff --git a/components/AudioTrackSelector.tsx b/components/AudioTrackSelector.tsx
index bde7e8cb..f028fff7 100644
--- a/components/AudioTrackSelector.tsx
+++ b/components/AudioTrackSelector.tsx
@@ -1,60 +1,57 @@
-import { useSettings } from "@/utils/atoms/settings";
-import { useAtom } from "jotai";
-import { useEffect, useMemo } from "react";
-import { TouchableOpacity, View, ViewProps } from "react-native";
+import { TouchableOpacity, View } from "react-native";
 import * as DropdownMenu from "zeego/dropdown-menu";
 import { Text } from "./common/Text";
-import { usePlaySettings } from "@/providers/PlaySettingsProvider";
+import { atom, useAtom } from "jotai";
+import {
+  BaseItemDto,
+  MediaSourceInfo,
+} from "@jellyfin/sdk/lib/generated-client/models";
+import { useEffect, useMemo } from "react";
+import { MediaStream } from "@jellyfin/sdk/lib/generated-client/models";
+import { tc } from "@/utils/textTools";
+import { useSettings } from "@/utils/atoms/settings";
 
-interface Props extends ViewProps {}
+interface Props extends React.ComponentProps<typeof View> {
+  source: MediaSourceInfo;
+  onChange: (value: number) => void;
+  selected?: number | null;
+}
 
-export const AudioTrackSelector: React.FC<Props> = ({ ...props }) => {
-  const { playSettings, setPlaySettings, playUrl } = usePlaySettings();
+export const AudioTrackSelector: React.FC<Props> = ({
+  source,
+  onChange,
+  selected,
+  ...props
+}) => {
   const [settings] = useSettings();
 
-  const selectedIndex = useMemo(() => {
-    return playSettings?.audioIndex;
-  }, [playSettings?.audioIndex]);
-
   const audioStreams = useMemo(
-    () =>
-      playSettings?.mediaSource?.MediaStreams?.filter(
-        (x) => x.Type === "Audio"
-      ),
-    [playSettings?.mediaSource]
+    () => source.MediaStreams?.filter((x) => x.Type === "Audio"),
+    [source]
   );
 
-  const selectedAudioStream = useMemo(
-    () => audioStreams?.find((x) => x.Index === selectedIndex),
-    [audioStreams, selectedIndex]
+  const selectedAudioSteam = useMemo(
+    () => audioStreams?.find((x) => x.Index === selected),
+    [audioStreams, selected]
   );
 
-  // Set default audio stream only if none is selected and we have audio streams
   useEffect(() => {
-    if (playSettings?.audioIndex !== undefined || !audioStreams?.length) return;
-
-    const defaultAudioIndex = audioStreams.find(
+    if (selected) return;
+    const defaultAudioIndex = audioStreams?.find(
       (x) => x.Language === settings?.defaultAudioLanguage
     )?.Index;
-
-    if (defaultAudioIndex !== undefined) {
-      setPlaySettings((prev) => ({
-        ...prev,
-        audioIndex: defaultAudioIndex,
-      }));
-    } else {
-      const index = playSettings?.mediaSource?.DefaultAudioStreamIndex ?? 0;
-      setPlaySettings((prev) => ({
-        ...prev,
-        audioIndex: index,
-      }));
+    if (defaultAudioIndex !== undefined && defaultAudioIndex !== null) {
+      onChange(defaultAudioIndex);
+      return;
     }
-  }, [
-    audioStreams,
-    settings?.defaultAudioLanguage,
-    playSettings?.mediaSource,
-    setPlaySettings,
-  ]);
+    const index = source.DefaultAudioStreamIndex;
+    if (index !== undefined && index !== null) {
+      onChange(index);
+      return;
+    }
+
+    onChange(0);
+  }, [audioStreams, settings, source]);
 
   return (
     <View
@@ -69,7 +66,7 @@ export const AudioTrackSelector: React.FC<Props> = ({ ...props }) => {
             <Text className="opacity-50 mb-1 text-xs">Audio</Text>
             <TouchableOpacity className="bg-neutral-900  h-10 rounded-xl border-neutral-800 border px-3 py-2 flex flex-row items-center justify-between">
               <Text className="" numberOfLines={1}>
-                {selectedAudioStream?.DisplayTitle}
+                {selectedAudioSteam?.DisplayTitle}
               </Text>
             </TouchableOpacity>
           </View>
@@ -89,10 +86,7 @@ export const AudioTrackSelector: React.FC<Props> = ({ ...props }) => {
               key={idx.toString()}
               onSelect={() => {
                 if (audio.Index !== null && audio.Index !== undefined)
-                  setPlaySettings((prev) => ({
-                    ...prev,
-                    audioIndex: audio.Index,
-                  }));
+                  onChange(audio.Index);
               }}
             >
               <DropdownMenu.ItemTitle>
diff --git a/components/BitrateSelector.tsx b/components/BitrateSelector.tsx
index 28674c48..5e504cd0 100644
--- a/components/BitrateSelector.tsx
+++ b/components/BitrateSelector.tsx
@@ -1,8 +1,7 @@
 import { TouchableOpacity, View } from "react-native";
 import * as DropdownMenu from "zeego/dropdown-menu";
 import { Text } from "./common/Text";
-import { useEffect, useMemo } from "react";
-import { usePlaySettings } from "@/providers/PlaySettingsProvider";
+import { useMemo } from "react";
 
 export type Bitrate = {
   key: string;
@@ -10,7 +9,7 @@ export type Bitrate = {
   height?: number;
 };
 
-export const BITRATES: Bitrate[] = [
+const BITRATES: Bitrate[] = [
   {
     key: "Max",
     value: undefined,
@@ -43,11 +42,17 @@ export const BITRATES: Bitrate[] = [
 ];
 
 interface Props extends React.ComponentProps<typeof View> {
-  inverted?: boolean;
+  onChange: (value: Bitrate) => void;
+  selected?: Bitrate | null;
+  inverted?: boolean | null;
 }
 
-export const BitrateSelector: React.FC<Props> = ({ inverted, ...props }) => {
-  const { setPlaySettings, playSettings } = usePlaySettings();
+export const BitrateSelector: React.FC<Props> = ({
+  onChange,
+  selected,
+  inverted,
+  ...props
+}) => {
   const sorted = useMemo(() => {
     if (inverted)
       return BITRATES.sort(
@@ -58,18 +63,6 @@ export const BitrateSelector: React.FC<Props> = ({ inverted, ...props }) => {
     );
   }, []);
 
-  const selected = useMemo(() => {
-    return sorted.find((b) => b.value === playSettings?.bitrate?.value);
-  }, [playSettings?.bitrate]);
-
-  // Set default bitrate on load
-  useEffect(() => {
-    setPlaySettings((prev) => ({
-      ...prev,
-      bitrate: BITRATES[0],
-    }));
-  }, []);
-
   return (
     <View
       className="flex shrink"
@@ -84,7 +77,7 @@ export const BitrateSelector: React.FC<Props> = ({ inverted, ...props }) => {
             <Text className="opacity-50 mb-1 text-xs">Quality</Text>
             <TouchableOpacity className="bg-neutral-900 h-10 rounded-xl border-neutral-800 border px-3 py-2 flex flex-row items-center justify-between">
               <Text style={{}} className="" numberOfLines={1}>
-                {selected?.key}
+                {BITRATES.find((b) => b.value === selected?.value)?.key}
               </Text>
             </TouchableOpacity>
           </View>
@@ -103,10 +96,7 @@ export const BitrateSelector: React.FC<Props> = ({ inverted, ...props }) => {
             <DropdownMenu.Item
               key={b.key}
               onSelect={() => {
-                setPlaySettings((prev) => ({
-                  ...prev,
-                  bitrate: b,
-                }));
+                onChange(b);
               }}
             >
               <DropdownMenu.ItemTitle>{b.key}</DropdownMenu.ItemTitle>
diff --git a/components/FullScreenMusicPlayer.tsx b/components/FullScreenMusicPlayer.tsx
deleted file mode 100644
index 94c6b57a..00000000
--- a/components/FullScreenMusicPlayer.tsx
+++ /dev/null
@@ -1,544 +0,0 @@
-import { useAdjacentEpisodes } from "@/hooks/useAdjacentEpisodes";
-import { useCreditSkipper } from "@/hooks/useCreditSkipper";
-import { useIntroSkipper } from "@/hooks/useIntroSkipper";
-import { useTrickplay } from "@/hooks/useTrickplay";
-import { apiAtom } from "@/providers/JellyfinProvider";
-import { usePlayback } from "@/providers/PlaybackProvider";
-import { useSettings } from "@/utils/atoms/settings";
-import { getBackdropUrl } from "@/utils/jellyfin/image/getBackdropUrl";
-import { getAuthHeaders } from "@/utils/jellyfin/jellyfin";
-import { writeToLog } from "@/utils/log";
-import orientationToOrientationLock from "@/utils/OrientationLockConverter";
-import { secondsToTicks } from "@/utils/secondsToTicks";
-import { formatTimeString, ticksToSeconds } from "@/utils/time";
-import { Ionicons } from "@expo/vector-icons";
-import { Image } from "expo-image";
-import { useRouter, useSegments } from "expo-router";
-import * as ScreenOrientation from "expo-screen-orientation";
-import { useAtom } from "jotai";
-import React, { useCallback, useEffect, useMemo, useState } from "react";
-import {
-  Alert,
-  BackHandler,
-  Dimensions,
-  Pressable,
-  TouchableOpacity,
-  View,
-} from "react-native";
-import { Slider } from "react-native-awesome-slider";
-import {
-  runOnJS,
-  useAnimatedReaction,
-  useSharedValue,
-} from "react-native-reanimated";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-import Video, { OnProgressData } from "react-native-video";
-import { Text } from "./common/Text";
-import { itemRouter } from "./common/TouchableItemRouter";
-import { Loader } from "./Loader";
-
-const windowDimensions = Dimensions.get("window");
-const screenDimensions = Dimensions.get("screen");
-
-export const FullScreenMusicPlayer: React.FC = () => {
-  const {
-    currentlyPlaying,
-    pauseVideo,
-    playVideo,
-    stopPlayback,
-    setIsPlaying,
-    isPlaying,
-    videoRef,
-    onProgress,
-    setIsBuffering,
-  } = usePlayback();
-
-  const [settings] = useSettings();
-  const [api] = useAtom(apiAtom);
-  const router = useRouter();
-  const segments = useSegments();
-  const insets = useSafeAreaInsets();
-
-  const { previousItem, nextItem } = useAdjacentEpisodes({ currentlyPlaying });
-
-  const [showControls, setShowControls] = useState(true);
-  const [isBuffering, setIsBufferingState] = useState(true);
-
-  // Seconds
-  const [currentTime, setCurrentTime] = useState(0);
-  const [remainingTime, setRemainingTime] = useState(0);
-
-  const isSeeking = useSharedValue(false);
-
-  const cacheProgress = useSharedValue(0);
-  const progress = useSharedValue(0);
-  const min = useSharedValue(0);
-  const max = useSharedValue(currentlyPlaying?.item.RunTimeTicks || 0);
-
-  const [dimensions, setDimensions] = useState({
-    window: windowDimensions,
-    screen: screenDimensions,
-  });
-
-  useEffect(() => {
-    const subscription = Dimensions.addEventListener(
-      "change",
-      ({ window, screen }) => {
-        setDimensions({ window, screen });
-      }
-    );
-    return () => subscription?.remove();
-  });
-
-  const from = useMemo(() => segments[2], [segments]);
-
-  const updateTimes = useCallback(
-    (currentProgress: number, maxValue: number) => {
-      const current = ticksToSeconds(currentProgress);
-      const remaining = ticksToSeconds(maxValue - current);
-
-      setCurrentTime(current);
-      setRemainingTime(remaining);
-    },
-    []
-  );
-
-  const { showSkipButton, skipIntro } = useIntroSkipper(
-    currentlyPlaying?.item.Id,
-    currentTime,
-    videoRef
-  );
-
-  const { showSkipCreditButton, skipCredit } = useCreditSkipper(
-    currentlyPlaying?.item.Id,
-    currentTime,
-    videoRef
-  );
-
-  useAnimatedReaction(
-    () => ({
-      progress: progress.value,
-      max: max.value,
-      isSeeking: isSeeking.value,
-    }),
-    (result) => {
-      if (result.isSeeking === false) {
-        runOnJS(updateTimes)(result.progress, result.max);
-      }
-    },
-    [updateTimes]
-  );
-
-  useEffect(() => {
-    const backAction = () => {
-      if (currentlyPlaying) {
-        Alert.alert("Hold on!", "Are you sure you want to exit?", [
-          {
-            text: "Cancel",
-            onPress: () => null,
-            style: "cancel",
-          },
-          {
-            text: "Yes",
-            onPress: () => {
-              stopPlayback();
-              router.back();
-            },
-          },
-        ]);
-        return true;
-      }
-      return false;
-    };
-
-    const backHandler = BackHandler.addEventListener(
-      "hardwareBackPress",
-      backAction
-    );
-
-    return () => backHandler.remove();
-  }, [currentlyPlaying, stopPlayback, router]);
-
-  const poster = useMemo(() => {
-    if (!currentlyPlaying?.item || !api) return "";
-    return currentlyPlaying.item.Type === "Audio"
-      ? `${api.basePath}/Items/${currentlyPlaying.item.AlbumId}/Images/Primary?tag=${currentlyPlaying.item.AlbumPrimaryImageTag}&quality=90&maxHeight=200&maxWidth=200`
-      : getBackdropUrl({
-          api,
-          item: currentlyPlaying.item,
-          quality: 70,
-          width: 200,
-        });
-  }, [currentlyPlaying?.item, api]);
-
-  const videoSource = useMemo(() => {
-    if (!api || !currentlyPlaying || !poster) return null;
-    const startPosition = currentlyPlaying.item?.UserData?.PlaybackPositionTicks
-      ? Math.round(currentlyPlaying.item.UserData.PlaybackPositionTicks / 10000)
-      : 0;
-    return {
-      uri: currentlyPlaying.url,
-      isNetwork: true,
-      startPosition,
-      headers: getAuthHeaders(api),
-      metadata: {
-        artist: currentlyPlaying.item?.AlbumArtist ?? undefined,
-        title: currentlyPlaying.item?.Name || "Unknown",
-        description: currentlyPlaying.item?.Overview ?? undefined,
-        imageUri: poster,
-        subtitle: currentlyPlaying.item?.Album ?? undefined,
-      },
-    };
-  }, [currentlyPlaying, api, poster]);
-
-  useEffect(() => {
-    if (currentlyPlaying) {
-      progress.value =
-        currentlyPlaying.item?.UserData?.PlaybackPositionTicks || 0;
-      max.value = currentlyPlaying.item.RunTimeTicks || 0;
-      setShowControls(true);
-      playVideo();
-    }
-  }, [currentlyPlaying]);
-
-  const toggleControls = () => setShowControls(!showControls);
-
-  const handleVideoProgress = useCallback(
-    (data: OnProgressData) => {
-      if (isSeeking.value === true) return;
-      progress.value = secondsToTicks(data.currentTime);
-      cacheProgress.value = secondsToTicks(data.playableDuration);
-      setIsBufferingState(data.playableDuration === 0);
-      setIsBuffering(data.playableDuration === 0);
-      onProgress(data);
-    },
-    [onProgress, setIsBuffering, isSeeking]
-  );
-
-  const handleVideoError = useCallback(
-    (e: any) => {
-      console.log(e);
-      writeToLog("ERROR", "Video playback error: " + JSON.stringify(e));
-      Alert.alert("Error", "Cannot play this video file.");
-      setIsPlaying(false);
-    },
-    [setIsPlaying]
-  );
-
-  const handlePlayPause = useCallback(() => {
-    if (isPlaying) pauseVideo();
-    else playVideo();
-  }, [isPlaying, pauseVideo, playVideo]);
-
-  const handleSliderComplete = (value: number) => {
-    progress.value = value;
-    isSeeking.value = false;
-    videoRef.current?.seek(value / 10000000);
-  };
-
-  const handleSliderChange = (value: number) => {};
-
-  const handleSliderStart = useCallback(() => {
-    if (showControls === false) return;
-    isSeeking.value = true;
-  }, []);
-
-  const handleSkipBackward = useCallback(async () => {
-    if (!settings) return;
-    try {
-      const curr = await videoRef.current?.getCurrentPosition();
-      if (curr !== undefined) {
-        videoRef.current?.seek(Math.max(0, curr - settings.rewindSkipTime));
-      }
-    } catch (error) {
-      writeToLog("ERROR", "Error seeking video backwards", error);
-    }
-  }, [settings]);
-
-  const handleSkipForward = useCallback(async () => {
-    if (!settings) return;
-    try {
-      const curr = await videoRef.current?.getCurrentPosition();
-      if (curr !== undefined) {
-        videoRef.current?.seek(Math.max(0, curr + settings.forwardSkipTime));
-      }
-    } catch (error) {
-      writeToLog("ERROR", "Error seeking video forwards", error);
-    }
-  }, [settings]);
-
-  const handleGoToPreviousItem = useCallback(() => {
-    if (!previousItem || !from) return;
-    const url = itemRouter(previousItem, from);
-    stopPlayback();
-    // @ts-ignore
-    router.push(url);
-  }, [previousItem, from, stopPlayback, router]);
-
-  const handleGoToNextItem = useCallback(() => {
-    if (!nextItem || !from) return;
-    const url = itemRouter(nextItem, from);
-    stopPlayback();
-    // @ts-ignore
-    router.push(url);
-  }, [nextItem, from, stopPlayback, router]);
-
-  if (!currentlyPlaying) return null;
-
-  return (
-    <View
-      style={{
-        width: dimensions.window.width,
-        height: dimensions.window.height,
-        backgroundColor: "black",
-      }}
-    >
-      <Pressable
-        onPress={toggleControls}
-        style={[
-          {
-            position: "absolute",
-            top: 0,
-            bottom: 0,
-            left: insets.left,
-            right: insets.right,
-            width: dimensions.window.width - (insets.left + insets.right),
-          },
-        ]}
-      >
-        {videoSource && (
-          <>
-            <Video
-              ref={videoRef}
-              source={videoSource}
-              style={{ width: "100%", height: "100%" }}
-              resizeMode={"contain"}
-              onProgress={handleVideoProgress}
-              onLoad={(data) => (max.value = secondsToTicks(data.duration))}
-              onError={handleVideoError}
-              playWhenInactive={true}
-              allowsExternalPlayback={true}
-              playInBackground={true}
-              pictureInPicture={true}
-              showNotificationControls={true}
-              ignoreSilentSwitch="ignore"
-              fullscreen={false}
-            />
-          </>
-        )}
-      </Pressable>
-
-      <View pointerEvents="none" className="p-4">
-        <Image
-          source={poster ? { uri: poster } : undefined}
-          style={{
-            width: "100%",
-            height: "100%",
-            resizeMode: "contain",
-          }}
-        />
-      </View>
-
-      {(showControls || isBuffering) && (
-        <View
-          pointerEvents="none"
-          style={[
-            {
-              top: 0,
-              left: 0,
-              position: "absolute",
-              width: dimensions.window.width,
-              height: dimensions.window.height,
-            },
-          ]}
-          className="  bg-black/50 z-0"
-        ></View>
-      )}
-
-      {isBuffering && (
-        <View
-          pointerEvents="none"
-          className="fixed top-0 left-0 w-screen h-screen flex flex-col items-center justify-center"
-        >
-          <Loader />
-        </View>
-      )}
-
-      {showSkipButton && (
-        <View
-          style={[
-            {
-              position: "absolute",
-              bottom: insets.bottom + 70,
-              right: insets.right + 16,
-              height: 70,
-            },
-          ]}
-          className="z-10"
-        >
-          <TouchableOpacity
-            onPress={skipIntro}
-            className="bg-purple-600 rounded-full px-2.5 py-2 font-semibold"
-          >
-            <Text className="text-white">Skip Intro</Text>
-          </TouchableOpacity>
-        </View>
-      )}
-
-      {showSkipCreditButton && (
-        <View
-          style={[
-            {
-              position: "absolute",
-              bottom: insets.bottom + 70,
-              right: insets.right + 16,
-              height: 70,
-            },
-          ]}
-          className="z-10"
-        >
-          <TouchableOpacity
-            onPress={skipCredit}
-            className="bg-purple-600 rounded-full px-2.5 py-2 font-semibold"
-          >
-            <Text className="text-white">Skip Credits</Text>
-          </TouchableOpacity>
-        </View>
-      )}
-
-      {showControls && (
-        <>
-          <View
-            style={[
-              {
-                position: "absolute",
-                top: insets.top,
-                right: insets.right + 16,
-                height: 70,
-                zIndex: 10,
-              },
-            ]}
-            className="flex flex-row items-center space-x-2 z-10"
-          >
-            <TouchableOpacity
-              onPress={() => {
-                stopPlayback();
-                router.back();
-              }}
-              className="aspect-square flex flex-col bg-neutral-800 rounded-xl items-center justify-center p-2"
-            >
-              <Ionicons name="close" size={24} color="white" />
-            </TouchableOpacity>
-          </View>
-
-          <View
-            style={[
-              {
-                position: "absolute",
-                bottom: insets.bottom + 8,
-                left: insets.left + 16,
-                width:
-                  dimensions.window.width - insets.left - insets.right - 32,
-              },
-            ]}
-          >
-            <View className="shrink flex flex-col justify-center h-full mb-2">
-              <Text className="font-bold">{currentlyPlaying.item?.Name}</Text>
-              {currentlyPlaying.item?.Type === "Episode" && (
-                <Text className="opacity-50">
-                  {currentlyPlaying.item.SeriesName}
-                </Text>
-              )}
-              {currentlyPlaying.item?.Type === "Movie" && (
-                <Text className="text-xs opacity-50">
-                  {currentlyPlaying.item?.ProductionYear}
-                </Text>
-              )}
-              {currentlyPlaying.item?.Type === "Audio" && (
-                <Text className="text-xs opacity-50">
-                  {currentlyPlaying.item?.Album}
-                </Text>
-              )}
-            </View>
-            <View
-              className={`flex ${"flex-col-reverse py-4 px-4 rounded-2xl"} 
-          items-center  bg-neutral-800`}
-            >
-              <View className="flex flex-row items-center space-x-4">
-                <TouchableOpacity
-                  style={{
-                    opacity: !previousItem ? 0.5 : 1,
-                  }}
-                  onPress={handleGoToPreviousItem}
-                >
-                  <Ionicons name="play-skip-back" size={24} color="white" />
-                </TouchableOpacity>
-                <TouchableOpacity onPress={handleSkipBackward}>
-                  <Ionicons
-                    name="refresh-outline"
-                    size={26}
-                    color="white"
-                    style={{
-                      transform: [{ scaleY: -1 }, { rotate: "180deg" }],
-                    }}
-                  />
-                </TouchableOpacity>
-                <TouchableOpacity onPress={handlePlayPause}>
-                  <Ionicons
-                    name={isPlaying ? "pause" : "play"}
-                    size={30}
-                    color="white"
-                  />
-                </TouchableOpacity>
-                <TouchableOpacity onPress={handleSkipForward}>
-                  <Ionicons name="refresh-outline" size={26} color="white" />
-                </TouchableOpacity>
-                <TouchableOpacity
-                  style={{
-                    opacity: !nextItem ? 0.5 : 1,
-                  }}
-                  onPress={handleGoToNextItem}
-                >
-                  <Ionicons name="play-skip-forward" size={24} color="white" />
-                </TouchableOpacity>
-              </View>
-              <View
-                className={`flex flex-col w-full shrink
-              ${""}
-            `}
-              >
-                <Slider
-                  theme={{
-                    maximumTrackTintColor: "rgba(255,255,255,0.2)",
-                    minimumTrackTintColor: "#fff",
-                    cacheTrackTintColor: "rgba(255,255,255,0.3)",
-                  }}
-                  cache={cacheProgress}
-                  onSlidingStart={handleSliderStart}
-                  onSlidingComplete={handleSliderComplete}
-                  onValueChange={handleSliderChange}
-                  containerStyle={{
-                    borderRadius: 100,
-                  }}
-                  sliderHeight={10}
-                  progress={progress}
-                  thumbWidth={0}
-                  minimumValue={min}
-                  maximumValue={max}
-                />
-                <View className="flex flex-row items-center justify-between mt-0.5">
-                  <Text className="text-[12px] text-neutral-400">
-                    {formatTimeString(currentTime)}
-                  </Text>
-                  <Text className="text-[12px] text-neutral-400">
-                    -{formatTimeString(remainingTime)}
-                  </Text>
-                </View>
-              </View>
-            </View>
-          </View>
-        </>
-      )}
-    </View>
-  );
-};
diff --git a/components/FullScreenVideoPlayer.tsx b/components/FullScreenVideoPlayer.tsx
deleted file mode 100644
index 9453c2b3..00000000
--- a/components/FullScreenVideoPlayer.tsx
+++ /dev/null
@@ -1,626 +0,0 @@
-import { useAdjacentEpisodes } from "@/hooks/useAdjacentEpisodes";
-import { useCreditSkipper } from "@/hooks/useCreditSkipper";
-import { useIntroSkipper } from "@/hooks/useIntroSkipper";
-import { useTrickplay } from "@/hooks/useTrickplay";
-import { apiAtom } from "@/providers/JellyfinProvider";
-import { usePlayback } from "@/providers/PlaybackProvider";
-import { useSettings } from "@/utils/atoms/settings";
-import { getBackdropUrl } from "@/utils/jellyfin/image/getBackdropUrl";
-import { getAuthHeaders } from "@/utils/jellyfin/jellyfin";
-import { writeToLog } from "@/utils/log";
-import orientationToOrientationLock from "@/utils/OrientationLockConverter";
-import { secondsToTicks } from "@/utils/secondsToTicks";
-import { formatTimeString, ticksToSeconds } from "@/utils/time";
-import { Ionicons } from "@expo/vector-icons";
-import { Image } from "expo-image";
-import { useRouter, useSegments } from "expo-router";
-import * as ScreenOrientation from "expo-screen-orientation";
-import { useAtom } from "jotai";
-import React, { useCallback, useEffect, useMemo, useState } from "react";
-import {
-  Alert,
-  BackHandler,
-  Dimensions,
-  Pressable,
-  TouchableOpacity,
-  View,
-} from "react-native";
-import { Slider } from "react-native-awesome-slider";
-import {
-  runOnJS,
-  useAnimatedReaction,
-  useSharedValue,
-} from "react-native-reanimated";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-import Video, { OnProgressData, ReactVideoProps } from "react-native-video";
-import { Text } from "./common/Text";
-import { itemRouter } from "./common/TouchableItemRouter";
-import { Loader } from "./Loader";
-
-const windowDimensions = Dimensions.get("window");
-const screenDimensions = Dimensions.get("screen");
-
-export const FullScreenVideoPlayer: React.FC = () => {
-  const {
-    currentlyPlaying,
-    pauseVideo,
-    playVideo,
-    stopPlayback,
-    setIsPlaying,
-    isPlaying,
-    videoRef,
-    onProgress,
-    setIsBuffering,
-  } = usePlayback();
-
-  const [settings] = useSettings();
-  const [api] = useAtom(apiAtom);
-  const router = useRouter();
-  const segments = useSegments();
-  const insets = useSafeAreaInsets();
-
-  const { previousItem, nextItem } = useAdjacentEpisodes({ currentlyPlaying });
-  const { trickPlayUrl, calculateTrickplayUrl, trickplayInfo } =
-    useTrickplay(currentlyPlaying);
-
-  const [showControls, setShowControls] = useState(true);
-  const [isBuffering, setIsBufferingState] = useState(true);
-  const [ignoreSafeArea, setIgnoreSafeArea] = useState(false);
-  const [orientation, setOrientation] = useState(
-    ScreenOrientation.OrientationLock.UNKNOWN
-  );
-
-  // Seconds
-  const [currentTime, setCurrentTime] = useState(0);
-  const [remainingTime, setRemainingTime] = useState(0);
-
-  const isSeeking = useSharedValue(false);
-
-  const cacheProgress = useSharedValue(0);
-  const progress = useSharedValue(0);
-  const min = useSharedValue(0);
-  const max = useSharedValue(currentlyPlaying?.item.RunTimeTicks || 0);
-
-  const [dimensions, setDimensions] = useState({
-    window: windowDimensions,
-    screen: screenDimensions,
-  });
-
-  useEffect(() => {
-    const dimensionsSubscription = Dimensions.addEventListener(
-      "change",
-      ({ window, screen }) => {
-        setDimensions({ window, screen });
-      }
-    );
-
-    const orientationSubscription =
-      ScreenOrientation.addOrientationChangeListener((event) => {
-        setOrientation(
-          orientationToOrientationLock(event.orientationInfo.orientation)
-        );
-      });
-
-    ScreenOrientation.getOrientationAsync().then((orientation) => {
-      setOrientation(orientationToOrientationLock(orientation));
-    });
-
-    return () => {
-      dimensionsSubscription.remove();
-      orientationSubscription.remove();
-    };
-  }, []);
-
-  const from = useMemo(() => segments[2], [segments]);
-
-  const updateTimes = useCallback(
-    (currentProgress: number, maxValue: number) => {
-      const current = ticksToSeconds(currentProgress);
-      const remaining = ticksToSeconds(maxValue - current);
-
-      setCurrentTime(current);
-      setRemainingTime(remaining);
-    },
-    []
-  );
-
-  const { showSkipButton, skipIntro } = useIntroSkipper(
-    currentlyPlaying?.item.Id,
-    currentTime,
-    videoRef
-  );
-
-  const { showSkipCreditButton, skipCredit } = useCreditSkipper(
-    currentlyPlaying?.item.Id,
-    currentTime,
-    videoRef
-  );
-
-  useAnimatedReaction(
-    () => ({
-      progress: progress.value,
-      max: max.value,
-      isSeeking: isSeeking.value,
-    }),
-    (result) => {
-      if (result.isSeeking === false) {
-        runOnJS(updateTimes)(result.progress, result.max);
-      }
-    },
-    [updateTimes]
-  );
-
-  useEffect(() => {
-    const backAction = () => {
-      if (currentlyPlaying) {
-        Alert.alert("Hold on!", "Are you sure you want to exit?", [
-          {
-            text: "Cancel",
-            onPress: () => null,
-            style: "cancel",
-          },
-          {
-            text: "Yes",
-            onPress: () => {
-              stopPlayback();
-              router.back();
-            },
-          },
-        ]);
-        return true;
-      }
-      return false;
-    };
-
-    const backHandler = BackHandler.addEventListener(
-      "hardwareBackPress",
-      backAction
-    );
-
-    return () => backHandler.remove();
-  }, [currentlyPlaying, stopPlayback, router]);
-
-  const isLandscape = useMemo(() => {
-    return orientation === ScreenOrientation.OrientationLock.LANDSCAPE_LEFT ||
-      orientation === ScreenOrientation.OrientationLock.LANDSCAPE_RIGHT
-      ? true
-      : false;
-  }, [orientation]);
-
-  const poster = useMemo(() => {
-    if (!currentlyPlaying?.item || !api) return "";
-    return currentlyPlaying.item.Type === "Audio"
-      ? `${api.basePath}/Items/${currentlyPlaying.item.AlbumId}/Images/Primary?tag=${currentlyPlaying.item.AlbumPrimaryImageTag}&quality=90&maxHeight=200&maxWidth=200`
-      : getBackdropUrl({
-          api,
-          item: currentlyPlaying.item,
-          quality: 70,
-          width: 200,
-        });
-  }, [currentlyPlaying?.item, api]);
-
-  const videoSource: ReactVideoProps["source"] = useMemo(() => {
-    if (!api || !currentlyPlaying || !poster) return undefined;
-    const startPosition = currentlyPlaying.item?.UserData?.PlaybackPositionTicks
-      ? Math.round(currentlyPlaying.item.UserData.PlaybackPositionTicks / 10000)
-      : 0;
-    return {
-      uri: currentlyPlaying.url,
-      isNetwork: true,
-      startPosition,
-      headers: getAuthHeaders(api),
-      metadata: {
-        artist: currentlyPlaying.item?.AlbumArtist ?? undefined,
-        title: currentlyPlaying.item?.Name || "Unknown",
-        description: currentlyPlaying.item?.Overview ?? undefined,
-        imageUri: poster,
-        subtitle: currentlyPlaying.item?.Album ?? undefined,
-      },
-    };
-  }, [currentlyPlaying, api, poster]);
-
-  useEffect(() => {
-    if (currentlyPlaying) {
-      progress.value =
-        currentlyPlaying.item?.UserData?.PlaybackPositionTicks || 0;
-      max.value = currentlyPlaying.item.RunTimeTicks || 0;
-      setShowControls(true);
-      playVideo();
-    }
-  }, [currentlyPlaying]);
-
-  const toggleControls = () => setShowControls(!showControls);
-
-  const handleVideoProgress = useCallback(
-    (data: OnProgressData) => {
-      if (isSeeking.value === true) return;
-      progress.value = secondsToTicks(data.currentTime);
-      cacheProgress.value = secondsToTicks(data.playableDuration);
-      setIsBufferingState(data.playableDuration === 0);
-      setIsBuffering(data.playableDuration === 0);
-      onProgress(data);
-    },
-    [onProgress, setIsBuffering, isSeeking]
-  );
-
-  const handleVideoError = useCallback(
-    (e: any) => {
-      console.log(e);
-      writeToLog("ERROR", "Video playback error: " + JSON.stringify(e));
-      Alert.alert("Error", "Cannot play this video file.");
-      setIsPlaying(false);
-    },
-    [setIsPlaying]
-  );
-
-  const handlePlayPause = useCallback(() => {
-    if (isPlaying) pauseVideo();
-    else playVideo();
-  }, [isPlaying, pauseVideo, playVideo]);
-
-  const handleSliderComplete = (value: number) => {
-    progress.value = value;
-    isSeeking.value = false;
-    videoRef.current?.seek(value / 10000000);
-  };
-
-  const handleSliderChange = (value: number) => {
-    calculateTrickplayUrl(value);
-  };
-
-  const handleSliderStart = useCallback(() => {
-    if (showControls === false) return;
-    isSeeking.value = true;
-  }, []);
-
-  const handleSkipBackward = useCallback(async () => {
-    if (!settings) return;
-    try {
-      const curr = await videoRef.current?.getCurrentPosition();
-      if (curr !== undefined) {
-        videoRef.current?.seek(Math.max(0, curr - settings.rewindSkipTime));
-      }
-    } catch (error) {
-      writeToLog("ERROR", "Error seeking video backwards", error);
-    }
-  }, [settings]);
-
-  const handleSkipForward = useCallback(async () => {
-    if (!settings) return;
-    try {
-      const curr = await videoRef.current?.getCurrentPosition();
-      if (curr !== undefined) {
-        videoRef.current?.seek(Math.max(0, curr + settings.forwardSkipTime));
-      }
-    } catch (error) {
-      writeToLog("ERROR", "Error seeking video forwards", error);
-    }
-  }, [settings]);
-
-  const handleGoToPreviousItem = useCallback(() => {
-    if (!previousItem || !from) return;
-    const url = itemRouter(previousItem, from);
-    stopPlayback();
-    // @ts-ignore
-    router.push(url);
-  }, [previousItem, from, stopPlayback, router]);
-
-  const handleGoToNextItem = useCallback(() => {
-    if (!nextItem || !from) return;
-    const url = itemRouter(nextItem, from);
-    stopPlayback();
-    // @ts-ignore
-    router.push(url);
-  }, [nextItem, from, stopPlayback, router]);
-
-  const toggleIgnoreSafeArea = useCallback(() => {
-    setIgnoreSafeArea((prev) => !prev);
-  }, []);
-
-  if (!currentlyPlaying) return null;
-
-  return (
-    <View
-      style={{
-        width: dimensions.window.width,
-        height: dimensions.window.height,
-        backgroundColor: "black",
-      }}
-    >
-      <Pressable
-        onPress={toggleControls}
-        style={[
-          {
-            position: "absolute",
-            top: 0,
-            bottom: 0,
-            left: ignoreSafeArea ? 0 : insets.left,
-            right: ignoreSafeArea ? 0 : insets.right,
-            width: ignoreSafeArea
-              ? dimensions.window.width
-              : dimensions.window.width - (insets.left + insets.right),
-          },
-        ]}
-      >
-        <Video
-          ref={videoRef}
-          source={videoSource}
-          style={{ width: "100%", height: "100%" }}
-          resizeMode={ignoreSafeArea ? "cover" : "contain"}
-          onProgress={handleVideoProgress}
-          onLoad={(data) => (max.value = secondsToTicks(data.duration))}
-          onError={handleVideoError}
-          playWhenInactive={true}
-          allowsExternalPlayback={true}
-          playInBackground={true}
-          pictureInPicture={true}
-          showNotificationControls={true}
-          ignoreSilentSwitch="ignore"
-          fullscreen={false}
-          onVideoTracks={(d) => {
-            console.log("onVideoTracks ~", d);
-          }}
-        />
-      </Pressable>
-
-      {(showControls || isBuffering) && (
-        <View
-          pointerEvents="none"
-          style={[
-            {
-              top: 0,
-              left: 0,
-              position: "absolute",
-              width: dimensions.window.width,
-              height: dimensions.window.height,
-            },
-          ]}
-          className="  bg-black/50 z-0"
-        ></View>
-      )}
-
-      {isBuffering && (
-        <View
-          pointerEvents="none"
-          className="fixed top-0 left-0 w-screen h-screen flex flex-col items-center justify-center"
-        >
-          <Loader />
-        </View>
-      )}
-
-      {showSkipButton && (
-        <View
-          style={[
-            {
-              position: "absolute",
-              bottom: isLandscape ? insets.bottom + 26 : insets.bottom + 70,
-              right: isLandscape ? insets.right + 32 : insets.right + 16,
-              height: 70,
-            },
-          ]}
-          className="z-10"
-        >
-          <TouchableOpacity
-            onPress={skipIntro}
-            className="bg-purple-600 rounded-full px-2.5 py-2 font-semibold"
-          >
-            <Text className="text-white">Skip Intro</Text>
-          </TouchableOpacity>
-        </View>
-      )}
-
-      {showSkipCreditButton && (
-        <View
-          style={[
-            {
-              position: "absolute",
-              bottom: isLandscape ? insets.bottom + 26 : insets.bottom + 70,
-              right: isLandscape ? insets.right + 32 : insets.right + 16,
-              height: 70,
-            },
-          ]}
-          className="z-10"
-        >
-          <TouchableOpacity
-            onPress={skipCredit}
-            className="bg-purple-600 rounded-full px-2.5 py-2 font-semibold"
-          >
-            <Text className="text-white">Skip Credits</Text>
-          </TouchableOpacity>
-        </View>
-      )}
-
-      {showControls && (
-        <>
-          <View
-            style={[
-              {
-                position: "absolute",
-                top: insets.top,
-                right: isLandscape ? insets.right + 32 : insets.right + 16,
-                height: 70,
-                zIndex: 10,
-              },
-            ]}
-            className="flex flex-row items-center space-x-2 z-10"
-          >
-            <TouchableOpacity
-              onPress={toggleIgnoreSafeArea}
-              className="aspect-square flex flex-col bg-neutral-800 rounded-xl items-center justify-center p-2"
-            >
-              <Ionicons
-                name={ignoreSafeArea ? "contract-outline" : "expand"}
-                size={24}
-                color="white"
-              />
-            </TouchableOpacity>
-            <TouchableOpacity
-              onPress={() => {
-                stopPlayback();
-                router.back();
-              }}
-              className="aspect-square flex flex-col bg-neutral-800 rounded-xl items-center justify-center p-2"
-            >
-              <Ionicons name="close" size={24} color="white" />
-            </TouchableOpacity>
-          </View>
-
-          <View
-            style={[
-              {
-                position: "absolute",
-                bottom: insets.bottom + 8,
-                left: isLandscape ? insets.left + 32 : insets.left + 16,
-                width: isLandscape
-                  ? dimensions.window.width - insets.left - insets.right - 64
-                  : dimensions.window.width - insets.left - insets.right - 32,
-              },
-            ]}
-          >
-            <View className="shrink flex flex-col justify-center h-full mb-2">
-              <Text className="font-bold">{currentlyPlaying.item?.Name}</Text>
-              {currentlyPlaying.item?.Type === "Episode" && (
-                <Text className="opacity-50">
-                  {currentlyPlaying.item.SeriesName}
-                </Text>
-              )}
-              {currentlyPlaying.item?.Type === "Movie" && (
-                <Text className="text-xs opacity-50">
-                  {currentlyPlaying.item?.ProductionYear}
-                </Text>
-              )}
-              {currentlyPlaying.item?.Type === "Audio" && (
-                <Text className="text-xs opacity-50">
-                  {currentlyPlaying.item?.Album}
-                </Text>
-              )}
-            </View>
-            <View
-              className={`flex ${
-                isLandscape
-                  ? "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`}
-            >
-              <View className="flex flex-row items-center space-x-4">
-                <TouchableOpacity
-                  style={{
-                    opacity: !previousItem ? 0.5 : 1,
-                  }}
-                  onPress={handleGoToPreviousItem}
-                >
-                  <Ionicons name="play-skip-back" size={24} color="white" />
-                </TouchableOpacity>
-                <TouchableOpacity onPress={handleSkipBackward}>
-                  <Ionicons
-                    name="refresh-outline"
-                    size={26}
-                    color="white"
-                    style={{
-                      transform: [{ scaleY: -1 }, { rotate: "180deg" }],
-                    }}
-                  />
-                </TouchableOpacity>
-                <TouchableOpacity onPress={handlePlayPause}>
-                  <Ionicons
-                    name={isPlaying ? "pause" : "play"}
-                    size={30}
-                    color="white"
-                  />
-                </TouchableOpacity>
-                <TouchableOpacity onPress={handleSkipForward}>
-                  <Ionicons name="refresh-outline" size={26} color="white" />
-                </TouchableOpacity>
-                <TouchableOpacity
-                  style={{
-                    opacity: !nextItem ? 0.5 : 1,
-                  }}
-                  onPress={handleGoToNextItem}
-                >
-                  <Ionicons name="play-skip-forward" size={24} color="white" />
-                </TouchableOpacity>
-              </View>
-              <View
-                className={`flex flex-col w-full shrink
-              ${""}
-            `}
-              >
-                <Slider
-                  theme={{
-                    maximumTrackTintColor: "rgba(255,255,255,0.2)",
-                    minimumTrackTintColor: "#fff",
-                    cacheTrackTintColor: "rgba(255,255,255,0.3)",
-                    bubbleBackgroundColor: "#fff",
-                    bubbleTextColor: "#000",
-                    heartbeatColor: "#999",
-                  }}
-                  cache={cacheProgress}
-                  onSlidingStart={handleSliderStart}
-                  onSlidingComplete={handleSliderComplete}
-                  onValueChange={handleSliderChange}
-                  containerStyle={{
-                    borderRadius: 100,
-                  }}
-                  renderBubble={() => {
-                    if (!trickPlayUrl || !trickplayInfo) {
-                      return null;
-                    }
-                    const { x, y, url } = trickPlayUrl;
-
-                    const tileWidth = 150;
-                    const tileHeight = 150 / trickplayInfo.aspectRatio!;
-                    return (
-                      <View
-                        style={{
-                          position: "absolute",
-                          bottom: 0,
-                          left: 0,
-                          width: tileWidth,
-                          height: tileHeight,
-                          marginLeft: -tileWidth / 4,
-                          marginTop: -tileHeight / 4 - 60,
-                          zIndex: 10,
-                        }}
-                        className=" bg-neutral-800 overflow-hidden"
-                      >
-                        <Image
-                          cachePolicy={"memory-disk"}
-                          style={{
-                            width: 150 * trickplayInfo?.data.TileWidth!,
-                            height:
-                              (150 / trickplayInfo.aspectRatio!) *
-                              trickplayInfo?.data.TileHeight!,
-                            transform: [
-                              { translateX: -x * tileWidth },
-                              { translateY: -y * tileHeight },
-                            ],
-                          }}
-                          source={{ uri: url }}
-                          contentFit="cover"
-                        />
-                      </View>
-                    );
-                  }}
-                  sliderHeight={10}
-                  thumbWidth={0}
-                  progress={progress}
-                  minimumValue={min}
-                  maximumValue={max}
-                />
-                <View className="flex flex-row items-center justify-between mt-0.5">
-                  <Text className="text-[12px] text-neutral-400">
-                    {formatTimeString(currentTime)}
-                  </Text>
-                  <Text className="text-[12px] text-neutral-400">
-                    -{formatTimeString(remainingTime)}
-                  </Text>
-                </View>
-              </View>
-            </View>
-          </View>
-        </>
-      )}
-    </View>
-  );
-};
diff --git a/components/ItemContent.tsx b/components/ItemContent.tsx
index 51920364..47147da4 100644
--- a/components/ItemContent.tsx
+++ b/components/ItemContent.tsx
@@ -12,23 +12,18 @@ import { CastAndCrew } from "@/components/series/CastAndCrew";
 import { CurrentSeries } from "@/components/series/CurrentSeries";
 import { SeasonEpisodesCarousel } from "@/components/series/SeasonEpisodesCarousel";
 import { useImageColors } from "@/hooks/useImageColors";
-import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+import { apiAtom } from "@/providers/JellyfinProvider";
 import { usePlaySettings } from "@/providers/PlaySettingsProvider";
-import { useSettings } from "@/utils/atoms/settings";
 import { getLogoImageUrlById } from "@/utils/jellyfin/image/getLogoImageUrlById";
-import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+import {
+  BaseItemDto,
+  MediaSourceInfo,
+} from "@jellyfin/sdk/lib/generated-client/models";
 import { Image } from "expo-image";
 import { useNavigation } from "expo-router";
 import * as ScreenOrientation from "expo-screen-orientation";
 import { useAtom } from "jotai";
-import React, {
-  useCallback,
-  useEffect,
-  useLayoutEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
+import React, { useEffect, useMemo, useRef, useState } from "react";
 import { View } from "react-native";
 import { useCastDevice } from "react-native-google-cast";
 import Animated from "react-native-reanimated";
@@ -41,7 +36,7 @@ import { MoreMoviesWithActor } from "./MoreMoviesWithActor";
 export const ItemContent: React.FC<{ item: BaseItemDto }> = React.memo(
   ({ item }) => {
     const [api] = useAtom(apiAtom);
-    const { setPlaySettings, playUrl } = usePlaySettings();
+    const { setPlaySettings, playUrl, playSettings } = usePlaySettings();
 
     const castDevice = useCastDevice();
     const navigation = useNavigation();
@@ -52,6 +47,51 @@ export const ItemContent: React.FC<{ item: BaseItemDto }> = React.memo(
       ScreenOrientation.Orientation.PORTRAIT_UP
     );
 
+    const selectedMediaSource = useMemo(() => {
+      return playSettings?.mediaSource || undefined;
+    }, [playSettings?.mediaSource]);
+
+    const setSelectedMediaSource = (mediaSource: MediaSourceInfo) => {
+      setPlaySettings((prev) => ({
+        ...prev,
+        mediaSource,
+      }));
+    };
+
+    const selectedAudioStream = useMemo(() => {
+      return playSettings?.audioIndex;
+    }, [playSettings?.audioIndex]);
+
+    const setSelectedAudioStream = (audioIndex: number | undefined) => {
+      setPlaySettings((prev) => ({
+        ...prev,
+        audioIndex,
+      }));
+    };
+
+    const selectedSubtitleStream = useMemo(() => {
+      return playSettings?.subtitleIndex;
+    }, [playSettings?.subtitleIndex]);
+
+    const setSelectedSubtitleStream = (subtitleIndex: number | undefined) => {
+      setPlaySettings((prev) => ({
+        ...prev,
+        subtitleIndex,
+      }));
+    };
+
+    const maxBitrate = useMemo(() => {
+      return playSettings?.bitrate;
+    }, [playSettings?.bitrate]);
+
+    const setMaxBitrate = (bitrate: Bitrate | undefined) => {
+      console.log("setMaxBitrate", bitrate);
+      setPlaySettings((prev) => ({
+        ...prev,
+        bitrate,
+      }));
+    };
+
     useEffect(() => {
       const subscription = ScreenOrientation.addOrientationChangeListener(
         (event) => {
@@ -79,21 +119,22 @@ export const ItemContent: React.FC<{ item: BaseItemDto }> = React.memo(
             <View className="flex flex-row items-center space-x-2">
               <Chromecast background="blur" width={22} height={22} />
               {item.Type !== "Program" && (
-                <>
+                <View className="flex flex-row items-center space-x-2">
                   <DownloadItem item={item} />
                   <PlayedStatus item={item} />
-                </>
+                </View>
               )}
             </View>
           ),
       });
 
       setPlaySettings((prev) => ({
+        ...prev,
         audioIndex: undefined,
         subtitleIndex: undefined,
         mediaSourceId: undefined,
         bitrate: undefined,
-        mediaSource: undefined,
+        mediaSource: item.MediaSources?.[0],
         item,
       }));
     }, [item]);
@@ -167,10 +208,32 @@ export const ItemContent: React.FC<{ item: BaseItemDto }> = React.memo(
               <ItemHeader item={item} className="mb-4" />
               {item.Type !== "Program" && (
                 <View className="flex flex-row items-center justify-start w-full h-16">
-                  <BitrateSelector className="mr-1" />
-                  <MediaSourceSelector className="mr-1" />
-                  <AudioTrackSelector className="mr-1" />
-                  <SubtitleTrackSelector />
+                  <BitrateSelector
+                    className="mr-1"
+                    onChange={(val) => setMaxBitrate(val)}
+                    selected={maxBitrate}
+                  />
+                  <MediaSourceSelector
+                    className="mr-1"
+                    item={item}
+                    onChange={setSelectedMediaSource}
+                    selected={selectedMediaSource}
+                  />
+                  {selectedMediaSource && (
+                    <>
+                      <AudioTrackSelector
+                        className="mr-1"
+                        source={selectedMediaSource}
+                        onChange={setSelectedAudioStream}
+                        selected={selectedAudioStream}
+                      />
+                      <SubtitleTrackSelector
+                        source={selectedMediaSource}
+                        onChange={setSelectedSubtitleStream}
+                        selected={selectedSubtitleStream}
+                      />
+                    </>
+                  )}
                 </View>
               )}
 
diff --git a/components/MediaSourceSelector.tsx b/components/MediaSourceSelector.tsx
index 452ef9f8..79e8e5e5 100644
--- a/components/MediaSourceSelector.tsx
+++ b/components/MediaSourceSelector.tsx
@@ -1,43 +1,39 @@
-import { convertBitsToMegabitsOrGigabits } from "@/utils/bToMb";
-import { useAtom } from "jotai";
+import { tc } from "@/utils/textTools";
+import {
+  BaseItemDto,
+  MediaSourceInfo,
+} from "@jellyfin/sdk/lib/generated-client/models";
 import { useEffect, useMemo } from "react";
 import { TouchableOpacity, View } from "react-native";
 import * as DropdownMenu from "zeego/dropdown-menu";
 import { Text } from "./common/Text";
-import { usePlaySettings } from "@/providers/PlaySettingsProvider";
+import { convertBitsToMegabitsOrGigabits } from "@/utils/bToMb";
 
-interface Props extends React.ComponentProps<typeof View> {}
+interface Props extends React.ComponentProps<typeof View> {
+  item: BaseItemDto;
+  onChange: (value: MediaSourceInfo) => void;
+  selected?: MediaSourceInfo | null;
+}
 
-export const MediaSourceSelector: React.FC<Props> = ({ ...props }) => {
-  const { playSettings, setPlaySettings, playUrl } = usePlaySettings();
+export const MediaSourceSelector: React.FC<Props> = ({
+  item,
+  onChange,
+  selected,
+  ...props
+}) => {
+  const selectedName = useMemo(
+    () =>
+      item.MediaSources?.find((x) => x.Id === selected?.Id)?.MediaStreams?.find(
+        (x) => x.Type === "Video"
+      )?.DisplayTitle || "",
+    [item.MediaSources, selected]
+  );
 
-  const selectedMediaSource = useMemo(() => {
-    console.log(
-      "selectedMediaSource",
-      playSettings?.mediaSource?.MediaStreams?.length
-    );
-    return (
-      playSettings?.mediaSource?.MediaStreams?.find((x) => x.Type === "Video")
-        ?.DisplayTitle || "N/A"
-    );
-  }, [playSettings?.mediaSource]);
-
-  // Set default media source on component mount
   useEffect(() => {
-    if (
-      playSettings?.item?.MediaSources?.length &&
-      !playSettings?.mediaSource
-    ) {
-      console.log(
-        "Setting default media source",
-        playSettings?.item?.MediaSources?.[0].Id
-      );
-      setPlaySettings((prev) => ({
-        ...prev,
-        mediaSource: playSettings?.item?.MediaSources?.[0],
-      }));
+    if (!selected && item.MediaSources && item.MediaSources.length > 0) {
+      onChange(item.MediaSources[0]);
     }
-  }, [playSettings?.item?.MediaSources, setPlaySettings]);
+  }, [item.MediaSources, selected]);
 
   const name = (name?: string | null) => {
     if (name && name.length > 40)
@@ -58,8 +54,8 @@ export const MediaSourceSelector: React.FC<Props> = ({ ...props }) => {
         <DropdownMenu.Trigger>
           <View className="flex flex-col" {...props}>
             <Text className="opacity-50 mb-1 text-xs">Video</Text>
-            <TouchableOpacity className="bg-neutral-900 h-10 rounded-xl border-neutral-800 border px-3 py-2 flex flex-row items-center ">
-              <Text numberOfLines={1}>{selectedMediaSource}</Text>
+            <TouchableOpacity className="bg-neutral-900 h-10 rounded-xl border-neutral-800 border px-3 py-2 flex flex-row items-center">
+              <Text numberOfLines={1}>{selectedName}</Text>
             </TouchableOpacity>
           </View>
         </DropdownMenu.Trigger>
@@ -73,14 +69,11 @@ export const MediaSourceSelector: React.FC<Props> = ({ ...props }) => {
           sideOffset={8}
         >
           <DropdownMenu.Label>Media sources</DropdownMenu.Label>
-          {playSettings?.item?.MediaSources?.map((source, idx: number) => (
+          {item.MediaSources?.map((source, idx: number) => (
             <DropdownMenu.Item
               key={idx.toString()}
               onSelect={() => {
-                setPlaySettings((prev) => ({
-                  ...prev,
-                  mediaSource: source,
-                }));
+                onChange(source);
               }}
             >
               <DropdownMenu.ItemTitle>
diff --git a/components/SubtitleTrackSelector.tsx b/components/SubtitleTrackSelector.tsx
index 5c5a3cac..ce0f986c 100644
--- a/components/SubtitleTrackSelector.tsx
+++ b/components/SubtitleTrackSelector.tsx
@@ -1,46 +1,55 @@
-import { usePlaySettings } from "@/providers/PlaySettingsProvider";
-import { useSettings } from "@/utils/atoms/settings";
-import { tc } from "@/utils/textTools";
-import { useEffect, useMemo } from "react";
-import { TouchableOpacity, View, ViewProps } from "react-native";
+import { TouchableOpacity, View } from "react-native";
 import * as DropdownMenu from "zeego/dropdown-menu";
 import { Text } from "./common/Text";
+import { atom, useAtom } from "jotai";
+import {
+  BaseItemDto,
+  MediaSourceInfo,
+} from "@jellyfin/sdk/lib/generated-client/models";
+import { useEffect, useMemo } from "react";
+import { MediaStream } from "@jellyfin/sdk/lib/generated-client/models";
+import { tc } from "@/utils/textTools";
+import { useSettings } from "@/utils/atoms/settings";
 
-interface Props extends ViewProps {}
+interface Props extends React.ComponentProps<typeof View> {
+  source: MediaSourceInfo;
+  onChange: (value: number) => void;
+  selected?: number | null;
+}
 
-export const SubtitleTrackSelector: React.FC<Props> = ({ ...props }) => {
-  const { playSettings, setPlaySettings, playUrl } = usePlaySettings();
+export const SubtitleTrackSelector: React.FC<Props> = ({
+  source,
+  onChange,
+  selected,
+  ...props
+}) => {
   const [settings] = useSettings();
 
   const subtitleStreams = useMemo(
-    () =>
-      playSettings?.mediaSource?.MediaStreams?.filter(
-        (x) => x.Type === "Subtitle"
-      ) ?? [],
-    [playSettings?.mediaSource]
+    () => source.MediaStreams?.filter((x) => x.Type === "Subtitle") ?? [],
+    [source]
   );
 
   const selectedSubtitleSteam = useMemo(
-    () => subtitleStreams.find((x) => x.Index === playSettings?.subtitleIndex),
-    [subtitleStreams, playSettings?.subtitleIndex]
+    () => subtitleStreams.find((x) => x.Index === selected),
+    [subtitleStreams, selected]
   );
 
   useEffect(() => {
+    // const index = source.DefaultAudioStreamIndex;
+    // if (index !== undefined && index !== null) {
+    //   onChange(index);
+    //   return;
+    // }
     const defaultSubIndex = subtitleStreams?.find(
       (x) => x.Language === settings?.defaultSubtitleLanguage?.value
     )?.Index;
     if (defaultSubIndex !== undefined && defaultSubIndex !== null) {
-      setPlaySettings((prev) => ({
-        ...prev,
-        subtitleIndex: defaultSubIndex,
-      }));
+      onChange(defaultSubIndex);
       return;
     }
 
-    setPlaySettings((prev) => ({
-      ...prev,
-      subtitleIndex: -1,
-    }));
+    onChange(-1);
   }, [subtitleStreams, settings]);
 
   if (subtitleStreams.length === 0) return null;
@@ -79,10 +88,7 @@ export const SubtitleTrackSelector: React.FC<Props> = ({ ...props }) => {
           <DropdownMenu.Item
             key={"-1"}
             onSelect={() => {
-              setPlaySettings((prev) => ({
-                ...prev,
-                subtitleIndex: -1,
-              }));
+              onChange(-1);
             }}
           >
             <DropdownMenu.ItemTitle>None</DropdownMenu.ItemTitle>
@@ -92,10 +98,7 @@ export const SubtitleTrackSelector: React.FC<Props> = ({ ...props }) => {
               key={idx.toString()}
               onSelect={() => {
                 if (subtitle.Index !== undefined && subtitle.Index !== null)
-                  setPlaySettings((prev) => ({
-                    ...prev,
-                    subtitleIndex: subtitle.Index,
-                  }));
+                  onChange(subtitle.Index);
               }}
             >
               <DropdownMenu.ItemTitle>
diff --git a/components/music/SongsListItem.tsx b/components/music/SongsListItem.tsx
index edc88f66..8784d3a5 100644
--- a/components/music/SongsListItem.tsx
+++ b/components/music/SongsListItem.tsx
@@ -1,6 +1,6 @@
 import { Text } from "@/components/common/Text";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
-import { usePlayback } from "@/providers/PlaybackProvider";
+import { usePlaySettings } from "@/providers/PlaySettingsProvider";
 import { getStreamUrl } from "@/utils/jellyfin/media/getStreamUrl";
 import { chromecastProfile } from "@/utils/profiles/chromecast";
 import ios from "@/utils/profiles/ios";
@@ -41,7 +41,7 @@ export const SongsListItem: React.FC<Props> = ({
   const client = useRemoteMediaClient();
   const { showActionSheetWithOptions } = useActionSheet();
 
-  const { setCurrentlyPlayingState } = usePlayback();
+  const { playSettings, setPlaySettings } = usePlaySettings();
 
   const openSelect = () => {
     if (!castDevice?.deviceId) {
@@ -121,9 +121,8 @@ export const SongsListItem: React.FC<Props> = ({
       });
     } else {
       console.log("Playing on device", url, item.Id);
-      setCurrentlyPlayingState({
+      setPlaySettings({
         item,
-        url,
       });
       router.push("/play-music");
     }
diff --git a/components/video-player/Controls.tsx b/components/video-player/Controls.tsx
index 6310f2f2..f888e48e 100644
--- a/components/video-player/Controls.tsx
+++ b/components/video-player/Controls.tsx
@@ -55,7 +55,6 @@ interface Props {
   setShowControls: (shown: boolean) => void;
   ignoreSafeAreas?: boolean;
   setIgnoreSafeAreas: React.Dispatch<React.SetStateAction<boolean>>;
-  isLandscape: boolean;
 }
 
 export const Controls: React.FC<Props> = ({
@@ -69,7 +68,6 @@ export const Controls: React.FC<Props> = ({
   cacheProgress,
   showControls,
   setShowControls,
-  isLandscape,
   ignoreSafeAreas,
   setIgnoreSafeAreas,
 }) => {
@@ -259,8 +257,8 @@ export const Controls: React.FC<Props> = ({
         style={[
           {
             position: "absolute",
-            bottom: isLandscape ? insets.bottom + 55 : insets.bottom + 97,
-            right: isLandscape ? insets.right : insets.right,
+            bottom: insets.bottom + 97,
+            right: insets.right,
           },
         ]}
         className={`z-10 p-4
@@ -278,8 +276,8 @@ export const Controls: React.FC<Props> = ({
       <View
         style={{
           position: "absolute",
-          bottom: isLandscape ? insets.bottom + 52 : insets.bottom + 94,
-          right: isLandscape ? insets.right : insets.right,
+          bottom: insets.bottom + 94,
+          right: insets.right,
           height: 70,
         }}
         pointerEvents={showSkipCreditButton ? "auto" : "none"}
@@ -390,12 +388,7 @@ export const Controls: React.FC<Props> = ({
           )}
         </View>
         <View
-          className={`flex ${
-            isLandscape
-              ? "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/90`}
+          className={`flex flex-col-reverse py-4 px-4 rounded-2xl items-center  bg-neutral-800/90`}
         >
           <View className="flex flex-row items-center space-x-4">
             <TouchableOpacity
diff --git a/hooks/useAdjacentEpisodes.ts b/hooks/useAdjacentEpisodes.ts
index 92ad4fb5..4c5e46f0 100644
--- a/hooks/useAdjacentEpisodes.ts
+++ b/hooks/useAdjacentEpisodes.ts
@@ -2,7 +2,6 @@ import { Api } from "@jellyfin/sdk";
 import { getItemsApi } from "@jellyfin/sdk/lib/utils/api/items-api";
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
 import { useQuery } from "@tanstack/react-query";
-import { CurrentlyPlayingState } from "@/providers/PlaybackProvider";
 import { useAtom } from "jotai";
 import { apiAtom } from "@/providers/JellyfinProvider";
 
diff --git a/hooks/useDownloadedFileOpener.ts b/hooks/useDownloadedFileOpener.ts
index f41e1f53..67c599e4 100644
--- a/hooks/useDownloadedFileOpener.ts
+++ b/hooks/useDownloadedFileOpener.ts
@@ -1,6 +1,6 @@
 // hooks/useFileOpener.ts
 
-import { usePlayback } from "@/providers/PlaybackProvider";
+import { usePlaySettings } from "@/providers/PlaySettingsProvider";
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
 import * as FileSystem from "expo-file-system";
 import { useRouter } from "expo-router";
@@ -8,48 +8,44 @@ import { useCallback } from "react";
 
 export const useFileOpener = () => {
   const router = useRouter();
-  const { startDownloadedFilePlayback } = usePlayback();
+  const { setPlaySettings, setPlayUrl, setOfflineSettings } = usePlaySettings();
 
-  const openFile = useCallback(
-    async (item: BaseItemDto) => {
-      const directory = FileSystem.documentDirectory;
+  const openFile = useCallback(async (item: BaseItemDto) => {
+    const directory = FileSystem.documentDirectory;
 
-      if (!directory) {
-        throw new Error("Document directory is not available");
+    if (!directory) {
+      throw new Error("Document directory is not available");
+    }
+
+    if (!item.Id) {
+      throw new Error("Item ID is not available");
+    }
+
+    try {
+      const files = await FileSystem.readDirectoryAsync(directory);
+      for (let f of files) {
+        console.log(f);
+      }
+      const path = item.Id!;
+      const matchingFile = files.find((file) => file.startsWith(path));
+
+      if (!matchingFile) {
+        throw new Error(`No file found for item ${path}`);
       }
 
-      if (!item.Id) {
-        throw new Error("Item ID is not available");
-      }
+      const url = `${directory}${matchingFile}`;
 
-      try {
-        const files = await FileSystem.readDirectoryAsync(directory);
-        for (let f of files) {
-          console.log(f);
-        }
-        const path = item.Id!;
-        const matchingFile = files.find((file) => file.startsWith(path));
+      setOfflineSettings({
+        item,
+      });
+      setPlayUrl(url);
 
-        if (!matchingFile) {
-          throw new Error(`No file found for item ${path}`);
-        }
-
-        const url = `${directory}${matchingFile}`;
-
-        console.log("Opening " + url);
-
-        startDownloadedFilePlayback({
-          item,
-          url,
-        });
-        router.push("/play");
-      } catch (error) {
-        console.error("Error opening file:", error);
-        // Handle the error appropriately, e.g., show an error message to the user
-      }
-    },
-    [startDownloadedFilePlayback]
-  );
+      router.push("/play-offline-video");
+    } catch (error) {
+      console.error("Error opening file:", error);
+      // Handle the error appropriately, e.g., show an error message to the user
+    }
+  }, []);
 
   return { openFile };
 };
diff --git a/providers/PlaySettingsProvider.tsx b/providers/PlaySettingsProvider.tsx
index 2c966762..9fd0c774 100644
--- a/providers/PlaySettingsProvider.tsx
+++ b/providers/PlaySettingsProvider.tsx
@@ -1,25 +1,24 @@
-import React, {
-  createContext,
-  useState,
-  useContext,
-  useEffect,
-  useCallback,
-} from "react";
+import { Bitrate } from "@/components/BitrateSelector";
+import { settingsAtom } from "@/utils/atoms/settings";
+import { getStreamUrl } from "@/utils/jellyfin/media/getStreamUrl";
+import { reportPlaybackStopped } from "@/utils/jellyfin/playstate/reportPlaybackStopped";
+import ios from "@/utils/profiles/ios";
+import native from "@/utils/profiles/native";
+import old from "@/utils/profiles/old";
 import {
   BaseItemDto,
   MediaSourceInfo,
 } from "@jellyfin/sdk/lib/generated-client";
-import { settingsAtom } from "@/utils/atoms/settings";
-import { apiAtom, userAtom } from "./JellyfinProvider";
-import { useAtomValue } from "jotai";
-import iosFmp4 from "@/utils/profiles/iosFmp4";
-import native from "@/utils/profiles/native";
-import old from "@/utils/profiles/old";
-import { getStreamUrl } from "@/utils/jellyfin/media/getStreamUrl";
-import { reportPlaybackStopped } from "@/utils/jellyfin/playstate/reportPlaybackStopped";
-import { Bitrate } from "@/components/BitrateSelector";
-import ios from "@/utils/profiles/ios";
 import { getSessionApi } from "@jellyfin/sdk/lib/utils/api";
+import { useAtomValue } from "jotai";
+import React, {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useState,
+} from "react";
+import { apiAtom, userAtom } from "./JellyfinProvider";
 
 export type PlaybackType = {
   item?: BaseItemDto | null;
@@ -32,8 +31,10 @@ export type PlaybackType = {
 type PlaySettingsContextType = {
   playSettings: PlaybackType | null;
   setPlaySettings: React.Dispatch<React.SetStateAction<PlaybackType | null>>;
+  setOfflineSettings: (data: PlaybackType) => void;
   playUrl?: string | null;
   reportStopPlayback: (ticks: number) => Promise<void>;
+  setPlayUrl: React.Dispatch<React.SetStateAction<string | null>>;
 };
 
 const PlaySettingsContext = createContext<PlaySettingsContextType | undefined>(
@@ -43,7 +44,7 @@ const PlaySettingsContext = createContext<PlaySettingsContextType | undefined>(
 export const PlaySettingsProvider: React.FC<{ children: React.ReactNode }> = ({
   children,
 }) => {
-  const [playSettings, setPlaySettings] = useState<PlaybackType | null>(null);
+  const [playSettings, _setPlaySettings] = useState<PlaybackType | null>(null);
   const [playUrl, setPlayUrl] = useState<string | null>(null);
 
   const api = useAtomValue(apiAtom);
@@ -65,44 +66,56 @@ export const PlaySettingsProvider: React.FC<{ children: React.ReactNode }> = ({
     [playSettings?.item?.Id, api]
   );
 
-  useEffect(() => {
-    const fetchPlayUrl = async () => {
-      if (!api || !user || !settings || !playSettings) {
-        console.log("fetchPlayUrl ~ missing params");
-        setPlayUrl(null);
-        return;
-      }
+  const setOfflineSettings = useCallback((data: PlaybackType) => {
+    _setPlaySettings(data);
+  }, []);
 
-      console.log("fetchPlayUrl ~ fetching url", playSettings?.item?.Id);
+  const setPlaySettings = useCallback(
+    async (
+      dataOrUpdater:
+        | PlaybackType
+        | null
+        | ((prev: PlaybackType | null) => PlaybackType | null)
+    ) => {
+      _setPlaySettings((prevSettings) => {
+        const newSettings =
+          typeof dataOrUpdater === "function"
+            ? dataOrUpdater(prevSettings)
+            : dataOrUpdater;
 
-      // Determine the device profile
-      let deviceProfile: any = ios;
-      if (settings?.deviceProfile === "Native") deviceProfile = native;
-      if (settings?.deviceProfile === "Old") deviceProfile = old;
+        if (!api || !user || !settings || newSettings === null) {
+          return newSettings;
+        }
 
-      const url = await getStreamUrl({
-        api,
-        deviceProfile,
-        item: playSettings?.item,
-        mediaSourceId: playSettings?.mediaSource?.Id,
-        startTimeTicks: 0,
-        maxStreamingBitrate: playSettings?.bitrate?.value,
-        audioStreamIndex: playSettings?.audioIndex
-          ? playSettings?.audioIndex
-          : 0,
-        subtitleStreamIndex: playSettings?.subtitleIndex
-          ? playSettings?.subtitleIndex
-          : -1,
-        userId: user.Id,
-        forceDirectPlay: false,
-        sessionData: null,
+        let deviceProfile: any = ios;
+        if (settings?.deviceProfile === "Native") deviceProfile = native;
+        if (settings?.deviceProfile === "Old") deviceProfile = old;
+
+        getStreamUrl({
+          api,
+          deviceProfile,
+          item: newSettings?.item,
+          mediaSourceId: newSettings?.mediaSource?.Id,
+          startTimeTicks: 0,
+          maxStreamingBitrate: newSettings?.bitrate?.value,
+          audioStreamIndex: newSettings?.audioIndex
+            ? newSettings?.audioIndex
+            : 0,
+          subtitleStreamIndex: newSettings?.subtitleIndex
+            ? newSettings?.subtitleIndex
+            : -1,
+          userId: user.Id,
+          forceDirectPlay: false,
+          sessionData: null,
+        }).then((url) => {
+          if (url) setPlayUrl(url);
+        });
+
+        return newSettings;
       });
-
-      setPlayUrl(url);
-    };
-
-    fetchPlayUrl();
-  }, [api, settings, user, playSettings]);
+    },
+    [api, user, settings, setPlayUrl]
+  );
 
   useEffect(() => {
     let deviceProfile: any = ios;
@@ -130,7 +143,14 @@ export const PlaySettingsProvider: React.FC<{ children: React.ReactNode }> = ({
 
   return (
     <PlaySettingsContext.Provider
-      value={{ playSettings, setPlaySettings, playUrl, reportStopPlayback }}
+      value={{
+        playSettings,
+        setPlaySettings,
+        playUrl,
+        reportStopPlayback,
+        setPlayUrl,
+        setOfflineSettings,
+      }}
     >
       {children}
     </PlaySettingsContext.Provider>
diff --git a/providers/PlaybackProvider.tsx b/providers/PlaybackProvider.tsx
deleted file mode 100644
index 37286540..00000000
--- a/providers/PlaybackProvider.tsx
+++ /dev/null
@@ -1,393 +0,0 @@
-import { useQuery } from "@tanstack/react-query";
-import React, {
-  createContext,
-  ReactNode,
-  useCallback,
-  useContext,
-  useEffect,
-  useRef,
-  useState,
-} from "react";
-
-import { useSettings } from "@/utils/atoms/settings";
-import { getDeviceId } from "@/utils/device";
-import { SubtitleTrack } from "@/utils/hls/parseM3U8ForSubtitles";
-import { reportPlaybackProgress } from "@/utils/jellyfin/playstate/reportPlaybackProgress";
-import { reportPlaybackStopped } from "@/utils/jellyfin/playstate/reportPlaybackStopped";
-import { postCapabilities } from "@/utils/jellyfin/session/capabilities";
-import {
-  BaseItemDto,
-  PlaybackInfoResponse,
-} from "@jellyfin/sdk/lib/generated-client/models";
-import { getMediaInfoApi } from "@jellyfin/sdk/lib/utils/api";
-import * as Linking from "expo-linking";
-import { useRouter } from "expo-router";
-import { useAtom } from "jotai";
-import { debounce } from "lodash";
-import { Alert } from "react-native";
-import { OnProgressData, type VideoRef } from "react-native-video";
-import { apiAtom, userAtom } from "./JellyfinProvider";
-
-export type CurrentlyPlayingState = {
-  url: string;
-  item: BaseItemDto;
-};
-
-interface PlaybackContextType {
-  sessionData: PlaybackInfoResponse | null | undefined;
-  currentlyPlaying: CurrentlyPlayingState | null;
-  videoRef: React.MutableRefObject<VideoRef | null>;
-  isPlaying: boolean;
-  isFullscreen: boolean;
-  progressTicks: number | null;
-  playVideo: (triggerRef?: boolean) => void;
-  pauseVideo: (triggerRef?: boolean) => void;
-  stopPlayback: () => void;
-  presentFullscreenPlayer: () => void;
-  dismissFullscreenPlayer: () => void;
-  setIsFullscreen: (isFullscreen: boolean) => void;
-  setIsPlaying: (isPlaying: boolean) => void;
-  isBuffering: boolean;
-  setIsBuffering: (val: boolean) => void;
-  onProgress: (data: OnProgressData) => void;
-  setVolume: (volume: number) => void;
-  setCurrentlyPlayingState: (
-    currentlyPlaying: CurrentlyPlayingState | null
-  ) => void;
-  startDownloadedFilePlayback: (
-    currentlyPlaying: CurrentlyPlayingState | null
-  ) => void;
-  subtitles: SubtitleTrack[];
-}
-
-const PlaybackContext = createContext<PlaybackContextType | null>(null);
-
-export const PlaybackProvider: React.FC<{ children: ReactNode }> = ({
-  children,
-}) => {
-  const [api] = useAtom(apiAtom);
-  const [user] = useAtom(userAtom);
-
-  const router = useRouter();
-
-  const videoRef = useRef<VideoRef | null>(null);
-
-  const [settings] = useSettings();
-
-  const previousVolume = useRef<number | null>(null);
-
-  const [isPlaying, _setIsPlaying] = useState<boolean>(false);
-  const [isBuffering, setIsBuffering] = useState<boolean>(false);
-  const [isFullscreen, setIsFullscreen] = useState<boolean>(false);
-  const [progressTicks, setProgressTicks] = useState<number | null>(0);
-  const [volume, _setVolume] = useState<number | null>(null);
-  const [session, setSession] = useState<PlaybackInfoResponse | null>(null);
-  const [subtitles, setSubtitles] = useState<SubtitleTrack[]>([]);
-  const [currentlyPlaying, setCurrentlyPlaying] =
-    useState<CurrentlyPlayingState | null>(null);
-
-  // WS
-  const [ws, setWs] = useState<WebSocket | null>(null);
-  const [isConnected, setIsConnected] = useState(false);
-
-  const setVolume = useCallback(
-    (newVolume: number) => {
-      previousVolume.current = volume;
-      _setVolume(newVolume);
-      videoRef.current?.setVolume(newVolume);
-    },
-    [_setVolume]
-  );
-
-  const { data: deviceId } = useQuery({
-    queryKey: ["deviceId", api],
-    queryFn: getDeviceId,
-  });
-
-  const startDownloadedFilePlayback = useCallback(
-    async (state: CurrentlyPlayingState | null) => {
-      if (!state) {
-        setCurrentlyPlaying(null);
-        setIsPlaying(false);
-        return;
-      }
-
-      setCurrentlyPlaying(state);
-      setIsPlaying(true);
-    },
-    []
-  );
-
-  const setCurrentlyPlayingState = useCallback(
-    async (state: CurrentlyPlayingState | null) => {
-      try {
-        if (state?.item.Id && user?.Id) {
-          const vlcLink = "vlc://" + state?.url;
-          if (vlcLink && settings?.openInVLC) {
-            Linking.openURL("vlc://" + state?.url || "");
-            return;
-          }
-
-          // Support live tv
-          const res =
-            state.item.Type !== "Program"
-              ? await getMediaInfoApi(api!).getPlaybackInfo({
-                  itemId: state.item.Id,
-                  userId: user.Id,
-                })
-              : await getMediaInfoApi(api!).getPlaybackInfo({
-                  itemId: state.item.ChannelId!,
-                  userId: user.Id,
-                });
-
-          await postCapabilities({
-            api,
-            itemId: state.item.Id,
-            sessionId: res.data.PlaySessionId,
-            deviceProfile: settings?.deviceProfile,
-          });
-
-          setSession(res.data);
-          setCurrentlyPlaying(state);
-          setIsPlaying(true);
-        } else {
-          setCurrentlyPlaying(null);
-          setIsFullscreen(false);
-          setIsPlaying(false);
-        }
-      } catch (e) {
-        console.error(e);
-        Alert.alert(
-          "Something went wrong",
-          "The item could not be played. Maybe there is no internet connection?",
-          [
-            {
-              style: "destructive",
-              text: "Try force play",
-              onPress: () => {
-                setCurrentlyPlaying(state);
-                setIsPlaying(true);
-              },
-            },
-            {
-              text: "Ok",
-              style: "default",
-            },
-          ]
-        );
-      }
-    },
-    [settings, user, api]
-  );
-
-  const playVideo = useCallback(
-    (triggerRef: boolean = true) => {
-      if (triggerRef === true) {
-        videoRef.current?.resume();
-      }
-      _setIsPlaying(true);
-      reportPlaybackProgress({
-        api,
-        itemId: currentlyPlaying?.item.Id,
-        positionTicks: progressTicks ? progressTicks : 0,
-        sessionId: session?.PlaySessionId,
-        IsPaused: false,
-      });
-    },
-    [api, currentlyPlaying?.item.Id, session?.PlaySessionId, progressTicks]
-  );
-
-  const pauseVideo = useCallback(
-    (triggerRef: boolean = true) => {
-      if (triggerRef === true) {
-        videoRef.current?.pause();
-      }
-      _setIsPlaying(false);
-      reportPlaybackProgress({
-        api,
-        itemId: currentlyPlaying?.item.Id,
-        positionTicks: progressTicks ? progressTicks : 0,
-        sessionId: session?.PlaySessionId,
-        IsPaused: true,
-      });
-    },
-    [session?.PlaySessionId, currentlyPlaying?.item.Id, progressTicks]
-  );
-
-  const stopPlayback = useCallback(async () => {
-    const id = currentlyPlaying?.item?.Id;
-    setCurrentlyPlayingState(null);
-
-    await reportPlaybackStopped({
-      api,
-      itemId: id,
-      sessionId: session?.PlaySessionId,
-      positionTicks: progressTicks ? progressTicks : 0,
-    });
-  }, [currentlyPlaying?.item.Id, session?.PlaySessionId, progressTicks, api]);
-
-  const setIsPlaying = useCallback(
-    debounce((value: boolean) => {
-      _setIsPlaying(value);
-    }, 500),
-    []
-  );
-
-  const _onProgress = useCallback(
-    ({ currentTime }: OnProgressData) => {
-      if (
-        !session?.PlaySessionId ||
-        !currentlyPlaying?.item.Id ||
-        currentTime === 0
-      )
-        return;
-      const ticks = currentTime * 10000000;
-      setProgressTicks(ticks);
-      reportPlaybackProgress({
-        api,
-        itemId: currentlyPlaying?.item.Id,
-        positionTicks: ticks,
-        sessionId: session?.PlaySessionId,
-        IsPaused: !isPlaying,
-      });
-    },
-    [session?.PlaySessionId, currentlyPlaying?.item.Id, isPlaying, api]
-  );
-
-  const onProgress = useCallback(
-    debounce((e: OnProgressData) => {
-      _onProgress(e);
-    }, 500),
-    [_onProgress]
-  );
-
-  const presentFullscreenPlayer = useCallback(() => {
-    videoRef.current?.presentFullscreenPlayer();
-    setIsFullscreen(true);
-  }, []);
-
-  const dismissFullscreenPlayer = useCallback(() => {
-    videoRef.current?.dismissFullscreenPlayer();
-    setIsFullscreen(false);
-  }, []);
-
-  useEffect(() => {
-    if (!deviceId || !api?.accessToken) return;
-
-    const protocol = api?.basePath.includes("https") ? "wss" : "ws";
-
-    const url = `${protocol}://${api?.basePath
-      .replace("https://", "")
-      .replace("http://", "")}/socket?api_key=${
-      api?.accessToken
-    }&deviceId=${deviceId}`;
-
-    const newWebSocket = new WebSocket(url);
-
-    let keepAliveInterval: NodeJS.Timeout | null = null;
-
-    newWebSocket.onopen = () => {
-      setIsConnected(true);
-      // Start sending "KeepAlive" message every 30 seconds
-      keepAliveInterval = setInterval(() => {
-        if (newWebSocket.readyState === WebSocket.OPEN) {
-          newWebSocket.send(JSON.stringify({ MessageType: "KeepAlive" }));
-        }
-      }, 30000);
-    };
-
-    newWebSocket.onerror = (e) => {
-      console.error("WebSocket error:", e);
-      setIsConnected(false);
-    };
-
-    newWebSocket.onclose = (e) => {
-      if (keepAliveInterval) {
-        clearInterval(keepAliveInterval);
-      }
-    };
-
-    setWs(newWebSocket);
-
-    return () => {
-      if (keepAliveInterval) {
-        clearInterval(keepAliveInterval);
-      }
-      newWebSocket.close();
-    };
-  }, [api, deviceId, user]);
-
-  useEffect(() => {
-    if (!ws) return;
-
-    ws.onmessage = (e) => {
-      const json = JSON.parse(e.data);
-      const command = json?.Data?.Command;
-
-      console.log("[WS] ~ ", json);
-
-      // On PlayPause
-      if (command === "PlayPause") {
-        console.log("Command ~ PlayPause");
-        if (isPlaying) pauseVideo();
-        else playVideo();
-      } else if (command === "Stop") {
-        console.log("Command ~ Stop");
-        stopPlayback();
-        router.canGoBack() && router.back();
-      } else if (command === "Mute") {
-        console.log("Command ~ Mute");
-        setVolume(0);
-      } else if (command === "Unmute") {
-        console.log("Command ~ Unmute");
-        setVolume(previousVolume.current || 20);
-      } else if (command === "SetVolume") {
-        console.log("Command ~ SetVolume");
-      } else if (json?.Data?.Name === "DisplayMessage") {
-        console.log("Command ~ DisplayMessage");
-        const title = json?.Data?.Arguments?.Header;
-        const body = json?.Data?.Arguments?.Text;
-        Alert.alert(title, body);
-      }
-    };
-  }, [ws, stopPlayback, playVideo, pauseVideo]);
-
-  return (
-    <PlaybackContext.Provider
-      value={{
-        onProgress,
-        isBuffering,
-        setIsBuffering,
-        progressTicks,
-        setVolume,
-        setIsPlaying,
-        setIsFullscreen,
-        isFullscreen,
-        isPlaying,
-        currentlyPlaying,
-        sessionData: session,
-        videoRef,
-        playVideo,
-        setCurrentlyPlayingState,
-        pauseVideo,
-        stopPlayback,
-        presentFullscreenPlayer,
-        dismissFullscreenPlayer,
-        startDownloadedFilePlayback,
-        subtitles,
-      }}
-    >
-      {children}
-    </PlaybackContext.Provider>
-  );
-};
-
-export const usePlayback = () => {
-  const context = useContext(PlaybackContext);
-
-  if (!context) {
-    throw new Error("usePlayback must be used within a PlaybackProvider");
-  }
-
-  return context;
-};

From 4b60de4d43d876bcfb1636da3747e24b64115594 Mon Sep 17 00:00:00 2001
From: Fredrik Burmester <fredrik.burmester@gmail.com>
Date: Mon, 7 Oct 2024 08:18:24 +0200
Subject: [PATCH 07/10] fix: padding

---
 app/(auth)/(tabs)/(search)/index.tsx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/app/(auth)/(tabs)/(search)/index.tsx b/app/(auth)/(tabs)/(search)/index.tsx
index e3ef4f09..91ae1842 100644
--- a/app/(auth)/(tabs)/(search)/index.tsx
+++ b/app/(auth)/(tabs)/(search)/index.tsx
@@ -278,7 +278,7 @@ export default function search() {
               <TouchableItemRouter
                 key={item.Id}
                 item={item}
-                className="flex flex-col w-28"
+                className="flex flex-col w-28 mr-2"
               >
                 <SeriesPoster item={item} key={item.Id} />
                 <Text numberOfLines={2} className="mt-2">
@@ -297,7 +297,7 @@ export default function search() {
               <TouchableItemRouter
                 item={item}
                 key={item.Id}
-                className="flex flex-col w-44"
+                className="flex flex-col w-44 mr-2"
               >
                 <ContinueWatchingPoster item={item} />
                 <ItemCardText item={item} />
@@ -311,7 +311,7 @@ export default function search() {
               <TouchableItemRouter
                 key={item.Id}
                 item={item}
-                className="flex flex-col w-28"
+                className="flex flex-col w-28 mr-2"
               >
                 <MoviePoster item={item} key={item.Id} />
                 <Text numberOfLines={2} className="mt-2">
@@ -327,7 +327,7 @@ export default function search() {
               <TouchableItemRouter
                 item={item}
                 key={item.Id}
-                className="flex flex-col w-28"
+                className="flex flex-col w-28 mr-2"
               >
                 <MoviePoster item={item} />
                 <ItemCardText item={item} />
@@ -341,7 +341,7 @@ export default function search() {
               <TouchableItemRouter
                 item={item}
                 key={item.Id}
-                className="flex flex-col w-28"
+                className="flex flex-col w-28 mr-2"
               >
                 <AlbumCover id={item.Id} />
                 <ItemCardText item={item} />
@@ -355,7 +355,7 @@ export default function search() {
               <TouchableItemRouter
                 item={item}
                 key={item.Id}
-                className="flex flex-col w-28"
+                className="flex flex-col w-28 mr-2"
               >
                 <AlbumCover id={item.Id} />
                 <ItemCardText item={item} />
@@ -369,7 +369,7 @@ export default function search() {
               <TouchableItemRouter
                 item={item}
                 key={item.Id}
-                className="flex flex-col w-28"
+                className="flex flex-col w-28 mr-2"
               >
                 <AlbumCover id={item.AlbumId} />
                 <ItemCardText item={item} />

From a5b4f6cc7854602403302b3a9ebf6e22f1c8b7f4 Mon Sep 17 00:00:00 2001
From: Fredrik Burmester <fredrik.burmester@gmail.com>
Date: Mon, 7 Oct 2024 10:00:16 +0200
Subject: [PATCH 08/10] wip

---
 app/(auth)/play-video.tsx                     | 35 +++++---
 components/music/SongsListItem.tsx            | 12 +--
 hooks/useCreditSkipper.ts                     |  1 +
 hooks/useDownloadedFileOpener.ts              |  2 +-
 hooks/useIntroSkipper.ts                      |  1 +
 hooks/useWebsockets.ts                        |  2 +-
 providers/PlaySettingsProvider.tsx            | 36 +++-----
 utils/jellyfin/media/getStreamUrl.ts          | 86 +++++++++++++------
 .../playstate/reportPlaybackStopped.ts        | 68 ---------------
 9 files changed, 105 insertions(+), 138 deletions(-)
 delete mode 100644 utils/jellyfin/playstate/reportPlaybackStopped.ts

diff --git a/app/(auth)/play-video.tsx b/app/(auth)/play-video.tsx
index 348e1451..c6b7d2c5 100644
--- a/app/(auth)/play-video.tsx
+++ b/app/(auth)/play-video.tsx
@@ -26,9 +26,10 @@ 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";
 
 export default function page() {
-  const { playSettings, playUrl } = usePlaySettings();
+  const { playSettings, playUrl, playSessionId } = usePlaySettings();
   const api = useAtomValue(apiAtom);
   const [settings] = useSettings();
   const videoRef = useRef<VideoRef | null>(null);
@@ -38,6 +39,7 @@ export default function page() {
 
   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);
@@ -68,9 +70,10 @@ export default function page() {
             ? playSettings.subtitleIndex
             : undefined,
           mediaSourceId: playSettings.mediaSource?.Id!,
-          positionTicks: Math.round(ticks),
+          positionTicks: Math.floor(ticks),
           isPaused: true,
           playMethod: playUrl.includes("m3u8") ? "Transcode" : "DirectStream",
+          playSessionId: playSessionId ? playSessionId : undefined,
         });
       } else {
         setIsPlaying(true);
@@ -84,9 +87,10 @@ export default function page() {
             ? playSettings.subtitleIndex
             : undefined,
           mediaSourceId: playSettings.mediaSource?.Id!,
-          positionTicks: Math.round(ticks),
+          positionTicks: Math.floor(ticks),
           isPaused: false,
           playMethod: playUrl.includes("m3u8") ? "Transcode" : "DirectStream",
+          playSessionId: playSessionId ? playSessionId : undefined,
         });
       }
     },
@@ -105,6 +109,7 @@ export default function page() {
   }, [videoRef]);
 
   const stop = useCallback(() => {
+    setIsPlaybackStopped(true);
     setIsPlaying(false);
     videoRef.current?.pause();
     reportPlaybackStopped();
@@ -114,7 +119,8 @@ export default function page() {
     await getPlaystateApi(api).onPlaybackStopped({
       itemId: playSettings?.item?.Id!,
       mediaSourceId: playSettings.mediaSource?.Id!,
-      positionTicks: progress.value,
+      positionTicks: Math.floor(progress.value),
+      playSessionId: playSessionId ? playSessionId : undefined,
     });
   };
 
@@ -129,12 +135,14 @@ export default function page() {
         : 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) return;
 
       const ticks = data.currentTime * 10000000;
 
@@ -156,17 +164,21 @@ export default function page() {
         positionTicks: Math.round(ticks),
         isPaused: !isPlaying,
         playMethod: playUrl.includes("m3u8") ? "Transcode" : "DirectStream",
+        playSessionId: playSessionId ? playSessionId : undefined,
       });
     },
-    [playSettings?.item.Id, isPlaying, api]
+    [playSettings?.item.Id, isPlaying, api, isPlaybackStopped]
   );
 
-  useEffect(() => {
-    play();
-    return () => {
-      stop();
-    };
-  }, []);
+  useFocusEffect(
+    useCallback(() => {
+      play();
+
+      return () => {
+        stop();
+      };
+    }, [play, stop])
+  );
 
   useEffect(() => {
     const orientationSubscription =
@@ -250,6 +262,7 @@ export default function page() {
               firstTime.current = false;
             }
           }}
+          progressUpdateInterval={500}
           playWhenInactive={true}
           allowsExternalPlayback={true}
           playInBackground={true}
diff --git a/components/music/SongsListItem.tsx b/components/music/SongsListItem.tsx
index 8784d3a5..8ad125af 100644
--- a/components/music/SongsListItem.tsx
+++ b/components/music/SongsListItem.tsx
@@ -41,7 +41,7 @@ export const SongsListItem: React.FC<Props> = ({
   const client = useRemoteMediaClient();
   const { showActionSheetWithOptions } = useActionSheet();
 
-  const { playSettings, setPlaySettings } = usePlaySettings();
+  const { setPlaySettings } = usePlaySettings();
 
   const openSelect = () => {
     if (!castDevice?.deviceId) {
@@ -85,7 +85,7 @@ export const SongsListItem: React.FC<Props> = ({
 
     const sessionData = response.data;
 
-    const url = await getStreamUrl({
+    const data = await getStreamUrl({
       api,
       userId: user.Id,
       item,
@@ -95,8 +95,8 @@ export const SongsListItem: React.FC<Props> = ({
       mediaSourceId: item.Id,
     });
 
-    if (!url || !item) {
-      console.warn("No url or item", url, item.Id);
+    if (!data?.url || !item) {
+      console.warn("No url or item", data?.url, item.Id);
       return;
     }
 
@@ -107,7 +107,7 @@ export const SongsListItem: React.FC<Props> = ({
         else {
           client.loadMedia({
             mediaInfo: {
-              contentUrl: url,
+              contentUrl: data.url!,
               contentType: "video/mp4",
               metadata: {
                 type: item.Type === "Episode" ? "tvShow" : "movie",
@@ -120,7 +120,7 @@ export const SongsListItem: React.FC<Props> = ({
         }
       });
     } else {
-      console.log("Playing on device", url, item.Id);
+      console.log("Playing on device", data.url, item.Id);
       setPlaySettings({
         item,
       });
diff --git a/hooks/useCreditSkipper.ts b/hooks/useCreditSkipper.ts
index 56cfe6f3..670784e2 100644
--- a/hooks/useCreditSkipper.ts
+++ b/hooks/useCreditSkipper.ts
@@ -48,6 +48,7 @@ export const useCreditSkipper = (
       return res?.data;
     },
     enabled: !!itemId,
+    retry: false,
   });
 
   useEffect(() => {
diff --git a/hooks/useDownloadedFileOpener.ts b/hooks/useDownloadedFileOpener.ts
index 67c599e4..4c60e8c2 100644
--- a/hooks/useDownloadedFileOpener.ts
+++ b/hooks/useDownloadedFileOpener.ts
@@ -8,7 +8,7 @@ import { useCallback } from "react";
 
 export const useFileOpener = () => {
   const router = useRouter();
-  const { setPlaySettings, setPlayUrl, setOfflineSettings } = usePlaySettings();
+  const { setPlayUrl, setOfflineSettings } = usePlaySettings();
 
   const openFile = useCallback(async (item: BaseItemDto) => {
     const directory = FileSystem.documentDirectory;
diff --git a/hooks/useIntroSkipper.ts b/hooks/useIntroSkipper.ts
index 3def1120..68e7a760 100644
--- a/hooks/useIntroSkipper.ts
+++ b/hooks/useIntroSkipper.ts
@@ -44,6 +44,7 @@ export const useIntroSkipper = (
       return res?.data;
     },
     enabled: !!itemId,
+    retry: false,
   });
 
   useEffect(() => {
diff --git a/hooks/useWebsockets.ts b/hooks/useWebsockets.ts
index d25714fc..92c647bb 100644
--- a/hooks/useWebsockets.ts
+++ b/hooks/useWebsockets.ts
@@ -103,7 +103,7 @@ export const useWebSocket = ({
         console.log("Command ~ DisplayMessage");
         const title = json?.Data?.Arguments?.Header;
         const body = json?.Data?.Arguments?.Text;
-        Alert.alert(title, body);
+        Alert.alert("Message from server: " + title, body);
       }
     };
   }, [ws, stopPlayback, playVideo, pauseVideo, isPlaying, router]);
diff --git a/providers/PlaySettingsProvider.tsx b/providers/PlaySettingsProvider.tsx
index 9fd0c774..2654c52b 100644
--- a/providers/PlaySettingsProvider.tsx
+++ b/providers/PlaySettingsProvider.tsx
@@ -1,7 +1,6 @@
 import { Bitrate } from "@/components/BitrateSelector";
 import { settingsAtom } from "@/utils/atoms/settings";
 import { getStreamUrl } from "@/utils/jellyfin/media/getStreamUrl";
-import { reportPlaybackStopped } from "@/utils/jellyfin/playstate/reportPlaybackStopped";
 import ios from "@/utils/profiles/ios";
 import native from "@/utils/profiles/native";
 import old from "@/utils/profiles/old";
@@ -9,7 +8,7 @@ import {
   BaseItemDto,
   MediaSourceInfo,
 } from "@jellyfin/sdk/lib/generated-client";
-import { getSessionApi } from "@jellyfin/sdk/lib/utils/api";
+import { getPlaystateApi, getSessionApi } from "@jellyfin/sdk/lib/utils/api";
 import { useAtomValue } from "jotai";
 import React, {
   createContext,
@@ -18,7 +17,7 @@ import React, {
   useEffect,
   useState,
 } from "react";
-import { apiAtom, userAtom } from "./JellyfinProvider";
+import { apiAtom, getOrSetDeviceId, userAtom } from "./JellyfinProvider";
 
 export type PlaybackType = {
   item?: BaseItemDto | null;
@@ -31,10 +30,10 @@ export type PlaybackType = {
 type PlaySettingsContextType = {
   playSettings: PlaybackType | null;
   setPlaySettings: React.Dispatch<React.SetStateAction<PlaybackType | null>>;
-  setOfflineSettings: (data: PlaybackType) => void;
   playUrl?: string | null;
-  reportStopPlayback: (ticks: number) => Promise<void>;
   setPlayUrl: React.Dispatch<React.SetStateAction<string | null>>;
+  playSessionId?: string | null;
+  setOfflineSettings: (data: PlaybackType) => void;
 };
 
 const PlaySettingsContext = createContext<PlaySettingsContextType | undefined>(
@@ -46,26 +45,12 @@ export const PlaySettingsProvider: React.FC<{ children: React.ReactNode }> = ({
 }) => {
   const [playSettings, _setPlaySettings] = useState<PlaybackType | null>(null);
   const [playUrl, setPlayUrl] = useState<string | null>(null);
+  const [playSessionId, setPlaySessionId] = useState<string | null>(null);
 
   const api = useAtomValue(apiAtom);
   const settings = useAtomValue(settingsAtom);
   const user = useAtomValue(userAtom);
 
-  const reportStopPlayback = useCallback(
-    async (ticks: number) => {
-      const id = playSettings?.item?.Id;
-      setPlaySettings(null);
-
-      await reportPlaybackStopped({
-        api,
-        itemId: id,
-        sessionId: undefined,
-        positionTicks: ticks,
-      });
-    },
-    [playSettings?.item?.Id, api]
-  );
-
   const setOfflineSettings = useCallback((data: PlaybackType) => {
     _setPlaySettings(data);
   }, []);
@@ -107,8 +92,9 @@ export const PlaySettingsProvider: React.FC<{ children: React.ReactNode }> = ({
           userId: user.Id,
           forceDirectPlay: false,
           sessionData: null,
-        }).then((url) => {
-          if (url) setPlayUrl(url);
+        }).then((data) => {
+          setPlayUrl(data?.url!);
+          setPlaySessionId(data?.sessionId!);
         });
 
         return newSettings;
@@ -129,7 +115,7 @@ export const PlaySettingsProvider: React.FC<{ children: React.ReactNode }> = ({
           AppStoreUrl: "https://apps.apple.com/us/app/streamyfin/id6593660679",
           DeviceProfile: deviceProfile,
           IconUrl:
-            "https://github.com/fredrikburmester/streamyfin/blob/master/assets/images/adaptive_icon.png",
+            "https://raw.githubusercontent.com/retardgerman/streamyfinweb/refs/heads/redesign/public/assets/images/icon_new_withoutBackground.png",
           PlayableMediaTypes: ["Audio", "Video"],
           SupportedCommands: ["Play"],
           SupportsMediaControl: true,
@@ -139,7 +125,7 @@ export const PlaySettingsProvider: React.FC<{ children: React.ReactNode }> = ({
     };
 
     postCaps();
-  }, [settings]);
+  }, [settings, api]);
 
   return (
     <PlaySettingsContext.Provider
@@ -147,9 +133,9 @@ export const PlaySettingsProvider: React.FC<{ children: React.ReactNode }> = ({
         playSettings,
         setPlaySettings,
         playUrl,
-        reportStopPlayback,
         setPlayUrl,
         setOfflineSettings,
+        playSessionId,
       }}
     >
       {children}
diff --git a/utils/jellyfin/media/getStreamUrl.ts b/utils/jellyfin/media/getStreamUrl.ts
index 2b7d0cf6..d9c4eadb 100644
--- a/utils/jellyfin/media/getStreamUrl.ts
+++ b/utils/jellyfin/media/getStreamUrl.ts
@@ -33,18 +33,17 @@ export const getStreamUrl = async ({
   forceDirectPlay?: boolean;
   height?: number;
   mediaSourceId?: string | null;
-}) => {
+}): Promise<{
+  url: string | null | undefined;
+  sessionId: string | null | undefined;
+} | null> => {
   if (!api || !userId || !item?.Id) {
-    console.log("getStreamUrl: missing params", {
-      api: api?.basePath,
-      userId,
-      item: item?.Id,
-    });
     return null;
   }
 
   let mediaSource: MediaSourceInfo | undefined;
   let url: string | null | undefined;
+  let sessionId: string | null | undefined;
 
   if (item.Type === "Program") {
     const res0 = await getMediaInfoApi(api).getPlaybackInfo(
@@ -67,35 +66,67 @@ export const getStreamUrl = async ({
       }
     );
     const transcodeUrl = res0.data.MediaSources?.[0].TranscodingUrl;
-    if (transcodeUrl) return `${api.basePath}${transcodeUrl}`;
+    sessionId = res0.data.PlaySessionId;
+
+    if (transcodeUrl) {
+      return { url: `${api.basePath}${transcodeUrl}`, sessionId };
+    }
   }
 
   const itemId = item.Id;
 
-  const res2 = await api.axiosInstance.post(
-    `${api.basePath}/Items/${itemId}/PlaybackInfo`,
+  // const res2 = await api.axiosInstance.post(
+  //   `${api.basePath}/Items/${itemId}/PlaybackInfo`,
+  //   {
+  //     DeviceProfile: deviceProfile,
+  //     UserId: userId,
+  //     MaxStreamingBitrate: maxStreamingBitrate,
+  //     StartTimeTicks: startTimeTicks,
+  //     EnableTranscoding: maxStreamingBitrate ? true : undefined,
+  //     AutoOpenLiveStream: true,
+  //     MediaSourceId: mediaSourceId,
+  //     AllowVideoStreamCopy: maxStreamingBitrate ? false : true,
+  //     AudioStreamIndex: audioStreamIndex,
+  //     SubtitleStreamIndex: subtitleStreamIndex,
+  //     DeInterlace: true,
+  //     BreakOnNonKeyFrames: false,
+  //     CopyTimestamps: false,
+  //     EnableMpegtsM2TsMode: false,
+  //   },
+  //   {
+  //     headers: getAuthHeaders(api),
+  //   }
+  // );
+
+  const res2 = await getMediaInfoApi(api).getPlaybackInfo(
     {
-      DeviceProfile: deviceProfile,
-      UserId: userId,
-      MaxStreamingBitrate: maxStreamingBitrate,
-      StartTimeTicks: startTimeTicks,
-      EnableTranscoding: maxStreamingBitrate ? true : undefined,
-      AutoOpenLiveStream: true,
-      MediaSourceId: mediaSourceId,
-      AllowVideoStreamCopy: maxStreamingBitrate ? false : true,
-      AudioStreamIndex: audioStreamIndex,
-      SubtitleStreamIndex: subtitleStreamIndex,
-      DeInterlace: true,
-      BreakOnNonKeyFrames: false,
-      CopyTimestamps: false,
-      EnableMpegtsM2TsMode: false,
+      userId,
+      itemId: item.Id!,
     },
     {
-      headers: getAuthHeaders(api),
+      method: "POST",
+      data: {
+        deviceProfile,
+        userId,
+        maxStreamingBitrate,
+        startTimeTicks,
+        enableTranscoding: maxStreamingBitrate ? true : undefined,
+        autoOpenLiveStream: true,
+        mediaSourceId,
+        allowVideoStreamCopy: maxStreamingBitrate ? false : true,
+        audioStreamIndex,
+        subtitleStreamIndex,
+        deInterlace: true,
+        breakOnNonKeyFrames: false,
+        copyTimestamps: false,
+        enableMpegtsM2TsMode: false,
+      },
     }
   );
 
-  mediaSource = res2.data.MediaSources.find(
+  sessionId = res2.data.PlaySessionId;
+
+  mediaSource = res2.data.MediaSources?.find(
     (source: MediaSourceInfo) => source.Id === mediaSourceId
   );
 
@@ -136,5 +167,8 @@ export const getStreamUrl = async ({
     return null;
   }
 
-  return url;
+  return {
+    url,
+    sessionId,
+  };
 };
diff --git a/utils/jellyfin/playstate/reportPlaybackStopped.ts b/utils/jellyfin/playstate/reportPlaybackStopped.ts
deleted file mode 100644
index 665eb032..00000000
--- a/utils/jellyfin/playstate/reportPlaybackStopped.ts
+++ /dev/null
@@ -1,68 +0,0 @@
-import { Api } from "@jellyfin/sdk";
-import { AxiosError } from "axios";
-import { getAuthHeaders } from "../jellyfin";
-
-interface PlaybackStoppedParams {
-  api: Api | null | undefined;
-  sessionId: string | null | undefined;
-  itemId: string | null | undefined;
-  positionTicks: number | null | undefined;
-}
-
-/**
- * Reports playback stopped event to the Jellyfin server.
- *
- * @param {PlaybackStoppedParams} params - The parameters for the report.
- * @param {Api} params.api - The Jellyfin API instance.
- * @param {string} params.sessionId - The session ID.
- * @param {string} params.itemId - The item ID.
- * @param {number} params.positionTicks - The playback position in ticks.
- */
-export const reportPlaybackStopped = async ({
-  api,
-  sessionId,
-  itemId,
-  positionTicks,
-}: PlaybackStoppedParams): Promise<void> => {
-  if (!positionTicks || positionTicks === 0) return;
-
-  if (!api) {
-    console.error("Missing api");
-    return;
-  }
-
-  if (!sessionId) {
-    console.error("Missing sessionId", sessionId);
-    return;
-  }
-
-  if (!itemId) {
-    console.error("Missing itemId");
-    return;
-  }
-
-  try {
-    const url = `${api.basePath}/PlayingItems/${itemId}`;
-    const params = {
-      playSessionId: sessionId,
-      positionTicks: Math.round(positionTicks),
-      MediaSourceId: itemId,
-      IsPaused: true,
-    };
-    const headers = getAuthHeaders(api);
-
-    // Send DELETE request to report playback stopped
-    await api.axiosInstance.delete(url, { params, headers });
-  } catch (error) {
-    // Log the error with additional context
-    if (error instanceof AxiosError) {
-      console.error(
-        "Failed to report playback progress",
-        error.message,
-        error.response?.data
-      );
-    } else {
-      console.error("Failed to report playback progress", error);
-    }
-  }
-};

From ec0843d737ca3318c6d0e18016b0a3188e3076fa Mon Sep 17 00:00:00 2001
From: Fredrik Burmester <fredrik.burmester@gmail.com>
Date: Tue, 8 Oct 2024 15:39:44 +0200
Subject: [PATCH 09/10] wip

---
 app/(auth)/(tabs)/(home)/index.tsx            |   9 +-
 app/(auth)/(tabs)/(home)/settings.tsx         |   2 +-
 app/(auth)/play-music.tsx                     | 308 +++++++++++++++++-
 app/(auth)/play-offline-video.tsx             | 122 ++-----
 app/(auth)/play-video.tsx                     | 125 ++++---
 app/_layout.tsx                               |   9 +
 bun.lockb                                     | Bin 622513 -> 621174 bytes
 components/AudioTrackSelector.tsx             |  31 +-
 components/BitrateSelector.tsx                |   4 +-
 components/DownloadItem.tsx                   |  26 +-
 components/ItemContent.tsx                    |  58 +++-
 components/OfflineVideoPlayer.tsx             |  37 ---
 components/SubtitleTrackSelector.tsx          |  31 +-
 components/downloads/EpisodeCard.tsx          |   6 +-
 components/music/SongsListItem.tsx            |  33 +-
 ...xtEpisodeButton.tsx => NextItemButton.tsx} |  14 +-
 components/video-player/Controls.tsx          | 124 ++++---
 constants/Colors.ts                           |  10 +-
 hooks/useAdjacentEpisodes.ts                  |  82 +++--
 hooks/useAndroidNavigationBar.ts              |  17 +
 hooks/useCreditSkipper.ts                     |   1 +
 hooks/useDownloadedFileOpener.ts              |   3 +-
 hooks/useIntroSkipper.ts                      |   1 +
 hooks/useOrientation.ts                       |  28 ++
 hooks/useOrientationSettings.ts               |  25 ++
 hooks/useRemuxHlsToMp4.ts                     |  19 +-
 hooks/useTrickplay.ts                         |  18 +-
 package.json                                  |  22 +-
 providers/DownloadProvider.tsx                |   1 +
 providers/PlaySettingsProvider.tsx            |  81 +++--
 utils/jellyfin/getDefaultPlaySettings.ts      |  63 ++++
 utils/jellyfin/media/getStreamUrl.ts          | 110 +++----
 utils/optimize-server.ts                      |   2 +
 33 files changed, 895 insertions(+), 527 deletions(-)
 delete mode 100644 components/OfflineVideoPlayer.tsx
 rename components/series/{NextEpisodeButton.tsx => NextItemButton.tsx} (83%)
 create mode 100644 hooks/useAndroidNavigationBar.ts
 create mode 100644 hooks/useOrientation.ts
 create mode 100644 hooks/useOrientationSettings.ts
 create mode 100644 utils/jellyfin/getDefaultPlaySettings.ts

diff --git a/app/(auth)/(tabs)/(home)/index.tsx b/app/(auth)/(tabs)/(home)/index.tsx
index cb0b43bd..c3a48f93 100644
--- 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>
diff --git a/app/(auth)/(tabs)/(home)/settings.tsx b/app/(auth)/(tabs)/(home)/settings.tsx
index 7077a16f..28b9033c 100644
--- 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} />
diff --git a/app/(auth)/play-music.tsx b/app/(auth)/play-music.tsx
index d6c3266c..4138ecc2 100644
--- 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;
+}
diff --git a/app/(auth)/play-offline-video.tsx b/app/(auth)/play-offline-video.tsx
index 51625d10..63d9f092 100644
--- 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,
diff --git a/app/(auth)/play-video.tsx b/app/(auth)/play-video.tsx
index c6b7d2c5..c601210c 100644
--- 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>
 
diff --git a/app/_layout.tsx b/app/_layout.tsx
index 9b18a08f..9c32fc76 100644
--- 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);
   }
 }
diff --git a/bun.lockb b/bun.lockb
index 85cc964e10f11a6d8c8670a059d0c3deaded5147..bb04f687c464497240ff57d7b2e097959afbaeb9 100755
GIT binary patch
delta 32180
zcmeIbcX(7)-?lw_l3_9+B^2pOkt!f9B!CDgNDUH|qST0?_adDH>76i!Meit8iiXgO
zf>K08K><Yp1yKP(0Rd6p^P0Uzxu4JXIlh0s@2`6fE`IBG?zLB6YwuYzJG1Gp61Q)b
zm|3Ar>Tg^29PiLRs$P}@d45}Vvgf$rF|RM5`N>zu+P97?^W3E$FAWWN^jehK>QV2T
z(>4uRRW$HRq{mal<4H*mRw~xO$sZhA?9oPr`#GLmuuRy8ur2yKp3K<2)^4%3Z`W?U
zmEKzXEF2%wwZB|X+(5^Z6~BD&e6hUVy90ywianBC;5EmS1Nid**AD5`vvT(V9?uSV
z9{5*qWqKH!6T2I$%$Jck#ZGx`h~p`U?SWNh<%hcI3>esdV4ogUJR9+qsj-Dg>^-#n
zD~SV=vblcdl$_K?CuR>WEuOc4Z@62h?tPQGl&2i`hq>AOIxP5U@si#jhXwByujZ?q
zOkskx9(%lTqtT8hFJ~8xcRbm!Rq<8qq#*;7dcW%N<ianC@5idxH&fi|WQ=jE(<!l6
zQqOL~k}jnLH$S$h?C$Yya;vZp6Ww5=u@kY`vBR*+=JhGTVI?Yf6Q%~&lxUg!%uL7g
z2z0OG@#MpfNOjMi(bLWB8on~$G|Tbi#xB7s)md1jHW90iJW0I#*j`xW_7JuJwj}8n
z#&+t{vyZy6W}2Jc1T5z#r*z)q3AJHXA}WC~v)u^&u<EqswcU&#t>t(M;oqC#7OY5w
zCv<$+O;4!R`p~1Q$Tg0uz|-ftHnIC_p%E0A=cdy+alpXxgZg(H!|^PhWKT*z0?O!u
zJ+ae#w+63pnrikNz7qZ#s{)o^=(a#1YqMiDN+PhzxKp1#J-Q`%Jco&|7VFi&SGQjH
z*%!O{+*{;!^JV<p$wasSP}9#{;wEqrs}lze?AB97PhRStFaWCzjuBtOdZ)G9$w<@S
zZLE$D>iufBPTf47b6&TF_AhsjCk^S_N9k?FSG-peU+t1j(=BnpfTaEdJ)RpYf|*M<
z%ene3cOcEds;j5G73^NRno}USv~;Ngoz}XAJH>cWA+oNsiLVP@C|x0Q)3@Em*!*^|
zK$((GxnSKgd7b*fm&!bve1Ee$B06<V?Ae22T*B8lz59+^oZ9cY)#{tre?U@<$J2el
zt9^PAZ*#g6T22;XH9eYQHNrmK;*Px18SeR0;OfWQbcXCOd=<YtmgadmWzkj_w6O`)
z#;W56ZgUf=g0FVTdBhX4_uyJ4rfzrRjlyck_Z`qv&FCp*;};4hl+BwzC!U5&0IRdk
z>~wukaCF()$)8eL^=bE{0W`G7leWjrs~q!AD@flSUCO`Ot-ogqT&WD*=MJ_!_^NDS
ze3kW`_uR&)`M$e!EyY)52V<3M%zn3wGb~TRa(;430}@a|Jr20N&=RZG?D~P5&`GQY
zQ36(r(wGn3<F)aXK^3eT=U|#A)T(7kPmOW+pnIIbmDGu<b%85>ORQQy?_u>S(<}!-
zHHgEiAaO_BQ6J8*1il7Tuf!fnYKq+WN+1%eg5@~s7T`7sD&vZ@jMBRRSBoVL=@x3)
z$85_c_3AcoU{e2~k>vM~rdjo4ZbD_OEreA9(Vw^p-=Qm1!@2m%I2Xs&q*rYh<(_ND
z)p56my|6mJ+ox`UF4%a!&)lwVQ_ii>J&q@<k0VaFHNQs$C49r$SCd{%>P^`@_0h=S
z^2JzDji#S;Gs^k7+a>q$HDNAUI})pcw*SICuCZ0VQ_pTb=BDy{poN|YB{-mG;()GX
z(5Hx7(*tCr8Z0~Q)?gGhRK~&6?{qJ}rD%>iOLu<pey$_Ovfr)p#OiM^j#wV|oOeu}
zgp4`~PQ!=u&+X-S`V*V0{eQe>n)6+pQh`T$JD!#t&J;}O9P11;jk-Fu1ABlk1HHk7
zwy{nLa|r0PGJ$SRZSTfDrg1mtDes*=W->NVudm~2O57|a^#v!^nP~#uN#O%%9cV=G
z_{~_SqM0Pvp`YU^@8)$OHZT=04$lc5?-J|X-_JDe;XLKb-{0{(Y2tf0HGLfj#)X1`
z!=j<Msa;|Nxd*sjWH7Z;Y@j(_MUGL}p|OD!yr<k$r^fpJ!mALR)}>~kK6fThyRmx3
z1}5OSv6R9Ays8|F3{}@>0=+40twD~bu1+usBb>M>JQdaxj82LTY{65O5y6C>v4Kl?
zI^AoccQ|pTQ6J78@S5Xk2%~a0V*{VyDTXI_e0*#ma<JohUdK%IUQ)(u=Eh8k4XnUZ
zYjPgmbv(7A$0Rf-Cig!z@p1%HXT=6m@!I1>gc{*zJXI(%7~MWLP;02;sipJOsexg5
z)$l@H9N2}YhKLLv?-=I{HIw_(iBEA4Wc#9HtnW3v8g3tK{3n=y_}|@;K+tXS=nk>Y
zXcHLd)b?%u=lG8Vl_TY@;KcfhjKFo%Yxz%bD#4iG(K9u@`$m|_gDAysIv6TiYRA|>
z`H^m!as(67Vtq+?ZW@941Z`^)?HHcQ;;1jYe~mPm2RlzW)lH+pbi<%gj;FPo;@sH4
zQ9Q2jG<-q{CpJ(oIo#G{=bf2sCJ$i%eh+;$7~i(0)5HXZlE&&3w=wD7fljQq<7hK^
zDDf7JX5yH5zf&`ClVCm4^{LZ*aj!d`7lQF4Y6hkdQbFA=+Jo0URF>#{v4Jw&9ja@i
zg7UiIX%IvNqua&?4&k|jK<$ucY`AY|>_9x8@^S}aDqamde=zlStnUck%fa}$H3KEa
zIi4zTZ!o$|Y@jt>Z0MW>=G_cDcgAb%U&L#~v8=%ax-!lj8p#|#Io@O*MJxJEqfxX#
z#|e(732~x=$IrwD*5Wn5tD-XkzgRC@=zN+znG?oMbc+=TCUlPt?7`FIeMqN!f1hYF
zr;v7e(<p_khE6h*aRVDBxpnrN=m`4ecU%>c^&>4dkTBWtw7~P2=vH*WrpadVXwJC}
zR!Ka;)G4t}EfaX1yi=$A4R6H;PT^G`ibi{^lgS(+insGrlX(p1&zb6Y8gnozl&AN?
zR5Mw)!Zde&vK-uti^QoH%-X4DU_T+{<^)rZ#X4Ecq_O1Idb+zxWOb96JKba+$KrTo
zx@nAc@|sEGh!sD>t&KmJ&@0xve1^$9o_vPRbcaBuV07<T@3xs{GSn$)4vnXbvr<jw
z2}HV=>W&Qhn~B|UmU{{bwPW4FYp(j61V3$-C+Jqk8`QArfLAY6TxuRzj^{3*c;0V<
z=I}(uaH%&O&$Ge!b~U}d-Y|_PQShyAn90~cAkFbq=Ilt5nw^ygPlJ^?MsK9yDP^1O
zX<RKm^a3ku-r0X&I_Ua!c=p60aZxxL))8)T;|!UH64kg)!&8UTx)k>(JT0HhoPM!R
z71L-ct(Y>$4iQZ=@98<_@Kj1#X|9_ED<4y5p7ofDBy$Gu36hBlruK~u6rSfcS11c#
zFTA*5)($lTD+#Frv|D0q;9EQu%WqPPvv!r4ueEU6K<CLQLTW;<NgYjV7hT}GzF_o-
z*g!kHe~SMOo;t>j>U(M-9TU0=O(bO7gOd*8X+fvuxT;0)K0(KrvsC06Ja>`PvB7xt
zImR%aO4f_rV@{Bki)gXf31;a~E3g#mj!#wnKAwueiZUYB*K~>Fi4Pv_NM#ARC5Y}9
z8@P+7+0TXIM6C0)X%u83e`Bc@Fc#*(_k`TYw2ZIRGRN~wD3R_8DRGlJo6&(6y4IQK
z7}wJ|p#{o`F^r_z-tNmy<1{+!#Bw*PPXoy*WDapK&}@a<3~s+n!mApb)~{w@mqMiE
z4fW+cJS}zZ6}9Tha1&_Ib;VPjnM`zFCoU4NS!l}MCX@hYal0EA^`^UyGl*FQ$KvVo
zo>graIDn@ikVzL)C&C<>!wpY86PQc!_P+IZ*UpXgJ-mvw&}5zK)bu8<GKc3<sTH8m
zD043>pW&+5^i`KwpMN!tY2t%iCSE3}?xr;F$3=<bJf!@+msgv{^GT}ong=IsPdrtb
z`y6`oO*~zrGt2XSy~Z?Nz;aQ*Oj<ynjb2OVn`sNk<{&|h6~{!kW1JS|ou7Kgogd@z
zG`i_<+U+Ae&2q0fKE#Q0)|t$UC`6m}Ztv1iEHaDmo+D0{&?<Fxy*aEneR%`<G?Y6a
zrul9>wZGd_f8q@f9n+FEbc5rmj>mZ5QnVRQInvkLVgujdh05j@wZ=x<L%NlWi^S_4
zJo<Ufz(qnGIVrS=2RdzXJnh`%XT(L}bjD$ZbK_ESGi42CZTn;t0W~$(D2n&+JC3I<
zp1Uyi$5RnlTWHl4c)GL{4yICA-@9&$=MEk}7Z-)23B`4QwwjBlZuN)m0FUD70-HM+
z&B#i3JY8`@^D$6ki+lNS)1Qi`26yxR3QubY&CgO(H6z??x~Uw9r{&S@?Y-9H%1$XC
z+UhRtp<}+5cnyQon9Umq=|;~@{R*D)a&xY{&Fvxz%m^Qar<}RpVCC74rw*e<xj~HB
z?s{~QRvtXH9bI&oYU8P+Lz6S`C0;!|ca3^<hkJ2lpq${&1kX)VC7y<-8O8duFE(%l
zPvy)Ks!i0+@a?l=#^LE$=3w-e*uWAzjd^z{eTSz~vtCfnBD>sU)UQ*l?`6D-!J{cP
z1Ct49X7CPxSnuJff2qxwSnthUX7XAFY?<9IWrmYy8$9<6)i`L6c|y162k=6Rcj$`y
z@*c-iiPYTjaRpCxbnnw*_lE1JGzZ~T<Cr_q*5c`&%RO(_KF8DMZ|^Fe23BEr6ujq7
zH#g>Ic%iWrdUFu@zT;^XoW>p9dP4Dkr*IEXedM0=%zk&qyXj5Db5mzT`;OspiEmre
zm*)U0o;mssS29BGd^k?I&*ME$TC@yfa?A(z%}Hp{y@;m?O3M(l{D<yJ$R&@tG6zrR
z*~|HlxM~`PHmgS2gRbW`cXvG9XhoWYyi9Do`X+uG1vz9dYv%YwuC>i^W84xF`n$Hi
zPZiB%-N6Zm!*7;!?>YoeBgbupbUdx-uGjpCz4H%U5~A>QdFCxpr#Nj@aDCv)-}EDQ
z7`RhzES?58m*al1-h&^R##^{YDs+^Z1gCKW*p`rvb63kSTY{&F!MPOW3Z4ck(*&>d
z$L;_RT>}HH@%|~;Ts(I@Oy&Oc)BiZu=$PBwEF`^ohli)DEZw?0E(+(Lx)%QA!TxWJ
z_jd-qHF(@@Z~?tZ=%4FHh2xH=b|^W<g?H+4GkH7n;xzQ{mJXEsG@PZz&S1QHp$q;F
zLVuqd$p4x9e!y+%SMl8UE*d|Z@&1XK^Tgk)U$?j@92F;%Nu9`j0^UDE_$Z!MSI0yT
zb$Ew=((#nTrE$52*1@Y~vcBy+>6|o~cWX9(?p~DqCZREJ2!?!aCJTQ6R%O7v?+oPn
zB3w?bwuA6manPM5AK|GR+&UCH^<b$J@zk}9b5_pfc<Nf#JiKr4w7R%An9--h!<-r6
zOTc?NG*mVc(okWYNQ(8{#CtLrzprMX;u&{tvbyn3YA~KgWljw!@6j_Ejo)+56iv?L
z@p#s;!Q;igZS6*EB>ubD?AZ6Qe(YgvPV84$2YVLFKhO94M@x9Bvcsf!HL*&s7FO||
z!s;c<4!x(YJ^oA<=CqDAvk_!<!gJP_jlyq*Re{=A{-9Mx?JSpd%=+(~yva(Yqs6j{
z_KLNyTK>OTm9q=+lulQBUUz$*tkUag{eQ8~ha&VQg3A9IRtXNpD#2m)L|N5ql=Wrh
zzmD}`Cs;1)H7hSVrP#Fec&1zYpjCNhDjIf{JuWN%4Xl!#W9<TLHvBc%hp~IHD%L)%
z;=hko{135u$%-G+XCtb|M*!JlHp0JI9siW$O87IIz)2flRtbJ#kDtQkz`u;ufcp)r
zf%K>Kvp$5wE2}nbm0&i2Y<4VhJO!{yun<-WJZ_Jd!)jy>#q!THPXAe}^T*?>gQi<9
ztAeLm|3RztgUK9F2FtA7gjGVD?Fq6<Al>@1Ix)lAZCIUu5UZ*4DOLr1G^?9V5iI++
zo=RAqR|Tt<sDaf~O|D}>1FSM`h*e)T#p?CHS;ddH@nm&g0#+^X5>^?uv9=vn@!Mnd
zk|n+=b=k?2tQscSh+S;NuGa64rBa^PuzJZVqha>=2<xZV;}2S8INEYqoi`4v0#36W
z8=3?mpaW_4!2cVo_zP|P2dy$*WVx*T#aOk-Qp;sEDc{U$2jN>b!fLEeSY!QlSiSzu
zvd8a9xAC`NH5Lxo_zzlTbQrDzd}Qs%SmkppnLucIS@4;)C#*e*)rntV^^(=#Ictx9
zZT;`CO6Pm5n))Yu{EFp2TmL#%>HT7P@+|^-$tr<6)_>6IgnO3Dsz!fV8>!WY*MnB0
zJPTasWyPwd*{q+#`q5Zk$sPq1A*Z#uuqw#ISoQHE)-Q@xg2k<0()y*XEsIsnD_}Kf
zYhaa5EqlB+R$bQ6@+Mg2?@>SnXo@X}?GifRTJf&-csFai+vERc6~70^m2qzy??I~y
z^tI{q!$xZS53&(u6=AUT|II3cA@;be;t#`$54T)aEs<<}SrzDY>&q(s7;I?%DWI3E
z4ve+_gH~NJ6|TNd#VX^VjsJ$VY1qQ>&Gz`aSiNL(V-I3Aj859)Ut}YHmGn!1>^E4w
zWL1!J)|b`v`q}!jD#%T1?^-S^{-^aHv}yr|L{#tytj0+8>~{X=0O-U#SVhc-Re=g&
z^^(=JD~8RFt%+5<r?5Kj8S6ibRlyrz^^#SFjjS)L^O{=TEZH7t_JCDWx3s>juIoLm
zFRKLlU{$~YSY<E>tI<6Qs{(}6mF06_&l@)0Y-{I)<IN?Ymux=lCae-pw_H|zcgXq=
zTGjkxxH3FukISk8Uto3oD|`H`wO?aZ;B#0i(%JJZ0cH3-R(<j-Rtv~ItRmjW>h*6{
zE%BF)=jg73m#hlpwKf9l%^3Nf^VWawkkvl_cBia%?842L+U>u0$nLoN?;Y}g?~wm{
zhy33=<p16w|Mw0#bZ4xK=YQ{z|9gl0|MMO4EC1i$Ax{`u$eS^=P{jRy=IHc@Ch;-4
zAGfc_ZND^I+H%*5=Wms|KmS63o|)H-Sp0G@ZQszA_si}qxu9_JU)i@lKeS+>&BgML
zX_LNkK+E@D>f<T-=e%|82mEnjMz>AtOx76@`OL@}5lx&}b7)3HD|2v0L{?LNCZM_*
zIukHtCg7|<O;aWnP&ySbEfrA9oEA7GP-_;TwwW{wFmV>(sz6;+JqU;k0u}}V&zK(s
zE(^rJ0jO{0z5$r?2H+2Y2BuLOpkW$deHx&Vxhrr-pxtah6SI0YVAX6uRs)DPFBw2<
z1K1_-oC(YUM9l&8ngd8M+XS`>6rKxs!E~Do=sFj0RG@{)KM#;^9$@4=Kr3@d;GjVH
z`GA+q(D{HN^8sfC+L$s60HqfIrY!)pGp7Yk3DjB$=wK!-1Wa5AxGIonsxJb>EdnfD
z1n6Xb5V$N5zZj5Y<}L=zSq%6?po?j=1ki8^VEqz6H*;6ujzGJmfF5S`QoyREfUL^^
zz06C?0Iin+b_w(`f#rax<$zwx0sYK2fvp0CR{#c>ZYuy?R{)L*3^Msw0`jc{oLmVQ
zY>K`KI4CggO~6odTwutXfS9)c!_DZo0HxmoTof2-Dy;&X5=dJGNH*sMCawb1Ukw;-
zQda}wRs(Jcj4^fB04@uxTmu+qZV1d-18A`pFu^Qc3uw3&;9CcnWD?c^?g*p{Ofk-S
zz^ZkCr1gMlW|Khc^?*EY17?`Sw*gUa0}cqJn&=IHtpbBK0D@+pK-Ud`5*q<&rr$<D
zzKwvB0>%{G1UM)#ZWCaxIW90{6Ch?YV7?i>8BlsN;G)1nQ|TSRDS@<i0E^9efr;+`
z>c0zEYEs_?#Jvl+C9vGoO$S^SSeXu3X>JJ2Ne8sp0(i?T-2!O11>nm7tTqW5fI9-|
z0&9)46|gD;khB%B-fR+Ry%msW8(@P;+y;o+1~?$F$wY4lY!w)^9q^9XC(v~}pu`S9
zy6LwAkZ%Xzq(Fu#x)X3vVBAi?HgjBH$WB1aF2D{mdKaMdF2F^BU8d4*z$t;W-GDvj
zyuifWfckp?`%LN{K-?a{ErIt<-MxUz0xS0d4wxGPbM^vS>;rsgmhJ;I+z0Tz2RLLB
z-UHkbNEbL_oc95%-UB4P4>)Qz3ABD6kY_*Om`U6Zh}sW0AaLA79{_9>7<2&enb{}M
z^#Gv62Y{2N-v@wv9{^4Yd|`@y2skJ(?nA(7b6jA^hk%%afG^GHgMiWp0T%_%no5TN
zrv%at0lqQk1tuN>)ISV3Z&D8f;tm6D34Ckn9syhySa}3+(cBQ2a|F=hBf$4&=|_Nu
z9|3$v0Y8|8qkuaC=>mK&?_<EKqkyE30awi?fz}@b@*D&FY!Z(FqK*L$2;4Byp8&QB
z4EhA{tJx>e^%Fpe<A7VH-*G^`<A9R_znP++0uBm{`xJ2392Xe!DIn%E!0%@CXMob5
z0WJ#sVJe*foDxVo5z)l^SERXcBBG_4cmh)YBvBlbdXgw{CjqwvB23-S0ha|<eh%=N
z8v=7a2ekMC;5SRZ05tpp;5!8fn1oY+I|AtfS&VZUu<8^b=`<j#*(A{VG$79zKz5UO
z1`u@ya6lm1M1Kj`Dlq6vKrXXSpzD`_5?=xGn0{XY@_hw3DUjC`JqtJ}FzzfMzd0^2
z<SZcOYd}FW`fEVxuK^bY3Y$vb08R;{eFJ#ZoEMn*4WRxxKv9!=4iI+^a7&=Lse2x9
zSzzUPKnZh0V9t3!iwl5KX6Xe$!wUf4w}3Jx;ak8Rfpme#jq@E~)wh78?*Qe^CV|%9
z0rFe~JYf<q0-`Pg4hU2-(U$;Q1qNLLR5AMmx?Td5_#O~r`h5?`_dVdGK&&Zx8E{Zw
z++{#@b6jA^WkAdifSP9X4}j7?04@sDGL?P=oDxX;5m4Kl7nt}Xp#D#Qx+e7}K-^D&
zTLRCRx>o>~1y)`G)HgQ-=3D`^xC&@smR<!kybADL12i%T*8q0}(gm6r=V!pGYk;Jm
z0r6&&K<l3Yd9DMVGl|y$QP%+n1QJa24Zv1`K{o&|n0*3WZvaaC0%&3S{Q}7M3*e+c
zD^v7Wz(Ij=zXDz|#|4J`3W&K0Xk$j-1eCrBxG2!hRJsK?C6IOt(7~J+n0O0N|281e
zq}~R^-3Hte=w#~t2DmJ+@;5+|xgjv;H$aO!fG%d~9YDi70N-6eH<NG|a7Q3rpoekp
z0ao1wB;5n_GMfZi-vi|N9ni-l{tk%x9dJOPpNYN?*eWpSK45^^C(!jipu``5L8jjy
zfP8-dP6`Y*MgIgG6d3m>V5m7RFyv1_%wK@vX7pcx(tiOi3XDvv6iIX7r=>-5`;m4&
zvQ^r|NZP`|9c@w_4#zowTLNQDT`%CWz)CM*oVg(|#|vl?0hnNxMgST{0DO^vNhTo@
za7Q3rV2W{kfK`!zBp+a!*(A`~2gs8NFvBEf0z_p391ut~(SE>IfkA#i(CicF>IamF
z0;HLKQGk3=fRh5o6b%3l3XBT?=9=RILjr)9%z*i3bY?*5%z%pm3o|NZiQMpFaPP~J
zCP($i9A;hT$mSuhZO6!WvxXl6&NP7Mkusb|BL9lWsF)Pl(Qztdq;`%h?gZYP>^|C5
zA!ApU$WobogZMgT7RBu2HG9iOMw+$*BfrZZq8`3j!&{U?e6fy?CsNL0vu7mMiOleY
zGW@DvWK^C9BZi-v$}yqR@W_lx!+lwEXSqC0pHO%_PcHYFeoOti%<dV!(&owx-<;6L
z;`$h)SttSzEc2E~yW{$drMYG6U@C(?{O1e9q1W3sp1#RY*?tPO0j3>xeY#QAvduQ0
zJ`Ss9**i8KZn7uN!YwwUJ_RXmS%zhNvcdN#_>b3C%k+(dT1u7IHkb;iFZ%px*$x|z
zXYoSc(ZG0i!c<v(&U1y5d-bv4exORNPmg|4b$ESfPu3?=H!V8|QzkrB`1hyOhiyE4
zpmf@1e8k4n$7k<Yb`+*O3ZP;zT+b&uS0792v)J%=FOJ)j3&Bp?j6YLEe0}2hrDZ29
zdjxhCrv5z%Qznn1^ETco8?Oj#sb!}vD+)_qY2g_QiverV`TAt)OPgSE!u2#Dcztc-
zJx2Ih%f7L!1gx=T=V1Kvltj%f`_9HI1=IJncqMx-0@bXg(J~i$zPAy}z}DN7FWY!!
zVIQdzdHrbPJx=(jWj|R~4tB<}E0&dq@qMz;>uQM6{uOYURH4^38}SJ|eN?K~&z4mr
ze9f}!mhr_`&k{RWZ&=2c-#kk#)1MGf(tH!zv)r;@EvpJ!5&r1<riC%UH*LgQmQ{nT
zvFtWXt;IKIJ!>tyW8?9C-Owl27|&hH_y(Wnq%HJ4%lL|+=TFO$f47it8hR$#1n*nM
zm-;-DVH(7LSjJZ@J+*DTKVd2iUt{*vgoQ98Q8liODlla={T!GEW*t<~PUA?ICF^^c
zo@y5Q?a5EW;_S&$FlF)#s&3<Dw(;u0YFd`X#;Xr|(z2|UJqxR6S$4}Bz#8bgS$ahS
zRqBSQ84*?LoHk-3!q3~2bK7{0VXZC8V_6eeTgx7{tSPL$WqB=&hjp|pUoud&Ylga5
zSinYn4%XAMf;OI(<ldGQw($~R{VaO~Mz835$DRR}6|?bPfDN{+xMj&N0<&27n1y`Z
z-}8`VB`njliDgmHs#X%F{^ZM|o*I^wvGH2N^tCFjbY*S4mk2ked5dAo+juV%W~EH_
zlps*S!Zw7pREj+TQ_HkPpQ=i{D#7@tryD}6ome%13ez5aVdGVYsXIHMR(AcUVbARd
zYX{T9RNF`Y>*Pd~OK0$U+MfIh;nWae@LARgzlL2g>sj_H?5bU8>RXls`_-~%E$a;1
zWmyB5D%ZuFH@;lST?y_b`wG~`98!_GA@#6c@ivL>gvZ;N+sv{auvsuIMbBB*lkkf$
zEiuh4>qWRcOsh$PWxWZ<X4gfK*Yg(kAsk0Uy<V`aFX1<s-dbW_w5%WD@b^?&Sk@o*
zEAjMd2~!;hpx;SPD@<z}Zy@0pY`mA$32OU6sD*_u+la5}B+J@ZHW>D@Wo<1R0&8Pg
zJIjW`#xXqWVB1?ZjPN9wUL7nOuKGW0VMhx`z=p!=VG}JIN%$xFratx+%SI8trT*g8
z38tXZ+iBD5Y~!WCcEhw3b+K$T;rC#n_U~%p>%jNz$=xg)1AB!gYJlx-*;vAz)NH(Z
zz?AVg6tw5|w(-WpmLM%pePHU638<Bg*Uv}(N@pVK0Mz=_pNL9u5_-k5K{mn3uuk^m
z*DRX?OSf#WWm92sB>Wt9h-K3Ve{ACog{d&pRsUl^tz*M&#2JL|*oY%6n+ZEeSg(<m
zX@d5!Gkla~vtZ*a)B38)1yPbcHwCMV-#`t>qovyabsI5_@MP96y~bEJoA6jQhpau>
z5T0h)cpGmH>@TFXZGvTU2`f!4V-xMU^9bvFvB|K|7r*D@=+;25DfZ+AgmuHE^=>Lm
z`7K13ESq8DErR`E&z))6VpthFK2j}P0xJj8S~<(6w^ZY=C?|ISrrC(g2$!&Iwq?s<
zkK0U)Wh-FiESqE5N?1k9=34e9tOiVZ%(Lt*!t?2-j_UvU7On#3ri6*u1u*r~YIFtZ
zwaCU>L--nc1ucdtzqP2MU0|2nbJxMDTDH=jyB=1}vNy%Z-}5$#v+yk&aRaP|WveXP
z2z%19)s}67)wXPnWt(AjEL&^YJFpV4F4%RJy-PTmN09VPlV`n!>4bUcD8$~jYzu69
zX8z-~!Lkg(^;lZ<+GyEU!hazx*_$leM)(%1qn78*mTf0o(4Aq)o_8$V0gSMH_pW6-
zVYeB1TItd)+eP?y%eGjy8+MiiQ?MD9?IHZNn~7(uWqV=YShg+1X#ah{)4<W#?Ka|j
zgipa<$L_G~eZrk-nX%ZNmhC5;M!a#@T`-mZ0LpGN*=OT@0DBoW0sEe19}?cL`8Sck
z`xYJ~tmYTnZ`mQjA0xdESaz6jXPe0fmK}j5!L&+#2&0iaAEC%7k4KBzVH@u#VJ-Q3
zB_AQ6k**Am=nP&*ZNy`Q--c<y_}Iq#gz!ci?-R?8!yF2&Md(v|?x%#+1$upE*=K~+
zvRar<xGdRo0_R<|8?Tc#;z`1as72^=%RVREmP{67zp(5J!n(U#f<0x~DZ-;kZ#nj~
zWv2<}fvv!vvFr@tar$oXN&;V6_$6Uwyb66~*;j<KkcnPrVQQ_j=pmTahi`1WuL)mA
zS|83?_6^}1mYuik9R6*~E`%=<=K+nf@E@;lZNv+N>(h67eP`LXgrBwSqGjK~8d`SA
zvWu`rmVIy8C0I0t*1W%LS@QQd>O0NdA1u5~_%Ecn`=ez)5H7;t(%k*YvL6Zm!C27L
zy<*u<guk}~^C~Qpj-mOm{n%e&^n~XsTIgr}75vSfe2s7pA|AlrvFvBUD)oohyOyb$
zyAV&a;GSh_W-Vr#1;1PN3t`PBvHO<&N_Y!})<FJ4_kZfon<&G=zih-?FpXkK)gYZv
zzYSIKc{!H-MmQS>HBP*i-65O_rZEv=*<HeFRgH;A%kGiCr?c&MpM}4}Ua%~aW%prv
ztVu7wWq%M>*QvXrEc=u2546lr*nnlq^he7wTc+Cl1goovSu9jyS8c?HEc3#yS(X(>
zBY7fV%V6r)9H!C=-bO^*=spgqx6~UsEmK4MiuB55nIC^EX{q6JTNVY=YM_SCV_5*U
z*EaaWmSu)14>f#VmnDa0sLHQa&SxWPhUzP~_h9)g%L+?`sgVm<rrz5|VN|GsFpY@p
zgjE=&QP{@IL3lgy6#o&+y6SST5&hi`b7_~aSVrrWzL`$4z7ZXXrg3mO(%1T@q3LJ_
zs)#Bf?O#?w+OyOiWh~ORWOY;)J&wvDZA(6ev=ynRHu9ouC=&UQ9(byWo<wX-CWoFS
z`5i}ll6uZW52O5wZX!K5_9OZU{fw@o8%SG_+H$;wZX-R|qGeSN#GFFfW;}zwM0#jO
zkCA<X)ss8x(c5SP+N4K*HWSbuWD!&p6-SSulBg6ajkNWsXU6nEo3<R!AZ;^#jm{x$
zC0;-m(IvDHEk;X_wiK74<!A-cZsMD06`G=HRUyDTc~l8iMpaN%6pP|ebyNe@L{Flp
zP#shkJ&m40+Ip;ywB6VMHA32EY=WAi=a9A-6VUUhG}2>*#k9xRmO>N)6h@DrM^O<}
z6y*+>0;_#*CTpiJ8s$W}P;R7sYwc6(+xl0LcK)uT8_3YtbI^RW5G_L51=OzJGNhfp
z6=)^WX5MO~4LohwtwS5oMzo0ZmuL@UDFHoeG7GJsz$?*bWOM>)_fEIvx(%O$79!mR
z>oI{pkaqIg;cN3w8*_C~Jyah(i=IS&j_Y|OJuvq&s)L?E+Oc!8(NB6PN`G(gH>4f9
z7^F?PSfouiZL(=otrmI;)kbyE)94wb&9w%o5o&_sQ3BGw*$e1J)B?3ct&sN4UPf(D
zTRrgD4r!yT1JdSLB6<aNLP@9#>W+GvGHZRMl6B+qHNATdokthYx9B@`5nVzj&`IQQ
zns&IfqjisA@f7FQMs?6g>N^VQCR;bqGl-){+CD%ZqJ!uVdX{4iQ6p5-&&F3RR^Hb+
zpeF@~prNP}>VP_;7m%*fy1~)?jP6w?lepg5=}FY1=o^@Bvi0cd0W{TPF0AtvOFqNu
zRssGhqoOnFg1Vx|VP#MnL)V}==n(uE(&q-+CDUgG`fNa-1$>UQBc{&)v<uc6y@cAJ
zwx|QrrdKNE(EH=^_|>woa~Dft;*fT_W>Xl0=AwBfX1(wI<Wr2AWu&>3k+%}9L+fQ>
z>rny1FOu$PtahuWpj0#xwLu+G66%chlGX?4L!^h5GNWv$0;-5Ap%_#Ru~VgusbtSJ
zA}=SS1TuM(g6k2R)94KP5@}cJI?_&5ZyHS79(|E^H3pzHoV%9#tV4SGCZ2fB&~vCc
zN<hye?NGglv?<jJX(Q^TY|k-t323*eEoz6_qYfw$bwaPAB-9w?AwwU^g!HzlEhD2L
zYJ?i2CK;7B__{bwcayf!SBg(&w{7%2=e%cpn|w9-!b#mtzPvF<iT5Sfy06eO!pqSL
zv=Y@}B#y(5M-$K_qz#NIX4)oS@yxnE(fvrTNOOCWuNWWH=Gp9P<*YE>Hv0yfjhlS=
ziY?%<w*0mG@Ga6OE!s^eP4j98p{!#rZ1z>Ie1&*dk#6LlW@zY1@jj?8>WBKH0jM^5
z5-o@@&%fh)KKW}}LGN5=pmdshE832BqP=K8(qmeB<m(V|XOQ;_q-V<X?)En96kRn2
z+XM|qBhV1k4-G(lke*-cfgYx%+tC8EXqonYk9qW6Us}5a66nc2MGaIKWkC-iy$6e@
zSzDquXcZ^c!#<1B2+u|a%|Y|g0;I=!XP}uV70ohEx-W00K9sp{r0JdRD`4`a`yNZy
zJF0Z_GL6^<wMQLLN3;q)1+_-Hm(rUX-6`wNSodDKg{n^@Hb4!L-j_5%O;J3WipHXG
zXapLJY9Z}Eyu*8r2~i&NTe`1IU=S_x8tP`sZ1L4hzDhnNsCOduYmU}Z{)Ol#^7|I`
zqdWu9K=c~gL%Z!o`%pUC4b#W1x&hbinVzyrLb`u`4ke)Hk?x&apb1ESLf|raEul<5
zZSjq3cAXP%sKQ7$r8m(nw1k4ZPbRvz)eYw`q(5BH19e30Q7hCMy@Zxi(G^kV%?wt}
z+nn<o(%)HVi&l`~O7teu-&iP38|X9NtK^}NVD+i#B2<l4Pak;3qYdZ-(maLudmA2Y
zb7>c9F=~s(lEy@&55;Pta>O4Ducw>6`XuV3@cPtCA70f#O_4rNYL0rKAxO{vN29z*
zf1N^qFd&NXcbu=MoWDW(q@_C2rz>6YAIDZf+vp*^#d$D|iJW_m{5|_gs3E1+oAD;7
zEG0{&g!+)0k6J>XtbB~sryu&W7ct03SZ{UpHg+lcnVO$NIniFym_vL$F{w`&QYe5P
z)6^#mTc~|;tUgirk?<S3?YM#Tl%jU~e<5;H{8x~kOb(YgH>DlRF>TC`N6pc2Sc)06
z%{L~w2bCRw2BK!<{}+|@QmzP;Mp#?1+6kG579;JBUO?Ir)z0RlSZ!u%^HLj*wb4B4
zsEx)INPCOdIIkvke~V+csAnZq3$Zn4lDGTvJe@}Qn_4}MeG;i4ddl`D(pH-4_d0eI
z8j1#^fhZMzEW&)e-8ZUbb>>-T3f=`ZgiohZhZrFrA#LgCt<rm>yC3aF`nrSs_bt=g
zq_Z&Xxct+x=Hnf{hl}0k{00x4ueV4)bDrLn>wVvCkNI(jubT5LUnTYB_1=##)pq)t
zHP&g}C{7P_l<+RJ8|lrs-h1nvrrv8GL3_wrR@ta8#^8suJ>oHIcKQl<U(8~z?eujn
z6HZ5OC-shP1abBDQ19kcO}zuuJHAPLZ`JoijXNN{+0%Z~KBDHtSJpbU6VdbrZ-+g;
z6Psfv<>mF*eZ9XcnXH>&dNVXR8xSsp3L@PG6~N|0GYRL#>H?e#<wV(0Hk1`Tgf<W-
z3ag8=F4B?6K~v!#>|fYF(QJBBAG7P@_n_|B_1XMQ^aclX-PC=LKJ3?*0Certz0g{u
zG4>`}iF8d{jI``eMw8G)Gyz>B9WALWR-PqPSR1ZG@CPF;!@uBbN!HRF8(D-2K}5oy
zYWx?2ZUCxcuVb%8WR%_Gd##Mwc-fb)sFKXWk+6M=aGdp(O)Yc$n(xs(Pl9S9&6@6%
zCIMB?i2uQ79H)j^{fn<ka(@o#`tS^T1wD;aa80ths17=-)9A@W!iuMGJ!{1}q6U<x
z1NJ4<5X~n}1MIV?KJrtl*4Q_Q*9zMby`WZaPM{Iu?^Ai2Vw<4G)^CQ5N6(=I^gL>T
zUPSFER9n=Ja2xb8dYZ%=qPB$FBUu$zleRD6-l!YuiaMiCku0%_5U!PO&lOHW;Tm_b
zEbOZ$;rOb357gbp>1o5gu;KW+g;0F;mHK87VTNJI_nGxqe5ERn2aQ8x(P$LU;R%#E
zg>W(&i8T9kEgX&=7HJ+i?`vt=US%wd0w}UpAlbv%aCi*IUN>o1eUCef%)YC>T#2(F
zEs3=NJ0HzMeekDa=b|}iCBA0MY{bm)%*RhdI#;#Q1PP)i@l%n8mu9BYm}VGW#rYE7
zOV@l2d?GW<%4@z-zBdTE!!kkVrJ?^AmiP@xbDp{jsSL_bDa28uvG|eL7qL389O3M!
z6~4)+`?D{?354U%F!9$ZLv_>dy6^Ek3yIx;Sj(|XP%RWRo38r`hUSOf^@J<1lyG%(
z{<^PKR>f3VbWgV?G@Ame2~Jk_8NF_BA0M7Uig64bL<i7*^d8bWv<GcRZ==8LOY6=`
z{A-k6b5_fYX1H?Gu?vK^!8BepP83gRDb6I0Zza5%xEtL#$)QNP%m^yNX2QBH-sDCI
zCA5WbI(iqqgA^~EK{)Xp@c%9IiWFuiaVlYVVRxf>PAPY_-;1LJ)pzed5Dt&}4~%ou
z_eAoC9BM+|A7gb7a}*sys+4@$kI)e`oOoh8N%j+LZT$Wuf0^+2=n|5D8v7ag6dgyW
zP%h$rf&CnvL?;l(p9)2|i1Qu#8hzy+2qpd{;WOwg`Uagx=g_kh;9KkkbM>Y#Z?aC;
zX^L_UT}AQacLl2sR5^bntl_F@^b=CEXgY<5Xn4ehrULOboix=nwW?z^DmCpiB{rk$
z_&=kQ`g)_vC3x5#l-2Z7LuDnb5h-6|SR?;8Yk$WsK=+X5`dt)`bDwZQ&ez%yj;A!l
z6i?wl(ALN%ZqKNP8WUMPq)5tCT8xzF^GJ7iy3=b%OSC~Nh^Kuk4T>z-fQi5D%bPW`
zMOqzqn0}xbjmhxP;ixAE|H(%4pQ7c)hErEgnmiAiUAKKzcue5NZC@^DmGS-Ndo)>_
zGs7sRw%N3H=#D}=KaZlqNbeV8NbnKDr3gPkCgo9a{8;=8B>XK}1S<lIgH=G9%*F7<
zi(;>k#(bn*D80?7k9|g8!+4s2BGy6Lrg{>o<TX)s6o+C_CG-R;iL_Hx4wWWB?GWj%
zU%Nyl&|^rMD_$v78tGVhS>kIDr~no5Pv~RtY6R3#Rj`#&462HhXbo$1ycXdnIB_N#
zfK(F|M1`!2>LG*5kwH9GyDr+md;^UmW8JgOLQRlbOnYm8<));K2{b|)T0J<qze&I2
zE0y><Xe3hW55o>ZO0zR+hHjFE-avLF+y%8n%J)@NnWQ>ln<6!a;_H~o_6k-5@_AG1
zuJ6$@I;{oz7^Kr)B%FYHl5`LB9ARyyG&ke!vZ_CC_TBa6<?(~lcPXRtR=ORK?&e!#
zk6~M3+oN`<4bt8DOV}i=s`xTt51FaTdVi-60gocZ*PG5D8Bap(OyWIXmBPv*5os`K
z!0A@{@3Qi&fG?L%t&(I8-Sa)_^fy1;^OdS3q8%{pgsGCfP)`(YpCrQFk@C~qgRZ9T
z?|h&n_kR{g%_ZIgY4FSMO<1R^x^t1L-w(eAR?R$+@Pm^>-KgRydsR<ys!{#$BpLx{
zSkwqrvM&+T=R=VCPVF4--@$}mL*beBcYRFO`z#hi?ICq@GgIlluVAvyE=%^qu}W20
z=l_=?D%W#1=Lbhy3g?7Npj^W_Cc{Ue^00xNr&*z{(Wo2^x79R9?)##7u;DDlOCAT;
zs8%@?H#~~f#bePJr1Ugu)!k|$l}q_6-^nQ4bdw0H9uu)@>IvBJT2z(u)D)_RT2N&g
z?_=}-!3rdp(SNYBu9lsNrXr1Cb^jiu5jg{YI+}*W!qTx+n5IWK{sEZMP<-vXs+|0d
z<51bcvpxvd%+~Bz-KkTiP-Xj@@_+jB*3hvuq!r^j$LABCi{>G1A4z%_sP0vrTHhzY
z>&$|TQGfbga{NyFN)@V9sG9NhU%odZ{S_<3R;>`@F;gNlB{|j1jmS)!idN&e?p1Uj
zk=Nr%NqxTC=?)uqRPs8bs#K^{u|g&DzAsY)f0YVVDpjcDnGl^RQ$}<q|A4IKN-lo^
z9&YQ?$DiL6$?flIUaa7+YKmOV<TFovl_{&K^GT)xrpUwoC?|hLnTP%Jvla~hWL&rY
z)!r&N?QoLUX;1pqNH(YWrno;pPo&)~?oW5JnMx(_GMUHA`m69L(;tsvLNK0ZRgyVY
zF#N-B5BXOuYhU$)tt3T4F%_zM)|z)p_~Q$OpFsJz(B8~L7S8;V2vsXotWeqG+1uX~
zD(SE6-95lG#}*3zrktnE%uP#npX;Nfh*^c(mH}o_Nq;`?&jZZXlKzx}<r&tzHBX6n
zv041+DgH$^CU<yo=7m!JD*T$AnOMr-nZLOHb18p*?~d0@=F<KYo@km<n)<wER+gq@
z;oqiv@%zOs5;w29LMr5@KG-<aWGmy(#{+St%J{qRGjnDpZp^R4++P`Lb-a1S?JM#<
z9XdhHRwewqbg>bEd(GzTEb-3~pE+BGEVG;6%FuS9mW+2zelx4Azp8CxbFM6%XdBvX
zcGK|j{|DOmIA?@n<u`vm?(Z5tJEdGG>ily4c&D=Yp`5>p+3e3$HRDQo|09m~Qi^%#
z37YR_iYfVoziGknuitH0ofJHm=cbx3u0mzH%#+JZdxFwdHE%sZN{upZJ>lOM;msJ6
zv9*f-Q^z}OyqOx~&sQk?`*&*&HvIPL#JhDEqKu!)G@Ti5_Qv>|dRL7%*{YG{?(rF=
ztNEXf_P##F^lU(9Crr&)(!f79TcPl8!<8uaR^0xpJuZcsjFG|3=?qh+B~kCqFaulq
zoAQ|EzLpfKr1?_j8FQ;8J)Af*qiid`*Kr;)<y-sHy}eS+s1E*o=6-8`0q=-ZlkX);
zaWd6(mc5p0-hIiRQYie(dJ7^(1q-#=QkguNOUiTBEYtjDY8L)2zJxLTKWMzF%}HWV
zEydV0%Zz>5|FN6jd~>Z0End?E+ESJYY38Z6WYcf9nc9|0kC|=WZ0j!@HDk8>LwzPk
ze5O3+YFmFL?<ix6wDVW?jWYbelzF0;Kac4cl_|<R+r<BH#^iRS8THW|_a~&x^=+B*
znf>kkg}nXdnhWijA!Fvc<NmV}jk=sO-}VcYPOE`u`dm|y>i^vguXLap+%~DqldzjQ
zFpN9RHw8NSI~NN7sNJtKdl$cVW6JeV%U9Bj+&<qd=t#>So^L+sNNa?DpRejC4c0tT
zB_Y=9RMtwwjQnlB>H7-JT`1AtjE8f3B>M9=5C3Z4PfzV#Tx!%dcRp29+l7DE?_SO;
z1#@o6$#|jAaXJ$I<-heyd$c;z;;9><8da?j_a8YF@a|k>a=c1`!oSnEasAN8&ThRu
zp6INNO6bBO^CSf-6#gl|7r$sfbm*=pR}jN?v0LQIOvUA|_^T8O{Z=4r$V;n!`mo;8
zj|SVMXv?`v%rCFd3Ky4{lAUPv@Q(!M_;pN<ye0d@gp#bN>5{zE4D95e_jmFB@0pWk
zy;uF6y<3-?b+0m1_Ak%4_o}~$*L!0{MxieLMUHpMTV`)JdeF`>@0_>H^{)8gnY8*X
zQ@Xpqvgz5?U%>S3=5O{t&oE;faO9!xbi5n4sRqDnoZ}9F{N}yx{w;P%G_!gz)(V*Q
zJv1=ZnumM(%N8HJ*8P>VfdhJWdxa~}vy0EJS(bOl9d&zXW_q%kPCfney-Dk4_wtwZ
z4qRu-_44P78oAD07tJGWxbUR(@_*tqH3_}_k7s`AZTEN7HotAg_YSScWSBo(h9Z3^
zLpf8k4=ZDq46a{=9jAWAw7&iX$Gc;*IoFR)II!8|?(c6}DEw=GYo_(tG4D!hP-S8;
zQp!u4&4~Uq)cwsFv-|t2Io`YPn2!he=Q*`Ax()P4u;pud4I<NknJ|cqa+)17h0M>u
znD7q{?r3*((eVXKbI`ZCIx(QaKV3K?{z~uJ{<~j=j)Z1OZBy$t(raqk4EE<Q6#nVM
zE6Z0@To`|Ud1xGkQs|y;roKiMhNYXm*h1l7Q#45@N*<m5_7nf)wJ_ae8%z~8r<>A)
z=`T0w=HZ`XJhb7d?XSN0WD&1Zu>yAq)H(bEjd!yaOV3kh2~#*<hWk@||MyH5Z8iG`
zGXw{2Gv$V0?`<=0453)z-(b9Py~LhnRjM7OSTwAfcItL>VTeD)duFG3bttw?y16uz
zhRtI}52FDdGsoUw{n|K;YfMFRY?!}3Pj2TK?l0<{vd6>?r{-yUOwZx|e7Se>P+L~!
z+M;DSU)!*&+rzn?rF+br;r=2{xr}YY)!i5Nnu<$kfvbB>$&s9SXRnz$lPhqfNuC$Z
zD!-G%^qGWL*z6n0<*BU6K8ib#@UI_!lo}cMqWZa!Du49~vGidB(<FuHq2lJrq?T*B
z&&*6E`7Zm+x=~!w!@mhRVPd9kTgP6Q@z1&cR%G{Q9YeW?Q#GZN{m**`zh_1yb8T=l
z^rpOLI;SvZ!@n5$dE7I7#x|am@=xkZ-!mT*!~4#AX756l(W;|$HOY8xw11pqQ_E+r
zz3zYAiOJ|UMuXU`tgVY#G1edFZF#_aJ=R~jVEFeZ$JRbku<<7c8`uui7&ecOqXBB0
zk>j}wO8CHZ97pB5eqi1hN9HF#Fc-#Yp16m{d}vapQI?J4xyNu>#-HQ;an6Gcc=w=r
zej-=W|Fvq@h!O6qyr%qAfBuYRll<GAFso>K&7kALKRcQ2m&H@tl<zWua#v^WG4R}W
zEExWs$}e{}S^nMhu5F2+)t(8E+k7*H8rkl2+)S#4fA4b3@R2_}dhnr7Lh(aWG5ph;
z^D__LcBu1#WB(kXQASK<pv9TAss1YeK2pD$>aXFYdGbx8Q^UXB`N^erYwz^izL}&b
zvkK)lU}eR8cN&Xb4pVSCtzW{#OlOh3aMUcC&KPkkZ;PJKESW(k=Q71-62%Vsg5jUh
ze7NaDKfk+scxXntBifEVI~e|Bd_Su39sVKCTqlcFSg~pTZVJa-(2?q<ZmK{2f3%qS
zDwW)$O@~=bCpT^L!7Tp*JKD^Mpua$&@Q-(%IJs=y)S9JhlP1fcZWk!;=Ai#_xZM9b
zSqp}L)ARN0t>$!#51nqO=YQ0~G*9Eg6`r5Nj+-TE{&&6IJ~b_8W8JGkZd1hg$5+#@
zf9mdkUDK<r6Y?I}?p9J0KK#3)pFGlR?5szxX#m)~DC$>+K5^Fq(|QhTmd^~H<DYNq
z`geysJJ<iZ_r_=ZTohB~-e=~|xttbiqWs|s+LkIkhe;b@j?Uv2FkEnVV&^l>=F_l_
zIX>Ut#jXm4!oMwAZ1FGm`qy}B=RbWj{iNx=fW^<9(2R)%T-`67G}nOz!#`14>w~D$
zFGPKq?sdv?0njU_DZbD@x={GHN)t*|D4ssAP5yt<byt_p-f;T&PnxF}v5wp2xls7|
z{6~7_neqG6?ehN9T<&t5pTFEwZZXZ^*6#nZj!#|eU-tL<%_wiYgjo_i?fx+9p+LJ0
zKX$k>TuC#xW7r}-Z8k6Qzni%<-}csP)gse(slN_ydimIQ<5GV`=jA*L+#gdN8yEAD
zGbG!egZO13zMYUV^yr5BuMhb?CK*2(e|WFY>z(UTIZOEWfwx{OaWHrzs@qJC=iqqu
z4heZn&w2LKQ;XcJz8*TE#&Ul~jpb2WdYQV>fi0$NjzB5%%iySDrf<WjOy+uYz@O19
PXP{7Y#*yNIOKtuSezTfh

delta 32553
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
KJskMH&Hn)tql@DJ

diff --git a/components/AudioTrackSelector.tsx b/components/AudioTrackSelector.tsx
index f028fff7..2c17fe7e 100644
--- a/components/AudioTrackSelector.tsx
+++ b/components/AudioTrackSelector.tsx
@@ -1,15 +1,8 @@
+import { MediaSourceInfo } from "@jellyfin/sdk/lib/generated-client/models";
+import { useMemo } from "react";
 import { TouchableOpacity, View } from "react-native";
 import * as DropdownMenu from "zeego/dropdown-menu";
 import { Text } from "./common/Text";
-import { atom, useAtom } from "jotai";
-import {
-  BaseItemDto,
-  MediaSourceInfo,
-} from "@jellyfin/sdk/lib/generated-client/models";
-import { useEffect, useMemo } from "react";
-import { MediaStream } from "@jellyfin/sdk/lib/generated-client/models";
-import { tc } from "@/utils/textTools";
-import { useSettings } from "@/utils/atoms/settings";
 
 interface Props extends React.ComponentProps<typeof View> {
   source: MediaSourceInfo;
@@ -23,8 +16,6 @@ export const AudioTrackSelector: React.FC<Props> = ({
   selected,
   ...props
 }) => {
-  const [settings] = useSettings();
-
   const audioStreams = useMemo(
     () => source.MediaStreams?.filter((x) => x.Type === "Audio"),
     [source]
@@ -35,24 +26,6 @@ export const AudioTrackSelector: React.FC<Props> = ({
     [audioStreams, selected]
   );
 
-  useEffect(() => {
-    if (selected) return;
-    const defaultAudioIndex = audioStreams?.find(
-      (x) => x.Language === settings?.defaultAudioLanguage
-    )?.Index;
-    if (defaultAudioIndex !== undefined && defaultAudioIndex !== null) {
-      onChange(defaultAudioIndex);
-      return;
-    }
-    const index = source.DefaultAudioStreamIndex;
-    if (index !== undefined && index !== null) {
-      onChange(index);
-      return;
-    }
-
-    onChange(0);
-  }, [audioStreams, settings, source]);
-
   return (
     <View
       className="flex shrink"
diff --git a/components/BitrateSelector.tsx b/components/BitrateSelector.tsx
index 5e504cd0..78bcc63d 100644
--- a/components/BitrateSelector.tsx
+++ b/components/BitrateSelector.tsx
@@ -9,7 +9,7 @@ export type Bitrate = {
   height?: number;
 };
 
-const BITRATES: Bitrate[] = [
+export const BITRATES: Bitrate[] = [
   {
     key: "Max",
     value: undefined,
@@ -39,7 +39,7 @@ const BITRATES: Bitrate[] = [
     value: 250000,
     height: 480,
   },
-];
+].sort((a, b) => (b.value || Infinity) - (a.value || Infinity));
 
 interface Props extends React.ComponentProps<typeof View> {
   onChange: (value: Bitrate) => void;
diff --git a/components/DownloadItem.tsx b/components/DownloadItem.tsx
index e6c7617b..41a4ff26 100644
--- a/components/DownloadItem.tsx
+++ b/components/DownloadItem.tsx
@@ -17,12 +17,12 @@ import {
   BaseItemDto,
   MediaSourceInfo,
 } from "@jellyfin/sdk/lib/generated-client/models";
-import { router } from "expo-router";
+import { router, useFocusEffect } from "expo-router";
 import { useAtom } from "jotai";
 import { useCallback, useMemo, useRef, useState } from "react";
 import { Alert, TouchableOpacity, View, ViewProps } from "react-native";
 import { AudioTrackSelector } from "./AudioTrackSelector";
-import { Bitrate, BitrateSelector } from "./BitrateSelector";
+import { Bitrate, BITRATES, BitrateSelector } from "./BitrateSelector";
 import { Button } from "./Button";
 import { Text } from "./common/Text";
 import { Loader } from "./Loader";
@@ -31,6 +31,7 @@ import ProgressCircle from "./ProgressCircle";
 import { SubtitleTrackSelector } from "./SubtitleTrackSelector";
 import { toast } from "sonner-native";
 import iosFmp4 from "@/utils/profiles/iosFmp4";
+import { getDefaultPlaySettings } from "@/utils/jellyfin/getDefaultPlaySettings";
 
 interface DownloadProps extends ViewProps {
   item: BaseItemDto;
@@ -42,10 +43,11 @@ export const DownloadItem: React.FC<DownloadProps> = ({ item, ...props }) => {
   const [queue, setQueue] = useAtom(queueAtom);
   const [settings] = useSettings();
   const { processes, startBackgroundDownload } = useDownload();
-  const { startRemuxing, cancelRemuxing } = useRemuxHlsToMp4(item);
+  const { startRemuxing } = useRemuxHlsToMp4(item);
 
-  const [selectedMediaSource, setSelectedMediaSource] =
-    useState<MediaSourceInfo | null>(null);
+  const [selectedMediaSource, setSelectedMediaSource] = useState<
+    MediaSourceInfo | undefined
+  >(undefined);
   const [selectedAudioStream, setSelectedAudioStream] = useState<number>(-1);
   const [selectedSubtitleStream, setSelectedSubtitleStream] =
     useState<number>(0);
@@ -54,6 +56,20 @@ export const DownloadItem: React.FC<DownloadProps> = ({ item, ...props }) => {
     value: undefined,
   });
 
+  useFocusEffect(
+    useCallback(() => {
+      if (!settings) return;
+      const { bitrate, mediaSource, audioIndex, subtitleIndex } =
+        getDefaultPlaySettings(item, settings);
+
+      // 4. Set states
+      setSelectedMediaSource(mediaSource);
+      setSelectedAudioStream(audioIndex ?? 0);
+      setSelectedSubtitleStream(subtitleIndex ?? -1);
+      setMaxBitrate(bitrate);
+    }, [item, settings])
+  );
+
   const userCanDownload = useMemo(() => {
     return user?.Policy?.EnableContentDownloading;
   }, [user]);
diff --git a/components/ItemContent.tsx b/components/ItemContent.tsx
index 47147da4..4c3cc719 100644
--- a/components/ItemContent.tsx
+++ b/components/ItemContent.tsx
@@ -1,5 +1,9 @@
 import { AudioTrackSelector } from "@/components/AudioTrackSelector";
-import { Bitrate, BitrateSelector } from "@/components/BitrateSelector";
+import {
+  Bitrate,
+  BITRATES,
+  BitrateSelector,
+} from "@/components/BitrateSelector";
 import { DownloadItem } from "@/components/DownloadItem";
 import { OverviewText } from "@/components/OverviewText";
 import { ParallaxScrollView } from "@/components/ParallaxPage";
@@ -20,10 +24,16 @@ import {
   MediaSourceInfo,
 } from "@jellyfin/sdk/lib/generated-client/models";
 import { Image } from "expo-image";
-import { useNavigation } from "expo-router";
+import { useFocusEffect, 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,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import { View } from "react-native";
 import { useCastDevice } from "react-native-google-cast";
 import Animated from "react-native-reanimated";
@@ -32,13 +42,14 @@ import { Chromecast } from "./Chromecast";
 import { ItemHeader } from "./ItemHeader";
 import { MediaSourceSelector } from "./MediaSourceSelector";
 import { MoreMoviesWithActor } from "./MoreMoviesWithActor";
+import { useSettings } from "@/utils/atoms/settings";
+import { getDefaultPlaySettings } from "@/utils/jellyfin/getDefaultPlaySettings";
 
 export const ItemContent: React.FC<{ item: BaseItemDto }> = React.memo(
   ({ item }) => {
     const [api] = useAtom(apiAtom);
     const { setPlaySettings, playUrl, playSettings } = usePlaySettings();
-
-    const castDevice = useCastDevice();
+    const [settings] = useSettings();
     const navigation = useNavigation();
 
     const [loadingLogo, setLoadingLogo] = useState(true);
@@ -47,6 +58,22 @@ export const ItemContent: React.FC<{ item: BaseItemDto }> = React.memo(
       ScreenOrientation.Orientation.PORTRAIT_UP
     );
 
+    useFocusEffect(
+      useCallback(() => {
+        if (!settings) return;
+        const { bitrate, mediaSource, audioIndex, subtitleIndex } =
+          getDefaultPlaySettings(item, settings);
+
+        setPlaySettings({
+          item,
+          bitrate,
+          mediaSource,
+          audioIndex,
+          subtitleIndex,
+        });
+      }, [item, settings])
+    );
+
     const selectedMediaSource = useMemo(() => {
       return playSettings?.mediaSource || undefined;
     }, [playSettings?.mediaSource]);
@@ -62,7 +89,7 @@ export const ItemContent: React.FC<{ item: BaseItemDto }> = React.memo(
       return playSettings?.audioIndex;
     }, [playSettings?.audioIndex]);
 
-    const setSelectedAudioStream = (audioIndex: number | undefined) => {
+    const setSelectedAudioStream = (audioIndex: number) => {
       setPlaySettings((prev) => ({
         ...prev,
         audioIndex,
@@ -73,7 +100,7 @@ export const ItemContent: React.FC<{ item: BaseItemDto }> = React.memo(
       return playSettings?.subtitleIndex;
     }, [playSettings?.subtitleIndex]);
 
-    const setSelectedSubtitleStream = (subtitleIndex: number | undefined) => {
+    const setSelectedSubtitleStream = (subtitleIndex: number) => {
       setPlaySettings((prev) => ({
         ...prev,
         subtitleIndex,
@@ -128,15 +155,14 @@ export const ItemContent: React.FC<{ item: BaseItemDto }> = React.memo(
           ),
       });
 
-      setPlaySettings((prev) => ({
-        ...prev,
-        audioIndex: undefined,
-        subtitleIndex: undefined,
-        mediaSourceId: undefined,
-        bitrate: undefined,
-        mediaSource: item.MediaSources?.[0],
-        item,
-      }));
+      // setPlaySettings((prev) => ({
+      //   audioIndex: undefined,
+      //   subtitleIndex: undefined,
+      //   mediaSourceId: undefined,
+      //   bitrate: undefined,
+      //   mediaSource: item.MediaSources?.[0],
+      //   item,
+      // }));
     }, [item]);
 
     useEffect(() => {
diff --git a/components/OfflineVideoPlayer.tsx b/components/OfflineVideoPlayer.tsx
deleted file mode 100644
index d694dc3a..00000000
--- a/components/OfflineVideoPlayer.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import React, { useEffect, useRef } from "react";
-import Video, { VideoRef } from "react-native-video";
-
-type VideoPlayerProps = {
-  url: string;
-};
-
-export const OfflineVideoPlayer: React.FC<VideoPlayerProps> = ({ url }) => {
-  const videoRef = useRef<VideoRef | null>(null);
-
-  const onError = (error: any) => {
-    console.error("Video Error: ", error);
-  };
-
-  useEffect(() => {
-    if (videoRef.current) {
-      videoRef.current.resume();
-    }
-    setTimeout(() => {
-      if (videoRef.current) {
-        videoRef.current.presentFullscreenPlayer();
-      }
-    }, 500);
-  }, []);
-
-  return (
-    <Video
-      source={{
-        uri: url,
-        isNetwork: false,
-      }}
-      ref={videoRef}
-      onError={onError}
-      ignoreSilentSwitch="ignore"
-    />
-  );
-};
diff --git a/components/SubtitleTrackSelector.tsx b/components/SubtitleTrackSelector.tsx
index ce0f986c..23f2ebb2 100644
--- a/components/SubtitleTrackSelector.tsx
+++ b/components/SubtitleTrackSelector.tsx
@@ -1,15 +1,9 @@
+import { tc } from "@/utils/textTools";
+import { MediaSourceInfo } from "@jellyfin/sdk/lib/generated-client/models";
+import { useMemo } from "react";
 import { TouchableOpacity, View } from "react-native";
 import * as DropdownMenu from "zeego/dropdown-menu";
 import { Text } from "./common/Text";
-import { atom, useAtom } from "jotai";
-import {
-  BaseItemDto,
-  MediaSourceInfo,
-} from "@jellyfin/sdk/lib/generated-client/models";
-import { useEffect, useMemo } from "react";
-import { MediaStream } from "@jellyfin/sdk/lib/generated-client/models";
-import { tc } from "@/utils/textTools";
-import { useSettings } from "@/utils/atoms/settings";
 
 interface Props extends React.ComponentProps<typeof View> {
   source: MediaSourceInfo;
@@ -23,8 +17,6 @@ export const SubtitleTrackSelector: React.FC<Props> = ({
   selected,
   ...props
 }) => {
-  const [settings] = useSettings();
-
   const subtitleStreams = useMemo(
     () => source.MediaStreams?.filter((x) => x.Type === "Subtitle") ?? [],
     [source]
@@ -35,23 +27,6 @@ export const SubtitleTrackSelector: React.FC<Props> = ({
     [subtitleStreams, selected]
   );
 
-  useEffect(() => {
-    // const index = source.DefaultAudioStreamIndex;
-    // if (index !== undefined && index !== null) {
-    //   onChange(index);
-    //   return;
-    // }
-    const defaultSubIndex = subtitleStreams?.find(
-      (x) => x.Language === settings?.defaultSubtitleLanguage?.value
-    )?.Index;
-    if (defaultSubIndex !== undefined && defaultSubIndex !== null) {
-      onChange(defaultSubIndex);
-      return;
-    }
-
-    onChange(-1);
-  }, [subtitleStreams, settings]);
-
   if (subtitleStreams.length === 0) return null;
 
   return (
diff --git a/components/downloads/EpisodeCard.tsx b/components/downloads/EpisodeCard.tsx
index dc867516..3d95821c 100644
--- a/components/downloads/EpisodeCard.tsx
+++ b/components/downloads/EpisodeCard.tsx
@@ -76,10 +76,10 @@ export const EpisodeCard: React.FC<EpisodeCardProps> = ({ item }) => {
     <TouchableOpacity
       onPress={handleOpenFile}
       onLongPress={showActionSheet}
-      className="flex flex-col"
+      className="flex flex-col w-44 mr-2"
     >
       {base64Image ? (
-        <View className="w-44 aspect-video rounded-lg overflow-hidden mr-2">
+        <View className="w-44 aspect-video rounded-lg overflow-hidden">
           <Image
             source={{
               uri: `data:image/jpeg;base64,${base64Image}`,
@@ -92,7 +92,7 @@ export const EpisodeCard: React.FC<EpisodeCardProps> = ({ item }) => {
           />
         </View>
       ) : (
-        <View className="w-44 aspect-video rounded-lg bg-neutral-900 mr-2 flex items-center justify-center">
+        <View className="w-44 aspect-video rounded-lg bg-neutral-900 flex items-center justify-center">
           <Ionicons
             name="image-outline"
             size={24}
diff --git a/components/music/SongsListItem.tsx b/components/music/SongsListItem.tsx
index 8ad125af..367b763b 100644
--- a/components/music/SongsListItem.tsx
+++ b/components/music/SongsListItem.tsx
@@ -1,16 +1,12 @@
 import { Text } from "@/components/common/Text";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { usePlaySettings } from "@/providers/PlaySettingsProvider";
-import { getStreamUrl } from "@/utils/jellyfin/media/getStreamUrl";
-import { chromecastProfile } from "@/utils/profiles/chromecast";
-import ios from "@/utils/profiles/ios";
-import iosFmp4 from "@/utils/profiles/iosFmp4";
 import { runtimeTicksToSeconds } from "@/utils/time";
 import { useActionSheet } from "@expo/react-native-action-sheet";
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
-import { getMediaInfoApi } from "@jellyfin/sdk/lib/utils/api";
 import { useRouter } from "expo-router";
 import { useAtom } from "jotai";
+import { useCallback } from "react";
 import { TouchableOpacity, TouchableOpacityProps, View } from "react-native";
 import CastContext, {
   PlayServicesState,
@@ -72,32 +68,18 @@ export const SongsListItem: React.FC<Props> = ({
     );
   };
 
-  const play = async (type: "device" | "cast") => {
+  const play = useCallback(async (type: "device" | "cast") => {
     if (!user?.Id || !api || !item.Id) {
       console.warn("No user, api or item", user, api, item.Id);
       return;
     }
 
-    const response = await getMediaInfoApi(api!).getPlaybackInfo({
-      itemId: item?.Id,
-      userId: user?.Id,
-    });
-
-    const sessionData = response.data;
-
-    const data = await getStreamUrl({
-      api,
-      userId: user.Id,
+    const data = await setPlaySettings({
       item,
-      startTimeTicks: item?.UserData?.PlaybackPositionTicks || 0,
-      sessionData,
-      deviceProfile: castDevice?.deviceId ? chromecastProfile : iosFmp4,
-      mediaSourceId: item.Id,
     });
 
-    if (!data?.url || !item) {
-      console.warn("No url or item", data?.url, item.Id);
-      return;
+    if (!data?.url) {
+      throw new Error("play-music ~ No stream url");
     }
 
     if (type === "cast" && client) {
@@ -121,12 +103,9 @@ export const SongsListItem: React.FC<Props> = ({
       });
     } else {
       console.log("Playing on device", data.url, item.Id);
-      setPlaySettings({
-        item,
-      });
       router.push("/play-music");
     }
-  };
+  }, []);
 
   return (
     <TouchableOpacity
diff --git a/components/series/NextEpisodeButton.tsx b/components/series/NextItemButton.tsx
similarity index 83%
rename from components/series/NextEpisodeButton.tsx
rename to components/series/NextItemButton.tsx
index 11140fdd..02520c9a 100644
--- a/components/series/NextEpisodeButton.tsx
+++ b/components/series/NextItemButton.tsx
@@ -13,7 +13,7 @@ interface Props extends React.ComponentProps<typeof Button> {
   type?: "next" | "previous";
 }
 
-export const NextEpisodeButton: React.FC<Props> = ({
+export const NextItemButton: React.FC<Props> = ({
   item,
   type = "next",
   ...props
@@ -23,8 +23,8 @@ export const NextEpisodeButton: React.FC<Props> = ({
   const [user] = useAtom(userAtom);
   const [api] = useAtom(apiAtom);
 
-  const { data: nextEpisode } = useQuery({
-    queryKey: ["nextEpisode", item.Id, item.ParentId, type],
+  const { data: nextItem } = useQuery({
+    queryKey: ["nextItem", item.Id, item.ParentId, type],
     queryFn: async () => {
       if (
         !api ||
@@ -47,16 +47,16 @@ export const NextEpisodeButton: React.FC<Props> = ({
   });
 
   const disabled = useMemo(() => {
-    if (!nextEpisode) return true;
-    if (nextEpisode.Id === item.Id) return true;
+    if (!nextItem) return true;
+    if (nextItem.Id === item.Id) return true;
     return false;
-  }, [nextEpisode, type]);
+  }, [nextItem, type]);
 
   if (item.Type !== "Episode") return null;
 
   return (
     <Button
-      onPress={() => router.setParams({ id: nextEpisode?.Id })}
+      onPress={() => router.setParams({ id: nextItem?.Id })}
       className={`h-12 aspect-square`}
       disabled={disabled}
       {...props}
diff --git a/components/video-player/Controls.tsx b/components/video-player/Controls.tsx
index f888e48e..9cdf85f1 100644
--- a/components/video-player/Controls.tsx
+++ b/components/video-player/Controls.tsx
@@ -1,24 +1,17 @@
-import { useAdjacentEpisodes } from "@/hooks/useAdjacentEpisodes";
+import { useAdjacentItems } from "@/hooks/useAdjacentEpisodes";
 import { useCreditSkipper } from "@/hooks/useCreditSkipper";
 import { useIntroSkipper } from "@/hooks/useIntroSkipper";
 import { useTrickplay } from "@/hooks/useTrickplay";
-import { apiAtom } from "@/providers/JellyfinProvider";
+import { usePlaySettings } from "@/providers/PlaySettingsProvider";
 import { useSettings } from "@/utils/atoms/settings";
+import { getDefaultPlaySettings } from "@/utils/jellyfin/getDefaultPlaySettings";
 import { writeToLog } from "@/utils/log";
 import { formatTimeString, ticksToSeconds } from "@/utils/time";
 import { Ionicons } from "@expo/vector-icons";
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
 import { Image } from "expo-image";
-import { useRouter, useSegments } from "expo-router";
-import * as ScreenOrientation from "expo-screen-orientation";
-import { useAtom } from "jotai";
-import React, {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
+import { useRouter } from "expo-router";
+import React, { useCallback, useEffect, useRef, useState } from "react";
 import {
   Dimensions,
   Platform,
@@ -38,23 +31,22 @@ import Animated, {
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 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;
   videoRef: React.MutableRefObject<VideoRef | null>;
   isPlaying: boolean;
-  togglePlay: (ticks: number) => void;
   isSeeking: SharedValue<boolean>;
   cacheProgress: SharedValue<number>;
   progress: SharedValue<number>;
   isBuffering: boolean;
   showControls: boolean;
-  setShowControls: (shown: boolean) => void;
   ignoreSafeAreas?: boolean;
   setIgnoreSafeAreas: React.Dispatch<React.SetStateAction<boolean>>;
+  enableTrickplay?: boolean;
+  togglePlay: (ticks: number) => void;
+  setShowControls: (shown: boolean) => void;
 }
 
 export const Controls: React.FC<Props> = ({
@@ -70,13 +62,13 @@ export const Controls: React.FC<Props> = ({
   setShowControls,
   ignoreSafeAreas,
   setIgnoreSafeAreas,
+  enableTrickplay = true,
 }) => {
   const [settings] = useSettings();
   const router = useRouter();
-  const segments = useSegments();
   const insets = useSafeAreaInsets();
+  const { setPlaySettings } = usePlaySettings();
 
-  const screenDimensions = Dimensions.get("screen");
   const windowDimensions = Dimensions.get("window");
 
   const op = useSharedValue<number>(1);
@@ -117,9 +109,11 @@ export const Controls: React.FC<Props> = ({
     }
   }, [showControls, isBuffering]);
 
-  const { previousItem, nextItem } = useAdjacentEpisodes({ item });
-  const { trickPlayUrl, calculateTrickplayUrl, trickplayInfo } =
-    useTrickplay(item);
+  const { previousItem, nextItem } = useAdjacentItems({ item });
+  const { trickPlayUrl, calculateTrickplayUrl, trickplayInfo } = useTrickplay(
+    item,
+    enableTrickplay
+  );
 
   const [currentTime, setCurrentTime] = useState(0); // Seconds
   const [remainingTime, setRemainingTime] = useState(0); // Seconds
@@ -127,7 +121,7 @@ export const Controls: React.FC<Props> = ({
   const min = useSharedValue(0);
   const max = useSharedValue(item.RunTimeTicks || 0);
 
-  const from = useMemo(() => segments[2], [segments]);
+  const wasPlayingRef = useRef(false);
 
   const updateTimes = useCallback(
     (currentProgress: number, maxValue: number) => {
@@ -152,6 +146,40 @@ export const Controls: React.FC<Props> = ({
     videoRef
   );
 
+  const goToPreviousItem = useCallback(() => {
+    if (!previousItem || !settings) return;
+
+    const { bitrate, mediaSource, audioIndex, subtitleIndex } =
+      getDefaultPlaySettings(previousItem, settings);
+
+    setPlaySettings({
+      item: previousItem,
+      bitrate,
+      mediaSource,
+      audioIndex,
+      subtitleIndex,
+    });
+
+    router.replace("/play-video");
+  }, [previousItem, settings]);
+
+  const goToNextItem = useCallback(() => {
+    if (!nextItem || !settings) return;
+
+    const { bitrate, mediaSource, audioIndex, subtitleIndex } =
+      getDefaultPlaySettings(nextItem, settings);
+
+    setPlaySettings({
+      item: nextItem,
+      bitrate,
+      mediaSource,
+      audioIndex,
+      subtitleIndex,
+    });
+
+    router.replace("/play-video");
+  }, [nextItem, settings]);
+
   useAnimatedReaction(
     () => ({
       progress: progress.value,
@@ -175,14 +203,12 @@ export const Controls: React.FC<Props> = ({
 
   const toggleControls = () => setShowControls(!showControls);
 
-  const handleSliderComplete = (value: number) => {
+  const handleSliderComplete = useCallback((value: number) => {
     progress.value = value;
     isSeeking.value = false;
-    videoRef.current?.seek(value / 10000000);
-    setTimeout(() => {
-      videoRef.current?.resume();
-    }, 200);
-  };
+    videoRef.current?.seek(Math.max(0, Math.floor(value / 10000000)));
+    if (wasPlayingRef.current === true) videoRef.current?.resume();
+  }, []);
 
   const handleSliderChange = (value: number) => {
     calculateTrickplayUrl(value);
@@ -190,52 +216,44 @@ export const Controls: React.FC<Props> = ({
 
   const handleSliderStart = useCallback(() => {
     if (showControls === false) return;
+    wasPlayingRef.current = isPlaying;
+    videoRef.current?.pause();
     isSeeking.value = true;
-  }, [showControls]);
+  }, [showControls, isPlaying]);
 
   const handleSkipBackward = useCallback(async () => {
-    if (!settings) return;
+    console.log("handleSkipBackward");
+    if (!settings?.rewindSkipTime) return;
+    wasPlayingRef.current = isPlaying;
     try {
       const curr = await videoRef.current?.getCurrentPosition();
       if (curr !== undefined) {
         videoRef.current?.seek(Math.max(0, curr - settings.rewindSkipTime));
         setTimeout(() => {
-          videoRef.current?.resume();
-        }, 200);
+          if (wasPlayingRef.current === true) videoRef.current?.resume();
+        }, 10);
       }
     } catch (error) {
       writeToLog("ERROR", "Error seeking video backwards", error);
     }
-  }, [settings]);
+  }, [settings, isPlaying]);
 
   const handleSkipForward = useCallback(async () => {
-    if (!settings) return;
+    console.log("handleSkipForward");
+    if (!settings?.forwardSkipTime) return;
+    wasPlayingRef.current = isPlaying;
     try {
       const curr = await videoRef.current?.getCurrentPosition();
       if (curr !== undefined) {
         videoRef.current?.seek(Math.max(0, curr + settings.forwardSkipTime));
         setTimeout(() => {
-          videoRef.current?.resume();
-        }, 200);
+          if (wasPlayingRef.current === true) videoRef.current?.resume();
+        }, 10);
       }
     } catch (error) {
       writeToLog("ERROR", "Error seeking video forwards", error);
     }
-  }, [settings]);
-
-  const handleGoToPreviousItem = useCallback(() => {
-    if (!previousItem || !from) return;
-    const url = itemRouter(previousItem, from);
-    // @ts-ignore
-    router.push(url);
-  }, [previousItem, from, router]);
-
-  const handleGoToNextItem = useCallback(() => {
-    if (!nextItem || !from) return;
-    const url = itemRouter(nextItem, from);
-    // @ts-ignore
-    router.push(url);
-  }, [nextItem, from, router]);
+  }, [settings, isPlaying]);
 
   const toggleIgnoreSafeAreas = useCallback(() => {
     setIgnoreSafeAreas((prev) => !prev);
@@ -395,7 +413,7 @@ export const Controls: React.FC<Props> = ({
               style={{
                 opacity: !previousItem ? 0.5 : 1,
               }}
-              onPress={handleGoToPreviousItem}
+              onPress={goToPreviousItem}
             >
               <Ionicons name="play-skip-back" size={24} color="white" />
             </TouchableOpacity>
@@ -427,7 +445,7 @@ export const Controls: React.FC<Props> = ({
               style={{
                 opacity: !nextItem ? 0.5 : 1,
               }}
-              onPress={handleGoToNextItem}
+              onPress={goToNextItem}
             >
               <Ionicons name="play-skip-forward" size={24} color="white" />
             </TouchableOpacity>
diff --git a/constants/Colors.ts b/constants/Colors.ts
index 82e999a7..69734810 100644
--- a/constants/Colors.ts
+++ b/constants/Colors.ts
@@ -1,16 +1,8 @@
-/**
- * Below are the colors that are used in the app. The colors are defined in the light and dark mode.
- * There are many other ways to style your app. For example, [Nativewind](https://www.nativewind.dev/), [Tamagui](https://tamagui.dev/), [unistyles](https://reactnativeunistyles.vercel.app), etc.
- */
-
-const tintColorLight = "#0a7ea4";
-const tintColorDark = "#fff";
-
 export const Colors = {
   primary: "#9334E9",
   text: "#ECEDEE",
   background: "#151718",
-  tint: tintColorDark,
+  tint: "#fff",
   icon: "#9BA1A6",
   tabIconDefault: "#9BA1A6",
   tabIconSelected: "#9333ea",
diff --git a/hooks/useAdjacentEpisodes.ts b/hooks/useAdjacentEpisodes.ts
index 4c5e46f0..90b50b21 100644
--- a/hooks/useAdjacentEpisodes.ts
+++ b/hooks/useAdjacentEpisodes.ts
@@ -1,64 +1,98 @@
-import { Api } from "@jellyfin/sdk";
-import { getItemsApi } from "@jellyfin/sdk/lib/utils/api/items-api";
-import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
-import { useQuery } from "@tanstack/react-query";
-import { useAtom } from "jotai";
+import index from "@/app/(auth)/(tabs)/(home)";
 import { apiAtom } from "@/providers/JellyfinProvider";
+import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
+import { getItemsApi } from "@jellyfin/sdk/lib/utils/api/items-api";
+import { useQuery } from "@tanstack/react-query";
+import { useAtomValue } from "jotai";
 
 interface AdjacentEpisodesProps {
   item?: BaseItemDto | null;
 }
 
-export const useAdjacentEpisodes = ({ item }: AdjacentEpisodesProps) => {
-  const [api] = useAtom(apiAtom);
+export const useAdjacentItems = ({ item }: AdjacentEpisodesProps) => {
+  const api = useAtomValue(apiAtom);
 
   const { data: previousItem } = useQuery({
-    queryKey: ["previousItem", item?.ParentId, item?.IndexNumber],
+    queryKey: ["previousItem", item?.Id, item?.ParentId, item?.IndexNumber],
     queryFn: async (): Promise<BaseItemDto | null> => {
+      const parentId = item?.AlbumId || item?.ParentId;
+      const indexNumber = item?.IndexNumber;
+
+      console.log("Getting previous item for " + indexNumber);
       if (
         !api ||
-        !item?.ParentId ||
-        item?.IndexNumber === undefined ||
-        item?.IndexNumber === null ||
-        item?.IndexNumber - 2 < 0
+        !parentId ||
+        indexNumber === undefined ||
+        indexNumber === null ||
+        indexNumber - 1 < 1
       ) {
-        console.log("No previous item");
+        console.log("No previous item", {
+          itemIndex: indexNumber,
+          itemId: item?.Id,
+          parentId: parentId,
+          indexNumber: indexNumber,
+        });
         return null;
       }
 
+      const newIndexNumber = indexNumber - 2;
+
       const res = await getItemsApi(api).getItems({
-        parentId: item.ParentId!,
-        startIndex: item.IndexNumber! - 2,
+        parentId: parentId!,
+        startIndex: newIndexNumber,
         limit: 1,
+        sortBy: ["IndexNumber"],
+        includeItemTypes: ["Episode", "Audio"],
+        fields: ["MediaSources", "MediaStreams", "ParentId"],
       });
 
+      if (res.data.Items?.[0]?.IndexNumber !== indexNumber - 1) {
+        throw new Error("Previous item is not correct");
+      }
+
       return res.data.Items?.[0] || null;
     },
-    enabled: item?.Type === "Episode",
+    enabled: item?.Type === "Episode" || item?.Type === "Audio",
+    staleTime: 0,
   });
 
   const { data: nextItem } = useQuery({
-    queryKey: ["nextItem", item?.ParentId, item?.IndexNumber],
+    queryKey: ["nextItem", item?.Id, item?.ParentId, item?.IndexNumber],
     queryFn: async (): Promise<BaseItemDto | null> => {
+      const parentId = item?.AlbumId || item?.ParentId;
+      const indexNumber = item?.IndexNumber;
+
       if (
         !api ||
-        !item?.ParentId ||
-        item?.IndexNumber === undefined ||
-        item?.IndexNumber === null
+        !parentId ||
+        indexNumber === undefined ||
+        indexNumber === null
       ) {
-        console.log("No next item");
+        console.log("No next item", {
+          itemId: item?.Id,
+          parentId: parentId,
+          indexNumber: indexNumber,
+        });
         return null;
       }
 
       const res = await getItemsApi(api).getItems({
-        parentId: item.ParentId!,
-        startIndex: item.IndexNumber!,
+        parentId: parentId!,
+        startIndex: indexNumber,
+        sortBy: ["IndexNumber"],
         limit: 1,
+        includeItemTypes: ["Episode", "Audio"],
+        fields: ["MediaSources", "MediaStreams", "ParentId"],
       });
 
+      if (res.data.Items?.[0]?.IndexNumber !== indexNumber + 1) {
+        throw new Error("Previous item is not correct");
+      }
+
       return res.data.Items?.[0] || null;
     },
-    enabled: item?.Type === "Episode",
+    enabled: item?.Type === "Episode" || item?.Type === "Audio",
+    staleTime: 0,
   });
 
   return { previousItem, nextItem };
diff --git a/hooks/useAndroidNavigationBar.ts b/hooks/useAndroidNavigationBar.ts
new file mode 100644
index 00000000..d8c55802
--- /dev/null
+++ b/hooks/useAndroidNavigationBar.ts
@@ -0,0 +1,17 @@
+import * as NavigationBar from "expo-navigation-bar";
+import { useEffect } from "react";
+import { Platform } from "react-native";
+
+export const useAndroidNavigationBar = () => {
+  useEffect(() => {
+    if (Platform.OS === "android") {
+      NavigationBar.setVisibilityAsync("hidden");
+      NavigationBar.setBehaviorAsync("overlay-swipe");
+
+      return () => {
+        NavigationBar.setVisibilityAsync("visible");
+        NavigationBar.setBehaviorAsync("inset-swipe");
+      };
+    }
+  }, []);
+};
diff --git a/hooks/useCreditSkipper.ts b/hooks/useCreditSkipper.ts
index 670784e2..e7d71ba6 100644
--- a/hooks/useCreditSkipper.ts
+++ b/hooks/useCreditSkipper.ts
@@ -61,6 +61,7 @@ export const useCreditSkipper = (
   }, [creditTimestamps, currentTime]);
 
   const skipCredit = useCallback(() => {
+    console.log("skipCredits");
     if (!creditTimestamps || !videoRef.current) return;
     try {
       videoRef.current.seek(creditTimestamps.Credits.End);
diff --git a/hooks/useDownloadedFileOpener.ts b/hooks/useDownloadedFileOpener.ts
index 4c60e8c2..29aa7c56 100644
--- a/hooks/useDownloadedFileOpener.ts
+++ b/hooks/useDownloadedFileOpener.ts
@@ -1,6 +1,7 @@
 // hooks/useFileOpener.ts
 
 import { usePlaySettings } from "@/providers/PlaySettingsProvider";
+import { writeToLog } from "@/utils/log";
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
 import * as FileSystem from "expo-file-system";
 import { useRouter } from "expo-router";
@@ -42,8 +43,8 @@ export const useFileOpener = () => {
 
       router.push("/play-offline-video");
     } catch (error) {
+      writeToLog("ERROR", "Error opening file", error);
       console.error("Error opening file:", error);
-      // Handle the error appropriately, e.g., show an error message to the user
     }
   }, []);
 
diff --git a/hooks/useIntroSkipper.ts b/hooks/useIntroSkipper.ts
index 68e7a760..43d1699a 100644
--- a/hooks/useIntroSkipper.ts
+++ b/hooks/useIntroSkipper.ts
@@ -57,6 +57,7 @@ export const useIntroSkipper = (
   }, [introTimestamps, currentTime]);
 
   const skipIntro = useCallback(() => {
+    console.log("skipIntro");
     if (!introTimestamps || !videoRef.current) return;
     try {
       videoRef.current.seek(introTimestamps.IntroEnd);
diff --git a/hooks/useOrientation.ts b/hooks/useOrientation.ts
new file mode 100644
index 00000000..bfca1aab
--- /dev/null
+++ b/hooks/useOrientation.ts
@@ -0,0 +1,28 @@
+import orientationToOrientationLock from "@/utils/OrientationLockConverter";
+import * as ScreenOrientation from "expo-screen-orientation";
+import { useEffect, useState } from "react";
+
+export const useOrientation = () => {
+  const [orientation, setOrientation] = useState(
+    ScreenOrientation.OrientationLock.UNKNOWN
+  );
+
+  useEffect(() => {
+    const orientationSubscription =
+      ScreenOrientation.addOrientationChangeListener((event) => {
+        setOrientation(
+          orientationToOrientationLock(event.orientationInfo.orientation)
+        );
+      });
+
+    ScreenOrientation.getOrientationAsync().then((orientation) => {
+      setOrientation(orientationToOrientationLock(orientation));
+    });
+
+    return () => {
+      orientationSubscription.remove();
+    };
+  }, []);
+
+  return { orientation };
+};
diff --git a/hooks/useOrientationSettings.ts b/hooks/useOrientationSettings.ts
new file mode 100644
index 00000000..85b8a113
--- /dev/null
+++ b/hooks/useOrientationSettings.ts
@@ -0,0 +1,25 @@
+import { useSettings } from "@/utils/atoms/settings";
+import * as ScreenOrientation from "expo-screen-orientation";
+import { useEffect } from "react";
+
+export const useOrientationSettings = () => {
+  const [settings] = useSettings();
+
+  useEffect(() => {
+    if (settings?.autoRotate) {
+      // Don't need to do anything
+    } else if (settings?.defaultVideoOrientation) {
+      ScreenOrientation.lockAsync(settings.defaultVideoOrientation);
+    }
+
+    return () => {
+      if (settings?.autoRotate) {
+        ScreenOrientation.unlockAsync();
+      } else {
+        ScreenOrientation.lockAsync(
+          ScreenOrientation.OrientationLock.PORTRAIT_UP
+        );
+      }
+    };
+  }, [settings]);
+};
diff --git a/hooks/useRemuxHlsToMp4.ts b/hooks/useRemuxHlsToMp4.ts
index 091325fb..785e4f08 100644
--- a/hooks/useRemuxHlsToMp4.ts
+++ b/hooks/useRemuxHlsToMp4.ts
@@ -1,5 +1,5 @@
 import { useCallback } from "react";
-import { useAtom } from "jotai";
+import { useAtom, useAtomValue } from "jotai";
 import AsyncStorage from "@react-native-async-storage/async-storage";
 import * as FileSystem from "expo-file-system";
 import { FFmpegKit, FFmpegKitConfig } from "ffmpeg-kit-react-native";
@@ -10,6 +10,9 @@ import { toast } from "sonner-native";
 import { useDownload } from "@/providers/DownloadProvider";
 import { useRouter } from "expo-router";
 import { JobStatus } from "@/utils/optimize-server";
+import useImageStorage from "./useImageStorage";
+import { getItemImage } from "@/utils/getItemImage";
+import { apiAtom } from "@/providers/JellyfinProvider";
 
 /**
  * Custom hook for remuxing HLS to MP4 using FFmpeg.
@@ -19,9 +22,12 @@ import { JobStatus } from "@/utils/optimize-server";
  * @returns An object with remuxing-related functions
  */
 export const useRemuxHlsToMp4 = (item: BaseItemDto) => {
+  const api = useAtomValue(apiAtom);
   const queryClient = useQueryClient();
   const { saveDownloadedItemInfo, setProcesses } = useDownload();
   const router = useRouter();
+  const { loadImage, saveImage, image2Base64, saveBase64Image } =
+    useImageStorage();
 
   if (!item.Id || !item.Name) {
     writeToLog("ERROR", "useRemuxHlsToMp4 ~ missing arguments");
@@ -32,8 +38,19 @@ export const useRemuxHlsToMp4 = (item: BaseItemDto) => {
 
   const startRemuxing = useCallback(
     async (url: string) => {
+      if (!api) throw new Error("API is not defined");
       if (!item.Id) throw new Error("Item must have an Id");
 
+      const itemImage = getItemImage({
+        item,
+        api,
+        variant: "Primary",
+        quality: 90,
+        width: 500,
+      });
+
+      await saveImage(item.Id, itemImage?.uri);
+
       toast.success(`Download started for ${item.Name}`, {
         action: {
           label: "Go to download",
diff --git a/hooks/useTrickplay.ts b/hooks/useTrickplay.ts
index f1e61b8d..6033420b 100644
--- a/hooks/useTrickplay.ts
+++ b/hooks/useTrickplay.ts
@@ -26,14 +26,14 @@ interface TrickplayUrl {
   url: string;
 }
 
-export const useTrickplay = (item: BaseItemDto) => {
+export const useTrickplay = (item: BaseItemDto, enabled = true) => {
   const [api] = useAtom(apiAtom);
   const [trickPlayUrl, setTrickPlayUrl] = useState<TrickplayUrl | null>(null);
   const lastCalculationTime = useRef(0);
   const throttleDelay = 200; // 200ms throttle
 
   const trickplayInfo = useMemo(() => {
-    if (!item.Id || !item.Trickplay) {
+    if (!enabled || !item.Id || !item.Trickplay) {
       return null;
     }
 
@@ -55,10 +55,14 @@ export const useTrickplay = (item: BaseItemDto) => {
           data: trickplayData[firstResolution],
         }
       : null;
-  }, [item]);
+  }, [item, enabled]);
 
   const calculateTrickplayUrl = useCallback(
     (progress: number) => {
+      if (!enabled) {
+        return null;
+      }
+
       const now = Date.now();
       if (now - lastCalculationTime.current < throttleDelay) {
         return null;
@@ -97,8 +101,12 @@ export const useTrickplay = (item: BaseItemDto) => {
       setTrickPlayUrl(newTrickPlayUrl);
       return newTrickPlayUrl;
     },
-    [trickplayInfo, item, api]
+    [trickplayInfo, item, api, enabled]
   );
 
-  return { trickPlayUrl, calculateTrickplayUrl, trickplayInfo };
+  return {
+    trickPlayUrl: enabled ? trickPlayUrl : null,
+    calculateTrickplayUrl: enabled ? calculateTrickplayUrl : () => null,
+    trickplayInfo: enabled ? trickplayInfo : null,
+  };
 };
diff --git a/package.json b/package.json
index f134386a..619a8299 100644
--- a/package.json
+++ b/package.json
@@ -64,22 +64,22 @@
     "nativewind": "^2.0.11",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-native": "~0.75.0",
+    "react-native": "0.74.5",
     "react-native-awesome-slider": "^2.5.3",
     "react-native-circular-progress": "^1.4.0",
     "react-native-compressor": "^1.8.25",
-    "react-native-gesture-handler": "~2.18.1",
+    "react-native-gesture-handler": "~2.16.1",
     "react-native-get-random-values": "^1.11.0",
     "react-native-google-cast": "^4.8.3",
     "react-native-image-colors": "^2.4.0",
     "react-native-ios-context-menu": "^2.5.1",
     "react-native-ios-utilities": "^4.4.5",
     "react-native-mmkv": "^2.12.2",
-    "react-native-pager-view": "^6.4.1",
-    "react-native-reanimated": "~3.15.0",
+    "react-native-pager-view": "6.3.0",
+    "react-native-reanimated": "~3.10.1",
     "react-native-reanimated-carousel": "4.0.0-canary.15",
     "react-native-safe-area-context": "4.10.5",
-    "react-native-screens": "~3.34.0",
+    "react-native-screens": "3.31.1",
     "react-native-svg": "15.2.0",
     "react-native-tab-view": "^3.5.2",
     "react-native-url-polyfill": "^2.0.0",
@@ -103,15 +103,5 @@
     "react-test-renderer": "18.2.0",
     "typescript": "~5.3.3"
   },
-  "private": true,
-  "expo": {
-    "install": {
-      "exclude": [
-        "react-native@~0.74.0",
-        "react-native-reanimated@~3.10.0",
-        "react-native-gesture-handler@~2.16.1",
-        "react-native-screens@~3.31.1"
-      ]
-    }
-  }
+  "private": true
 }
diff --git a/providers/DownloadProvider.tsx b/providers/DownloadProvider.tsx
index 1e342994..5e6ca8e9 100644
--- a/providers/DownloadProvider.tsx
+++ b/providers/DownloadProvider.tsx
@@ -345,6 +345,7 @@ function useDownloadProvider() {
           },
         });
       } catch (error) {
+        writeToLog("ERROR", "Error in startBackgroundDownload", error);
         console.error("Error in startBackgroundDownload:", error);
         if (axios.isAxiosError(error)) {
           console.error("Axios error details:", {
diff --git a/providers/PlaySettingsProvider.tsx b/providers/PlaySettingsProvider.tsx
index 2654c52b..aef28a13 100644
--- a/providers/PlaySettingsProvider.tsx
+++ b/providers/PlaySettingsProvider.tsx
@@ -8,7 +8,7 @@ import {
   BaseItemDto,
   MediaSourceInfo,
 } from "@jellyfin/sdk/lib/generated-client";
-import { getPlaystateApi, getSessionApi } from "@jellyfin/sdk/lib/utils/api";
+import { getSessionApi } from "@jellyfin/sdk/lib/utils/api";
 import { useAtomValue } from "jotai";
 import React, {
   createContext,
@@ -17,7 +17,8 @@ import React, {
   useEffect,
   useState,
 } from "react";
-import { apiAtom, getOrSetDeviceId, userAtom } from "./JellyfinProvider";
+import { apiAtom, userAtom } from "./JellyfinProvider";
+import iosFmp4 from "@/utils/profiles/iosFmp4";
 
 export type PlaybackType = {
   item?: BaseItemDto | null;
@@ -29,11 +30,17 @@ export type PlaybackType = {
 
 type PlaySettingsContextType = {
   playSettings: PlaybackType | null;
-  setPlaySettings: React.Dispatch<React.SetStateAction<PlaybackType | null>>;
+  setPlaySettings: (
+    dataOrUpdater:
+      | PlaybackType
+      | null
+      | ((prev: PlaybackType | null) => PlaybackType | null)
+  ) => Promise<{ url: string | null; sessionId: string | null } | null>;
   playUrl?: string | null;
   setPlayUrl: React.Dispatch<React.SetStateAction<string | null>>;
   playSessionId?: string | null;
   setOfflineSettings: (data: PlaybackType) => void;
+  setMusicPlaySettings: (item: BaseItemDto, url: string) => void;
 };
 
 const PlaySettingsContext = createContext<PlaySettingsContextType | undefined>(
@@ -55,52 +62,69 @@ export const PlaySettingsProvider: React.FC<{ children: React.ReactNode }> = ({
     _setPlaySettings(data);
   }, []);
 
+  const setMusicPlaySettings = (item: BaseItemDto, url: string) => {
+    setPlaySettings({
+      item: item,
+    });
+    setPlayUrl(url);
+  };
+
   const setPlaySettings = useCallback(
     async (
       dataOrUpdater:
         | PlaybackType
         | null
         | ((prev: PlaybackType | null) => PlaybackType | null)
-    ) => {
-      _setPlaySettings((prevSettings) => {
-        const newSettings =
-          typeof dataOrUpdater === "function"
-            ? dataOrUpdater(prevSettings)
-            : dataOrUpdater;
+    ): Promise<{ url: string | null; sessionId: string | null } | null> => {
+      if (!api || !user || !settings) {
+        _setPlaySettings(null);
+        return null;
+      }
 
-        if (!api || !user || !settings || newSettings === null) {
-          return newSettings;
-        }
+      const newSettings =
+        typeof dataOrUpdater === "function"
+          ? dataOrUpdater(playSettings)
+          : dataOrUpdater;
 
-        let deviceProfile: any = ios;
-        if (settings?.deviceProfile === "Native") deviceProfile = native;
-        if (settings?.deviceProfile === "Old") deviceProfile = old;
+      if (newSettings === null) {
+        _setPlaySettings(null);
+        return null;
+      }
 
-        getStreamUrl({
+      let deviceProfile: any = iosFmp4;
+      if (settings?.deviceProfile === "Native") deviceProfile = native;
+      if (settings?.deviceProfile === "Old") deviceProfile = old;
+
+      console.log("Selected sub index: ", newSettings?.subtitleIndex);
+
+      try {
+        const data = await getStreamUrl({
           api,
           deviceProfile,
           item: newSettings?.item,
           mediaSourceId: newSettings?.mediaSource?.Id,
           startTimeTicks: 0,
           maxStreamingBitrate: newSettings?.bitrate?.value,
-          audioStreamIndex: newSettings?.audioIndex
-            ? newSettings?.audioIndex
-            : 0,
-          subtitleStreamIndex: newSettings?.subtitleIndex
-            ? newSettings?.subtitleIndex
-            : -1,
+          audioStreamIndex: newSettings?.audioIndex ?? 0,
+          subtitleStreamIndex: newSettings?.subtitleIndex ?? -1,
           userId: user.Id,
           forceDirectPlay: false,
           sessionData: null,
-        }).then((data) => {
-          setPlayUrl(data?.url!);
-          setPlaySessionId(data?.sessionId!);
         });
 
-        return newSettings;
-      });
+        console.log("getStreamUrl ~ ", data?.url);
+
+        _setPlaySettings(newSettings);
+        setPlayUrl(data?.url!);
+        setPlaySessionId(data?.sessionId!);
+
+        return data;
+      } catch (error) {
+        console.warn("Error getting stream URL:", error);
+        return null;
+      }
     },
-    [api, user, settings, setPlayUrl]
+    [api, user, settings, playSettings]
   );
 
   useEffect(() => {
@@ -134,6 +158,7 @@ export const PlaySettingsProvider: React.FC<{ children: React.ReactNode }> = ({
         setPlaySettings,
         playUrl,
         setPlayUrl,
+        setMusicPlaySettings,
         setOfflineSettings,
         playSessionId,
       }}
diff --git a/utils/jellyfin/getDefaultPlaySettings.ts b/utils/jellyfin/getDefaultPlaySettings.ts
new file mode 100644
index 00000000..b877283e
--- /dev/null
+++ b/utils/jellyfin/getDefaultPlaySettings.ts
@@ -0,0 +1,63 @@
+// utils/getDefaultPlaySettings.ts
+import { BITRATES } from "@/components/BitrateSelector";
+import {
+  BaseItemDto,
+  MediaSourceInfo,
+} from "@jellyfin/sdk/lib/generated-client";
+import { Settings } from "../atoms/settings";
+
+interface PlaySettings {
+  item: BaseItemDto;
+  bitrate: (typeof BITRATES)[0];
+  mediaSource: MediaSourceInfo | undefined;
+  audioIndex?: number | null;
+  subtitleIndex?: number | null;
+}
+
+export function getDefaultPlaySettings(
+  item: BaseItemDto,
+  settings: Settings
+): PlaySettings {
+  if (item.Type === "Program") {
+    return {
+      item,
+      bitrate: BITRATES[0],
+      mediaSource: undefined,
+      audioIndex: undefined,
+      subtitleIndex: undefined,
+    };
+  }
+
+  // 1. Get first media source
+  const mediaSource = item.MediaSources?.[0];
+
+  if (!mediaSource) throw new Error("No media source found");
+
+  // 2. Get default or preferred audio
+  const defaultAudioIndex = mediaSource?.DefaultAudioStreamIndex;
+  const preferedAudioIndex = mediaSource?.MediaStreams?.find(
+    (x) => x.Language === settings?.defaultAudioLanguage
+  )?.Index;
+  const firstAudioIndex = mediaSource?.MediaStreams?.find(
+    (x) => x.Type === "Audio"
+  )?.Index;
+
+  // 3. Get default or preferred subtitle
+  const preferedSubtitleIndex = mediaSource?.MediaStreams?.find(
+    (x) => x.Language === settings?.defaultSubtitleLanguage?.value
+  )?.Index;
+  const defaultSubtitleIndex = mediaSource?.MediaStreams?.find(
+    (stream) => stream.Type === "Subtitle" && stream.IsDefault
+  )?.Index;
+
+  // 4. Get default bitrate
+  const bitrate = BITRATES[0];
+
+  return {
+    item,
+    bitrate,
+    mediaSource,
+    audioIndex: preferedAudioIndex ?? defaultAudioIndex ?? firstAudioIndex,
+    subtitleIndex: preferedSubtitleIndex ?? defaultSubtitleIndex ?? -1,
+  };
+}
diff --git a/utils/jellyfin/media/getStreamUrl.ts b/utils/jellyfin/media/getStreamUrl.ts
index d9c4eadb..cd4bac54 100644
--- a/utils/jellyfin/media/getStreamUrl.ts
+++ b/utils/jellyfin/media/getStreamUrl.ts
@@ -34,8 +34,8 @@ export const getStreamUrl = async ({
   height?: number;
   mediaSourceId?: string | null;
 }): Promise<{
-  url: string | null | undefined;
-  sessionId: string | null | undefined;
+  url: string | null;
+  sessionId: string | null;
 } | null> => {
   if (!api || !userId || !item?.Id) {
     return null;
@@ -66,7 +66,7 @@ export const getStreamUrl = async ({
       }
     );
     const transcodeUrl = res0.data.MediaSources?.[0].TranscodingUrl;
-    sessionId = res0.data.PlaySessionId;
+    sessionId = res0.data.PlaySessionId || null;
 
     if (transcodeUrl) {
       return { url: `${api.basePath}${transcodeUrl}`, sessionId };
@@ -75,29 +75,6 @@ export const getStreamUrl = async ({
 
   const itemId = item.Id;
 
-  // const res2 = await api.axiosInstance.post(
-  //   `${api.basePath}/Items/${itemId}/PlaybackInfo`,
-  //   {
-  //     DeviceProfile: deviceProfile,
-  //     UserId: userId,
-  //     MaxStreamingBitrate: maxStreamingBitrate,
-  //     StartTimeTicks: startTimeTicks,
-  //     EnableTranscoding: maxStreamingBitrate ? true : undefined,
-  //     AutoOpenLiveStream: true,
-  //     MediaSourceId: mediaSourceId,
-  //     AllowVideoStreamCopy: maxStreamingBitrate ? false : true,
-  //     AudioStreamIndex: audioStreamIndex,
-  //     SubtitleStreamIndex: subtitleStreamIndex,
-  //     DeInterlace: true,
-  //     BreakOnNonKeyFrames: false,
-  //     CopyTimestamps: false,
-  //     EnableMpegtsM2TsMode: false,
-  //   },
-  //   {
-  //     headers: getAuthHeaders(api),
-  //   }
-  // );
-
   const res2 = await getMediaInfoApi(api).getPlaybackInfo(
     {
       userId,
@@ -120,55 +97,64 @@ export const getStreamUrl = async ({
         breakOnNonKeyFrames: false,
         copyTimestamps: false,
         enableMpegtsM2TsMode: false,
+
       },
     }
   );
 
-  sessionId = res2.data.PlaySessionId;
+  sessionId = res2.data.PlaySessionId || null;
 
   mediaSource = res2.data.MediaSources?.find(
     (source: MediaSourceInfo) => source.Id === mediaSourceId
   );
 
-  if (mediaSource?.SupportsDirectPlay || forceDirectPlay === true) {
-    if (item.MediaType === "Video") {
-      url = `${api.basePath}/Videos/${itemId}/stream.mp4?playSessionId=${sessionData?.PlaySessionId}&mediaSourceId=${mediaSource?.Id}&static=true&subtitleStreamIndex=${subtitleStreamIndex}&audioStreamIndex=${audioStreamIndex}&deviceId=${api.deviceInfo.id}&api_key=${api.accessToken}`;
-    } else if (item.MediaType === "Audio") {
-      const searchParams = new URLSearchParams({
-        UserId: userId,
-        DeviceId: api.deviceInfo.id,
-        MaxStreamingBitrate: "140000000",
-        Container:
-          "opus,webm|opus,mp3,aac,m4a|aac,m4b|aac,flac,webma,webm|webma,wav,ogg",
-        TranscodingContainer: "mp4",
-        TranscodingProtocol: "hls",
-        AudioCodec: "aac",
-        api_key: api.accessToken,
-        PlaySessionId: sessionData?.PlaySessionId || "",
-        StartTimeTicks: "0",
-        EnableRedirection: "true",
-        EnableRemoteMedia: "false",
-      });
-      url = `${
-        api.basePath
-      }/Audio/${itemId}/universal?${searchParams.toString()}`;
+  console.log("getStreamUrl ~ ", item.MediaType);
+
+  if (item.MediaType === "Video") {
+    if (mediaSource?.TranscodingUrl) {
+      return {
+        url: `${api.basePath}${mediaSource.TranscodingUrl}`,
+        sessionId: sessionId,
+      };
+    }
+
+    if (mediaSource?.SupportsDirectPlay || forceDirectPlay === true) {
+      return {
+        url: `${api.basePath}/Videos/${itemId}/stream.mp4?playSessionId=${sessionData?.PlaySessionId}&mediaSourceId=${mediaSource?.Id}&static=true&subtitleStreamIndex=${subtitleStreamIndex}&audioStreamIndex=${audioStreamIndex}&deviceId=${api.deviceInfo.id}&api_key=${api.accessToken}`,
+        sessionId: sessionId,
+      };
     }
-  } else if (mediaSource?.TranscodingUrl) {
-    url = `${api.basePath}${mediaSource.TranscodingUrl}`;
   }
 
-  if (!url) {
-    console.log("getStreamUrl: no url found", {
-      api: api.basePath,
-      userId,
-      item: item.Id,
-      mediaSourceId,
+  if (item.MediaType === "Audio") {
+    console.log("getStreamUrl ~ Audio");
+
+    if (mediaSource?.TranscodingUrl) {
+      return { url: `${api.basePath}${mediaSource.TranscodingUrl}`, sessionId };
+    }
+
+    const searchParams = new URLSearchParams({
+      UserId: userId,
+      DeviceId: api.deviceInfo.id,
+      MaxStreamingBitrate: "140000000",
+      Container:
+        "opus,webm|opus,mp3,aac,m4a|aac,m4b|aac,flac,webma,webm|webma,wav,ogg",
+      TranscodingContainer: "mp4",
+      TranscodingProtocol: "hls",
+      AudioCodec: "aac",
+      api_key: api.accessToken,
+      PlaySessionId: sessionData?.PlaySessionId || "",
+      StartTimeTicks: "0",
+      EnableRedirection: "true",
+      EnableRemoteMedia: "false",
     });
-    return null;
+    return {
+      url: `${
+        api.basePath
+      }/Audio/${itemId}/universal?${searchParams.toString()}`,
+      sessionId,
+    };
   }
 
-  return {
-    url,
-    sessionId,
-  };
+  throw new Error("Unsupported media type");
 };
diff --git a/utils/optimize-server.ts b/utils/optimize-server.ts
index b7bb10fe..244ed0da 100644
--- a/utils/optimize-server.ts
+++ b/utils/optimize-server.ts
@@ -1,6 +1,7 @@
 import { itemRouter } from "@/components/common/TouchableItemRouter";
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
 import axios from "axios";
+import { writeToLog } from "./log";
 
 interface IJobInput {
   deviceId?: string | null;
@@ -108,6 +109,7 @@ export async function cancelAllJobs({ authHeader, url, deviceId }: IJobInput) {
       });
     });
   } catch (error) {
+    writeToLog("ERROR", "Failed to cancel all jobs", error);
     console.error(error);
     return false;
   }

From 317e719460a5af5793b73ef77668f56681683ddc Mon Sep 17 00:00:00 2001
From: Fredrik Burmester <fredrik.burmester@gmail.com>
Date: Tue, 8 Oct 2024 18:43:25 +0200
Subject: [PATCH 10/10] wip

---
 app/(auth)/(tabs)/(home)/index.tsx            | 42 ++++++++---
 .../actors/[actorId].tsx                      |  2 +-
 components/ContinueWatchingPoster.tsx         |  6 +-
 components/ItemContent.tsx                    | 70 +++++++------------
 components/PlayButton.tsx                     | 23 +++++-
 components/PlayedStatus.tsx                   |  3 +
 components/WatchedIndicator.tsx               |  1 +
 components/home/ScrollingCollectionList.tsx   |  4 +-
 components/medialists/MediaListSection.tsx    |  4 +-
 hooks/useImageColors.ts                       | 17 +++--
 providers/PlaySettingsProvider.tsx            |  5 +-
 utils/atoms/primaryColor.ts                   |  2 +-
 12 files changed, 100 insertions(+), 79 deletions(-)

diff --git a/app/(auth)/(tabs)/(home)/index.tsx b/app/(auth)/(tabs)/(home)/index.tsx
index c3a48f93..0259bbbb 100644
--- a/app/(auth)/(tabs)/(home)/index.tsx
+++ b/app/(auth)/(tabs)/(home)/index.tsx
@@ -117,7 +117,7 @@ export default function index() {
     isError: e1,
     isLoading: l1,
   } = useQuery({
-    queryKey: ["userViews", user?.Id],
+    queryKey: ["home", "userViews", user?.Id],
     queryFn: async () => {
       if (!api || !user?.Id) {
         return null;
@@ -138,7 +138,7 @@ export default function index() {
     isError: e2,
     isLoading: l2,
   } = useQuery({
-    queryKey: ["sf_promoted", user?.Id, settings?.usePopularPlugin],
+    queryKey: ["home", "sf_promoted", user?.Id, settings?.usePopularPlugin],
     queryFn: async () => {
       if (!api || !user?.Id) return [];
 
@@ -167,9 +167,26 @@ export default function index() {
 
   const refetch = useCallback(async () => {
     setLoading(true);
-    await queryClient.invalidateQueries();
+    await queryClient.invalidateQueries({
+      queryKey: ["home"],
+      refetchType: "all",
+      type: "all",
+      exact: false,
+    });
+    await queryClient.invalidateQueries({
+      queryKey: ["home"],
+      refetchType: "all",
+      type: "all",
+      exact: false,
+    });
+    await queryClient.invalidateQueries({
+      queryKey: ["item"],
+      refetchType: "all",
+      type: "all",
+      exact: false,
+    });
     setLoading(false);
-  }, []);
+  }, [queryClient]);
 
   const createCollectionConfig = useCallback(
     (
@@ -208,7 +225,12 @@ export default function index() {
       const includeItemTypes: BaseItemKind[] =
         c.CollectionType === "tvshows" ? ["Series"] : ["Movie"];
       const title = "Recently Added in " + c.Name;
-      const queryKey = ["recentlyAddedIn" + c.CollectionType, user?.Id!, c.Id!];
+      const queryKey = [
+        "home",
+        "recentlyAddedIn" + c.CollectionType,
+        user?.Id!,
+        c.Id!,
+      ];
       return createCollectionConfig(
         title || "",
         queryKey,
@@ -220,7 +242,7 @@ export default function index() {
     const ss: Section[] = [
       {
         title: "Continue Watching",
-        queryKey: ["resumeItems", user.Id],
+        queryKey: ["home", "resumeItems", user.Id],
         queryFn: async () =>
           (
             await getItemsApi(api).getResumeItems({
@@ -234,7 +256,7 @@ export default function index() {
       },
       {
         title: "Next Up",
-        queryKey: ["nextUp-all", user?.Id],
+        queryKey: ["home", "nextUp-all", user?.Id],
         queryFn: async () =>
           (
             await getTvShowsApi(api).getNextUp({
@@ -252,7 +274,7 @@ export default function index() {
         (ml) =>
           ({
             title: ml.Name,
-            queryKey: ["mediaList", ml.Id!],
+            queryKey: ["home", "mediaList", ml.Id!],
             queryFn: async () => ml,
             type: "MediaListSection",
             orientation: "vertical",
@@ -260,7 +282,7 @@ export default function index() {
       ) || []),
       {
         title: "Suggested Movies",
-        queryKey: ["suggestedMovies", user?.Id],
+        queryKey: ["home", "suggestedMovies", user?.Id],
         queryFn: async () =>
           (
             await getSuggestionsApi(api).getSuggestions({
@@ -275,7 +297,7 @@ export default function index() {
       },
       {
         title: "Suggested Episodes",
-        queryKey: ["suggestedEpisodes", user?.Id],
+        queryKey: ["home", "suggestedEpisodes", user?.Id],
         queryFn: async () => {
           try {
             const suggestions = await getSuggestions(api, user.Id);
diff --git a/app/(auth)/(tabs)/(home,libraries,search)/actors/[actorId].tsx b/app/(auth)/(tabs)/(home,libraries,search)/actors/[actorId].tsx
index 446eb807..45dc8a4d 100644
--- a/app/(auth)/(tabs)/(home,libraries,search)/actors/[actorId].tsx
+++ b/app/(auth)/(tabs)/(home,libraries,search)/actors/[actorId].tsx
@@ -50,7 +50,7 @@ const page: React.FC = () => {
         userId: user.Id,
         personIds: [actorId],
         startIndex: pageParam,
-        limit: 8,
+        limit: 16,
         sortOrder: ["Descending", "Descending", "Ascending"],
         includeItemTypes: ["Movie", "Series"],
         recursive: true,
diff --git a/components/ContinueWatchingPoster.tsx b/components/ContinueWatchingPoster.tsx
index 3a1899ec..641927f2 100644
--- a/components/ContinueWatchingPoster.tsx
+++ b/components/ContinueWatchingPoster.tsx
@@ -1,7 +1,7 @@
 import { apiAtom } from "@/providers/JellyfinProvider";
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
 import { Image } from "expo-image";
-import { useAtom } from "jotai";
+import { useAtom, useAtomValue } from "jotai";
 import { useMemo, useState } from "react";
 import { View } from "react-native";
 import { WatchedIndicator } from "./WatchedIndicator";
@@ -18,7 +18,7 @@ const ContinueWatchingPoster: React.FC<ContinueWatchingPosterProps> = ({
   useEpisodePoster = false,
   size = "normal",
 }) => {
-  const [api] = useAtom(apiAtom);
+  const api = useAtomValue(apiAtom);
 
   /**
    * Get horrizontal poster for movie and episode, with failover to primary.
@@ -59,7 +59,7 @@ const ContinueWatchingPoster: React.FC<ContinueWatchingPosterProps> = ({
     } else {
       return item.UserData?.PlayedPercentage || 0;
     }
-  }, []);
+  }, [item]);
 
   if (!url)
     return (
diff --git a/components/ItemContent.tsx b/components/ItemContent.tsx
index 4c3cc719..aee6cad0 100644
--- a/components/ItemContent.tsx
+++ b/components/ItemContent.tsx
@@ -1,9 +1,5 @@
 import { AudioTrackSelector } from "@/components/AudioTrackSelector";
-import {
-  Bitrate,
-  BITRATES,
-  BitrateSelector,
-} from "@/components/BitrateSelector";
+import { Bitrate, BitrateSelector } from "@/components/BitrateSelector";
 import { DownloadItem } from "@/components/DownloadItem";
 import { OverviewText } from "@/components/OverviewText";
 import { ParallaxScrollView } from "@/components/ParallaxPage";
@@ -18,6 +14,8 @@ import { SeasonEpisodesCarousel } from "@/components/series/SeasonEpisodesCarous
 import { useImageColors } from "@/hooks/useImageColors";
 import { apiAtom } from "@/providers/JellyfinProvider";
 import { usePlaySettings } from "@/providers/PlaySettingsProvider";
+import { useSettings } from "@/utils/atoms/settings";
+import { getDefaultPlaySettings } from "@/utils/jellyfin/getDefaultPlaySettings";
 import { getLogoImageUrlById } from "@/utils/jellyfin/image/getLogoImageUrlById";
 import {
   BaseItemDto,
@@ -27,23 +25,13 @@ import { Image } from "expo-image";
 import { useFocusEffect, useNavigation } from "expo-router";
 import * as ScreenOrientation from "expo-screen-orientation";
 import { useAtom } from "jotai";
-import React, {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { View } from "react-native";
-import { useCastDevice } from "react-native-google-cast";
-import Animated from "react-native-reanimated";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { Chromecast } from "./Chromecast";
 import { ItemHeader } from "./ItemHeader";
 import { MediaSourceSelector } from "./MediaSourceSelector";
 import { MoreMoviesWithActor } from "./MoreMoviesWithActor";
-import { useSettings } from "@/utils/atoms/settings";
-import { getDefaultPlaySettings } from "@/utils/jellyfin/getDefaultPlaySettings";
 
 export const ItemContent: React.FC<{ item: BaseItemDto }> = React.memo(
   ({ item }) => {
@@ -135,7 +123,7 @@ export const ItemContent: React.FC<{ item: BaseItemDto }> = React.memo(
       };
     }, []);
 
-    const headerHeightRef = useRef(400);
+    const [headerHeight, setHeaderHeight] = useState(350);
 
     useImageColors({ item });
 
@@ -154,26 +142,18 @@ export const ItemContent: React.FC<{ item: BaseItemDto }> = React.memo(
             </View>
           ),
       });
-
-      // setPlaySettings((prev) => ({
-      //   audioIndex: undefined,
-      //   subtitleIndex: undefined,
-      //   mediaSourceId: undefined,
-      //   bitrate: undefined,
-      //   mediaSource: item.MediaSources?.[0],
-      //   item,
-      // }));
     }, [item]);
 
     useEffect(() => {
+      // If landscape
       if (orientation !== ScreenOrientation.Orientation.PORTRAIT_UP) {
-        headerHeightRef.current = 230;
+        setHeaderHeight(230);
         return;
       }
-      if (item.Type === "Episode") headerHeightRef.current = 400;
-      else if (item.Type === "Movie") headerHeightRef.current = 500;
-      else headerHeightRef.current = 400;
-    }, [item, orientation]);
+
+      if (item.Type === "Movie") setHeaderHeight(500);
+      else setHeaderHeight(350);
+    }, [item.Type, orientation]);
 
     const logoUrl = useMemo(() => getLogoImageUrlById({ api, item }), [item]);
 
@@ -193,22 +173,20 @@ export const ItemContent: React.FC<{ item: BaseItemDto }> = React.memo(
       >
         <ParallaxScrollView
           className={`flex-1 ${loading ? "opacity-0" : "opacity-100"}`}
-          headerHeight={headerHeightRef.current}
+          headerHeight={headerHeight}
           headerImage={
-            <>
-              <Animated.View style={[{ flex: 1 }]}>
-                <ItemImage
-                  variant={
-                    item.Type === "Movie" && logoUrl ? "Backdrop" : "Primary"
-                  }
-                  item={item}
-                  style={{
-                    width: "100%",
-                    height: "100%",
-                  }}
-                />
-              </Animated.View>
-            </>
+            <View style={[{ flex: 1 }]}>
+              <ItemImage
+                variant={
+                  item.Type === "Movie" && logoUrl ? "Backdrop" : "Primary"
+                }
+                item={item}
+                style={{
+                  width: "100%",
+                  height: "100%",
+                }}
+              />
+            </View>
           }
           logo={
             <>
diff --git a/components/PlayButton.tsx b/components/PlayButton.tsx
index a91e8688..f87eebf8 100644
--- a/components/PlayButton.tsx
+++ b/components/PlayButton.tsx
@@ -4,11 +4,11 @@ import { getParentBackdropImageUrl } from "@/utils/jellyfin/image/getParentBackd
 import { getPrimaryImageUrl } from "@/utils/jellyfin/image/getPrimaryImageUrl";
 import { runtimeTicksToMinutes } from "@/utils/time";
 import { useActionSheet } from "@expo/react-native-action-sheet";
-import { Feather, Ionicons } from "@expo/vector-icons";
+import { Feather, Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
 import { useAtom } from "jotai";
 import { useEffect, useMemo } from "react";
-import { TouchableOpacity, View } from "react-native";
+import { Linking, TouchableOpacity, View } from "react-native";
 import CastContext, {
   PlayServicesState,
   useMediaStatus,
@@ -27,6 +27,7 @@ import Animated, {
 import { Button } from "./Button";
 import { Text } from "./common/Text";
 import { useRouter } from "expo-router";
+import { useSettings } from "@/utils/atoms/settings";
 
 interface Props extends React.ComponentProps<typeof Button> {
   item?: BaseItemDto | null;
@@ -55,6 +56,7 @@ export const PlayButton: React.FC<Props> = ({ item, url, ...props }) => {
   const startColor = useSharedValue(memoizedColor);
   const widthProgress = useSharedValue(0);
   const colorChangeProgress = useSharedValue(0);
+  const [settings] = useSettings();
 
   const directStream = useMemo(() => {
     return !url?.includes("m3u8");
@@ -69,10 +71,18 @@ export const PlayButton: React.FC<Props> = ({ item, url, ...props }) => {
       );
       return;
     }
+
     if (!client) {
+      const vlcLink = "vlc://" + url;
+      if (vlcLink && settings?.openInVLC) {
+        Linking.openURL(vlcLink);
+        return;
+      }
+
       router.push("/play-video");
       return;
     }
+
     const options = ["Chromecast", "Device", "Cancel"];
     const cancelButtonIndex = 2;
     showActionSheetWithOptions(
@@ -310,6 +320,15 @@ export const PlayButton: React.FC<Props> = ({ item, url, ...props }) => {
                 <Feather name="cast" size={22} />
               </Animated.Text>
             )}
+            {!client && settings?.openInVLC && (
+              <Animated.Text style={animatedTextStyle}>
+                <MaterialCommunityIcons
+                  name="vlc"
+                  size={18}
+                  color={animatedTextStyle.color}
+                />
+              </Animated.Text>
+            )}
           </View>
         </View>
       </TouchableOpacity>
diff --git a/components/PlayedStatus.tsx b/components/PlayedStatus.tsx
index 375cf22b..82e9057d 100644
--- a/components/PlayedStatus.tsx
+++ b/components/PlayedStatus.tsx
@@ -44,6 +44,9 @@ export const PlayedStatus: React.FC<Props> = ({ item, ...props }) => {
     queryClient.invalidateQueries({
       queryKey: ["nextUp-all"],
     });
+    queryClient.invalidateQueries({
+      queryKey: ["home"],
+    });
   };
 
   return (
diff --git a/components/WatchedIndicator.tsx b/components/WatchedIndicator.tsx
index 1ed5d0e4..d445c021 100644
--- a/components/WatchedIndicator.tsx
+++ b/components/WatchedIndicator.tsx
@@ -1,4 +1,5 @@
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+import React from "react";
 import { View } from "react-native";
 
 export const WatchedIndicator: React.FC<{ item: BaseItemDto }> = ({ item }) => {
diff --git a/components/home/ScrollingCollectionList.tsx b/components/home/ScrollingCollectionList.tsx
index 4cf596dd..03cb37e9 100644
--- a/components/home/ScrollingCollectionList.tsx
+++ b/components/home/ScrollingCollectionList.tsx
@@ -9,10 +9,8 @@ import {
 import { ScrollView, View, ViewProps } from "react-native";
 import ContinueWatchingPoster from "../ContinueWatchingPoster";
 import { ItemCardText } from "../ItemCardText";
-import { HorizontalScroll } from "../common/HorrizontalScroll";
 import { TouchableItemRouter } from "../common/TouchableItemRouter";
 import SeriesPoster from "../posters/SeriesPoster";
-import { FlashList } from "@shopify/flash-list";
 
 interface Props extends ViewProps {
   title?: string | null;
@@ -34,7 +32,7 @@ export const ScrollingCollectionList: React.FC<Props> = ({
     queryKey,
     queryFn,
     enabled: !disabled,
-    staleTime: 60 * 1000,
+    staleTime: 0,
   });
 
   if (disabled || !title) return null;
diff --git a/components/medialists/MediaListSection.tsx b/components/medialists/MediaListSection.tsx
index 93b7a5c0..8474b866 100644
--- a/components/medialists/MediaListSection.tsx
+++ b/components/medialists/MediaListSection.tsx
@@ -31,10 +31,10 @@ export const MediaListSection: React.FC<Props> = ({
   const [api] = useAtom(apiAtom);
   const [user] = useAtom(userAtom);
 
-  const { data: collection, isLoading } = useQuery({
+  const { data: collection } = useQuery({
     queryKey,
     queryFn,
-    staleTime: 60 * 1000,
+    staleTime: 0,
   });
 
   const fetchItems = useCallback(
diff --git a/hooks/useImageColors.ts b/hooks/useImageColors.ts
index 0a7cf821..57fb6c80 100644
--- a/hooks/useImageColors.ts
+++ b/hooks/useImageColors.ts
@@ -8,7 +8,7 @@ import {
 import { getItemImage } from "@/utils/getItemImage";
 import { storage } from "@/utils/mmkv";
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
-import { useAtom } from "jotai";
+import { useAtom, useAtomValue } from "jotai";
 import { useEffect, useMemo } from "react";
 import { getColors } from "react-native-image-colors";
 
@@ -28,7 +28,7 @@ export const useImageColors = ({
   url?: string | null;
   disabled?: boolean;
 }) => {
-  const [api] = useAtom(apiAtom);
+  const api = useAtomValue(apiAtom);
   const [, setPrimaryColor] = useAtom(itemThemeColorAtom);
 
   const source = useMemo(() => {
@@ -42,7 +42,7 @@ export const useImageColors = ({
         quality: 80,
         width: 300,
       });
-    else return;
+    else return null;
   }, [api, item]);
 
   useEffect(() => {
@@ -54,7 +54,7 @@ export const useImageColors = ({
 
       // If colors are cached, use them and exit
       if (_primary && _text) {
-        console.info("[useImageColors] Using cached colors for performance.");
+        console.info("useImageColors ~ Using cached colors for performance.");
         setPrimaryColor({
           primary: _primary,
           text: _text,
@@ -65,22 +65,25 @@ export const useImageColors = ({
       // Extract colors from the image
       getColors(source.uri, {
         fallback: "#fff",
-        cache: true,
-        key: source.uri,
+        cache: false,
       })
         .then((colors) => {
           let primary: string = "#fff";
           let text: string = "#000";
+          let backup: string = "#fff";
 
           // Select the appropriate color based on the platform
           if (colors.platform === "android") {
             primary = colors.dominant;
+            backup = colors.vibrant;
           } else if (colors.platform === "ios") {
-            primary = colors.primary;
+            primary = colors.detail;
+            backup = colors.primary;
           }
 
           // Adjust the primary color if it's too close to black
           if (primary && isCloseToBlack(primary)) {
+            if (backup && !isCloseToBlack(backup)) primary = backup;
             primary = adjustToNearBlack(primary);
           }
 
diff --git a/providers/PlaySettingsProvider.tsx b/providers/PlaySettingsProvider.tsx
index aef28a13..7e07fcdb 100644
--- a/providers/PlaySettingsProvider.tsx
+++ b/providers/PlaySettingsProvider.tsx
@@ -95,8 +95,6 @@ export const PlaySettingsProvider: React.FC<{ children: React.ReactNode }> = ({
       if (settings?.deviceProfile === "Native") deviceProfile = native;
       if (settings?.deviceProfile === "Old") deviceProfile = old;
 
-      console.log("Selected sub index: ", newSettings?.subtitleIndex);
-
       try {
         const data = await getStreamUrl({
           api,
@@ -108,8 +106,7 @@ export const PlaySettingsProvider: React.FC<{ children: React.ReactNode }> = ({
           audioStreamIndex: newSettings?.audioIndex ?? 0,
           subtitleStreamIndex: newSettings?.subtitleIndex ?? -1,
           userId: user.Id,
-          forceDirectPlay: false,
-          sessionData: null,
+          forceDirectPlay: settings.forceDirectPlay,
         });
 
         console.log("getStreamUrl ~ ", data?.url);
diff --git a/utils/atoms/primaryColor.ts b/utils/atoms/primaryColor.ts
index 4422dee9..cd348ca5 100644
--- a/utils/atoms/primaryColor.ts
+++ b/utils/atoms/primaryColor.ts
@@ -56,7 +56,7 @@ export const isCloseToBlack = (color: string): boolean => {
 };
 
 export const adjustToNearBlack = (color: string): string => {
-  return "#212121"; // A very dark gray, almost black
+  return "#313131"; // A very dark gray, almost black
 };
 
 export const itemThemeColorAtom = atom<ThemeColors>({