chore(deps): update dependency typescript to ~5.9.0

Expands security scanning to include GitHub Actions workflows alongside existing JavaScript/TypeScript analysis for more comprehensive code security coverage

.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 }}

.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

.github/workflows/linting.yml

@@ -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

app.json

@@ -2,7 +2,7 @@
   "expo": {
     "name": "Streamyfin",
     "slug": "streamyfin",
-    "version": "0.30.2",
+    "version": "0.31.0",
     "orientation": "default",
     "icon": "./assets/images/icon.png",
     "scheme": "streamyfin",
@@ -37,7 +37,7 @@
     },
     "android": {
       "jsEngine": "hermes",
-      "versionCode": 58,
+      "versionCode": 59,
       "adaptiveIcon": {
         "foregroundImage": "./assets/images/icon-android-plain.png",
         "monochromeImage": "./assets/images/icon-android-themed.png",

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>
   );

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

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
         />
       )}

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": {

bun.lock

@@ -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",
@@ -98,7 +98,7 @@
         "lint-staged": "^16.1.5",
         "postinstall-postinstall": "^2.1.0",
         "react-test-renderer": "19.1.1",
-        "typescript": "~5.8.3",
+        "typescript": "~5.9.0",
       },
     },
   },
@@ -1890,7 +1890,7 @@
 
     "type-is": ["type-is@1.6.18", "", { "dependencies": { "media-typer": "0.3.0", "mime-types": "~2.1.24" } }, "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g=="],
 
-    "typescript": ["typescript@5.8.3", "", { "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" } }, "sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ=="],
+    "typescript": ["typescript@5.9.2", "", { "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" } }, "sha512-CWBzXQrc/qOkhidw1OzBTQuYRbfyxDXJMVJ1XNwUHGROVmuaeiEm3OslpZ1RV96d7SKKjZKrSJu3+t/xlw3R9A=="],
 
     "ua-parser-js": ["ua-parser-js@0.7.40", "", { "bin": { "ua-parser-js": "script/cli.js" } }, "sha512-us1E3K+3jJppDBa3Tl0L3MOJiGhe1C6P0+nIvQAFYbxlMAx0h81eOwLmU57xgqToduDDPx3y5QsdjPfDu+FgOQ=="],
 

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}

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>
   );
 };

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",

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",

components/video-player/controls/Controls.tsx

@@ -24,11 +24,13 @@ import {
   View,
 } from "react-native";
 import { Slider } from "react-native-awesome-slider";
-import {
+import Animated, {
   runOnJS,
   type SharedValue,
   useAnimatedReaction,
+  useAnimatedStyle,
   useSharedValue,
+  withTiming,
 } from "react-native-reanimated";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { Text } from "@/components/common/Text";
@@ -57,8 +59,13 @@ import { VideoProvider } from "./contexts/VideoContext";
 import DropdownView from "./dropdown/DropdownView";
 import { EpisodeList } from "./EpisodeList";
 import NextEpisodeCountDownButton from "./NextEpisodeCountDownButton";
+import { type ScaleFactor, ScaleFactorSelector } from "./ScaleFactorSelector";
 import SkipButton from "./SkipButton";
 import { useControlsTimeout } from "./useControlsTimeout";
+import {
+  type AspectRatio,
+  AspectRatioSelector,
+} from "./VideoScalingModeSelector";
 import { VideoTouchOverlay } from "./VideoTouchOverlay";
 
 interface Props {
@@ -70,8 +77,7 @@ interface Props {
   progress: SharedValue<number>;
   isBuffering: boolean;
   showControls: boolean;
-  ignoreSafeAreas?: boolean;
-  setIgnoreSafeAreas: Dispatch<SetStateAction<boolean>>;
+
   enableTrickplay?: boolean;
   togglePlay: () => void;
   setShowControls: (shown: boolean) => void;
@@ -87,6 +93,12 @@ interface Props {
   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>;
+  aspectRatio?: AspectRatio;
+  scaleFactor?: ScaleFactor;
+  setAspectRatio?: Dispatch<SetStateAction<AspectRatio>>;
+  setScaleFactor?: Dispatch<SetStateAction<ScaleFactor>>;
   isVlc?: boolean;
 }
 
@@ -106,8 +118,6 @@ export const Controls: FC<Props> = ({
   cacheProgress,
   showControls,
   setShowControls,
-  ignoreSafeAreas,
-  setIgnoreSafeAreas,
   mediaSource,
   isVideoLoaded,
   getAudioTracks,
@@ -115,6 +125,12 @@ export const Controls: FC<Props> = ({
   setSubtitleURL,
   setSubtitleTrack,
   setAudioTrack,
+  setVideoAspectRatio,
+  setVideoScaleFactor,
+  aspectRatio = "default",
+  scaleFactor = 1.0,
+  setAspectRatio,
+  setScaleFactor,
   offline = false,
   isVlc = false,
 }) => {
@@ -147,11 +163,45 @@ export const Controls: FC<Props> = ({
   const min = useSharedValue(0);
   const max = useSharedValue(item.RunTimeTicks || 0);
 
+  // Animated opacity for smooth transitions
+  const controlsOpacity = useSharedValue(showControls ? 1 : 0);
+
+  // Animated scale for slider
+  const sliderScale = useSharedValue(1);
+
   const wasPlayingRef = useRef(false);
   const lastProgressRef = useRef<number>(0);
 
   const lightHapticFeedback = useHaptic("light");
 
+  // Animate controls opacity when showControls changes
+  useEffect(() => {
+    controlsOpacity.value = withTiming(showControls ? 1 : 0, {
+      duration: 300,
+    });
+  }, [showControls, controlsOpacity]);
+
+  // Animated styles for controls
+  const animatedControlsStyle = useAnimatedStyle(() => {
+    return {
+      opacity: controlsOpacity.value,
+    };
+  });
+
+  // Animated style for black overlay (75% opacity when visible)
+  const animatedOverlayStyle = useAnimatedStyle(() => {
+    return {
+      opacity: controlsOpacity.value * 0.75,
+    };
+  });
+
+  // Animated style for slider scale
+  const animatedSliderStyle = useAnimatedStyle(() => {
+    return {
+      transform: [{ scaleY: sliderScale.value }],
+    };
+  });
+
   useEffect(() => {
     prefetchAllTrickplayImages();
   }, []);
@@ -498,11 +548,35 @@ export const Controls: FC<Props> = ({
     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();
@@ -605,10 +679,26 @@ export const Controls: FC<Props> = ({
     }
   }, [settings, isPlaying, isVlc, play, seek]);
 
-  const toggleIgnoreSafeAreas = useCallback(() => {
-    setIgnoreSafeAreas((prev) => !prev);
-    lightHapticFeedback();
-  }, []);
+  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],
+  );
 
   const switchOnEpisodeMode = useCallback(() => {
     setEpisodeView(true);
@@ -701,10 +791,10 @@ export const Controls: FC<Props> = ({
           <VideoTouchOverlay
             screenWidth={screenWidth}
             screenHeight={screenHeight}
-            showControls={showControls}
             onToggleControls={toggleControls}
+            animatedStyle={animatedOverlayStyle}
           />
-          <View
+          <Animated.View
             style={[
               {
                 position: "absolute",
@@ -713,8 +803,8 @@ export const Controls: FC<Props> = ({
                 width: settings?.safeAreaInControlsEnabled
                   ? screenWidth - insets.left - insets.right
                   : screenWidth,
-                opacity: showControls ? 1 : 0,
               },
+              animatedControlsStyle,
             ]}
             pointerEvents={showControls ? "auto" : "none"}
             className={"flex flex-row w-full pt-2"}
@@ -775,17 +865,17 @@ export const Controls: FC<Props> = ({
                   <Ionicons name='play-skip-forward' size={24} color='white' />
                 </TouchableOpacity>
               )}
-              {/* {mediaSource?.TranscodingUrl && ( */}
-              <TouchableOpacity
-                onPress={toggleIgnoreSafeAreas}
-                className='aspect-square flex flex-col rounded-xl items-center justify-center p-2'
-              >
-                <Ionicons
-                  name={ignoreSafeAreas ? "contract-outline" : "expand"}
-                  size={24}
-                  color='white'
-                />
-              </TouchableOpacity>
+              {/* Video Controls */}
+              <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'
@@ -793,33 +883,39 @@ export const Controls: FC<Props> = ({
                 <Ionicons name='close' size={24} color='white' />
               </TouchableOpacity>
             </View>
-          </View>
-          <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: "28%", // Add some padding to the left and right
-            }}
+          </Animated.View>
+
+          <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={{
-                position: "absolute",
+                width: 50,
+                height: 50,
                 alignItems: "center",
-                transform: [{ rotate: "270deg" }], // Rotate the slider to make it vertical
-                left: 0,
-                bottom: 30,
-                opacity: showControls ? 1 : 0,
+                justifyContent: "center",
+                transform: [{ rotate: "270deg" }],
               }}
             >
               <BrightnessSlider />
             </View>
+
+            {/* Skip Backward */}
             {!Platform.isTV && (
               <TouchableOpacity onPress={handleSkipBackward}>
                 <View
@@ -827,7 +923,6 @@ export const Controls: FC<Props> = ({
                     position: "relative",
                     justifyContent: "center",
                     alignItems: "center",
-                    opacity: showControls ? 1 : 0,
                   }}
                 >
                   <Ionicons
@@ -853,9 +948,8 @@ export const Controls: FC<Props> = ({
               </TouchableOpacity>
             )}
 
-            <View
-              style={Platform.isTV ? { flex: 1, alignItems: "center" } : {}}
-            >
+            {/* Play/Pause Button */}
+            <View style={{ alignItems: "center" }}>
               <TouchableOpacity
                 onPress={() => {
                   togglePlay();
@@ -866,9 +960,6 @@ export const Controls: FC<Props> = ({
                     name={isPlaying ? "pause" : "play"}
                     size={50}
                     color='white'
-                    style={{
-                      opacity: showControls ? 1 : 0,
-                    }}
                   />
                 ) : (
                   <Loader size={"large"} />
@@ -876,6 +967,7 @@ export const Controls: FC<Props> = ({
               </TouchableOpacity>
             </View>
 
+            {/* Skip Forward */}
             {!Platform.isTV && (
               <TouchableOpacity onPress={handleSkipForward}>
                 <View
@@ -883,7 +975,6 @@ export const Controls: FC<Props> = ({
                     position: "relative",
                     justifyContent: "center",
                     alignItems: "center",
-                    opacity: showControls ? 1 : 0,
                   }}
                 >
                   <Ionicons name='refresh-outline' size={50} color='white' />
@@ -901,28 +992,33 @@ export const Controls: FC<Props> = ({
                 </View>
               </TouchableOpacity>
             )}
+
+            {/* Volume/Audio Control */}
             <View
               style={{
-                position: "absolute",
+                width: 50,
+                height: 50,
                 alignItems: "center",
-                transform: [{ rotate: "270deg" }], // Rotate the slider to make it vertical
-                bottom: 30,
-                right: 0,
+                justifyContent: "center",
+                transform: [{ rotate: "270deg" }],
                 opacity: showAudioSlider || showControls ? 1 : 0,
               }}
             >
               <AudioSlider setVisibility={setShowAudioSlider} />
             </View>
-          </View>
+          </Animated.View>
 
-          <View
+          <Animated.View
             style={[
               {
                 position: "absolute",
                 right: settings?.safeAreaInControlsEnabled ? insets.right : 0,
                 left: settings?.safeAreaInControlsEnabled ? insets.left : 0,
-                bottom: settings?.safeAreaInControlsEnabled ? insets.bottom : 0,
+                bottom: settings?.safeAreaInControlsEnabled
+                  ? Math.max(insets.bottom - 17, 0)
+                  : 0,
               },
+              animatedControlsStyle,
             ]}
             className={"flex flex-col px-2"}
             onTouchStart={handleControlsInteraction}
@@ -938,7 +1034,6 @@ export const Controls: FC<Props> = ({
                 style={{
                   flexDirection: "column",
                   alignSelf: "flex-end", // Shrink height based on content
-                  opacity: showControls ? 1 : 0,
                 }}
                 pointerEvents={showControls ? "box-none" : "none"}
               >
@@ -987,49 +1082,77 @@ export const Controls: FC<Props> = ({
             </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"}>
-                <Slider
-                  theme={{
-                    maximumTrackTintColor: "rgba(255,255,255,0.2)",
-                    minimumTrackTintColor: "#fff",
-                    cacheTrackTintColor: "rgba(255,255,255,0.3)",
-                    bubbleBackgroundColor: "#fff",
-                    bubbleTextColor: "#666",
-                    heartbeatColor: "#999",
+                <View
+                  style={{
+                    height: 10,
+                    justifyContent: "center",
+                    alignItems: "stretch",
                   }}
-                  renderThumb={() => null}
-                  cache={cacheProgress}
-                  onSlidingStart={handleSliderStart}
-                  onSlidingComplete={handleSliderComplete}
-                  onValueChange={handleSliderChange}
-                  containerStyle={{
-                    borderRadius: 100,
-                  }}
-                  renderBubble={() =>
-                    (isSliding || showRemoteBubble) && memoizedRenderBubble()
-                  }
-                  sliderHeight={10}
-                  thumbWidth={0}
-                  progress={effectiveProgress}
-                  minimumValue={min}
-                  maximumValue={max}
-                />
+                  onTouchStart={handleTouchStart}
+                  onTouchEnd={handleTouchEnd}
+                >
+                  <Animated.View style={animatedSliderStyle}>
+                    <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) &&
+                        memoizedRenderBubble()
+                      }
+                      sliderHeight={10}
+                      thumbWidth={0}
+                      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>
-                  <Text className='text-[12px] text-neutral-400'>
-                    -{formatTimeString(remainingTime, 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 {(() => {
+                        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,
+                        });
+                      })()}
+                    </Text>
+                  </View>
                 </View>
               </View>
             </View>
-          </View>
+          </Animated.View>
         </>
       )}
       {settings.maxAutoPlayEpisodeCount.value !== -1 && (

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>
+  );
+};

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>
+  );
+};

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,
+      ]}
     />
   );
 };

eas.json

@@ -46,14 +46,14 @@
     },
     "production": {
       "environment": "production",
-      "channel": "0.30.2",
+      "channel": "0.31.0",
       "android": {
         "image": "latest"
       }
     },
     "production-apk": {
       "environment": "production",
-      "channel": "0.30.2",
+      "channel": "0.31.0",
       "android": {
         "buildType": "apk",
         "image": "latest"
@@ -61,7 +61,7 @@
     },
     "production-apk-tv": {
       "environment": "production",
-      "channel": "0.30.2",
+      "channel": "0.31.0",
       "android": {
         "buildType": "apk",
         "image": "latest"

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>;
 }

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 {

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)
+      }
     }
   }
 }

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) {

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()
             }

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?()

package.json

@@ -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",
@@ -113,14 +113,15 @@
     "lint-staged": "^16.1.5",
     "postinstall-postinstall": "^2.1.0",
     "react-test-renderer": "19.1.1",
-    "typescript": "~5.8.3"
+    "typescript": "~5.9.0"
   },
   "expo": {
     "install": {
       "exclude": [
         "react-native",
         "@shopify/flash-list",
-        "react-native-reanimated"
+        "react-native-reanimated",
+        "react-native-pager-view"
       ]
     },
     "doctor": {

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 }),
     };
   }
 

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.31.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.31.0"`,
     };
   }, [deviceId]);
 

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]}`;
 };