From 549d19e16f7c1d7551832427274e46dfde3b82c2 Mon Sep 17 00:00:00 2001
From: Cooper Ransom <Cooperransom08@outlook.com>
Date: Wed, 20 Mar 2024 14:55:09 -0400
Subject: [PATCH] Add auto next episode

---
 public/config.js                              |  8 +++
 .../player/atoms/NextEpisodeButton.tsx        | 55 ++++++++++++++-----
 2 files changed, 48 insertions(+), 15 deletions(-)
 create mode 100644 public/config.js

diff --git a/public/config.js b/public/config.js
new file mode 100644
index 00000000..7eb8a8bc
--- /dev/null
+++ b/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",
+};
diff --git a/src/components/player/atoms/NextEpisodeButton.tsx b/src/components/player/atoms/NextEpisodeButton.tsx
index 3d760900..ce608750 100644
--- a/src/components/player/atoms/NextEpisodeButton.tsx
+++ b/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,23 +117,30 @@ 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,
         ])}
       >
-        <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()}
-        >
-          {t("player.nextEpisode.replay")}
-        </Button>
-        <Button
-          onClick={() => loadNextEpisode()}
-          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")}
-        </Button>
+        {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()}
+          >
+            {t("player.nextEpisode.replay")}
+          </Button>
+          <Button
+            onClick={() => loadNextEpisode()}
+            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")}
+          </Button>
+        </div>
       </div>
     </Transition>
   );