From 439ba8c7e5301b9324c18e2f3e9b68afd2ffad3d Mon Sep 17 00:00:00 2001
From: Adrian Castro <22133246+castdrian@users.noreply.github.com>
Date: Wed, 14 Feb 2024 21:53:33 +0100
Subject: [PATCH] fix: fix the controls so they don't intefere with bottom
 controls

---
 .../src/components/player/ControlsOverlay.tsx | 21 ++++--------
 .../src/components/player/MiddleControls.tsx  | 34 ++++++++++++-------
 2 files changed, 28 insertions(+), 27 deletions(-)

diff --git a/apps/expo/src/components/player/ControlsOverlay.tsx b/apps/expo/src/components/player/ControlsOverlay.tsx
index 0350653..2d44c7a 100644
--- a/apps/expo/src/components/player/ControlsOverlay.tsx
+++ b/apps/expo/src/components/player/ControlsOverlay.tsx
@@ -1,7 +1,6 @@
-import { TouchableWithoutFeedback, View } from "react-native";
+import { 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";
@@ -11,19 +10,11 @@ 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>
+    <View className="absolute left-0 top-0 flex h-full w-full flex-1">
+      <Header data={headerData} />
+      <MiddleControls />
+      <BottomControls />
+    </View>
   );
 };
diff --git a/apps/expo/src/components/player/MiddleControls.tsx b/apps/expo/src/components/player/MiddleControls.tsx
index 1737429..6d4f269 100644
--- a/apps/expo/src/components/player/MiddleControls.tsx
+++ b/apps/expo/src/components/player/MiddleControls.tsx
@@ -1,22 +1,32 @@
-import { StyleSheet, View } from "react-native";
+import { StyleSheet, 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 style={styles.container}>
-      <Controls className="mr-24">
-        <SeekButton type="backward" />
-      </Controls>
-      <Controls>
-        <PlayButton />
-      </Controls>
-      <Controls>
-        <SeekButton type="forward" />
-      </Controls>
-    </View>
+    <TouchableWithoutFeedback onPress={handleTouch}>
+      <View style={styles.container}>
+        <Controls className="mr-24">
+          <SeekButton type="backward" />
+        </Controls>
+        <Controls>
+          <PlayButton />
+        </Controls>
+        <Controls>
+          <SeekButton type="forward" />
+        </Controls>
+      </View>
+    </TouchableWithoutFeedback>
   );
 };