From a2b70eee3a8506ee12b205a7df3da92fa7bc4023 Mon Sep 17 00:00:00 2001
From: Adrian Castro <22133246+castdrian@users.noreply.github.com>
Date: Wed, 14 Feb 2024 11:46:14 +0100
Subject: [PATCH 1/3] fix: control touch events on iOS

---
 apps/expo/src/components/player/Controls.tsx  | 13 ++----------
 .../src/components/player/ControlsOverlay.tsx | 21 +++++++++++++------
 2 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/apps/expo/src/components/player/Controls.tsx b/apps/expo/src/components/player/Controls.tsx
index 99bd66c..c04eb9b 100644
--- a/apps/expo/src/components/player/Controls.tsx
+++ b/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,8 @@ 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 (
-    <TouchableWithoutFeedback
-      className={className}
-      onPress={() => setIsIdle(false)}
-    >
-      <View>{!idle && children}</View>
-    </TouchableWithoutFeedback>
-  );
+  return <View>{!idle && children}</View>;
 };
diff --git a/apps/expo/src/components/player/ControlsOverlay.tsx b/apps/expo/src/components/player/ControlsOverlay.tsx
index 2d44c7a..0350653 100644
--- a/apps/expo/src/components/player/ControlsOverlay.tsx
+++ b/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 (
-    <View className="absolute left-0 top-0 flex h-full w-full flex-1">
-      <Header data={headerData} />
-      <MiddleControls />
-      <BottomControls />
-    </View>
+    <TouchableWithoutFeedback onPress={handleTouch}>
+      <View className="absolute left-0 top-0 flex h-full w-full flex-1">
+        <Header data={headerData} />
+        <MiddleControls />
+        <BottomControls />
+      </View>
+    </TouchableWithoutFeedback>
   );
 };

From 1fad7dbfc645f46acc44a10fbce4989e3f128e0f Mon Sep 17 00:00:00 2001
From: Adrian Castro <22133246+castdrian@users.noreply.github.com>
Date: Wed, 14 Feb 2024 11:46:57 +0100
Subject: [PATCH 2/3] chore: cleanup

---
 apps/expo/src/components/player/Controls.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/apps/expo/src/components/player/Controls.tsx b/apps/expo/src/components/player/Controls.tsx
index c04eb9b..f80710b 100644
--- a/apps/expo/src/components/player/Controls.tsx
+++ b/apps/expo/src/components/player/Controls.tsx
@@ -10,6 +10,5 @@ interface ControlsProps extends React.ComponentProps<typeof TouchableOpacity> {
 
 export const Controls = ({ children }: ControlsProps) => {
   const idle = usePlayerStore((state) => state.interface.isIdle);
-
   return <View>{!idle && children}</View>;
 };

From 7b1dcad3dbb3e0a73677a0c78d60cb6b77f99c3a Mon Sep 17 00:00:00 2001
From: Adrian Castro <22133246+castdrian@users.noreply.github.com>
Date: Wed, 14 Feb 2024 13:29:36 +0100
Subject: [PATCH 3/3] fix: add bottom padding to tabbar (too low on iOS)

---
 apps/expo/src/app/(tabs)/_layout.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/apps/expo/src/app/(tabs)/_layout.tsx b/apps/expo/src/app/(tabs)/_layout.tsx
index 48a098f..fb721ec 100644
--- a/apps/expo/src/app/(tabs)/_layout.tsx
+++ b/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: {