mirror of
https://github.com/movie-web/movie-web.git
synced 2024-12-24 18:51:53 +01:00
remove old
This commit is contained in:
Jelle van Snik
parent
f97b84516b
commit
f14606e579
@ -1,184 +0,0 @@
|
||||
import { DetailedMeta } from "@/backend/metadata/getmeta";
|
||||
import { useIsMobile } from "@/hooks/useIsMobile";
|
||||
import { useCallback, useRef, useState } from "react";
|
||||
import { CSSTransition } from "react-transition-group";
|
||||
import { AirplayControl } from "./controls/AirplayControl";
|
||||
import { BackdropControl } from "./controls/BackdropControl";
|
||||
import { ChromeCastControl } from "./controls/ChromeCastControl";
|
||||
import { FullscreenControl } from "./controls/FullscreenControl";
|
||||
import { LoadingControl } from "./controls/LoadingControl";
|
||||
import { MiddlePauseControl } from "./controls/MiddlePauseControl";
|
||||
import { MobileCenterControl } from "./controls/MobileCenterControl";
|
||||
import { PageTitleControl } from "./controls/PageTitleControl";
|
||||
import { PauseControl } from "./controls/PauseControl";
|
||||
import { ProgressControl } from "./controls/ProgressControl";
|
||||
import { QualityDisplayControl } from "./controls/QualityDisplayControl";
|
||||
import { SeriesSelectionControl } from "./controls/SeriesSelectionControl";
|
||||
import { ShowTitleControl } from "./controls/ShowTitleControl";
|
||||
import { SkipTime } from "./controls/SkipTime";
|
||||
import { SourceSelectionControl } from "./controls/SourceSelectionControl";
|
||||
import { TimeControl } from "./controls/TimeControl";
|
||||
import { VolumeControl } from "./controls/VolumeControl";
|
||||
import { VideoPlayerError } from "./parts/VideoPlayerError";
|
||||
import { VideoPlayerHeader } from "./parts/VideoPlayerHeader";
|
||||
import { useVideoPlayerState } from "./VideoContext";
|
||||
import { VideoPlayer, VideoPlayerProps } from "./VideoPlayer";
|
||||
|
||||
interface DecoratedVideoPlayerProps {
|
||||
media?: DetailedMeta;
|
||||
onGoBack?: () => void;
|
||||
}
|
||||
|
||||
function LeftSideControls() {
|
||||
const { videoState } = useVideoPlayerState();
|
||||
|
||||
const handleMouseEnter = useCallback(() => {
|
||||
videoState.setLeftControlsHover(true);
|
||||
}, [videoState]);
|
||||
const handleMouseLeave = useCallback(() => {
|
||||
videoState.setLeftControlsHover(false);
|
||||
}, [videoState]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className="flex items-center px-2"
|
||||
onMouseLeave={handleMouseLeave}
|
||||
onMouseEnter={handleMouseEnter}
|
||||
>
|
||||
<PauseControl />
|
||||
<TimeControl />
|
||||
<VolumeControl className="mr-2" />
|
||||
<SkipTime />
|
||||
</div>
|
||||
<ShowTitleControl />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export function DecoratedVideoPlayer(
|
||||
props: VideoPlayerProps & DecoratedVideoPlayerProps
|
||||
) {
|
||||
const top = useRef<HTMLDivElement>(null);
|
||||
const center = useRef<HTMLDivElement>(null);
|
||||
const bottom = useRef<HTMLDivElement>(null);
|
||||
const [show, setShow] = useState(false);
|
||||
const { isMobile } = useIsMobile();
|
||||
|
||||
const onBackdropChange = useCallback(
|
||||
(showing: boolean) => {
|
||||
setShow(showing);
|
||||
},
|
||||
[setShow]
|
||||
);
|
||||
|
||||
return (
|
||||
<VideoPlayer autoPlay={props.autoPlay}>
|
||||
<PageTitleControl media={props.media?.meta} />
|
||||
<VideoPlayerError media={props.media?.meta} onGoBack={props.onGoBack}>
|
||||
<BackdropControl onBackdropChange={onBackdropChange}>
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<LoadingControl />
|
||||
</div>
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<MiddlePauseControl />
|
||||
</div>
|
||||
{isMobile ? (
|
||||
<CSSTransition
|
||||
nodeRef={center}
|
||||
in={show}
|
||||
timeout={200}
|
||||
classNames={{
|
||||
exit: "transition-[transform,opacity] duration-200 opacity-100",
|
||||
exitActive: "!opacity-0",
|
||||
exitDone: "hidden",
|
||||
enter: "transition-[transform,opacity] duration-200 opacity-0",
|
||||
enterActive: "!opacity-100",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
ref={center}
|
||||
className="absolute inset-0 flex items-center justify-center"
|
||||
>
|
||||
<MobileCenterControl />
|
||||
</div>
|
||||
</CSSTransition>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
<CSSTransition
|
||||
nodeRef={top}
|
||||
in={show}
|
||||
timeout={200}
|
||||
classNames={{
|
||||
exit: "transition-[transform,opacity] translate-y-0 duration-200 opacity-100",
|
||||
exitActive: "!-translate-y-4 !opacity-0",
|
||||
exitDone: "hidden",
|
||||
enter:
|
||||
"transition-[transform,opacity] -translate-y-4 duration-200 opacity-0",
|
||||
enterActive: "!translate-y-0 !opacity-100",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
ref={top}
|
||||
className="pointer-events-auto absolute inset-x-0 top-0 flex flex-col py-6 px-8 pb-2"
|
||||
>
|
||||
<VideoPlayerHeader
|
||||
media={props.media?.meta}
|
||||
onClick={props.onGoBack}
|
||||
isMobile={isMobile}
|
||||
/>
|
||||
</div>
|
||||
</CSSTransition>
|
||||
<CSSTransition
|
||||
nodeRef={bottom}
|
||||
in={show}
|
||||
timeout={200}
|
||||
classNames={{
|
||||
exit: "transition-[transform,opacity] translate-y-0 duration-200 opacity-100",
|
||||
exitActive: "!translate-y-4 !opacity-0",
|
||||
exitDone: "hidden",
|
||||
enter:
|
||||
"transition-[transform,opacity] translate-y-4 duration-200 opacity-0",
|
||||
enterActive: "!translate-y-0 !opacity-100",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
ref={bottom}
|
||||
className="pointer-events-auto absolute inset-x-0 bottom-0 flex flex-col px-4 pb-2 [margin-bottom:env(safe-area-inset-bottom)]"
|
||||
>
|
||||
<div className="flex w-full items-center space-x-3">
|
||||
{isMobile && <SkipTime noDuration />}
|
||||
<ProgressControl />
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
{isMobile ? (
|
||||
<div className="grid w-full grid-cols-[56px,1fr,56px] items-center">
|
||||
<div />
|
||||
<div className="flex items-center justify-center">
|
||||
<SeriesSelectionControl />
|
||||
<SourceSelectionControl media={props.media} />
|
||||
</div>
|
||||
<FullscreenControl />
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<LeftSideControls />
|
||||
<div className="flex-1" />
|
||||
<QualityDisplayControl />
|
||||
<SeriesSelectionControl />
|
||||
<SourceSelectionControl media={props.media} />
|
||||
<AirplayControl />
|
||||
<ChromeCastControl />
|
||||
<FullscreenControl />
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</CSSTransition>
|
||||
</BackdropControl>
|
||||
{props.children}
|
||||
</VideoPlayerError>
|
||||
</VideoPlayer>
|
||||
);
|
||||
}
|
||||
@ -1,98 +0,0 @@
|
||||
import { MWStreamQuality, MWStreamType } from "@/backend/helpers/streams";
|
||||
import React, {
|
||||
createContext,
|
||||
MutableRefObject,
|
||||
useContext,
|
||||
useEffect,
|
||||
useReducer,
|
||||
} from "react";
|
||||
import {
|
||||
initialPlayerState,
|
||||
PlayerContext,
|
||||
useVideoPlayer,
|
||||
} from "./hooks/useVideoPlayer";
|
||||
|
||||
interface VideoPlayerContextType {
|
||||
source: string | null;
|
||||
sourceType: MWStreamType;
|
||||
quality: MWStreamQuality;
|
||||
state: PlayerContext;
|
||||
}
|
||||
const initial: VideoPlayerContextType = {
|
||||
source: null,
|
||||
sourceType: MWStreamType.MP4,
|
||||
quality: MWStreamQuality.QUNKNOWN,
|
||||
state: initialPlayerState,
|
||||
};
|
||||
|
||||
type VideoPlayerContextAction =
|
||||
| {
|
||||
type: "SET_SOURCE";
|
||||
url: string;
|
||||
sourceType: MWStreamType;
|
||||
quality: MWStreamQuality;
|
||||
}
|
||||
| {
|
||||
type: "UPDATE_PLAYER";
|
||||
state: PlayerContext;
|
||||
};
|
||||
|
||||
function videoPlayerContextReducer(
|
||||
original: VideoPlayerContextType,
|
||||
action: VideoPlayerContextAction
|
||||
): VideoPlayerContextType {
|
||||
const video = { ...original };
|
||||
if (action.type === "SET_SOURCE") {
|
||||
video.source = action.url;
|
||||
video.sourceType = action.sourceType;
|
||||
video.quality = action.quality;
|
||||
return video;
|
||||
}
|
||||
if (action.type === "UPDATE_PLAYER") {
|
||||
video.state = action.state;
|
||||
return video;
|
||||
}
|
||||
|
||||
return original;
|
||||
}
|
||||
|
||||
export const VideoPlayerContext =
|
||||
createContext<VideoPlayerContextType>(initial);
|
||||
export const VideoPlayerDispatchContext = createContext<
|
||||
React.Dispatch<VideoPlayerContextAction>
|
||||
>(null as any);
|
||||
|
||||
export function VideoPlayerContextProvider(props: {
|
||||
children: React.ReactNode;
|
||||
player: MutableRefObject<HTMLVideoElement | null>;
|
||||
wrapper: MutableRefObject<HTMLDivElement | null>;
|
||||
}) {
|
||||
const { playerState } = useVideoPlayer(props.player, props.wrapper);
|
||||
const [videoData, dispatch] = useReducer<typeof videoPlayerContextReducer>(
|
||||
videoPlayerContextReducer,
|
||||
initial
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
dispatch({
|
||||
type: "UPDATE_PLAYER",
|
||||
state: playerState,
|
||||
});
|
||||
}, [playerState]);
|
||||
|
||||
return (
|
||||
<VideoPlayerContext.Provider value={videoData}>
|
||||
<VideoPlayerDispatchContext.Provider value={dispatch}>
|
||||
{props.children}
|
||||
</VideoPlayerDispatchContext.Provider>
|
||||
</VideoPlayerContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
export function useVideoPlayerState() {
|
||||
const { state } = useContext(VideoPlayerContext);
|
||||
|
||||
return {
|
||||
videoState: state,
|
||||
};
|
||||
}
|
||||
@ -1,69 +0,0 @@
|
||||
import { useGoBack } from "@/hooks/useGoBack";
|
||||
import { useVolumeControl } from "@/hooks/useVolumeToggle";
|
||||
import { forwardRef, useContext, useEffect, useRef } from "react";
|
||||
import { VideoErrorBoundary } from "./parts/VideoErrorBoundary";
|
||||
import {
|
||||
useVideoPlayerState,
|
||||
VideoPlayerContext,
|
||||
VideoPlayerContextProvider,
|
||||
} from "./VideoContext";
|
||||
|
||||
export interface VideoPlayerProps {
|
||||
autoPlay?: boolean;
|
||||
children?: React.ReactNode;
|
||||
}
|
||||
|
||||
const VideoPlayerInternals = forwardRef<
|
||||
HTMLVideoElement,
|
||||
{ autoPlay: boolean }
|
||||
>((props, ref) => {
|
||||
const video = useContext(VideoPlayerContext);
|
||||
const didInitialize = useRef<{ source: string | null } | null>(null);
|
||||
const { videoState } = useVideoPlayerState();
|
||||
const { toggleVolume } = useVolumeControl();
|
||||
|
||||
useEffect(() => {
|
||||
const value = { source: video.source };
|
||||
const hasChanged = value.source !== didInitialize.current?.source;
|
||||
if (!hasChanged) return;
|
||||
if (!video.state.hasInitialized || !video.source) return;
|
||||
video.state.initPlayer(video.source, video.sourceType);
|
||||
didInitialize.current = value;
|
||||
}, [didInitialize, video]);
|
||||
|
||||
// muted attribute is required for safari, as they cant change the volume itself
|
||||
return (
|
||||
<video
|
||||
ref={ref}
|
||||
autoPlay={props.autoPlay}
|
||||
muted={video.state.volume === 0}
|
||||
playsInline
|
||||
className="h-full w-full"
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
||||
export function VideoPlayer(props: VideoPlayerProps) {
|
||||
const playerRef = useRef<HTMLVideoElement | null>(null);
|
||||
const playerWrapperRef = useRef<HTMLDivElement | null>(null);
|
||||
const goBack = useGoBack();
|
||||
|
||||
// TODO move error boundary to only decorated, <VideoPlayer /> shouldn't have styling
|
||||
|
||||
return (
|
||||
<VideoPlayerContextProvider player={playerRef} wrapper={playerWrapperRef}>
|
||||
<div
|
||||
className="is-video-player relative h-full w-full select-none overflow-hidden bg-black [border-left:env(safe-area-inset-left)_solid_transparent] [border-right:env(safe-area-inset-right)_solid_transparent]"
|
||||
ref={playerWrapperRef}
|
||||
>
|
||||
<VideoErrorBoundary onGoBack={goBack}>
|
||||
<VideoPlayerInternals
|
||||
autoPlay={props.autoPlay ?? false}
|
||||
ref={playerRef}
|
||||
/>
|
||||
<div className="absolute inset-0">{props.children}</div>
|
||||
</VideoErrorBoundary>
|
||||
</div>
|
||||
</VideoPlayerContextProvider>
|
||||
);
|
||||
}
|
||||
@ -1,26 +0,0 @@
|
||||
import { Icons } from "@/components/Icon";
|
||||
import { useCallback } from "react";
|
||||
import { VideoPlayerIconButton } from "../parts/VideoPlayerIconButton";
|
||||
import { useVideoPlayerState } from "../VideoContext";
|
||||
|
||||
interface Props {
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function AirplayControl(props: Props) {
|
||||
const { videoState } = useVideoPlayerState();
|
||||
|
||||
const handleClick = useCallback(() => {
|
||||
videoState.startAirplay();
|
||||
}, [videoState]);
|
||||
|
||||
if (!videoState.canAirplay) return null;
|
||||
|
||||
return (
|
||||
<VideoPlayerIconButton
|
||||
className={props.className}
|
||||
onClick={handleClick}
|
||||
icon={Icons.AIRPLAY}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@ -1,89 +0,0 @@
|
||||
import React, { useCallback, useEffect, useRef, useState } from "react";
|
||||
import { useVideoPlayerState } from "../VideoContext";
|
||||
|
||||
interface BackdropControlProps {
|
||||
children?: React.ReactNode;
|
||||
onBackdropChange?: (showing: boolean) => void;
|
||||
}
|
||||
|
||||
export function BackdropControl(props: BackdropControlProps) {
|
||||
const { videoState } = useVideoPlayerState();
|
||||
const [moved, setMoved] = useState(false);
|
||||
const timeout = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||
const clickareaRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const handleMouseMove = useCallback(() => {
|
||||
if (!moved) setMoved(true);
|
||||
if (timeout.current) clearTimeout(timeout.current);
|
||||
timeout.current = setTimeout(() => {
|
||||
if (moved) setMoved(false);
|
||||
timeout.current = null;
|
||||
}, 3000);
|
||||
}, [setMoved, moved]);
|
||||
|
||||
const handleMouseLeave = useCallback(() => {
|
||||
setMoved(false);
|
||||
}, [setMoved]);
|
||||
|
||||
const handleClick = useCallback(
|
||||
(e: React.MouseEvent<HTMLDivElement>) => {
|
||||
if (!clickareaRef.current || clickareaRef.current !== e.target) return;
|
||||
|
||||
if (videoState.popout !== null) return;
|
||||
|
||||
if (videoState.isPlaying) videoState.pause();
|
||||
else videoState.play();
|
||||
},
|
||||
[videoState, clickareaRef]
|
||||
);
|
||||
const handleDoubleClick = useCallback(
|
||||
(e: React.MouseEvent<HTMLDivElement>) => {
|
||||
if (!clickareaRef.current || clickareaRef.current !== e.target) return;
|
||||
|
||||
if (!videoState.isFullscreen) videoState.enterFullscreen();
|
||||
else videoState.exitFullscreen();
|
||||
},
|
||||
[videoState, clickareaRef]
|
||||
);
|
||||
|
||||
const lastBackdropValue = useRef<boolean | null>(null);
|
||||
useEffect(() => {
|
||||
const currentValue = moved || videoState.isPaused;
|
||||
if (currentValue !== lastBackdropValue.current) {
|
||||
lastBackdropValue.current = currentValue;
|
||||
if (!currentValue) videoState.closePopout();
|
||||
props.onBackdropChange?.(currentValue);
|
||||
}
|
||||
}, [videoState, moved, props]);
|
||||
const showUI = moved || videoState.isPaused;
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`absolute inset-0 ${!showUI ? "cursor-none" : ""}`}
|
||||
onMouseMove={handleMouseMove}
|
||||
onMouseLeave={handleMouseLeave}
|
||||
ref={clickareaRef}
|
||||
onClick={handleClick}
|
||||
onDoubleClick={handleDoubleClick}
|
||||
>
|
||||
<div
|
||||
className={`pointer-events-none absolute inset-0 bg-black bg-opacity-20 transition-opacity duration-200 ${
|
||||
!showUI ? "!opacity-0" : ""
|
||||
}`}
|
||||
/>
|
||||
<div
|
||||
className={`pointer-events-none absolute inset-x-0 bottom-0 h-[20%] bg-gradient-to-t from-black to-transparent transition-opacity duration-200 ${
|
||||
!showUI ? "!opacity-0" : ""
|
||||
}`}
|
||||
/>
|
||||
<div
|
||||
className={`pointer-events-none absolute inset-x-0 top-0 h-[20%] bg-gradient-to-b from-black to-transparent transition-opacity duration-200 ${
|
||||
!showUI ? "!opacity-0" : ""
|
||||
}`}
|
||||
/>
|
||||
<div className="pointer-events-none absolute inset-0">
|
||||
{props.children}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,15 +0,0 @@
|
||||
declare global {
|
||||
// eslint-disable-next-line @typescript-eslint/no-namespace
|
||||
namespace JSX {
|
||||
interface IntrinsicElements {
|
||||
"google-cast-launcher": React.DetailedHTMLProps<
|
||||
React.HTMLAttributes<HTMLElement>,
|
||||
HTMLElement
|
||||
>;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export function ChromeCastControl() {
|
||||
return <google-cast-launcher />;
|
||||
}
|
||||
@ -1,28 +0,0 @@
|
||||
import { Icons } from "@/components/Icon";
|
||||
import { canFullscreen } from "@/utils/detectFeatures";
|
||||
import { useCallback } from "react";
|
||||
import { VideoPlayerIconButton } from "../parts/VideoPlayerIconButton";
|
||||
import { useVideoPlayerState } from "../VideoContext";
|
||||
|
||||
interface Props {
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function FullscreenControl(props: Props) {
|
||||
const { videoState } = useVideoPlayerState();
|
||||
|
||||
const handleClick = useCallback(() => {
|
||||
if (videoState.isFullscreen) videoState.exitFullscreen();
|
||||
else videoState.enterFullscreen();
|
||||
}, [videoState]);
|
||||
|
||||
if (!canFullscreen()) return null;
|
||||
|
||||
return (
|
||||
<VideoPlayerIconButton
|
||||
className={props.className}
|
||||
onClick={handleClick}
|
||||
icon={videoState.isFullscreen ? Icons.COMPRESS : Icons.EXPAND}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@ -1,12 +0,0 @@
|
||||
import { Spinner } from "@/components/layout/Spinner";
|
||||
import { useVideoPlayerState } from "../VideoContext";
|
||||
|
||||
export function LoadingControl() {
|
||||
const { videoState } = useVideoPlayerState();
|
||||
|
||||
const isLoading = videoState.isFirstLoading || videoState.isLoading;
|
||||
|
||||
if (!isLoading) return null;
|
||||
|
||||
return <Spinner />;
|
||||
}
|
||||
@ -1,28 +0,0 @@
|
||||
import { Icon, Icons } from "@/components/Icon";
|
||||
import { useCallback } from "react";
|
||||
import { useVideoPlayerState } from "../VideoContext";
|
||||
|
||||
export function MiddlePauseControl() {
|
||||
const { videoState } = useVideoPlayerState();
|
||||
|
||||
const handleClick = useCallback(() => {
|
||||
if (videoState?.isPlaying) videoState.pause();
|
||||
else videoState.play();
|
||||
}, [videoState]);
|
||||
|
||||
if (videoState.hasPlayedOnce) return null;
|
||||
if (videoState.isPlaying) return null;
|
||||
if (videoState.isFirstLoading) return null;
|
||||
|
||||
return (
|
||||
<div
|
||||
onClick={handleClick}
|
||||
className="group pointer-events-auto flex h-16 w-16 items-center justify-center rounded-full bg-denim-400 text-white transition-[background-color,transform] hover:scale-125 hover:bg-denim-500 active:scale-100"
|
||||
>
|
||||
<Icon
|
||||
icon={Icons.PLAY}
|
||||
className="text-2xl transition-transform group-hover:scale-125"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,20 +0,0 @@
|
||||
import { useVideoPlayerState } from "../VideoContext";
|
||||
import { PauseControl } from "./PauseControl";
|
||||
import { SkipTimeBackward, SkipTimeForward } from "./TimeControl";
|
||||
|
||||
export function MobileCenterControl() {
|
||||
const { videoState } = useVideoPlayerState();
|
||||
|
||||
const isLoading = videoState.isFirstLoading || videoState.isLoading;
|
||||
|
||||
return (
|
||||
<div className="flex items-center space-x-8">
|
||||
<SkipTimeBackward />
|
||||
<PauseControl
|
||||
iconSize="text-5xl"
|
||||
className={isLoading ? "pointer-events-none opacity-0" : ""}
|
||||
/>
|
||||
<SkipTimeForward />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,23 +0,0 @@
|
||||
import { MWMediaMeta } from "@/backend/metadata/types";
|
||||
import { Helmet } from "react-helmet";
|
||||
import { useCurrentSeriesEpisodeInfo } from "../hooks/useCurrentSeriesEpisodeInfo";
|
||||
|
||||
interface PageTitleControlProps {
|
||||
media?: MWMediaMeta;
|
||||
}
|
||||
|
||||
export function PageTitleControl(props: PageTitleControlProps) {
|
||||
const { isSeries, humanizedEpisodeId } = useCurrentSeriesEpisodeInfo();
|
||||
|
||||
if (!props.media) return null;
|
||||
|
||||
const title = isSeries
|
||||
? `${props.media.title} - ${humanizedEpisodeId}`
|
||||
: props.media.title;
|
||||
|
||||
return (
|
||||
<Helmet>
|
||||
<title>{title}</title>
|
||||
</Helmet>
|
||||
);
|
||||
}
|
||||
@ -1,30 +0,0 @@
|
||||
import { Icons } from "@/components/Icon";
|
||||
import { useCallback } from "react";
|
||||
import { VideoPlayerIconButton } from "../parts/VideoPlayerIconButton";
|
||||
import { useVideoPlayerState } from "../VideoContext";
|
||||
|
||||
interface Props {
|
||||
className?: string;
|
||||
iconSize?: string;
|
||||
}
|
||||
|
||||
export function PauseControl(props: Props) {
|
||||
const { videoState } = useVideoPlayerState();
|
||||
|
||||
const handleClick = useCallback(() => {
|
||||
if (videoState?.isPlaying) videoState.pause();
|
||||
else videoState.play();
|
||||
}, [videoState]);
|
||||
|
||||
const icon =
|
||||
videoState.isPlaying || videoState.isSeeking ? Icons.PAUSE : Icons.PLAY;
|
||||
|
||||
return (
|
||||
<VideoPlayerIconButton
|
||||
iconSize={props.iconSize}
|
||||
className={props.className}
|
||||
icon={icon}
|
||||
onClick={handleClick}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@ -1,77 +0,0 @@
|
||||
import {
|
||||
makePercentage,
|
||||
makePercentageString,
|
||||
useProgressBar,
|
||||
} from "@/hooks/useProgressBar";
|
||||
import { useCallback, useEffect, useRef } from "react";
|
||||
import { useVideoPlayerState } from "../VideoContext";
|
||||
|
||||
export function ProgressControl() {
|
||||
const { videoState } = useVideoPlayerState();
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
const dragRef = useRef<boolean>(false);
|
||||
|
||||
const commitTime = useCallback(
|
||||
(percentage) => {
|
||||
videoState.setTime(percentage * videoState.duration);
|
||||
},
|
||||
[videoState]
|
||||
);
|
||||
const { dragging, dragPercentage, dragMouseDown } = useProgressBar(
|
||||
ref,
|
||||
commitTime
|
||||
);
|
||||
|
||||
// TODO make dragging update timer
|
||||
useEffect(() => {
|
||||
if (dragRef.current === dragging) return;
|
||||
dragRef.current = dragging;
|
||||
videoState.setSeeking(dragging);
|
||||
}, [dragRef, dragging, videoState]);
|
||||
|
||||
let watchProgress = makePercentageString(
|
||||
makePercentage((videoState.time / videoState.duration) * 100)
|
||||
);
|
||||
if (dragging)
|
||||
watchProgress = makePercentageString(makePercentage(dragPercentage));
|
||||
|
||||
const bufferProgress = makePercentageString(
|
||||
makePercentage((videoState.buffered / videoState.duration) * 100)
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="group pointer-events-auto w-full cursor-pointer rounded-full px-2">
|
||||
<div
|
||||
ref={ref}
|
||||
className="-my-3 flex h-8 items-center"
|
||||
onMouseDown={dragMouseDown}
|
||||
onTouchStart={dragMouseDown}
|
||||
>
|
||||
<div
|
||||
className={`relative h-1 flex-1 rounded-full bg-gray-500 bg-opacity-50 transition-[height] duration-100 group-hover:h-2 ${
|
||||
dragging ? "!h-2" : ""
|
||||
}`}
|
||||
>
|
||||
<div
|
||||
className="absolute inset-y-0 left-0 flex items-center justify-end rounded-full bg-gray-300 bg-opacity-20"
|
||||
style={{
|
||||
width: bufferProgress,
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
className="absolute inset-y-0 left-0 flex items-center justify-end rounded-full bg-bink-600"
|
||||
style={{
|
||||
width: watchProgress,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className={`absolute h-1 w-1 translate-x-1/2 rounded-full bg-white opacity-0 transition-[transform,opacity] group-hover:scale-[400%] group-hover:opacity-100 ${
|
||||
dragging ? "!scale-[400%] !opacity-100" : ""
|
||||
}`}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,41 +0,0 @@
|
||||
import { useEffect, useMemo, useRef } from "react";
|
||||
import throttle from "lodash.throttle";
|
||||
import { useVideoPlayerState } from "../VideoContext";
|
||||
|
||||
interface Props {
|
||||
startAt?: number;
|
||||
onProgress?: (time: number, duration: number) => void;
|
||||
}
|
||||
|
||||
export function ProgressListenerControl(props: Props) {
|
||||
const { videoState } = useVideoPlayerState();
|
||||
const didInitialize = useRef<true | null>(null);
|
||||
|
||||
// time updates (throttled)
|
||||
const updateTime = useMemo(
|
||||
() => throttle((a: number, b: number) => props.onProgress?.(a, b), 1000),
|
||||
[props]
|
||||
);
|
||||
useEffect(() => {
|
||||
if (!videoState.isPlaying) return;
|
||||
if (videoState.duration === 0 || videoState.time === 0) return;
|
||||
updateTime(videoState.time, videoState.duration);
|
||||
}, [videoState, updateTime]);
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
updateTime.cancel();
|
||||
};
|
||||
}, [updateTime]);
|
||||
|
||||
// initialize
|
||||
useEffect(() => {
|
||||
if (didInitialize.current) return;
|
||||
if (!videoState.hasInitialized || Number.isNaN(videoState.duration)) return;
|
||||
if (props.startAt !== undefined) {
|
||||
videoState.setTime(props.startAt);
|
||||
}
|
||||
didInitialize.current = true;
|
||||
}, [didInitialize, props, videoState]);
|
||||
|
||||
return null;
|
||||
}
|
||||
@ -1,14 +0,0 @@
|
||||
import { useContext } from "react";
|
||||
import { VideoPlayerContext } from "../VideoContext";
|
||||
|
||||
export function QualityDisplayControl() {
|
||||
const videoPlayerContext = useContext(VideoPlayerContext);
|
||||
|
||||
return (
|
||||
<div className="rounded-md bg-denim-300 py-1 px-2 transition-colors">
|
||||
<p className="text-center text-xs font-bold text-slate-300 transition-colors">
|
||||
{videoPlayerContext.quality}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,194 +0,0 @@
|
||||
import React, { useCallback, useMemo, useState } from "react";
|
||||
import { useParams } from "react-router-dom";
|
||||
import { Icon, Icons } from "@/components/Icon";
|
||||
import { useLoading } from "@/hooks/useLoading";
|
||||
import { MWMediaType, MWSeasonWithEpisodeMeta } from "@/backend/metadata/types";
|
||||
import { getMetaFromId } from "@/backend/metadata/getmeta";
|
||||
import { decodeJWId } from "@/backend/metadata/justwatch";
|
||||
import { Loading } from "@/components/layout/Loading";
|
||||
import { IconPatch } from "@/components/buttons/IconPatch";
|
||||
import { useVideoPlayerState } from "../VideoContext";
|
||||
import { VideoPlayerIconButton } from "../parts/VideoPlayerIconButton";
|
||||
import { VideoPopout } from "../parts/VideoPopout";
|
||||
|
||||
interface Props {
|
||||
className?: string;
|
||||
}
|
||||
|
||||
function PopupSection(props: {
|
||||
children?: React.ReactNode;
|
||||
className?: string;
|
||||
}) {
|
||||
return (
|
||||
<div className={["p-4", props.className || ""].join(" ")}>
|
||||
{props.children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function PopupEpisodeSelect() {
|
||||
const params = useParams<{
|
||||
media: string;
|
||||
}>();
|
||||
const { videoState } = useVideoPlayerState();
|
||||
const [isPickingSeason, setIsPickingSeason] = useState<boolean>(false);
|
||||
const { current, seasons } = videoState.seasonData;
|
||||
const [currentVisibleSeason, setCurrentVisibleSeason] = useState<{
|
||||
seasonId: string;
|
||||
season?: MWSeasonWithEpisodeMeta;
|
||||
} | null>(null);
|
||||
const [reqSeasonMeta, loading, error] = useLoading(
|
||||
(id: string, seasonId: string) => {
|
||||
return getMetaFromId(MWMediaType.SERIES, id, seasonId);
|
||||
}
|
||||
);
|
||||
const requestSeason = useCallback(
|
||||
(sId: string) => {
|
||||
setCurrentVisibleSeason({
|
||||
seasonId: sId,
|
||||
season: undefined,
|
||||
});
|
||||
setIsPickingSeason(false);
|
||||
reqSeasonMeta(decodeJWId(params.media)?.id as string, sId).then((v) => {
|
||||
if (v?.meta.type !== MWMediaType.SERIES) return;
|
||||
setCurrentVisibleSeason({
|
||||
seasonId: sId,
|
||||
season: v?.meta.seasonData,
|
||||
});
|
||||
});
|
||||
},
|
||||
[reqSeasonMeta, params.media]
|
||||
);
|
||||
|
||||
const currentSeasonId = currentVisibleSeason?.seasonId ?? current?.seasonId;
|
||||
|
||||
const setCurrent = useCallback(
|
||||
(seasonId: string, episodeId: string) => {
|
||||
videoState.setCurrentEpisode(seasonId, episodeId);
|
||||
},
|
||||
[videoState]
|
||||
);
|
||||
|
||||
const currentSeasonInfo = useMemo(() => {
|
||||
return seasons?.find((season) => season.id === currentSeasonId);
|
||||
}, [seasons, currentSeasonId]);
|
||||
|
||||
const currentSeasonEpisodes = useMemo(() => {
|
||||
if (currentVisibleSeason?.season) {
|
||||
return currentVisibleSeason?.season?.episodes;
|
||||
}
|
||||
return videoState?.seasonData.seasons?.find?.(
|
||||
(season) => season && season.id === currentSeasonId
|
||||
)?.episodes;
|
||||
}, [videoState, currentSeasonId, currentVisibleSeason]);
|
||||
|
||||
const toggleIsPickingSeason = () => {
|
||||
setIsPickingSeason(!isPickingSeason);
|
||||
};
|
||||
|
||||
const setSeason = (id: string) => {
|
||||
requestSeason(id);
|
||||
setCurrentVisibleSeason({ seasonId: id });
|
||||
};
|
||||
|
||||
if (isPickingSeason)
|
||||
return (
|
||||
<>
|
||||
<PopupSection className="flex items-center space-x-3 border-b border-denim-500 font-bold text-white">
|
||||
Pick a season
|
||||
</PopupSection>
|
||||
<PopupSection className="overflow-y-auto">
|
||||
<div className="space-y-1">
|
||||
{currentSeasonInfo
|
||||
? videoState?.seasonData?.seasons?.map?.((season) => (
|
||||
<div
|
||||
className="text-denim-800 -mx-2 flex items-center space-x-1 rounded p-2 text-white hover:bg-denim-600"
|
||||
key={season.id}
|
||||
onClick={() => setSeason(season.id)}
|
||||
>
|
||||
{season.title}
|
||||
</div>
|
||||
))
|
||||
: "No season"}
|
||||
</div>
|
||||
</PopupSection>
|
||||
</>
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<PopupSection className="flex items-center space-x-3 border-b border-denim-500 font-bold text-white">
|
||||
<button
|
||||
className="-m-1.5 rounded p-1.5 hover:bg-denim-600"
|
||||
onClick={toggleIsPickingSeason}
|
||||
type="button"
|
||||
>
|
||||
<Icon icon={Icons.CHEVRON_LEFT} />
|
||||
</button>
|
||||
<span>{currentSeasonInfo?.title || ""}</span>
|
||||
</PopupSection>
|
||||
<PopupSection className="overflow-y-auto">
|
||||
{loading ? (
|
||||
<div className="flex h-full w-full items-center justify-center">
|
||||
<Loading />
|
||||
</div>
|
||||
) : error ? (
|
||||
<div className="flex h-full w-full items-center justify-center">
|
||||
<div className="flex flex-col flex-wrap items-center text-slate-400">
|
||||
<IconPatch
|
||||
icon={Icons.EYE_SLASH}
|
||||
className="text-xl text-bink-600"
|
||||
/>
|
||||
<p className="mt-6 w-full text-center">
|
||||
Something went wrong loading the episodes for{" "}
|
||||
{currentSeasonInfo?.title?.toLowerCase()}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-1">
|
||||
{currentSeasonEpisodes && currentSeasonInfo
|
||||
? currentSeasonEpisodes.map((e) => (
|
||||
<div
|
||||
className={[
|
||||
"text-denim-800 -mx-2 flex items-center space-x-1 rounded p-2 text-white hover:bg-denim-600",
|
||||
current?.episodeId === e.id &&
|
||||
"outline outline-2 outline-denim-700",
|
||||
].join(" ")}
|
||||
onClick={() => setCurrent(currentSeasonInfo.id, e.id)}
|
||||
key={e.id}
|
||||
>
|
||||
{e.number}. {e.title}
|
||||
</div>
|
||||
))
|
||||
: "No episodes"}
|
||||
</div>
|
||||
)}
|
||||
</PopupSection>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export function SeriesSelectionControl(props: Props) {
|
||||
const { videoState } = useVideoPlayerState();
|
||||
|
||||
if (!videoState.seasonData.isSeries) return null;
|
||||
|
||||
return (
|
||||
<div className={props.className}>
|
||||
<div className="relative">
|
||||
<VideoPopout
|
||||
id="episodes"
|
||||
className="grid grid-rows-[auto,minmax(0,1fr)]"
|
||||
>
|
||||
<PopupEpisodeSelect />
|
||||
</VideoPopout>
|
||||
<VideoPlayerIconButton
|
||||
icon={Icons.EPISODES}
|
||||
text="Episodes"
|
||||
onClick={() => videoState.openPopout("episodes")}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,69 +0,0 @@
|
||||
import {
|
||||
MWSeasonMeta,
|
||||
MWSeasonWithEpisodeMeta,
|
||||
} from "@/backend/metadata/types";
|
||||
import { useEffect, useRef } from "react";
|
||||
import { PlayerContext } from "../hooks/useVideoPlayer";
|
||||
import { useVideoPlayerState } from "../VideoContext";
|
||||
|
||||
interface ShowControlProps {
|
||||
series?: {
|
||||
episodeId: string;
|
||||
seasonId: string;
|
||||
};
|
||||
seasons: MWSeasonMeta[];
|
||||
seasonData: MWSeasonWithEpisodeMeta;
|
||||
onSelect?: (state: { episodeId?: string; seasonId?: string }) => void;
|
||||
}
|
||||
|
||||
function setVideoShowState(videoState: PlayerContext, props: ShowControlProps) {
|
||||
const seasonsWithEpisodes = props.seasons.map((v) => {
|
||||
if (v.id === props.seasonData.id)
|
||||
return {
|
||||
...v,
|
||||
episodes: props.seasonData.episodes,
|
||||
};
|
||||
return v;
|
||||
});
|
||||
|
||||
videoState.setShowData({
|
||||
current: props.series,
|
||||
isSeries: !!props.series,
|
||||
seasons: seasonsWithEpisodes,
|
||||
});
|
||||
}
|
||||
|
||||
export function ShowControl(props: ShowControlProps) {
|
||||
const { videoState } = useVideoPlayerState();
|
||||
const lastState = useRef<{
|
||||
episodeId?: string;
|
||||
seasonId?: string;
|
||||
} | null>({
|
||||
episodeId: props.series?.episodeId,
|
||||
seasonId: props.series?.seasonId,
|
||||
});
|
||||
|
||||
const hasInitialized = useRef(false);
|
||||
useEffect(() => {
|
||||
if (hasInitialized.current) return;
|
||||
if (!videoState.hasInitialized) return;
|
||||
setVideoShowState(videoState, props);
|
||||
hasInitialized.current = true;
|
||||
}, [props, videoState]);
|
||||
|
||||
useEffect(() => {
|
||||
const currentState = {
|
||||
episodeId: videoState.seasonData.current?.episodeId,
|
||||
seasonId: videoState.seasonData.current?.seasonId,
|
||||
};
|
||||
if (
|
||||
currentState.episodeId !== lastState.current?.episodeId ||
|
||||
currentState.seasonId !== lastState.current?.seasonId
|
||||
) {
|
||||
lastState.current = currentState;
|
||||
props.onSelect?.(currentState);
|
||||
}
|
||||
}, [videoState, props]);
|
||||
|
||||
return null;
|
||||
}
|
||||
@ -1,15 +0,0 @@
|
||||
import { useCurrentSeriesEpisodeInfo } from "../hooks/useCurrentSeriesEpisodeInfo";
|
||||
|
||||
export function ShowTitleControl() {
|
||||
const { isSeries, currentEpisodeInfo, humanizedEpisodeId } =
|
||||
useCurrentSeriesEpisodeInfo();
|
||||
|
||||
if (!isSeries) return null;
|
||||
|
||||
return (
|
||||
<p className="ml-8 select-none space-x-2 text-white">
|
||||
<span>{humanizedEpisodeId}</span>
|
||||
<span className="opacity-50">{currentEpisodeInfo?.title}</span>
|
||||
</p>
|
||||
);
|
||||
}
|
||||
@ -1,47 +0,0 @@
|
||||
import { useVideoPlayerState } from "../VideoContext";
|
||||
|
||||
function durationExceedsHour(secs: number): boolean {
|
||||
return secs > 60 * 60;
|
||||
}
|
||||
|
||||
function formatSeconds(secs: number, showHours = false): string {
|
||||
if (Number.isNaN(secs)) {
|
||||
if (showHours) return "0:00:00";
|
||||
return "0:00";
|
||||
}
|
||||
|
||||
let time = secs;
|
||||
const seconds = Math.floor(time % 60);
|
||||
|
||||
time /= 60;
|
||||
const minutes = Math.floor(time % 60);
|
||||
|
||||
time /= 60;
|
||||
const hours = Math.floor(time);
|
||||
|
||||
const paddedSecs = seconds.toString().padStart(2, "0");
|
||||
const paddedMins = minutes.toString().padStart(2, "0");
|
||||
|
||||
if (!showHours) return [paddedMins, paddedSecs].join(":");
|
||||
return [hours, paddedMins, paddedSecs].join(":");
|
||||
}
|
||||
|
||||
interface Props {
|
||||
className?: string;
|
||||
noDuration?: boolean;
|
||||
}
|
||||
|
||||
export function SkipTime(props: Props) {
|
||||
const { videoState } = useVideoPlayerState();
|
||||
const hasHours = durationExceedsHour(videoState.duration);
|
||||
const time = formatSeconds(videoState.time, hasHours);
|
||||
const duration = formatSeconds(videoState.duration, hasHours);
|
||||
|
||||
return (
|
||||
<div className={props.className}>
|
||||
<p className="select-none text-white">
|
||||
{time} {props.noDuration ? "" : `/ ${duration}`}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,27 +0,0 @@
|
||||
import { MWStreamQuality, MWStreamType } from "@/backend/helpers/streams";
|
||||
import { useContext, useEffect, useRef } from "react";
|
||||
import { VideoPlayerDispatchContext } from "../VideoContext";
|
||||
|
||||
interface SourceControlProps {
|
||||
source: string;
|
||||
type: MWStreamType;
|
||||
quality: MWStreamQuality;
|
||||
}
|
||||
|
||||
export function SourceControl(props: SourceControlProps) {
|
||||
const dispatch = useContext(VideoPlayerDispatchContext);
|
||||
const didInitialize = useRef(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (didInitialize.current) return;
|
||||
dispatch({
|
||||
type: "SET_SOURCE",
|
||||
url: props.source,
|
||||
sourceType: props.type,
|
||||
quality: props.quality,
|
||||
});
|
||||
didInitialize.current = true;
|
||||
}, [props, dispatch]);
|
||||
|
||||
return null;
|
||||
}
|
||||
@ -1,185 +0,0 @@
|
||||
import { useParams } from "react-router-dom";
|
||||
import { useCallback, useContext, useMemo, useState } from "react";
|
||||
import { Icon, Icons } from "@/components/Icon";
|
||||
import { getProviders } from "@/backend/helpers/register";
|
||||
import { useLoading } from "@/hooks/useLoading";
|
||||
import { DetailedMeta } from "@/backend/metadata/getmeta";
|
||||
import { MWMediaType } from "@/backend/metadata/types";
|
||||
import { MWProviderScrapeResult } from "@/backend/helpers/provider";
|
||||
import { runProvider } from "@/backend/helpers/run";
|
||||
import { IconPatch } from "@/components/buttons/IconPatch";
|
||||
import { Loading } from "@/components/layout/Loading";
|
||||
import {
|
||||
useVideoPlayerState,
|
||||
VideoPlayerDispatchContext,
|
||||
} from "../VideoContext";
|
||||
import { VideoPlayerIconButton } from "../parts/VideoPlayerIconButton";
|
||||
import { VideoPopout } from "../parts/VideoPopout";
|
||||
|
||||
interface Props {
|
||||
className?: string;
|
||||
media?: DetailedMeta;
|
||||
}
|
||||
|
||||
function PopoutSourceSelect(props: { media: DetailedMeta }) {
|
||||
const dispatch = useContext(VideoPlayerDispatchContext);
|
||||
const providers = useMemo(
|
||||
() => getProviders().filter((v) => v.type.includes(props.media.meta.type)),
|
||||
[props]
|
||||
);
|
||||
const { episode, season } = useParams<{ episode: string; season: string }>();
|
||||
const [selected, setSelected] = useState<string | null>(null);
|
||||
const selectedProvider = useMemo(
|
||||
() => providers.find((v) => v.id === selected),
|
||||
[selected, providers]
|
||||
);
|
||||
|
||||
const [scrapeData, setScrapeData] = useState<MWProviderScrapeResult | null>(
|
||||
null
|
||||
);
|
||||
const [scrapeProvider, loadingProvider, errorProvider] = useLoading(
|
||||
async (providerId: string) => {
|
||||
const theProvider = providers.find((v) => v.id === providerId);
|
||||
if (!theProvider) throw new Error("Invalid provider");
|
||||
return runProvider(theProvider, {
|
||||
media: props.media,
|
||||
progress: () => {},
|
||||
type: props.media.meta.type,
|
||||
episode: (props.media.meta.type === MWMediaType.SERIES
|
||||
? episode
|
||||
: undefined) as any,
|
||||
season: (props.media.meta.type === MWMediaType.SERIES
|
||||
? season
|
||||
: undefined) as any,
|
||||
});
|
||||
}
|
||||
);
|
||||
|
||||
// TODO add embed support
|
||||
// TODO restore startAt when changing source
|
||||
// TODO auto choose when only one option
|
||||
// TODO close when selecting item
|
||||
// TODO show currently selected provider
|
||||
// TODO clear error state when switching
|
||||
// const [scrapeEmbed, embedLoading, embedError] = useLoading(
|
||||
// async (embed: MWEmbed) => {
|
||||
// if (!embed.type) throw new Error("Invalid embed type");
|
||||
// const theScraper = getEmbedScraperByType(embed.type);
|
||||
// if (!theScraper) throw new Error("Invalid scraper");
|
||||
// return runEmbedScraper(theScraper, {
|
||||
// progress: () => {},
|
||||
// url: embed.url,
|
||||
// });
|
||||
// }
|
||||
// );
|
||||
|
||||
const selectProvider = useCallback(
|
||||
(id: string) => {
|
||||
scrapeProvider(id).then((v) => {
|
||||
if (!v) throw new Error("No scrape result");
|
||||
setScrapeData(v);
|
||||
});
|
||||
setSelected(id);
|
||||
},
|
||||
[setSelected, scrapeProvider]
|
||||
);
|
||||
|
||||
if (!selectedProvider)
|
||||
return (
|
||||
<>
|
||||
<div className="flex items-center space-x-3 border-b border-denim-500 p-4 font-bold text-white">
|
||||
<span>Select video source</span>
|
||||
</div>
|
||||
<div className="overflow-y-auto p-4">
|
||||
<div className="space-y-1">
|
||||
{providers.map((e) => (
|
||||
<div
|
||||
className="text-denim-800 -mx-2 flex items-center space-x-1 rounded p-2 text-white hover:bg-denim-600"
|
||||
onClick={() => selectProvider(e.id)}
|
||||
key={e.id}
|
||||
>
|
||||
{e.displayName}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="flex items-center space-x-3 border-b border-denim-500 p-4 font-bold text-white">
|
||||
<button
|
||||
className="-m-1.5 rounded p-1.5 hover:bg-denim-600"
|
||||
onClick={() => setSelected(null)}
|
||||
type="button"
|
||||
>
|
||||
<Icon icon={Icons.CHEVRON_LEFT} />
|
||||
</button>
|
||||
<span>{selectedProvider.displayName}</span>
|
||||
</div>
|
||||
<div className="overflow-y-auto p-4 text-white">
|
||||
{loadingProvider ? (
|
||||
<div className="flex h-full w-full items-center justify-center">
|
||||
<Loading />
|
||||
</div>
|
||||
) : errorProvider ? (
|
||||
<div className="flex h-full w-full items-center justify-center">
|
||||
<div className="flex flex-col flex-wrap items-center text-slate-400">
|
||||
<IconPatch
|
||||
icon={Icons.EYE_SLASH}
|
||||
className="text-xl text-bink-600"
|
||||
/>
|
||||
<p className="mt-6 w-full text-center">
|
||||
Something went wrong loading streams.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
) : scrapeData ? (
|
||||
<div>
|
||||
{scrapeData.stream ? (
|
||||
<div
|
||||
className="text-denim-800 -mx-2 flex items-center space-x-1 rounded p-2 text-white hover:bg-denim-600"
|
||||
onClick={() =>
|
||||
scrapeData.stream &&
|
||||
dispatch({
|
||||
url: scrapeData.stream.streamUrl,
|
||||
quality: scrapeData.stream.quality,
|
||||
sourceType: scrapeData.stream.type,
|
||||
type: "SET_SOURCE",
|
||||
})
|
||||
}
|
||||
>
|
||||
{selectedProvider.displayName}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export function SourceSelectionControl(props: Props) {
|
||||
const { videoState } = useVideoPlayerState();
|
||||
|
||||
if (!props.media) return null;
|
||||
|
||||
return (
|
||||
<div className={props.className}>
|
||||
<div className="relative">
|
||||
<VideoPopout
|
||||
id="source"
|
||||
className="grid grid-rows-[auto,minmax(0,1fr)]"
|
||||
>
|
||||
<PopoutSourceSelect media={props.media} />
|
||||
</VideoPopout>
|
||||
<VideoPlayerIconButton
|
||||
icon={Icons.FILE}
|
||||
text="Video source"
|
||||
onClick={() => videoState.openPopout("source")}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,42 +0,0 @@
|
||||
import { Icons } from "@/components/Icon";
|
||||
import { VideoPlayerIconButton } from "../parts/VideoPlayerIconButton";
|
||||
import { useVideoPlayerState } from "../VideoContext";
|
||||
|
||||
interface Props {
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function SkipTimeBackward() {
|
||||
const { videoState } = useVideoPlayerState();
|
||||
|
||||
const skipBackward = () => {
|
||||
videoState.setTime(videoState.time - 10);
|
||||
};
|
||||
|
||||
return (
|
||||
<VideoPlayerIconButton icon={Icons.SKIP_BACKWARD} onClick={skipBackward} />
|
||||
);
|
||||
}
|
||||
|
||||
export function SkipTimeForward() {
|
||||
const { videoState } = useVideoPlayerState();
|
||||
|
||||
const skipForward = () => {
|
||||
videoState.setTime(videoState.time + 10);
|
||||
};
|
||||
|
||||
return (
|
||||
<VideoPlayerIconButton icon={Icons.SKIP_FORWARD} onClick={skipForward} />
|
||||
);
|
||||
}
|
||||
|
||||
export function TimeControl(props: Props) {
|
||||
return (
|
||||
<div className={props.className}>
|
||||
<div className="flex select-none items-center text-white">
|
||||
<SkipTimeBackward />
|
||||
<SkipTimeForward />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,86 +0,0 @@
|
||||
import { Icon, Icons } from "@/components/Icon";
|
||||
import {
|
||||
makePercentage,
|
||||
makePercentageString,
|
||||
useProgressBar,
|
||||
} from "@/hooks/useProgressBar";
|
||||
import { useVolumeControl } from "@/hooks/useVolumeToggle";
|
||||
import { canChangeVolume } from "@/utils/detectFeatures";
|
||||
import { useCallback, useEffect, useRef, useState } from "react";
|
||||
import { useVideoPlayerState } from "../VideoContext";
|
||||
|
||||
interface Props {
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function VolumeControl(props: Props) {
|
||||
const { videoState } = useVideoPlayerState();
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
const { setStoredVolume, toggleVolume } = useVolumeControl();
|
||||
const [hoveredOnce, setHoveredOnce] = useState(false);
|
||||
|
||||
const commitVolume = useCallback(
|
||||
(percentage) => {
|
||||
videoState.setVolume(percentage);
|
||||
setStoredVolume(percentage);
|
||||
},
|
||||
[videoState, setStoredVolume]
|
||||
);
|
||||
const { dragging, dragPercentage, dragMouseDown } = useProgressBar(
|
||||
ref,
|
||||
commitVolume,
|
||||
true
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (!videoState.leftControlHovering) setHoveredOnce(false);
|
||||
}, [videoState, setHoveredOnce]);
|
||||
|
||||
const handleClick = useCallback(() => {
|
||||
toggleVolume();
|
||||
}, [toggleVolume]);
|
||||
|
||||
const handleMouseEnter = useCallback(async () => {
|
||||
if (await canChangeVolume()) setHoveredOnce(true);
|
||||
}, [setHoveredOnce]);
|
||||
|
||||
let percentage = makePercentage(videoState.volume * 100);
|
||||
if (dragging) percentage = makePercentage(dragPercentage);
|
||||
const percentageString = makePercentageString(percentage);
|
||||
|
||||
return (
|
||||
<div className={props.className}>
|
||||
<div
|
||||
className="pointer-events-auto flex cursor-pointer items-center"
|
||||
onMouseEnter={handleMouseEnter}
|
||||
>
|
||||
<div className="px-4 text-2xl text-white" onClick={handleClick}>
|
||||
<Icon icon={percentage > 0 ? Icons.VOLUME : Icons.VOLUME_X} />
|
||||
</div>
|
||||
<div
|
||||
className={`linear -ml-2 w-0 overflow-hidden transition-[width,opacity] duration-300 ${
|
||||
hoveredOnce || dragging ? "!w-24 opacity-100" : "w-4 opacity-0"
|
||||
}`}
|
||||
>
|
||||
<div
|
||||
ref={ref}
|
||||
className="flex h-10 w-20 items-center px-2"
|
||||
onMouseDown={dragMouseDown}
|
||||
onTouchStart={dragMouseDown}
|
||||
>
|
||||
<div className="relative h-1 flex-1 rounded-full bg-gray-500 bg-opacity-50">
|
||||
<div
|
||||
className="absolute inset-y-0 left-0 flex items-center justify-end rounded-full bg-bink-500"
|
||||
style={{
|
||||
width: percentageString,
|
||||
}}
|
||||
>
|
||||
<div className="absolute h-3 w-3 translate-x-1/2 rounded-full bg-white" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,204 +0,0 @@
|
||||
import Hls from "hls.js";
|
||||
import {
|
||||
canChangeVolume,
|
||||
canFullscreen,
|
||||
canFullscreenAnyElement,
|
||||
canWebkitFullscreen,
|
||||
} from "@/utils/detectFeatures";
|
||||
import { MWStreamType } from "@/backend/helpers/streams";
|
||||
import fscreen from "fscreen";
|
||||
import React, { RefObject } from "react";
|
||||
import { PlayerState } from "./useVideoPlayer";
|
||||
import { getStoredVolume, setStoredVolume } from "./volumeStore";
|
||||
|
||||
interface ShowData {
|
||||
current?: {
|
||||
episodeId: string;
|
||||
seasonId: string;
|
||||
};
|
||||
isSeries: boolean;
|
||||
seasons?: {
|
||||
id: string;
|
||||
number: number;
|
||||
title: string;
|
||||
episodes?: {
|
||||
id: string;
|
||||
number: number;
|
||||
title: string;
|
||||
}[];
|
||||
}[];
|
||||
}
|
||||
|
||||
export interface PlayerControls {
|
||||
play(): void;
|
||||
pause(): void;
|
||||
exitFullscreen(): void;
|
||||
enterFullscreen(): void;
|
||||
setTime(time: number): void;
|
||||
setVolume(volume: number): void;
|
||||
setSeeking(active: boolean): void;
|
||||
setLeftControlsHover(hovering: boolean): void;
|
||||
initPlayer(sourceUrl: string, sourceType: MWStreamType): void;
|
||||
setShowData(data: ShowData): void;
|
||||
setCurrentEpisode(sId: string, eId: string): void;
|
||||
startAirplay(): void;
|
||||
openPopout(id: string): void;
|
||||
closePopout(): void;
|
||||
}
|
||||
|
||||
export const initialControls: PlayerControls = {
|
||||
play: () => null,
|
||||
pause: () => null,
|
||||
enterFullscreen: () => null,
|
||||
exitFullscreen: () => null,
|
||||
setTime: () => null,
|
||||
setVolume: () => null,
|
||||
setSeeking: () => null,
|
||||
setLeftControlsHover: () => null,
|
||||
initPlayer: () => null,
|
||||
setShowData: () => null,
|
||||
startAirplay: () => null,
|
||||
setCurrentEpisode: () => null,
|
||||
openPopout: () => null,
|
||||
closePopout: () => null,
|
||||
};
|
||||
|
||||
export function populateControls(
|
||||
playerEl: HTMLVideoElement,
|
||||
wrapperEl: HTMLDivElement,
|
||||
update: (s: React.SetStateAction<PlayerState>) => void,
|
||||
state: RefObject<PlayerState>
|
||||
): PlayerControls {
|
||||
const player = playerEl;
|
||||
const wrapper = wrapperEl;
|
||||
|
||||
return {
|
||||
play() {
|
||||
player.play();
|
||||
},
|
||||
pause() {
|
||||
player.pause();
|
||||
},
|
||||
enterFullscreen() {
|
||||
if (!canFullscreen() || fscreen.fullscreenElement) return;
|
||||
if (canFullscreenAnyElement()) {
|
||||
fscreen.requestFullscreen(wrapper);
|
||||
return;
|
||||
}
|
||||
if (canWebkitFullscreen()) {
|
||||
(player as any).webkitEnterFullscreen();
|
||||
}
|
||||
},
|
||||
exitFullscreen() {
|
||||
if (!fscreen.fullscreenElement) return;
|
||||
fscreen.exitFullscreen();
|
||||
},
|
||||
setTime(t) {
|
||||
// clamp time between 0 and max duration
|
||||
let time = Math.min(t, player.duration);
|
||||
time = Math.max(0, time);
|
||||
|
||||
if (Number.isNaN(time)) return;
|
||||
|
||||
// update state
|
||||
player.currentTime = time;
|
||||
update((s) => ({ ...s, time }));
|
||||
},
|
||||
async setVolume(v) {
|
||||
// clamp time between 0 and 1
|
||||
let volume = Math.min(v, 1);
|
||||
volume = Math.max(0, volume);
|
||||
|
||||
// update state
|
||||
if (await canChangeVolume()) player.volume = volume;
|
||||
update((s) => ({ ...s, volume }));
|
||||
|
||||
// update localstorage
|
||||
setStoredVolume(volume);
|
||||
},
|
||||
setSeeking(active) {
|
||||
const currentState = state.current;
|
||||
if (!currentState) return;
|
||||
|
||||
// if it was playing when starting to seek, play again
|
||||
if (!active) {
|
||||
if (!currentState.pausedWhenSeeking) this.play();
|
||||
return;
|
||||
}
|
||||
|
||||
// when seeking we pause the video
|
||||
update((s) => ({ ...s, pausedWhenSeeking: s.isPaused }));
|
||||
this.pause();
|
||||
},
|
||||
setLeftControlsHover(hovering) {
|
||||
update((s) => ({ ...s, leftControlHovering: hovering }));
|
||||
},
|
||||
openPopout(id: string) {
|
||||
update((s) => ({ ...s, popout: id }));
|
||||
},
|
||||
closePopout() {
|
||||
update((s) => ({ ...s, popout: null }));
|
||||
},
|
||||
setShowData(data) {
|
||||
update((s) => ({ ...s, seasonData: data }));
|
||||
},
|
||||
setCurrentEpisode(sId: string, eId: string) {
|
||||
update((s) => ({
|
||||
...s,
|
||||
seasonData: {
|
||||
...s.seasonData,
|
||||
current: {
|
||||
seasonId: sId,
|
||||
episodeId: eId,
|
||||
},
|
||||
},
|
||||
}));
|
||||
},
|
||||
startAirplay() {
|
||||
const videoPlayer = player as any;
|
||||
if (videoPlayer.webkitShowPlaybackTargetPicker)
|
||||
videoPlayer.webkitShowPlaybackTargetPicker();
|
||||
},
|
||||
initPlayer(sourceUrl: string, sourceType: MWStreamType) {
|
||||
this.setVolume(getStoredVolume());
|
||||
|
||||
if (sourceType === MWStreamType.HLS) {
|
||||
if (player.canPlayType("application/vnd.apple.mpegurl")) {
|
||||
player.src = sourceUrl;
|
||||
} else {
|
||||
// HLS support
|
||||
if (!Hls.isSupported()) {
|
||||
update((s) => ({
|
||||
...s,
|
||||
error: {
|
||||
name: `Not supported`,
|
||||
description: "Your browser does not support HLS video",
|
||||
},
|
||||
}));
|
||||
return;
|
||||
}
|
||||
|
||||
const hls = new Hls({ enableWorker: false });
|
||||
|
||||
hls.on(Hls.Events.ERROR, (event, data) => {
|
||||
if (data.fatal) {
|
||||
update((s) => ({
|
||||
...s,
|
||||
error: {
|
||||
name: `error ${data.details}`,
|
||||
description: data.error?.message ?? "Something went wrong",
|
||||
},
|
||||
}));
|
||||
}
|
||||
console.error("HLS error", data);
|
||||
});
|
||||
|
||||
hls.attachMedia(player);
|
||||
hls.loadSource(sourceUrl);
|
||||
}
|
||||
} else if (sourceType === MWStreamType.MP4) {
|
||||
player.src = sourceUrl;
|
||||
}
|
||||
},
|
||||
};
|
||||
}
|
||||
@ -1,33 +0,0 @@
|
||||
import { useMemo } from "react";
|
||||
import { useVideoPlayerState } from "../VideoContext";
|
||||
|
||||
export function useCurrentSeriesEpisodeInfo() {
|
||||
const { videoState } = useVideoPlayerState();
|
||||
|
||||
const { current, seasons } = videoState.seasonData;
|
||||
|
||||
const currentSeasonInfo = useMemo(() => {
|
||||
return seasons?.find((season) => season.id === current?.seasonId);
|
||||
}, [seasons, current]);
|
||||
|
||||
const currentEpisodeInfo = useMemo(() => {
|
||||
return currentSeasonInfo?.episodes?.find(
|
||||
(episode) => episode.id === current?.episodeId
|
||||
);
|
||||
}, [currentSeasonInfo, current]);
|
||||
|
||||
const isSeries = Boolean(
|
||||
videoState.seasonData.isSeries && videoState.seasonData.current
|
||||
);
|
||||
|
||||
if (!isSeries) return { isSeries: false };
|
||||
|
||||
const humanizedEpisodeId = `S${currentSeasonInfo?.number} E${currentEpisodeInfo?.number}`;
|
||||
|
||||
return {
|
||||
isSeries: true,
|
||||
humanizedEpisodeId,
|
||||
currentSeasonInfo,
|
||||
currentEpisodeInfo,
|
||||
};
|
||||
}
|
||||
@ -1,262 +0,0 @@
|
||||
import { canChangeVolume } from "@/utils/detectFeatures";
|
||||
import fscreen from "fscreen";
|
||||
import React, { MutableRefObject, useEffect, useRef, useState } from "react";
|
||||
import {
|
||||
initialControls,
|
||||
PlayerControls,
|
||||
populateControls,
|
||||
} from "./controlVideo";
|
||||
import { handleBuffered } from "./utils";
|
||||
|
||||
export type PlayerState = {
|
||||
isPlaying: boolean;
|
||||
isPaused: boolean;
|
||||
isSeeking: boolean;
|
||||
isLoading: boolean;
|
||||
isFirstLoading: boolean;
|
||||
isFullscreen: boolean;
|
||||
time: number;
|
||||
duration: number;
|
||||
volume: number;
|
||||
buffered: number;
|
||||
pausedWhenSeeking: boolean;
|
||||
hasInitialized: boolean;
|
||||
leftControlHovering: boolean;
|
||||
hasPlayedOnce: boolean;
|
||||
popout: string | null;
|
||||
isFocused: boolean;
|
||||
seasonData: {
|
||||
isSeries: boolean;
|
||||
current?: {
|
||||
episodeId: string;
|
||||
seasonId: string;
|
||||
};
|
||||
seasons?: {
|
||||
id: string;
|
||||
number: number;
|
||||
title: string;
|
||||
episodes?: { id: string; number: number; title: string }[];
|
||||
}[];
|
||||
};
|
||||
error: null | {
|
||||
name: string;
|
||||
description: string;
|
||||
};
|
||||
canAirplay: boolean;
|
||||
};
|
||||
|
||||
export type PlayerContext = PlayerState & PlayerControls;
|
||||
|
||||
export const initialPlayerState: PlayerContext = {
|
||||
isPlaying: false,
|
||||
isPaused: true,
|
||||
isFullscreen: false,
|
||||
isFocused: false,
|
||||
isLoading: false,
|
||||
isSeeking: false,
|
||||
isFirstLoading: true,
|
||||
time: 0,
|
||||
duration: 0,
|
||||
volume: 0,
|
||||
buffered: 0,
|
||||
pausedWhenSeeking: false,
|
||||
hasInitialized: false,
|
||||
leftControlHovering: false,
|
||||
hasPlayedOnce: false,
|
||||
error: null,
|
||||
popout: null,
|
||||
seasonData: {
|
||||
isSeries: false,
|
||||
},
|
||||
canAirplay: false,
|
||||
...initialControls,
|
||||
};
|
||||
|
||||
type SetPlayer = (s: React.SetStateAction<PlayerContext>) => void;
|
||||
|
||||
function readState(player: HTMLVideoElement, update: SetPlayer) {
|
||||
const state = {
|
||||
...initialPlayerState,
|
||||
};
|
||||
state.isPaused = player.paused;
|
||||
state.isPlaying = !player.paused;
|
||||
state.isFullscreen = !!document.fullscreenElement;
|
||||
state.isSeeking = player.seeking;
|
||||
state.time = player.currentTime;
|
||||
state.duration = player.duration;
|
||||
state.volume = player.volume;
|
||||
state.buffered = handleBuffered(player.currentTime, player.buffered);
|
||||
state.isLoading = false;
|
||||
state.hasInitialized = true;
|
||||
state.error = null;
|
||||
|
||||
update((s) => ({
|
||||
...state,
|
||||
pausedWhenSeeking: s.pausedWhenSeeking,
|
||||
hasPlayedOnce: s.hasPlayedOnce,
|
||||
isFirstLoading: s.isFirstLoading,
|
||||
}));
|
||||
}
|
||||
|
||||
function registerListeners(player: HTMLVideoElement, update: SetPlayer) {
|
||||
const pause = () => {
|
||||
update((s) => ({
|
||||
...s,
|
||||
isPaused: true,
|
||||
isPlaying: false,
|
||||
}));
|
||||
};
|
||||
const playing = () => {
|
||||
update((s) => ({
|
||||
...s,
|
||||
isPaused: false,
|
||||
isPlaying: true,
|
||||
isLoading: false,
|
||||
hasPlayedOnce: true,
|
||||
}));
|
||||
};
|
||||
const seeking = () => {
|
||||
update((s) => ({ ...s, isSeeking: true }));
|
||||
};
|
||||
const seeked = () => {
|
||||
update((s) => ({ ...s, isSeeking: false }));
|
||||
};
|
||||
const waiting = () => {
|
||||
update((s) => ({ ...s, isLoading: true }));
|
||||
};
|
||||
const fullscreenchange = () => {
|
||||
update((s) => ({ ...s, isFullscreen: !!document.fullscreenElement }));
|
||||
};
|
||||
const timeupdate = () => {
|
||||
update((s) => ({
|
||||
...s,
|
||||
duration: player.duration,
|
||||
time: player.currentTime,
|
||||
}));
|
||||
};
|
||||
const loadedmetadata = () => {
|
||||
update((s) => ({
|
||||
...s,
|
||||
duration: player.duration,
|
||||
}));
|
||||
};
|
||||
const volumechange = async () => {
|
||||
if (await canChangeVolume())
|
||||
update((s) => ({
|
||||
...s,
|
||||
volume: player.volume,
|
||||
}));
|
||||
};
|
||||
const progress = () => {
|
||||
update((s) => ({
|
||||
...s,
|
||||
buffered: handleBuffered(player.currentTime, player.buffered),
|
||||
}));
|
||||
};
|
||||
const canplay = () => {
|
||||
update((s) => ({
|
||||
...s,
|
||||
isFirstLoading: false,
|
||||
}));
|
||||
};
|
||||
const error = () => {
|
||||
console.error("Native video player threw error", player.error);
|
||||
update((s) => ({
|
||||
...s,
|
||||
error: player.error
|
||||
? {
|
||||
description: player.error.message,
|
||||
name: `Error ${player.error.code}`,
|
||||
}
|
||||
: null,
|
||||
}));
|
||||
};
|
||||
const canAirplay = (e: any) => {
|
||||
if (e.availability === "available") {
|
||||
update((s) => ({
|
||||
...s,
|
||||
canAirplay: true,
|
||||
}));
|
||||
}
|
||||
};
|
||||
const isFocused = (evt: any) => {
|
||||
update((s) => ({
|
||||
...s,
|
||||
isFocused: evt.type !== "mouseleave",
|
||||
}));
|
||||
};
|
||||
|
||||
const playerWrapper = player.closest(".is-video-player");
|
||||
if (!playerWrapper) return;
|
||||
|
||||
playerWrapper.addEventListener("click", isFocused);
|
||||
playerWrapper.addEventListener("mouseenter", isFocused);
|
||||
playerWrapper.addEventListener("mouseleave", isFocused);
|
||||
player.addEventListener("pause", pause);
|
||||
player.addEventListener("playing", playing);
|
||||
player.addEventListener("seeking", seeking);
|
||||
player.addEventListener("seeked", seeked);
|
||||
fscreen.addEventListener("fullscreenchange", fullscreenchange);
|
||||
player.addEventListener("timeupdate", timeupdate);
|
||||
player.addEventListener("loadedmetadata", loadedmetadata);
|
||||
player.addEventListener("volumechange", volumechange);
|
||||
player.addEventListener("progress", progress);
|
||||
player.addEventListener("waiting", waiting);
|
||||
player.addEventListener("canplay", canplay);
|
||||
player.addEventListener("error", error);
|
||||
player.addEventListener(
|
||||
"webkitplaybacktargetavailabilitychanged",
|
||||
canAirplay
|
||||
);
|
||||
|
||||
return () => {
|
||||
playerWrapper.removeEventListener("click", isFocused);
|
||||
playerWrapper.removeEventListener("mouseenter", isFocused);
|
||||
playerWrapper.removeEventListener("mouseleave", isFocused);
|
||||
player.removeEventListener("pause", pause);
|
||||
player.removeEventListener("playing", playing);
|
||||
player.removeEventListener("seeking", seeking);
|
||||
player.removeEventListener("seeked", seeked);
|
||||
fscreen.removeEventListener("fullscreenchange", fullscreenchange);
|
||||
player.removeEventListener("timeupdate", timeupdate);
|
||||
player.removeEventListener("loadedmetadata", loadedmetadata);
|
||||
player.removeEventListener("volumechange", volumechange);
|
||||
player.removeEventListener("progress", progress);
|
||||
player.removeEventListener("waiting", waiting);
|
||||
player.removeEventListener("canplay", canplay);
|
||||
player.removeEventListener("error", error);
|
||||
player.removeEventListener(
|
||||
"webkitplaybacktargetavailabilitychanged",
|
||||
canAirplay
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
export function useVideoPlayer(
|
||||
ref: MutableRefObject<HTMLVideoElement | null>,
|
||||
wrapperRef: MutableRefObject<HTMLDivElement | null>
|
||||
) {
|
||||
const [state, setState] = useState(initialPlayerState);
|
||||
const stateRef = useRef<PlayerState | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const player = ref.current;
|
||||
const wrapper = wrapperRef.current;
|
||||
if (player && wrapper) {
|
||||
readState(player, setState);
|
||||
registerListeners(player, setState);
|
||||
setState((s) => ({
|
||||
...s,
|
||||
...populateControls(player, wrapper, setState as any, stateRef),
|
||||
}));
|
||||
}
|
||||
}, [ref, wrapperRef, stateRef]);
|
||||
|
||||
useEffect(() => {
|
||||
stateRef.current = state;
|
||||
}, [state, stateRef]);
|
||||
|
||||
return {
|
||||
playerState: state,
|
||||
};
|
||||
}
|
||||
@ -1,8 +0,0 @@
|
||||
export function handleBuffered(time: number, buffered: TimeRanges): number {
|
||||
for (let i = 0; i < buffered.length; i += 1) {
|
||||
if (buffered.start(buffered.length - 1 - i) < time) {
|
||||
return buffered.end(buffered.length - 1 - i);
|
||||
}
|
||||
}
|
||||
return 0;
|
||||
}
|
||||
@ -1,25 +0,0 @@
|
||||
import { versionedStoreBuilder } from "@/utils/storage";
|
||||
|
||||
export const volumeStore = versionedStoreBuilder()
|
||||
.setKey("mw-volume")
|
||||
.addVersion({
|
||||
version: 0,
|
||||
create() {
|
||||
return {
|
||||
volume: 1,
|
||||
};
|
||||
},
|
||||
})
|
||||
.build();
|
||||
|
||||
export function getStoredVolume(): number {
|
||||
const store = volumeStore.get();
|
||||
return store.volume;
|
||||
}
|
||||
|
||||
export function setStoredVolume(volume: number) {
|
||||
const store = volumeStore.get();
|
||||
store.save({
|
||||
volume,
|
||||
});
|
||||
}
|
||||
@ -1,83 +0,0 @@
|
||||
import { MWMediaMeta } from "@/backend/metadata/types";
|
||||
import { ErrorMessage } from "@/components/layout/ErrorBoundary";
|
||||
import { Link } from "@/components/text/Link";
|
||||
import { conf } from "@/setup/config";
|
||||
import { Component, ReactNode } from "react";
|
||||
import { VideoPlayerHeader } from "./VideoPlayerHeader";
|
||||
|
||||
interface ErrorBoundaryState {
|
||||
hasError: boolean;
|
||||
error?: {
|
||||
name: string;
|
||||
description: string;
|
||||
path: string;
|
||||
};
|
||||
}
|
||||
|
||||
interface VideoErrorBoundaryProps {
|
||||
children?: ReactNode;
|
||||
media?: MWMediaMeta;
|
||||
onGoBack?: () => void;
|
||||
}
|
||||
|
||||
export class VideoErrorBoundary extends Component<
|
||||
VideoErrorBoundaryProps,
|
||||
ErrorBoundaryState
|
||||
> {
|
||||
constructor(props: VideoErrorBoundaryProps) {
|
||||
super(props);
|
||||
this.state = {
|
||||
hasError: false,
|
||||
};
|
||||
}
|
||||
|
||||
static getDerivedStateFromError() {
|
||||
return {
|
||||
hasError: true,
|
||||
};
|
||||
}
|
||||
|
||||
componentDidCatch(error: any, errorInfo: any) {
|
||||
console.error("Render error caught", error, errorInfo);
|
||||
if (error instanceof Error) {
|
||||
const realError: Error = error as Error;
|
||||
this.setState((s) => ({
|
||||
...s,
|
||||
hasError: true,
|
||||
error: {
|
||||
name: realError.name,
|
||||
description: realError.message,
|
||||
path: errorInfo.componentStack.split("\n")[1],
|
||||
},
|
||||
}));
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
if (!this.state.hasError) return this.props.children;
|
||||
|
||||
// TODO make responsive, needs to work in tiny player
|
||||
|
||||
return (
|
||||
<div className="absolute inset-0 bg-denim-100">
|
||||
<div className="pointer-events-auto absolute inset-x-0 top-0 flex flex-col py-6 px-8 pb-2">
|
||||
<VideoPlayerHeader
|
||||
media={this.props.media}
|
||||
onClick={this.props.onGoBack}
|
||||
/>
|
||||
</div>
|
||||
<ErrorMessage error={this.state.error} localSize>
|
||||
The video player encounted a fatal error, please report it to the{" "}
|
||||
<Link url={conf().DISCORD_LINK} newTab>
|
||||
Discord server
|
||||
</Link>{" "}
|
||||
or on{" "}
|
||||
<Link url={conf().GITHUB_LINK} newTab>
|
||||
GitHub
|
||||
</Link>
|
||||
.
|
||||
</ErrorMessage>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,36 +0,0 @@
|
||||
import { MWMediaMeta } from "@/backend/metadata/types";
|
||||
import { IconPatch } from "@/components/buttons/IconPatch";
|
||||
import { Icons } from "@/components/Icon";
|
||||
import { Title } from "@/components/text/Title";
|
||||
import { ReactNode } from "react";
|
||||
import { useVideoPlayerState } from "../VideoContext";
|
||||
import { VideoPlayerHeader } from "./VideoPlayerHeader";
|
||||
|
||||
interface VideoPlayerErrorProps {
|
||||
media?: MWMediaMeta;
|
||||
onGoBack?: () => void;
|
||||
children?: ReactNode;
|
||||
}
|
||||
|
||||
export function VideoPlayerError(props: VideoPlayerErrorProps) {
|
||||
const { videoState } = useVideoPlayerState();
|
||||
|
||||
const err = videoState.error;
|
||||
|
||||
if (!err) return props.children as any;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="absolute inset-0 flex flex-col items-center justify-center bg-denim-100">
|
||||
<IconPatch icon={Icons.WARNING} className="mb-6 text-red-400" />
|
||||
<Title>Failed to load media</Title>
|
||||
<p className="my-6 max-w-lg">
|
||||
{err.name}: {err.description}
|
||||
</p>
|
||||
</div>
|
||||
<div className="pointer-events-auto absolute inset-x-0 top-0 flex flex-col py-6 px-8 pb-2">
|
||||
<VideoPlayerHeader media={props.media} onClick={props.onGoBack} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,68 +0,0 @@
|
||||
import { MWMediaMeta } from "@/backend/metadata/types";
|
||||
import { IconPatch } from "@/components/buttons/IconPatch";
|
||||
import { Icon, Icons } from "@/components/Icon";
|
||||
import { BrandPill } from "@/components/layout/BrandPill";
|
||||
import {
|
||||
getIfBookmarkedFromPortable,
|
||||
useBookmarkContext,
|
||||
} from "@/state/bookmark";
|
||||
import { AirplayControl } from "../controls/AirplayControl";
|
||||
import { ChromeCastControl } from "../controls/ChromeCastControl";
|
||||
|
||||
interface VideoPlayerHeaderProps {
|
||||
media?: MWMediaMeta;
|
||||
onClick?: () => void;
|
||||
isMobile?: boolean;
|
||||
}
|
||||
|
||||
export function VideoPlayerHeader(props: VideoPlayerHeaderProps) {
|
||||
const { bookmarkStore, setItemBookmark } = useBookmarkContext();
|
||||
const isBookmarked = props.media
|
||||
? getIfBookmarkedFromPortable(bookmarkStore.bookmarks, props.media)
|
||||
: false;
|
||||
const showDivider = props.media && props.onClick;
|
||||
return (
|
||||
<div className="flex items-center">
|
||||
<div className="flex flex-1 items-center">
|
||||
<p className="flex items-center">
|
||||
{props.onClick ? (
|
||||
<span
|
||||
onClick={props.onClick}
|
||||
className="flex cursor-pointer items-center py-1 text-white opacity-50 transition-opacity hover:opacity-100"
|
||||
>
|
||||
<Icon className="mr-2" icon={Icons.ARROW_LEFT} />
|
||||
<span>Back to home</span>
|
||||
</span>
|
||||
) : null}
|
||||
{showDivider ? (
|
||||
<span className="mx-4 h-6 w-[1.5px] rotate-[30deg] bg-white opacity-50" />
|
||||
) : null}
|
||||
{props.media ? (
|
||||
<span className="flex items-center text-white">
|
||||
<span>{props.media.title}</span>
|
||||
</span>
|
||||
) : null}
|
||||
</p>
|
||||
{props.media && (
|
||||
<IconPatch
|
||||
clickable
|
||||
transparent
|
||||
icon={isBookmarked ? Icons.BOOKMARK : Icons.BOOKMARK_OUTLINE}
|
||||
className="ml-2 text-white"
|
||||
onClick={() =>
|
||||
props.media && setItemBookmark(props.media, !isBookmarked)
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
{props.isMobile ? (
|
||||
<>
|
||||
<AirplayControl />
|
||||
<ChromeCastControl />
|
||||
</>
|
||||
) : (
|
||||
<BrandPill />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,27 +0,0 @@
|
||||
import { Icon, Icons } from "@/components/Icon";
|
||||
import React from "react";
|
||||
|
||||
export interface VideoPlayerIconButtonProps {
|
||||
onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
|
||||
icon: Icons;
|
||||
text?: string;
|
||||
className?: string;
|
||||
iconSize?: string;
|
||||
}
|
||||
|
||||
export function VideoPlayerIconButton(props: VideoPlayerIconButtonProps) {
|
||||
return (
|
||||
<div className={props.className}>
|
||||
<button
|
||||
type="button"
|
||||
onClick={props.onClick}
|
||||
className="group pointer-events-auto p-2 text-white transition-transform duration-100 active:scale-110"
|
||||
>
|
||||
<div className="flex items-center justify-center rounded-full bg-white bg-opacity-0 p-2 transition-colors duration-100 group-hover:bg-opacity-20">
|
||||
<Icon icon={props.icon} className={props.iconSize ?? "text-2xl"} />
|
||||
{props.text ? <span className="ml-2">{props.text}</span> : null}
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,60 +0,0 @@
|
||||
import { useEffect, useRef } from "react";
|
||||
import { useVideoPlayerState } from "../VideoContext";
|
||||
|
||||
interface Props {
|
||||
children?: React.ReactNode;
|
||||
id?: string;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
// TODO store popout in router history so you can press back to yeet
|
||||
// TODO add transition
|
||||
export function VideoPopout(props: Props) {
|
||||
const { videoState } = useVideoPlayerState();
|
||||
const popoutRef = useRef<HTMLDivElement>(null);
|
||||
const isOpen = videoState.popout === props.id;
|
||||
|
||||
useEffect(() => {
|
||||
if (!isOpen) return;
|
||||
const popoutEl = popoutRef.current;
|
||||
function windowClick(e: MouseEvent) {
|
||||
const rect = popoutEl?.getBoundingClientRect();
|
||||
if (rect) {
|
||||
if (
|
||||
e.pageX >= rect.x &&
|
||||
e.pageX <= rect.x + rect.width &&
|
||||
e.pageY >= rect.y &&
|
||||
e.pageY <= rect.y + rect.height
|
||||
) {
|
||||
// inside bounding box of popout
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
videoState.closePopout();
|
||||
}
|
||||
|
||||
window.addEventListener("click", windowClick);
|
||||
return () => {
|
||||
window.removeEventListener("click", windowClick);
|
||||
};
|
||||
}, [isOpen, videoState]);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={[
|
||||
"is-popout absolute inset-x-0 h-0",
|
||||
!isOpen ? "hidden" : "",
|
||||
].join(" ")}
|
||||
>
|
||||
<div className="absolute bottom-10 right-0 h-96 w-72 rounded-lg bg-denim-400">
|
||||
<div
|
||||
ref={popoutRef}
|
||||
className={["h-full w-full", props.className].join(" ")}
|
||||
>
|
||||
{isOpen ? props.children : null}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user