fix(deps): update dependency react-native-safe-area-context to v5.6.1

Fix selecting bit rate on whole series downloads (#956 )
Co-authored-by: Alex Kim <alexkim@Alexs-MacBook-Pro.local>
2025-08-20 18:37:18 +02:00 · 2025-08-19 22:30:55 +00:00 · 2025-08-20 00:12:51 +10:00 · 2025-08-19 13:37:47 +02:00 · 2025-08-19 10:01:34 +02:00 · 2025-08-19 09:02:56 +02:00
45 changed files with 2064 additions and 972 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.30.2",
+    "version": "0.32.0",
    "orientation": "default",
    "icon": "./assets/images/icon.png",
    "scheme": "streamyfin",
@@ -37,7 +37,7 @@
    },
    "android": {
      "jsEngine": "hermes",
-      "versionCode": 58,
+      "versionCode": 61,
      "adaptiveIcon": {
        "foregroundImage": "./assets/images/icon-android-plain.png",
        "monochromeImage": "./assets/images/icon-android-themed.png",
--- 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
@@ -16,7 +16,7 @@ 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 { 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,
@@ -106,7 +99,7 @@ export default function page() {
    playbackPosition?: string;
  }>();
  const [settings] = useSettings();
-  const insets = useSafeAreaInsets();
+
  const offline = offlineStr === "true";
  const playbackManager = usePlaybackManager();

@@ -571,7 +564,14 @@ export default function page() {
    );

  return (
-    <View style={{ flex: 1, backgroundColor: "black" }}>
+    <View
+      style={{
+        flex: 1,
+        backgroundColor: "blue",
+        height: "100%",
+        width: "100%",
+      }}
+    >
      <View
        style={{
          display: "flex",
@@ -580,8 +580,6 @@ export default function page() {
          position: "relative",
          flexDirection: "column",
          justifyContent: "center",
-          paddingLeft: ignoreSafeAreas ? 0 : insets.left,
-          paddingRight: ignoreSafeAreas ? 0 : insets.right,
        }}
      >
        <VlcPlayerView
@@ -625,13 +623,11 @@ 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}
+          play={videoRef.current?.play || (() => {})}
+          pause={videoRef.current?.pause || (() => {})}
+          seek={videoRef.current?.seekTo || (() => {})}
          enableTrickplay={true}
          getAudioTracks={videoRef.current?.getAudioTracks}
          getSubtitleTracks={videoRef.current?.getSubtitleTracks}
@@ -639,6 +635,12 @@ export default function page() {
          setSubtitleTrack={videoRef.current?.setSubtitleTrack}
          setSubtitleURL={videoRef.current?.setSubtitleURL}
          setAudioTrack={videoRef.current?.setAudioTrack}
+          setVideoAspectRatio={videoRef.current?.setVideoAspectRatio}
+          setVideoScaleFactor={videoRef.current?.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
@@ -69,7 +69,7 @@
        "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",
+        "react-native-safe-area-context": "5.6.1",
        "react-native-screens": "~4.11.1",
        "react-native-svg": "15.11.2",
        "react-native-udp": "^4.1.7",
@@ -86,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",
@@ -1646,7 +1646,7 @@

    "react-native-reanimated-carousel": ["react-native-reanimated-carousel@4.0.2", "", { "peerDependencies": { "react": ">=18.0.0", "react-native": ">=0.70.3", "react-native-gesture-handler": ">=2.9.0", "react-native-reanimated": ">=3.0.0" } }, "sha512-vNpCfPlFoOVKHd+oB7B0luoJswp+nyz0NdJD8+LCrf25JiNQXfM22RSJhLaksBHqk3fm8R4fKWPNcfy5w7wL1Q=="],

-    "react-native-safe-area-context": ["react-native-safe-area-context@5.4.0", "", { "peerDependencies": { "react": "*", "react-native": "*" } }, "sha512-JaEThVyJcLhA+vU0NU8bZ0a1ih6GiF4faZ+ArZLqpYbL6j7R3caRqj+mE3lEtKCuHgwjLg3bCxLL1GPUJZVqUA=="],
+    "react-native-safe-area-context": ["react-native-safe-area-context@5.6.1", "", { "peerDependencies": { "react": "*", "react-native": "*" } }, "sha512-/wJE58HLEAkATzhhX1xSr+fostLsK8Q97EfpfMDKo8jlOc1QKESSX/FQrhk7HhQH/2uSaox4Y86sNaI02kteiA=="],

    "react-native-screens": ["react-native-screens@4.11.1", "", { "dependencies": { "react-freeze": "^1.0.0", "react-native-is-edge-to-edge": "^1.1.7", "warn-once": "^0.1.0" }, "peerDependencies": { "react": "*", "react-native": "*" } }, "sha512-F0zOzRVa3ptZfLpD0J8ROdo+y1fEPw+VBFq1MTY/iyDu08al7qFUO5hLMd+EYMda5VXGaTFCa8q7bOppUszhJw=="],

--- a/components/DownloadItem.tsx
+++ b/components/DownloadItem.tsx
@@ -106,20 +106,17 @@ export const DownloadItems: React.FC<DownloadProps> = ({

  // Initialize selectedOptions with default values
  useEffect(() => {
-    if (itemsNotDownloaded.length === 1) {
-      setSelectedOptions(() => ({
-        bitrate: defaultBitrate,
-        mediaSource: defaultMediaSource,
-        subtitleIndex: defaultSubtitleIndex ?? -1,
-        audioIndex: defaultAudioIndex,
-      }));
-    }
+    setSelectedOptions(() => ({
+      bitrate: defaultBitrate,
+      mediaSource: defaultMediaSource,
+      subtitleIndex: defaultSubtitleIndex ?? -1,
+      audioIndex: defaultAudioIndex,
+    }));
  }, [
    defaultAudioIndex,
    defaultBitrate,
    defaultSubtitleIndex,
    defaultMediaSource,
-    itemsNotDownloaded.length,
  ]);

  const itemsToDownload = useMemo(() => {
--- 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/common/HorrizontalScroll.tsx
+++ b/components/common/HorrizontalScroll.tsx
@@ -43,6 +43,7 @@ export const HorizontalScroll = <T,>(
    ref,
    ...restProps
  } = props;
+
  const flashListRef = useRef<FlashList<T>>(null);

  useImperativeHandle(ref!, () => ({
@@ -70,7 +71,7 @@ export const HorizontalScroll = <T,>(
  }

  return (
-    <View style={containerStyle}>
+    <View style={[{ height }, containerStyle]}>
      <FlashList<T>
        ref={flashListRef}
        data={data}
--- 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/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/Controls.tsx
+++ b/components/video-player/controls/Controls.tsx
--- 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/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/VideoTouchOverlay.tsx
+++ b/components/video-player/controls/VideoTouchOverlay.tsx
@@ -1,38 +1,43 @@
 import { Pressable } from "react-native";
+import Animated, { type AnimatedStyle } from "react-native-reanimated";
 import { useTapDetection } from "./useTapDetection";

+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+
 interface Props {
  screenWidth: number;
  screenHeight: number;
-  showControls: boolean;
  onToggleControls: () => void;
+  animatedStyle: AnimatedStyle;
 }

 export const VideoTouchOverlay = ({
  screenWidth,
  screenHeight,
-  showControls,
  onToggleControls,
+  animatedStyle,
 }: Props) => {
  const { handleTouchStart, handleTouchEnd } = useTapDetection({
    onValidTap: onToggleControls,
  });

  return (
-    <Pressable
+    <AnimatedPressable
      onTouchStart={handleTouchStart}
      onTouchEnd={handleTouchEnd}
-      style={{
-        position: "absolute",
-        width: screenWidth,
-        height: screenHeight,
-        backgroundColor: "black",
-        left: 0,
-        right: 0,
-        top: 0,
-        bottom: 0,
-        opacity: showControls ? 0.75 : 0,
-      }}
+      style={[
+        {
+          position: "absolute",
+          width: screenWidth,
+          height: screenHeight,
+          backgroundColor: "black",
+          left: 0,
+          right: 0,
+          top: 0,
+          bottom: 0,
+        },
+        animatedStyle,
+      ]}
    />
  );
 };
--- a/components/video-player/controls/components/BottomControls.tsx
+++ b/components/video-player/controls/components/BottomControls.tsx
@@ -0,0 +1,229 @@
+import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
+import React from "react";
+import { View } from "react-native";
+import { Slider } from "react-native-awesome-slider";
+import Animated, { 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 { formatTimeString } from "@/utils/time";
+import { SLIDER_CONFIG, SLIDER_THEME } from "../constants";
+import NextEpisodeCountDownButton from "../NextEpisodeCountDownButton";
+import SkipButton from "../SkipButton";
+import { TrickplayBubble } from "./TrickplayBubble";
+
+interface BottomControlsProps {
+  item: BaseItemDto;
+  showControls: boolean;
+  isSliding: boolean;
+  showRemoteBubble: boolean;
+  currentTime: number;
+  remainingTime: number;
+  isVlc: boolean;
+  nextItem?: BaseItemDto;
+  showSkipButton: boolean;
+  showSkipCreditButton: boolean;
+  cacheProgress: SharedValue<number>;
+  min: SharedValue<number>;
+  max: SharedValue<number>;
+  effectiveProgress: SharedValue<number>;
+  animatedControlsStyle: any;
+  animatedSliderStyle: any;
+  trickPlayUrl?: {
+    x: number;
+    y: number;
+    url: string;
+  };
+  trickplayInfo?: {
+    aspectRatio: number;
+    data: {
+      TileWidth?: number;
+      TileHeight?: number;
+    };
+  };
+  time: {
+    hours: number;
+    minutes: number;
+    seconds: number;
+  };
+  getEndTime: () => string;
+  onControlsInteraction: () => void;
+  onTouchStart: () => void;
+  onTouchEnd: () => void;
+  onSliderStart: () => void;
+  onSliderComplete: (value: number) => void;
+  onSliderChange: (value: number) => void;
+  onSkipIntro: () => void;
+  onSkipCredit: () => void;
+  onNextEpisodeAutoPlay: () => void;
+  onNextEpisodeManual: () => void;
+}
+
+export const BottomControls: React.FC<BottomControlsProps> = ({
+  item,
+  showControls,
+  isSliding,
+  showRemoteBubble,
+  currentTime,
+  remainingTime,
+  isVlc,
+  nextItem,
+  showSkipButton,
+  showSkipCreditButton,
+  cacheProgress,
+  min,
+  max,
+  effectiveProgress,
+  animatedControlsStyle,
+  animatedSliderStyle,
+  trickPlayUrl,
+  trickplayInfo,
+  time,
+  getEndTime,
+  onControlsInteraction,
+  onTouchStart,
+  onTouchEnd,
+  onSliderStart,
+  onSliderComplete,
+  onSliderChange,
+  onSkipIntro,
+  onSkipCredit,
+  onNextEpisodeAutoPlay,
+  onNextEpisodeManual,
+}) => {
+  const [settings] = useSettings();
+  const insets = useSafeAreaInsets();
+
+  const renderTrickplayBubble = () => (
+    <TrickplayBubble
+      trickPlayUrl={trickPlayUrl}
+      trickplayInfo={trickplayInfo}
+      time={time}
+    />
+  );
+
+  return (
+    <Animated.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,
+        },
+        animatedControlsStyle,
+      ]}
+      className={"flex flex-col px-2"}
+      onTouchStart={onControlsInteraction}
+    >
+      <View
+        className='shrink flex flex-col justify-center h-full'
+        style={{
+          flexDirection: "row",
+          justifyContent: "space-between",
+        }}
+      >
+        <View
+          style={{
+            flexDirection: "column",
+            alignSelf: "flex-end", // Shrink height based on content
+          }}
+          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={onSkipIntro}
+            buttonText='Skip Intro'
+          />
+          <SkipButton
+            showButton={showSkipCreditButton}
+            onPress={onSkipCredit}
+            buttonText='Skip Credits'
+          />
+          {(settings.maxAutoPlayEpisodeCount.value === -1 ||
+            settings.autoPlayEpisodeCount <
+              settings.maxAutoPlayEpisodeCount.value) && (
+            <NextEpisodeCountDownButton
+              show={
+                !nextItem
+                  ? false
+                  : isVlc
+                    ? remainingTime < 10000
+                    : remainingTime < 10
+              }
+              onFinish={onNextEpisodeAutoPlay}
+              onPress={onNextEpisodeManual}
+            />
+          )}
+        </View>
+      </View>
+      <View
+        className={"flex flex-col-reverse rounded-lg items-center my-2"}
+        pointerEvents={showControls ? "box-none" : "none"}
+      >
+        <View className={"flex flex-col w-full shrink"}>
+          <View
+            style={{
+              height: SLIDER_CONFIG.HEIGHT,
+              justifyContent: "center",
+              alignItems: "stretch",
+            }}
+            onTouchStart={onTouchStart}
+            onTouchEnd={onTouchEnd}
+          >
+            <Animated.View style={animatedSliderStyle}>
+              <Slider
+                theme={SLIDER_THEME}
+                renderThumb={() => null}
+                cache={cacheProgress}
+                onSlidingStart={onSliderStart}
+                onSlidingComplete={onSliderComplete}
+                onValueChange={onSliderChange}
+                containerStyle={{
+                  borderRadius: SLIDER_CONFIG.BORDER_RADIUS,
+                }}
+                renderBubble={() =>
+                  (isSliding || showRemoteBubble) && renderTrickplayBubble()
+                }
+                sliderHeight={SLIDER_CONFIG.HEIGHT}
+                thumbWidth={SLIDER_CONFIG.THUMB_WIDTH}
+                progress={effectiveProgress}
+                minimumValue={min}
+                maximumValue={max}
+              />
+            </Animated.View>
+          </View>
+          <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 {getEndTime()}
+              </Text>
+            </View>
+          </View>
+        </View>
+      </View>
+    </Animated.View>
+  );
+};
--- a/components/video-player/controls/components/CenterControls.tsx
+++ b/components/video-player/controls/components/CenterControls.tsx
@@ -0,0 +1,162 @@
+import { Ionicons } from "@expo/vector-icons";
+import React from "react";
+import { Platform, TouchableOpacity, View } from "react-native";
+import Animated from "react-native-reanimated";
+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";
+
+interface CenterControlsProps {
+  showControls: boolean;
+  showAudioSlider: boolean;
+  isPlaying: boolean;
+  isBuffering: boolean;
+  rewindSkipTime?: number;
+  forwardSkipTime?: number;
+  animatedControlsStyle: any;
+  setShowAudioSlider: (show: boolean) => void;
+  onTogglePlay: () => void;
+  onSkipBackward: () => void;
+  onSkipForward: () => void;
+}
+
+export const CenterControls: React.FC<CenterControlsProps> = ({
+  showControls,
+  showAudioSlider,
+  isPlaying,
+  isBuffering,
+  rewindSkipTime,
+  forwardSkipTime,
+  animatedControlsStyle,
+  setShowAudioSlider,
+  onTogglePlay,
+  onSkipBackward,
+  onSkipForward,
+}) => {
+  const [settings] = useSettings();
+  const insets = useSafeAreaInsets();
+
+  return (
+    <Animated.View
+      style={[
+        {
+          position: "absolute",
+          top: "50%", // Center vertically
+          left: settings?.safeAreaInControlsEnabled ? insets.left : 0,
+          right: settings?.safeAreaInControlsEnabled ? insets.right : 0,
+          flexDirection: "row",
+          justifyContent: "space-between",
+          alignItems: "center",
+          transform: [{ translateY: -22.5 }], // Adjust for the button's height (half of 45)
+          paddingHorizontal: 17,
+        },
+        animatedControlsStyle,
+      ]}
+      pointerEvents={showControls ? "box-none" : "none"}
+    >
+      {/* Brightness Control */}
+      <View
+        style={{
+          width: 50,
+          height: 50,
+          alignItems: "center",
+          justifyContent: "center",
+          transform: [{ rotate: "270deg" }],
+        }}
+      >
+        <BrightnessSlider />
+      </View>
+
+      {/* Skip Backward */}
+      {!Platform.isTV && (
+        <TouchableOpacity onPress={onSkipBackward}>
+          <View
+            style={{
+              position: "relative",
+              justifyContent: "center",
+              alignItems: "center",
+            }}
+          >
+            <Ionicons
+              name='refresh-outline'
+              size={50}
+              color='white'
+              style={{
+                transform: [{ scaleY: -1 }, { rotate: "180deg" }],
+              }}
+            />
+            <Text
+              style={{
+                position: "absolute",
+                color: "white",
+                fontSize: 16,
+                fontWeight: "bold",
+                bottom: 10,
+              }}
+            >
+              {rewindSkipTime}
+            </Text>
+          </View>
+        </TouchableOpacity>
+      )}
+
+      {/* Play/Pause Button */}
+      <View style={{ alignItems: "center" }}>
+        <TouchableOpacity onPress={onTogglePlay}>
+          {!isBuffering ? (
+            <Ionicons
+              name={isPlaying ? "pause" : "play"}
+              size={50}
+              color='white'
+            />
+          ) : (
+            <Loader size={"large"} />
+          )}
+        </TouchableOpacity>
+      </View>
+
+      {/* Skip Forward */}
+      {!Platform.isTV && (
+        <TouchableOpacity onPress={onSkipForward}>
+          <View
+            style={{
+              position: "relative",
+              justifyContent: "center",
+              alignItems: "center",
+            }}
+          >
+            <Ionicons name='refresh-outline' size={50} color='white' />
+            <Text
+              style={{
+                position: "absolute",
+                color: "white",
+                fontSize: 16,
+                fontWeight: "bold",
+                bottom: 10,
+              }}
+            >
+              {forwardSkipTime}
+            </Text>
+          </View>
+        </TouchableOpacity>
+      )}
+
+      {/* Volume/Audio Control */}
+      <View
+        style={{
+          width: 50,
+          height: 50,
+          alignItems: "center",
+          justifyContent: "center",
+          transform: [{ rotate: "270deg" }],
+          opacity: showAudioSlider || showControls ? 1 : 0,
+        }}
+      >
+        <AudioSlider setVisibility={setShowAudioSlider} />
+      </View>
+    </Animated.View>
+  );
+};
--- a/components/video-player/controls/components/TopControlsBar.tsx
+++ b/components/video-player/controls/components/TopControlsBar.tsx
@@ -0,0 +1,166 @@
+import { Ionicons, MaterialIcons } from "@expo/vector-icons";
+import type {
+  BaseItemDto,
+  MediaSourceInfo,
+} from "@jellyfin/sdk/lib/generated-client";
+import React from "react";
+import { Platform, TouchableOpacity, View } from "react-native";
+import Animated from "react-native-reanimated";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import type { TrackInfo } from "@/modules/VlcPlayer.types";
+import { useSettings, VideoPlayer } from "@/utils/atoms/settings";
+import { VideoProvider } from "../contexts/VideoContext";
+import DropdownView from "../dropdown/DropdownView";
+import { type ScaleFactor, ScaleFactorSelector } from "../ScaleFactorSelector";
+import {
+  type AspectRatio,
+  AspectRatioSelector,
+} from "../VideoScalingModeSelector";
+
+interface TopControlsBarProps {
+  item: BaseItemDto;
+  mediaSource?: MediaSourceInfo | null;
+  offline: boolean;
+  showControls: boolean;
+  aspectRatio: AspectRatio;
+  scaleFactor: ScaleFactor;
+  previousItem?: BaseItemDto;
+  nextItem?: BaseItemDto;
+  animatedControlsStyle: any;
+  screenWidth: number;
+  getAudioTracks?: (() => Promise<TrackInfo[] | null>) | (() => TrackInfo[]);
+  getSubtitleTracks?: (() => Promise<TrackInfo[] | null>) | (() => TrackInfo[]);
+  setSubtitleURL?: (url: string, customName: string) => void;
+  setSubtitleTrack?: (index: number) => void;
+  setAudioTrack?: (index: number) => void;
+  setVideoAspectRatio?: (aspectRatio: string | null) => Promise<void>;
+  setVideoScaleFactor?: (scaleFactor: number) => Promise<void>;
+  startPictureInPicture?: () => Promise<void>;
+  onAspectRatioChange: (ratio: AspectRatio) => void;
+  onScaleFactorChange: (scale: ScaleFactor) => void;
+  onEpisodeModeToggle: () => void;
+  onGoToPreviousItem: () => void;
+  onGoToNextItem: () => void;
+  onClose: () => void;
+}
+
+export const TopControlsBar: React.FC<TopControlsBarProps> = ({
+  item,
+  mediaSource,
+  offline,
+  showControls,
+  aspectRatio,
+  scaleFactor,
+  previousItem,
+  nextItem,
+  animatedControlsStyle,
+  screenWidth,
+  getAudioTracks,
+  getSubtitleTracks,
+  setSubtitleURL,
+  setSubtitleTrack,
+  setAudioTrack,
+  setVideoAspectRatio,
+  setVideoScaleFactor,
+  startPictureInPicture,
+  onAspectRatioChange,
+  onScaleFactorChange,
+  onEpisodeModeToggle,
+  onGoToPreviousItem,
+  onGoToNextItem,
+  onClose,
+}) => {
+  const [settings] = useSettings();
+  const insets = useSafeAreaInsets();
+
+  return (
+    <Animated.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,
+        },
+        animatedControlsStyle,
+      ]}
+      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={24}
+                color='white'
+                style={{ opacity: showControls ? 1 : 0 }}
+              />
+            </TouchableOpacity>
+          )}
+        {item?.Type === "Episode" && (
+          <TouchableOpacity
+            onPress={onEpisodeModeToggle}
+            className='aspect-square flex flex-col rounded-xl items-center justify-center p-2'
+          >
+            <Ionicons name='list' size={24} color='white' />
+          </TouchableOpacity>
+        )}
+        {previousItem && (
+          <TouchableOpacity
+            onPress={onGoToPreviousItem}
+            className='aspect-square flex flex-col rounded-xl items-center justify-center p-2'
+          >
+            <Ionicons name='play-skip-back' size={24} color='white' />
+          </TouchableOpacity>
+        )}
+        {nextItem && (
+          <TouchableOpacity
+            onPress={onGoToNextItem}
+            className='aspect-square flex flex-col rounded-xl items-center justify-center p-2'
+          >
+            <Ionicons name='play-skip-forward' size={24} color='white' />
+          </TouchableOpacity>
+        )}
+        {/* Video Controls */}
+        <AspectRatioSelector
+          currentRatio={aspectRatio}
+          onRatioChange={onAspectRatioChange}
+          disabled={!setVideoAspectRatio}
+        />
+        <ScaleFactorSelector
+          currentScale={scaleFactor}
+          onScaleChange={onScaleFactorChange}
+          disabled={!setVideoScaleFactor}
+        />
+        <TouchableOpacity
+          onPress={onClose}
+          className='aspect-square flex flex-col rounded-xl items-center justify-center p-2'
+        >
+          <Ionicons name='close' size={24} color='white' />
+        </TouchableOpacity>
+      </View>
+    </Animated.View>
+  );
+};
--- a/components/video-player/controls/components/TrickplayBubble.tsx
+++ b/components/video-player/controls/components/TrickplayBubble.tsx
@@ -0,0 +1,94 @@
+import { Image } from "expo-image";
+import React from "react";
+import { View } from "react-native";
+import { Text } from "@/components/common/Text";
+import {
+  calculateTrickplayDimensions,
+  formatTimeForBubble,
+} from "../utils/trickplayUtils";
+
+interface TrickplayBubbleProps {
+  trickPlayUrl?: {
+    x: number;
+    y: number;
+    url: string;
+  };
+  trickplayInfo?: {
+    aspectRatio: number;
+    data: {
+      TileWidth?: number;
+      TileHeight?: number;
+    };
+  };
+  time: {
+    hours: number;
+    minutes: number;
+    seconds: number;
+  };
+}
+
+export const TrickplayBubble: React.FC<TrickplayBubbleProps> = ({
+  trickPlayUrl,
+  trickplayInfo,
+  time,
+}) => {
+  if (!trickPlayUrl || !trickplayInfo) {
+    return null;
+  }
+
+  const { x, y, url } = trickPlayUrl;
+  const { tileWidth, tileHeight, scaledWidth } = calculateTrickplayDimensions(
+    trickplayInfo.aspectRatio,
+  );
+
+  return (
+    <View
+      style={{
+        position: "absolute",
+        left: -62,
+        bottom: 0,
+        paddingTop: 30,
+        paddingBottom: 5,
+        width: scaledWidth,
+        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: 150 * (trickplayInfo.data.TileWidth || 1),
+            height:
+              (150 / trickplayInfo.aspectRatio) *
+              (trickplayInfo.data.TileHeight || 1),
+            transform: [
+              { translateX: -x * tileWidth },
+              { translateY: -y * tileHeight },
+            ],
+            resizeMode: "cover",
+          }}
+          source={{ uri: url }}
+          contentFit='cover'
+        />
+      </View>
+      <Text
+        style={{
+          marginTop: 30,
+          fontSize: 16,
+        }}
+      >
+        {formatTimeForBubble(time)}
+      </Text>
+    </View>
+  );
+};
--- a/components/video-player/controls/constants.ts
+++ b/components/video-player/controls/constants.ts
@@ -0,0 +1,28 @@
+export const CONTROLS_TIMEOUT = 4000;
+
+export const TRICKPLAY_TILE_WIDTH = 150;
+export const TRICKPLAY_TILE_SCALE = 1.4;
+
+export const SLIDER_SCALE_UP = 1.4;
+export const SLIDER_SCALE_NORMAL = 1.0;
+
+export const ANIMATION_DURATION = {
+  CONTROLS_FADE: 300,
+  SLIDER_SCALE: 300,
+  SLIDER_SCALE_COMPLETE: 200,
+} as const;
+
+export const SLIDER_CONFIG = {
+  HEIGHT: 10,
+  THUMB_WIDTH: 0,
+  BORDER_RADIUS: 100,
+} as const;
+
+export const SLIDER_THEME = {
+  maximumTrackTintColor: "rgba(255,255,255,0.2)",
+  minimumTrackTintColor: "#fff",
+  cacheTrackTintColor: "rgba(255,255,255,0.3)",
+  bubbleBackgroundColor: "#fff",
+  bubbleTextColor: "#666",
+  heartbeatColor: "#999",
+} as const;
--- a/components/video-player/controls/contexts/VideoContext.tsx
+++ b/components/video-player/controls/contexts/VideoContext.tsx
@@ -85,7 +85,6 @@ export const VideoProvider: React.FC<VideoProviderProps> = ({
    chosenAudioIndex?: string;
    chosenSubtitleIndex?: string;
  }) => {
-    console.log("chosenSubtitleIndex", chosenSubtitleIndex);
    const queryParams = new URLSearchParams({
      itemId: itemId ?? "",
      audioIndex: chosenAudioIndex,
@@ -115,7 +114,6 @@ export const VideoProvider: React.FC<VideoProviderProps> = ({
      mediaSource?.TranscodingUrl &&
      !onTextBasedSubtitle;

-    console.log("Set player params", index, serverIndex);
    if (shouldChangePlayerParams) {
      setPlayerParams({
        chosenSubtitleIndex: serverIndex.toString(),
--- a/components/video-player/controls/hooks/useEpisodeNavigation.ts
+++ b/components/video-player/controls/hooks/useEpisodeNavigation.ts
@@ -0,0 +1,169 @@
+import type {
+  BaseItemDto,
+  MediaSourceInfo,
+} from "@jellyfin/sdk/lib/generated-client";
+import { useLocalSearchParams, useRouter } from "expo-router";
+import { useCallback } from "react";
+import { useHaptic } from "@/hooks/useHaptic";
+import { usePlaybackManager } from "@/hooks/usePlaybackManager";
+import { useSettings } from "@/utils/atoms/settings";
+import { getDefaultPlaySettings } from "@/utils/jellyfin/getDefaultPlaySettings";
+
+interface UseEpisodeNavigationProps {
+  item: BaseItemDto;
+  offline: boolean;
+  mediaSource?: MediaSourceInfo | null;
+}
+
+export const useEpisodeNavigation = ({
+  item,
+  offline,
+  mediaSource,
+}: UseEpisodeNavigationProps) => {
+  const [settings, updateSettings] = useSettings();
+  const router = useRouter();
+  const lightHapticFeedback = useHaptic("light");
+
+  const { bitrateValue, subtitleIndex, audioIndex } = useLocalSearchParams<{
+    bitrateValue: string;
+    audioIndex: string;
+    subtitleIndex: string;
+  }>();
+
+  const { previousItem, nextItem } = usePlaybackManager({
+    item,
+    isOffline: offline,
+  });
+
+  const goToItemCommon = useCallback(
+    (item: BaseItemDto) => {
+      if (!item || !settings) {
+        return;
+      }
+      lightHapticFeedback();
+      const previousIndexes = {
+        subtitleIndex: subtitleIndex
+          ? Number.parseInt(subtitleIndex, 10)
+          : undefined,
+        audioIndex: audioIndex ? Number.parseInt(audioIndex, 10) : undefined,
+      };
+
+      const {
+        mediaSource: newMediaSource,
+        audioIndex: defaultAudioIndex,
+        subtitleIndex: defaultSubtitleIndex,
+      } = getDefaultPlaySettings(
+        item,
+        settings,
+        previousIndexes,
+        mediaSource ?? undefined,
+      );
+
+      const queryParams = new URLSearchParams({
+        ...(offline && { offline: "true" }),
+        itemId: item.Id ?? "",
+        audioIndex: defaultAudioIndex?.toString() ?? "",
+        subtitleIndex: defaultSubtitleIndex?.toString() ?? "",
+        mediaSourceId: newMediaSource?.Id ?? "",
+        bitrateValue: bitrateValue?.toString(),
+        playbackPosition:
+          item.UserData?.PlaybackPositionTicks?.toString() ?? "",
+      }).toString();
+
+      // @ts-expect-error
+      router.replace(`player/direct-player?${queryParams}`);
+    },
+    [
+      settings,
+      subtitleIndex,
+      audioIndex,
+      mediaSource,
+      bitrateValue,
+      router,
+      lightHapticFeedback,
+    ],
+  );
+
+  const goToPreviousItem = useCallback(() => {
+    if (!previousItem) {
+      return;
+    }
+    goToItemCommon(previousItem);
+  }, [previousItem, goToItemCommon]);
+
+  const goToNextItem = useCallback(
+    ({
+      isAutoPlay,
+      resetWatchCount,
+    }: {
+      isAutoPlay?: boolean;
+      resetWatchCount?: boolean;
+    }) => {
+      if (!nextItem) {
+        return;
+      }
+
+      if (!isAutoPlay) {
+        // if we are not autoplaying, we won't update anything, we just go to the next item
+        goToItemCommon(nextItem);
+        if (resetWatchCount) {
+          updateSettings({
+            autoPlayEpisodeCount: 0,
+          });
+        }
+        return;
+      }
+
+      // Skip autoplay logic if maxAutoPlayEpisodeCount is -1
+      if (settings.maxAutoPlayEpisodeCount.value === -1) {
+        goToItemCommon(nextItem);
+        return;
+      }
+
+      if (
+        settings.autoPlayEpisodeCount + 1 <
+        settings.maxAutoPlayEpisodeCount.value
+      ) {
+        goToItemCommon(nextItem);
+      }
+
+      // Check if the autoPlayEpisodeCount is less than maxAutoPlayEpisodeCount for the autoPlay
+      if (
+        settings.autoPlayEpisodeCount < settings.maxAutoPlayEpisodeCount.value
+      ) {
+        // update the autoPlayEpisodeCount in settings
+        updateSettings({
+          autoPlayEpisodeCount: settings.autoPlayEpisodeCount + 1,
+        });
+      }
+    },
+    [nextItem, goToItemCommon, settings, updateSettings],
+  );
+
+  // Memoized handlers
+  const handleNextEpisodeAutoPlay = useCallback(() => {
+    goToNextItem({ isAutoPlay: true });
+  }, [goToNextItem]);
+
+  const handleNextEpisodeManual = useCallback(() => {
+    goToNextItem({ isAutoPlay: false });
+  }, [goToNextItem]);
+
+  const handleContinueWatching = useCallback(
+    (options: { isAutoPlay?: boolean; resetWatchCount?: boolean }) => {
+      goToNextItem(options);
+    },
+    [goToNextItem],
+  );
+
+  return {
+    previousItem,
+    nextItem,
+    goToItemCommon,
+    goToPreviousItem,
+    goToNextItem,
+    handleNextEpisodeAutoPlay,
+    handleNextEpisodeManual,
+    handleContinueWatching,
+  };
+};
--- a/components/video-player/controls/hooks/useRemoteControls.ts
+++ b/components/video-player/controls/hooks/useRemoteControls.ts
@@ -0,0 +1,212 @@
+import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
+import { useEffect, useRef, useState } from "react";
+import { useTVEventHandler } from "react-native";
+import type { SharedValue } from "react-native-reanimated";
+import { useTrickplay } from "@/hooks/useTrickplay";
+import { msToTicks, secondsToMs, ticksToSeconds } from "@/utils/time";
+
+interface UseRemoteControlsProps {
+  progress: SharedValue<number>;
+  min: SharedValue<number>;
+  max: SharedValue<number>;
+  isVlc: boolean;
+  showControls: boolean;
+  isPlaying: boolean;
+  item: BaseItemDto;
+  seek: (ticks: number) => void;
+  play: () => void;
+  togglePlay: () => void;
+  toggleControls: () => void;
+}
+
+export const useRemoteControls = ({
+  progress,
+  min,
+  max,
+  isVlc,
+  showControls,
+  isPlaying,
+  item,
+  seek,
+  play,
+  togglePlay,
+  toggleControls,
+}: UseRemoteControlsProps) => {
+  const { calculateTrickplayUrl } = useTrickplay(item);
+
+  const remoteScrubProgress = useRef<SharedValue<number | null>>(null);
+  const isRemoteScrubbing = useRef<SharedValue<boolean>>(null);
+  const SCRUB_INTERVAL = isVlc ? secondsToMs(10) : msToTicks(secondsToMs(10));
+  const [showRemoteBubble, setShowRemoteBubble] = useState(false);
+  const [longPressScrubMode, setLongPressScrubMode] = useState<
+    "FF" | "RW" | null
+  >(null);
+  const [time, setTime] = useState({ hours: 0, minutes: 0, seconds: 0 });
+
+  const longPressTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(
+    null,
+  );
+
+  // Initialize shared values if not provided
+  if (!remoteScrubProgress.current) {
+    remoteScrubProgress.current = { value: null } as SharedValue<number | null>;
+  }
+  if (!isRemoteScrubbing.current) {
+    isRemoteScrubbing.current = { value: false } as SharedValue<boolean>;
+  }
+
+  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.current!.value = true;
+        setShowRemoteBubble(true);
+
+        const direction = evt.eventType === "left" ? -1 : 1;
+        const base = remoteScrubProgress.current!.value ?? progress.value;
+        const updated = Math.max(
+          min.value,
+          Math.min(max.value, base + direction * SCRUB_INTERVAL),
+        );
+        remoteScrubProgress.current!.value = updated;
+        const progressInTicks = isVlc ? msToTicks(updated) : updated;
+        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 });
+        break;
+      }
+      case "select": {
+        if (
+          isRemoteScrubbing.current!.value &&
+          remoteScrubProgress.current!.value != null
+        ) {
+          progress.value = remoteScrubProgress.current!.value;
+
+          const seekTarget = isVlc
+            ? Math.max(0, remoteScrubProgress.current!.value)
+            : Math.max(0, ticksToSeconds(remoteScrubProgress.current!.value));
+
+          seek(seekTarget);
+          if (isPlaying) play();
+
+          isRemoteScrubbing.current!.value = false;
+          remoteScrubProgress.current!.value = null;
+          setShowRemoteBubble(false);
+        } else {
+          togglePlay();
+        }
+        break;
+      }
+      case "down":
+      case "up":
+        // cancel scrubbing on other directions
+        isRemoteScrubbing.current!.value = false;
+        remoteScrubProgress.current!.value = null;
+        setShowRemoteBubble(false);
+        break;
+      default:
+        break;
+    }
+
+    if (!showControls) toggleControls();
+  });
+
+  const handleSeekBackward = (
+    seconds: number,
+    wasPlayingRef: React.MutableRefObject<boolean>,
+  ) => {
+    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) {
+      console.error("Error seeking video backwards", error);
+    }
+  };
+
+  const handleSeekForward = (
+    seconds: number,
+    wasPlayingRef: React.MutableRefObject<boolean>,
+  ) => {
+    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) {
+      console.error("Error seeking video forwards", error);
+    }
+  };
+
+  // Long press scrubbing effect
+  useEffect(() => {
+    let isActive = true;
+    let seekTime = 10;
+
+    if (longPressScrubMode) {
+      // Function is used, but eslint doesn't detect it inside setTimeout
+      const scrubWithLongPress = (
+        wasPlayingRef: React.MutableRefObject<boolean>,
+      ) => {
+        if (!isActive || !longPressScrubMode) return;
+
+        const scrubFn =
+          longPressScrubMode === "FF"
+            ? (time: number) => handleSeekForward(time, wasPlayingRef)
+            : (time: number) => handleSeekBackward(time, wasPlayingRef);
+
+        scrubFn(seekTime);
+        seekTime *= 1.1;
+
+        longPressTimeoutRef.current = setTimeout(
+          () => scrubWithLongPress(wasPlayingRef),
+          300,
+        );
+      };
+
+      // Start the scrubbing
+      const wasPlayingRef = { current: isPlaying };
+      scrubWithLongPress(wasPlayingRef);
+    }
+
+    return () => {
+      isActive = false;
+      if (longPressTimeoutRef.current) {
+        clearTimeout(longPressTimeoutRef.current);
+        longPressTimeoutRef.current = null;
+      }
+    };
+  }, [longPressScrubMode, handleSeekBackward, handleSeekForward, isPlaying]);
+
+  return {
+    remoteScrubProgress: remoteScrubProgress.current,
+    isRemoteScrubbing: isRemoteScrubbing.current,
+    showRemoteBubble,
+    longPressScrubMode,
+    time,
+    handleSeekBackward,
+    handleSeekForward,
+  };
+};
--- a/components/video-player/controls/hooks/useSkipControls.ts
+++ b/components/video-player/controls/hooks/useSkipControls.ts
@@ -0,0 +1,75 @@
+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 UseSkipControlsProps {
+  progress: SharedValue<number>;
+  isPlaying: boolean;
+  isVlc: boolean;
+  seek: (ticks: number) => void;
+  play: () => void;
+}
+
+export const useSkipControls = ({
+  progress,
+  isPlaying,
+  isVlc,
+  seek,
+  play,
+}: UseSkipControlsProps) => {
+  const [settings] = useSettings();
+  const lightHapticFeedback = useHaptic("light");
+  const wasPlayingRef = useRef(false);
+
+  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, 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, lightHapticFeedback]);
+
+  return {
+    handleSkipBackward,
+    handleSkipForward,
+  };
+};
--- a/components/video-player/controls/hooks/useSliderInteractions.ts
+++ b/components/video-player/controls/hooks/useSliderInteractions.ts
@@ -0,0 +1,120 @@
+import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
+import { debounce } from "lodash";
+import { useCallback, useRef, useState } from "react";
+import {
+  type SharedValue,
+  useSharedValue,
+  withTiming,
+} from "react-native-reanimated";
+import { useTrickplay } from "@/hooks/useTrickplay";
+import { msToTicks, ticksToSeconds } from "@/utils/time";
+
+interface UseSliderInteractionsProps {
+  progress: SharedValue<number>;
+  isSeeking: SharedValue<boolean>;
+  isPlaying: boolean;
+  isVlc: boolean;
+  showControls: boolean;
+  item: BaseItemDto;
+  seek: (ticks: number) => void;
+  play: () => void;
+  pause: () => void;
+}
+
+export const useSliderInteractions = ({
+  progress,
+  isSeeking,
+  isPlaying,
+  isVlc,
+  showControls,
+  item,
+  seek,
+  play,
+  pause,
+}: UseSliderInteractionsProps) => {
+  const [isSliding, setIsSliding] = useState(false);
+  const [time, setTime] = useState({ hours: 0, minutes: 0, seconds: 0 });
+
+  const wasPlayingRef = useRef(false);
+  const lastProgressRef = useRef<number>(0);
+
+  // Animated scale for slider
+  const sliderScale = useSharedValue(1);
+
+  const { calculateTrickplayUrl } = useTrickplay(item);
+
+  const handleSliderStart = useCallback(() => {
+    if (!showControls) {
+      return;
+    }
+
+    setIsSliding(true);
+    wasPlayingRef.current = isPlaying;
+    lastProgressRef.current = progress.value;
+
+    pause();
+    isSeeking.value = true;
+  }, [showControls, isPlaying, pause]);
+
+  const handleTouchStart = useCallback(() => {
+    if (!showControls) {
+      return;
+    }
+
+    // Scale up the slider immediately on touch
+    sliderScale.value = withTiming(1.4, { duration: 300 });
+  }, [showControls]);
+
+  const handleTouchEnd = useCallback(() => {
+    if (!showControls) {
+      return;
+    }
+
+    // Scale down the slider on touch end (only if not sliding, to avoid conflict with onSlidingComplete)
+    if (!isSliding) {
+      sliderScale.value = withTiming(1.0, { duration: 300 });
+    }
+  }, [showControls, isSliding]);
+
+  const handleSliderComplete = useCallback(
+    async (value: number) => {
+      isSeeking.value = false;
+      progress.value = value;
+      setIsSliding(false);
+
+      // Scale down the slider
+      sliderScale.value = withTiming(1.0, { duration: 200 });
+
+      seek(Math.max(0, Math.floor(isVlc ? value : ticksToSeconds(value))));
+      if (wasPlayingRef.current) {
+        play();
+      }
+    },
+    [isVlc, seek, play],
+  );
+
+  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 });
+    }, 3),
+    [isVlc, calculateTrickplayUrl],
+  );
+
+  return {
+    isSliding,
+    setIsSliding,
+    time,
+    sliderScale,
+    handleSliderStart,
+    handleTouchStart,
+    handleTouchEnd,
+    handleSliderComplete,
+    handleSliderChange,
+  };
+};
--- a/components/video-player/controls/hooks/useTimeManagement.ts
+++ b/components/video-player/controls/hooks/useTimeManagement.ts
@@ -0,0 +1,69 @@
+import { useCallback, useState } from "react";
+import {
+  runOnJS,
+  type SharedValue,
+  useAnimatedReaction,
+} from "react-native-reanimated";
+import { ticksToSeconds } from "@/utils/time";
+
+interface UseTimeManagementProps {
+  progress: SharedValue<number>;
+  max: SharedValue<number>;
+  isSeeking: SharedValue<boolean>;
+  isVlc: boolean;
+}
+
+export const useTimeManagement = ({
+  progress,
+  max,
+  isSeeking,
+  isVlc,
+}: UseTimeManagementProps) => {
+  const [currentTime, setCurrentTime] = useState(0);
+  const [remainingTime, setRemainingTime] = useState(Number.POSITIVE_INFINITY);
+
+  const updateTimes = useCallback(
+    (currentProgress: number, maxValue: number) => {
+      const current = isVlc ? currentProgress : ticksToSeconds(currentProgress);
+      const remaining = isVlc
+        ? maxValue - currentProgress
+        : ticksToSeconds(maxValue - currentProgress);
+
+      setCurrentTime(current);
+      setRemainingTime(remaining);
+    },
+    [isVlc],
+  );
+
+  useAnimatedReaction(
+    () => ({
+      progress: progress.value,
+      max: max.value,
+      isSeeking: isSeeking.value,
+    }),
+    (result) => {
+      if (!result.isSeeking) {
+        runOnJS(updateTimes)(result.progress, result.max);
+      }
+    },
+    [updateTimes],
+  );
+
+  const getEndTime = () => {
+    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 {
+    currentTime,
+    remainingTime,
+    updateTimes,
+    getEndTime,
+  };
+};
--- a/components/video-player/controls/hooks/useVideoScaling.ts
+++ b/components/video-player/controls/hooks/useVideoScaling.ts
@@ -0,0 +1,43 @@
+import { type Dispatch, type SetStateAction, useCallback } from "react";
+import type { ScaleFactor } from "../ScaleFactorSelector";
+import type { AspectRatio } from "../VideoScalingModeSelector";
+
+interface UseVideoScalingProps {
+  setAspectRatio?: Dispatch<SetStateAction<AspectRatio>>;
+  setScaleFactor?: Dispatch<SetStateAction<ScaleFactor>>;
+  setVideoAspectRatio?: (aspectRatio: string | null) => Promise<void>;
+  setVideoScaleFactor?: (scaleFactor: number) => Promise<void>;
+}
+
+export const useVideoScaling = ({
+  setAspectRatio,
+  setScaleFactor,
+  setVideoAspectRatio,
+  setVideoScaleFactor,
+}: UseVideoScalingProps) => {
+  const handleAspectRatioChange = useCallback(
+    async (newRatio: AspectRatio) => {
+      if (!setAspectRatio || !setVideoAspectRatio) return;
+
+      setAspectRatio(newRatio);
+      const aspectRatioString = newRatio === "default" ? null : newRatio;
+      await setVideoAspectRatio(aspectRatioString);
+    },
+    [setAspectRatio, setVideoAspectRatio],
+  );
+
+  const handleScaleFactorChange = useCallback(
+    async (newScale: ScaleFactor) => {
+      if (!setScaleFactor || !setVideoScaleFactor) return;
+
+      setScaleFactor(newScale);
+      await setVideoScaleFactor(newScale);
+    },
+    [setScaleFactor, setVideoScaleFactor],
+  );
+
+  return {
+    handleAspectRatioChange,
+    handleScaleFactorChange,
+  };
+};
--- a/components/video-player/controls/utils/progressUtils.ts
+++ b/components/video-player/controls/utils/progressUtils.ts
@@ -0,0 +1,14 @@
+import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
+import { ticksToMs } from "@/utils/time";
+
+export const initializeProgress = (item: BaseItemDto, isVlc: boolean) => {
+  const initialProgress = isVlc
+    ? ticksToMs(item?.UserData?.PlaybackPositionTicks)
+    : item?.UserData?.PlaybackPositionTicks || 0;
+
+  const maxProgress = isVlc
+    ? ticksToMs(item.RunTimeTicks || 0)
+    : item.RunTimeTicks || 0;
+
+  return { initialProgress, maxProgress };
+};
--- a/components/video-player/controls/utils/trickplayUtils.ts
+++ b/components/video-player/controls/utils/trickplayUtils.ts
@@ -0,0 +1,23 @@
+import { TRICKPLAY_TILE_SCALE, TRICKPLAY_TILE_WIDTH } from "../constants";
+
+export const calculateTrickplayDimensions = (aspectRatio: number) => {
+  const tileWidth = TRICKPLAY_TILE_WIDTH;
+  const tileHeight = TRICKPLAY_TILE_WIDTH / aspectRatio;
+
+  return {
+    tileWidth,
+    tileHeight,
+    scaledWidth: tileWidth * TRICKPLAY_TILE_SCALE,
+    scaledHeight: tileHeight * TRICKPLAY_TILE_SCALE,
+  };
+};
+
+export const formatTimeForBubble = (time: {
+  hours: number;
+  minutes: number;
+  seconds: number;
+}) => {
+  return `${time.hours > 0 ? `${time.hours}:` : ""}${
+    time.minutes < 10 ? `0${time.minutes}` : time.minutes
+  }:${time.seconds < 10 ? `0${time.seconds}` : time.seconds}`;
+};
--- a/eas.json
+++ b/eas.json
@@ -46,14 +46,14 @@
    },
    "production": {
      "environment": "production",
-      "channel": "0.30.2",
+      "channel": "0.32.0",
      "android": {
        "image": "latest"
      }
    },
    "production-apk": {
      "environment": "production",
-      "channel": "0.30.2",
+      "channel": "0.32.0",
      "android": {
        "buildType": "apk",
        "image": "latest"
@@ -61,7 +61,7 @@
    },
    "production-apk-tv": {
      "environment": "production",
-      "channel": "0.30.2",
+      "channel": "0.32.0",
      "android": {
        "buildType": "apk",
        "image": "latest"
--- 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
@@ -84,7 +84,7 @@
    "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",
+    "react-native-safe-area-context": "5.6.1",
    "react-native-screens": "~4.11.1",
    "react-native-svg": "15.11.2",
    "react-native-udp": "^4.1.7",
@@ -101,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",
@@ -120,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.30.2" },
+            clientInfo: { name: "Streamyfin", version: "0.32.0" },
            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.30.2"`,
+      }, DeviceId="${deviceId}", Version="0.32.0"`,
    };
  }, [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]}`;
 };
Author	SHA1	Message	Date
renovate[bot]	fe2ee90a1c	fix(deps): update dependency react-native-safe-area-context to v5.6.1	2025-08-19 22:30:55 +00: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
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