Fix issue with next episode

public/config.js

@@ -1,8 +0,0 @@
-window.CONFIG = {
-  VITE_BACKEND_URL: "https://backend.sudo-flix.lol/",
-  VITE_CORS_PROXY_URL: "https://sudo-proxy1.sudo-flix.lol%2Chttps//sudo-proxy2.sudo-flix.lol,https://sudo-proxy3.sudo-flix.lol,https://sudo-proxy4.sudo-flix.lol,https://sudo-proxy5.sudo-flix.lol",
-  VITE_DMCA_EMAIL: "sudo-flix@proton.me",
-  VITE_GA_ID: "G-3VB2TNCW2V",
-  VITE_NORMAL_ROUTER: true,
-  VITE_TMDB_READ_API_KEY: "eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiJhZTljNGE2ZDE1ZDFiODZiNzdlMWQyYmI5ZGY0MzdmYyIsInN1YiI6IjY1YjNmMWI0NTk0Yzk0MDE2MzNkZDBjNSIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.kAX7TkbKuJkNty6IsjcCLnoENFicVZn6d6DkLQsy3p8",
-};

src/assets/locales/en.json

@@ -395,7 +395,8 @@
     },
     "nextEpisode": {
       "replay": "Replay",
-      "next": "Next episode"
+      "next": "Next episode",
+      "nextIn": "Next episode in {{seconds}}"
     },
     "playbackError": {
       "badge": "Playback error",

src/components/player/atoms/NextEpisodeButton.tsx

@@ -61,23 +61,6 @@ export function NextEpisodeButton(props: {
   else if (showingState === "hover" && props.controlsShowing) show = true;
   if (isHidden || status !== "playing" || duration === 0) show = false;
 
-  useEffect(() => {
-    // Initialize intervalId with 0, which is a safe value to clear if not reassigned.
-    let intervalId: number = 0;
-    if (show && countdown > 0) {
-      intervalId = window.setInterval(() => {
-        setCountdown((currentCountdown) => currentCountdown - 1);
-      }, 1000);
-    } else {
-      window.clearInterval(intervalId); // No need for casting here.
-      if (!show) {
-        setCountdown(15); // Reset countdown when not showing.
-      }
-    }
-    // Cleanup function to clear the interval when the component unmounts or the dependencies change.
-    return () => window.clearInterval(intervalId);
-  }, [show, countdown]);
-
   const animation = showingState === "hover" ? "slide-up" : "fade";
   let bottom = "bottom-[calc(6rem+env(safe-area-inset-bottom))]";
   if (showingState === "always")
@@ -106,6 +89,29 @@ export function NextEpisodeButton(props: {
     props.onChange?.(metaCopy);
   }, [setDirectMeta, meta, props, setShouldStartFromBeginning]);
 
+  useEffect(() => {
+    let intervalId: number = 0;
+    if (show && countdown > 0) {
+      intervalId = window.setInterval(() => {
+        setCountdown((currentCountdown) => {
+          // When countdown reaches 1, load the next episode on the next tick
+          if (currentCountdown === 1) {
+            // Ensure this runs only once by setting countdown to a non-positive number
+            setCountdown(-1);
+            loadNextEpisode();
+          }
+          return currentCountdown - 1;
+        });
+      }, 1000);
+    } else {
+      window.clearInterval(intervalId);
+      if (!show) {
+        setCountdown(15); // Reset countdown when not showing.
+      }
+    }
+    return () => window.clearInterval(intervalId);
+  }, [show, countdown, loadNextEpisode]);
+
   if (!meta?.episode || !nextEp) return null;
   if (metaType !== "show") return null;
 
@@ -138,7 +144,9 @@ export function NextEpisodeButton(props: {
             className="bg-buttons-primary hover:bg-buttons-primaryHover text-buttons-primaryText flex justify-center items-center"
           >
             <Icon className="text-xl mr-1" icon={Icons.SKIP_EPISODE} />
-            {t("player.nextEpisode.next")}
+            {countdown > 0 && show
+              ? `${t("player.nextEpisode.nextIn", { seconds: countdown })}`
+              : t("player.nextEpisode.next")}
           </Button>
         </div>
       </div>