diff --git a/src/_oldvideo/components/VideoPlayer.tsx b/src/_oldvideo/components/VideoPlayer.tsx deleted file mode 100644 index 30b521b0..00000000 --- a/src/_oldvideo/components/VideoPlayer.tsx +++ /dev/null @@ -1,180 +0,0 @@ -import { ReactNode, useCallback, useState } from "react"; - -import { AirplayAction } from "@/_oldvideo/components/actions/AirplayAction"; -import { BackdropAction } from "@/_oldvideo/components/actions/BackdropAction"; -import { CastingTextAction } from "@/_oldvideo/components/actions/CastingTextAction"; -import { ChromecastAction } from "@/_oldvideo/components/actions/ChromecastAction"; -import { FullscreenAction } from "@/_oldvideo/components/actions/FullscreenAction"; -import { HeaderAction } from "@/_oldvideo/components/actions/HeaderAction"; -import { KeyboardShortcutsAction } from "@/_oldvideo/components/actions/KeyboardShortcutsAction"; -import { LoadingAction } from "@/_oldvideo/components/actions/LoadingAction"; -import { MiddlePauseAction } from "@/_oldvideo/components/actions/MiddlePauseAction"; -import { MobileCenterAction } from "@/_oldvideo/components/actions/MobileCenterAction"; -import { PageTitleAction } from "@/_oldvideo/components/actions/PageTitleAction"; -import { PauseAction } from "@/_oldvideo/components/actions/PauseAction"; -import { PictureInPictureAction } from "@/_oldvideo/components/actions/PictureInPictureAction"; -import { ProgressAction } from "@/_oldvideo/components/actions/ProgressAction"; -import { SeriesSelectionAction } from "@/_oldvideo/components/actions/SeriesSelectionAction"; -import { ShowTitleAction } from "@/_oldvideo/components/actions/ShowTitleAction"; -import { SkipTimeAction } from "@/_oldvideo/components/actions/SkipTimeAction"; -import { TimeAction } from "@/_oldvideo/components/actions/TimeAction"; -import { VolumeAction } from "@/_oldvideo/components/actions/VolumeAction"; -import { VideoPlayerError } from "@/_oldvideo/components/parts/VideoPlayerError"; -import { PopoutProviderAction } from "@/_oldvideo/components/popouts/PopoutProviderAction"; -import { - VideoPlayerBase, - VideoPlayerBaseProps, -} from "@/_oldvideo/components/VideoPlayerBase"; -import { useVideoPlayerDescriptor } from "@/_oldvideo/state/hooks"; -import { useControls } from "@/_oldvideo/state/logic/controls"; -import { Transition } from "@/components/Transition"; -import { useIsMobile } from "@/hooks/useIsMobile"; - -import { CaptionRendererAction } from "./actions/CaptionRendererAction"; -import { DividerAction } from "./actions/DividerAction"; -import { SettingsAction } from "./actions/SettingsAction"; -import { VolumeAdjustedAction } from "./actions/VolumeAdjustedAction"; - -type Props = VideoPlayerBaseProps; - -function CenterPosition(props: { children: ReactNode }) { - return ( -
- {props.children} -
- ); -} - -function LeftSideControls() { - const descriptor = useVideoPlayerDescriptor(); - const controls = useControls(descriptor); - - const handleMouseEnter = useCallback(() => { - controls.setLeftControlsHover(true); - }, [controls]); - const handleMouseLeave = useCallback(() => { - controls.setLeftControlsHover(false); - }, [controls]); - - return ( - <> -
- - - - -
- - - ); -} - -export function VideoPlayer(props: Props) { - const [show, setShow] = useState(false); - const { isMobile } = useIsMobile(); - - const onBackdropChange = useCallback( - (showing: boolean) => { - setShow(showing); - }, - [setShow] - ); - - return ( - - {({ isFullscreen }) => ( - <> - - - - - - - - - - - - - - - {isMobile ? ( - - - - ) : ( - "" - )} - - - - -
- {isMobile && } - -
-
- {isMobile ? ( -
-
-
- - - -
- -
- ) : ( - <> - -
- - - - - - - - - )} -
- - {show ? : null} - - - {props.children} - - - )} - - ); -} diff --git a/src/_oldvideo/components/VideoPlayerBase.tsx b/src/_oldvideo/components/VideoPlayerBase.tsx deleted file mode 100644 index ac180116..00000000 --- a/src/_oldvideo/components/VideoPlayerBase.tsx +++ /dev/null @@ -1,68 +0,0 @@ -import { useRef } from "react"; - -import { CastingInternal } from "@/_oldvideo/components/internal/CastingInternal"; -import { WrapperRegisterInternal } from "@/_oldvideo/components/internal/WrapperRegisterInternal"; -import { VideoErrorBoundary } from "@/_oldvideo/components/parts/VideoErrorBoundary"; -import { useInterface } from "@/_oldvideo/state/logic/interface"; -import { useMeta } from "@/_oldvideo/state/logic/meta"; - -import { MetaAction } from "./actions/MetaAction"; -import ThumbnailGeneratorInternal from "./internal/ThumbnailGeneratorInternal"; -import { VideoElementInternal } from "./internal/VideoElementInternal"; -import { - VideoPlayerContextProvider, - useVideoPlayerDescriptor, -} from "../state/hooks"; - -export interface VideoPlayerBaseProps { - children?: - | React.ReactNode - | ((data: { isFullscreen: boolean }) => React.ReactNode); - autoPlay?: boolean; - includeSafeArea?: boolean; - onGoBack?: () => void; -} - -function VideoPlayerBaseWithState(props: VideoPlayerBaseProps) { - const ref = useRef(null); - const descriptor = useVideoPlayerDescriptor(); - const videoInterface = useInterface(descriptor); - const media = useMeta(descriptor); - - const children = - typeof props.children === "function" - ? props.children({ - isFullscreen: videoInterface.isFullscreen, - }) - : props.children; - - // TODO move error boundary to only decorated, shouldn't have styling - return ( - -
- - - - - -
{children}
-
- - ); -} - -export function VideoPlayerBase(props: VideoPlayerBaseProps) { - return ( - - - - ); -} diff --git a/src/_oldvideo/components/actions/AirplayAction.tsx b/src/_oldvideo/components/actions/AirplayAction.tsx deleted file mode 100644 index 738e55da..00000000 --- a/src/_oldvideo/components/actions/AirplayAction.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import { useCallback } from "react"; - -import { useVideoPlayerDescriptor } from "@/_oldvideo/state/hooks"; -import { useControls } from "@/_oldvideo/state/logic/controls"; -import { useMisc } from "@/_oldvideo/state/logic/misc"; -import { Icons } from "@/components/Icon"; - -import { VideoPlayerIconButton } from "../parts/VideoPlayerIconButton"; - -interface Props { - className?: string; -} - -export function AirplayAction(props: Props) { - const descriptor = useVideoPlayerDescriptor(); - const controls = useControls(descriptor); - const misc = useMisc(descriptor); - - const handleClick = useCallback(() => { - controls.startAirplay(); - }, [controls]); - - if (!misc.canAirplay) return null; - - return ( - - ); -} diff --git a/src/_oldvideo/components/actions/BackdropAction.tsx b/src/_oldvideo/components/actions/BackdropAction.tsx deleted file mode 100644 index 2fadf8c5..00000000 --- a/src/_oldvideo/components/actions/BackdropAction.tsx +++ /dev/null @@ -1,131 +0,0 @@ -import React, { useCallback, useEffect, useRef, useState } from "react"; - -import { useVideoPlayerDescriptor } from "@/_oldvideo/state/hooks"; -import { useControls } from "@/_oldvideo/state/logic/controls"; -import { useInterface } from "@/_oldvideo/state/logic/interface"; -import { useMediaPlaying } from "@/_oldvideo/state/logic/mediaplaying"; - -interface BackdropActionProps { - children?: React.ReactNode; - onBackdropChange?: (showing: boolean) => void; -} - -export function BackdropAction(props: BackdropActionProps) { - const descriptor = useVideoPlayerDescriptor(); - const controls = useControls(descriptor); - const mediaPlaying = useMediaPlaying(descriptor); - const videoInterface = useInterface(descriptor); - - const [moved, setMoved] = useState(false); - const timeout = useRef | null>(null); - const clickareaRef = useRef(null); - - const lastTouchEnd = useRef(0); - - const handleMouseMove = useCallback( - (e) => { - // to enable thumbnail on mouse hover - e.stopPropagation(); - if (!moved) { - setTimeout(() => { - // If NOT a touch, set moved to true - const isTouch = Date.now() - lastTouchEnd.current < 200; - if (!isTouch) setMoved(true); - }, 20); - } - - // remove after all - if (timeout.current) clearTimeout(timeout.current); - timeout.current = setTimeout(() => { - setMoved(false); - timeout.current = null; - }, 3000); - }, - [setMoved, moved] - ); - - const handleMouseLeave = useCallback(() => { - setMoved(false); - }, [setMoved]); - - const handleClick = useCallback( - ( - e: React.MouseEvent | React.TouchEvent - ) => { - if (!clickareaRef.current || clickareaRef.current !== e.target) return; - - if (videoInterface.popout !== null) return; - - if ((e as React.TouchEvent).type === "touchend") { - lastTouchEnd.current = Date.now(); - return; - } - - if ((e as React.MouseEvent).button !== 0) { - return; // not main button (left click), exit event - } - - setTimeout(() => { - if (Date.now() - lastTouchEnd.current < 200) { - setMoved((v) => !v); - return; - } - - if (mediaPlaying.isPlaying) controls.pause(); - else controls.play(); - }, 20); - }, - [controls, mediaPlaying, videoInterface] - ); - const handleDoubleClick = useCallback( - (e: React.MouseEvent) => { - if (!clickareaRef.current || clickareaRef.current !== e.target) return; - - if (!videoInterface.isFullscreen) controls.enterFullscreen(); - else controls.exitFullscreen(); - }, - [controls, videoInterface] - ); - - const lastBackdropValue = useRef(null); - useEffect(() => { - const currentValue = - moved || mediaPlaying.isPaused || !!videoInterface.popout; - if (currentValue !== lastBackdropValue.current) { - lastBackdropValue.current = currentValue; - props.onBackdropChange?.(currentValue); - } - }, [moved, mediaPlaying, props, videoInterface]); - const showUI = moved || mediaPlaying.isPaused || !!videoInterface.popout; - - return ( -
-
-
-
-
- {props.children} -
-
- ); -} diff --git a/src/_oldvideo/components/actions/CaptionRendererAction.tsx b/src/_oldvideo/components/actions/CaptionRendererAction.tsx deleted file mode 100644 index fd3cc4e9..00000000 --- a/src/_oldvideo/components/actions/CaptionRendererAction.tsx +++ /dev/null @@ -1,120 +0,0 @@ -import { useCallback, useEffect, useRef } from "react"; -import { useAsync } from "react-use"; -import { ContentCaption } from "subsrt-ts/dist/types/handler"; - -import { getPlayerState } from "@/_oldvideo/state/cache"; -import { parseSubtitles, sanitize } from "@/backend/helpers/captions"; -import { Transition } from "@/components/Transition"; -import { useSettings } from "@/state/settings"; - -import { useVideoPlayerDescriptor } from "../../state/hooks"; -import { useProgress } from "../../state/logic/progress"; -import { useSource } from "../../state/logic/source"; - -export function CaptionCue({ text, scale }: { text?: string; scale?: number }) { - const { captionSettings } = useSettings(); - const textWithNewlines = (text || "").replaceAll(/\r?\n/g, "
"); - - // https://www.w3.org/TR/webvtt1/#dom-construction-rules - // added a
for newlines - const html = sanitize(textWithNewlines, { - ALLOWED_TAGS: ["c", "b", "i", "u", "span", "ruby", "rt", "br"], - ADD_TAGS: ["v", "lang"], - ALLOWED_ATTR: ["title", "lang"], - }); - - return ( -

- -

- ); -} - -export function CaptionRendererAction({ - isControlsShown, -}: { - isControlsShown: boolean; -}) { - const descriptor = useVideoPlayerDescriptor(); - const source = useSource(descriptor).source; - const videoTime = useProgress(descriptor).time; - const { captionSettings, setCaptionDelay } = useSettings(); - const captions = useRef([]); - const isCasting = getPlayerState(descriptor).casting.isCasting; - - const captionSetRef = useRef<(delay: number) => void>(setCaptionDelay); - useEffect(() => { - captionSetRef.current = setCaptionDelay; - }, [setCaptionDelay]); - - useAsync(async () => { - const blobUrl = source?.caption?.url; - if (blobUrl) { - const result = await fetch(blobUrl); - const text = await result.text(); - try { - captions.current = parseSubtitles(text); - } catch (error) { - captions.current = []; - } - // reset delay on every subtitle change - setCaptionDelay(0); - } else { - captions.current = []; - } - }, [source?.caption?.url]); - - // reset delay when loading new source url - useEffect(() => { - captionSetRef.current(0); - }, [source?.caption?.url]); - - const isVisible = useCallback( - ( - start: number, - end: number, - delay: number, - currentTime: number - ): boolean => { - const delayedStart = start / 1000 + delay; - const delayedEnd = end / 1000 + delay; - return ( - Math.max(0, delayedStart) <= currentTime && - Math.max(0, delayedEnd) >= currentTime - ); - }, - [] - ); - if (isCasting) return null; - if (!captions.current.length) return null; - const visibileCaptions = captions.current.filter(({ start, end }) => - isVisible(start, end, captionSettings.delay, videoTime) - ); - return ( - - {visibileCaptions.map(({ start, end, content }) => ( - - ))} - - ); -} diff --git a/src/_oldvideo/components/actions/CastingTextAction.tsx b/src/_oldvideo/components/actions/CastingTextAction.tsx deleted file mode 100644 index 582ec9b2..00000000 --- a/src/_oldvideo/components/actions/CastingTextAction.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import { useTranslation } from "react-i18next"; - -import { useVideoPlayerDescriptor } from "@/_oldvideo/state/hooks"; -import { useMisc } from "@/_oldvideo/state/logic/misc"; -import { Icon, Icons } from "@/components/Icon"; - -export function CastingTextAction() { - const { t } = useTranslation(); - - const descriptor = useVideoPlayerDescriptor(); - const misc = useMisc(descriptor); - - if (!misc.isCasting) return null; - - return ( -
-
- -
-

{t("casting.casting")}

-
- ); -} diff --git a/src/_oldvideo/components/actions/ChromecastAction.tsx b/src/_oldvideo/components/actions/ChromecastAction.tsx deleted file mode 100644 index e42e5df9..00000000 --- a/src/_oldvideo/components/actions/ChromecastAction.tsx +++ /dev/null @@ -1,61 +0,0 @@ -import { useCallback, useEffect, useRef, useState } from "react"; - -import { VideoPlayerIconButton } from "@/_oldvideo/components/parts/VideoPlayerIconButton"; -import { useVideoPlayerDescriptor } from "@/_oldvideo/state/hooks"; -import { useMisc } from "@/_oldvideo/state/logic/misc"; -import { Icons } from "@/components/Icon"; - -interface Props { - className?: string; -} - -export function ChromecastAction(props: Props) { - const [hidden, setHidden] = useState(false); - const descriptor = useVideoPlayerDescriptor(); - const misc = useMisc(descriptor); - const isCasting = misc.isCasting; - const ref = useRef(null); - - const setButtonVisibility = useCallback( - (tag: HTMLElement) => { - const isVisible = (tag.getAttribute("style") ?? "").includes("inline"); - setHidden(!isVisible); - }, - [setHidden] - ); - - useEffect(() => { - const tag = ref.current?.querySelector("google-cast-launcher"); - if (!tag) return; - - const observer = new MutationObserver(() => { - setButtonVisibility(tag); - }); - - observer.observe(tag, { attributes: true, attributeFilter: ["style"] }); - setButtonVisibility(tag); - - return () => { - observer.disconnect(); - }; - }, [setButtonVisibility]); - - return ( -