feat(player): add autoplay next episode with countdown overlay

[rogueburger21]

Addresses #16

Description

This PR implements an autoplay feature for TV series. When an episode finishes, a countdown overlay appears, allowing the user to seamlessly transition to the next episode or cancel autoplay.

Changes

• Autoplay Lifecycle: Introduced autoplayCountdown state and refs to track when the video has ended.
• Countdown Trigger: Automatically initiates a 5-second countdown when the video has 1 second or less remaining.
• Overlay UI: Added a blurred overlay over the player with the next episode's title and a countdown timer. Includes "Cancel" and "Play Now" actions.
• Playback: Ensures playback proceeds automatically to the next available, unrestricted episode.

[codeCraft-Ritik]

Great work! The implementation looks clean, and the change feels well-scoped.

[truelockmc]

Looks good so far, but here are some things I would like to have changed:

1. Could you wire it up into the Settings tho? In the Playback category. You should be able to dis-/enable it and change how long the timer is before it plays. (Also add the new storage keys to backup.js then) If the timer is set to 0 it should just show the overlay with buttons and not play automatically.
2. Also please move the newly added auto-play code segments into a new file (src/utils/useAutoplay)
3. I think it would make sense to use the autoplay next together with the already existing Auto-Watched thing. So that once the amount of time remaining is smaller then that treshold it shows the overlay, instead of hardcoding that to 5s.

const [watchedThreshold] = useState(() => storage.get("watchedThreshold") ?? 20);

4. Please add a cancel button to cancel the countdown and continue playing the current episode. You described that in your PR, but i do not see it here.
5. You dont have to do this, but i think it'd be cool if the overlay darkened over the whole player. But the Episode titel and the cover image of that Episode would be shown only in the right or left part of the player (that could also be changed in the settings). Then the "Cancel" and "Play now" button (should be bigger than it is right now) should be shown below that.
6. Track nextEp in a ref that's always current, and read from that inside the interval instead of the closure.

const nextEpRef = useRef(nextEp);
useEffect(() => { nextEpRef.current = nextEp; }, [nextEp]);

// inside the interval callback:
playEpisode(nextEpRef.current);

Because if nextEp changes while the countdown is active (e.g. season data reloads mid-countdown, or a race condition on episode group fetch), the wrong episode plays. This is unlikely but rather safe than sorry ig.

Please tell me what you think of the design idea (5.) and implement the other things : )

tysm

[truelockmc]

@rogueburger21 Hi, are you still going to work on this PR?

If not, I will merge your current changes into a new branch and implement the requests from my review.

[rogueburger21]

Hey @truelockmc — yes, still on it! Sorry for the delay. I've worked through all the points from your review and I'm just doing a final pass before pushing.
Quick rundown:

1. Settings wiring — added an "Autoplay Next Episode" section under Playback: enable/disable toggle + configurable countdown duration. New keys
(autoplayNextEnabled, autoplayNextDuration, autoplayNextLayout) are in storage.js and added to backup.js. Duration 0 now just shows the overlay with the
buttons and doesn't auto-play.
2. Refactor — moved all the autoplay logic into src/utils/useAutoplay.js.
3. Threshold — the overlay now triggers off the existing watchedThreshold instead of the hardcoded 5s.
4. Cancel — added a Cancel button that stops the countdown and keeps the current episode playing.
5. Design (your idea 5.) — went with it: the whole player darkens and the next-episode title + cover still show in a side panel, with a setting to put it on
the left or right and bigger Play Now / Cancel buttons below. Let me know if the layout matches what you had in mind.
6. nextEp ref — nextEp is now tracked in a ref and the interval reads from nextEpRef.current, so the right episode plays even if it changes mid-countdown.

Pushing the commit shortly!

[truelockmc]

Great, tysm.

One thing tho, please make this dropdown shorter.

like this:

And for the future please do not directly use claude as a contributor.

[rogueburger21]

Done

Done

[truelockmc]

Thanks : )