feat: automatically next episode settings (#51)

src/screens/anime/watch/components/auto-next-settings.tsx

@@ -0,0 +1,34 @@
+import { useAtom } from 'jotai/react';
+import { ToggleLeft } from 'lucide-react-native';
+import React from 'react';
+
+import { shouldAutoNextEpisodeAtom } from '@/screens/settings/store';
+import { Text, View } from '@/ui';
+import Switch from '@/ui/core/switch';
+
+const AutoNextSettings = () => {
+  const [shouldAutoNextEpisode, setShouldAutoNextEpisode] = useAtom(
+    shouldAutoNextEpisodeAtom
+  );
+
+  return (
+    <View className="flex flex-row items-center justify-between">
+      <View className="flex flex-row items-center px-4 py-2">
+        <ToggleLeft size={32} color="white" className="h-8 w-8 text-white" />
+
+        <Text variant="lg" weight="semibold" className="ml-2">
+          Automatically next episode
+        </Text>
+
+        <Text className="ml-4 h-1.5 w-1.5 rounded-full bg-thunder-400" />
+
+        <Switch
+          value={shouldAutoNextEpisode}
+          onValueChange={setShouldAutoNextEpisode}
+        />
+      </View>
+    </View>
+  );
+};
+
+export default AutoNextSettings;

src/screens/anime/watch/components/media-player.tsx

@@ -20,6 +20,7 @@ import RNVideo from 'react-native-video';
 import { VideoFormat } from '@/core/video';
 import providers from '@/providers';
 import {
+  shouldAutoNextEpisodeAtom,
   shouldSyncAdultAtom,
   syncPercentageAtom,
 } from '@/screens/settings/store';
@@ -91,6 +92,7 @@ const MediaPlayer: React.FC<MediaPlayerProps> = ({
   const setVideoSize = useSetAtom(videoSizeAtom);
 
   const shouldSyncAdult = useAtomValue(shouldSyncAdultAtom);
+  const shouldAutoNextEpisode = useAtomValue(shouldAutoNextEpisodeAtom);
 
   const currentEpisode = useAtomValue(currentEpisodeAtom);
   const sectionEpisodes = useAtomValue(sectionEpisodesAtom);
@@ -251,6 +253,7 @@ const MediaPlayer: React.FC<MediaPlayerProps> = ({
   );
 
   const handleVideoEnded = useCallback(() => {
+    if (!shouldAutoNextEpisode) return;
     if (!currentEpisode) return;
 
     const currentEpisodeIndex = sectionEpisodes.findIndex(
@@ -262,7 +265,7 @@ const MediaPlayer: React.FC<MediaPlayerProps> = ({
     if (!nextEpisode) return;
 
     navigation.setParams({ episodeId: nextEpisode.id });
-  }, [currentEpisode, navigation, sectionEpisodes]);
+  }, [currentEpisode, navigation, sectionEpisodes, shouldAutoNextEpisode]);
 
   useEffect(() => {
     if (!videos?.length) return;

src/screens/anime/watch/components/media-settings.tsx

@@ -7,6 +7,7 @@ import { View } from '@/ui';
 import colors from '@/ui/theme/colors';
 
 import { pausedAtom } from '../store';
+import AutoNextSettings from './auto-next-settings';
 import MediaPlayBackSettings from './media-playback-settings';
 import MediaQualitySettings from './media-quality-settings';
 import MediaSubtitleSettings from './media-subtitle-settings';
@@ -35,6 +36,7 @@ const MediaSettings = () => {
         <MediaQualitySettings />
         <MediaPlayBackSettings />
         <MediaSubtitleSettings />
+        <AutoNextSettings />
       </SettingsBottomSheet>
     </View>
   );

src/screens/settings/components/player-settings.tsx

@@ -13,6 +13,7 @@ import Switch from '@/ui/core/switch';
 
 import {
   shouldAskForSyncingAtom,
+  shouldAutoNextEpisodeAtom,
   shouldSyncAdultAtom,
   syncPercentageAtom,
 } from '../store';
@@ -22,6 +23,9 @@ const PlayerSettings = () => {
     shouldAskForSyncingAtom
   );
   const [shouldSyncAdult, setShouldSyncAdult] = useAtom(shouldSyncAdultAtom);
+  const [shouldAutoNextEpisode, setShouldAutoNextEpisode] = useAtom(
+    shouldAutoNextEpisodeAtom
+  );
   const syncPercentage = useAtomValue(syncPercentageAtom);
 
   return (
@@ -56,6 +60,19 @@ const PlayerSettings = () => {
 
           <Switch value={shouldSyncAdult} onValueChange={setShouldSyncAdult} />
         </View>
+        <View className="flex flex-row items-center justify-between">
+          <View className="w-5/6">
+            <Text weight="normal">Should auto next episode</Text>
+            <Text weight="light" className="text-gray-200">
+              Automatically play the next episode once the video ends
+            </Text>
+          </View>
+
+          <Switch
+            value={shouldAutoNextEpisode}
+            onValueChange={setShouldAutoNextEpisode}
+          />
+        </View>
         <View>
           <View className="mb-2 w-full">
             <Text weight="normal">

src/screens/settings/screen.tsx

@@ -1,32 +1,32 @@
 import React from 'react';
 
-import { Text, View } from '@/ui';
+import { ScrollView, Text, View } from '@/ui';
 
 import AccountSettings from './components/account-settings';
 import AppSettings from './components/app-settings';
 import PlayerSettings from './components/player-settings';
 
 const SettingsScreen = () => {
   return (
-    <View className="p-4">
+    <ScrollView className="px-4 pt-4">
       <Text weight="semibold" className="mt-4 text-3xl">
         Settings
       </Text>
 
-      <View className="mt-8 space-y-8">
-        <View>
+      <View className="mt-8 mb-16">
+        <View className="mb-8">
           <AppSettings />
         </View>
 
-        <View>
+        <View className="mb-8">
           <AccountSettings />
         </View>
 
         <View>
           <PlayerSettings />
         </View>
       </View>
-    </View>
+    </ScrollView>
   );
 };
 

src/screens/settings/store.ts

@@ -12,3 +12,8 @@ export const syncPercentageAtom = atomWithMMKV(
   'player_settings__sync-percentage',
   0.75
 );
+
+export const shouldAutoNextEpisodeAtom = atomWithMMKV(
+  'player_settings__should-auto-next-episode',
+  true
+);