chore: refactor controls

chore: version
fix: trickplay and re-rendering issues
2025-08-20 18:37:18 +02:00 · 2025-08-20 13:41:45 +02:00 · 2025-08-20 10:30:57 +02:00 · 2025-08-20 09:59:03 +02:00 · 2025-08-20 08:21:01 +02:00 · 2025-08-20 08:18:12 +02:00
48 changed files with 2370 additions and 1123 deletions
--- a/.github/workflows/build-ios.yml
+++ b/.github/workflows/build-ios.yml
@@ -58,13 +58,21 @@ jobs:
          else
            bun run prebuild
          fi
-      
+
      - name: 🏗️ Setup EAS
        uses: expo/expo-github-action@main
        with:
          eas-version: latest
          token: ${{ secrets.EXPO_TOKEN }}

+      - name: ⚙️ Ensure iOS/tvOS SDKs installed
+        run: |
+          if [ "${{ matrix.target }}" = "tv" ]; then
+            xcodebuild -downloadPlatform tvOS
+          else
+            xcodebuild -downloadPlatform iOS
+          fi
+
      - name: 🚀 Build iOS app
        env:
          EXPO_TV: ${{ matrix.target == 'tv' && 1 || 0 }}
--- a/.github/workflows/ci-codeql.yml
+++ b/.github/workflows/ci-codeql.yml
@@ -20,7 +20,7 @@ jobs:
    strategy:
      fail-fast: false
      matrix:
-        language: [ 'javascript-typescript' ]
+        language: [ 'javascript-typescript', 'actions' ]

    steps:
      - name: 📥 Checkout repository
@@ -31,13 +31,13 @@ jobs:
          fetch-depth: 0

      - name: 🏁 Initialize CodeQL
-        uses: github/codeql-action/init@df559355d593797519d70b90fc8edd5db049e7a2 # v3.29.9
+        uses: github/codeql-action/init@96f518a34f7a870018057716cc4d7a5c014bd61c # v3.29.10
        with:
          languages: ${{ matrix.language }}
          queries: +security-extended,security-and-quality

      - name: 🛠️ Autobuild
-        uses: github/codeql-action/autobuild@df559355d593797519d70b90fc8edd5db049e7a2 # v3.29.9
+        uses: github/codeql-action/autobuild@96f518a34f7a870018057716cc4d7a5c014bd61c # v3.29.10

      - name: 🧪 Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@df559355d593797519d70b90fc8edd5db049e7a2 # v3.29.9
+        uses: github/codeql-action/analyze@96f518a34f7a870018057716cc4d7a5c014bd61c # v3.29.10
--- a/.github/workflows/linting.yml
+++ b/.github/workflows/linting.yml
@@ -20,7 +20,7 @@ jobs:
      pull-requests: write
      contents: read
    steps:
-      - uses: amannn/action-semantic-pull-request@fdd4d3ddf614fbcd8c29e4b106d3bbe0cb2c605d # v6.0.1
+      - uses: amannn/action-semantic-pull-request@7f33ba792281b034f64e96f4c0b5496782dd3b37 # v6.1.0
        id: lint_pr_title
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
@@ -57,7 +57,7 @@ jobs:
          fetch-depth: 0

      - name: Dependency Review
-        uses: actions/dependency-review-action@da24556b548a50705dd671f47852072ea4c105d9 # v4.7.1
+        uses: actions/dependency-review-action@bc41886e18ea39df68b1b1245f4184881938e050 # v4.7.2
        with:
          fail-on-severity: high
          deny-licenses: GPL-3.0, AGPL-3.0
--- a/README.md
+++ b/README.md
@@ -181,6 +181,12 @@ Thanks to the following contributors for their significant contributions:
        <br /><sub><b>@topiga</b></sub>
      </a>
    </td>
+    <td align="center">
+      <a href="https://github.com/lancechant">
+        <img src="https://github.com/lancechant.png?size=55" width="55" style="border-radius: 50%;" />
+        <br /><sub><b>@lancechant</b></sub>
+      </a>
+    </td>
  </tr>
  <tr>
    <td align="center">
@@ -213,6 +219,12 @@ Thanks to the following contributors for their significant contributions:
        <br /><sub><b>@whoopsi-daisy</b></sub>
      </a>
    </td>
+    <td align="center">
+      <a href="https://github.com/Gauvino">
+        <img src="https://github.com/Gauvino.png?size=55" width="55" style="border-radius: 50%;" />
+        <br /><sub><b>@Gauvino</b></sub>
+      </a>
+    </td>
  </tr>
 </table>
 </div>
--- a/app.json
+++ b/app.json
@@ -2,7 +2,7 @@
  "expo": {
    "name": "Streamyfin",
    "slug": "streamyfin",
-    "version": "0.29.13",
+    "version": "0.32.1",
    "orientation": "default",
    "icon": "./assets/images/icon.png",
    "scheme": "streamyfin",
@@ -37,7 +37,7 @@
    },
    "android": {
      "jsEngine": "hermes",
-      "versionCode": 57,
+      "versionCode": 62,
      "adaptiveIcon": {
        "foregroundImage": "./assets/images/icon-android-plain.png",
        "monochromeImage": "./assets/images/icon-android-themed.png",
--- a/app/(auth)/(tabs)/(home)/downloads/[seriesId].tsx
+++ b/app/(auth)/(tabs)/(home)/downloads/[seriesId].tsx
@@ -39,26 +39,44 @@ export default function page() {
    }
  }, [getDownloadedItems]);

+  // Group episodes by season in a single pass
+  const seasonGroups = useMemo(() => {
+    const groups: Record<number, BaseItemDto[]> = {};
+
+    series.forEach((episode) => {
+      const seasonNumber = episode.item.ParentIndexNumber;
+      if (seasonNumber !== undefined && seasonNumber !== null) {
+        if (!groups[seasonNumber]) {
+          groups[seasonNumber] = [];
+        }
+        groups[seasonNumber].push(episode.item);
+      }
+    });
+
+    // Sort episodes within each season
+    Object.values(groups).forEach((episodes) => {
+      episodes.sort((a, b) => (a.IndexNumber || 0) - (b.IndexNumber || 0));
+    });
+
+    return groups;
+  }, [series]);
+
+  // Get unique seasons (just the season numbers, sorted)
+  const uniqueSeasons = useMemo(() => {
+    const seasonNumbers = Object.keys(seasonGroups)
+      .map(Number)
+      .sort((a, b) => a - b);
+    return seasonNumbers.map((seasonNum) => seasonGroups[seasonNum][0]); // First episode of each season
+  }, [seasonGroups]);
+
  const seasonIndex =
    seasonIndexState[series?.[0]?.item?.ParentId ?? ""] ||
    episodeSeasonIndex ||
    "";

  const groupBySeason = useMemo<BaseItemDto[]>(() => {
-    const seasons: Record<string, BaseItemDto[]> = {};
-
-    series?.forEach((episode) => {
-      if (!seasons[episode.item.ParentIndexNumber!]) {
-        seasons[episode.item.ParentIndexNumber!] = [];
-      }
-
-      seasons[episode.item.ParentIndexNumber!].push(episode.item);
-    });
-    return (
-      seasons[seasonIndex]?.sort((a, b) => a.IndexNumber! - b.IndexNumber!) ??
-      []
-    );
-  }, [series, seasonIndex]);
+    return seasonGroups[Number(seasonIndex)] ?? [];
+  }, [seasonGroups, seasonIndex]);

  const initialSeasonIndex = useMemo(
    () =>
@@ -102,7 +120,7 @@ export default function page() {
        <View className='flex flex-row items-center justify-start my-2 px-4'>
          <SeasonDropdown
            item={series[0].item}
-            seasons={series.map((s) => s.item)}
+            seasons={uniqueSeasons}
            state={seasonIndexState}
            initialSeasonIndex={initialSeasonIndex!}
            onSelect={(season) => {
--- a/app/(auth)/(tabs)/(home)/settings.tsx
+++ b/app/(auth)/(tabs)/(home)/settings.tsx
@@ -2,7 +2,7 @@ import { useNavigation, useRouter } from "expo-router";
 import { t } from "i18next";
 import { useAtom } from "jotai";
 import { useEffect } from "react";
-import { ScrollView, TouchableOpacity, View } from "react-native";
+import { Platform, ScrollView, TouchableOpacity, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { Text } from "@/components/common/Text";
 import { ListGroup } from "@/components/list/ListGroup";
@@ -73,13 +73,13 @@ export default function settings() {

        <OtherSettings />

-        <DownloadSettings />
+        {!Platform.isTV && <DownloadSettings />}

        <PluginSettings />

        <AppLanguageSelector />

-        <ChromecastSettings />
+        {!Platform.isTV && <ChromecastSettings />}

        <ListGroup title={"Intro"}>
          <ListItem
@@ -112,7 +112,7 @@ export default function settings() {
          </ListGroup>
        </View>

-        <StorageSettings />
+        {!Platform.isTV && <StorageSettings />}
      </View>
    </ScrollView>
  );
--- a/app/(auth)/(tabs)/(home)/settings/logs/page.tsx
+++ b/app/(auth)/(tabs)/(home)/settings/logs/page.tsx
@@ -10,7 +10,7 @@ import { FilterButton } from "@/components/filters/FilterButton";
 import { Loader } from "@/components/Loader";
 import { LogLevel, useLog, writeErrorLog } from "@/utils/log";

-export default function page() {
+export default function Page() {
  const navigation = useNavigation();
  const { logs } = useLog();
  const { t } = useTranslation();
@@ -28,10 +28,12 @@ export default function page() {

  const [loading, setLoading] = useState<boolean>(false);
  const [state, setState] = useState<Record<string, boolean>>({});
-
  const [order, setOrder] = useState<"asc" | "desc">("desc");
  const [levels, setLevels] = useState<LogLevel[]>(defaultLevels);

+  const _orderId = useId();
+  const _levelsId = useId();
+
  const filteredLogs = useMemo(
    () =>
      logs
--- a/app/(auth)/player/direct-player.tsx
+++ b/app/(auth)/player/direct-player.tsx
@@ -15,8 +15,8 @@ import { useAtomValue } from "jotai";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Alert, Platform, View } from "react-native";
-import { useSharedValue } from "react-native-reanimated";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { useAnimatedReaction, useSharedValue } from "react-native-reanimated";
+
 import { BITRATES } from "@/components/BitrateSelector";
 import { Text } from "@/components/common/Text";
 import { Loader } from "@/components/Loader";
@@ -38,12 +38,9 @@ import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { useSettings } from "@/utils/atoms/settings";
 import { getStreamUrl } from "@/utils/jellyfin/media/getStreamUrl";
 import { writeToLog } from "@/utils/log";
-import { storage } from "@/utils/mmkv";
 import { generateDeviceProfile } from "@/utils/profiles/native";
 import { msToTicks, ticksToSeconds } from "@/utils/time";

-const IGNORE_SAFE_AREAS_KEY = "video_player_ignore_safe_areas";
-
 export default function page() {
  const videoRef = useRef<VlcPlayerViewRef>(null);
  const user = useAtomValue(userAtom);
@@ -53,11 +50,12 @@ export default function page() {

  const [isPlaybackStopped, setIsPlaybackStopped] = useState(false);
  const [showControls, _setShowControls] = useState(true);
-  const [ignoreSafeAreas, setIgnoreSafeAreas] = useState(() => {
-    // Load persisted state from storage
-    const saved = storage.getBoolean(IGNORE_SAFE_AREAS_KEY);
-    return saved ?? false;
-  });
+  const [aspectRatio, setAspectRatio] = useState<
+    "default" | "16:9" | "4:3" | "1:1" | "21:9"
+  >("default");
+  const [scaleFactor, setScaleFactor] = useState<
+    1.0 | 1.1 | 1.2 | 1.3 | 1.4 | 1.5 | 1.6 | 1.7 | 1.8 | 1.9 | 2.0
+  >(1.0);
  const [isPlaying, setIsPlaying] = useState(false);
  const [isMuted, setIsMuted] = useState(false);
  const [isBuffering, setIsBuffering] = useState(true);
@@ -82,11 +80,6 @@ export default function page() {
    lightHapticFeedback();
  }, []);

-  // Persist ignoreSafeAreas state whenever it changes
-  useEffect(() => {
-    storage.set(IGNORE_SAFE_AREAS_KEY, ignoreSafeAreas);
-  }, [ignoreSafeAreas]);
-
  const {
    itemId,
    audioIndex: audioIndexStr,
@@ -105,8 +98,8 @@ export default function page() {
    /** Playback position in ticks. */
    playbackPosition?: string;
  }>();
-  const [settings] = useSettings();
-  const insets = useSafeAreaInsets();
+  const [_settings] = useSettings();
+
  const offline = offlineStr === "true";
  const playbackManager = usePlaybackManager();

@@ -287,11 +280,15 @@ export default function page() {
  ]);

  const stop = useCallback(() => {
+    // Update URL with final playback position before stopping
+    router.setParams({
+      playbackPosition: msToTicks(progress.get()).toString(),
+    });
    reportPlaybackStopped();
    setIsPlaybackStopped(true);
    videoRef.current?.stop();
    revalidateProgressCache();
-  }, [videoRef, reportPlaybackStopped]);
+  }, [videoRef, reportPlaybackStopped, progress]);

  useEffect(() => {
    const beforeRemoveListener = navigation.addListener("beforeRemove", stop);
@@ -300,7 +297,7 @@ export default function page() {
    };
  }, [navigation, stop]);

-  const currentPlayStateInfo = () => {
+  const currentPlayStateInfo = useCallback(() => {
    if (!stream) return;
    return {
      itemId: item?.Id!,
@@ -316,7 +313,32 @@ export default function page() {
      repeatMode: RepeatMode.RepeatNone,
      playbackOrder: PlaybackOrder.Default,
    };
-  };
+  }, [
+    stream,
+    item?.Id,
+    audioIndex,
+    subtitleIndex,
+    mediaSourceId,
+    progress,
+    isPlaying,
+    isMuted,
+  ]);
+
+  const lastUrlUpdateTime = useSharedValue(0);
+  const wasJustSeeking = useSharedValue(false);
+  const URL_UPDATE_INTERVAL = 30000; // Update URL every 30 seconds instead of every second
+
+  // Track when seeking ends to update URL immediately
+  useAnimatedReaction(
+    () => isSeeking.get(),
+    (currentSeeking, previousSeeking) => {
+      if (previousSeeking && !currentSeeking) {
+        // Seeking just ended
+        wasJustSeeking.value = true;
+      }
+    },
+    [],
+  );

  const onProgress = useCallback(
    async (data: ProgressUpdatePayload) => {
@@ -329,10 +351,20 @@ export default function page() {

      progress.set(currentTime);

-      // Update the playback position in the URL.
-      router.setParams({
-        playbackPosition: msToTicks(currentTime).toString(),
-      });
+      // Update URL immediately after seeking, or every 30 seconds during normal playback
+      const now = Date.now();
+      const shouldUpdateUrl = wasJustSeeking.get();
+      wasJustSeeking.value = false;
+
+      if (
+        shouldUpdateUrl ||
+        now - lastUrlUpdateTime.get() > URL_UPDATE_INTERVAL
+      ) {
+        router.setParams({
+          playbackPosition: msToTicks(currentTime).toString(),
+        });
+        lastUrlUpdateTime.value = now;
+      }

      if (!item?.Id) return;

@@ -405,6 +437,7 @@ export default function page() {
      console.error("Error toggling mute:", error);
    }
  }, [previousVolume]);
+
  const volumeDownCb = useCallback(async () => {
    if (Platform.isTV) return;

@@ -471,6 +504,10 @@ export default function page() {
          playbackManager.reportPlaybackProgress(
            item.Id,
            msToTicks(progress.get()),
+            {
+              AudioStreamIndex: audioIndex ?? -1,
+              SubtitleStreamIndex: subtitleIndex ?? -1,
+            },
          );
        }
        if (!Platform.isTV) await deactivateKeepAwake();
@@ -515,7 +552,7 @@ export default function page() {
  /** Whether the stream we're playing is not transcoding*/
  const notTranscoding = !stream?.mediaSource.TranscodingUrl;
  /** The initial options to pass to the VLC Player */
-  const initOptions = [`--sub-text-scale=${settings.subtitleSize}`];
+  const initOptions = [``];
  if (
    chosenSubtitleTrack &&
    (notTranscoding || chosenSubtitleTrack.IsTextSubtitleStream)
@@ -540,6 +577,60 @@ export default function page() {
    return () => setIsMounted(false);
  }, []);

+  // Memoize video ref functions to prevent unnecessary re-renders
+  const startPictureInPicture = useCallback(async () => {
+    return videoRef.current?.startPictureInPicture?.();
+  }, []);
+  const play = useCallback(() => {
+    videoRef.current?.play?.();
+  }, []);
+
+  const pause = useCallback(() => {
+    videoRef.current?.pause?.();
+  }, []);
+
+  const seek = useCallback((position: number) => {
+    videoRef.current?.seekTo?.(position);
+  }, []);
+  const getAudioTracks = useCallback(async () => {
+    return videoRef.current?.getAudioTracks?.() || null;
+  }, []);
+
+  const getSubtitleTracks = useCallback(async () => {
+    return videoRef.current?.getSubtitleTracks?.() || null;
+  }, []);
+
+  const setSubtitleTrack = useCallback((index: number) => {
+    videoRef.current?.setSubtitleTrack?.(index);
+  }, []);
+
+  const setSubtitleURL = useCallback((url: string, _customName?: string) => {
+    // Note: VlcPlayer type only expects url parameter
+    videoRef.current?.setSubtitleURL?.(url);
+  }, []);
+
+  const setAudioTrack = useCallback((index: number) => {
+    videoRef.current?.setAudioTrack?.(index);
+  }, []);
+
+  const setVideoAspectRatio = useCallback(
+    async (aspectRatio: string | null) => {
+      return (
+        videoRef.current?.setVideoAspectRatio?.(aspectRatio) ||
+        Promise.resolve()
+      );
+    },
+    [],
+  );
+
+  const setVideoScaleFactor = useCallback(async (scaleFactor: number) => {
+    return (
+      videoRef.current?.setVideoScaleFactor?.(scaleFactor) || Promise.resolve()
+    );
+  }, []);
+
+  console.log("Debug: component render"); // Uncomment to debug re-renders
+
  // Show error UI first, before checking loading/missing‐data
  if (itemStatus.isError || streamStatus.isError) {
    return (
@@ -567,7 +658,14 @@ export default function page() {
    );

  return (
-    <View style={{ flex: 1, backgroundColor: "black" }}>
+    <View
+      style={{
+        flex: 1,
+        backgroundColor: "black",
+        height: "100%",
+        width: "100%",
+      }}
+    >
      <View
        style={{
          display: "flex",
@@ -576,8 +674,6 @@ export default function page() {
          position: "relative",
          flexDirection: "column",
          justifyContent: "center",
-          paddingLeft: ignoreSafeAreas ? 0 : insets.left,
-          paddingRight: ignoreSafeAreas ? 0 : insets.right,
        }}
      >
        <VlcPlayerView
@@ -621,20 +717,24 @@ export default function page() {
          isBuffering={isBuffering}
          showControls={showControls}
          setShowControls={setShowControls}
-          setIgnoreSafeAreas={setIgnoreSafeAreas}
-          ignoreSafeAreas={ignoreSafeAreas}
          isVideoLoaded={isVideoLoaded}
-          startPictureInPicture={videoRef.current?.startPictureInPicture}
-          play={videoRef.current?.play}
-          pause={videoRef.current?.pause}
-          seek={videoRef.current?.seekTo}
+          startPictureInPicture={startPictureInPicture}
+          play={play}
+          pause={pause}
+          seek={seek}
          enableTrickplay={true}
-          getAudioTracks={videoRef.current?.getAudioTracks}
-          getSubtitleTracks={videoRef.current?.getSubtitleTracks}
+          getAudioTracks={getAudioTracks}
+          getSubtitleTracks={getSubtitleTracks}
          offline={offline}
-          setSubtitleTrack={videoRef.current?.setSubtitleTrack}
-          setSubtitleURL={videoRef.current?.setSubtitleURL}
-          setAudioTrack={videoRef.current?.setAudioTrack}
+          setSubtitleTrack={setSubtitleTrack}
+          setSubtitleURL={setSubtitleURL}
+          setAudioTrack={setAudioTrack}
+          setVideoAspectRatio={setVideoAspectRatio}
+          setVideoScaleFactor={setVideoScaleFactor}
+          aspectRatio={aspectRatio}
+          scaleFactor={scaleFactor}
+          setAspectRatio={setAspectRatio}
+          setScaleFactor={setScaleFactor}
          isVlc
        />
      )}
--- a/biome.json
+++ b/biome.json
@@ -1,14 +1,14 @@
 {
-  "$schema": "https://biomejs.dev/schemas/2.1.4/schema.json",
+  "$schema": "https://biomejs.dev/schemas/2.2.0/schema.json",
  "files": {
    "includes": [
      "**/*",
-      "!node_modules/**",
-      "!ios/**",
-      "!android/**",
-      "!Streamyfin.app/**",
-      "!utils/jellyseerr/**",
-      "!.expo/**"
+      "!node_modules",
+      "!ios",
+      "!android",
+      "!Streamyfin.app",
+      "!utils/jellyseerr",
+      "!.expo"
    ]
  },
  "linter": {
--- a/bun.lock
+++ b/bun.lock
@@ -49,7 +49,7 @@
        "i18next": "^25.0.0",
        "jotai": "^2.12.5",
        "lodash": "^4.17.21",
-        "nativewind": "^4.0.0",
+        "nativewind": "^2.0.11",
        "react": "19.0.0",
        "react-dom": "19.0.0",
        "react-i18next": "^15.4.0",
@@ -66,6 +66,7 @@
        "react-native-ios-context-menu": "^3.1.0",
        "react-native-ios-utilities": "5.1.8",
        "react-native-mmkv": "2.12.2",
+        "react-native-pager-view": "^6.9.1",
        "react-native-reanimated": "~3.16.7",
        "react-native-reanimated-carousel": "4.0.2",
        "react-native-safe-area-context": "5.4.0",
@@ -85,7 +86,7 @@
      },
      "devDependencies": {
        "@babel/core": "^7.20.0",
-        "@biomejs/biome": "^2.1.4",
+        "@biomejs/biome": "^2.2.0",
        "@react-native-community/cli": "^20.0.0",
        "@react-native-tvos/config-tv": "^0.1.1",
        "@types/jest": "^29.5.12",
@@ -133,7 +134,7 @@

    "@babel/helper-member-expression-to-functions": ["@babel/helper-member-expression-to-functions@7.27.1", "", { "dependencies": { "@babel/traverse": "^7.27.1", "@babel/types": "^7.27.1" } }, "sha512-E5chM8eWjTp/aNoVpcbfM7mLxu9XGLWYise2eBKGQomAk/Mb4XoxyqXTZbuTohbsl8EKqdlMhnDI2CCLfcs9wA=="],

-    "@babel/helper-module-imports": ["@babel/helper-module-imports@7.27.1", "", { "dependencies": { "@babel/traverse": "^7.27.1", "@babel/types": "^7.27.1" } }, "sha512-0gSFWUPNXNopqtIPQvlD5WgXYI5GY2kP2cCvoT8kczjbfcfuIljTbcWrulD1CIPIX2gt1wghbDy08yE1p+/r3w=="],
+    "@babel/helper-module-imports": ["@babel/helper-module-imports@7.18.6", "", { "dependencies": { "@babel/types": "^7.18.6" } }, "sha512-0NFvs3VkuSYbFi1x2Vd6tKrywq+z/cLeYC/RJNFrIX/30Bf5aiGYbtvGXolEktzJH8o5E5KJ3tT+nkxuuZFVlA=="],

    "@babel/helper-module-transforms": ["@babel/helper-module-transforms@7.28.3", "", { "dependencies": { "@babel/helper-module-imports": "^7.27.1", "@babel/helper-validator-identifier": "^7.27.1", "@babel/traverse": "^7.28.3" }, "peerDependencies": { "@babel/core": "^7.0.0" } }, "sha512-gytXUbs8k2sXS9PnQptz5o0QnpLL51SwASIORY6XaBKF88nsOT0Zw9szLqlSGQDP/4TljBAD5y98p2U1fqkdsw=="],

@@ -701,8 +702,6 @@

    "aria-hidden": ["aria-hidden@1.2.6", "", { "dependencies": { "tslib": "^2.0.0" } }, "sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA=="],

-    "array-timsort": ["array-timsort@1.0.3", "", {}, "sha512-/+3GRL7dDAGEfM6TseQk/U+mi18TU2Ms9I3UlLdUMhz2hbvGNTKdj9xniwXfUqgYhHxRx0+8UnKkvlNwVU+cWQ=="],
-
    "asap": ["asap@2.0.6", "", {}, "sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA=="],

    "assert": ["assert@2.1.0", "", { "dependencies": { "call-bind": "^1.0.2", "is-nan": "^1.3.2", "object-is": "^1.1.5", "object.assign": "^4.1.4", "util": "^0.12.5" } }, "sha512-eLHpSK/Y4nhMJ07gDaAzoX/XAKS8PSaojml3M0DM4JpV1LAi5JOJ/p6H/XWrl8L+DzVEvVCW1z3vWAaB9oTsQw=="],
@@ -795,6 +794,8 @@

    "camelcase-css": ["camelcase-css@2.0.1", "", {}, "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA=="],

+    "camelize": ["camelize@1.0.1", "", {}, "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ=="],
+
    "caniuse-lite": ["caniuse-lite@1.0.30001735", "", {}, "sha512-EV/laoX7Wq2J9TQlyIXRxTJqIw4sxfXS4OYgudGxBYRuTv0q7AM6yMEpU/Vo1I94thg9U6EZ2NfZx9GJq83u7w=="],

    "chalk": ["chalk@4.1.2", "", { "dependencies": { "ansi-styles": "^4.1.0", "supports-color": "^7.1.0" } }, "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA=="],
@@ -837,8 +838,6 @@

    "commander": ["commander@9.5.0", "", {}, "sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ=="],

-    "comment-json": ["comment-json@4.2.5", "", { "dependencies": { "array-timsort": "^1.0.3", "core-util-is": "^1.0.3", "esprima": "^4.0.1", "has-own-prop": "^2.0.0", "repeat-string": "^1.6.1" } }, "sha512-bKw/r35jR3HGt5PEPm1ljsQQGyCrR8sFGNiN5L+ykDHdpO8Smxkrkla9Yi6NkQyUrb8V54PGhfMs6NrIwtxtdw=="],
-
    "compressible": ["compressible@2.0.18", "", { "dependencies": { "mime-db": ">= 1.43.0 < 2" } }, "sha512-AF3r7P5dWxL8MxyITRMlORQNaOA2IkAFaTr4k7BUumjPtRpGDTZpl0Pb1XCO6JeDCBdp126Cgs9sMxqSjgYyRg=="],

    "compression": ["compression@1.8.1", "", { "dependencies": { "bytes": "3.1.2", "compressible": "~2.0.18", "debug": "2.6.9", "negotiator": "~0.6.4", "on-headers": "~1.1.0", "safe-buffer": "5.2.1", "vary": "~1.1.2" } }, "sha512-9mAqGPHLakhCLeNyxPkK4xVo746zQ/czLH1Ky+vkitMnWfWZps8r0qXuwhwizagCRttsL4lfG4pIOvaWLpAP0w=="],
@@ -853,8 +852,6 @@

    "core-js-compat": ["core-js-compat@3.45.0", "", { "dependencies": { "browserslist": "^4.25.1" } }, "sha512-gRoVMBawZg0OnxaVv3zpqLLxaHmsubEGyTnqdpI/CEBvX4JadI1dMSHxagThprYRtSVbuQxvi6iUatdPxohHpA=="],

-    "core-util-is": ["core-util-is@1.0.3", "", {}, "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ=="],
-
    "cosmiconfig": ["cosmiconfig@9.0.0", "", { "dependencies": { "env-paths": "^2.2.1", "import-fresh": "^3.3.0", "js-yaml": "^4.1.0", "parse-json": "^5.2.0" }, "peerDependencies": { "typescript": ">=4.9.5" }, "optionalPeers": ["typescript"] }, "sha512-itvL5h8RETACmOTFc4UfIyB2RfEHi71Ax6E/PivVxq9NseKbOWpeyHEOIbmAw1rs8Ak0VursQNww7lf7YtUwzg=="],

    "cross-env": ["cross-env@10.0.0", "", { "dependencies": { "@epic-web/invariant": "^1.0.0", "cross-spawn": "^7.0.6" }, "bin": { "cross-env": "dist/bin/cross-env.js", "cross-env-shell": "dist/bin/cross-env-shell.js" } }, "sha512-aU8qlEK/nHYtVuN4p7UQgAwVljzMg8hB4YK5ThRqD2l/ziSnryncPNn7bMLt5cFYsKVKBh8HqLqyCoTupEUu7Q=="],
@@ -865,10 +862,16 @@

    "crypto-random-string": ["crypto-random-string@2.0.0", "", {}, "sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA=="],

+    "css-color-keywords": ["css-color-keywords@1.0.0", "", {}, "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg=="],
+
    "css-in-js-utils": ["css-in-js-utils@3.1.0", "", { "dependencies": { "hyphenate-style-name": "^1.0.3" } }, "sha512-fJAcud6B3rRu+KHYk+Bwf+WFL2MDCJJ1XG9x137tJQ0xYxor7XziQtuGFbWNdqrvF4Tk26O3H73nfVqXt/fW1A=="],

+    "css-mediaquery": ["css-mediaquery@0.1.2", "", {}, "sha512-COtn4EROW5dBGlE/4PiKnh6rZpAPxDeFLaEEwt4i10jpDMFt2EhQGS79QmmrO+iKCHv0PU/HrOWEhijFd1x99Q=="],
+
    "css-select": ["css-select@5.2.2", "", { "dependencies": { "boolbase": "^1.0.0", "css-what": "^6.1.0", "domhandler": "^5.0.2", "domutils": "^3.0.1", "nth-check": "^2.0.1" } }, "sha512-TizTzUddG/xYLA3NXodFM0fSbNizXjOKhqiQQwvhlspadZokn1KDy0NZFS0wuEubIYAV5/c1/lAr0TaaFXEXzw=="],

+    "css-to-react-native": ["css-to-react-native@3.2.0", "", { "dependencies": { "camelize": "^1.0.0", "css-color-keywords": "^1.0.0", "postcss-value-parser": "^4.0.2" } }, "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ=="],
+
    "css-tree": ["css-tree@1.1.3", "", { "dependencies": { "mdn-data": "2.0.14", "source-map": "^0.6.1" } }, "sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q=="],

    "css-what": ["css-what@6.2.2", "", {}, "sha512-u/O3vwbptzhMs3L1fQE82ZSLHQQfto5gyZzwteVIEyeaY5Fc7R4dapF/BvRoSYFeqfBk4m0V1Vafq5Pjv25wvA=="],
@@ -1061,6 +1064,8 @@

    "exponential-backoff": ["exponential-backoff@3.1.2", "", {}, "sha512-8QxYTVXUkuy7fIIoitQkPwGonB8F3Zj8eEO8Sqg9Zv/bkI7RJAzowee4gr81Hak/dUTpA2Z7VfQgoijjPNlUZA=="],

+    "extend": ["extend@3.0.2", "", {}, "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g=="],
+
    "fast-deep-equal": ["fast-deep-equal@3.1.3", "", {}, "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="],

    "fast-glob": ["fast-glob@3.3.3", "", { "dependencies": { "@nodelib/fs.stat": "^2.0.2", "@nodelib/fs.walk": "^1.2.3", "glob-parent": "^5.1.2", "merge2": "^1.3.0", "micromatch": "^4.0.8" } }, "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg=="],
@@ -1143,8 +1148,6 @@

    "has-flag": ["has-flag@4.0.0", "", {}, "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="],

-    "has-own-prop": ["has-own-prop@2.0.0", "", {}, "sha512-Pq0h+hvsVm6dDEa8x82GnLSYHOzNDt7f0ddFa3FqcQlgzEiptPqL+XrOJNavjOzSYiYWIrgeVYYgGlLmnxwilQ=="],
-
    "has-property-descriptors": ["has-property-descriptors@1.0.2", "", { "dependencies": { "es-define-property": "^1.0.0" } }, "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg=="],

    "has-symbols": ["has-symbols@1.1.0", "", {}, "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ=="],
@@ -1429,7 +1432,7 @@

    "nanoid": ["nanoid@3.3.11", "", { "bin": { "nanoid": "bin/nanoid.cjs" } }, "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w=="],

-    "nativewind": ["nativewind@4.1.23", "", { "dependencies": { "comment-json": "^4.2.5", "debug": "^4.3.7", "react-native-css-interop": "0.1.22" }, "peerDependencies": { "tailwindcss": ">3.3.0" } }, "sha512-oLX3suGI6ojQqWxdQezOSM5GmJ4KvMnMtmaSMN9Ggb5j7ysFt4nHxb1xs8RDjZR7BWc+bsetNJU8IQdQMHqRpg=="],
+    "nativewind": ["nativewind@2.0.11", "", { "dependencies": { "@babel/generator": "^7.18.7", "@babel/helper-module-imports": "7.18.6", "@babel/types": "7.19.0", "css-mediaquery": "^0.1.2", "css-to-react-native": "^3.0.0", "micromatch": "^4.0.5", "postcss": "^8.4.12", "postcss-calc": "^8.2.4", "postcss-color-functional-notation": "^4.2.2", "postcss-css-variables": "^0.18.0", "postcss-nested": "^5.0.6", "react-is": "^18.1.0", "use-sync-external-store": "^1.1.0" }, "peerDependencies": { "tailwindcss": "~3" } }, "sha512-qCEXUwKW21RYJ33KRAJl3zXq2bCq82WoI564fI21D/TiqhfmstZOqPN53RF8qK1NDK6PGl56b2xaTxgObEePEg=="],

    "negotiator": ["negotiator@0.6.4", "", {}, "sha512-myRT3DiWPHqho5PrJaIRyaMv2kgYf0mUVgBNOYMuCH5Ki1yEiQaf/ZJuQ62nvpc44wL5WDbTX7yGJi1Neevw8w=="],

@@ -1537,13 +1540,19 @@

    "postcss": ["postcss@8.5.6", "", { "dependencies": { "nanoid": "^3.3.11", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" } }, "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg=="],

+    "postcss-calc": ["postcss-calc@8.2.4", "", { "dependencies": { "postcss-selector-parser": "^6.0.9", "postcss-value-parser": "^4.2.0" }, "peerDependencies": { "postcss": "^8.2.2" } }, "sha512-SmWMSJmB8MRnnULldx0lQIyhSNvuDl9HfrZkaqqE/WHAhToYsAvDq+yAsA/kIyINDszOp3Rh0GFoNuH5Ypsm3Q=="],
+
+    "postcss-color-functional-notation": ["postcss-color-functional-notation@4.2.4", "", { "dependencies": { "postcss-value-parser": "^4.2.0" }, "peerDependencies": { "postcss": "^8.2" } }, "sha512-2yrTAUZUab9s6CpxkxC4rVgFEVaR6/2Pipvi6qcgvnYiVqZcbDHEoBDhrXzyb7Efh2CCfHQNtcqWcIruDTIUeg=="],
+
+    "postcss-css-variables": ["postcss-css-variables@0.18.0", "", { "dependencies": { "balanced-match": "^1.0.0", "escape-string-regexp": "^1.0.3", "extend": "^3.0.1" }, "peerDependencies": { "postcss": "^8.2.6" } }, "sha512-lYS802gHbzn1GI+lXvy9MYIYDuGnl1WB4FTKoqMQqJ3Mab09A7a/1wZvGTkCEZJTM8mSbIyb1mJYn8f0aPye0Q=="],
+
    "postcss-import": ["postcss-import@15.1.0", "", { "dependencies": { "postcss-value-parser": "^4.0.0", "read-cache": "^1.0.0", "resolve": "^1.1.7" }, "peerDependencies": { "postcss": "^8.0.0" } }, "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew=="],

    "postcss-js": ["postcss-js@4.0.1", "", { "dependencies": { "camelcase-css": "^2.0.1" }, "peerDependencies": { "postcss": "^8.4.21" } }, "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw=="],

    "postcss-load-config": ["postcss-load-config@4.0.2", "", { "dependencies": { "lilconfig": "^3.0.0", "yaml": "^2.3.4" }, "peerDependencies": { "postcss": ">=8.0.9", "ts-node": ">=9.0.0" }, "optionalPeers": ["postcss", "ts-node"] }, "sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ=="],

-    "postcss-nested": ["postcss-nested@6.2.0", "", { "dependencies": { "postcss-selector-parser": "^6.1.1" }, "peerDependencies": { "postcss": "^8.2.14" } }, "sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ=="],
+    "postcss-nested": ["postcss-nested@5.0.6", "", { "dependencies": { "postcss-selector-parser": "^6.0.6" }, "peerDependencies": { "postcss": "^8.2.14" } }, "sha512-rKqm2Fk0KbA8Vt3AdGN0FB9OBOMDVajMG6ZCf/GoHgdxUJ4sBFp0A/uMIRm+MJUdo33YXEtjqIz8u7DAp8B7DA=="],

    "postcss-selector-parser": ["postcss-selector-parser@6.1.2", "", { "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" } }, "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg=="],

@@ -1613,8 +1622,6 @@

    "react-native-country-flag": ["react-native-country-flag@2.0.2", "", {}, "sha512-5LMWxS79ZQ0Q9ntYgDYzWp794+HcQGXQmzzZNBR1AT7z5HcJHtX7rlk8RHi7RVzfp5gW6plWSZ4dKjRpu/OafQ=="],

-    "react-native-css-interop": ["react-native-css-interop@0.1.22", "", { "dependencies": { "@babel/helper-module-imports": "^7.22.15", "@babel/traverse": "^7.23.0", "@babel/types": "^7.23.0", "debug": "^4.3.7", "lightningcss": "^1.27.0", "semver": "^7.6.3" }, "peerDependencies": { "react": ">=18", "react-native": "*", "react-native-reanimated": ">=3.6.2", "tailwindcss": "~3" } }, "sha512-Mu01e+H9G+fxSWvwtgWlF5MJBJC4VszTCBXopIpeR171lbeBInHb8aHqoqRPxmJpi3xIHryzqKFOJYAdk7PBxg=="],
-
    "react-native-device-info": ["react-native-device-info@14.0.4", "", { "peerDependencies": { "react-native": "*" } }, "sha512-NX0wMAknSDBeFnEnSFQ8kkAcQrFHrG4Cl0mVjoD+0++iaKrOupiGpBXqs8xR0SeJyPC5zpdPl4h/SaBGly6UxA=="],

    "react-native-edge-to-edge": ["react-native-edge-to-edge@1.6.0", "", { "peerDependencies": { "react": "*", "react-native": "*" } }, "sha512-2WCNdE3Qd6Fwg9+4BpbATUxCLcouF6YRY7K+J36KJ4l3y+tWN6XCqAC4DuoGblAAbb2sLkhEDp4FOlbOIot2Og=="],
@@ -1691,8 +1698,6 @@

    "regjsparser": ["regjsparser@0.12.0", "", { "dependencies": { "jsesc": "~3.0.2" }, "bin": { "regjsparser": "bin/parser" } }, "sha512-cnE+y8bz4NhMjISKbgeVJtqNbtf5QpjZP+Bslo+UqkIt9QPnX9q095eiRRASJG1/tz6dlNr6Z5NsBiWYokp6EQ=="],

-    "repeat-string": ["repeat-string@1.6.1", "", {}, "sha512-PV0dzCYDNfRi1jCDbJzpW7jNNDRuCOG/jI5ctQcGKt/clZD+YcPS3yIlWuTJMmESC8aevCFmWJy5wjAFgNqN6w=="],
-
    "require-directory": ["require-directory@2.1.1", "", {}, "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q=="],

    "require-from-string": ["require-from-string@2.0.2", "", {}, "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw=="],
@@ -1863,6 +1868,8 @@

    "tmpl": ["tmpl@1.0.5", "", {}, "sha512-3f0uOEAQwIqGuWW2MVzYg8fV/QNnc/IpuJNG837rLuczAaLVHslWHZQj4IGiEl5Hs3kkbhwL9Ab7Hrsmuj+Smw=="],

+    "to-fast-properties": ["to-fast-properties@2.0.0", "", {}, "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog=="],
+
    "to-regex-range": ["to-regex-range@5.0.1", "", { "dependencies": { "is-number": "^7.0.0" } }, "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ=="],

    "toidentifier": ["toidentifier@1.0.1", "", {}, "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA=="],
@@ -1993,8 +2000,16 @@

    "zod": ["zod@3.25.76", "", {}, "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ=="],

+    "@babel/helper-module-transforms/@babel/helper-module-imports": ["@babel/helper-module-imports@7.27.1", "", { "dependencies": { "@babel/traverse": "^7.27.1", "@babel/types": "^7.27.1" } }, "sha512-0gSFWUPNXNopqtIPQvlD5WgXYI5GY2kP2cCvoT8kczjbfcfuIljTbcWrulD1CIPIX2gt1wghbDy08yE1p+/r3w=="],
+
    "@babel/highlight/chalk": ["chalk@2.4.2", "", { "dependencies": { "ansi-styles": "^3.2.1", "escape-string-regexp": "^1.0.5", "supports-color": "^5.3.0" } }, "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ=="],

+    "@babel/plugin-transform-async-to-generator/@babel/helper-module-imports": ["@babel/helper-module-imports@7.27.1", "", { "dependencies": { "@babel/traverse": "^7.27.1", "@babel/types": "^7.27.1" } }, "sha512-0gSFWUPNXNopqtIPQvlD5WgXYI5GY2kP2cCvoT8kczjbfcfuIljTbcWrulD1CIPIX2gt1wghbDy08yE1p+/r3w=="],
+
+    "@babel/plugin-transform-react-jsx/@babel/helper-module-imports": ["@babel/helper-module-imports@7.27.1", "", { "dependencies": { "@babel/traverse": "^7.27.1", "@babel/types": "^7.27.1" } }, "sha512-0gSFWUPNXNopqtIPQvlD5WgXYI5GY2kP2cCvoT8kczjbfcfuIljTbcWrulD1CIPIX2gt1wghbDy08yE1p+/r3w=="],
+
+    "@babel/plugin-transform-runtime/@babel/helper-module-imports": ["@babel/helper-module-imports@7.27.1", "", { "dependencies": { "@babel/traverse": "^7.27.1", "@babel/types": "^7.27.1" } }, "sha512-0gSFWUPNXNopqtIPQvlD5WgXYI5GY2kP2cCvoT8kczjbfcfuIljTbcWrulD1CIPIX2gt1wghbDy08yE1p+/r3w=="],
+
    "@expo/cli/getenv": ["getenv@2.0.0", "", {}, "sha512-VilgtJj/ALgGY77fiLam5iD336eSWi96Q15JSAG1zi8NRBysm3LXKdGnHb4m5cuyxvOLQQKWpBZAT6ni4FI2iQ=="],

    "@expo/cli/ora": ["ora@3.4.0", "", { "dependencies": { "chalk": "^2.4.2", "cli-cursor": "^2.1.0", "cli-spinners": "^2.0.0", "log-symbols": "^2.2.0", "strip-ansi": "^5.2.0", "wcwidth": "^1.0.1" } }, "sha512-eNwHudNbO1folBP3JsZ19v9azXWtQZjICdr3Q0TDPIaeBQ3mXLrh54wM+er0+hSp+dWKf+Z8KM58CYzEyIYxYg=="],
@@ -2085,6 +2100,8 @@

    "ansi-fragments/strip-ansi": ["strip-ansi@5.2.0", "", { "dependencies": { "ansi-regex": "^4.1.0" } }, "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA=="],

+    "babel-preset-expo/@babel/helper-module-imports": ["@babel/helper-module-imports@7.27.1", "", { "dependencies": { "@babel/traverse": "^7.27.1", "@babel/types": "^7.27.1" } }, "sha512-0gSFWUPNXNopqtIPQvlD5WgXYI5GY2kP2cCvoT8kczjbfcfuIljTbcWrulD1CIPIX2gt1wghbDy08yE1p+/r3w=="],
+
    "better-opn/open": ["open@8.4.2", "", { "dependencies": { "define-lazy-prop": "^2.0.0", "is-docker": "^2.1.1", "is-wsl": "^2.2.0" } }, "sha512-7x81NCL719oNbsq/3mh+hVrAWmFuEYUqrq/Iw3kUzH8ReypT9QQ0BLoJS7/G9k6N81XjW4qHWtjWwe/9eLy1EQ=="],

    "body-parser/debug": ["debug@2.6.9", "", { "dependencies": { "ms": "2.0.0" } }, "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA=="],
@@ -2169,12 +2186,18 @@

    "metro-config/cosmiconfig": ["cosmiconfig@5.2.1", "", { "dependencies": { "import-fresh": "^2.0.0", "is-directory": "^0.3.1", "js-yaml": "^3.13.1", "parse-json": "^4.0.0" } }, "sha512-H65gsXo1SKjf8zmrJ67eJk8aIRKV5ff2D4uKZIBZShbhGSpEmsQOPW/SKMKYhSTrqR7ufy6RP69rPogdaPh/kA=="],

+    "nativewind/@babel/types": ["@babel/types@7.19.0", "", { "dependencies": { "@babel/helper-string-parser": "^7.18.10", "@babel/helper-validator-identifier": "^7.18.6", "to-fast-properties": "^2.0.0" } }, "sha512-YuGopBq3ke25BVSiS6fgF49Ul9gH1x70Bcr6bqRLjWCkcX8Hre1/5+z+IiWOIerRMSSEfGZVB9z9kyq7wVs9YA=="],
+
+    "nativewind/react-is": ["react-is@18.3.1", "", {}, "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg=="],
+
    "node-vibrant/@types/node": ["@types/node@18.19.122", "", { "dependencies": { "undici-types": "~5.26.4" } }, "sha512-yzegtT82dwTNEe/9y+CM8cgb42WrUfMMCg2QqSddzO1J6uPmBD7qKCZ7dOHZP2Yrpm/kb0eqdNMn2MUyEiqBmA=="],

    "npm-package-arg/semver": ["semver@7.7.2", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA=="],

    "path-scurry/lru-cache": ["lru-cache@10.4.3", "", {}, "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ=="],

+    "postcss-css-variables/escape-string-regexp": ["escape-string-regexp@1.0.5", "", {}, "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg=="],
+
    "pretty-format/ansi-styles": ["ansi-styles@5.2.0", "", {}, "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA=="],

    "pretty-format/react-is": ["react-is@18.3.1", "", {}, "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg=="],
@@ -2193,8 +2216,6 @@

    "react-native/semver": ["semver@7.7.2", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA=="],

-    "react-native-css-interop/semver": ["semver@7.7.2", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA=="],
-
    "react-native-web/@react-native/normalize-colors": ["@react-native/normalize-colors@0.74.89", "", {}, "sha512-qoMMXddVKVhZ8PA1AbUCk83trpd6N+1nF2A6k1i6LsQObyS92fELuk8kU/lQs6M7BsMHwqyLCpQJ1uFgNvIQXg=="],

    "react-native-web/memoize-one": ["memoize-one@6.0.0", "", {}, "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw=="],
@@ -2227,6 +2248,8 @@

    "tailwindcss/lilconfig": ["lilconfig@2.1.0", "", {}, "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ=="],

+    "tailwindcss/postcss-nested": ["postcss-nested@6.2.0", "", { "dependencies": { "postcss-selector-parser": "^6.1.1" }, "peerDependencies": { "postcss": "^8.2.14" } }, "sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ=="],
+
    "tar/yallist": ["yallist@5.0.0", "", {}, "sha512-YgvUTfwqyc7UXVMrB+SImsVYSmTS8X/tSrtdNZMImM+n7+QTriRXyXim0mBrTXNeqzVF0KWGgHPeiyViFFrNDw=="],

    "terminal-link/ansi-escapes": ["ansi-escapes@4.3.2", "", { "dependencies": { "type-fest": "^0.21.3" } }, "sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ=="],
--- a/components/DownloadItem.tsx
+++ b/components/DownloadItem.tsx
@@ -9,13 +9,14 @@ import type {
  BaseItemDto,
  MediaSourceInfo,
 } from "@jellyfin/sdk/lib/generated-client/models";
-import { type Href, router, useFocusEffect } from "expo-router";
+import { type Href, router } from "expo-router";
 import { t } from "i18next";
 import { useAtom } from "jotai";
 import type React from "react";
-import { useCallback, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Alert, Platform, Switch, View, type ViewProps } from "react-native";
 import { toast } from "sonner-native";
+import useDefaultPlaySettings from "@/hooks/useDefaultPlaySettings";
 import { useDownload } from "@/providers/DownloadProvider";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { queueAtom } from "@/utils/atoms/queue";
@@ -32,6 +33,13 @@ import ProgressCircle from "./ProgressCircle";
 import { RoundButton } from "./RoundButton";
 import { SubtitleTrackSelector } from "./SubtitleTrackSelector";

+export type SelectedOptions = {
+  bitrate: Bitrate;
+  mediaSource: MediaSourceInfo | undefined;
+  audioIndex: number | undefined;
+  subtitleIndex: number;
+};
+
 interface DownloadProps extends ViewProps {
  items: BaseItemDto[];
  MissingDownloadIconComponent: () => React.ReactElement;
@@ -60,18 +68,16 @@ export const DownloadItems: React.FC<DownloadProps> = ({
    useDownload();
  const downloadedFiles = getDownloadedItems();

-  const [selectedMediaSource, setSelectedMediaSource] = useState<
-    MediaSourceInfo | undefined | null
+  const [selectedOptions, setSelectedOptions] = useState<
+    SelectedOptions | undefined
  >(undefined);
-  const [selectedAudioStream, setSelectedAudioStream] = useState<number>(-1);
-  const [selectedSubtitleStream, setSelectedSubtitleStream] =
-    useState<number>(0);
-  const [maxBitrate, setMaxBitrate] = useState<Bitrate>(
-    settings?.defaultBitrate ?? {
-      key: "Max",
-      value: undefined,
-    },
-  );
+
+  const {
+    defaultAudioIndex,
+    defaultBitrate,
+    defaultMediaSource,
+    defaultSubtitleIndex,
+  } = useDefaultPlaySettings(items[0], settings);

  const userCanDownload = useMemo(
    () => user?.Policy?.EnableContentDownloading,
@@ -98,6 +104,21 @@ export const DownloadItems: React.FC<DownloadProps> = ({
    [items, downloadedFiles],
  );

+  // Initialize selectedOptions with default values
+  useEffect(() => {
+    setSelectedOptions(() => ({
+      bitrate: defaultBitrate,
+      mediaSource: defaultMediaSource,
+      subtitleIndex: defaultSubtitleIndex ?? -1,
+      audioIndex: defaultAudioIndex,
+    }));
+  }, [
+    defaultAudioIndex,
+    defaultBitrate,
+    defaultSubtitleIndex,
+    defaultMediaSource,
+  ]);
+
  const itemsToDownload = useMemo(() => {
    if (downloadUnwatchedOnly) {
      return itemsNotDownloaded.filter((item) => !item.UserData?.Played);
@@ -153,7 +174,7 @@ export const DownloadItems: React.FC<DownloadProps> = ({
        !api ||
        !user?.Id ||
        items.some((p) => !p.Id) ||
-        (itemsNotDownloaded.length === 1 && !selectedMediaSource?.Id)
+        (itemsNotDownloaded.length === 1 && !selectedOptions?.mediaSource?.Id)
      ) {
        throw new Error(
          "DownloadItem ~ initiateDownload: No api or user or item",
@@ -164,9 +185,9 @@ export const DownloadItems: React.FC<DownloadProps> = ({
          itemsNotDownloaded.length > 1
            ? getDefaultPlaySettings(item, settings!)
            : {
-                mediaSource: selectedMediaSource,
-                audioIndex: selectedAudioStream,
-                subtitleIndex: selectedSubtitleStream,
+                mediaSource: selectedOptions?.mediaSource,
+                audioIndex: selectedOptions?.audioIndex,
+                subtitleIndex: selectedOptions?.subtitleIndex,
              };

        const downloadDetails = await getDownloadUrl({
@@ -176,7 +197,7 @@ export const DownloadItems: React.FC<DownloadProps> = ({
          mediaSource: mediaSource!,
          audioStreamIndex: audioIndex ?? -1,
          subtitleStreamIndex: subtitleIndex ?? -1,
-          maxBitrate,
+          maxBitrate: selectedOptions?.bitrate || defaultBitrate,
          deviceId: api.deviceInfo.id,
        });

@@ -205,18 +226,21 @@ export const DownloadItems: React.FC<DownloadProps> = ({
          );
          continue;
        }
-        await startBackgroundDownload(url, item, mediaSource, maxBitrate);
+        await startBackgroundDownload(
+          url,
+          item,
+          mediaSource,
+          selectedOptions?.bitrate || defaultBitrate,
+        );
      }
    },
    [
      api,
      user?.Id,
      itemsNotDownloaded,
-      selectedMediaSource,
-      selectedAudioStream,
-      selectedSubtitleStream,
+      selectedOptions,
      settings,
-      maxBitrate,
+      defaultBitrate,
      startBackgroundDownload,
    ],
  );
@@ -246,18 +270,6 @@ export const DownloadItems: React.FC<DownloadProps> = ({
    ),
    [],
  );
-  useFocusEffect(
-    useCallback(() => {
-      if (!settings) return;
-      if (itemsNotDownloaded.length !== 1) return;
-      const { bitrate, mediaSource, audioIndex, subtitleIndex } =
-        getDefaultPlaySettings(items[0], settings);
-      setSelectedMediaSource(mediaSource ?? undefined);
-      setSelectedAudioStream(audioIndex ?? 0);
-      setSelectedSubtitleStream(subtitleIndex ?? -1);
-      setMaxBitrate(bitrate);
-    }, [items, itemsNotDownloaded, settings]),
-  );

  const renderButtonContent = () => {
    if (processes.length > 0 && itemsProcesses.length > 0) {
@@ -332,8 +344,12 @@ export const DownloadItems: React.FC<DownloadProps> = ({
            <View className='flex flex-col space-y-2 w-full items-start'>
              <BitrateSelector
                inverted
-                onChange={setMaxBitrate}
-                selected={maxBitrate}
+                onChange={(val) =>
+                  setSelectedOptions(
+                    (prev) => prev && { ...prev, bitrate: val },
+                  )
+                }
+                selected={selectedOptions?.bitrate}
              />
              {itemsNotDownloaded.length > 1 && (
                <View className='flex flex-row items-center justify-between w-full py-2'>
@@ -345,27 +361,51 @@ export const DownloadItems: React.FC<DownloadProps> = ({
                </View>
              )}
              {itemsNotDownloaded.length === 1 && (
-                <>
+                <View>
                  <MediaSourceSelector
                    item={items[0]}
-                    onChange={setSelectedMediaSource}
-                    selected={selectedMediaSource}
+                    onChange={(val) =>
+                      setSelectedOptions(
+                        (prev) =>
+                          prev && {
+                            ...prev,
+                            mediaSource: val,
+                          },
+                      )
+                    }
+                    selected={selectedOptions?.mediaSource}
                  />
-                  {selectedMediaSource && (
+                  {selectedOptions?.mediaSource && (
                    <View className='flex flex-col space-y-2'>
                      <AudioTrackSelector
-                        source={selectedMediaSource}
-                        onChange={setSelectedAudioStream}
-                        selected={selectedAudioStream}
+                        source={selectedOptions.mediaSource}
+                        onChange={(val) => {
+                          setSelectedOptions(
+                            (prev) =>
+                              prev && {
+                                ...prev,
+                                audioIndex: val,
+                              },
+                          );
+                        }}
+                        selected={selectedOptions.audioIndex}
                      />
                      <SubtitleTrackSelector
-                        source={selectedMediaSource}
-                        onChange={setSelectedSubtitleStream}
-                        selected={selectedSubtitleStream}
+                        source={selectedOptions.mediaSource}
+                        onChange={(val) => {
+                          setSelectedOptions(
+                            (prev) =>
+                              prev && {
+                                ...prev,
+                                subtitleIndex: val,
+                              },
+                          );
+                        }}
+                        selected={selectedOptions.subtitleIndex}
                      />
                    </View>
                  )}
-                </>
+                </View>
              )}
            </View>

--- a/components/ItemContent.tsx
+++ b/components/ItemContent.tsx
@@ -186,7 +186,7 @@ export const ItemContent: React.FC<ItemContentProps> = React.memo(
        >
          <View className='flex flex-col bg-transparent shrink'>
            <View className='flex flex-col px-4 w-full space-y-2 pt-2 mb-2 shrink'>
-              <ItemHeader item={item} className='mb-4' />
+              <ItemHeader item={item} className='mb-2' />
              {item.Type !== "Program" && !Platform.isTV && !isOffline && (
                <View className='flex flex-row items-center justify-start w-full h-16'>
                  <BitrateSelector
--- a/components/MediaSourceSelector.tsx
+++ b/components/MediaSourceSelector.tsx
@@ -2,7 +2,7 @@ import type {
  BaseItemDto,
  MediaSourceInfo,
 } from "@jellyfin/sdk/lib/generated-client/models";
-import { useMemo } from "react";
+import { useCallback, useMemo } from "react";
 import { Platform, TouchableOpacity, View } from "react-native";

 const DropdownMenu = !Platform.isTV ? require("zeego/dropdown-menu") : null;
@@ -24,36 +24,27 @@ export const MediaSourceSelector: React.FC<Props> = ({
 }) => {
  const isTv = Platform.isTV;

-  const selectedName = useMemo(
-    () =>
-      item.MediaSources?.find((x) => x.Id === selected?.Id)?.MediaStreams?.find(
-        (x) => x.Type === "Video",
-      )?.DisplayTitle || "",
-    [item, selected],
-  );
-
  const { t } = useTranslation();

-  const commonPrefix = useMemo(() => {
-    const mediaSources = item.MediaSources || [];
-    if (!mediaSources.length) return "";
-
-    let commonPrefix = "";
-    for (let i = 0; i < mediaSources[0].Name!.length; i++) {
-      const char = mediaSources[0].Name![i];
-      if (mediaSources.every((source) => source.Name![i] === char)) {
-        commonPrefix += char;
-      } else {
-        commonPrefix = commonPrefix.slice(0, -1);
-        break;
-      }
+  const getDisplayName = useCallback((source: MediaSourceInfo) => {
+    const videoStream = source.MediaStreams?.find((x) => x.Type === "Video");
+    if (videoStream?.DisplayTitle) {
+      return videoStream.DisplayTitle;
    }
-    return commonPrefix;
-  }, [item.MediaSources]);

-  const name = (name?: string | null) => {
-    return name?.replace(commonPrefix, "").toLowerCase();
-  };
+    // Fallback to source name
+    if (source.Name) {
+      return source.Name;
+    }
+
+    // Last resort fallback
+    return `Source ${source.Id}`;
+  }, []);
+
+  const selectedName = useMemo(() => {
+    if (!selected) return "";
+    return getDisplayName(selected);
+  }, [selected, getDisplayName]);

  if (isTv) return null;

@@ -93,7 +84,7 @@ export const MediaSourceSelector: React.FC<Props> = ({
              }}
            >
              <DropdownMenu.ItemTitle>
-                {`${name(source.Name)}`}
+                {getDisplayName(source)}
              </DropdownMenu.ItemTitle>
            </DropdownMenu.Item>
          ))}
--- a/components/common/HorrizontalScroll.tsx
+++ b/components/common/HorrizontalScroll.tsx
@@ -1,5 +1,5 @@
 import { FlashList, type FlashListProps } from "@shopify/flash-list";
-import React, { forwardRef, useImperativeHandle, useRef } from "react";
+import React, { useImperativeHandle, useRef } from "react";
 import { View, type ViewStyle } from "react-native";
 import { Text } from "./Text";

@@ -19,64 +19,59 @@ interface HorizontalScrollProps<T>
  keyExtractor?: (item: T, index: number) => string;
  containerStyle?: ViewStyle;
  contentContainerStyle?: ViewStyle;
-  loadingContainerStyle?: ViewStyle;
  height?: number;
  loading?: boolean;
  extraData?: any;
  noItemsText?: string;
 }

-export const HorizontalScroll = forwardRef<
-  HorizontalScrollRef,
-  HorizontalScrollProps<any>
->(
-  <T,>(
-    {
-      data = [],
-      keyExtractor,
-      renderItem,
-      containerStyle,
-      contentContainerStyle,
-      loadingContainerStyle,
-      loading = false,
-      height = 164,
-      extraData,
-      noItemsText,
-      ...props
-    }: HorizontalScrollProps<T>,
-    ref: React.ForwardedRef<HorizontalScrollRef>,
-  ) => {
-    const flashListRef = useRef<FlashList<T>>(null);
+export const HorizontalScroll = <T,>(
+  props: HorizontalScrollProps<T> & {
+    ref?: React.ForwardedRef<HorizontalScrollRef>;
+  },
+) => {
+  const {
+    data = [],
+    keyExtractor,
+    renderItem,
+    containerStyle,
+    contentContainerStyle,
+    loading = false,
+    height = 164,
+    extraData,
+    noItemsText,
+    ref,
+    ...restProps
+  } = props;

-    useImperativeHandle(ref!, () => ({
-      scrollToIndex: (index: number, viewOffset: number) => {
-        flashListRef.current?.scrollToIndex({
-          index,
-          animated: true,
-          viewPosition: 0,
-          viewOffset,
-        });
-      },
-    }));
+  const flashListRef = useRef<FlashList<T>>(null);

-    const renderFlashListItem = ({
-      item,
-      index,
-    }: {
-      item: T;
-      index: number;
-    }) => <View className='mr-2'>{renderItem(item, index)}</View>;
+  useImperativeHandle(ref!, () => ({
+    scrollToIndex: (index: number, viewOffset: number) => {
+      flashListRef.current?.scrollToIndex({
+        index,
+        animated: true,
+        viewPosition: 0,
+        viewOffset,
+      });
+    },
+  }));

-    if (!data || loading) {
-      return (
-        <View className='px-4 mb-2'>
-          <View className='bg-neutral-950 h-24 w-full rounded-md mb-2' />
-          <View className='bg-neutral-950 h-10 w-full rounded-md mb-1' />
-        </View>
-      );
-    }
+  const renderFlashListItem = ({ item, index }: { item: T; index: number }) => (
+    <View className='mr-2'>{renderItem(item, index)}</View>
+  );

+  if (!data || loading) {
    return (
+      <View className='px-4 mb-2'>
+        <View className='bg-neutral-950 h-24 w-full rounded-md mb-2' />
+        <View className='bg-neutral-950 h-10 w-full rounded-md mb-1' />
+      </View>
+    );
+  }
+
+  return (
+    <View style={[{ height }, containerStyle]}>
      <FlashList<T>
        ref={flashListRef}
        data={data}
@@ -97,8 +92,8 @@ export const HorizontalScroll = forwardRef<
            </Text>
          </View>
        )}
-        {...props}
+        {...restProps}
      />
-    );
-  },
-);
+    </View>
+  );
+};
--- a/components/downloads/ActiveDownloads.tsx
+++ b/components/downloads/ActiveDownloads.tsx
@@ -157,7 +157,7 @@ const DownloadCard = ({ process, ...props }: DownloadCardProps) => {
          <TouchableOpacity
            disabled={cancelJobMutation.isPending}
            onPress={() => cancelJobMutation.mutate(process.id)}
-            className='ml-auto'
+            className='ml-auto p-2 rounded-full'
          >
            {cancelJobMutation.isPending ? (
              <ActivityIndicator size='small' color='white' />
--- a/components/settings/StorageSettings.tsx
+++ b/components/settings/StorageSettings.tsx
@@ -1,7 +1,6 @@
 import { useQuery } from "@tanstack/react-query";
-import * as FileSystem from "expo-file-system";
 import { useTranslation } from "react-i18next";
-import { View } from "react-native";
+import { Platform, View } from "react-native";
 import { toast } from "sonner-native";
 import { Text } from "@/components/common/Text";
 import { Colors } from "@/constants/Colors";
@@ -21,10 +20,12 @@ export const StorageSettings = () => {
    queryFn: async () => {
      const app = await appSizeUsage();

-      const remaining = await FileSystem.getFreeDiskStorageAsync();
-      const total = await FileSystem.getTotalDiskCapacityAsync();
-
-      return { app, remaining, total, used: (total - remaining) / total };
+      return {
+        appSize: app.appSize,
+        total: app.total,
+        remaining: app.remaining,
+        used: (app.total - app.remaining) / app.total,
+      };
    },
  });

@@ -39,6 +40,7 @@ export const StorageSettings = () => {
  };

  const calculatePercentage = (value: number, total: number) => {
+    console.log("usage", value, total);
    return ((value / total) * 100).toFixed(2);
  };

@@ -61,13 +63,13 @@ export const StorageSettings = () => {
            <View className='flex flex-row'>
              <View
                style={{
-                  width: `${(size.app / size.total) * 100}%`,
+                  width: `${(size.appSize / size.total) * 100}%`,
                  backgroundColor: Colors.primaryRGB,
                }}
              />
              <View
                style={{
-                  width: `${((size.total - size.remaining - size.app) / size.total) * 100}%`,
+                  width: `${((size.total - size.remaining - size.appSize) / size.total) * 100}%`,
                  backgroundColor: Colors.primaryLightRGB,
                }}
              />
@@ -81,7 +83,7 @@ export const StorageSettings = () => {
                <View className='w-3 h-3 rounded-full bg-purple-600 mr-1' />
                <Text className='text-white text-xs'>
                  {t("home.settings.storage.app_usage", {
-                    usedSpace: calculatePercentage(size.app, size.total),
+                    usedSpace: calculatePercentage(size.appSize, size.total),
                  })}
                </Text>
              </View>
@@ -90,7 +92,7 @@ export const StorageSettings = () => {
                <Text className='text-white text-xs'>
                  {t("home.settings.storage.device_usage", {
                    availableSpace: calculatePercentage(
-                      size.total - size.remaining - size.app,
+                      size.total - size.remaining - size.appSize,
                      size.total,
                    ),
                  })}
@@ -100,13 +102,15 @@ export const StorageSettings = () => {
          )}
        </View>
      </View>
-      <ListGroup>
-        <ListItem
-          textColor='red'
-          onPress={onDeleteClicked}
-          title={t("home.settings.storage.delete_all_downloaded_files")}
-        />
-      </ListGroup>
+      {!Platform.isTV && (
+        <ListGroup>
+          <ListItem
+            textColor='red'
+            onPress={onDeleteClicked}
+            title={t("home.settings.storage.delete_all_downloaded_files")}
+          />
+        </ListGroup>
+      )}
    </View>
  );
 };
--- a/components/video-player/controls/AudioSlider.tsx
+++ b/components/video-player/controls/AudioSlider.tsx
@@ -113,7 +113,7 @@ const AudioSlider: React.FC<AudioSliderProps> = ({ setVisibility }) => {

 const styles = StyleSheet.create({
  sliderContainer: {
-    width: 150,
+    width: 130,
    display: "flex",
    flexDirection: "row",
    justifyContent: "center",
--- a/components/video-player/controls/BottomControls.tsx
+++ b/components/video-player/controls/BottomControls.tsx
@@ -0,0 +1,224 @@
+import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
+import type { FC } from "react";
+import { View } from "react-native";
+import { Slider } from "react-native-awesome-slider";
+import { type SharedValue } from "react-native-reanimated";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { Text } from "@/components/common/Text";
+import { useSettings } from "@/utils/atoms/settings";
+import NextEpisodeCountDownButton from "./NextEpisodeCountDownButton";
+import SkipButton from "./SkipButton";
+import { TimeDisplay } from "./TimeDisplay";
+import { TrickplayBubble } from "./TrickplayBubble";
+
+interface BottomControlsProps {
+  item: BaseItemDto;
+  showControls: boolean;
+  isSliding: boolean;
+  showRemoteBubble: boolean;
+  currentTime: number;
+  remainingTime: number;
+  isVlc: boolean;
+  showSkipButton: boolean;
+  showSkipCreditButton: boolean;
+  skipIntro: () => void;
+  skipCredit: () => void;
+  nextItem?: BaseItemDto | null;
+  handleNextEpisodeAutoPlay: () => void;
+  handleNextEpisodeManual: () => void;
+  handleControlsInteraction: () => void;
+
+  // Slider props
+  min: SharedValue<number>;
+  max: SharedValue<number>;
+  effectiveProgress: SharedValue<number>;
+  cacheProgress: SharedValue<number>;
+  handleSliderStart: () => void;
+  handleSliderComplete: (value: number) => void;
+  handleSliderChange: (value: number) => void;
+  handleTouchStart: () => void;
+  handleTouchEnd: () => void;
+
+  // Trickplay props
+  trickPlayUrl: {
+    x: number;
+    y: number;
+    url: string;
+  } | null;
+  trickplayInfo: {
+    aspectRatio?: number;
+    data: {
+      TileWidth?: number;
+      TileHeight?: number;
+    };
+  } | null;
+  time: {
+    hours: number;
+    minutes: number;
+    seconds: number;
+  };
+}
+
+export const BottomControls: FC<BottomControlsProps> = ({
+  item,
+  showControls,
+  isSliding,
+  showRemoteBubble,
+  currentTime,
+  remainingTime,
+  isVlc,
+  showSkipButton,
+  showSkipCreditButton,
+  skipIntro,
+  skipCredit,
+  nextItem,
+  handleNextEpisodeAutoPlay,
+  handleNextEpisodeManual,
+  handleControlsInteraction,
+  min,
+  max,
+  effectiveProgress,
+  cacheProgress,
+  handleSliderStart,
+  handleSliderComplete,
+  handleSliderChange,
+  handleTouchStart,
+  handleTouchEnd,
+  trickPlayUrl,
+  trickplayInfo,
+  time,
+}) => {
+  const [settings] = useSettings();
+  const insets = useSafeAreaInsets();
+
+  return (
+    <View
+      style={[
+        {
+          position: "absolute",
+          right: settings?.safeAreaInControlsEnabled ? insets.right : 0,
+          left: settings?.safeAreaInControlsEnabled ? insets.left : 0,
+          bottom: settings?.safeAreaInControlsEnabled
+            ? Math.max(insets.bottom - 17, 0)
+            : 0,
+        },
+      ]}
+      className={"flex flex-col px-2"}
+      onTouchStart={handleControlsInteraction}
+    >
+      <View
+        className='shrink flex flex-col justify-center h-full'
+        style={{
+          flexDirection: "row",
+          justifyContent: "space-between",
+        }}
+      >
+        <View
+          style={{
+            flexDirection: "column",
+            alignSelf: "flex-end",
+            opacity: showControls ? 1 : 0,
+          }}
+          pointerEvents={showControls ? "box-none" : "none"}
+        >
+          {item?.Type === "Episode" && (
+            <Text className='opacity-50'>
+              {`${item.SeriesName} - ${item.SeasonName} Episode ${item.IndexNumber}`}
+            </Text>
+          )}
+          <Text className='font-bold text-xl'>{item?.Name}</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 flex-row space-x-2'>
+          <SkipButton
+            showButton={showSkipButton}
+            onPress={skipIntro}
+            buttonText='Skip Intro'
+          />
+          <SkipButton
+            showButton={showSkipCreditButton}
+            onPress={skipCredit}
+            buttonText='Skip Credits'
+          />
+          {(settings.maxAutoPlayEpisodeCount.value === -1 ||
+            settings.autoPlayEpisodeCount <
+              settings.maxAutoPlayEpisodeCount.value) && (
+            <NextEpisodeCountDownButton
+              show={
+                !nextItem
+                  ? false
+                  : isVlc
+                    ? remainingTime < 10000
+                    : remainingTime < 10
+              }
+              onFinish={handleNextEpisodeAutoPlay}
+              onPress={handleNextEpisodeManual}
+            />
+          )}
+        </View>
+      </View>
+      <View
+        className={"flex flex-col-reverse rounded-lg items-center my-2"}
+        style={{
+          opacity: showControls ? 1 : 0,
+        }}
+        pointerEvents={showControls ? "box-none" : "none"}
+      >
+        <View className={"flex flex-col w-full shrink"}>
+          <View
+            style={{
+              height: 10,
+              justifyContent: "center",
+              alignItems: "stretch",
+            }}
+            onTouchStart={handleTouchStart}
+            onTouchEnd={handleTouchEnd}
+          >
+            <Slider
+              theme={{
+                maximumTrackTintColor: "rgba(255,255,255,0.2)",
+                minimumTrackTintColor: "#fff",
+                cacheTrackTintColor: "rgba(255,255,255,0.3)",
+                bubbleBackgroundColor: "#fff",
+                bubbleTextColor: "#666",
+                heartbeatColor: "#999",
+              }}
+              renderThumb={() => null}
+              cache={cacheProgress}
+              onSlidingStart={handleSliderStart}
+              onSlidingComplete={handleSliderComplete}
+              onValueChange={handleSliderChange}
+              containerStyle={{
+                borderRadius: 100,
+              }}
+              renderBubble={() =>
+                (isSliding || showRemoteBubble) && (
+                  <TrickplayBubble
+                    trickPlayUrl={trickPlayUrl}
+                    trickplayInfo={trickplayInfo}
+                    time={time}
+                  />
+                )
+              }
+              sliderHeight={10}
+              thumbWidth={0}
+              progress={effectiveProgress}
+              minimumValue={min}
+              maximumValue={max}
+            />
+          </View>
+          <TimeDisplay
+            currentTime={currentTime}
+            remainingTime={remainingTime}
+            isVlc={isVlc}
+          />
+        </View>
+      </View>
+    </View>
+  );
+};
--- a/components/video-player/controls/BrightnessSlider.tsx
+++ b/components/video-player/controls/BrightnessSlider.tsx
@@ -63,7 +63,7 @@ const BrightnessSlider = () => {

 const styles = StyleSheet.create({
  sliderContainer: {
-    width: 150,
+    width: 130,
    display: "flex",
    flexDirection: "row",
    justifyContent: "center",
--- a/components/video-player/controls/CenterControls.tsx
+++ b/components/video-player/controls/CenterControls.tsx
@@ -0,0 +1,158 @@
+import { Ionicons } from "@expo/vector-icons";
+import type { FC } from "react";
+import { Platform, TouchableOpacity, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { Text } from "@/components/common/Text";
+import { Loader } from "@/components/Loader";
+import { useSettings } from "@/utils/atoms/settings";
+import AudioSlider from "./AudioSlider";
+import BrightnessSlider from "./BrightnessSlider";
+import { ICON_SIZES } from "./constants";
+
+interface CenterControlsProps {
+  showControls: boolean;
+  isPlaying: boolean;
+  isBuffering: boolean;
+  showAudioSlider: boolean;
+  setShowAudioSlider: (show: boolean) => void;
+  togglePlay: () => void;
+  handleSkipBackward: () => void;
+  handleSkipForward: () => void;
+}
+
+export const CenterControls: FC<CenterControlsProps> = ({
+  showControls,
+  isPlaying,
+  isBuffering,
+  showAudioSlider,
+  setShowAudioSlider,
+  togglePlay,
+  handleSkipBackward,
+  handleSkipForward,
+}) => {
+  const [settings] = useSettings();
+  const insets = useSafeAreaInsets();
+
+  return (
+    <View
+      style={{
+        position: "absolute",
+        top: "50%",
+        left: settings?.safeAreaInControlsEnabled ? insets.left : 0,
+        right: settings?.safeAreaInControlsEnabled ? insets.right : 0,
+        flexDirection: "row",
+        justifyContent: "space-between",
+        alignItems: "center",
+        transform: [{ translateY: -22.5 }],
+        paddingHorizontal: "28%",
+      }}
+      pointerEvents={showControls ? "box-none" : "none"}
+    >
+      <View
+        style={{
+          position: "absolute",
+          alignItems: "center",
+          transform: [{ rotate: "270deg" }],
+          left: 0,
+          bottom: 30,
+          opacity: showControls ? 1 : 0,
+        }}
+      >
+        <BrightnessSlider />
+      </View>
+
+      {!Platform.isTV && (
+        <TouchableOpacity onPress={handleSkipBackward}>
+          <View
+            style={{
+              position: "relative",
+              justifyContent: "center",
+              alignItems: "center",
+              opacity: showControls ? 1 : 0,
+            }}
+          >
+            <Ionicons
+              name='refresh-outline'
+              size={ICON_SIZES.CENTER}
+              color='white'
+              style={{
+                transform: [{ scaleY: -1 }, { rotate: "180deg" }],
+              }}
+            />
+            <Text
+              style={{
+                position: "absolute",
+                color: "white",
+                fontSize: 16,
+                fontWeight: "bold",
+                bottom: 10,
+              }}
+            >
+              {settings?.rewindSkipTime}
+            </Text>
+          </View>
+        </TouchableOpacity>
+      )}
+
+      <View style={Platform.isTV ? { flex: 1, alignItems: "center" } : {}}>
+        <TouchableOpacity onPress={togglePlay}>
+          {!isBuffering ? (
+            <Ionicons
+              name={isPlaying ? "pause" : "play"}
+              size={ICON_SIZES.CENTER}
+              color='white'
+              style={{
+                opacity: showControls ? 1 : 0,
+              }}
+            />
+          ) : (
+            <Loader size={"large"} />
+          )}
+        </TouchableOpacity>
+      </View>
+
+      {!Platform.isTV && (
+        <TouchableOpacity onPress={handleSkipForward}>
+          <View
+            style={{
+              position: "relative",
+              justifyContent: "center",
+              alignItems: "center",
+              opacity: showControls ? 1 : 0,
+            }}
+          >
+            <Ionicons
+              name='refresh-outline'
+              size={ICON_SIZES.CENTER}
+              color='white'
+            />
+            <Text
+              style={{
+                position: "absolute",
+                color: "white",
+                fontSize: 16,
+                fontWeight: "bold",
+                bottom: 10,
+              }}
+            >
+              {settings?.forwardSkipTime}
+            </Text>
+          </View>
+        </TouchableOpacity>
+      )}
+
+      <View
+        style={{
+          position: "absolute",
+          alignItems: "center",
+          transform: [{ rotate: "270deg" }],
+          bottom: 30,
+          right: 0,
+          opacity: showAudioSlider || showControls ? 1 : 0,
+        }}
+      >
+        <AudioSlider setVisibility={setShowAudioSlider} />
+      </View>
+    </View>
+  );
+};
--- a/components/video-player/controls/Controls.tsx
+++ b/components/video-player/controls/Controls.tsx
--- a/components/video-player/controls/EpisodeList.tsx
+++ b/components/video-player/controls/EpisodeList.tsx
@@ -27,7 +27,7 @@ import { runtimeTicksToSeconds } from "@/utils/time";
 type Props = {
  item: BaseItemDto;
  close: () => void;
-  goToItem: (itemId: string) => Promise<void>;
+  goToItem: (item: BaseItemDto) => void;
 };

 export const seasonIndexAtom = atom<SeasonIndexState>({});
@@ -221,23 +221,24 @@ export const EpisodeList: React.FC<Props> = ({ item, close, goToItem }) => {
          ref={scrollViewRef}
          data={episodes}
          extraData={item}
-          renderItem={(_item, _idx) => (
+          // Note otherItem is the item that is being rendered, not the item that is currently selected
+          renderItem={(otherItem, _idx) => (
            <View
-              key={_item.Id}
+              key={otherItem.Id}
              style={{}}
              className={`flex flex-col w-44 ${
-                item.Id !== _item.Id ? "opacity-75" : ""
+                item.Id !== otherItem.Id ? "opacity-75" : ""
              }`}
            >
              <TouchableOpacity
                onPress={() => {
-                  goToItem(_item.Id);
+                  goToItem(otherItem);
                }}
              >
                <ContinueWatchingPoster
-                  item={_item}
+                  item={otherItem}
                  useEpisodePoster
-                  showPlayButton={_item.Id !== item.Id}
+                  showPlayButton={otherItem.Id !== item.Id}
                />
              </TouchableOpacity>
              <View className='shrink'>
@@ -248,20 +249,20 @@ export const EpisodeList: React.FC<Props> = ({ item, close, goToItem }) => {
                    height: 36, // lineHeight * 2 for consistent two-line space
                  }}
                >
-                  {_item.Name}
+                  {otherItem.Name}
                </Text>
                <Text numberOfLines={1} className='text-xs text-neutral-475'>
-                  {`S${_item.ParentIndexNumber?.toString()}:E${_item.IndexNumber?.toString()}`}
+                  {`S${otherItem.ParentIndexNumber?.toString()}:E${otherItem.IndexNumber?.toString()}`}
                </Text>
                <Text className='text-xs text-neutral-500'>
-                  {runtimeTicksToSeconds(_item.RunTimeTicks)}
+                  {runtimeTicksToSeconds(otherItem.RunTimeTicks)}
                </Text>
              </View>
              <Text
-                numberOfLines={5}
+                numberOfLines={7}
                className='text-xs text-neutral-500 shrink'
              >
-                {_item.Overview}
+                {otherItem.Overview}
              </Text>
            </View>
          )}
--- a/components/video-player/controls/HeaderControls.tsx
+++ b/components/video-player/controls/HeaderControls.tsx
@@ -0,0 +1,196 @@
+import { Ionicons, MaterialIcons } from "@expo/vector-icons";
+import type {
+  BaseItemDto,
+  MediaSourceInfo,
+} from "@jellyfin/sdk/lib/generated-client";
+import { useRouter } from "expo-router";
+import { type Dispatch, type FC, type SetStateAction } from "react";
+import {
+  Platform,
+  TouchableOpacity,
+  useWindowDimensions,
+  View,
+} from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { useHaptic } from "@/hooks/useHaptic";
+import { useSettings, VideoPlayer } from "@/utils/atoms/settings";
+import { ICON_SIZES } from "./constants";
+import { VideoProvider } from "./contexts/VideoContext";
+import DropdownView from "./dropdown/DropdownView";
+import { type ScaleFactor, ScaleFactorSelector } from "./ScaleFactorSelector";
+import {
+  type AspectRatio,
+  AspectRatioSelector,
+} from "./VideoScalingModeSelector";
+
+interface HeaderControlsProps {
+  item: BaseItemDto;
+  showControls: boolean;
+  offline: boolean;
+  mediaSource?: MediaSourceInfo | null;
+  startPictureInPicture?: () => Promise<void>;
+  switchOnEpisodeMode: () => void;
+  goToPreviousItem: () => void;
+  goToNextItem: (options: { isAutoPlay?: boolean }) => void;
+  previousItem?: BaseItemDto | null;
+  nextItem?: BaseItemDto | null;
+  getAudioTracks?: (() => Promise<any[] | null>) | (() => any[]);
+  getSubtitleTracks?: (() => Promise<any[] | null>) | (() => any[]);
+  setAudioTrack?: (index: number) => void;
+  setSubtitleTrack?: (index: number) => void;
+  setSubtitleURL?: (url: string, customName: string) => void;
+  aspectRatio?: AspectRatio;
+  scaleFactor?: ScaleFactor;
+  setAspectRatio?: Dispatch<SetStateAction<AspectRatio>>;
+  setScaleFactor?: Dispatch<SetStateAction<ScaleFactor>>;
+  setVideoAspectRatio?: (aspectRatio: string | null) => Promise<void>;
+  setVideoScaleFactor?: (scaleFactor: number) => Promise<void>;
+}
+
+export const HeaderControls: FC<HeaderControlsProps> = ({
+  item,
+  showControls,
+  offline,
+  mediaSource,
+  startPictureInPicture,
+  switchOnEpisodeMode,
+  goToPreviousItem,
+  goToNextItem,
+  previousItem,
+  nextItem,
+  getAudioTracks,
+  getSubtitleTracks,
+  setAudioTrack,
+  setSubtitleTrack,
+  setSubtitleURL,
+  aspectRatio = "default",
+  scaleFactor = 1.0,
+  setAspectRatio,
+  setScaleFactor,
+  setVideoAspectRatio,
+  setVideoScaleFactor,
+}) => {
+  const [settings] = useSettings();
+  const router = useRouter();
+  const insets = useSafeAreaInsets();
+  const { width: screenWidth } = useWindowDimensions();
+  const lightHapticFeedback = useHaptic("light");
+
+  const handleAspectRatioChange = async (newRatio: AspectRatio) => {
+    if (!setAspectRatio || !setVideoAspectRatio) return;
+
+    setAspectRatio(newRatio);
+    const aspectRatioString = newRatio === "default" ? null : newRatio;
+    await setVideoAspectRatio(aspectRatioString);
+  };
+
+  const handleScaleFactorChange = async (newScale: ScaleFactor) => {
+    if (!setScaleFactor || !setVideoScaleFactor) return;
+
+    setScaleFactor(newScale);
+    await setVideoScaleFactor(newScale);
+  };
+
+  const onClose = async () => {
+    lightHapticFeedback();
+    router.back();
+  };
+
+  return (
+    <View
+      style={[
+        {
+          position: "absolute",
+          top: settings?.safeAreaInControlsEnabled ? insets.top : 0,
+          right: settings?.safeAreaInControlsEnabled ? insets.right : 0,
+          width: settings?.safeAreaInControlsEnabled
+            ? screenWidth - insets.left - insets.right
+            : screenWidth,
+          opacity: showControls ? 1 : 0,
+        },
+      ]}
+      pointerEvents={showControls ? "auto" : "none"}
+      className={"flex flex-row w-full pt-2"}
+    >
+      <View className='mr-auto'>
+        {!Platform.isTV && (!offline || !mediaSource?.TranscodingUrl) && (
+          <VideoProvider
+            getAudioTracks={getAudioTracks}
+            getSubtitleTracks={getSubtitleTracks}
+            setAudioTrack={setAudioTrack}
+            setSubtitleTrack={setSubtitleTrack}
+            setSubtitleURL={setSubtitleURL}
+          >
+            <DropdownView />
+          </VideoProvider>
+        )}
+      </View>
+
+      <View className='flex flex-row items-center space-x-2'>
+        {!Platform.isTV &&
+          (settings.defaultPlayer === VideoPlayer.VLC_4 ||
+            Platform.OS === "android") && (
+            <TouchableOpacity
+              onPress={startPictureInPicture}
+              className='aspect-square flex flex-col rounded-xl items-center justify-center p-2'
+            >
+              <MaterialIcons
+                name='picture-in-picture'
+                size={ICON_SIZES.HEADER}
+                color='white'
+                style={{ opacity: showControls ? 1 : 0 }}
+              />
+            </TouchableOpacity>
+          )}
+        {item?.Type === "Episode" && (
+          <TouchableOpacity
+            onPress={switchOnEpisodeMode}
+            className='aspect-square flex flex-col rounded-xl items-center justify-center p-2'
+          >
+            <Ionicons name='list' size={ICON_SIZES.HEADER} color='white' />
+          </TouchableOpacity>
+        )}
+        {previousItem && (
+          <TouchableOpacity
+            onPress={goToPreviousItem}
+            className='aspect-square flex flex-col rounded-xl items-center justify-center p-2'
+          >
+            <Ionicons
+              name='play-skip-back'
+              size={ICON_SIZES.HEADER}
+              color='white'
+            />
+          </TouchableOpacity>
+        )}
+        {nextItem && (
+          <TouchableOpacity
+            onPress={() => goToNextItem({ isAutoPlay: false })}
+            className='aspect-square flex flex-col rounded-xl items-center justify-center p-2'
+          >
+            <Ionicons
+              name='play-skip-forward'
+              size={ICON_SIZES.HEADER}
+              color='white'
+            />
+          </TouchableOpacity>
+        )}
+        <AspectRatioSelector
+          currentRatio={aspectRatio}
+          onRatioChange={handleAspectRatioChange}
+          disabled={!setVideoAspectRatio}
+        />
+        <ScaleFactorSelector
+          currentScale={scaleFactor}
+          onScaleChange={handleScaleFactorChange}
+          disabled={!setVideoScaleFactor}
+        />
+        <TouchableOpacity
+          onPress={onClose}
+          className='aspect-square flex flex-col rounded-xl items-center justify-center p-2'
+        >
+          <Ionicons name='close' size={ICON_SIZES.HEADER} color='white' />
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+};
--- a/components/video-player/controls/ScaleFactorSelector.tsx
+++ b/components/video-player/controls/ScaleFactorSelector.tsx
@@ -0,0 +1,135 @@
+import { Ionicons } from "@expo/vector-icons";
+import React from "react";
+import { Platform, TouchableOpacity } from "react-native";
+import { useHaptic } from "@/hooks/useHaptic";
+
+const DropdownMenu = !Platform.isTV ? require("zeego/dropdown-menu") : null;
+
+export type ScaleFactor =
+  | 1.0
+  | 1.1
+  | 1.2
+  | 1.3
+  | 1.4
+  | 1.5
+  | 1.6
+  | 1.7
+  | 1.8
+  | 1.9
+  | 2.0;
+
+interface ScaleFactorSelectorProps {
+  currentScale: ScaleFactor;
+  onScaleChange: (scale: ScaleFactor) => void;
+  disabled?: boolean;
+}
+
+interface ScaleFactorOption {
+  id: ScaleFactor;
+  label: string;
+  description: string;
+}
+
+const SCALE_FACTOR_OPTIONS: ScaleFactorOption[] = [
+  {
+    id: 1.0,
+    label: "1.0x",
+    description: "Original size",
+  },
+  {
+    id: 1.1,
+    label: "1.1x",
+    description: "10% larger",
+  },
+  {
+    id: 1.2,
+    label: "1.2x",
+    description: "20% larger",
+  },
+  {
+    id: 1.3,
+    label: "1.3x",
+    description: "30% larger",
+  },
+  {
+    id: 1.4,
+    label: "1.4x",
+    description: "40% larger",
+  },
+  {
+    id: 1.5,
+    label: "1.5x",
+    description: "50% larger",
+  },
+  {
+    id: 1.6,
+    label: "1.6x",
+    description: "60% larger",
+  },
+  {
+    id: 1.7,
+    label: "1.7x",
+    description: "70% larger",
+  },
+  {
+    id: 1.8,
+    label: "1.8x",
+    description: "80% larger",
+  },
+  {
+    id: 1.9,
+    label: "1.9x",
+    description: "90% larger",
+  },
+  {
+    id: 2.0,
+    label: "2.0x",
+    description: "Double size",
+  },
+];
+
+export const ScaleFactorSelector: React.FC<ScaleFactorSelectorProps> = ({
+  currentScale,
+  onScaleChange,
+  disabled = false,
+}) => {
+  const lightHapticFeedback = useHaptic("light");
+
+  // Hide on TV platforms since zeego doesn't support TV
+  if (Platform.isTV || !DropdownMenu) return null;
+
+  const handleScaleSelect = (scale: ScaleFactor) => {
+    onScaleChange(scale);
+    lightHapticFeedback();
+  };
+
+  return (
+    <DropdownMenu.Root>
+      <DropdownMenu.Trigger asChild>
+        <TouchableOpacity
+          disabled={disabled}
+          className='aspect-square flex flex-col rounded-xl items-center justify-center p-2'
+          style={{ opacity: disabled ? 0.5 : 1 }}
+        >
+          <Ionicons name='search-outline' size={24} color='white' />
+        </TouchableOpacity>
+      </DropdownMenu.Trigger>
+
+      <DropdownMenu.Content>
+        <DropdownMenu.Label>Scale Factor</DropdownMenu.Label>
+        <DropdownMenu.Separator />
+
+        {SCALE_FACTOR_OPTIONS.map((option) => (
+          <DropdownMenu.CheckboxItem
+            key={option.id}
+            value={currentScale === option.id ? "on" : "off"}
+            onValueChange={() => handleScaleSelect(option.id)}
+          >
+            <DropdownMenu.ItemTitle>{option.label}</DropdownMenu.ItemTitle>
+            <DropdownMenu.ItemIndicator />
+          </DropdownMenu.CheckboxItem>
+        ))}
+      </DropdownMenu.Content>
+    </DropdownMenu.Root>
+  );
+};
--- a/components/video-player/controls/TimeDisplay.tsx
+++ b/components/video-player/controls/TimeDisplay.tsx
@@ -0,0 +1,43 @@
+import type { FC } from "react";
+import { View } from "react-native";
+import { Text } from "@/components/common/Text";
+import { formatTimeString } from "@/utils/time";
+
+interface TimeDisplayProps {
+  currentTime: number;
+  remainingTime: number;
+  isVlc: boolean;
+}
+
+export const TimeDisplay: FC<TimeDisplayProps> = ({
+  currentTime,
+  remainingTime,
+  isVlc,
+}) => {
+  const getFinishTime = () => {
+    const now = new Date();
+    const remainingMs = isVlc ? remainingTime : remainingTime * 1000;
+    const finishTime = new Date(now.getTime() + remainingMs);
+    return finishTime.toLocaleTimeString([], {
+      hour: "2-digit",
+      minute: "2-digit",
+      hour12: false,
+    });
+  };
+
+  return (
+    <View className='flex flex-row items-center justify-between mt-2'>
+      <Text className='text-[12px] text-neutral-400'>
+        {formatTimeString(currentTime, isVlc ? "ms" : "s")}
+      </Text>
+      <View className='flex flex-col items-end'>
+        <Text className='text-[12px] text-neutral-400'>
+          -{formatTimeString(remainingTime, isVlc ? "ms" : "s")}
+        </Text>
+        <Text className='text-[10px] text-neutral-500 opacity-70'>
+          ends at {getFinishTime()}
+        </Text>
+      </View>
+    </View>
+  );
+};
--- a/components/video-player/controls/TrickplayBubble.tsx
+++ b/components/video-player/controls/TrickplayBubble.tsx
@@ -0,0 +1,92 @@
+import { Image } from "expo-image";
+import type { FC } from "react";
+import { View } from "react-native";
+import { Text } from "@/components/common/Text";
+import { CONTROLS_CONSTANTS } from "./constants";
+
+interface TrickplayBubbleProps {
+  trickPlayUrl: {
+    x: number;
+    y: number;
+    url: string;
+  } | null;
+  trickplayInfo: {
+    aspectRatio?: number;
+    data: {
+      TileWidth?: number;
+      TileHeight?: number;
+    };
+  } | null;
+  time: {
+    hours: number;
+    minutes: number;
+    seconds: number;
+  };
+}
+
+export const TrickplayBubble: FC<TrickplayBubbleProps> = ({
+  trickPlayUrl,
+  trickplayInfo,
+  time,
+}) => {
+  if (!trickPlayUrl || !trickplayInfo) {
+    return null;
+  }
+
+  const { x, y, url } = trickPlayUrl;
+  const tileWidth = CONTROLS_CONSTANTS.TILE_WIDTH;
+  const tileHeight = tileWidth / trickplayInfo.aspectRatio!;
+
+  return (
+    <View
+      style={{
+        position: "absolute",
+        left: -62,
+        bottom: 0,
+        paddingTop: 30,
+        paddingBottom: 5,
+        width: tileWidth * 1.5,
+        justifyContent: "center",
+        alignItems: "center",
+      }}
+    >
+      <View
+        style={{
+          width: tileWidth,
+          height: tileHeight,
+          alignSelf: "center",
+          transform: [{ scale: 1.4 }],
+          borderRadius: 5,
+        }}
+        className='bg-neutral-800 overflow-hidden'
+      >
+        <Image
+          cachePolicy={"memory-disk"}
+          style={{
+            width: tileWidth * trickplayInfo?.data.TileWidth!,
+            height:
+              (tileWidth / trickplayInfo.aspectRatio!) *
+              trickplayInfo?.data.TileHeight!,
+            transform: [
+              { translateX: -x * tileWidth },
+              { translateY: -y * tileHeight },
+            ],
+            resizeMode: "cover",
+          }}
+          source={{ uri: url }}
+          contentFit='cover'
+        />
+      </View>
+      <Text
+        style={{
+          marginTop: 30,
+          fontSize: 16,
+        }}
+      >
+        {`${time.hours > 0 ? `${time.hours}:` : ""}${
+          time.minutes < 10 ? `0${time.minutes}` : time.minutes
+        }:${time.seconds < 10 ? `0${time.seconds}` : time.seconds}`}
+      </Text>
+    </View>
+  );
+};
--- a/components/video-player/controls/VideoScalingModeSelector.tsx
+++ b/components/video-player/controls/VideoScalingModeSelector.tsx
@@ -0,0 +1,97 @@
+import { Ionicons } from "@expo/vector-icons";
+import React from "react";
+import { Platform, TouchableOpacity } from "react-native";
+import { useHaptic } from "@/hooks/useHaptic";
+
+const DropdownMenu = !Platform.isTV ? require("zeego/dropdown-menu") : null;
+
+export type AspectRatio = "default" | "16:9" | "4:3" | "1:1" | "21:9";
+
+interface AspectRatioSelectorProps {
+  currentRatio: AspectRatio;
+  onRatioChange: (ratio: AspectRatio) => void;
+  disabled?: boolean;
+}
+
+interface AspectRatioOption {
+  id: AspectRatio;
+  label: string;
+  description: string;
+}
+
+const ASPECT_RATIO_OPTIONS: AspectRatioOption[] = [
+  {
+    id: "default",
+    label: "Original",
+    description: "Use video's original aspect ratio",
+  },
+  {
+    id: "16:9",
+    label: "16:9",
+    description: "Widescreen (most common)",
+  },
+  {
+    id: "4:3",
+    label: "4:3",
+    description: "Traditional TV format",
+  },
+  {
+    id: "1:1",
+    label: "1:1",
+    description: "Square format",
+  },
+  {
+    id: "21:9",
+    label: "21:9",
+    description: "Ultra-wide cinematic",
+  },
+];
+
+export const AspectRatioSelector: React.FC<AspectRatioSelectorProps> = ({
+  currentRatio,
+  onRatioChange,
+  disabled = false,
+}) => {
+  const lightHapticFeedback = useHaptic("light");
+
+  // Hide on TV platforms since zeego doesn't support TV
+  if (Platform.isTV || !DropdownMenu) return null;
+
+  const handleRatioSelect = (ratio: AspectRatio) => {
+    onRatioChange(ratio);
+    lightHapticFeedback();
+  };
+
+  return (
+    <DropdownMenu.Root>
+      <DropdownMenu.Trigger asChild>
+        <TouchableOpacity
+          disabled={disabled}
+          className='aspect-square flex flex-col rounded-xl items-center justify-center p-2'
+          style={{ opacity: disabled ? 0.5 : 1 }}
+        >
+          <Ionicons name='crop-outline' size={24} color='white' />
+        </TouchableOpacity>
+      </DropdownMenu.Trigger>
+
+      <DropdownMenu.Content>
+        <DropdownMenu.Label>Aspect Ratio</DropdownMenu.Label>
+        <DropdownMenu.Separator />
+
+        {ASPECT_RATIO_OPTIONS.map((option) => (
+          <DropdownMenu.CheckboxItem
+            key={option.id}
+            value={currentRatio === option.id ? "on" : "off"}
+            onValueChange={() => handleRatioSelect(option.id)}
+          >
+            <DropdownMenu.ItemTitle>{option.label}</DropdownMenu.ItemTitle>
+            <DropdownMenu.ItemSubtitle>
+              {option.description}
+            </DropdownMenu.ItemSubtitle>
+            <DropdownMenu.ItemIndicator />
+          </DropdownMenu.CheckboxItem>
+        ))}
+      </DropdownMenu.Content>
+    </DropdownMenu.Root>
+  );
+};
--- a/components/video-player/controls/constants.ts
+++ b/components/video-player/controls/constants.ts
@@ -0,0 +1,17 @@
+export const CONTROLS_CONSTANTS = {
+  TIMEOUT: 4000,
+  SCRUB_INTERVAL_MS: 10 * 1000, // 10 seconds in ms
+  SCRUB_INTERVAL_TICKS: 10 * 10000000, // 10 seconds in ticks
+  TILE_WIDTH: 150,
+  PROGRESS_UNIT_MS: 1000, // 1 second in ms
+  PROGRESS_UNIT_TICKS: 10000000, // 1 second in ticks
+  LONG_PRESS_INITIAL_SEEK: 10,
+  LONG_PRESS_ACCELERATION: 1.1,
+  LONG_PRESS_INTERVAL: 300,
+  SLIDER_DEBOUNCE_MS: 3,
+} as const;
+
+export const ICON_SIZES = {
+  HEADER: 24,
+  CENTER: 50,
+} as const;
--- a/components/video-player/controls/contexts/VideoContext.tsx
+++ b/components/video-player/controls/contexts/VideoContext.tsx
@@ -181,12 +181,11 @@ export const VideoProvider: React.FC<VideoProviderProps> = ({
      }
      if (getAudioTracks) {
        const audioData = await getAudioTracks();
-
        const allAudio =
          mediaSource?.MediaStreams?.filter((s) => s.Type === "Audio") || [];
        const audioTracks: Track[] = allAudio?.map((audio, idx) => {
          if (!mediaSource?.TranscodingUrl) {
-            const vlcIndex = audioData?.at(idx)?.index ?? -1;
+            const vlcIndex = audioData?.at(idx + 1)?.index ?? -1;
            return {
              name: audio.DisplayTitle ?? "Undefined Audio",
              index: audio.Index ?? -1,
@@ -201,6 +200,15 @@ export const VideoProvider: React.FC<VideoProviderProps> = ({
              setPlayerParams({ chosenAudioIndex: audio.Index?.toString() }),
          };
        });
+
+        // Add a "Disable Audio" option if its not transcoding.
+        if (!mediaSource?.TranscodingUrl) {
+          audioTracks.unshift({
+            name: "Disable",
+            index: -1,
+            setTrack: () => setTrackParams("audio", -1, -1),
+          });
+        }
        setAudioTracks(audioTracks);
      }
    };
--- a/components/video-player/controls/hooks/index.ts
+++ b/components/video-player/controls/hooks/index.ts
@@ -0,0 +1,4 @@
+export { useRemoteControl } from "./useRemoteControl";
+export { useVideoNavigation } from "./useVideoNavigation";
+export { useVideoSlider } from "./useVideoSlider";
+export { useVideoTime } from "./useVideoTime";
--- a/components/video-player/controls/hooks/useRemoteControl.ts
+++ b/components/video-player/controls/hooks/useRemoteControl.ts
@@ -0,0 +1,170 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useTVEventHandler } from "react-native";
+import { type SharedValue, useSharedValue } from "react-native-reanimated";
+import { msToTicks, ticksToSeconds } from "@/utils/time";
+import { CONTROLS_CONSTANTS } from "../constants";
+
+interface UseRemoteControlProps {
+  progress: SharedValue<number>;
+  min: SharedValue<number>;
+  max: SharedValue<number>;
+  isVlc: boolean;
+  showControls: boolean;
+  isPlaying: boolean;
+  seek: (value: number) => void;
+  play: () => void;
+  togglePlay: () => void;
+  toggleControls: () => void;
+  calculateTrickplayUrl: (progressInTicks: number) => void;
+  handleSeekForward: (seconds: number) => void;
+  handleSeekBackward: (seconds: number) => void;
+}
+
+export function useRemoteControl({
+  progress,
+  min,
+  max,
+  isVlc,
+  showControls,
+  isPlaying,
+  seek,
+  play,
+  togglePlay,
+  toggleControls,
+  calculateTrickplayUrl,
+  handleSeekForward,
+  handleSeekBackward,
+}: UseRemoteControlProps) {
+  const remoteScrubProgress = useSharedValue<number | null>(null);
+  const isRemoteScrubbing = useSharedValue(false);
+  const [showRemoteBubble, setShowRemoteBubble] = useState(false);
+  const [longPressScrubMode, setLongPressScrubMode] = useState<
+    "FF" | "RW" | null
+  >(null);
+  const [isSliding, setIsSliding] = useState(false);
+  const [time, setTime] = useState({ hours: 0, minutes: 0, seconds: 0 });
+
+  const longPressTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(
+    null,
+  );
+  const SCRUB_INTERVAL = isVlc
+    ? CONTROLS_CONSTANTS.SCRUB_INTERVAL_MS
+    : CONTROLS_CONSTANTS.SCRUB_INTERVAL_TICKS;
+
+  const updateTime = useCallback(
+    (progressValue: number) => {
+      const progressInTicks = isVlc ? msToTicks(progressValue) : progressValue;
+      const progressInSeconds = Math.floor(ticksToSeconds(progressInTicks));
+      const hours = Math.floor(progressInSeconds / 3600);
+      const minutes = Math.floor((progressInSeconds % 3600) / 60);
+      const seconds = progressInSeconds % 60;
+      setTime({ hours, minutes, seconds });
+    },
+    [isVlc],
+  );
+
+  useTVEventHandler((evt) => {
+    if (!evt) return;
+
+    switch (evt.eventType) {
+      case "longLeft": {
+        setLongPressScrubMode((prev) => (!prev ? "RW" : null));
+        break;
+      }
+      case "longRight": {
+        setLongPressScrubMode((prev) => (!prev ? "FF" : null));
+        break;
+      }
+      case "left":
+      case "right": {
+        isRemoteScrubbing.value = true;
+        setShowRemoteBubble(true);
+
+        const direction = evt.eventType === "left" ? -1 : 1;
+        const base = remoteScrubProgress.value ?? progress.value;
+        const updated = Math.max(
+          min.value,
+          Math.min(max.value, base + direction * SCRUB_INTERVAL),
+        );
+        remoteScrubProgress.value = updated;
+        const progressInTicks = isVlc ? msToTicks(updated) : updated;
+        calculateTrickplayUrl(progressInTicks);
+        updateTime(updated);
+        break;
+      }
+      case "select": {
+        if (isRemoteScrubbing.value && remoteScrubProgress.value != null) {
+          progress.value = remoteScrubProgress.value;
+
+          const seekTarget = isVlc
+            ? Math.max(0, remoteScrubProgress.value)
+            : Math.max(0, ticksToSeconds(remoteScrubProgress.value));
+
+          seek(seekTarget);
+          if (isPlaying) play();
+
+          isRemoteScrubbing.value = false;
+          remoteScrubProgress.value = null;
+          setShowRemoteBubble(false);
+        } else {
+          togglePlay();
+        }
+        break;
+      }
+      case "down":
+      case "up":
+        // cancel scrubbing on other directions
+        isRemoteScrubbing.value = false;
+        remoteScrubProgress.value = null;
+        setShowRemoteBubble(false);
+        break;
+      default:
+        break;
+    }
+
+    if (!showControls) toggleControls();
+  });
+
+  useEffect(() => {
+    let isActive = true;
+    let seekTime = CONTROLS_CONSTANTS.LONG_PRESS_INITIAL_SEEK;
+
+    const scrubWithLongPress = () => {
+      if (!isActive || !longPressScrubMode) return;
+
+      setIsSliding(true);
+      const scrubFn =
+        longPressScrubMode === "FF" ? handleSeekForward : handleSeekBackward;
+      scrubFn(seekTime);
+      seekTime *= CONTROLS_CONSTANTS.LONG_PRESS_ACCELERATION;
+
+      longPressTimeoutRef.current = setTimeout(
+        scrubWithLongPress,
+        CONTROLS_CONSTANTS.LONG_PRESS_INTERVAL,
+      );
+    };
+
+    if (longPressScrubMode) {
+      isActive = true;
+      scrubWithLongPress();
+    }
+
+    return () => {
+      isActive = false;
+      setIsSliding(false);
+      if (longPressTimeoutRef.current) {
+        clearTimeout(longPressTimeoutRef.current);
+        longPressTimeoutRef.current = null;
+      }
+    };
+  }, [longPressScrubMode, handleSeekForward, handleSeekBackward]);
+
+  return {
+    remoteScrubProgress,
+    isRemoteScrubbing,
+    showRemoteBubble,
+    longPressScrubMode,
+    isSliding,
+    time,
+  };
+}
--- a/components/video-player/controls/hooks/useVideoNavigation.ts
+++ b/components/video-player/controls/hooks/useVideoNavigation.ts
@@ -0,0 +1,114 @@
+import { useCallback, useRef } from "react";
+import type { SharedValue } from "react-native-reanimated";
+import { useHaptic } from "@/hooks/useHaptic";
+import { useSettings } from "@/utils/atoms/settings";
+import { writeToLog } from "@/utils/log";
+import { secondsToMs, ticksToSeconds } from "@/utils/time";
+
+interface UseVideoNavigationProps {
+  progress: SharedValue<number>;
+  isPlaying: boolean;
+  isVlc: boolean;
+  seek: (value: number) => void;
+  play: () => void;
+}
+
+export function useVideoNavigation({
+  progress,
+  isPlaying,
+  isVlc,
+  seek,
+  play,
+}: UseVideoNavigationProps) {
+  const [settings] = useSettings();
+  const lightHapticFeedback = useHaptic("light");
+  const wasPlayingRef = useRef(false);
+
+  const handleSeekBackward = useCallback(
+    async (seconds: number) => {
+      wasPlayingRef.current = isPlaying;
+      try {
+        const curr = progress.value;
+        if (curr !== undefined) {
+          const newTime = isVlc
+            ? Math.max(0, curr - secondsToMs(seconds))
+            : Math.max(0, ticksToSeconds(curr) - seconds);
+          seek(newTime);
+        }
+      } catch (error) {
+        writeToLog("ERROR", "Error seeking video backwards", error);
+      }
+    },
+    [isPlaying, isVlc, seek, progress],
+  );
+
+  const handleSeekForward = useCallback(
+    async (seconds: number) => {
+      wasPlayingRef.current = isPlaying;
+      try {
+        const curr = progress.value;
+        if (curr !== undefined) {
+          const newTime = isVlc
+            ? curr + secondsToMs(seconds)
+            : ticksToSeconds(curr) + seconds;
+          seek(Math.max(0, newTime));
+        }
+      } catch (error) {
+        writeToLog("ERROR", "Error seeking video forwards", error);
+      }
+    },
+    [isPlaying, isVlc, seek, progress],
+  );
+
+  const handleSkipBackward = useCallback(async () => {
+    if (!settings?.rewindSkipTime) {
+      return;
+    }
+    wasPlayingRef.current = isPlaying;
+    lightHapticFeedback();
+    try {
+      const curr = progress.value;
+      if (curr !== undefined) {
+        const newTime = isVlc
+          ? Math.max(0, curr - secondsToMs(settings.rewindSkipTime))
+          : Math.max(0, ticksToSeconds(curr) - settings.rewindSkipTime);
+        seek(newTime);
+        if (wasPlayingRef.current) {
+          play();
+        }
+      }
+    } catch (error) {
+      writeToLog("ERROR", "Error seeking video backwards", error);
+    }
+  }, [settings, isPlaying, isVlc, play, seek, progress, lightHapticFeedback]);
+
+  const handleSkipForward = useCallback(async () => {
+    if (!settings?.forwardSkipTime) {
+      return;
+    }
+    wasPlayingRef.current = isPlaying;
+    lightHapticFeedback();
+    try {
+      const curr = progress.value;
+      if (curr !== undefined) {
+        const newTime = isVlc
+          ? curr + secondsToMs(settings.forwardSkipTime)
+          : ticksToSeconds(curr) + settings.forwardSkipTime;
+        seek(Math.max(0, newTime));
+        if (wasPlayingRef.current) {
+          play();
+        }
+      }
+    } catch (error) {
+      writeToLog("ERROR", "Error seeking video forwards", error);
+    }
+  }, [settings, isPlaying, isVlc, play, seek, progress, lightHapticFeedback]);
+
+  return {
+    handleSeekBackward,
+    handleSeekForward,
+    handleSkipBackward,
+    handleSkipForward,
+    wasPlayingRef,
+  };
+}
--- a/components/video-player/controls/hooks/useVideoSlider.ts
+++ b/components/video-player/controls/hooks/useVideoSlider.ts
@@ -0,0 +1,99 @@
+import { debounce } from "lodash";
+import { useCallback, useRef, useState } from "react";
+import type { SharedValue } from "react-native-reanimated";
+import { msToTicks, ticksToSeconds } from "@/utils/time";
+import { CONTROLS_CONSTANTS } from "../constants";
+
+interface UseVideoSliderProps {
+  progress: SharedValue<number>;
+  isSeeking: SharedValue<boolean>;
+  isPlaying: boolean;
+  isVlc: boolean;
+  seek: (value: number) => void;
+  play: () => void;
+  pause: () => void;
+  calculateTrickplayUrl: (progressInTicks: number) => void;
+  showControls: boolean;
+}
+
+export function useVideoSlider({
+  progress,
+  isSeeking,
+  isPlaying,
+  isVlc,
+  seek,
+  play,
+  pause,
+  calculateTrickplayUrl,
+  showControls,
+}: UseVideoSliderProps) {
+  const [isSliding, setIsSliding] = useState(false);
+  const [time, setTime] = useState({ hours: 0, minutes: 0, seconds: 0 });
+  const wasPlayingRef = useRef(false);
+  const lastProgressRef = useRef<number>(0);
+
+  const handleSliderStart = useCallback(() => {
+    if (!showControls) {
+      return;
+    }
+
+    setIsSliding(true);
+    wasPlayingRef.current = isPlaying;
+    lastProgressRef.current = progress.value;
+
+    pause();
+    isSeeking.value = true;
+  }, [showControls, isPlaying, pause, progress, isSeeking]);
+
+  const handleTouchStart = useCallback(() => {
+    if (!showControls) {
+      return;
+    }
+  }, [showControls]);
+
+  const handleTouchEnd = useCallback(() => {
+    if (!showControls) {
+      return;
+    }
+  }, [showControls]);
+
+  const handleSliderComplete = useCallback(
+    async (value: number) => {
+      setIsSliding(false);
+      isSeeking.value = false;
+      progress.value = value;
+      const seekValue = Math.max(
+        0,
+        Math.floor(isVlc ? value : ticksToSeconds(value)),
+      );
+      seek(seekValue);
+      if (wasPlayingRef.current) {
+        play();
+      }
+    },
+    [isVlc, seek, play, progress, isSeeking],
+  );
+
+  const handleSliderChange = useCallback(
+    debounce((value: number) => {
+      const progressInTicks = isVlc ? msToTicks(value) : value;
+      calculateTrickplayUrl(progressInTicks);
+      const progressInSeconds = Math.floor(ticksToSeconds(progressInTicks));
+      const hours = Math.floor(progressInSeconds / 3600);
+      const minutes = Math.floor((progressInSeconds % 3600) / 60);
+      const seconds = progressInSeconds % 60;
+      setTime({ hours, minutes, seconds });
+    }, CONTROLS_CONSTANTS.SLIDER_DEBOUNCE_MS),
+    [isVlc, calculateTrickplayUrl],
+  );
+
+  return {
+    isSliding,
+    time,
+    handleSliderStart,
+    handleTouchStart,
+    handleTouchEnd,
+    handleSliderComplete,
+    handleSliderChange,
+  };
+}
--- a/components/video-player/controls/hooks/useVideoTime.ts
+++ b/components/video-player/controls/hooks/useVideoTime.ts
@@ -0,0 +1,76 @@
+import { useCallback, useRef, useState } from "react";
+import {
+  runOnJS,
+  type SharedValue,
+  useAnimatedReaction,
+} from "react-native-reanimated";
+import { ticksToSeconds } from "@/utils/time";
+
+interface UseVideoTimeProps {
+  progress: SharedValue<number>;
+  max: SharedValue<number>;
+  isSeeking: SharedValue<boolean>;
+  isVlc: boolean;
+}
+
+export function useVideoTime({
+  progress,
+  max,
+  isSeeking,
+  isVlc,
+}: UseVideoTimeProps) {
+  const [currentTime, setCurrentTime] = useState(0);
+  const [remainingTime, setRemainingTime] = useState(Number.POSITIVE_INFINITY);
+
+  const lastCurrentTimeRef = useRef(0);
+  const lastRemainingTimeRef = useRef(0);
+
+  const updateTimes = useCallback(
+    (currentProgress: number, maxValue: number) => {
+      const current = isVlc ? currentProgress : ticksToSeconds(currentProgress);
+      const remaining = isVlc
+        ? maxValue - currentProgress
+        : ticksToSeconds(maxValue - currentProgress);
+
+      // Only update state if the displayed time actually changed (avoid sub-second updates)
+      const currentSeconds = Math.floor(current / (isVlc ? 1000 : 1));
+      const remainingSeconds = Math.floor(remaining / (isVlc ? 1000 : 1));
+      const lastCurrentSeconds = Math.floor(
+        lastCurrentTimeRef.current / (isVlc ? 1000 : 1),
+      );
+      const lastRemainingSeconds = Math.floor(
+        lastRemainingTimeRef.current / (isVlc ? 1000 : 1),
+      );
+
+      if (
+        currentSeconds !== lastCurrentSeconds ||
+        remainingSeconds !== lastRemainingSeconds
+      ) {
+        setCurrentTime(current);
+        setRemainingTime(remaining);
+        lastCurrentTimeRef.current = current;
+        lastRemainingTimeRef.current = remaining;
+      }
+    },
+    [isVlc],
+  );
+
+  useAnimatedReaction(
+    () => ({
+      progress: progress.value,
+      max: max.value,
+      isSeeking: isSeeking.value,
+    }),
+    (result) => {
+      if (!result.isSeeking) {
+        runOnJS(updateTimes)(result.progress, result.max);
+      }
+    },
+    [updateTimes],
+  );
+
+  return {
+    currentTime,
+    remainingTime,
+  };
+}
--- a/eas.json
+++ b/eas.json
@@ -46,14 +46,14 @@
    },
    "production": {
      "environment": "production",
-      "channel": "0.29.13",
+      "channel": "0.32.1",
      "android": {
        "image": "latest"
      }
    },
    "production-apk": {
      "environment": "production",
-      "channel": "0.29.13",
+      "channel": "0.32.1",
      "android": {
        "buildType": "apk",
        "image": "latest"
@@ -61,7 +61,7 @@
    },
    "production-apk-tv": {
      "environment": "production",
-      "channel": "0.29.13",
+      "channel": "0.32.1",
      "android": {
        "buildType": "apk",
        "image": "latest"
--- a/hooks/usePlaybackManager.ts
+++ b/hooks/usePlaybackManager.ts
@@ -70,7 +70,7 @@ export const usePlaybackManager = ({
    useDownload();

  /** Whether the device is online. actually it's connected to the internet. */
-  const isOnline = netInfo.isConnected;
+  const isOnline = useMemo(() => netInfo.isConnected, [netInfo.isConnected]);

  // Adjacent episodes logic
  const { data: adjacentItems } = useQuery({
@@ -152,22 +152,37 @@ export const usePlaybackManager = ({

    // Handle local state update for downloaded items
    if (localItem) {
+      const runTimeTicks = localItem.item.RunTimeTicks ?? 0;
+      const playedPercentage =
+        runTimeTicks > 0 ? (positionTicks / runTimeTicks) * 100 : 0;
+
+      // Jellyfin thresholds
+      const MINIMUM_PERCENTAGE = 5; // 5% minimum to save progress
+      const PLAYED_THRESHOLD_PERCENTAGE = 90; // 90% to mark as played
+
      const isItemConsideredPlayed =
-        (localItem.item.UserData?.PlayedPercentage ?? 0) > 90;
+        playedPercentage > PLAYED_THRESHOLD_PERCENTAGE;
+      const meetsMinimumPercentage = playedPercentage >= MINIMUM_PERCENTAGE;
+
+      const shouldSaveProgress =
+        meetsMinimumPercentage && !isItemConsideredPlayed;
+
      updateDownloadedItem(itemId, {
        ...localItem,
        item: {
          ...localItem.item,
          UserData: {
            ...localItem.item.UserData,
-            PlaybackPositionTicks: isItemConsideredPlayed
-              ? 0
-              : Math.floor(positionTicks),
+            PlaybackPositionTicks:
+              isItemConsideredPlayed || !shouldSaveProgress
+                ? 0
+                : Math.floor(positionTicks),
            Played: isItemConsideredPlayed,
            LastPlayedDate: new Date().toISOString(),
-            PlayedPercentage: isItemConsideredPlayed
-              ? 0
-              : (positionTicks / localItem.item.RunTimeTicks!) * 100,
+            PlayedPercentage:
+              isItemConsideredPlayed || !shouldSaveProgress
+                ? 0
+                : playedPercentage,
          },
        },
      });
--- a/modules/VlcPlayer.types.ts
+++ b/modules/VlcPlayer.types.ts
@@ -92,7 +92,9 @@ export interface VlcPlayerViewRef {
  nextChapter: () => Promise<void>;
  previousChapter: () => Promise<void>;
  getChapters: () => Promise<ChapterInfo[] | null>;
-  setVideoCropGeometry: (geometry: string | null) => Promise<void>;
+  setVideoCropGeometry: (cropGeometry: string | null) => Promise<void>;
  getVideoCropGeometry: () => Promise<string | null>;
  setSubtitleURL: (url: string) => Promise<void>;
+  setVideoAspectRatio: (aspectRatio: string | null) => Promise<void>;
+  setVideoScaleFactor: (scaleFactor: number) => Promise<void>;
 }
--- a/modules/VlcPlayerView.tsx
+++ b/modules/VlcPlayerView.tsx
@@ -86,6 +86,12 @@ const VlcPlayerView = React.forwardRef<VlcPlayerViewRef, VlcPlayerViewProps>(
      setSubtitleURL: async (url: string) => {
        await nativeRef.current?.setSubtitleURL(url);
      },
+      setVideoAspectRatio: async (aspectRatio: string | null) => {
+        await nativeRef.current?.setVideoAspectRatio(aspectRatio);
+      },
+      setVideoScaleFactor: async (scaleFactor: number) => {
+        await nativeRef.current?.setVideoScaleFactor(scaleFactor);
+      },
    }));

    const {
--- a/modules/vlc-player/android/src/main/java/expo/modules/vlcplayer/VlcPlayerModule.kt
+++ b/modules/vlc-player/android/src/main/java/expo/modules/vlcplayer/VlcPlayerModule.kt
@@ -82,6 +82,14 @@ class VlcPlayerModule : Module() {
      AsyncFunction("setSubtitleURL") { view: VlcPlayerView, url: String, name: String ->
        view.setSubtitleURL(url, name)
      }
+
+      AsyncFunction("setVideoAspectRatio") { view: VlcPlayerView, aspectRatio: String? ->
+        view.setVideoAspectRatio(aspectRatio)
+      }
+
+      AsyncFunction("setVideoScaleFactor") { view: VlcPlayerView, scaleFactor: Float ->
+        view.setVideoScaleFactor(scaleFactor)
+      }
    }
  }
 }
--- a/modules/vlc-player/android/src/main/java/expo/modules/vlcplayer/VlcPlayerView.kt
+++ b/modules/vlc-player/android/src/main/java/expo/modules/vlcplayer/VlcPlayerView.kt
@@ -335,6 +335,16 @@ class VlcPlayerView(context: Context, appContext: AppContext) : ExpoView(context
        mediaPlayer?.addSlave(IMedia.Slave.Type.Subtitle, Uri.parse(subtitleURL), true)
    }

+    fun setVideoAspectRatio(aspectRatio: String?) {
+        log.debug("Setting video aspect ratio: $aspectRatio")
+        mediaPlayer?.aspectRatio = aspectRatio
+    }
+
+    fun setVideoScaleFactor(scaleFactor: Float) {
+        log.debug("Setting video scale factor: $scaleFactor")
+        mediaPlayer?.scale = scaleFactor
+    }
+
    private fun setInitialExternalSubtitles() {
        externalSubtitles?.let { subtitles ->
            for (subtitle in subtitles) {
--- a/modules/vlc-player/ios/VlcPlayerModule.swift
+++ b/modules/vlc-player/ios/VlcPlayerModule.swift
@@ -62,6 +62,14 @@ public class VlcPlayerModule: Module {
                view.setSubtitleTrack(trackIndex)
            }

+            AsyncFunction("setVideoAspectRatio") { (view: VlcPlayerView, aspectRatio: String?) in
+                view.setVideoAspectRatio(aspectRatio)
+            }
+
+            AsyncFunction("setVideoScaleFactor") { (view: VlcPlayerView, scaleFactor: Float) in
+                view.setVideoScaleFactor(scaleFactor)
+            }
+
            AsyncFunction("getSubtitleTracks") { (view: VlcPlayerView) -> [[String: Any]]? in
                return view.getSubtitleTracks()
            }
--- a/modules/vlc-player/ios/VlcPlayerView.swift
+++ b/modules/vlc-player/ios/VlcPlayerView.swift
@@ -243,6 +243,26 @@ class VlcPlayerView: ExpoView {
        return tracks
    }

+    @objc func setVideoAspectRatio(_ aspectRatio: String?) {
+        DispatchQueue.main.async {
+            if let aspectRatio = aspectRatio {
+                // Convert String to C string for VLC
+                let cString = strdup(aspectRatio)
+                self.mediaPlayer?.videoAspectRatio = cString
+            } else {
+                // Reset to default (let VLC determine aspect ratio)
+                self.mediaPlayer?.videoAspectRatio = nil
+            }
+        }
+    }
+
+    @objc func setVideoScaleFactor(_ scaleFactor: Float) {
+        DispatchQueue.main.async {
+            self.mediaPlayer?.scaleFactor = scaleFactor
+            print("Set video scale factor: \(scaleFactor)")
+        }
+    }
+
    @objc func stop(completion: (() -> Void)? = nil) {
        guard !isStopping else {
            completion?()
--- a/package.json
+++ b/package.json
@@ -64,7 +64,7 @@
    "i18next": "^25.0.0",
    "jotai": "^2.12.5",
    "lodash": "^4.17.21",
-    "nativewind": "^4.0.0",
+    "nativewind": "^2.0.11",
    "react": "19.0.0",
    "react-dom": "19.0.0",
    "react-i18next": "^15.4.0",
@@ -81,6 +81,7 @@
    "react-native-ios-context-menu": "^3.1.0",
    "react-native-ios-utilities": "5.1.8",
    "react-native-mmkv": "2.12.2",
+    "react-native-pager-view": "^6.9.1",
    "react-native-reanimated": "~3.16.7",
    "react-native-reanimated-carousel": "4.0.2",
    "react-native-safe-area-context": "5.4.0",
@@ -100,7 +101,7 @@
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
-    "@biomejs/biome": "^2.1.4",
+    "@biomejs/biome": "^2.2.0",
    "@react-native-community/cli": "^20.0.0",
    "@react-native-tvos/config-tv": "^0.1.1",
    "@types/jest": "^29.5.12",
@@ -119,7 +120,8 @@
      "exclude": [
        "react-native",
        "@shopify/flash-list",
-        "react-native-reanimated"
+        "react-native-reanimated",
+        "react-native-pager-view"
      ]
    },
    "doctor": {
--- a/providers/DownloadProvider.tsx
+++ b/providers/DownloadProvider.tsx
@@ -687,7 +687,7 @@ function useDownloadProvider() {
        appSize += fileInfo.size;
      }
    }
-    return { total, remaining, app: appSize };
+    return { total, remaining, appSize: appSize };
  };

  return {
@@ -731,7 +731,7 @@ export function useDownload() {
      APP_CACHE_DOWNLOAD_DIRECTORY: "",
      cleanCacheDirectory: async () => {},
      updateDownloadedItem: () => {},
-      appSizeUsage: async () => ({ total: 0, remaining: 0, app: 0 }),
+      appSizeUsage: async () => ({ total: 0, remaining: 0, appSize: 0 }),
    };
  }

--- a/providers/JellyfinProvider.tsx
+++ b/providers/JellyfinProvider.tsx
@@ -64,7 +64,7 @@ export const JellyfinProvider: React.FC<{ children: ReactNode }> = ({
      setJellyfin(
        () =>
          new Jellyfin({
-            clientInfo: { name: "Streamyfin", version: "0.29.13" },
+            clientInfo: { name: "Streamyfin", version: "0.32.1" },
            deviceInfo: {
              name: deviceName,
              id,
@@ -93,7 +93,7 @@ export const JellyfinProvider: React.FC<{ children: ReactNode }> = ({
    return {
      authorization: `MediaBrowser Client="Streamyfin", Device=${
        Platform.OS === "android" ? "Android" : "iOS"
-      }, DeviceId="${deviceId}", Version="0.29.13"`,
+      }, DeviceId="${deviceId}", Version="0.32.1"`,
    };
  }, [deviceId]);

--- a/utils/bitrate.ts
+++ b/utils/bitrate.ts
@@ -5,6 +5,7 @@ export const formatBitrate = (bitrate?: number | null) => {
  if (bitrate === 0) return "0 bps";
  const i = Number.parseInt(
    Math.floor(Math.log(bitrate) / Math.log(1000)).toString(),
+    10,
  );
  return `${Math.round((bitrate / 1000 ** i) * 100) / 100} ${sizes[i]}`;
 };
--- a/utils/jellyfin/media/getStreamUrl.ts
+++ b/utils/jellyfin/media/getStreamUrl.ts
@@ -3,9 +3,136 @@ import type {
  BaseItemDto,
  MediaSourceInfo,
 } from "@jellyfin/sdk/lib/generated-client/models";
+import { BaseItemKind } from "@jellyfin/sdk/lib/generated-client/models/base-item-kind";
 import { getMediaInfoApi } from "@jellyfin/sdk/lib/utils/api";
 import download from "@/utils/profiles/download";

+interface StreamResult {
+  url: string;
+  sessionId: string | null;
+  mediaSource: MediaSourceInfo | undefined;
+}
+
+/**
+ * Gets the actual streaming URL - handles both transcoded and direct play logic
+ * Returns only the URL string
+ */
+const getPlaybackUrl = (
+  api: Api,
+  itemId: string,
+  mediaSource: MediaSourceInfo | undefined,
+  params: {
+    subtitleStreamIndex?: number;
+    audioStreamIndex?: number;
+    deviceId?: string | null;
+    startTimeTicks?: number;
+    maxStreamingBitrate?: number;
+    userId: string;
+    playSessionId?: string | null;
+    container?: string;
+    static?: string;
+  },
+): string => {
+  let transcodeUrl = mediaSource?.TranscodingUrl;
+
+  // Handle transcoded URL if available
+  if (transcodeUrl) {
+    // For regular streaming, change subtitle method to HLS for transcoded URL
+    if (params.subtitleStreamIndex === -1) {
+      transcodeUrl = transcodeUrl.replace(
+        "SubtitleMethod=Encode",
+        "SubtitleMethod=Hls",
+      );
+    }
+
+    console.log("Video is being transcoded:", transcodeUrl);
+    return `${api.basePath}${transcodeUrl}`;
+  }
+
+  // Fall back to direct play
+  const streamParams = new URLSearchParams({
+    static: params.static || "true",
+    container: params.container || "mp4",
+    mediaSourceId: mediaSource?.Id || "",
+    subtitleStreamIndex: params.subtitleStreamIndex?.toString() || "",
+    audioStreamIndex: params.audioStreamIndex?.toString() || "",
+    deviceId: params.deviceId || api.deviceInfo.id,
+    api_key: api.accessToken,
+    startTimeTicks: params.startTimeTicks?.toString() || "0",
+    maxStreamingBitrate: params.maxStreamingBitrate?.toString() || "",
+    userId: params.userId,
+  });
+
+  // Add additional parameters if provided
+  if (params.playSessionId) {
+    streamParams.append("playSessionId", params.playSessionId);
+  }
+
+  const directPlayUrl = `${api.basePath}/Videos/${itemId}/stream?${streamParams.toString()}`;
+
+  console.log("Video is being direct played:", directPlayUrl);
+  return directPlayUrl;
+};
+
+/** Wrapper around {@link getPlaybackUrl} that applies download-specific transformations */
+const getDownloadUrl = (
+  api: Api,
+  itemId: string,
+  mediaSource: MediaSourceInfo | undefined,
+  sessionId: string | null | undefined,
+  params: {
+    subtitleStreamIndex?: number;
+    audioStreamIndex?: number;
+    deviceId?: string | null;
+    startTimeTicks?: number;
+    maxStreamingBitrate?: number;
+    userId: string;
+    playSessionId?: string | null;
+  },
+): StreamResult => {
+  // First, handle download-specific transcoding modifications
+  let downloadMediaSource = mediaSource;
+  if (mediaSource?.TranscodingUrl) {
+    downloadMediaSource = {
+      ...mediaSource,
+      TranscodingUrl: mediaSource.TranscodingUrl.replace(
+        "master.m3u8",
+        "stream",
+      ),
+    };
+  }
+
+  // Get the base URL with download-specific parameters
+  let url = getPlaybackUrl(api, itemId, downloadMediaSource, {
+    ...params,
+    container: "ts",
+    static: "false",
+  });
+
+  // If it's a direct play URL, add download-specific parameters
+  if (!mediaSource?.TranscodingUrl) {
+    const urlObj = new URL(url);
+    const downloadParams = {
+      subtitleMethod: "Embed",
+      enableSubtitlesInManifest: "true",
+      allowVideoStreamCopy: "true",
+      allowAudioStreamCopy: "true",
+    };
+
+    Object.entries(downloadParams).forEach(([key, value]) => {
+      urlObj.searchParams.append(key, value);
+    });
+
+    url = urlObj.toString();
+  }
+
+  return {
+    url,
+    sessionId: sessionId || null,
+    mediaSource,
+  };
+};
+
 export const getStreamUrl = async ({
  api,
  item,
@@ -44,6 +171,47 @@ export const getStreamUrl = async ({
  let mediaSource: MediaSourceInfo | undefined;
  let sessionId: string | null | undefined;

+  // Please do not remove this we need this for live TV to be working correctly.
+  if (item.Type === BaseItemKind.Program) {
+    console.log("Item is of type program...");
+    const res = await getMediaInfoApi(api).getPlaybackInfo(
+      {
+        userId,
+        itemId: item.ChannelId!,
+      },
+      {
+        method: "POST",
+        params: {
+          startTimeTicks: 0,
+          isPlayback: true,
+          autoOpenLiveStream: true,
+          maxStreamingBitrate,
+          audioStreamIndex,
+        },
+        data: {
+          deviceProfile,
+        },
+      },
+    );
+
+    sessionId = res.data.PlaySessionId || null;
+    mediaSource = res.data.MediaSources?.[0];
+    const url = getPlaybackUrl(api, item.ChannelId!, mediaSource, {
+      subtitleStreamIndex,
+      audioStreamIndex,
+      deviceId,
+      startTimeTicks: 0,
+      maxStreamingBitrate,
+      userId,
+    });
+
+    return {
+      url,
+      sessionId: sessionId || null,
+      mediaSource,
+    };
+  }
+
  const res = await getMediaInfoApi(api).getPlaybackInfo(
    {
      itemId: item.Id!,
@@ -70,46 +238,20 @@ export const getStreamUrl = async ({

  sessionId = res.data.PlaySessionId || null;
  mediaSource = res.data.MediaSources?.[0];
-  let transcodeUrl = mediaSource?.TranscodingUrl;

-  if (transcodeUrl) {
-    // We need to change the subtitle method to hls for the transcoded url.
-    if (subtitleStreamIndex === -1) {
-      transcodeUrl = transcodeUrl.replace(
-        "SubtitleMethod=Encode",
-        "SubtitleMethod=Hls",
-      );
-    }
-    console.log("Video is being transcoded:", transcodeUrl);
-    return {
-      url: `${api.basePath}${transcodeUrl}`,
-      sessionId,
-      mediaSource,
-    };
-  }
-
-  const streamParams = new URLSearchParams({
-    static: "true",
-    container: "mp4",
-    mediaSourceId: mediaSource?.Id || "",
-    subtitleStreamIndex: subtitleStreamIndex?.toString() || "",
-    audioStreamIndex: audioStreamIndex?.toString() || "",
-    deviceId: deviceId || api.deviceInfo.id,
-    api_key: api.accessToken,
-    startTimeTicks: startTimeTicks.toString(),
-    maxStreamingBitrate: maxStreamingBitrate?.toString() || "",
-    userId: userId,
+  const url = getPlaybackUrl(api, item.Id!, mediaSource, {
+    subtitleStreamIndex,
+    audioStreamIndex,
+    deviceId,
+    startTimeTicks,
+    maxStreamingBitrate,
+    userId,
+    playSessionId: playSessionId || undefined,
  });

-  const directPlayUrl = `${
-    api.basePath
-  }/Videos/${item.Id}/stream?${streamParams.toString()}`;
-
-  console.log("Video is being direct played:", directPlayUrl);
-
  return {
-    url: directPlayUrl,
-    sessionId: sessionId || playSessionId || null,
+    url,
+    sessionId: sessionId || null,
    mediaSource,
  };
 };
@@ -142,9 +284,6 @@ export const getDownloadStreamUrl = async ({
    return null;
  }

-  let mediaSource: MediaSourceInfo | undefined;
-  let sessionId: string | null | undefined;
-
  const res = await getMediaInfoApi(api).getPlaybackInfo(
    {
      itemId: item.Id!,
@@ -169,53 +308,16 @@ export const getDownloadStreamUrl = async ({
    console.error("Error getting playback info:", res.status, res.statusText);
  }

-  sessionId = res.data.PlaySessionId || null;
-  mediaSource = res.data.MediaSources?.[0];
-  let transcodeUrl = mediaSource?.TranscodingUrl;
+  const sessionId = res.data.PlaySessionId || null;
+  const mediaSource = res.data.MediaSources?.[0];

-  if (transcodeUrl) {
-    transcodeUrl = transcodeUrl.replace("master.m3u8", "stream");
-    console.log("Video is being transcoded:", transcodeUrl);
-    return {
-      url: `${api.basePath}${transcodeUrl}`,
-      sessionId,
-      mediaSource,
-    };
-  }
-
-  const downloadParams = {
-    // We need to disable static so we can have a remux with subtitle.
-    subtitleMethod: "Embed",
-    enableSubtitlesInManifest: true,
-    allowVideoStreamCopy: true,
-    allowAudioStreamCopy: true,
-    playSessionId: sessionId || "",
-  };
-
-  const streamParams = new URLSearchParams({
-    static: "false",
-    container: "ts",
-    mediaSourceId: mediaSource?.Id || "",
-    subtitleStreamIndex: subtitleStreamIndex?.toString() || "",
-    audioStreamIndex: audioStreamIndex?.toString() || "",
-    deviceId: deviceId || api.deviceInfo.id,
-    api_key: api.accessToken,
-    startTimeTicks: "0",
-    maxStreamingBitrate: maxStreamingBitrate?.toString() || "",
-    userId: userId,
+  return getDownloadUrl(api, item.Id!, mediaSource, sessionId, {
+    subtitleStreamIndex,
+    audioStreamIndex,
+    deviceId,
+    startTimeTicks: 0,
+    maxStreamingBitrate,
+    userId,
+    playSessionId: sessionId || undefined,
  });
-
-  Object.entries(downloadParams).forEach(([key, value]) => {
-    streamParams.append(key, value.toString());
-  });
-
-  const directPlayUrl = `${
-    api.basePath
-  }/Videos/${item.Id}/stream?${streamParams.toString()}`;
-
-  return {
-    url: directPlayUrl,
-    sessionId: sessionId || null,
-    mediaSource,
-  };
 };
Author	SHA1	Message	Date
Fredrik Burmester	edd26e68c7	chore: refactor controls	2025-08-20 13:41:45 +02:00
Fredrik Burmester	7cab50750f	chore: version Some checks failed 🤖 Android APK Build (Phone + TV) / 🏗️ Build Android APK (phone) (push) Failing after 6s Details 🤖 Android APK Build (Phone + TV) / 🏗️ Build Android APK (tv) (push) Failing after 4s Details 🔒 Lockfile Consistency Check / 🔍 Check bun.lock and package.json consistency (push) Failing after 5s Details 🏷️🔀Merge Conflict Labeler / 🏷️ Labeling Merge Conflicts (push) Has been skipped Details 🚦 Security & Quality Gate / 📝 Validate PR Title (push) Has been skipped Details 🚦 Security & Quality Gate / 🔍 Vulnerable Dependencies (push) Failing after 4s Details 🚦 Security & Quality Gate / 🚑 Expo Doctor Check (push) Failing after 4s Details 🤖 iOS IPA Build (Phone + TV) / 🏗️ Build iOS IPA (phone) (push) Has been cancelled Details 🤖 iOS IPA Build (Phone + TV) / 🏗️ Build iOS IPA (tv) (push) Has been cancelled Details 🚦 Security & Quality Gate / 🔍 Lint & Test (check) (push) Has been cancelled Details 🚦 Security & Quality Gate / 🔍 Lint & Test (format) (push) Has been cancelled Details 🚦 Security & Quality Gate / 🔍 Lint & Test (lint) (push) Has been cancelled Details 🕒 Handle Stale Issues / 🗑️ Cleanup Stale Issues (push) Successful in 4s Details 🛡️ CodeQL Analysis / 🔎 Analyze with CodeQL (actions) (push) Failing after 14s Details 🛡️ CodeQL Analysis / 🔎 Analyze with CodeQL (javascript-typescript) (push) Failing after 14s Details	2025-08-20 10:30:57 +02:00
Fredrik Burmester	d795e82581	fix: trickplay and re-rendering issues	2025-08-20 09:59:03 +02:00
Fredrik Burmester	e7161bc9ab	fix: revert fade in controls	2025-08-20 08:21:01 +02:00
Fredrik Burmester	8e74363f32	Revert "chore: refactor controls (#946 )" This reverts commit `8389404975`.	2025-08-20 08:18:12 +02:00
Alex	1cb28788d6	Fix selecting bit rate on whole series downloads (#956 ) Co-authored-by: Alex Kim <alexkim@Alexs-MacBook-Pro.local>	2025-08-20 00:12:51 +10:00
renovate[bot]	ff9f855d4c	chore(deps): update amannn/action-semantic-pull-request action to v6.1.0 (#953 )	2025-08-19 13:37:47 +02:00
Fredrik Burmester	13df2d1077	chore: version	2025-08-19 10:01:34 +02:00
Fredrik Burmester	8389404975	chore: refactor controls (#946 ) Co-authored-by: Gauvain <68083474+Gauvino@users.noreply.github.com>	2025-08-19 09:02:56 +02:00
Fredrik Burmester	cd920e2d84	fix: small design change	2025-08-19 08:10:54 +02:00
Gauvain	92a11c18e0	docs: add new contributors to README (#951 )	2025-08-19 04:25:49 +02:00
Gauvain	e05f10fe42	ci: add actions language to CodeQL analysis matrix Expands security scanning to include GitHub Actions workflows alongside existing JavaScript/TypeScript analysis for more comprehensive code security coverage	2025-08-19 01:09:23 +02:00
renovate[bot]	2540ae22ce	chore(deps): update actions/dependency-review-action action to v4.7.2 (#950 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-08-19 01:08:50 +02:00
Gauvain	f490957091	ci: add iOS 18.0 SDK installation step (#949 )	2025-08-19 01:06:28 +02:00
renovate[bot]	a146fc8810	chore(deps): update dependency @biomejs/biome to v2.2.0 (#934 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Uruk <contact@uruk.dev> Co-authored-by: Gauvain <68083474+Gauvino@users.noreply.github.com>	2025-08-18 23:00:33 +02:00
renovate[bot]	100d7e0830	chore(deps): update github/codeql-action action to v3.29.10 (#948 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-08-18 21:18:54 +02:00
Fredrik Burmester	ebcdd5bbf7	feat: show when the stream ends, not only remaining time (#944 )	2025-08-18 14:57:02 +02:00
lance chant	18b33884e6	fix: settings storage calc (#943 ) Signed-off-by: Lance Chant <13349722+lancechant@users.noreply.github.com>	2025-08-18 14:53:58 +02:00
Fredrik Burmester	9410239c48	feat: scale factor and aspect ratio (#942 )	2025-08-18 14:24:45 +02:00
Fredrik Burmester	4fed25a3ab	chore: version	2025-08-18 09:17:24 +02:00
Fredrik Burmester	a8810cae8a	Merge branch 'feat/fade-in-controls' into develop	2025-08-18 09:16:38 +02:00
Fredrik Burmester	aff009de92	chore: version	2025-08-18 07:48:57 +02:00
Alex	1924efbef2	Fix more bugs (#939 ) Co-authored-by: Alex Kim <alexkim@Alexs-MacBook-Pro.local>	2025-08-17 15:25:51 +10:00
Alex	3b53d76a18	Hotfix/offline playback remaining bugs (#937 ) Co-authored-by: Alex Kim <alexkim@Alexs-MacBook-Pro.local>	2025-08-16 18:11:55 +10:00
Fredrik Burmester	b7221e5599	chore: version bump	2025-08-15 21:45:37 +02:00
Gauvain	24d006742b	Merge branch 'develop' into feat/fade-in-controls	2025-08-13 20:32:53 +02:00
Fredrik Burmester	c34c7fbe83	feat: fade in the controls (instead of on/off toggle)	2025-08-13 15:27:47 +02:00