From e5dc36cd6d43feb88c06b16337d81701d5e1e471 Mon Sep 17 00:00:00 2001
From: Adrian Castro <22133246+castdrian@users.noreply.github.com>
Date: Tue, 13 Feb 2024 12:10:56 +0100
Subject: [PATCH] fix: player controls touch events on iOS

---
 apps/expo/src/components/player/Controls.tsx  |  8 +----
 .../src/components/player/MiddleControls.tsx  | 34 ++++++++++++-------
 2 files changed, 23 insertions(+), 19 deletions(-)

diff --git a/apps/expo/src/components/player/Controls.tsx b/apps/expo/src/components/player/Controls.tsx
index 3c92a87..05a93d2 100644
--- a/apps/expo/src/components/player/Controls.tsx
+++ b/apps/expo/src/components/player/Controls.tsx
@@ -9,15 +9,9 @@ interface ControlsProps extends React.ComponentProps<typeof TouchableOpacity> {
 
 export const Controls = ({ children, className }: ControlsProps) => {
   const idle = usePlayerStore((state) => state.interface.isIdle);
-  const setIsIdle = usePlayerStore((state) => state.setIsIdle);
 
   return (
-    <TouchableOpacity
-      onPress={() => {
-        setIsIdle(false);
-      }}
-      className={className}
-    >
+    <TouchableOpacity className={className}>
       {!idle && children}
     </TouchableOpacity>
   );
diff --git a/apps/expo/src/components/player/MiddleControls.tsx b/apps/expo/src/components/player/MiddleControls.tsx
index 42e769a..3baea7c 100644
--- a/apps/expo/src/components/player/MiddleControls.tsx
+++ b/apps/expo/src/components/player/MiddleControls.tsx
@@ -1,21 +1,31 @@
-import { View } from "react-native";
+import { TouchableWithoutFeedback, View } from "react-native";
 
+import { usePlayerStore } from "~/stores/player/store";
 import { Controls } from "./Controls";
 import { PlayButton } from "./PlayButton";
 import { SeekButton } from "./SeekButton";
 
 export const MiddleControls = () => {
+  const idle = usePlayerStore((state) => state.interface.isIdle);
+  const setIsIdle = usePlayerStore((state) => state.setIsIdle);
+
+  const handleTouch = () => {
+    setIsIdle(!idle);
+  };
+
   return (
-    <View className="absolute flex h-full w-full flex-1 flex-row items-center justify-center gap-24">
-      <Controls>
-        <SeekButton type="backward" />
-      </Controls>
-      <Controls>
-        <PlayButton />
-      </Controls>
-      <Controls>
-        <SeekButton type="forward" />
-      </Controls>
-    </View>
+    <TouchableWithoutFeedback onPress={handleTouch}>
+      <View className="absolute flex h-full w-full flex-1 flex-row items-center justify-center gap-24">
+        <Controls>
+          <SeekButton type="backward" />
+        </Controls>
+        <Controls>
+          <PlayButton />
+        </Controls>
+        <Controls>
+          <SeekButton type="forward" />
+        </Controls>
+      </View>
+    </TouchableWithoutFeedback>
   );
 };