Update PlayButton.tsx

2025-08-20 18:37:18 +02:00 · 2025-08-19 02:20:53 +02:00
12 changed files with 192 additions and 268 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,54 +537,6 @@ export default function page() {
    return () => setIsMounted(false);
  }, []);

-  // Memoize video ref functions to prevent unnecessary re-renders
-  const startPictureInPicture = useMemo(
-    () => videoRef.current?.startPictureInPicture,
-    [isVideoLoaded],
-  );
-  const play = useMemo(
-    () => videoRef.current?.play || (() => {}),
-    [isVideoLoaded],
-  );
-  const pause = useMemo(
-    () => videoRef.current?.pause || (() => {}),
-    [isVideoLoaded],
-  );
-  const seek = useMemo(
-    () => videoRef.current?.seekTo || (() => {}),
-    [isVideoLoaded],
-  );
-  const getAudioTracks = useMemo(
-    () => videoRef.current?.getAudioTracks,
-    [isVideoLoaded],
-  );
-  const getSubtitleTracks = useMemo(
-    () => videoRef.current?.getSubtitleTracks,
-    [isVideoLoaded],
-  );
-  const setSubtitleTrack = useMemo(
-    () => videoRef.current?.setSubtitleTrack,
-    [isVideoLoaded],
-  );
-  const setSubtitleURL = useMemo(
-    () => videoRef.current?.setSubtitleURL,
-    [isVideoLoaded],
-  );
-  const setAudioTrack = useMemo(
-    () => videoRef.current?.setAudioTrack,
-    [isVideoLoaded],
-  );
-  const setVideoAspectRatio = useMemo(
-    () => videoRef.current?.setVideoAspectRatio,
-    [isVideoLoaded],
-  );
-  const setVideoScaleFactor = useMemo(
-    () => videoRef.current?.setVideoScaleFactor,
-    [isVideoLoaded],
-  );
-
-  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 (
@@ -655,7 +567,7 @@ export default function page() {
    <View
      style={{
        flex: 1,
-        backgroundColor: "black",
+        backgroundColor: "blue",
        height: "100%",
        width: "100%",
      }}
@@ -712,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/Controls.tsx
+++ b/components/video-player/controls/Controls.tsx
@@ -24,11 +24,13 @@ import {
  View,
 } from "react-native";
 import { Slider } from "react-native-awesome-slider";
-import {
+import Animated, {
  runOnJS,
  type SharedValue,
  useAnimatedReaction,
+  useAnimatedStyle,
  useSharedValue,
+  withTiming,
 } from "react-native-reanimated";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { Text } from "@/components/common/Text";
@@ -161,11 +163,45 @@ export const Controls: FC<Props> = ({
  const min = useSharedValue(0);
  const max = useSharedValue(item.RunTimeTicks || 0);

+  // Animated opacity for smooth transitions
+  const controlsOpacity = useSharedValue(showControls ? 1 : 0);
+
+  // Animated scale for slider
+  const sliderScale = useSharedValue(1);
+
  const wasPlayingRef = useRef(false);
  const lastProgressRef = useRef<number>(0);

  const lightHapticFeedback = useHaptic("light");

+  // Animate controls opacity when showControls changes
+  useEffect(() => {
+    controlsOpacity.value = withTiming(showControls ? 1 : 0, {
+      duration: 300,
+    });
+  }, [showControls, controlsOpacity]);
+
+  // Animated styles for controls
+  const animatedControlsStyle = useAnimatedStyle(() => {
+    return {
+      opacity: controlsOpacity.value,
+    };
+  });
+
+  // Animated style for black overlay (75% opacity when visible)
+  const animatedOverlayStyle = useAnimatedStyle(() => {
+    return {
+      opacity: controlsOpacity.value * 0.75,
+    };
+  });
+
+  // Animated style for slider scale
+  const animatedSliderStyle = useAnimatedStyle(() => {
+    return {
+      transform: [{ scaleY: sliderScale.value }],
+    };
+  });
+
  useEffect(() => {
    prefetchAllTrickplayImages();
  }, []);
@@ -282,31 +318,18 @@ export const Controls: FC<Props> = ({

  const effectiveProgress = useSharedValue(0);

-  // Recompute progress whenever remote scrubbing is active or when progress significantly changes
+  // Recompute progress whenever remote scrubbing is active
  useAnimatedReaction(
    () => ({
      isScrubbing: isRemoteScrubbing.value,
      scrub: remoteScrubProgress.value,
      actual: progress.value,
    }),
-    (current, previous) => {
-      // Always update if scrubbing state changed or we're currently scrubbing
-      if (
-        current.isScrubbing !== previous?.isScrubbing ||
-        current.isScrubbing
-      ) {
-        effectiveProgress.value =
-          current.isScrubbing && current.scrub != null
-            ? current.scrub
-            : current.actual;
-      } else {
-        // When not scrubbing, only update if progress changed significantly (1 second)
-        const progressUnit = isVlc ? 1000 : 10000000; // 1 second in ms or ticks
-        const progressDiff = Math.abs(current.actual - effectiveProgress.value);
-        if (progressDiff >= progressUnit) {
-          effectiveProgress.value = current.actual;
-        }
-      }
+    (current) => {
+      effectiveProgress.value =
+        current.isScrubbing && current.scrub != null
+          ? current.scrub
+          : current.actual;
    },
    [],
  );
@@ -463,9 +486,6 @@ export const Controls: FC<Props> = ({
    [goToNextItem],
  );

-  const lastCurrentTimeRef = useRef(0);
-  const lastRemainingTimeRef = useRef(0);
-
  const updateTimes = useCallback(
    (currentProgress: number, maxValue: number) => {
      const current = isVlc ? currentProgress : ticksToSeconds(currentProgress);
@@ -473,25 +493,8 @@ export const Controls: FC<Props> = ({
        ? 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;
-      }
+      setCurrentTime(current);
+      setRemainingTime(remaining);
    },
    [goToNextItem, isVlc],
  );
@@ -549,19 +552,31 @@ export const Controls: FC<Props> = ({
    if (!showControls) {
      return;
    }
+
+    // Scale up the slider immediately on touch
+    sliderScale.value = withTiming(1.4, { duration: 300 });
  }, [showControls]);

  const handleTouchEnd = useCallback(() => {
    if (!showControls) {
      return;
    }
+
+    // Scale down the slider on touch end (only if not sliding, to avoid conflict with onSlidingComplete)
+    if (!isSliding) {
+      sliderScale.value = withTiming(1.0, { duration: 300 });
+    }
  }, [showControls, isSliding]);

  const handleSliderComplete = useCallback(
    async (value: number) => {
-      setIsSliding(false);
      isSeeking.value = false;
      progress.value = value;
+      setIsSliding(false);
+
+      // Scale down the slider
+      sliderScale.value = withTiming(1.0, { duration: 200 });
+
      seek(Math.max(0, Math.floor(isVlc ? value : ticksToSeconds(value))));
      if (wasPlayingRef.current) {
        play();
@@ -776,10 +791,10 @@ export const Controls: FC<Props> = ({
          <VideoTouchOverlay
            screenWidth={screenWidth}
            screenHeight={screenHeight}
-            showControls={showControls}
            onToggleControls={toggleControls}
+            animatedStyle={animatedOverlayStyle}
          />
-          <View
+          <Animated.View
            style={[
              {
                position: "absolute",
@@ -788,8 +803,8 @@ export const Controls: FC<Props> = ({
                width: settings?.safeAreaInControlsEnabled
                  ? screenWidth - insets.left - insets.right
                  : screenWidth,
-                opacity: showControls ? 1 : 0,
              },
+              animatedControlsStyle,
            ]}
            pointerEvents={showControls ? "auto" : "none"}
            className={"flex flex-row w-full pt-2"}
@@ -868,33 +883,39 @@ export const Controls: FC<Props> = ({
                <Ionicons name='close' size={24} color='white' />
              </TouchableOpacity>
            </View>
-          </View>
-          <View
-            style={{
-              position: "absolute",
-              top: "50%", // Center vertically
-              left: settings?.safeAreaInControlsEnabled ? insets.left : 0,
-              right: settings?.safeAreaInControlsEnabled ? insets.right : 0,
-              flexDirection: "row",
-              justifyContent: "space-between",
-              alignItems: "center",
-              transform: [{ translateY: -22.5 }], // Adjust for the button's height (half of 45)
-              paddingHorizontal: "28%", // Add some padding to the left and right
-            }}
+          </Animated.View>
+
+          <Animated.View
+            style={[
+              {
+                position: "absolute",
+                top: "50%", // Center vertically
+                left: settings?.safeAreaInControlsEnabled ? insets.left : 0,
+                right: settings?.safeAreaInControlsEnabled ? insets.right : 0,
+                flexDirection: "row",
+                justifyContent: "space-between",
+                alignItems: "center",
+                transform: [{ translateY: -22.5 }], // Adjust for the button's height (half of 45)
+                paddingHorizontal: 17,
+              },
+              animatedControlsStyle,
+            ]}
            pointerEvents={showControls ? "box-none" : "none"}
          >
+            {/* Brightness Control */}
            <View
              style={{
-                position: "absolute",
+                width: 50,
+                height: 50,
                alignItems: "center",
-                transform: [{ rotate: "270deg" }], // Rotate the slider to make it vertical
-                left: 0,
-                bottom: 30,
-                opacity: showControls ? 1 : 0,
+                justifyContent: "center",
+                transform: [{ rotate: "270deg" }],
              }}
            >
              <BrightnessSlider />
            </View>
+
+            {/* Skip Backward */}
            {!Platform.isTV && (
              <TouchableOpacity onPress={handleSkipBackward}>
                <View
@@ -902,7 +923,6 @@ export const Controls: FC<Props> = ({
                    position: "relative",
                    justifyContent: "center",
                    alignItems: "center",
-                    opacity: showControls ? 1 : 0,
                  }}
                >
                  <Ionicons
@@ -928,9 +948,8 @@ export const Controls: FC<Props> = ({
              </TouchableOpacity>
            )}

-            <View
-              style={Platform.isTV ? { flex: 1, alignItems: "center" } : {}}
-            >
+            {/* Play/Pause Button */}
+            <View style={{ alignItems: "center" }}>
              <TouchableOpacity
                onPress={() => {
                  togglePlay();
@@ -941,9 +960,6 @@ export const Controls: FC<Props> = ({
                    name={isPlaying ? "pause" : "play"}
                    size={50}
                    color='white'
-                    style={{
-                      opacity: showControls ? 1 : 0,
-                    }}
                  />
                ) : (
                  <Loader size={"large"} />
@@ -951,6 +967,7 @@ export const Controls: FC<Props> = ({
              </TouchableOpacity>
            </View>

+            {/* Skip Forward */}
            {!Platform.isTV && (
              <TouchableOpacity onPress={handleSkipForward}>
                <View
@@ -958,7 +975,6 @@ export const Controls: FC<Props> = ({
                    position: "relative",
                    justifyContent: "center",
                    alignItems: "center",
-                    opacity: showControls ? 1 : 0,
                  }}
                >
                  <Ionicons name='refresh-outline' size={50} color='white' />
@@ -976,21 +992,23 @@ export const Controls: FC<Props> = ({
                </View>
              </TouchableOpacity>
            )}
+
+            {/* Volume/Audio Control */}
            <View
              style={{
-                position: "absolute",
+                width: 50,
+                height: 50,
                alignItems: "center",
-                transform: [{ rotate: "270deg" }], // Rotate the slider to make it vertical
-                bottom: 30,
-                right: 0,
+                justifyContent: "center",
+                transform: [{ rotate: "270deg" }],
                opacity: showAudioSlider || showControls ? 1 : 0,
              }}
            >
              <AudioSlider setVisibility={setShowAudioSlider} />
            </View>
-          </View>
+          </Animated.View>

-          <View
+          <Animated.View
            style={[
              {
                position: "absolute",
@@ -1000,6 +1018,7 @@ export const Controls: FC<Props> = ({
                  ? Math.max(insets.bottom - 17, 0)
                  : 0,
              },
+              animatedControlsStyle,
            ]}
            className={"flex flex-col px-2"}
            onTouchStart={handleControlsInteraction}
@@ -1015,7 +1034,6 @@ export const Controls: FC<Props> = ({
                style={{
                  flexDirection: "column",
                  alignSelf: "flex-end", // Shrink height based on content
-                  opacity: showControls ? 1 : 0,
                }}
                pointerEvents={showControls ? "box-none" : "none"}
              >
@@ -1064,9 +1082,6 @@ export const Controls: FC<Props> = ({
            </View>
            <View
              className={"flex flex-col-reverse rounded-lg items-center my-2"}
-              style={{
-                opacity: showControls ? 1 : 0,
-              }}
              pointerEvents={showControls ? "box-none" : "none"}
            >
              <View className={"flex flex-col w-full shrink"}>
@@ -1079,32 +1094,35 @@ export const Controls: FC<Props> = ({
                  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) && memoizedRenderBubble()
-                    }
-                    sliderHeight={10}
-                    thumbWidth={0}
-                    progress={effectiveProgress}
-                    minimumValue={min}
-                    maximumValue={max}
-                  />
+                  <Animated.View style={animatedSliderStyle}>
+                    <Slider
+                      theme={{
+                        maximumTrackTintColor: "rgba(255,255,255,0.2)",
+                        minimumTrackTintColor: "#fff",
+                        cacheTrackTintColor: "rgba(255,255,255,0.3)",
+                        bubbleBackgroundColor: "#fff",
+                        bubbleTextColor: "#666",
+                        heartbeatColor: "#999",
+                      }}
+                      renderThumb={() => null}
+                      cache={cacheProgress}
+                      onSlidingStart={handleSliderStart}
+                      onSlidingComplete={handleSliderComplete}
+                      onValueChange={handleSliderChange}
+                      containerStyle={{
+                        borderRadius: 100,
+                      }}
+                      renderBubble={() =>
+                        (isSliding || showRemoteBubble) &&
+                        memoizedRenderBubble()
+                      }
+                      sliderHeight={10}
+                      thumbWidth={0}
+                      progress={effectiveProgress}
+                      minimumValue={min}
+                      maximumValue={max}
+                    />
+                  </Animated.View>
                </View>
                <View className='flex flex-row items-center justify-between mt-2'>
                  <Text className='text-[12px] text-neutral-400'>
@@ -1134,7 +1152,7 @@ export const Controls: FC<Props> = ({
                </View>
              </View>
            </View>
-          </View>
+          </Animated.View>
        </>
      )}
      {settings.maxAutoPlayEpisodeCount.value !== -1 && (
--- 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/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]);