mirror of
https://github.com/sussy-code/smov.git
synced 2025-01-01 16:37:39 +01:00
Add auto next episode
This commit is contained in:
parent
e3c38605b5
commit
549d19e16f
2 changed files with 48 additions and 15 deletions
8
public/config.js
Normal file
8
public/config.js
Normal file
|
@ -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",
|
||||||
|
};
|
|
@ -1,5 +1,5 @@
|
||||||
import classNames from "classnames";
|
import classNames from "classnames";
|
||||||
import React, { useCallback } from "react";
|
import React, { useCallback, useEffect, useState } from "react";
|
||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
|
|
||||||
import { Icon, Icons } from "@/components/Icon";
|
import { Icon, Icons } from "@/components/Icon";
|
||||||
|
@ -54,12 +54,30 @@ export function NextEpisodeButton(props: {
|
||||||
const setShouldStartFromBeginning = usePlayerStore(
|
const setShouldStartFromBeginning = usePlayerStore(
|
||||||
(s) => s.setShouldStartFromBeginning,
|
(s) => s.setShouldStartFromBeginning,
|
||||||
);
|
);
|
||||||
|
const [countdown, setCountdown] = useState(15);
|
||||||
|
|
||||||
let show = false;
|
let show = false;
|
||||||
if (showingState === "always") show = true;
|
if (showingState === "always") show = true;
|
||||||
else if (showingState === "hover" && props.controlsShowing) show = true;
|
else if (showingState === "hover" && props.controlsShowing) show = true;
|
||||||
if (isHidden || status !== "playing" || duration === 0) show = false;
|
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";
|
const animation = showingState === "hover" ? "slide-up" : "fade";
|
||||||
let bottom = "bottom-[calc(6rem+env(safe-area-inset-bottom))]";
|
let bottom = "bottom-[calc(6rem+env(safe-area-inset-bottom))]";
|
||||||
if (showingState === "always")
|
if (showingState === "always")
|
||||||
|
@ -99,23 +117,30 @@ export function NextEpisodeButton(props: {
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
className={classNames([
|
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,
|
bottom,
|
||||||
])}
|
])}
|
||||||
>
|
>
|
||||||
<Button
|
{countdown > 0 && show && (
|
||||||
className="py-px box-content bg-buttons-secondary hover:bg-buttons-secondaryHover bg-opacity-90 text-buttons-secondaryText justify-center items-center"
|
<div className="text-white mb-2">
|
||||||
onClick={() => startCurrentEpisodeFromBeginning()}
|
{t("player.nextEpisode.nextIn", { seconds: countdown })}
|
||||||
>
|
</div>
|
||||||
{t("player.nextEpisode.replay")}
|
)}
|
||||||
</Button>
|
<div className="flex items-center space-x-3">
|
||||||
<Button
|
<Button
|
||||||
onClick={() => loadNextEpisode()}
|
className="py-px box-content bg-buttons-secondary hover:bg-buttons-secondaryHover bg-opacity-90 text-buttons-secondaryText justify-center items-center"
|
||||||
className="bg-buttons-primary hover:bg-buttons-primaryHover text-buttons-primaryText flex justify-center items-center"
|
onClick={() => startCurrentEpisodeFromBeginning()}
|
||||||
>
|
>
|
||||||
<Icon className="text-xl mr-1" icon={Icons.SKIP_EPISODE} />
|
{t("player.nextEpisode.replay")}
|
||||||
{t("player.nextEpisode.next")}
|
</Button>
|
||||||
</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>
|
</div>
|
||||||
</Transition>
|
</Transition>
|
||||||
);
|
);
|
||||||
|
|
Loading…
Reference in a new issue