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

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

@@ -19,6 +19,7 @@ export default function TabLayout() {
           borderTopColor: "transparent",
           borderTopRightRadius: 20,
           borderTopLeftRadius: 20,
+          paddingBottom: 100,
           height: 80,
         },
         tabBarItemStyle: {

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

@@ -1,7 +1,6 @@
 import type { TouchableOpacity } from "react-native";
 import React from "react";
 import { View } from "react-native";
-import { TouchableWithoutFeedback } from "react-native-gesture-handler";
 
 import { usePlayerStore } from "~/stores/player/store";
 
@@ -9,16 +8,7 @@ interface ControlsProps extends React.ComponentProps<typeof TouchableOpacity> {
   children: React.ReactNode;
 }
 
-export const Controls = ({ children, className }: ControlsProps) => {
+export const Controls = ({ children }: ControlsProps) => {
   const idle = usePlayerStore((state) => state.interface.isIdle);
-  const setIsIdle = usePlayerStore((state) => state.setIsIdle);
+  return <View>{!idle && children}</View>;
-
-  return (
-    <TouchableWithoutFeedback
-      className={className}
-      onPress={() => setIsIdle(false)}
-    >
-      <View>{!idle && children}</View>
-    </TouchableWithoutFeedback>
-  );
 };

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

@@ -1,6 +1,7 @@
-import { View } from "react-native";
+import { TouchableWithoutFeedback, View } from "react-native";
 
 import type { HeaderData } from "./Header";
+import { usePlayerStore } from "~/stores/player/store";
 import { BottomControls } from "./BottomControls";
 import { Header } from "./Header";
 import { MiddleControls } from "./MiddleControls";
@@ -10,11 +11,19 @@ interface ControlsOverlayProps {
 }
 
 export const ControlsOverlay = ({ headerData }: ControlsOverlayProps) => {
+  const idle = usePlayerStore((state) => state.interface.isIdle);
+  const setIsIdle = usePlayerStore((state) => state.setIsIdle);
+
+  const handleTouch = () => {
+    setIsIdle(!idle);
+  };
   return (
+    <TouchableWithoutFeedback onPress={handleTouch}>
       <View className="absolute left-0 top-0 flex h-full w-full flex-1">
         <Header data={headerData} />
         <MiddleControls />
         <BottomControls />
       </View>
+    </TouchableWithoutFeedback>
   );
 };