feat(player): wire autoplay-next into settings and refactor into hook

Addresses review feedback on PR truelockmc#57:
- Move autoplay countdown logic into a dedicated src/utils/useAutoplay hook
- Add an "Autoplay Next Episode" section to Settings > Playback: enable/disable
  toggle, configurable countdown duration, and overlay side (left/right). A
  duration of 0 shows the overlay with buttons only and does not auto-advance.
- Persist the new keys (autoplayNextEnabled / autoplayNextDuration /
  autoplayNextLayout) and add them to backup.js
- Trigger the overlay using the existing watchedThreshold instead of a
  hardcoded 5s
- Read nextEp from an always-current ref inside the countdown interval so the
  correct episode plays if season data reloads mid-countdown
- Redesign the overlay: darkened player with a side panel showing the next
  episode's still, title, and larger Cancel / Play Now actions

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: rogueburger21

src/pages/SettingsPage.jsx

@@ -2830,6 +2830,15 @@ export default function SettingsPage({
   const [introSkipMode, setIntroSkipMode] = useState(
     () => storage.get(STORAGE_KEYS.INTRO_SKIP_MODE) || "off",
   );
+  const [autoplayNextEnabled, setAutoplayNextEnabled] = useState(
+    () => storage.get(STORAGE_KEYS.AUTOPLAY_NEXT_ENABLED) ?? true,
+  );
+  const [autoplayNextDuration, setAutoplayNextDuration] = useState(
+    () => storage.get(STORAGE_KEYS.AUTOPLAY_NEXT_DURATION) ?? 5,
+  );
+  const [autoplayNextLayout, setAutoplayNextLayout] = useState(
+    () => storage.get(STORAGE_KEYS.AUTOPLAY_NEXT_LAYOUT) || "right",
+  );
   const [saved, setSaved] = useState(false);
   const [showResetConfirm, setShowResetConfirm] = useState(false);
   const [resetHovered, setResetHovered] = useState(false);
@@ -3400,6 +3409,103 @@ export default function SettingsPage({
             )}
           </div>
 
+          <Divider />
+
+          {/* Autoplay Next Episode */}
+          <div style={{ marginBottom: 40 }}>
+            <div className="settings-section-title">Autoplay Next Episode</div>
+            <div
+              style={{
+                fontSize: 13,
+                color: "var(--text3)",
+                marginBottom: 16,
+                lineHeight: 1.6,
+              }}
+            >
+              Configure how the player behaves when an episode finishes.
+            </div>
+
+            <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
+              {/* Enable/Disable Toggle */}
+              <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
+                <Toggle
+                  value={autoplayNextEnabled}
+                  onChange={(val) => {
+                    setAutoplayNextEnabled(val);
+                    storage.set(STORAGE_KEYS.AUTOPLAY_NEXT_ENABLED, val);
+                    flash();
+                  }}
+                />
+                <div>
+                  <div style={{ fontSize: 14, fontWeight: 500, color: "var(--text)" }}>
+                    Enable Autoplay Next
+                  </div>
+                  <div style={{ fontSize: 12, color: "var(--text3)", marginTop: 2 }}>
+                    Automatically play the next episode when the current one ends.
+                  </div>
+                </div>
+              </div>
+
+              {autoplayNextEnabled && (
+                <>
+                  {/* Duration input */}
+                  <div style={{ display: "flex", flexDirection: "column", gap: 8, marginTop: 8 }}>
+                    <div style={{ fontSize: 13, fontWeight: 600, color: "var(--text2)" }}>
+                      Countdown Duration
+                    </div>
+                    <div style={{ fontSize: 12, color: "var(--text3)", marginBottom: 4 }}>
+                      Number of seconds to display the countdown. Set to 0 to only show the buttons and not autoplay automatically.
+                    </div>
+                    <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
+                      <input
+                        type="number"
+                        min={0}
+                        max={60}
+                        className="apikey-input"
+                        style={{ width: 90, marginBottom: 0 }}
+                        value={autoplayNextDuration}
+                        onChange={(e) => setAutoplayNextDuration(e.target.value)}
+                        onBlur={() => {
+                          const num = Math.max(0, Math.min(60, parseInt(autoplayNextDuration, 10) || 0));
+                          setAutoplayNextDuration(num);
+                          storage.set(STORAGE_KEYS.AUTOPLAY_NEXT_DURATION, num);
+                          flash();
+                        }}
+                      />
+                      <span style={{ fontSize: 14, color: "var(--text2)" }}>
+                        seconds
+                      </span>
+                    </div>
+                  </div>
+
+                  {/* Overlay Layout selection */}
+                  <div style={{ display: "flex", flexDirection: "column", gap: 8, marginTop: 8 }}>
+                    <div style={{ fontSize: 13, fontWeight: 600, color: "var(--text2)" }}>
+                      Overlay Position
+                    </div>
+                    <div style={{ fontSize: 12, color: "var(--text3)", marginBottom: 4 }}>
+                      Choose which side of the player the next episode thumbnail and details are shown.
+                    </div>
+                    <SettingsSelect
+                      value={autoplayNextLayout}
+                      onChange={(val) => {
+                        setAutoplayNextLayout(val);
+                        storage.set(STORAGE_KEYS.AUTOPLAY_NEXT_LAYOUT, val);
+                        flash();
+                      }}
+                      options={[
+                        { value: "left", label: "Left Side" },
+                        { value: "right", label: "Right Side" },
+                      ]}
+                    />
+                  </div>
+                </>
+              )}
+            </div>
+          </div>
+
+          <Divider />
+
           {/* Intro Skip */}
           <div style={{ marginBottom: 40 }}>
             <div className="settings-section-title">Anime Intro Skip</div>

src/pages/TVPage.jsx

@@ -50,6 +50,7 @@ import TrailerModal from "../components/TrailerModal";
 import BlockedStatsModal from "../components/BlockedStatsModal";
 import { useBlockedStats } from "../utils/useBlockedStats";
 import { storage, STORAGE_KEYS } from "../utils/storage";
+import { useAutoplay } from "../utils/useAutoplay";
 import { fetchAniSkipTimings } from "../utils/aniSkip";
 import {
   fetchTVRating,
@@ -455,10 +456,10 @@ export default function TVPage({
   const restricted = isRestricted(rating.minAge, ageLimitSetting);
   const [seasonMenu, setSeasonMenu] = useState(null); // { x, y, seasonNum }
 
-  const [autoplayCountdown, setAutoplayCountdown] = useState(null);
-  const countdownIntervalRef = useRef(null);
-  const countdownStartedRef = useRef(false);
-  const startAutoplayRef = useRef(() => {});
+  const resetAutoplayRef = useRef(() => {});
+  const triggerAutoplayRef = useRef(() => {});
+  const setCountdownStartedRef = useRef(() => {});
+  const localCountdownStartedRef = useRef(false);
 
   // Read threshold from settings (default 20s), stable across renders
   const [watchedThreshold] = useState(
@@ -1007,18 +1008,14 @@ export default function TVPage({
       ) ?? null)
     : null;
 
-  // Reset auto-mark guard when episode changes
+  // Reset auto-mark guard and autoplay when episode changes
   useEffect(() => {
     autoMarkedRef.current = false;
     lastKnownTimeRef.current = 0;
     seekBackCooldownRef.current = 0;
     durationRef.current = 0;
-    setAutoplayCountdown(null);
-    countdownStartedRef.current = false;
-    if (countdownIntervalRef.current) {
-      clearInterval(countdownIntervalRef.current);
-      countdownIntervalRef.current = null;
-    }
+    localCountdownStartedRef.current = false;
+    resetAutoplayRef.current?.();
   }, [currentProgressKey]);
 
   // Show loader instantly when playback starts
@@ -1285,9 +1282,10 @@ export default function TVPage({
             }
 
             // Autoplay trigger
-            if (remaining <= 5 && !countdownStartedRef.current) {
-              countdownStartedRef.current = true;
-              startAutoplayRef.current?.();
+            if (remaining <= watchedThreshold && !localCountdownStartedRef.current) {
+              localCountdownStartedRef.current = true;
+              setCountdownStartedRef.current?.(true);
+              triggerAutoplayRef.current?.();
             }
           }
         } catch {}
@@ -1381,26 +1379,28 @@ export default function TVPage({
     return null;
   }, [selectedEp, currentSeasonEpisodes]);
 
+  const {
+    autoplayCountdown,
+    countdownStarted,
+    setCountdownStarted,
+    triggerAutoplay,
+    cancelAutoplay,
+    playNow,
+    resetAutoplay,
+  } = useAutoplay({ nextEp, playEpisode, restricted });
+
   useEffect(() => {
-    startAutoplayRef.current = () => {
-      if (!nextEp) return;
-      const epUnreleased = nextEp.air_date ? new Date(nextEp.air_date) > _todayForEpisodes : false;
-      if (restricted || epUnreleased) return;
-
-      setAutoplayCountdown(5);
-      countdownIntervalRef.current = setInterval(() => {
-        setAutoplayCountdown((prev) => {
-          if (prev <= 1) {
-            clearInterval(countdownIntervalRef.current);
-            countdownIntervalRef.current = null;
-            playEpisode(nextEp);
-            return null;
-          }
-          return prev - 1;
-        });
-      }, 1000);
-    };
-  }, [nextEp, restricted, playEpisode]);
+    resetAutoplayRef.current = resetAutoplay;
+    triggerAutoplayRef.current = triggerAutoplay;
+    setCountdownStartedRef.current = setCountdownStarted;
+  }, [resetAutoplay, triggerAutoplay, setCountdownStarted]);
+
+  useEffect(() => {
+    localCountdownStartedRef.current = countdownStarted;
+  }, [countdownStarted]);
+
+  const autoplayNextLayout =
+    storage.get(STORAGE_KEYS.AUTOPLAY_NEXT_LAYOUT) || "right";
 
   const handleSetDownloaderFolder = useCallback((folder) => {
     setDownloaderFolder(folder);
@@ -1719,42 +1719,134 @@ export default function TVPage({
                       inset: 0,
                       zIndex: 30,
                       display: "flex",
-                      flexDirection: "column",
-                      alignItems: "center",
-                      justifyContent: "center",
-                      background: "rgba(0,0,0,0.85)",
-                      gap: 16,
+                      justifyContent: autoplayNextLayout === "left" ? "flex-start" : "flex-end",
+                      background: "rgba(0,0,0,0.88)",
                       borderRadius: "inherit",
-                      backdropFilter: "blur(4px)",
+                      backdropFilter: "blur(6px)",
+                      animation: "fadeIn 0.4s ease",
                     }}
                   >
-                    <span style={{ fontSize: 24, fontWeight: "bold", color: "white" }}>
-                      Up Next: {nextEp?.name}
-                    </span>
-                    <span style={{ fontSize: 16, color: "var(--text2)" }}>
-                      Starting in {autoplayCountdown}...
-                    </span>
-                    <div style={{ display: "flex", gap: 12, marginTop: 12 }}>
-                      <button 
-                        className="player-overlay-btn" 
-                        onClick={() => {
-                          if (countdownIntervalRef.current) clearInterval(countdownIntervalRef.current);
-                          setAutoplayCountdown(null);
+                    <div
+                      style={{
+                        width: "40%",
+                        minWidth: "320px",
+                        maxWidth: "480px",
+                        height: "100%",
+                        background: autoplayNextLayout === "left"
+                          ? "linear-gradient(90deg, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.85) 60%, rgba(0,0,0,0) 100%)"
+                          : "linear-gradient(270deg, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.85) 60%, rgba(0,0,0,0) 100%)",
+                        display: "flex",
+                        flexDirection: "column",
+                        justifyContent: "center",
+                        padding: "40px",
+                        boxSizing: "border-box",
+                        textAlign: "left",
+                      }}
+                    >
+                      <div
+                        style={{
+                          fontSize: "11px",
+                          fontWeight: "700",
+                          letterSpacing: "1.5px",
+                          textTransform: "uppercase",
+                          color: "var(--red)",
+                          marginBottom: "8px",
                         }}
                       >
-                        Cancel
-                      </button>
-                      <button 
-                        className="player-overlay-btn" 
-                        style={{ background: "var(--red)", color: "white", borderColor: "var(--red)" }}
-                        onClick={() => {
-                          if (countdownIntervalRef.current) clearInterval(countdownIntervalRef.current);
-                          setAutoplayCountdown(null);
-                          playEpisode(nextEp);
+                        Up Next
+                      </div>
+
+                      {/* Cover Still */}
+                      <div
+                        style={{
+                          width: "100%",
+                          aspectRatio: "16/9",
+                          borderRadius: "8px",
+                          overflow: "hidden",
+                          border: "1px solid rgba(255,255,255,0.1)",
+                          marginBottom: "18px",
+                          boxShadow: "0 8px 24px rgba(0,0,0,0.6)",
+                          background: "var(--surface3)",
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "center",
                         }}
                       >
-                        <PlayIcon /> Play Now
-                      </button>
+                        {nextEp?.still_path ? (
+                          <img
+                            src={imgUrl(nextEp.still_path, "w300")}
+                            alt={nextEp?.name}
+                            style={{ width: "100%", height: "100%", objectFit: "cover" }}
+                          />
+                        ) : (
+                          <span
+                            style={{
+                              display: "inline-flex",
+                              width: 32,
+                              height: 32,
+                              color: "var(--text3)",
+                            }}
+                          >
+                            <PlayIcon />
+                          </span>
+                        )}
+                      </div>
+
+                      {/* Episode Meta */}
+                      <div style={{ fontSize: "13px", fontWeight: "600", color: "var(--text2)", marginBottom: "4px" }}>
+                        Season {selectedSeason} · Episode {nextEp?.episode_number}
+                      </div>
+                      <div
+                        style={{
+                          fontSize: "20px",
+                          fontWeight: "700",
+                          color: "white",
+                          marginBottom: "8px",
+                          lineHeight: "1.3",
+                          wordBreak: "break-word",
+                        }}
+                      >
+                        {nextEp?.name}
+                      </div>
+
+                      {/* Countdown */}
+                      {autoplayCountdown > 0 ? (
+                        <div style={{ fontSize: "14px", color: "var(--text3)", marginBottom: "20px" }}>
+                          Starting in <span style={{ color: "white", fontWeight: "600" }}>{autoplayCountdown}</span>s...
+                        </div>
+                      ) : (
+                        <div style={{ height: "20px", marginBottom: "20px" }} />
+                      )}
+
+                      {/* Buttons */}
+                      <div style={{ display: "flex", gap: "12px", marginTop: "4px" }}>
+                        <button
+                          className="btn btn-primary"
+                          style={{
+                            padding: "10px 22px",
+                            fontSize: "14px",
+                            fontWeight: "600",
+                            background: "var(--red)",
+                            borderColor: "var(--red)",
+                            boxShadow: "var(--red-glow)",
+                          }}
+                          onClick={playNow}
+                        >
+                          Play Now
+                        </button>
+                        <button
+                          className="btn btn-ghost"
+                          style={{
+                            padding: "10px 22px",
+                            fontSize: "14px",
+                            fontWeight: "600",
+                            background: "rgba(255,255,255,0.05)",
+                          }}
+                          onClick={cancelAutoplay}
+                        >
+                          Cancel
+                        </button>
+                      </div>
                     </div>
                   </div>
                 )}