Add auto next episode

public/config.js

@@ -0,0 +1,8 @@
+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/components/player/atoms/NextEpisodeButton.tsx

@@ -1,5 +1,5 @@
 import classNames from "classnames";
-import React, { useCallback } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 
 import { Icon, Icons } from "@/components/Icon";
@@ -54,12 +54,30 @@ export function NextEpisodeButton(props: {
   const setShouldStartFromBeginning = usePlayerStore(
     (s) => s.setShouldStartFromBeginning,
   );
+  const [countdown, setCountdown] = useState(15);
 
   let show = false;
   if (showingState === "always") show = true;
   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")
@@ -99,10 +117,16 @@ export function NextEpisodeButton(props: {
     >
       <div
         className={classNames([
-          "absolute bottom-0 right-0 transition-[bottom] duration-200 flex items-center space-x-3",
+          "absolute bottom-0 right-0 transition-[bottom] duration-200 flex flex-col items-center space-y-3",
           bottom,
         ])}
       >
+        {countdown > 0 && show && (
+          <div className="text-white mb-2">
+            {t("player.nextEpisode.nextIn", { seconds: countdown })}
+          </div>
+        )}
+        <div className="flex items-center space-x-3">
           <Button
             className="py-px box-content bg-buttons-secondary hover:bg-buttons-secondaryHover bg-opacity-90 text-buttons-secondaryText justify-center items-center"
             onClick={() => startCurrentEpisodeFromBeginning()}
@@ -117,6 +141,7 @@ export function NextEpisodeButton(props: {
             {t("player.nextEpisode.next")}
           </Button>
         </div>
+      </div>
     </Transition>
   );
 }