Merge branch 'master' into feat/native-tabbar

app/(auth)/play-offline-video.tsx

@@ -2,7 +2,6 @@ import { Controls } from "@/components/video-player/Controls";
 import { useAndroidNavigationBar } from "@/hooks/useAndroidNavigationBar";
 import { useOrientation } from "@/hooks/useOrientation";
 import { useOrientationSettings } from "@/hooks/useOrientationSettings";
-import useScreenDimensions from "@/hooks/useScreenDimensions";
 import { apiAtom } from "@/providers/JellyfinProvider";
 import {
   PlaybackType,
@@ -14,7 +13,7 @@ import * as Haptics from "expo-haptics";
 import { useFocusEffect } from "expo-router";
 import { useAtomValue } from "jotai";
 import React, { useCallback, useMemo, useRef, useState } from "react";
-import { Pressable, StatusBar, View } from "react-native";
+import { Pressable, StatusBar, useWindowDimensions, View } from "react-native";
 import { useSharedValue } from "react-native-reanimated";
 import Video, { OnProgressData, VideoRef } from "react-native-video";
 
@@ -26,7 +25,7 @@ export default function page() {
   const videoSource = useVideoSource(playSettings, api, playUrl);
   const firstTime = useRef(true);
 
-  const screenDimensions = useScreenDimensions();
+  const dimensions = useWindowDimensions();
   useOrientation();
   useOrientationSettings();
   useAndroidNavigationBar();
@@ -82,8 +81,8 @@ export default function page() {
   return (
     <View
       style={{
-        width: screenDimensions.width,
-        height: screenDimensions.height,
+        width: dimensions.width,
+        height: dimensions.height,
         position: "relative",
       }}
       className="flex flex-col items-center justify-center"

app/(auth)/play-video.tsx

@@ -2,7 +2,6 @@ import { Controls } from "@/components/video-player/Controls";
 import { useAndroidNavigationBar } from "@/hooks/useAndroidNavigationBar";
 import { useOrientation } from "@/hooks/useOrientation";
 import { useOrientationSettings } from "@/hooks/useOrientationSettings";
-import useScreenDimensions from "@/hooks/useScreenDimensions";
 import { useWebSocket } from "@/hooks/useWebsockets";
 import { apiAtom } from "@/providers/JellyfinProvider";
 import {
@@ -19,7 +18,7 @@ import * as Haptics from "expo-haptics";
 import { useFocusEffect } from "expo-router";
 import { useAtomValue } from "jotai";
 import React, { useCallback, useMemo, useRef, useState } from "react";
-import { Pressable, StatusBar, View } from "react-native";
+import { Pressable, StatusBar, useWindowDimensions, View } from "react-native";
 import { useSharedValue } from "react-native-reanimated";
 import Video, {
   OnProgressData,
@@ -35,7 +34,7 @@ export default function page() {
   const poster = usePoster(playSettings, api);
   const videoSource = useVideoSource(playSettings, api, poster, playUrl);
   const firstTime = useRef(true);
-  const screenDimensions = useScreenDimensions();
+  const dimensions = useWindowDimensions();
 
   const [isPlaybackStopped, setIsPlaybackStopped] = useState(false);
   const [showControls, setShowControls] = useState(true);
@@ -170,7 +169,7 @@ export default function page() {
     }, [play, stop])
   );
 
-  const { orientation } = useOrientation();
+  useOrientation();
   useOrientationSettings();
   useAndroidNavigationBar();
 
@@ -218,8 +217,8 @@ export default function page() {
         flexDirection: "column",
         justifyContent: "center",
         alignItems: "center",
-        width: screenDimensions.width,
-        height: screenDimensions.height,
+        width: dimensions.width,
+        height: dimensions.height,
         position: "relative",
       }}
     >
@@ -232,15 +231,18 @@ export default function page() {
           position: "absolute",
           top: 0,
           left: 0,
-          width: screenDimensions.width,
-          height: screenDimensions.height,
+          width: dimensions.width,
+          height: dimensions.height,
           zIndex: 0,
         }}
       >
         <Video
           ref={videoRef}
           source={videoSource}
-          style={{ width: "100%", height: "100%" }}
+          style={{
+            width: dimensions.width,
+            height: dimensions.height,
+          }}
           resizeMode={ignoreSafeAreas ? "cover" : "contain"}
           onProgress={onProgress}
           onError={() => {}}

components/video-player/Controls.tsx

@@ -71,44 +71,6 @@ export const Controls: React.FC<Props> = ({
 
   const windowDimensions = Dimensions.get("window");
 
-  const op = useSharedValue<number>(1);
-  const tr = useSharedValue<number>(10);
-  const animatedStyles = useAnimatedStyle(() => {
-    return {
-      opacity: op.value,
-    };
-  });
-  const animatedTopStyles = useAnimatedStyle(() => {
-    return {
-      opacity: op.value,
-      transform: [
-        {
-          translateY: -tr.value,
-        },
-      ],
-    };
-  });
-  const animatedBottomStyles = useAnimatedStyle(() => {
-    return {
-      opacity: op.value,
-      transform: [
-        {
-          translateY: tr.value,
-        },
-      ],
-    };
-  });
-
-  useEffect(() => {
-    if (showControls || isBuffering) {
-      op.value = withTiming(1, { duration: 200 });
-      tr.value = withTiming(0, { duration: 200 });
-    } else {
-      op.value = withTiming(0, { duration: 200 });
-      tr.value = withTiming(10, { duration: 200 });
-    }
-  }, [showControls, isBuffering]);
-
   const { previousItem, nextItem } = useAdjacentItems({ item });
   const { trickPlayUrl, calculateTrickplayUrl, trickplayInfo } = useTrickplay(
     item,
@@ -322,7 +284,7 @@ export const Controls: React.FC<Props> = ({
           toggleControls();
         }}
       >
-        <Animated.View
+        <View
           style={[
             {
               position: "absolute",
@@ -331,10 +293,9 @@ export const Controls: React.FC<Props> = ({
               width: windowDimensions.width + 100,
               height: windowDimensions.height + 100,
             },
-            animatedStyles,
           ]}
           className={`bg-black/50 z-0`}
-        ></Animated.View>
+        ></View>
       </Pressable>
 
       <View
@@ -353,14 +314,14 @@ export const Controls: React.FC<Props> = ({
         <Loader />
       </View>
 
-      <Animated.View
+      <View
         style={[
           {
             position: "absolute",
             top: insets.top,
             right: insets.right,
+            opacity: showControls ? 1 : 0,
           },
-          animatedTopStyles,
         ]}
         pointerEvents={showControls ? "auto" : "none"}
         className={`flex flex-row items-center space-x-2 z-10 p-4`}
@@ -383,9 +344,9 @@ export const Controls: React.FC<Props> = ({
         >
           <Ionicons name="close" size={24} color="white" />
         </TouchableOpacity>
-      </Animated.View>
+      </View>
 
-      <Animated.View
+      <View
         style={[
           {
             position: "absolute",
@@ -393,8 +354,8 @@ export const Controls: React.FC<Props> = ({
             maxHeight: windowDimensions.height,
             left: insets.left,
             bottom: Platform.OS === "ios" ? insets.bottom : insets.bottom,
+            opacity: showControls ? 1 : 0,
           },
-          animatedBottomStyles,
         ]}
         pointerEvents={showControls ? "auto" : "none"}
         className={`flex flex-col p-4 `}
@@ -529,7 +490,7 @@ export const Controls: React.FC<Props> = ({
             </View>
           </View>
         </View>
-      </Animated.View>
+      </View>
     </View>
   );
 };

hooks/useScreenDimensions.ts

@@ -1,27 +0,0 @@
-import { useState, useEffect } from "react";
-import { Dimensions, ScaledSize } from "react-native";
-
-const useScreenDimensions = (): ScaledSize => {
-  const [screenDimensions, setScreenDimensions] = useState(
-    Dimensions.get("screen")
-  );
-
-  useEffect(() => {
-    const updateDimensions = () => {
-      setScreenDimensions(Dimensions.get("screen"));
-    };
-
-    const dimensionsListener = Dimensions.addEventListener(
-      "change",
-      updateDimensions
-    );
-
-    return () => {
-      dimensionsListener.remove();
-    };
-  }, []);
-
-  return screenDimensions;
-};
-
-export default useScreenDimensions;

utils/time.ts

@@ -16,7 +16,8 @@ export const runtimeTicksToMinutes = (
   const hours = Math.floor(ticks / ticksPerHour);
   const minutes = Math.floor((ticks % ticksPerHour) / ticksPerMinute);
 
-  return `${hours}h ${minutes}m`;
+  if (hours > 0) return `${hours}h ${minutes}m`;
+  else return `${minutes}m`;
 };
 
 export const runtimeTicksToSeconds = (