chore: refactor controls

This reverts commit 8389404975.

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

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>

app.json

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

app/(auth)/player/direct-player.tsx

@@ -15,7 +15,7 @@ import { useAtomValue } from "jotai";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Alert, Platform, View } from "react-native";
-import { useSharedValue } from "react-native-reanimated";
+import { useAnimatedReaction, useSharedValue } from "react-native-reanimated";
 
 import { BITRATES } from "@/components/BitrateSelector";
 import { Text } from "@/components/common/Text";
@@ -98,7 +98,7 @@ export default function page() {
     /** Playback position in ticks. */
     playbackPosition?: string;
   }>();
-  const [settings] = useSettings();
+  const [_settings] = useSettings();
 
   const offline = offlineStr === "true";
   const playbackManager = usePlaybackManager();
@@ -280,11 +280,15 @@ export default function page() {
   ]);
 
   const stop = useCallback(() => {
+    // Update URL with final playback position before stopping
+    router.setParams({
+      playbackPosition: msToTicks(progress.get()).toString(),
+    });
     reportPlaybackStopped();
     setIsPlaybackStopped(true);
     videoRef.current?.stop();
     revalidateProgressCache();
-  }, [videoRef, reportPlaybackStopped]);
+  }, [videoRef, reportPlaybackStopped, progress]);
 
   useEffect(() => {
     const beforeRemoveListener = navigation.addListener("beforeRemove", stop);
@@ -293,7 +297,7 @@ export default function page() {
     };
   }, [navigation, stop]);
 
-  const currentPlayStateInfo = () => {
+  const currentPlayStateInfo = useCallback(() => {
     if (!stream) return;
     return {
       itemId: item?.Id!,
@@ -309,7 +313,32 @@ export default function page() {
       repeatMode: RepeatMode.RepeatNone,
       playbackOrder: PlaybackOrder.Default,
     };
-  };
+  }, [
+    stream,
+    item?.Id,
+    audioIndex,
+    subtitleIndex,
+    mediaSourceId,
+    progress,
+    isPlaying,
+    isMuted,
+  ]);
+
+  const lastUrlUpdateTime = useSharedValue(0);
+  const wasJustSeeking = useSharedValue(false);
+  const URL_UPDATE_INTERVAL = 30000; // Update URL every 30 seconds instead of every second
+
+  // Track when seeking ends to update URL immediately
+  useAnimatedReaction(
+    () => isSeeking.get(),
+    (currentSeeking, previousSeeking) => {
+      if (previousSeeking && !currentSeeking) {
+        // Seeking just ended
+        wasJustSeeking.value = true;
+      }
+    },
+    [],
+  );
 
   const onProgress = useCallback(
     async (data: ProgressUpdatePayload) => {
@@ -322,10 +351,20 @@ export default function page() {
 
       progress.set(currentTime);
 
-      // Update the playback position in the URL.
-      router.setParams({
-        playbackPosition: msToTicks(currentTime).toString(),
-      });
+      // Update URL immediately after seeking, or every 30 seconds during normal playback
+      const now = Date.now();
+      const shouldUpdateUrl = wasJustSeeking.get();
+      wasJustSeeking.value = false;
+
+      if (
+        shouldUpdateUrl ||
+        now - lastUrlUpdateTime.get() > URL_UPDATE_INTERVAL
+      ) {
+        router.setParams({
+          playbackPosition: msToTicks(currentTime).toString(),
+        });
+        lastUrlUpdateTime.value = now;
+      }
 
       if (!item?.Id) return;
 
@@ -398,6 +437,7 @@ export default function page() {
       console.error("Error toggling mute:", error);
     }
   }, [previousVolume]);
+
   const volumeDownCb = useCallback(async () => {
     if (Platform.isTV) return;
 
@@ -512,7 +552,7 @@ export default function page() {
   /** Whether the stream we're playing is not transcoding*/
   const notTranscoding = !stream?.mediaSource.TranscodingUrl;
   /** The initial options to pass to the VLC Player */
-  const initOptions = [`--sub-text-scale=${settings.subtitleSize}`];
+  const initOptions = [``];
   if (
     chosenSubtitleTrack &&
     (notTranscoding || chosenSubtitleTrack.IsTextSubtitleStream)
@@ -537,6 +577,60 @@ export default function page() {
     return () => setIsMounted(false);
   }, []);
 
+  // Memoize video ref functions to prevent unnecessary re-renders
+  const startPictureInPicture = useCallback(async () => {
+    return videoRef.current?.startPictureInPicture?.();
+  }, []);
+  const play = useCallback(() => {
+    videoRef.current?.play?.();
+  }, []);
+
+  const pause = useCallback(() => {
+    videoRef.current?.pause?.();
+  }, []);
+
+  const seek = useCallback((position: number) => {
+    videoRef.current?.seekTo?.(position);
+  }, []);
+  const getAudioTracks = useCallback(async () => {
+    return videoRef.current?.getAudioTracks?.() || null;
+  }, []);
+
+  const getSubtitleTracks = useCallback(async () => {
+    return videoRef.current?.getSubtitleTracks?.() || null;
+  }, []);
+
+  const setSubtitleTrack = useCallback((index: number) => {
+    videoRef.current?.setSubtitleTrack?.(index);
+  }, []);
+
+  const setSubtitleURL = useCallback((url: string, _customName?: string) => {
+    // Note: VlcPlayer type only expects url parameter
+    videoRef.current?.setSubtitleURL?.(url);
+  }, []);
+
+  const setAudioTrack = useCallback((index: number) => {
+    videoRef.current?.setAudioTrack?.(index);
+  }, []);
+
+  const setVideoAspectRatio = useCallback(
+    async (aspectRatio: string | null) => {
+      return (
+        videoRef.current?.setVideoAspectRatio?.(aspectRatio) ||
+        Promise.resolve()
+      );
+    },
+    [],
+  );
+
+  const setVideoScaleFactor = useCallback(async (scaleFactor: number) => {
+    return (
+      videoRef.current?.setVideoScaleFactor?.(scaleFactor) || Promise.resolve()
+    );
+  }, []);
+
+  console.log("Debug: component render"); // Uncomment to debug re-renders
+
   // Show error UI first, before checking loading/missing‐data
   if (itemStatus.isError || streamStatus.isError) {
     return (
@@ -567,7 +661,7 @@ export default function page() {
     <View
       style={{
         flex: 1,
-        backgroundColor: "blue",
+        backgroundColor: "black",
         height: "100%",
         width: "100%",
       }}
@@ -624,19 +718,19 @@ export default function page() {
           showControls={showControls}
           setShowControls={setShowControls}
           isVideoLoaded={isVideoLoaded}
-          startPictureInPicture={videoRef.current?.startPictureInPicture}
-          play={videoRef.current?.play || (() => {})}
-          pause={videoRef.current?.pause || (() => {})}
-          seek={videoRef.current?.seekTo || (() => {})}
+          startPictureInPicture={startPictureInPicture}
+          play={play}
+          pause={pause}
+          seek={seek}
           enableTrickplay={true}
-          getAudioTracks={videoRef.current?.getAudioTracks}
-          getSubtitleTracks={videoRef.current?.getSubtitleTracks}
+          getAudioTracks={getAudioTracks}
+          getSubtitleTracks={getSubtitleTracks}
           offline={offline}
-          setSubtitleTrack={videoRef.current?.setSubtitleTrack}
-          setSubtitleURL={videoRef.current?.setSubtitleURL}
-          setAudioTrack={videoRef.current?.setAudioTrack}
-          setVideoAspectRatio={videoRef.current?.setVideoAspectRatio}
-          setVideoScaleFactor={videoRef.current?.setVideoScaleFactor}
+          setSubtitleTrack={setSubtitleTrack}
+          setSubtitleURL={setSubtitleURL}
+          setAudioTrack={setAudioTrack}
+          setVideoAspectRatio={setVideoAspectRatio}
+          setVideoScaleFactor={setVideoScaleFactor}
           aspectRatio={aspectRatio}
           scaleFactor={scaleFactor}
           setAspectRatio={setAspectRatio}

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

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

components/video-player/controls/BottomControls.tsx

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

components/video-player/controls/CenterControls.tsx

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

components/video-player/controls/HeaderControls.tsx

@@ -0,0 +1,196 @@
+import { Ionicons, MaterialIcons } from "@expo/vector-icons";
+import type {
+  BaseItemDto,
+  MediaSourceInfo,
+} from "@jellyfin/sdk/lib/generated-client";
+import { useRouter } from "expo-router";
+import { type Dispatch, type FC, type SetStateAction } from "react";
+import {
+  Platform,
+  TouchableOpacity,
+  useWindowDimensions,
+  View,
+} from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { useHaptic } from "@/hooks/useHaptic";
+import { useSettings, VideoPlayer } from "@/utils/atoms/settings";
+import { ICON_SIZES } from "./constants";
+import { VideoProvider } from "./contexts/VideoContext";
+import DropdownView from "./dropdown/DropdownView";
+import { type ScaleFactor, ScaleFactorSelector } from "./ScaleFactorSelector";
+import {
+  type AspectRatio,
+  AspectRatioSelector,
+} from "./VideoScalingModeSelector";
+
+interface HeaderControlsProps {
+  item: BaseItemDto;
+  showControls: boolean;
+  offline: boolean;
+  mediaSource?: MediaSourceInfo | null;
+  startPictureInPicture?: () => Promise<void>;
+  switchOnEpisodeMode: () => void;
+  goToPreviousItem: () => void;
+  goToNextItem: (options: { isAutoPlay?: boolean }) => void;
+  previousItem?: BaseItemDto | null;
+  nextItem?: BaseItemDto | null;
+  getAudioTracks?: (() => Promise<any[] | null>) | (() => any[]);
+  getSubtitleTracks?: (() => Promise<any[] | null>) | (() => any[]);
+  setAudioTrack?: (index: number) => void;
+  setSubtitleTrack?: (index: number) => void;
+  setSubtitleURL?: (url: string, customName: string) => void;
+  aspectRatio?: AspectRatio;
+  scaleFactor?: ScaleFactor;
+  setAspectRatio?: Dispatch<SetStateAction<AspectRatio>>;
+  setScaleFactor?: Dispatch<SetStateAction<ScaleFactor>>;
+  setVideoAspectRatio?: (aspectRatio: string | null) => Promise<void>;
+  setVideoScaleFactor?: (scaleFactor: number) => Promise<void>;
+}
+
+export const HeaderControls: FC<HeaderControlsProps> = ({
+  item,
+  showControls,
+  offline,
+  mediaSource,
+  startPictureInPicture,
+  switchOnEpisodeMode,
+  goToPreviousItem,
+  goToNextItem,
+  previousItem,
+  nextItem,
+  getAudioTracks,
+  getSubtitleTracks,
+  setAudioTrack,
+  setSubtitleTrack,
+  setSubtitleURL,
+  aspectRatio = "default",
+  scaleFactor = 1.0,
+  setAspectRatio,
+  setScaleFactor,
+  setVideoAspectRatio,
+  setVideoScaleFactor,
+}) => {
+  const [settings] = useSettings();
+  const router = useRouter();
+  const insets = useSafeAreaInsets();
+  const { width: screenWidth } = useWindowDimensions();
+  const lightHapticFeedback = useHaptic("light");
+
+  const handleAspectRatioChange = async (newRatio: AspectRatio) => {
+    if (!setAspectRatio || !setVideoAspectRatio) return;
+
+    setAspectRatio(newRatio);
+    const aspectRatioString = newRatio === "default" ? null : newRatio;
+    await setVideoAspectRatio(aspectRatioString);
+  };
+
+  const handleScaleFactorChange = async (newScale: ScaleFactor) => {
+    if (!setScaleFactor || !setVideoScaleFactor) return;
+
+    setScaleFactor(newScale);
+    await setVideoScaleFactor(newScale);
+  };
+
+  const onClose = async () => {
+    lightHapticFeedback();
+    router.back();
+  };
+
+  return (
+    <View
+      style={[
+        {
+          position: "absolute",
+          top: settings?.safeAreaInControlsEnabled ? insets.top : 0,
+          right: settings?.safeAreaInControlsEnabled ? insets.right : 0,
+          width: settings?.safeAreaInControlsEnabled
+            ? screenWidth - insets.left - insets.right
+            : screenWidth,
+          opacity: showControls ? 1 : 0,
+        },
+      ]}
+      pointerEvents={showControls ? "auto" : "none"}
+      className={"flex flex-row w-full pt-2"}
+    >
+      <View className='mr-auto'>
+        {!Platform.isTV && (!offline || !mediaSource?.TranscodingUrl) && (
+          <VideoProvider
+            getAudioTracks={getAudioTracks}
+            getSubtitleTracks={getSubtitleTracks}
+            setAudioTrack={setAudioTrack}
+            setSubtitleTrack={setSubtitleTrack}
+            setSubtitleURL={setSubtitleURL}
+          >
+            <DropdownView />
+          </VideoProvider>
+        )}
+      </View>
+
+      <View className='flex flex-row items-center space-x-2'>
+        {!Platform.isTV &&
+          (settings.defaultPlayer === VideoPlayer.VLC_4 ||
+            Platform.OS === "android") && (
+            <TouchableOpacity
+              onPress={startPictureInPicture}
+              className='aspect-square flex flex-col rounded-xl items-center justify-center p-2'
+            >
+              <MaterialIcons
+                name='picture-in-picture'
+                size={ICON_SIZES.HEADER}
+                color='white'
+                style={{ opacity: showControls ? 1 : 0 }}
+              />
+            </TouchableOpacity>
+          )}
+        {item?.Type === "Episode" && (
+          <TouchableOpacity
+            onPress={switchOnEpisodeMode}
+            className='aspect-square flex flex-col rounded-xl items-center justify-center p-2'
+          >
+            <Ionicons name='list' size={ICON_SIZES.HEADER} color='white' />
+          </TouchableOpacity>
+        )}
+        {previousItem && (
+          <TouchableOpacity
+            onPress={goToPreviousItem}
+            className='aspect-square flex flex-col rounded-xl items-center justify-center p-2'
+          >
+            <Ionicons
+              name='play-skip-back'
+              size={ICON_SIZES.HEADER}
+              color='white'
+            />
+          </TouchableOpacity>
+        )}
+        {nextItem && (
+          <TouchableOpacity
+            onPress={() => goToNextItem({ isAutoPlay: false })}
+            className='aspect-square flex flex-col rounded-xl items-center justify-center p-2'
+          >
+            <Ionicons
+              name='play-skip-forward'
+              size={ICON_SIZES.HEADER}
+              color='white'
+            />
+          </TouchableOpacity>
+        )}
+        <AspectRatioSelector
+          currentRatio={aspectRatio}
+          onRatioChange={handleAspectRatioChange}
+          disabled={!setVideoAspectRatio}
+        />
+        <ScaleFactorSelector
+          currentScale={scaleFactor}
+          onScaleChange={handleScaleFactorChange}
+          disabled={!setVideoScaleFactor}
+        />
+        <TouchableOpacity
+          onPress={onClose}
+          className='aspect-square flex flex-col rounded-xl items-center justify-center p-2'
+        >
+          <Ionicons name='close' size={ICON_SIZES.HEADER} color='white' />
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+};

components/video-player/controls/TimeDisplay.tsx

@@ -0,0 +1,43 @@
+import type { FC } from "react";
+import { View } from "react-native";
+import { Text } from "@/components/common/Text";
+import { formatTimeString } from "@/utils/time";
+
+interface TimeDisplayProps {
+  currentTime: number;
+  remainingTime: number;
+  isVlc: boolean;
+}
+
+export const TimeDisplay: FC<TimeDisplayProps> = ({
+  currentTime,
+  remainingTime,
+  isVlc,
+}) => {
+  const getFinishTime = () => {
+    const now = new Date();
+    const remainingMs = isVlc ? remainingTime : remainingTime * 1000;
+    const finishTime = new Date(now.getTime() + remainingMs);
+    return finishTime.toLocaleTimeString([], {
+      hour: "2-digit",
+      minute: "2-digit",
+      hour12: false,
+    });
+  };
+
+  return (
+    <View className='flex flex-row items-center justify-between mt-2'>
+      <Text className='text-[12px] text-neutral-400'>
+        {formatTimeString(currentTime, isVlc ? "ms" : "s")}
+      </Text>
+      <View className='flex flex-col items-end'>
+        <Text className='text-[12px] text-neutral-400'>
+          -{formatTimeString(remainingTime, isVlc ? "ms" : "s")}
+        </Text>
+        <Text className='text-[10px] text-neutral-500 opacity-70'>
+          ends at {getFinishTime()}
+        </Text>
+      </View>
+    </View>
+  );
+};

components/video-player/controls/TrickplayBubble.tsx

@@ -0,0 +1,92 @@
+import { Image } from "expo-image";
+import type { FC } from "react";
+import { View } from "react-native";
+import { Text } from "@/components/common/Text";
+import { CONTROLS_CONSTANTS } from "./constants";
+
+interface TrickplayBubbleProps {
+  trickPlayUrl: {
+    x: number;
+    y: number;
+    url: string;
+  } | null;
+  trickplayInfo: {
+    aspectRatio?: number;
+    data: {
+      TileWidth?: number;
+      TileHeight?: number;
+    };
+  } | null;
+  time: {
+    hours: number;
+    minutes: number;
+    seconds: number;
+  };
+}
+
+export const TrickplayBubble: FC<TrickplayBubbleProps> = ({
+  trickPlayUrl,
+  trickplayInfo,
+  time,
+}) => {
+  if (!trickPlayUrl || !trickplayInfo) {
+    return null;
+  }
+
+  const { x, y, url } = trickPlayUrl;
+  const tileWidth = CONTROLS_CONSTANTS.TILE_WIDTH;
+  const tileHeight = tileWidth / trickplayInfo.aspectRatio!;
+
+  return (
+    <View
+      style={{
+        position: "absolute",
+        left: -62,
+        bottom: 0,
+        paddingTop: 30,
+        paddingBottom: 5,
+        width: tileWidth * 1.5,
+        justifyContent: "center",
+        alignItems: "center",
+      }}
+    >
+      <View
+        style={{
+          width: tileWidth,
+          height: tileHeight,
+          alignSelf: "center",
+          transform: [{ scale: 1.4 }],
+          borderRadius: 5,
+        }}
+        className='bg-neutral-800 overflow-hidden'
+      >
+        <Image
+          cachePolicy={"memory-disk"}
+          style={{
+            width: tileWidth * trickplayInfo?.data.TileWidth!,
+            height:
+              (tileWidth / trickplayInfo.aspectRatio!) *
+              trickplayInfo?.data.TileHeight!,
+            transform: [
+              { translateX: -x * tileWidth },
+              { translateY: -y * tileHeight },
+            ],
+            resizeMode: "cover",
+          }}
+          source={{ uri: url }}
+          contentFit='cover'
+        />
+      </View>
+      <Text
+        style={{
+          marginTop: 30,
+          fontSize: 16,
+        }}
+      >
+        {`${time.hours > 0 ? `${time.hours}:` : ""}${
+          time.minutes < 10 ? `0${time.minutes}` : time.minutes
+        }:${time.seconds < 10 ? `0${time.seconds}` : time.seconds}`}
+      </Text>
+    </View>
+  );
+};

components/video-player/controls/VideoTouchOverlay.tsx

@@ -1,43 +1,38 @@
 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 (
-    <AnimatedPressable
+    <Pressable
       onTouchStart={handleTouchStart}
       onTouchEnd={handleTouchEnd}
-      style={[
-        {
-          position: "absolute",
-          width: screenWidth,
-          height: screenHeight,
-          backgroundColor: "black",
-          left: 0,
-          right: 0,
-          top: 0,
-          bottom: 0,
-        },
-        animatedStyle,
-      ]}
+      style={{
+        position: "absolute",
+        width: screenWidth,
+        height: screenHeight,
+        backgroundColor: "black",
+        left: 0,
+        right: 0,
+        top: 0,
+        bottom: 0,
+        opacity: showControls ? 0.75 : 0,
+      }}
     />
   );
 };

components/video-player/controls/constants.ts

@@ -0,0 +1,17 @@
+export const CONTROLS_CONSTANTS = {
+  TIMEOUT: 4000,
+  SCRUB_INTERVAL_MS: 10 * 1000, // 10 seconds in ms
+  SCRUB_INTERVAL_TICKS: 10 * 10000000, // 10 seconds in ticks
+  TILE_WIDTH: 150,
+  PROGRESS_UNIT_MS: 1000, // 1 second in ms
+  PROGRESS_UNIT_TICKS: 10000000, // 1 second in ticks
+  LONG_PRESS_INITIAL_SEEK: 10,
+  LONG_PRESS_ACCELERATION: 1.1,
+  LONG_PRESS_INTERVAL: 300,
+  SLIDER_DEBOUNCE_MS: 3,
+} as const;
+
+export const ICON_SIZES = {
+  HEADER: 24,
+  CENTER: 50,
+} as const;

components/video-player/controls/hooks/index.ts

@@ -0,0 +1,4 @@
+export { useRemoteControl } from "./useRemoteControl";
+export { useVideoNavigation } from "./useVideoNavigation";
+export { useVideoSlider } from "./useVideoSlider";
+export { useVideoTime } from "./useVideoTime";

components/video-player/controls/hooks/useRemoteControl.ts

@@ -0,0 +1,170 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useTVEventHandler } from "react-native";
+import { type SharedValue, useSharedValue } from "react-native-reanimated";
+import { msToTicks, ticksToSeconds } from "@/utils/time";
+import { CONTROLS_CONSTANTS } from "../constants";
+
+interface UseRemoteControlProps {
+  progress: SharedValue<number>;
+  min: SharedValue<number>;
+  max: SharedValue<number>;
+  isVlc: boolean;
+  showControls: boolean;
+  isPlaying: boolean;
+  seek: (value: number) => void;
+  play: () => void;
+  togglePlay: () => void;
+  toggleControls: () => void;
+  calculateTrickplayUrl: (progressInTicks: number) => void;
+  handleSeekForward: (seconds: number) => void;
+  handleSeekBackward: (seconds: number) => void;
+}
+
+export function useRemoteControl({
+  progress,
+  min,
+  max,
+  isVlc,
+  showControls,
+  isPlaying,
+  seek,
+  play,
+  togglePlay,
+  toggleControls,
+  calculateTrickplayUrl,
+  handleSeekForward,
+  handleSeekBackward,
+}: UseRemoteControlProps) {
+  const remoteScrubProgress = useSharedValue<number | null>(null);
+  const isRemoteScrubbing = useSharedValue(false);
+  const [showRemoteBubble, setShowRemoteBubble] = useState(false);
+  const [longPressScrubMode, setLongPressScrubMode] = useState<
+    "FF" | "RW" | null
+  >(null);
+  const [isSliding, setIsSliding] = useState(false);
+  const [time, setTime] = useState({ hours: 0, minutes: 0, seconds: 0 });
+
+  const longPressTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(
+    null,
+  );
+  const SCRUB_INTERVAL = isVlc
+    ? CONTROLS_CONSTANTS.SCRUB_INTERVAL_MS
+    : CONTROLS_CONSTANTS.SCRUB_INTERVAL_TICKS;
+
+  const updateTime = useCallback(
+    (progressValue: number) => {
+      const progressInTicks = isVlc ? msToTicks(progressValue) : progressValue;
+      const progressInSeconds = Math.floor(ticksToSeconds(progressInTicks));
+      const hours = Math.floor(progressInSeconds / 3600);
+      const minutes = Math.floor((progressInSeconds % 3600) / 60);
+      const seconds = progressInSeconds % 60;
+      setTime({ hours, minutes, seconds });
+    },
+    [isVlc],
+  );
+
+  useTVEventHandler((evt) => {
+    if (!evt) return;
+
+    switch (evt.eventType) {
+      case "longLeft": {
+        setLongPressScrubMode((prev) => (!prev ? "RW" : null));
+        break;
+      }
+      case "longRight": {
+        setLongPressScrubMode((prev) => (!prev ? "FF" : null));
+        break;
+      }
+      case "left":
+      case "right": {
+        isRemoteScrubbing.value = true;
+        setShowRemoteBubble(true);
+
+        const direction = evt.eventType === "left" ? -1 : 1;
+        const base = remoteScrubProgress.value ?? progress.value;
+        const updated = Math.max(
+          min.value,
+          Math.min(max.value, base + direction * SCRUB_INTERVAL),
+        );
+        remoteScrubProgress.value = updated;
+        const progressInTicks = isVlc ? msToTicks(updated) : updated;
+        calculateTrickplayUrl(progressInTicks);
+        updateTime(updated);
+        break;
+      }
+      case "select": {
+        if (isRemoteScrubbing.value && remoteScrubProgress.value != null) {
+          progress.value = remoteScrubProgress.value;
+
+          const seekTarget = isVlc
+            ? Math.max(0, remoteScrubProgress.value)
+            : Math.max(0, ticksToSeconds(remoteScrubProgress.value));
+
+          seek(seekTarget);
+          if (isPlaying) play();
+
+          isRemoteScrubbing.value = false;
+          remoteScrubProgress.value = null;
+          setShowRemoteBubble(false);
+        } else {
+          togglePlay();
+        }
+        break;
+      }
+      case "down":
+      case "up":
+        // cancel scrubbing on other directions
+        isRemoteScrubbing.value = false;
+        remoteScrubProgress.value = null;
+        setShowRemoteBubble(false);
+        break;
+      default:
+        break;
+    }
+
+    if (!showControls) toggleControls();
+  });
+
+  useEffect(() => {
+    let isActive = true;
+    let seekTime = CONTROLS_CONSTANTS.LONG_PRESS_INITIAL_SEEK;
+
+    const scrubWithLongPress = () => {
+      if (!isActive || !longPressScrubMode) return;
+
+      setIsSliding(true);
+      const scrubFn =
+        longPressScrubMode === "FF" ? handleSeekForward : handleSeekBackward;
+      scrubFn(seekTime);
+      seekTime *= CONTROLS_CONSTANTS.LONG_PRESS_ACCELERATION;
+
+      longPressTimeoutRef.current = setTimeout(
+        scrubWithLongPress,
+        CONTROLS_CONSTANTS.LONG_PRESS_INTERVAL,
+      );
+    };
+
+    if (longPressScrubMode) {
+      isActive = true;
+      scrubWithLongPress();
+    }
+
+    return () => {
+      isActive = false;
+      setIsSliding(false);
+      if (longPressTimeoutRef.current) {
+        clearTimeout(longPressTimeoutRef.current);
+        longPressTimeoutRef.current = null;
+      }
+    };
+  }, [longPressScrubMode, handleSeekForward, handleSeekBackward]);
+
+  return {
+    remoteScrubProgress,
+    isRemoteScrubbing,
+    showRemoteBubble,
+    longPressScrubMode,
+    isSliding,
+    time,
+  };
+}

components/video-player/controls/hooks/useVideoNavigation.ts

@@ -0,0 +1,114 @@
+import { useCallback, useRef } from "react";
+import type { SharedValue } from "react-native-reanimated";
+import { useHaptic } from "@/hooks/useHaptic";
+import { useSettings } from "@/utils/atoms/settings";
+import { writeToLog } from "@/utils/log";
+import { secondsToMs, ticksToSeconds } from "@/utils/time";
+
+interface UseVideoNavigationProps {
+  progress: SharedValue<number>;
+  isPlaying: boolean;
+  isVlc: boolean;
+  seek: (value: number) => void;
+  play: () => void;
+}
+
+export function useVideoNavigation({
+  progress,
+  isPlaying,
+  isVlc,
+  seek,
+  play,
+}: UseVideoNavigationProps) {
+  const [settings] = useSettings();
+  const lightHapticFeedback = useHaptic("light");
+  const wasPlayingRef = useRef(false);
+
+  const handleSeekBackward = useCallback(
+    async (seconds: number) => {
+      wasPlayingRef.current = isPlaying;
+      try {
+        const curr = progress.value;
+        if (curr !== undefined) {
+          const newTime = isVlc
+            ? Math.max(0, curr - secondsToMs(seconds))
+            : Math.max(0, ticksToSeconds(curr) - seconds);
+          seek(newTime);
+        }
+      } catch (error) {
+        writeToLog("ERROR", "Error seeking video backwards", error);
+      }
+    },
+    [isPlaying, isVlc, seek, progress],
+  );
+
+  const handleSeekForward = useCallback(
+    async (seconds: number) => {
+      wasPlayingRef.current = isPlaying;
+      try {
+        const curr = progress.value;
+        if (curr !== undefined) {
+          const newTime = isVlc
+            ? curr + secondsToMs(seconds)
+            : ticksToSeconds(curr) + seconds;
+          seek(Math.max(0, newTime));
+        }
+      } catch (error) {
+        writeToLog("ERROR", "Error seeking video forwards", error);
+      }
+    },
+    [isPlaying, isVlc, seek, progress],
+  );
+
+  const handleSkipBackward = useCallback(async () => {
+    if (!settings?.rewindSkipTime) {
+      return;
+    }
+    wasPlayingRef.current = isPlaying;
+    lightHapticFeedback();
+    try {
+      const curr = progress.value;
+      if (curr !== undefined) {
+        const newTime = isVlc
+          ? Math.max(0, curr - secondsToMs(settings.rewindSkipTime))
+          : Math.max(0, ticksToSeconds(curr) - settings.rewindSkipTime);
+        seek(newTime);
+        if (wasPlayingRef.current) {
+          play();
+        }
+      }
+    } catch (error) {
+      writeToLog("ERROR", "Error seeking video backwards", error);
+    }
+  }, [settings, isPlaying, isVlc, play, seek, progress, lightHapticFeedback]);
+
+  const handleSkipForward = useCallback(async () => {
+    if (!settings?.forwardSkipTime) {
+      return;
+    }
+    wasPlayingRef.current = isPlaying;
+    lightHapticFeedback();
+    try {
+      const curr = progress.value;
+      if (curr !== undefined) {
+        const newTime = isVlc
+          ? curr + secondsToMs(settings.forwardSkipTime)
+          : ticksToSeconds(curr) + settings.forwardSkipTime;
+        seek(Math.max(0, newTime));
+        if (wasPlayingRef.current) {
+          play();
+        }
+      }
+    } catch (error) {
+      writeToLog("ERROR", "Error seeking video forwards", error);
+    }
+  }, [settings, isPlaying, isVlc, play, seek, progress, lightHapticFeedback]);
+
+  return {
+    handleSeekBackward,
+    handleSeekForward,
+    handleSkipBackward,
+    handleSkipForward,
+    wasPlayingRef,
+  };
+}

components/video-player/controls/hooks/useVideoSlider.ts

@@ -0,0 +1,99 @@
+import { debounce } from "lodash";
+import { useCallback, useRef, useState } from "react";
+import type { SharedValue } from "react-native-reanimated";
+import { msToTicks, ticksToSeconds } from "@/utils/time";
+import { CONTROLS_CONSTANTS } from "../constants";
+
+interface UseVideoSliderProps {
+  progress: SharedValue<number>;
+  isSeeking: SharedValue<boolean>;
+  isPlaying: boolean;
+  isVlc: boolean;
+  seek: (value: number) => void;
+  play: () => void;
+  pause: () => void;
+  calculateTrickplayUrl: (progressInTicks: number) => void;
+  showControls: boolean;
+}
+
+export function useVideoSlider({
+  progress,
+  isSeeking,
+  isPlaying,
+  isVlc,
+  seek,
+  play,
+  pause,
+  calculateTrickplayUrl,
+  showControls,
+}: UseVideoSliderProps) {
+  const [isSliding, setIsSliding] = useState(false);
+  const [time, setTime] = useState({ hours: 0, minutes: 0, seconds: 0 });
+  const wasPlayingRef = useRef(false);
+  const lastProgressRef = useRef<number>(0);
+
+  const handleSliderStart = useCallback(() => {
+    if (!showControls) {
+      return;
+    }
+
+    setIsSliding(true);
+    wasPlayingRef.current = isPlaying;
+    lastProgressRef.current = progress.value;
+
+    pause();
+    isSeeking.value = true;
+  }, [showControls, isPlaying, pause, progress, isSeeking]);
+
+  const handleTouchStart = useCallback(() => {
+    if (!showControls) {
+      return;
+    }
+  }, [showControls]);
+
+  const handleTouchEnd = useCallback(() => {
+    if (!showControls) {
+      return;
+    }
+  }, [showControls]);
+
+  const handleSliderComplete = useCallback(
+    async (value: number) => {
+      setIsSliding(false);
+      isSeeking.value = false;
+      progress.value = value;
+      const seekValue = Math.max(
+        0,
+        Math.floor(isVlc ? value : ticksToSeconds(value)),
+      );
+      seek(seekValue);
+      if (wasPlayingRef.current) {
+        play();
+      }
+    },
+    [isVlc, seek, play, progress, isSeeking],
+  );
+
+  const handleSliderChange = useCallback(
+    debounce((value: number) => {
+      const progressInTicks = isVlc ? msToTicks(value) : value;
+      calculateTrickplayUrl(progressInTicks);
+      const progressInSeconds = Math.floor(ticksToSeconds(progressInTicks));
+      const hours = Math.floor(progressInSeconds / 3600);
+      const minutes = Math.floor((progressInSeconds % 3600) / 60);
+      const seconds = progressInSeconds % 60;
+      setTime({ hours, minutes, seconds });
+    }, CONTROLS_CONSTANTS.SLIDER_DEBOUNCE_MS),
+    [isVlc, calculateTrickplayUrl],
+  );
+
+  return {
+    isSliding,
+    time,
+    handleSliderStart,
+    handleTouchStart,
+    handleTouchEnd,
+    handleSliderComplete,
+    handleSliderChange,
+  };
+}

components/video-player/controls/hooks/useVideoTime.ts

@@ -0,0 +1,76 @@
+import { useCallback, useRef, useState } from "react";
+import {
+  runOnJS,
+  type SharedValue,
+  useAnimatedReaction,
+} from "react-native-reanimated";
+import { ticksToSeconds } from "@/utils/time";
+
+interface UseVideoTimeProps {
+  progress: SharedValue<number>;
+  max: SharedValue<number>;
+  isSeeking: SharedValue<boolean>;
+  isVlc: boolean;
+}
+
+export function useVideoTime({
+  progress,
+  max,
+  isSeeking,
+  isVlc,
+}: UseVideoTimeProps) {
+  const [currentTime, setCurrentTime] = useState(0);
+  const [remainingTime, setRemainingTime] = useState(Number.POSITIVE_INFINITY);
+
+  const lastCurrentTimeRef = useRef(0);
+  const lastRemainingTimeRef = useRef(0);
+
+  const updateTimes = useCallback(
+    (currentProgress: number, maxValue: number) => {
+      const current = isVlc ? currentProgress : ticksToSeconds(currentProgress);
+      const remaining = isVlc
+        ? maxValue - currentProgress
+        : ticksToSeconds(maxValue - currentProgress);
+
+      // Only update state if the displayed time actually changed (avoid sub-second updates)
+      const currentSeconds = Math.floor(current / (isVlc ? 1000 : 1));
+      const remainingSeconds = Math.floor(remaining / (isVlc ? 1000 : 1));
+      const lastCurrentSeconds = Math.floor(
+        lastCurrentTimeRef.current / (isVlc ? 1000 : 1),
+      );
+      const lastRemainingSeconds = Math.floor(
+        lastRemainingTimeRef.current / (isVlc ? 1000 : 1),
+      );
+
+      if (
+        currentSeconds !== lastCurrentSeconds ||
+        remainingSeconds !== lastRemainingSeconds
+      ) {
+        setCurrentTime(current);
+        setRemainingTime(remaining);
+        lastCurrentTimeRef.current = current;
+        lastRemainingTimeRef.current = remaining;
+      }
+    },
+    [isVlc],
+  );
+
+  useAnimatedReaction(
+    () => ({
+      progress: progress.value,
+      max: max.value,
+      isSeeking: isSeeking.value,
+    }),
+    (result) => {
+      if (!result.isSeeking) {
+        runOnJS(updateTimes)(result.progress, result.max);
+      }
+    },
+    [updateTimes],
+  );
+
+  return {
+    currentTime,
+    remainingTime,
+  };
+}

eas.json

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

hooks/usePlaybackManager.ts

@@ -70,7 +70,7 @@ export const usePlaybackManager = ({
     useDownload();
 
   /** Whether the device is online. actually it's connected to the internet. */
-  const isOnline = netInfo.isConnected;
+  const isOnline = useMemo(() => netInfo.isConnected, [netInfo.isConnected]);
 
   // Adjacent episodes logic
   const { data: adjacentItems } = useQuery({

providers/JellyfinProvider.tsx

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