Merge branch 'feat-providers-video' of https://github.com/castdrian/mw-native into pr/9

apps/expo/src/app/(tabs)/_layout.tsx

@@ -1,3 +1,4 @@
+import { useRef } from "react";
 import { Platform, View } from "react-native";
 import { Tabs } from "expo-router";
 
@@ -6,87 +7,102 @@ import Colors from "@movie-web/tailwind-config/colors";
 import { MovieWebSvg } from "~/components/Icon";
 import SvgTabBarIcon from "~/components/SvgTabBarIcon";
 import TabBarIcon from "~/components/TabBarIcon";
+import SearchTabContext from "./search/SearchTabContext";
 
 export default function TabLayout() {
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  const focusSearchInputRef = useRef(() => {});
+
   return (
-    <Tabs
-      sceneContainerStyle={{
-        backgroundColor: Colors.background,
-      }}
-      screenOptions={{
-        headerShown: false,
-        tabBarActiveTintColor: Colors.primary[100],
-        tabBarStyle: {
-          backgroundColor: Colors.secondary[700],
-          borderTopColor: "transparent",
-          borderTopRightRadius: 20,
-          borderTopLeftRadius: 20,
-          paddingBottom: Platform.select({ ios: 100 }),
-          height: 80,
-        },
-        tabBarItemStyle: {
-          paddingVertical: 18,
-          height: 82,
-        },
-        tabBarLabelStyle: [
-          {
-            marginTop: 2,
+    <SearchTabContext.Provider value={{ focusSearchInputRef }}>
+      <Tabs
+        sceneContainerStyle={{
+          backgroundColor: Colors.background,
+        }}
+        screenListeners={({ route }) => ({
+          tabPress: () => {
+            switch (route.name) {
+              case "search":
+                focusSearchInputRef.current();
+                break;
+            }
           },
-        ],
-      }}
-    >
-      <Tabs.Screen
-        name="index"
-        options={{
-          title: "Home",
-          tabBarIcon: ({ focused }) => (
-            <TabBarIcon name="home" focused={focused} />
-          ),
+        })}
+        screenOptions={{
+          headerShown: false,
+          tabBarActiveTintColor: Colors.primary[100],
+          tabBarStyle: {
+            backgroundColor: Colors.secondary[700],
+            borderTopColor: "transparent",
+            borderTopRightRadius: 20,
+            borderTopLeftRadius: 20,
+            paddingBottom: Platform.select({ ios: 100 }),
+            height: 80,
+          },
+          tabBarItemStyle: {
+            paddingVertical: 18,
+            height: 82,
+          },
+          tabBarLabelStyle: [
+            {
+              marginTop: 2,
+            },
+          ],
         }}
-      />
-      <Tabs.Screen
-        name="downloads"
-        options={{
-          title: "Downloads",
-          tabBarIcon: ({ focused }) => (
-            <TabBarIcon name="download" focused={focused} />
-          ),
-        }}
-      />
-      <Tabs.Screen
-        name="search"
-        options={{
-          title: "Search",
-          tabBarLabel: "",
-          tabBarIcon: ({ focused }) => (
-            <View
-              className={`android:top-2 ios:top-2 flex h-14 w-14 items-center justify-center overflow-hidden rounded-full ${focused ? "bg-primary-300" : "bg-primary-400"} text-center align-middle text-2xl text-white`}
-            >
-              <TabBarIcon name="search" color="#FFF" />
-            </View>
-          ),
-        }}
-      />
-      <Tabs.Screen
-        name="movie-web"
-        options={{
-          title: "movie-web",
-          tabBarIcon: ({ focused }) => (
-            <SvgTabBarIcon focused={focused}>
-              <MovieWebSvg />
-            </SvgTabBarIcon>
-          ),
-        }}
-      />
-      <Tabs.Screen
-        name="settings"
-        options={{
-          title: "Settings",
-          tabBarIcon: ({ focused }) => (
-            <TabBarIcon name="cog" focused={focused} />
-          ),
-        }}
-      />
-    </Tabs>
+      >
+        <Tabs.Screen
+          name="index"
+          options={{
+            title: "Home",
+            tabBarIcon: ({ focused }) => (
+              <TabBarIcon name="home" focused={focused} />
+            ),
+          }}
+        />
+        <Tabs.Screen
+          name="downloads"
+          options={{
+            title: "Downloads",
+            tabBarIcon: ({ focused }) => (
+              <TabBarIcon name="download" focused={focused} />
+            ),
+          }}
+        />
+        <Tabs.Screen
+          name="search"
+          options={{
+            title: "Search",
+            tabBarLabel: "",
+            tabBarIcon: ({ focused }) => (
+              <View
+                className={`android:top-2 ios:top-2 flex h-14 w-14 items-center justify-center overflow-hidden rounded-full ${focused ? "bg-primary-300" : "bg-primary-400"} text-center align-middle text-2xl text-white`}
+              >
+                <TabBarIcon name="search" color="#FFF" />
+              </View>
+            ),
+          }}
+        />
+        <Tabs.Screen
+          name="movie-web"
+          options={{
+            title: "movie-web",
+            tabBarIcon: ({ focused }) => (
+              <SvgTabBarIcon focused={focused}>
+                <MovieWebSvg />
+              </SvgTabBarIcon>
+            ),
+          }}
+        />
+        <Tabs.Screen
+          name="settings"
+          options={{
+            title: "Settings",
+            tabBarIcon: ({ focused }) => (
+              <TabBarIcon name="cog" focused={focused} />
+            ),
+          }}
+        />
+      </Tabs>
+    </SearchTabContext.Provider>
   );
 }

apps/expo/src/app/(tabs)/search/SearchTabContext.tsx

@@ -0,0 +1,8 @@
+import React from "react";
+
+const SearchTabContext = React.createContext({
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  focusSearchInputRef: { current: () => {} },
+});
+
+export default SearchTabContext;

apps/expo/src/app/(tabs)/search/Searchbar.tsx

@@ -1,10 +1,12 @@
-import { useCallback, useRef, useState } from "react";
+import { useCallback, useContext, useEffect, useRef, useState } from "react";
 import { TextInput, View } from "react-native";
 import { useFocusEffect } from "expo-router";
 import { FontAwesome5 } from "@expo/vector-icons";
 
 import Colors from "@movie-web/tailwind-config/colors";
 
+import SearchTabContext from "./SearchTabContext";
+
 export default function Searchbar({
   onSearchChange,
 }: {
@@ -13,6 +15,14 @@ export default function Searchbar({
   const [keyword, setKeyword] = useState("");
   const inputRef = useRef<TextInput>(null);
 
+  const { focusSearchInputRef } = useContext(SearchTabContext);
+
+  useEffect(() => {
+    focusSearchInputRef.current = () => {
+      inputRef.current?.focus();
+    };
+  }, [focusSearchInputRef]);
+
   useFocusEffect(
     useCallback(() => {
       // When the screen is focused

apps/expo/src/app/(tabs)/search/_layout.tsx

@@ -80,7 +80,7 @@ export default function SearchScreen() {
       <ScrollView
         onScrollBeginDrag={handleScrollBegin}
         onMomentumScrollEnd={handleScrollEnd}
-        scrollEnabled={data && data.length > 0}
+        scrollEnabled={data && data.length > 0 ? true : false}
         keyboardDismissMode="on-drag"
         keyboardShouldPersistTaps="handled"
       >

apps/expo/src/components/player/VideoPlayer.tsx

@@ -47,6 +47,7 @@ export const VideoPlayer = () => {
   const [hasStartedPlaying, setHasStartedPlaying] = useState(false);
   const router = useRouter();
   const scale = useSharedValue(1);
+  const [lastVelocityY, setLastVelocityY] = useState(0);
 
   const isIdle = usePlayerStore((state) => state.interface.isIdle);
   const stream = usePlayerStore((state) => state.interface.currentStream);
@@ -87,26 +88,34 @@ export const VideoPlayer = () => {
 
       const directionMultiplier = event.velocityY < 0 ? 1 : -1;
 
+      const change = directionMultiplier * Math.abs(event.velocityY / divisor);
+      const newVolume = Math.max(0, Math.min(1, currentVolume.value + change));
+      const newBrightness = Math.max(0, Math.min(1, brightness.value + change));
+
       if (event.x > screenHalfWidth) {
-        const change =
-          directionMultiplier * Math.abs(event.velocityY / divisor);
-        const newVolume = Math.max(
-          0,
-          Math.min(1, currentVolume.value + change),
-        );
         runOnJS(handleVolumeChange)(newVolume);
       } else {
-        const change =
-          directionMultiplier * Math.abs(event.velocityY / divisor);
-        const newBrightness = Math.max(
-          0,
-          Math.min(1, brightness.value + change),
-        );
         brightness.value = newBrightness;
         runOnJS(handleBrightnessChange)(newBrightness);
       }
+
+      if (
+        (event.velocityY < 0 && lastVelocityY >= 0) ||
+        (event.velocityY >= 0 && lastVelocityY < 0)
+      ) {
+        runOnJS(setLastVelocityY)(event.velocityY);
+      }
+
+      if (event.x > screenHalfWidth) {
+        runOnJS(handleVolumeChange)(newVolume);
+        runOnJS(setShowVolumeOverlay)(true);
+      } else {
+        runOnJS(handleBrightnessChange)(newBrightness);
+        runOnJS(setShowBrightnessOverlay)(true);
+      }
     })
     .onEnd(() => {
+      runOnJS(setLastVelocityY)(0);
       runOnJS(setShowVolumeOverlay)(false);
       runOnJS(setShowBrightnessOverlay)(false);
     });

apps/expo/src/hooks/player/useBrightness.ts

@@ -24,17 +24,20 @@ export const useBrightness = () => {
     }
 
     void init();
-  }, []);
+  }, [brightness]);
 
-  const handleBrightnessChange = useCallback(async (newValue: number) => {
-    try {
-      setShowBrightnessOverlay(true);
-      brightness.value = newValue;
-      await Brightness.setBrightnessAsync(newValue);
-    } catch (error) {
-      console.error("Failed to set brightness:", error);
-    }
-  }, []);
+  const handleBrightnessChange = useCallback(
+    async (newValue: number) => {
+      try {
+        setShowBrightnessOverlay(true);
+        brightness.value = newValue;
+        await Brightness.setBrightnessAsync(newValue);
+      } catch (error) {
+        console.error("Failed to set brightness:", error);
+      }
+    },
+    [brightness],
+  );
 
   return {
     showBrightnessOverlay: debouncedShowBrightnessOverlay,

apps/expo/src/hooks/player/useVolume.ts

@@ -9,10 +9,13 @@ export const useVolume = () => {
   const volume = useSharedValue(1);
   const debouncedVolume = useDebounce(volume.value, 20);
 
-  const handleVolumeChange = useCallback((newValue: number) => {
-    volume.value = newValue;
-    setShowVolumeOverlay(true);
-  }, []);
+  const handleVolumeChange = useCallback(
+    (newValue: number) => {
+      volume.value = newValue;
+      setShowVolumeOverlay(true);
+    },
+    [volume],
+  );
 
   return {
     showVolumeOverlay: debouncedShowVolumeOverlay,