From 13143a2664952d510f8279620698369f1d85ebde Mon Sep 17 00:00:00 2001
From: Adrian Castro <22133246+castdrian@users.noreply.github.com>
Date: Thu, 21 Mar 2024 12:33:47 +0100
Subject: [PATCH] feat: gesture control toggle impl

---
 apps/expo/src/app/(tabs)/settings.tsx         | 23 ++++++++++++++--
 .../src/components/player/VideoPlayer.tsx     | 11 ++++++++
 apps/expo/src/settings/index.ts               | 27 +++++++++++++++++--
 3 files changed, 57 insertions(+), 4 deletions(-)

diff --git a/apps/expo/src/app/(tabs)/settings.tsx b/apps/expo/src/app/(tabs)/settings.tsx
index 49c8e96..d22312e 100644
--- a/apps/expo/src/app/(tabs)/settings.tsx
+++ b/apps/expo/src/app/(tabs)/settings.tsx
@@ -1,5 +1,5 @@
 import type { SelectProps } from "tamagui";
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { FontAwesome, MaterialIcons } from "@expo/vector-icons";
 import {
   Adapt,
@@ -17,6 +17,7 @@ import {
 
 import type { ThemeStoreOption } from "~/stores/theme";
 import ScreenLayout from "~/components/layout/ScreenLayout";
+import { getGestureControls, saveGestureControls } from "~/settings";
 import { useThemeStore } from "~/stores/theme";
 
 const themeOptions: ThemeStoreOption[] = [
@@ -28,6 +29,19 @@ const themeOptions: ThemeStoreOption[] = [
 ];
 
 export default function SettingsScreen() {
+  const [gestureControlsEnabled, setGestureControlsEnabled] = useState(true);
+
+  useEffect(() => {
+    void getGestureControls().then((enabled) => {
+      setGestureControlsEnabled(enabled);
+    });
+  }, []);
+
+  const handleGestureControlsToggle = async (isEnabled: boolean) => {
+    setGestureControlsEnabled(isEnabled);
+    await saveGestureControls(isEnabled);
+  };
+
   return (
     <ScreenLayout title="Settings">
       <View padding={4}>
@@ -38,7 +52,12 @@ export default function SettingsScreen() {
           <XStack width={200} alignItems="center" gap="$4">
             <Label minWidth={110}>Gesture controls</Label>
             <Separator minHeight={20} vertical />
-            <Switch size="$4" native>
+            <Switch
+              size="$4"
+              native
+              checked={gestureControlsEnabled}
+              onCheckedChange={handleGestureControlsToggle}
+            >
               <Switch.Thumb animation="quicker" />
             </Switch>
           </XStack>
diff --git a/apps/expo/src/components/player/VideoPlayer.tsx b/apps/expo/src/components/player/VideoPlayer.tsx
index cfd2179..2591fca 100644
--- a/apps/expo/src/components/player/VideoPlayer.tsx
+++ b/apps/expo/src/components/player/VideoPlayer.tsx
@@ -17,6 +17,7 @@ import { useBrightness } from "~/hooks/player/useBrightness";
 import { usePlaybackSpeed } from "~/hooks/player/usePlaybackSpeed";
 import { usePlayer } from "~/hooks/player/usePlayer";
 import { useVolume } from "~/hooks/player/useVolume";
+import { getGestureControls } from "~/settings";
 import { useAudioTrackStore } from "~/stores/audio";
 import { usePlayerStore } from "~/stores/player/store";
 import { CaptionRenderer } from "./CaptionRenderer";
@@ -61,6 +62,14 @@ export const VideoPlayer = () => {
   const playAudio = usePlayerStore((state) => state.playAudio);
   const pauseAudio = usePlayerStore((state) => state.pauseAudio);
 
+  const [gestureControlsEnabled, setGestureControlsEnabled] = useState(true);
+
+  useEffect(() => {
+    void getGestureControls().then((enabled) => {
+      setGestureControlsEnabled(enabled);
+    });
+  }, []);
+
   const checkGestureInSliderVicinity = (x: number, y: number) => {
     isGestureInSliderVicinity.value = isPointInSliderVicinity(x, y);
   };
@@ -89,6 +98,7 @@ export const VideoPlayer = () => {
   };
 
   const doubleTapGesture = Gesture.Tap()
+    .enabled(gestureControlsEnabled)
     .numberOfTaps(2)
     .onEnd(() => {
       runOnJS(togglePlayback)();
@@ -97,6 +107,7 @@ export const VideoPlayer = () => {
   const screenHalfWidth = Dimensions.get("window").width / 2;
 
   const panGesture = Gesture.Pan()
+    .enabled(gestureControlsEnabled)
     .onStart((event) => {
       runOnJS(checkGestureInSliderVicinity)(event.x, event.y);
       if (isGestureInSliderVicinity.value) {
diff --git a/apps/expo/src/settings/index.ts b/apps/expo/src/settings/index.ts
index 4beac57..be7ab95 100644
--- a/apps/expo/src/settings/index.ts
+++ b/apps/expo/src/settings/index.ts
@@ -7,14 +7,21 @@ interface ThemeSettings {
   theme: ThemeStoreOption;
 }
 
+interface PlayerSettings {
+  gestureControls: boolean;
+}
+
 interface Settings {
   themes: ThemeSettings;
+  player: PlayerSettings;
 }
 
 const settingsKey = "settings";
 
-const saveSettings = async (settings: Settings) => {
-  await AsyncStorage.setItem(settingsKey, JSON.stringify(settings));
+const saveSettings = async (newSettings: Partial<Settings>) => {
+  const settings = await loadSettings();
+  const mergedSettings = { ...settings, ...newSettings };
+  await AsyncStorage.setItem(settingsKey, JSON.stringify(mergedSettings));
 };
 
 const loadSettings = async (): Promise<Settings | null> => {
@@ -55,3 +62,19 @@ export const loadDownloadHistory = async (): Promise<DownloadItem[]> => {
     : { downloads: [] };
   return settings.downloads;
 };
+
+export const getGestureControls = async (): Promise<boolean> => {
+  const settings = await loadSettings();
+  return settings?.player?.gestureControls ?? true;
+};
+
+export const saveGestureControls = async (gestureControls: boolean) => {
+  const settings = (await loadSettings()) ?? ({} as Settings);
+
+  if (!settings.player) {
+    settings.player = { gestureControls: true };
+  }
+
+  settings.player.gestureControls = gestureControls;
+  await saveSettings(settings);
+};