feat: autoplay toggle and setting

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

@@ -36,7 +36,8 @@ const themeOptions: ThemeStoreOption[] = [
 ];
 
 export default function SettingsScreen() {
-  const { gestureControls, setGestureControls } = usePlayerSettingsStore();
+  const { gestureControls, setGestureControls, autoPlay, setAutoPlay } =
+    usePlayerSettingsStore();
   const toastController = useToastController();
 
   const handleGestureControlsToggle = async (isEnabled: boolean) => {
@@ -85,6 +86,13 @@ export default function SettingsScreen() {
               <MWSwitch.Thumb animation="quicker" />
             </MWSwitch>
           </XStack>
+          <XStack width={200} alignItems="center" gap="$4">
+            <Label minWidth={110}>Autoplay</Label>
+            <Separator minHeight={20} vertical />
+            <MWSwitch checked={autoPlay} onCheckedChange={setAutoPlay}>
+              <MWSwitch.Thumb animation="quicker" />
+            </MWSwitch>
+          </XStack>
         </YStack>
       </View>
       <View justifyContent="center" alignItems="center">

apps/expo/src/stores/settings/index.ts

@@ -46,6 +46,8 @@ export const useThemeSettingsStore = create<
 interface PlayerStoreState {
   gestureControls: boolean;
   setGestureControls: (enabled: boolean) => void;
+  autoPlay: boolean;
+  setAutoPlay: (enabled: boolean) => void;
 }
 
 export const usePlayerSettingsStore = create<
@@ -61,6 +63,8 @@ export const usePlayerSettingsStore = create<
       }),
       setGestureControls: (enabled: boolean) =>
         set({ gestureControls: enabled }),
+      autoPlay: true,
+      setAutoPlay: (enabled: boolean) => set({ autoPlay: enabled }),
     }),
     {
       name: "player-settings",