feat: add autoplay next

src/modules/storeVariables.ts

@@ -3,6 +3,7 @@ const STORE = new Store();
 
 export const setDefaultStoreVariables = () => {
   if (!STORE.has('update_progress')) STORE.set('update_progress', false);
+  if (!STORE.has('autoplay_next')) STORE.set('autoplay_next', true);
   if (!STORE.has('dubbed')) STORE.set('dubbed', false);
   if (!STORE.has('source_flag')) STORE.set('source_flag', 'US');
   if (!STORE.has('intro_skip_time')) STORE.set('intro_skip_time', 85);

src/renderer/components/player/VideoPlayer.tsx

@@ -376,6 +376,13 @@ const VideoPlayer: React.FC<VideoPlayerProps> = ({
     }, 7500);
   };
 
+  const handleVideoEnd = () => {
+    if ((STORE.get('autoplay_next') as boolean) === true) {
+      canNextEpisode(episodeNumber) &&
+        changeEpisode(episodeNumber + 1);
+    };
+  };
+
   const handleMouseMove = () => {
     clearTimeout(pauseInfoTimer);
     setShowPauseInfo(false);
@@ -580,6 +587,7 @@ const VideoPlayer: React.FC<VideoPlayerProps> = ({
             onKeyDown={handleKeydown}
             onTimeUpdate={handleTimeUpdate}
             onPause={handleVideoPause}
+            onEnded={handleVideoEnd}
             crossOrigin="anonymous"
           ></video>
         </div>

src/renderer/components/player/VideoSettings.tsx

@@ -4,6 +4,7 @@ import {
   faHeadphones,
   faLanguage,
   faRotateRight,
+  faRightLong,
   faSpinner,
   faVideo,
   faVolumeHigh,
@@ -46,6 +47,9 @@ const VideoSettings: React.FC<SettingsProps> = ({
   const [updateProgress, setUpdateProgress] = useState<boolean>(
     STORE.get('update_progress') as boolean,
   );
+  const [autoplayNext, setAutoplayNext] = useState<boolean>(
+    STORE.get('autoplay_next') as boolean,
+  );
   const [watchDubbed, setWatchDubbed] = useState<boolean>(
     STORE.get('dubbed') as boolean,
   );
@@ -135,6 +139,11 @@ const VideoSettings: React.FC<SettingsProps> = ({
     setUpdateProgress(!updateProgress);
   };
 
+  const handleAutoplayNext = () => {
+    STORE.set('autoplay_next', !autoplayNext);
+    setAutoplayNext(!autoplayNext);
+  };
+
   const handleWatchDubbedChange = async () => {
     const previous = STORE.get('dubbed');
     STORE.set('dubbed', !watchDubbed);
@@ -295,6 +304,20 @@ const VideoSettings: React.FC<SettingsProps> = ({
               </label>
             )}
           </li>
+          <li className="autoplay-next">
+            <span>
+              <FontAwesomeIcon className="i" icon={faRightLong} />
+              Autoplay Next
+            </span>
+            <label className="switch">
+              <input
+                type="checkbox"
+                checked={autoplayNext}
+                onChange={handleAutoplayNext}
+              />
+              <span className="slider round"></span>
+            </label>
+          </li>
           <li className="language">
             <span>
               <FontAwesomeIcon className="i" icon={faLanguage} />

src/renderer/tabs/Tab4.tsx

@@ -88,6 +88,9 @@ const Tab4: React.FC = () => {
   const [updateProgress, setUpdateProgress] = useState<boolean>(
     STORE.get('update_progress') as boolean,
   );
+  const [autoplayNext, setAutoplayNext] = useState<boolean>(
+    STORE.get('autoplay_next') as boolean,
+  );
   const [watchDubbed, setWatchDubbed] = useState<boolean>(
     STORE.get('dubbed') as boolean,
   );
@@ -126,6 +129,11 @@ const Tab4: React.FC = () => {
     setShowDuration(!showDuration);
   };
 
+  const handleAutoplayNextChange = () => {
+    STORE.set('autoplay_next', !autoplayNext);
+    setAutoplayNext(!autoplayNext);
+  };
+
   const languageOptions: Option[] = [
     { value: 'US', label: 'English' },
     { value: 'IT', label: 'Italian' },
@@ -160,6 +168,11 @@ const Tab4: React.FC = () => {
             checked={watchDubbed}
             onChange={handleWatchDubbedChange}
           />
+          <CheckboxElement
+            label="Autoplay next episode"
+            checked={autoplayNext}
+            onChange={handleAutoplayNextChange}
+          />
           <SelectElement
             label="Select the language in which you want to watch the episodes"
             value={selectedLanguage}