Update PlayButton.tsx

2025-08-20 18:37:18 +02:00 · 2025-08-19 02:20:53 +02:00
23 changed files with 912 additions and 1549 deletions
--- a/.github/workflows/linting.yml
+++ b/.github/workflows/linting.yml
@@ -20,7 +20,7 @@ jobs:
      pull-requests: write
      contents: read
    steps:
-      - uses: amannn/action-semantic-pull-request@7f33ba792281b034f64e96f4c0b5496782dd3b37 # v6.1.0
+      - uses: amannn/action-semantic-pull-request@fdd4d3ddf614fbcd8c29e4b106d3bbe0cb2c605d # v6.0.1
        id: lint_pr_title
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
--- a/README.md
+++ b/README.md
@@ -181,12 +181,6 @@ 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">
@@ -219,12 +213,6 @@ Thanks to the following contributors for their significant contributions:
        <br /><sub><b>@whoopsi-daisy</b></sub>
      </a>
    </td>
-    <td align="center">
-      <a href="https://github.com/Gauvino">
-        <img src="https://github.com/Gauvino.png?size=55" width="55" style="border-radius: 50%;" />
-        <br /><sub><b>@Gauvino</b></sub>
-      </a>
-    </td>
  </tr>
 </table>
 </div>
--- a/app.json
+++ b/app.json
@@ -2,7 +2,7 @@
  "expo": {
    "name": "Streamyfin",
    "slug": "streamyfin",
-    "version": "0.32.1",
+    "version": "0.31.0",
    "orientation": "default",
    "icon": "./assets/images/icon.png",
    "scheme": "streamyfin",
@@ -37,7 +37,7 @@
    },
    "android": {
      "jsEngine": "hermes",
-      "versionCode": 62,
+      "versionCode": 59,
      "adaptiveIcon": {
        "foregroundImage": "./assets/images/icon-android-plain.png",
        "monochromeImage": "./assets/images/icon-android-themed.png",
--- a/app/(auth)/player/direct-player.tsx
+++ b/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 { useAnimatedReaction, useSharedValue } from "react-native-reanimated";
+import { 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,15 +280,11 @@ 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, progress]);
+  }, [videoRef, reportPlaybackStopped]);

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

-  const currentPlayStateInfo = useCallback(() => {
+  const currentPlayStateInfo = () => {
    if (!stream) return;
    return {
      itemId: item?.Id!,
@@ -313,32 +309,7 @@ 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) => {
@@ -351,20 +322,10 @@ export default function page() {

      progress.set(currentTime);

-      // 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;
-      }
+      // Update the playback position in the URL.
+      router.setParams({
+        playbackPosition: msToTicks(currentTime).toString(),
+      });

      if (!item?.Id) return;

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

@@ -552,7 +512,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 = [``];
+  const initOptions = [`--sub-text-scale=${settings.subtitleSize}`];
  if (
    chosenSubtitleTrack &&
    (notTranscoding || chosenSubtitleTrack.IsTextSubtitleStream)
@@ -577,60 +537,6 @@ 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 (
@@ -661,7 +567,7 @@ export default function page() {
    <View
      style={{
        flex: 1,
-        backgroundColor: "black",
+        backgroundColor: "blue",
        height: "100%",
        width: "100%",
      }}
@@ -718,19 +624,19 @@ export default function page() {
          showControls={showControls}
          setShowControls={setShowControls}
          isVideoLoaded={isVideoLoaded}
-          startPictureInPicture={startPictureInPicture}
-          play={play}
-          pause={pause}
-          seek={seek}
+          startPictureInPicture={videoRef.current?.startPictureInPicture}
+          play={videoRef.current?.play || (() => {})}
+          pause={videoRef.current?.pause || (() => {})}
+          seek={videoRef.current?.seekTo || (() => {})}
          enableTrickplay={true}
-          getAudioTracks={getAudioTracks}
-          getSubtitleTracks={getSubtitleTracks}
+          getAudioTracks={videoRef.current?.getAudioTracks}
+          getSubtitleTracks={videoRef.current?.getSubtitleTracks}
          offline={offline}
-          setSubtitleTrack={setSubtitleTrack}
-          setSubtitleURL={setSubtitleURL}
-          setAudioTrack={setAudioTrack}
-          setVideoAspectRatio={setVideoAspectRatio}
-          setVideoScaleFactor={setVideoScaleFactor}
+          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}
--- a/components/DownloadItem.tsx
+++ b/components/DownloadItem.tsx
@@ -106,17 +106,20 @@ export const DownloadItems: React.FC<DownloadProps> = ({

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

  const itemsToDownload = useMemo(() => {
--- a/components/ItemContent.tsx
+++ b/components/ItemContent.tsx
@@ -186,7 +186,7 @@ export const ItemContent: React.FC<ItemContentProps> = React.memo(
        >
          <View className='flex flex-col bg-transparent shrink'>
            <View className='flex flex-col px-4 w-full space-y-2 pt-2 mb-2 shrink'>
-              <ItemHeader item={item} className='mb-2' />
+              <ItemHeader item={item} className='mb-4' />
              {item.Type !== "Program" && !Platform.isTV && !isOffline && (
                <View className='flex flex-row items-center justify-start w-full h-16'>
                  <BitrateSelector
--- a/components/PlayButton.tsx
+++ b/components/PlayButton.tsx
@@ -31,14 +31,13 @@ import { getPrimaryImageUrl } from "@/utils/jellyfin/image/getPrimaryImageUrl";
 import { getStreamUrl } from "@/utils/jellyfin/media/getStreamUrl";
 import { chromecast } from "@/utils/profiles/chromecast";
 import { chromecasth265 } from "@/utils/profiles/chromecasth265";
-import { runtimeTicksToMinutes } from "@/utils/time";
+import { runtimeTicksToMinutes, ticksToSeconds } from "@/utils/time";
 import type { Button } from "./Button";
 import type { SelectedOptions } from "./ItemContent";

 interface Props extends React.ComponentProps<typeof Button> {
  item: BaseItemDto;
  selectedOptions: SelectedOptions;
-  isOffline?: boolean;
 }

 const ANIMATION_DURATION = 500;
@@ -47,7 +46,6 @@ const MIN_PLAYBACK_WIDTH = 15;
 export const PlayButton: React.FC<Props> = ({
  item,
  selectedOptions,
-  isOffline,
  ...props
 }: Props) => {
  const { showActionSheetWithOptions } = useActionSheet();
@@ -77,7 +75,7 @@ export const PlayButton: React.FC<Props> = ({
      }
      router.push(`/player/direct-player?${q}`);
    },
-    [router, isOffline],
+    [router],
  );

  const onPress = useCallback(async () => {
@@ -92,8 +90,6 @@ export const PlayButton: React.FC<Props> = ({
      subtitleIndex: selectedOptions.subtitleIndex?.toString() ?? "",
      mediaSourceId: selectedOptions.mediaSource?.Id ?? "",
      bitrateValue: selectedOptions.bitrate?.value?.toString() ?? "",
-      playbackPosition: item.UserData?.PlaybackPositionTicks?.toString() ?? "0",
-      offline: isOffline ? "true" : "false",
    });

    const queryString = queryParams.toString();
@@ -206,7 +202,9 @@ export const PlayButton: React.FC<Props> = ({
                                  ],
                                },
                      },
-                      startTime: 0,
+                      startTime: ticksToSeconds(
+                        item?.UserData?.PlaybackPositionTicks || 0,
+                      ),
                    })
                    .then(() => {
                      // state is already set when reopening current media, so skip it here.
--- a/components/video-player/controls/BottomControls.tsx
+++ b/components/video-player/controls/BottomControls.tsx
@@ -1,224 +0,0 @@
-import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
-import type { FC } from "react";
-import { View } from "react-native";
-import { Slider } from "react-native-awesome-slider";
-import { type SharedValue } from "react-native-reanimated";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { Text } from "@/components/common/Text";
-import { useSettings } from "@/utils/atoms/settings";
-import NextEpisodeCountDownButton from "./NextEpisodeCountDownButton";
-import SkipButton from "./SkipButton";
-import { TimeDisplay } from "./TimeDisplay";
-import { TrickplayBubble } from "./TrickplayBubble";
-
-interface BottomControlsProps {
-  item: BaseItemDto;
-  showControls: boolean;
-  isSliding: boolean;
-  showRemoteBubble: boolean;
-  currentTime: number;
-  remainingTime: number;
-  isVlc: boolean;
-  showSkipButton: boolean;
-  showSkipCreditButton: boolean;
-  skipIntro: () => void;
-  skipCredit: () => void;
-  nextItem?: BaseItemDto | null;
-  handleNextEpisodeAutoPlay: () => void;
-  handleNextEpisodeManual: () => void;
-  handleControlsInteraction: () => void;
-
-  // Slider props
-  min: SharedValue<number>;
-  max: SharedValue<number>;
-  effectiveProgress: SharedValue<number>;
-  cacheProgress: SharedValue<number>;
-  handleSliderStart: () => void;
-  handleSliderComplete: (value: number) => void;
-  handleSliderChange: (value: number) => void;
-  handleTouchStart: () => void;
-  handleTouchEnd: () => void;
-
-  // Trickplay props
-  trickPlayUrl: {
-    x: number;
-    y: number;
-    url: string;
-  } | null;
-  trickplayInfo: {
-    aspectRatio?: number;
-    data: {
-      TileWidth?: number;
-      TileHeight?: number;
-    };
-  } | null;
-  time: {
-    hours: number;
-    minutes: number;
-    seconds: number;
-  };
-}
-
-export const BottomControls: FC<BottomControlsProps> = ({
-  item,
-  showControls,
-  isSliding,
-  showRemoteBubble,
-  currentTime,
-  remainingTime,
-  isVlc,
-  showSkipButton,
-  showSkipCreditButton,
-  skipIntro,
-  skipCredit,
-  nextItem,
-  handleNextEpisodeAutoPlay,
-  handleNextEpisodeManual,
-  handleControlsInteraction,
-  min,
-  max,
-  effectiveProgress,
-  cacheProgress,
-  handleSliderStart,
-  handleSliderComplete,
-  handleSliderChange,
-  handleTouchStart,
-  handleTouchEnd,
-  trickPlayUrl,
-  trickplayInfo,
-  time,
-}) => {
-  const [settings] = useSettings();
-  const insets = useSafeAreaInsets();
-
-  return (
-    <View
-      style={[
-        {
-          position: "absolute",
-          right: settings?.safeAreaInControlsEnabled ? insets.right : 0,
-          left: settings?.safeAreaInControlsEnabled ? insets.left : 0,
-          bottom: settings?.safeAreaInControlsEnabled
-            ? Math.max(insets.bottom - 17, 0)
-            : 0,
-        },
-      ]}
-      className={"flex flex-col px-2"}
-      onTouchStart={handleControlsInteraction}
-    >
-      <View
-        className='shrink flex flex-col justify-center h-full'
-        style={{
-          flexDirection: "row",
-          justifyContent: "space-between",
-        }}
-      >
-        <View
-          style={{
-            flexDirection: "column",
-            alignSelf: "flex-end",
-            opacity: showControls ? 1 : 0,
-          }}
-          pointerEvents={showControls ? "box-none" : "none"}
-        >
-          {item?.Type === "Episode" && (
-            <Text className='opacity-50'>
-              {`${item.SeriesName} - ${item.SeasonName} Episode ${item.IndexNumber}`}
-            </Text>
-          )}
-          <Text className='font-bold text-xl'>{item?.Name}</Text>
-          {item?.Type === "Movie" && (
-            <Text className='text-xs opacity-50'>{item?.ProductionYear}</Text>
-          )}
-          {item?.Type === "Audio" && (
-            <Text className='text-xs opacity-50'>{item?.Album}</Text>
-          )}
-        </View>
-        <View className='flex flex-row space-x-2'>
-          <SkipButton
-            showButton={showSkipButton}
-            onPress={skipIntro}
-            buttonText='Skip Intro'
-          />
-          <SkipButton
-            showButton={showSkipCreditButton}
-            onPress={skipCredit}
-            buttonText='Skip Credits'
-          />
-          {(settings.maxAutoPlayEpisodeCount.value === -1 ||
-            settings.autoPlayEpisodeCount <
-              settings.maxAutoPlayEpisodeCount.value) && (
-            <NextEpisodeCountDownButton
-              show={
-                !nextItem
-                  ? false
-                  : isVlc
-                    ? remainingTime < 10000
-                    : remainingTime < 10
-              }
-              onFinish={handleNextEpisodeAutoPlay}
-              onPress={handleNextEpisodeManual}
-            />
-          )}
-        </View>
-      </View>
-      <View
-        className={"flex flex-col-reverse rounded-lg items-center my-2"}
-        style={{
-          opacity: showControls ? 1 : 0,
-        }}
-        pointerEvents={showControls ? "box-none" : "none"}
-      >
-        <View className={"flex flex-col w-full shrink"}>
-          <View
-            style={{
-              height: 10,
-              justifyContent: "center",
-              alignItems: "stretch",
-            }}
-            onTouchStart={handleTouchStart}
-            onTouchEnd={handleTouchEnd}
-          >
-            <Slider
-              theme={{
-                maximumTrackTintColor: "rgba(255,255,255,0.2)",
-                minimumTrackTintColor: "#fff",
-                cacheTrackTintColor: "rgba(255,255,255,0.3)",
-                bubbleBackgroundColor: "#fff",
-                bubbleTextColor: "#666",
-                heartbeatColor: "#999",
-              }}
-              renderThumb={() => null}
-              cache={cacheProgress}
-              onSlidingStart={handleSliderStart}
-              onSlidingComplete={handleSliderComplete}
-              onValueChange={handleSliderChange}
-              containerStyle={{
-                borderRadius: 100,
-              }}
-              renderBubble={() =>
-                (isSliding || showRemoteBubble) && (
-                  <TrickplayBubble
-                    trickPlayUrl={trickPlayUrl}
-                    trickplayInfo={trickplayInfo}
-                    time={time}
-                  />
-                )
-              }
-              sliderHeight={10}
-              thumbWidth={0}
-              progress={effectiveProgress}
-              minimumValue={min}
-              maximumValue={max}
-            />
-          </View>
-          <TimeDisplay
-            currentTime={currentTime}
-            remainingTime={remainingTime}
-            isVlc={isVlc}
-          />
-        </View>
-      </View>
-    </View>
-  );
-};
--- a/components/video-player/controls/CenterControls.tsx
+++ b/components/video-player/controls/CenterControls.tsx
@@ -1,158 +0,0 @@
-import { Ionicons } from "@expo/vector-icons";
-import type { FC } from "react";
-import { Platform, TouchableOpacity, View } from "react-native";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { Text } from "@/components/common/Text";
-import { Loader } from "@/components/Loader";
-import { useSettings } from "@/utils/atoms/settings";
-import AudioSlider from "./AudioSlider";
-import BrightnessSlider from "./BrightnessSlider";
-import { ICON_SIZES } from "./constants";
-
-interface CenterControlsProps {
-  showControls: boolean;
-  isPlaying: boolean;
-  isBuffering: boolean;
-  showAudioSlider: boolean;
-  setShowAudioSlider: (show: boolean) => void;
-  togglePlay: () => void;
-  handleSkipBackward: () => void;
-  handleSkipForward: () => void;
-}
-
-export const CenterControls: FC<CenterControlsProps> = ({
-  showControls,
-  isPlaying,
-  isBuffering,
-  showAudioSlider,
-  setShowAudioSlider,
-  togglePlay,
-  handleSkipBackward,
-  handleSkipForward,
-}) => {
-  const [settings] = useSettings();
-  const insets = useSafeAreaInsets();
-
-  return (
-    <View
-      style={{
-        position: "absolute",
-        top: "50%",
-        left: settings?.safeAreaInControlsEnabled ? insets.left : 0,
-        right: settings?.safeAreaInControlsEnabled ? insets.right : 0,
-        flexDirection: "row",
-        justifyContent: "space-between",
-        alignItems: "center",
-        transform: [{ translateY: -22.5 }],
-        paddingHorizontal: "28%",
-      }}
-      pointerEvents={showControls ? "box-none" : "none"}
-    >
-      <View
-        style={{
-          position: "absolute",
-          alignItems: "center",
-          transform: [{ rotate: "270deg" }],
-          left: 0,
-          bottom: 30,
-          opacity: showControls ? 1 : 0,
-        }}
-      >
-        <BrightnessSlider />
-      </View>
-
-      {!Platform.isTV && (
-        <TouchableOpacity onPress={handleSkipBackward}>
-          <View
-            style={{
-              position: "relative",
-              justifyContent: "center",
-              alignItems: "center",
-              opacity: showControls ? 1 : 0,
-            }}
-          >
-            <Ionicons
-              name='refresh-outline'
-              size={ICON_SIZES.CENTER}
-              color='white'
-              style={{
-                transform: [{ scaleY: -1 }, { rotate: "180deg" }],
-              }}
-            />
-            <Text
-              style={{
-                position: "absolute",
-                color: "white",
-                fontSize: 16,
-                fontWeight: "bold",
-                bottom: 10,
-              }}
-            >
-              {settings?.rewindSkipTime}
-            </Text>
-          </View>
-        </TouchableOpacity>
-      )}
-
-      <View style={Platform.isTV ? { flex: 1, alignItems: "center" } : {}}>
-        <TouchableOpacity onPress={togglePlay}>
-          {!isBuffering ? (
-            <Ionicons
-              name={isPlaying ? "pause" : "play"}
-              size={ICON_SIZES.CENTER}
-              color='white'
-              style={{
-                opacity: showControls ? 1 : 0,
-              }}
-            />
-          ) : (
-            <Loader size={"large"} />
-          )}
-        </TouchableOpacity>
-      </View>
-
-      {!Platform.isTV && (
-        <TouchableOpacity onPress={handleSkipForward}>
-          <View
-            style={{
-              position: "relative",
-              justifyContent: "center",
-              alignItems: "center",
-              opacity: showControls ? 1 : 0,
-            }}
-          >
-            <Ionicons
-              name='refresh-outline'
-              size={ICON_SIZES.CENTER}
-              color='white'
-            />
-            <Text
-              style={{
-                position: "absolute",
-                color: "white",
-                fontSize: 16,
-                fontWeight: "bold",
-                bottom: 10,
-              }}
-            >
-              {settings?.forwardSkipTime}
-            </Text>
-          </View>
-        </TouchableOpacity>
-      )}
-
-      <View
-        style={{
-          position: "absolute",
-          alignItems: "center",
-          transform: [{ rotate: "270deg" }],
-          bottom: 30,
-          right: 0,
-          opacity: showAudioSlider || showControls ? 1 : 0,
-        }}
-      >
-        <AudioSlider setVisibility={setShowAudioSlider} />
-      </View>
-    </View>
-  );
-};
--- a/components/video-player/controls/Controls.tsx
+++ b/components/video-player/controls/Controls.tsx
--- a/components/video-player/controls/HeaderControls.tsx
+++ b/components/video-player/controls/HeaderControls.tsx
@@ -1,196 +0,0 @@
-import { Ionicons, MaterialIcons } from "@expo/vector-icons";
-import type {
-  BaseItemDto,
-  MediaSourceInfo,
-} from "@jellyfin/sdk/lib/generated-client";
-import { useRouter } from "expo-router";
-import { type Dispatch, type FC, type SetStateAction } from "react";
-import {
-  Platform,
-  TouchableOpacity,
-  useWindowDimensions,
-  View,
-} from "react-native";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { useHaptic } from "@/hooks/useHaptic";
-import { useSettings, VideoPlayer } from "@/utils/atoms/settings";
-import { ICON_SIZES } from "./constants";
-import { VideoProvider } from "./contexts/VideoContext";
-import DropdownView from "./dropdown/DropdownView";
-import { type ScaleFactor, ScaleFactorSelector } from "./ScaleFactorSelector";
-import {
-  type AspectRatio,
-  AspectRatioSelector,
-} from "./VideoScalingModeSelector";
-
-interface HeaderControlsProps {
-  item: BaseItemDto;
-  showControls: boolean;
-  offline: boolean;
-  mediaSource?: MediaSourceInfo | null;
-  startPictureInPicture?: () => Promise<void>;
-  switchOnEpisodeMode: () => void;
-  goToPreviousItem: () => void;
-  goToNextItem: (options: { isAutoPlay?: boolean }) => void;
-  previousItem?: BaseItemDto | null;
-  nextItem?: BaseItemDto | null;
-  getAudioTracks?: (() => Promise<any[] | null>) | (() => any[]);
-  getSubtitleTracks?: (() => Promise<any[] | null>) | (() => any[]);
-  setAudioTrack?: (index: number) => void;
-  setSubtitleTrack?: (index: number) => void;
-  setSubtitleURL?: (url: string, customName: string) => void;
-  aspectRatio?: AspectRatio;
-  scaleFactor?: ScaleFactor;
-  setAspectRatio?: Dispatch<SetStateAction<AspectRatio>>;
-  setScaleFactor?: Dispatch<SetStateAction<ScaleFactor>>;
-  setVideoAspectRatio?: (aspectRatio: string | null) => Promise<void>;
-  setVideoScaleFactor?: (scaleFactor: number) => Promise<void>;
-}
-
-export const HeaderControls: FC<HeaderControlsProps> = ({
-  item,
-  showControls,
-  offline,
-  mediaSource,
-  startPictureInPicture,
-  switchOnEpisodeMode,
-  goToPreviousItem,
-  goToNextItem,
-  previousItem,
-  nextItem,
-  getAudioTracks,
-  getSubtitleTracks,
-  setAudioTrack,
-  setSubtitleTrack,
-  setSubtitleURL,
-  aspectRatio = "default",
-  scaleFactor = 1.0,
-  setAspectRatio,
-  setScaleFactor,
-  setVideoAspectRatio,
-  setVideoScaleFactor,
-}) => {
-  const [settings] = useSettings();
-  const router = useRouter();
-  const insets = useSafeAreaInsets();
-  const { width: screenWidth } = useWindowDimensions();
-  const lightHapticFeedback = useHaptic("light");
-
-  const handleAspectRatioChange = async (newRatio: AspectRatio) => {
-    if (!setAspectRatio || !setVideoAspectRatio) return;
-
-    setAspectRatio(newRatio);
-    const aspectRatioString = newRatio === "default" ? null : newRatio;
-    await setVideoAspectRatio(aspectRatioString);
-  };
-
-  const handleScaleFactorChange = async (newScale: ScaleFactor) => {
-    if (!setScaleFactor || !setVideoScaleFactor) return;
-
-    setScaleFactor(newScale);
-    await setVideoScaleFactor(newScale);
-  };
-
-  const onClose = async () => {
-    lightHapticFeedback();
-    router.back();
-  };
-
-  return (
-    <View
-      style={[
-        {
-          position: "absolute",
-          top: settings?.safeAreaInControlsEnabled ? insets.top : 0,
-          right: settings?.safeAreaInControlsEnabled ? insets.right : 0,
-          width: settings?.safeAreaInControlsEnabled
-            ? screenWidth - insets.left - insets.right
-            : screenWidth,
-          opacity: showControls ? 1 : 0,
-        },
-      ]}
-      pointerEvents={showControls ? "auto" : "none"}
-      className={"flex flex-row w-full pt-2"}
-    >
-      <View className='mr-auto'>
-        {!Platform.isTV && (!offline || !mediaSource?.TranscodingUrl) && (
-          <VideoProvider
-            getAudioTracks={getAudioTracks}
-            getSubtitleTracks={getSubtitleTracks}
-            setAudioTrack={setAudioTrack}
-            setSubtitleTrack={setSubtitleTrack}
-            setSubtitleURL={setSubtitleURL}
-          >
-            <DropdownView />
-          </VideoProvider>
-        )}
-      </View>
-
-      <View className='flex flex-row items-center space-x-2'>
-        {!Platform.isTV &&
-          (settings.defaultPlayer === VideoPlayer.VLC_4 ||
-            Platform.OS === "android") && (
-            <TouchableOpacity
-              onPress={startPictureInPicture}
-              className='aspect-square flex flex-col rounded-xl items-center justify-center p-2'
-            >
-              <MaterialIcons
-                name='picture-in-picture'
-                size={ICON_SIZES.HEADER}
-                color='white'
-                style={{ opacity: showControls ? 1 : 0 }}
-              />
-            </TouchableOpacity>
-          )}
-        {item?.Type === "Episode" && (
-          <TouchableOpacity
-            onPress={switchOnEpisodeMode}
-            className='aspect-square flex flex-col rounded-xl items-center justify-center p-2'
-          >
-            <Ionicons name='list' size={ICON_SIZES.HEADER} color='white' />
-          </TouchableOpacity>
-        )}
-        {previousItem && (
-          <TouchableOpacity
-            onPress={goToPreviousItem}
-            className='aspect-square flex flex-col rounded-xl items-center justify-center p-2'
-          >
-            <Ionicons
-              name='play-skip-back'
-              size={ICON_SIZES.HEADER}
-              color='white'
-            />
-          </TouchableOpacity>
-        )}
-        {nextItem && (
-          <TouchableOpacity
-            onPress={() => goToNextItem({ isAutoPlay: false })}
-            className='aspect-square flex flex-col rounded-xl items-center justify-center p-2'
-          >
-            <Ionicons
-              name='play-skip-forward'
-              size={ICON_SIZES.HEADER}
-              color='white'
-            />
-          </TouchableOpacity>
-        )}
-        <AspectRatioSelector
-          currentRatio={aspectRatio}
-          onRatioChange={handleAspectRatioChange}
-          disabled={!setVideoAspectRatio}
-        />
-        <ScaleFactorSelector
-          currentScale={scaleFactor}
-          onScaleChange={handleScaleFactorChange}
-          disabled={!setVideoScaleFactor}
-        />
-        <TouchableOpacity
-          onPress={onClose}
-          className='aspect-square flex flex-col rounded-xl items-center justify-center p-2'
-        >
-          <Ionicons name='close' size={ICON_SIZES.HEADER} color='white' />
-        </TouchableOpacity>
-      </View>
-    </View>
-  );
-};
--- a/components/video-player/controls/TimeDisplay.tsx
+++ b/components/video-player/controls/TimeDisplay.tsx
@@ -1,43 +0,0 @@
-import type { FC } from "react";
-import { View } from "react-native";
-import { Text } from "@/components/common/Text";
-import { formatTimeString } from "@/utils/time";
-
-interface TimeDisplayProps {
-  currentTime: number;
-  remainingTime: number;
-  isVlc: boolean;
-}
-
-export const TimeDisplay: FC<TimeDisplayProps> = ({
-  currentTime,
-  remainingTime,
-  isVlc,
-}) => {
-  const getFinishTime = () => {
-    const now = new Date();
-    const remainingMs = isVlc ? remainingTime : remainingTime * 1000;
-    const finishTime = new Date(now.getTime() + remainingMs);
-    return finishTime.toLocaleTimeString([], {
-      hour: "2-digit",
-      minute: "2-digit",
-      hour12: false,
-    });
-  };
-
-  return (
-    <View className='flex flex-row items-center justify-between mt-2'>
-      <Text className='text-[12px] text-neutral-400'>
-        {formatTimeString(currentTime, isVlc ? "ms" : "s")}
-      </Text>
-      <View className='flex flex-col items-end'>
-        <Text className='text-[12px] text-neutral-400'>
-          -{formatTimeString(remainingTime, isVlc ? "ms" : "s")}
-        </Text>
-        <Text className='text-[10px] text-neutral-500 opacity-70'>
-          ends at {getFinishTime()}
-        </Text>
-      </View>
-    </View>
-  );
-};
--- a/components/video-player/controls/TrickplayBubble.tsx
+++ b/components/video-player/controls/TrickplayBubble.tsx
@@ -1,92 +0,0 @@
-import { Image } from "expo-image";
-import type { FC } from "react";
-import { View } from "react-native";
-import { Text } from "@/components/common/Text";
-import { CONTROLS_CONSTANTS } from "./constants";
-
-interface TrickplayBubbleProps {
-  trickPlayUrl: {
-    x: number;
-    y: number;
-    url: string;
-  } | null;
-  trickplayInfo: {
-    aspectRatio?: number;
-    data: {
-      TileWidth?: number;
-      TileHeight?: number;
-    };
-  } | null;
-  time: {
-    hours: number;
-    minutes: number;
-    seconds: number;
-  };
-}
-
-export const TrickplayBubble: FC<TrickplayBubbleProps> = ({
-  trickPlayUrl,
-  trickplayInfo,
-  time,
-}) => {
-  if (!trickPlayUrl || !trickplayInfo) {
-    return null;
-  }
-
-  const { x, y, url } = trickPlayUrl;
-  const tileWidth = CONTROLS_CONSTANTS.TILE_WIDTH;
-  const tileHeight = tileWidth / trickplayInfo.aspectRatio!;
-
-  return (
-    <View
-      style={{
-        position: "absolute",
-        left: -62,
-        bottom: 0,
-        paddingTop: 30,
-        paddingBottom: 5,
-        width: tileWidth * 1.5,
-        justifyContent: "center",
-        alignItems: "center",
-      }}
-    >
-      <View
-        style={{
-          width: tileWidth,
-          height: tileHeight,
-          alignSelf: "center",
-          transform: [{ scale: 1.4 }],
-          borderRadius: 5,
-        }}
-        className='bg-neutral-800 overflow-hidden'
-      >
-        <Image
-          cachePolicy={"memory-disk"}
-          style={{
-            width: tileWidth * trickplayInfo?.data.TileWidth!,
-            height:
-              (tileWidth / trickplayInfo.aspectRatio!) *
-              trickplayInfo?.data.TileHeight!,
-            transform: [
-              { translateX: -x * tileWidth },
-              { translateY: -y * tileHeight },
-            ],
-            resizeMode: "cover",
-          }}
-          source={{ uri: url }}
-          contentFit='cover'
-        />
-      </View>
-      <Text
-        style={{
-          marginTop: 30,
-          fontSize: 16,
-        }}
-      >
-        {`${time.hours > 0 ? `${time.hours}:` : ""}${
-          time.minutes < 10 ? `0${time.minutes}` : time.minutes
-        }:${time.seconds < 10 ? `0${time.seconds}` : time.seconds}`}
-      </Text>
-    </View>
-  );
-};
--- a/components/video-player/controls/VideoTouchOverlay.tsx
+++ b/components/video-player/controls/VideoTouchOverlay.tsx
@@ -1,38 +1,43 @@
 import { Pressable } from "react-native";
+import Animated, { type AnimatedStyle } from "react-native-reanimated";
 import { useTapDetection } from "./useTapDetection";

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

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

  return (
-    <Pressable
+    <AnimatedPressable
      onTouchStart={handleTouchStart}
      onTouchEnd={handleTouchEnd}
-      style={{
-        position: "absolute",
-        width: screenWidth,
-        height: screenHeight,
-        backgroundColor: "black",
-        left: 0,
-        right: 0,
-        top: 0,
-        bottom: 0,
-        opacity: showControls ? 0.75 : 0,
-      }}
+      style={[
+        {
+          position: "absolute",
+          width: screenWidth,
+          height: screenHeight,
+          backgroundColor: "black",
+          left: 0,
+          right: 0,
+          top: 0,
+          bottom: 0,
+        },
+        animatedStyle,
+      ]}
    />
  );
 };
--- a/components/video-player/controls/constants.ts
+++ b/components/video-player/controls/constants.ts
@@ -1,17 +0,0 @@
-export const CONTROLS_CONSTANTS = {
-  TIMEOUT: 4000,
-  SCRUB_INTERVAL_MS: 10 * 1000, // 10 seconds in ms
-  SCRUB_INTERVAL_TICKS: 10 * 10000000, // 10 seconds in ticks
-  TILE_WIDTH: 150,
-  PROGRESS_UNIT_MS: 1000, // 1 second in ms
-  PROGRESS_UNIT_TICKS: 10000000, // 1 second in ticks
-  LONG_PRESS_INITIAL_SEEK: 10,
-  LONG_PRESS_ACCELERATION: 1.1,
-  LONG_PRESS_INTERVAL: 300,
-  SLIDER_DEBOUNCE_MS: 3,
-} as const;
-
-export const ICON_SIZES = {
-  HEADER: 24,
-  CENTER: 50,
-} as const;
--- a/components/video-player/controls/hooks/index.ts
+++ b/components/video-player/controls/hooks/index.ts
@@ -1,4 +0,0 @@
-export { useRemoteControl } from "./useRemoteControl";
-export { useVideoNavigation } from "./useVideoNavigation";
-export { useVideoSlider } from "./useVideoSlider";
-export { useVideoTime } from "./useVideoTime";
--- a/components/video-player/controls/hooks/useRemoteControl.ts
+++ b/components/video-player/controls/hooks/useRemoteControl.ts
@@ -1,170 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from "react";
-import { useTVEventHandler } from "react-native";
-import { type SharedValue, useSharedValue } from "react-native-reanimated";
-import { msToTicks, ticksToSeconds } from "@/utils/time";
-import { CONTROLS_CONSTANTS } from "../constants";
-
-interface UseRemoteControlProps {
-  progress: SharedValue<number>;
-  min: SharedValue<number>;
-  max: SharedValue<number>;
-  isVlc: boolean;
-  showControls: boolean;
-  isPlaying: boolean;
-  seek: (value: number) => void;
-  play: () => void;
-  togglePlay: () => void;
-  toggleControls: () => void;
-  calculateTrickplayUrl: (progressInTicks: number) => void;
-  handleSeekForward: (seconds: number) => void;
-  handleSeekBackward: (seconds: number) => void;
-}
-
-export function useRemoteControl({
-  progress,
-  min,
-  max,
-  isVlc,
-  showControls,
-  isPlaying,
-  seek,
-  play,
-  togglePlay,
-  toggleControls,
-  calculateTrickplayUrl,
-  handleSeekForward,
-  handleSeekBackward,
-}: UseRemoteControlProps) {
-  const remoteScrubProgress = useSharedValue<number | null>(null);
-  const isRemoteScrubbing = useSharedValue(false);
-  const [showRemoteBubble, setShowRemoteBubble] = useState(false);
-  const [longPressScrubMode, setLongPressScrubMode] = useState<
-    "FF" | "RW" | null
-  >(null);
-  const [isSliding, setIsSliding] = useState(false);
-  const [time, setTime] = useState({ hours: 0, minutes: 0, seconds: 0 });
-
-  const longPressTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(
-    null,
-  );
-  const SCRUB_INTERVAL = isVlc
-    ? CONTROLS_CONSTANTS.SCRUB_INTERVAL_MS
-    : CONTROLS_CONSTANTS.SCRUB_INTERVAL_TICKS;
-
-  const updateTime = useCallback(
-    (progressValue: number) => {
-      const progressInTicks = isVlc ? msToTicks(progressValue) : progressValue;
-      const progressInSeconds = Math.floor(ticksToSeconds(progressInTicks));
-      const hours = Math.floor(progressInSeconds / 3600);
-      const minutes = Math.floor((progressInSeconds % 3600) / 60);
-      const seconds = progressInSeconds % 60;
-      setTime({ hours, minutes, seconds });
-    },
-    [isVlc],
-  );
-
-  useTVEventHandler((evt) => {
-    if (!evt) return;
-
-    switch (evt.eventType) {
-      case "longLeft": {
-        setLongPressScrubMode((prev) => (!prev ? "RW" : null));
-        break;
-      }
-      case "longRight": {
-        setLongPressScrubMode((prev) => (!prev ? "FF" : null));
-        break;
-      }
-      case "left":
-      case "right": {
-        isRemoteScrubbing.value = true;
-        setShowRemoteBubble(true);
-
-        const direction = evt.eventType === "left" ? -1 : 1;
-        const base = remoteScrubProgress.value ?? progress.value;
-        const updated = Math.max(
-          min.value,
-          Math.min(max.value, base + direction * SCRUB_INTERVAL),
-        );
-        remoteScrubProgress.value = updated;
-        const progressInTicks = isVlc ? msToTicks(updated) : updated;
-        calculateTrickplayUrl(progressInTicks);
-        updateTime(updated);
-        break;
-      }
-      case "select": {
-        if (isRemoteScrubbing.value && remoteScrubProgress.value != null) {
-          progress.value = remoteScrubProgress.value;
-
-          const seekTarget = isVlc
-            ? Math.max(0, remoteScrubProgress.value)
-            : Math.max(0, ticksToSeconds(remoteScrubProgress.value));
-
-          seek(seekTarget);
-          if (isPlaying) play();
-
-          isRemoteScrubbing.value = false;
-          remoteScrubProgress.value = null;
-          setShowRemoteBubble(false);
-        } else {
-          togglePlay();
-        }
-        break;
-      }
-      case "down":
-      case "up":
-        // cancel scrubbing on other directions
-        isRemoteScrubbing.value = false;
-        remoteScrubProgress.value = null;
-        setShowRemoteBubble(false);
-        break;
-      default:
-        break;
-    }
-
-    if (!showControls) toggleControls();
-  });
-
-  useEffect(() => {
-    let isActive = true;
-    let seekTime = CONTROLS_CONSTANTS.LONG_PRESS_INITIAL_SEEK;
-
-    const scrubWithLongPress = () => {
-      if (!isActive || !longPressScrubMode) return;
-
-      setIsSliding(true);
-      const scrubFn =
-        longPressScrubMode === "FF" ? handleSeekForward : handleSeekBackward;
-      scrubFn(seekTime);
-      seekTime *= CONTROLS_CONSTANTS.LONG_PRESS_ACCELERATION;
-
-      longPressTimeoutRef.current = setTimeout(
-        scrubWithLongPress,
-        CONTROLS_CONSTANTS.LONG_PRESS_INTERVAL,
-      );
-    };
-
-    if (longPressScrubMode) {
-      isActive = true;
-      scrubWithLongPress();
-    }
-
-    return () => {
-      isActive = false;
-      setIsSliding(false);
-      if (longPressTimeoutRef.current) {
-        clearTimeout(longPressTimeoutRef.current);
-        longPressTimeoutRef.current = null;
-      }
-    };
-  }, [longPressScrubMode, handleSeekForward, handleSeekBackward]);
-
-  return {
-    remoteScrubProgress,
-    isRemoteScrubbing,
-    showRemoteBubble,
-    longPressScrubMode,
-    isSliding,
-    time,
-  };
-}
--- a/components/video-player/controls/hooks/useVideoNavigation.ts
+++ b/components/video-player/controls/hooks/useVideoNavigation.ts
@@ -1,114 +0,0 @@
-import { useCallback, useRef } from "react";
-import type { SharedValue } from "react-native-reanimated";
-import { useHaptic } from "@/hooks/useHaptic";
-import { useSettings } from "@/utils/atoms/settings";
-import { writeToLog } from "@/utils/log";
-import { secondsToMs, ticksToSeconds } from "@/utils/time";
-
-interface UseVideoNavigationProps {
-  progress: SharedValue<number>;
-  isPlaying: boolean;
-  isVlc: boolean;
-  seek: (value: number) => void;
-  play: () => void;
-}
-
-export function useVideoNavigation({
-  progress,
-  isPlaying,
-  isVlc,
-  seek,
-  play,
-}: UseVideoNavigationProps) {
-  const [settings] = useSettings();
-  const lightHapticFeedback = useHaptic("light");
-  const wasPlayingRef = useRef(false);
-
-  const handleSeekBackward = useCallback(
-    async (seconds: number) => {
-      wasPlayingRef.current = isPlaying;
-      try {
-        const curr = progress.value;
-        if (curr !== undefined) {
-          const newTime = isVlc
-            ? Math.max(0, curr - secondsToMs(seconds))
-            : Math.max(0, ticksToSeconds(curr) - seconds);
-          seek(newTime);
-        }
-      } catch (error) {
-        writeToLog("ERROR", "Error seeking video backwards", error);
-      }
-    },
-    [isPlaying, isVlc, seek, progress],
-  );
-
-  const handleSeekForward = useCallback(
-    async (seconds: number) => {
-      wasPlayingRef.current = isPlaying;
-      try {
-        const curr = progress.value;
-        if (curr !== undefined) {
-          const newTime = isVlc
-            ? curr + secondsToMs(seconds)
-            : ticksToSeconds(curr) + seconds;
-          seek(Math.max(0, newTime));
-        }
-      } catch (error) {
-        writeToLog("ERROR", "Error seeking video forwards", error);
-      }
-    },
-    [isPlaying, isVlc, seek, progress],
-  );
-
-  const handleSkipBackward = useCallback(async () => {
-    if (!settings?.rewindSkipTime) {
-      return;
-    }
-    wasPlayingRef.current = isPlaying;
-    lightHapticFeedback();
-    try {
-      const curr = progress.value;
-      if (curr !== undefined) {
-        const newTime = isVlc
-          ? Math.max(0, curr - secondsToMs(settings.rewindSkipTime))
-          : Math.max(0, ticksToSeconds(curr) - settings.rewindSkipTime);
-        seek(newTime);
-        if (wasPlayingRef.current) {
-          play();
-        }
-      }
-    } catch (error) {
-      writeToLog("ERROR", "Error seeking video backwards", error);
-    }
-  }, [settings, isPlaying, isVlc, play, seek, progress, lightHapticFeedback]);
-
-  const handleSkipForward = useCallback(async () => {
-    if (!settings?.forwardSkipTime) {
-      return;
-    }
-    wasPlayingRef.current = isPlaying;
-    lightHapticFeedback();
-    try {
-      const curr = progress.value;
-      if (curr !== undefined) {
-        const newTime = isVlc
-          ? curr + secondsToMs(settings.forwardSkipTime)
-          : ticksToSeconds(curr) + settings.forwardSkipTime;
-        seek(Math.max(0, newTime));
-        if (wasPlayingRef.current) {
-          play();
-        }
-      }
-    } catch (error) {
-      writeToLog("ERROR", "Error seeking video forwards", error);
-    }
-  }, [settings, isPlaying, isVlc, play, seek, progress, lightHapticFeedback]);
-
-  return {
-    handleSeekBackward,
-    handleSeekForward,
-    handleSkipBackward,
-    handleSkipForward,
-    wasPlayingRef,
-  };
-}
--- a/components/video-player/controls/hooks/useVideoSlider.ts
+++ b/components/video-player/controls/hooks/useVideoSlider.ts
@@ -1,99 +0,0 @@
-import { debounce } from "lodash";
-import { useCallback, useRef, useState } from "react";
-import type { SharedValue } from "react-native-reanimated";
-import { msToTicks, ticksToSeconds } from "@/utils/time";
-import { CONTROLS_CONSTANTS } from "../constants";
-
-interface UseVideoSliderProps {
-  progress: SharedValue<number>;
-  isSeeking: SharedValue<boolean>;
-  isPlaying: boolean;
-  isVlc: boolean;
-  seek: (value: number) => void;
-  play: () => void;
-  pause: () => void;
-  calculateTrickplayUrl: (progressInTicks: number) => void;
-  showControls: boolean;
-}
-
-export function useVideoSlider({
-  progress,
-  isSeeking,
-  isPlaying,
-  isVlc,
-  seek,
-  play,
-  pause,
-  calculateTrickplayUrl,
-  showControls,
-}: UseVideoSliderProps) {
-  const [isSliding, setIsSliding] = useState(false);
-  const [time, setTime] = useState({ hours: 0, minutes: 0, seconds: 0 });
-  const wasPlayingRef = useRef(false);
-  const lastProgressRef = useRef<number>(0);
-
-  const handleSliderStart = useCallback(() => {
-    if (!showControls) {
-      return;
-    }
-
-    setIsSliding(true);
-    wasPlayingRef.current = isPlaying;
-    lastProgressRef.current = progress.value;
-
-    pause();
-    isSeeking.value = true;
-  }, [showControls, isPlaying, pause, progress, isSeeking]);
-
-  const handleTouchStart = useCallback(() => {
-    if (!showControls) {
-      return;
-    }
-  }, [showControls]);
-
-  const handleTouchEnd = useCallback(() => {
-    if (!showControls) {
-      return;
-    }
-  }, [showControls]);
-
-  const handleSliderComplete = useCallback(
-    async (value: number) => {
-      setIsSliding(false);
-      isSeeking.value = false;
-      progress.value = value;
-      const seekValue = Math.max(
-        0,
-        Math.floor(isVlc ? value : ticksToSeconds(value)),
-      );
-      seek(seekValue);
-      if (wasPlayingRef.current) {
-        play();
-      }
-    },
-    [isVlc, seek, play, progress, isSeeking],
-  );
-
-  const handleSliderChange = useCallback(
-    debounce((value: number) => {
-      const progressInTicks = isVlc ? msToTicks(value) : value;
-      calculateTrickplayUrl(progressInTicks);
-      const progressInSeconds = Math.floor(ticksToSeconds(progressInTicks));
-      const hours = Math.floor(progressInSeconds / 3600);
-      const minutes = Math.floor((progressInSeconds % 3600) / 60);
-      const seconds = progressInSeconds % 60;
-      setTime({ hours, minutes, seconds });
-    }, CONTROLS_CONSTANTS.SLIDER_DEBOUNCE_MS),
-    [isVlc, calculateTrickplayUrl],
-  );
-
-  return {
-    isSliding,
-    time,
-    handleSliderStart,
-    handleTouchStart,
-    handleTouchEnd,
-    handleSliderComplete,
-    handleSliderChange,
-  };
-}
--- a/components/video-player/controls/hooks/useVideoTime.ts
+++ b/components/video-player/controls/hooks/useVideoTime.ts
@@ -1,76 +0,0 @@
-import { useCallback, useRef, useState } from "react";
-import {
-  runOnJS,
-  type SharedValue,
-  useAnimatedReaction,
-} from "react-native-reanimated";
-import { ticksToSeconds } from "@/utils/time";
-
-interface UseVideoTimeProps {
-  progress: SharedValue<number>;
-  max: SharedValue<number>;
-  isSeeking: SharedValue<boolean>;
-  isVlc: boolean;
-}
-
-export function useVideoTime({
-  progress,
-  max,
-  isSeeking,
-  isVlc,
-}: UseVideoTimeProps) {
-  const [currentTime, setCurrentTime] = useState(0);
-  const [remainingTime, setRemainingTime] = useState(Number.POSITIVE_INFINITY);
-
-  const lastCurrentTimeRef = useRef(0);
-  const lastRemainingTimeRef = useRef(0);
-
-  const updateTimes = useCallback(
-    (currentProgress: number, maxValue: number) => {
-      const current = isVlc ? currentProgress : ticksToSeconds(currentProgress);
-      const remaining = isVlc
-        ? maxValue - currentProgress
-        : ticksToSeconds(maxValue - currentProgress);
-
-      // Only update state if the displayed time actually changed (avoid sub-second updates)
-      const currentSeconds = Math.floor(current / (isVlc ? 1000 : 1));
-      const remainingSeconds = Math.floor(remaining / (isVlc ? 1000 : 1));
-      const lastCurrentSeconds = Math.floor(
-        lastCurrentTimeRef.current / (isVlc ? 1000 : 1),
-      );
-      const lastRemainingSeconds = Math.floor(
-        lastRemainingTimeRef.current / (isVlc ? 1000 : 1),
-      );
-
-      if (
-        currentSeconds !== lastCurrentSeconds ||
-        remainingSeconds !== lastRemainingSeconds
-      ) {
-        setCurrentTime(current);
-        setRemainingTime(remaining);
-        lastCurrentTimeRef.current = current;
-        lastRemainingTimeRef.current = remaining;
-      }
-    },
-    [isVlc],
-  );
-
-  useAnimatedReaction(
-    () => ({
-      progress: progress.value,
-      max: max.value,
-      isSeeking: isSeeking.value,
-    }),
-    (result) => {
-      if (!result.isSeeking) {
-        runOnJS(updateTimes)(result.progress, result.max);
-      }
-    },
-    [updateTimes],
-  );
-
-  return {
-    currentTime,
-    remainingTime,
-  };
-}
--- a/eas.json
+++ b/eas.json
@@ -46,14 +46,14 @@
    },
    "production": {
      "environment": "production",
-      "channel": "0.32.1",
+      "channel": "0.31.0",
      "android": {
        "image": "latest"
      }
    },
    "production-apk": {
      "environment": "production",
-      "channel": "0.32.1",
+      "channel": "0.31.0",
      "android": {
        "buildType": "apk",
        "image": "latest"
@@ -61,7 +61,7 @@
    },
    "production-apk-tv": {
      "environment": "production",
-      "channel": "0.32.1",
+      "channel": "0.31.0",
      "android": {
        "buildType": "apk",
        "image": "latest"
--- a/hooks/usePlaybackManager.ts
+++ b/hooks/usePlaybackManager.ts
@@ -70,7 +70,7 @@ export const usePlaybackManager = ({
    useDownload();

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

  // Adjacent episodes logic
  const { data: adjacentItems } = useQuery({
--- a/providers/JellyfinProvider.tsx
+++ b/providers/JellyfinProvider.tsx
@@ -64,7 +64,7 @@ export const JellyfinProvider: React.FC<{ children: ReactNode }> = ({
      setJellyfin(
        () =>
          new Jellyfin({
-            clientInfo: { name: "Streamyfin", version: "0.32.1" },
+            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.32.1"`,
+      }, DeviceId="${deviceId}", Version="0.31.0"`,
    };
  }, [deviceId]);