|
|
|
@ -1,7 +1,10 @@
@@ -1,7 +1,10 @@
|
|
|
|
|
import classNames from "classnames"; |
|
|
|
|
import { useCallback } from "react"; |
|
|
|
|
|
|
|
|
|
import { Icon, Icons } from "@/components/Icon"; |
|
|
|
|
import { usePlayerMeta } from "@/components/player/hooks/usePlayerMeta"; |
|
|
|
|
import { Transition } from "@/components/Transition"; |
|
|
|
|
import { PlayerMetaEpisode } from "@/stores/player/slices/source"; |
|
|
|
|
import { usePlayerStore } from "@/stores/player/store"; |
|
|
|
|
|
|
|
|
|
function shouldShowNextEpisodeButton( |
|
|
|
@ -34,10 +37,11 @@ function Button(props: {
@@ -34,10 +37,11 @@ function Button(props: {
|
|
|
|
|
); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// TODO check if has next episode
|
|
|
|
|
export function NextEpisodeButton(props: { controlsShowing: boolean }) { |
|
|
|
|
const duration = usePlayerStore((s) => s.progress.duration); |
|
|
|
|
const isHidden = usePlayerStore((s) => s.interface.hideNextEpisodeBtn); |
|
|
|
|
const meta = usePlayerStore((s) => s.meta); |
|
|
|
|
const { setDirectMeta } = usePlayerMeta(); |
|
|
|
|
const hideNextEpisodeButton = usePlayerStore((s) => s.hideNextEpisodeButton); |
|
|
|
|
const metaType = usePlayerStore((s) => s.meta?.type); |
|
|
|
|
const time = usePlayerStore((s) => s.progress.time); |
|
|
|
@ -54,6 +58,18 @@ export function NextEpisodeButton(props: { controlsShowing: boolean }) {
@@ -54,6 +58,18 @@ export function NextEpisodeButton(props: { controlsShowing: boolean }) {
|
|
|
|
|
if (showingState === "always") |
|
|
|
|
bottom = props.controlsShowing ? "bottom-24" : "bottom-12"; |
|
|
|
|
|
|
|
|
|
const nextEp = meta?.episodes?.find( |
|
|
|
|
(v) => v.number === (meta?.episode?.number ?? 0) + 1 |
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
const loadNextEpisode = useCallback(() => { |
|
|
|
|
if (!meta || !nextEp) return; |
|
|
|
|
const metaCopy = { ...meta }; |
|
|
|
|
metaCopy.episode = nextEp; |
|
|
|
|
setDirectMeta(metaCopy); |
|
|
|
|
}, [setDirectMeta, nextEp, meta]); |
|
|
|
|
|
|
|
|
|
if (!meta?.episode || !nextEp) return null; |
|
|
|
|
if (metaType !== "show") return null; |
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
@ -74,7 +90,10 @@ export function NextEpisodeButton(props: { controlsShowing: boolean }) {
@@ -74,7 +90,10 @@ export function NextEpisodeButton(props: { controlsShowing: boolean }) {
|
|
|
|
|
> |
|
|
|
|
Cancel |
|
|
|
|
</Button> |
|
|
|
|
<Button className="bg-video-buttons-primary hover:bg-video-buttons-primaryHover text-video-buttons-primaryText flex justify-center items-center"> |
|
|
|
|
<Button |
|
|
|
|
onClick={() => loadNextEpisode()} |
|
|
|
|
className="bg-video-buttons-primary hover:bg-video-buttons-primaryHover text-video-buttons-primaryText flex justify-center items-center" |
|
|
|
|
> |
|
|
|
|
<Icon className="text-xl mr-1" icon={Icons.SKIP_EPISODE} /> |
|
|
|
|
Next episode |
|
|
|
|
</Button> |
|
|
|
|