From fa1ad069682329fbc6be1e90ec1d9c073dad9752 Mon Sep 17 00:00:00 2001 From: mrjvs Date: Sat, 14 Oct 2023 22:28:13 +0200 Subject: [PATCH] Delete old video components, delete popout system, delete old hooks and implement new volume store --- src/_oldvideo/components/VideoPlayer.tsx | 180 --------- src/_oldvideo/components/VideoPlayerBase.tsx | 68 ---- .../components/actions/AirplayAction.tsx | 32 -- .../components/actions/BackdropAction.tsx | 131 ------ .../actions/CaptionRendererAction.tsx | 120 ------ .../components/actions/CastingTextAction.tsx | 23 -- .../components/actions/ChromecastAction.tsx | 61 --- .../components/actions/DividerAction.tsx | 12 - .../components/actions/FullscreenAction.tsx | 34 -- .../components/actions/HeaderAction.tsx | 16 - .../actions/KeyboardShortcutsAction.tsx | 101 ----- .../components/actions/LoadingAction.tsx | 17 - .../components/actions/MetaAction.tsx | 53 --- .../components/actions/MiddlePauseAction.tsx | 33 -- .../components/actions/MobileCenterAction.tsx | 25 -- .../components/actions/PageTitleAction.tsx | 23 -- .../components/actions/PauseAction.tsx | 36 -- .../actions/PictureInPictureAction.tsx | 42 -- .../components/actions/ProgressAction.tsx | 119 ------ .../actions/SeriesSelectionAction.tsx | 40 -- .../components/actions/SettingsAction.tsx | 41 -- .../components/actions/ShowTitleAction.tsx | 18 - .../components/actions/SkipTimeAction.tsx | 49 --- .../components/actions/ThumbnailAction.tsx | 121 ------ .../components/actions/TimeAction.tsx | 92 ----- .../components/actions/VolumeAction.tsx | 93 ----- .../actions/VolumeAdjustedAction.tsx | 32 -- .../list-entries/CaptionsSelectionAction.tsx | 19 - .../actions/list-entries/DownloadAction.tsx | 33 -- .../PlaybackSpeedSelectionAction.tsx | 19 - .../list-entries/QualityDisplayAction.tsx | 17 - .../list-entries/SourceSelectionAction.tsx | 25 -- .../components/controllers/MetaController.tsx | 46 --- .../ProgressListenerController.tsx | 90 ----- .../controllers/SeriesController.tsx | 43 -- .../controllers/SourceController.tsx | 72 ---- .../hooks/useCurrentSeriesEpisodeInfo.ts | 41 -- .../components/hooks/useInitialized.ts | 11 - .../components/hooks/useSyncPopouts.ts | 72 ---- src/_oldvideo/components/hooks/volumeStore.ts | 28 -- .../components/internal/CastingInternal.tsx | 73 ---- .../internal/ThumbnailGeneratorInternal.tsx | 111 ----- .../internal/VideoElementInternal.tsx | 60 --- .../internal/WrapperRegisterInternal.tsx | 19 - .../components/parts/VideoErrorBoundary.tsx | 82 ---- .../components/parts/VideoPlayerError.tsx | 40 -- .../components/parts/VideoPlayerHeader.tsx | 84 ---- .../parts/VideoPlayerIconButton.tsx | 51 --- .../components/parts/VideoPopout.tsx | 64 --- .../popouts/CaptionSelectionPopout.tsx | 146 ------- .../popouts/CaptionSettingsPopout.tsx | 81 ---- .../popouts/EpisodeSelectionPopout.tsx | 197 --------- .../popouts/PlaybackSpeedPopout.tsx | 75 ---- .../components/popouts/PopoutAnchor.tsx | 44 -- .../popouts/PopoutProviderAction.tsx | 46 --- .../components/popouts/PopoutUtils.tsx | 213 ---------- .../components/popouts/SettingsPopout.tsx | 41 -- .../popouts/SourceSelectionPopout.tsx | 287 ------------- src/_oldvideo/state/cache.ts | 9 - src/_oldvideo/state/events.ts | 35 -- src/_oldvideo/state/hooks.tsx | 37 -- src/_oldvideo/state/init.ts | 95 ----- src/_oldvideo/state/logic/controls.ts | 135 ------- src/_oldvideo/state/logic/error.ts | 39 -- src/_oldvideo/state/logic/interface.ts | 54 --- src/_oldvideo/state/logic/mediaplaying.ts | 63 --- src/_oldvideo/state/logic/meta.ts | 36 -- src/_oldvideo/state/logic/misc.ts | 44 -- src/_oldvideo/state/logic/progress.ts | 48 --- src/_oldvideo/state/logic/source.ts | 49 --- .../state/providers/castingStateProvider.ts | 340 ---------------- src/_oldvideo/state/providers/helpers.ts | 17 - .../state/providers/providerTypes.ts | 32 -- src/_oldvideo/state/providers/utils.ts | 44 -- .../state/providers/videoStateProvider.ts | 382 ------------------ src/_oldvideo/state/types.ts | 108 ----- .../player/hooks/useInitializePlayer.ts | 10 +- src/components/player/hooks/useVolume.ts | 5 +- src/components/popout/FloatingAnchor.tsx | 47 --- src/components/popout/FloatingCard.tsx | 194 --------- src/components/popout/FloatingContainer.tsx | 76 ---- src/components/popout/FloatingDragHandle.tsx | 19 - src/components/popout/FloatingView.tsx | 41 -- .../positions/FloatingCardAnchorPosition.tsx | 81 ---- .../positions/FloatingCardMobilePosition.tsx | 103 ----- src/hooks/useScrape.ts | 75 ---- src/hooks/useVolumeToggle.ts | 25 -- src/pages/parts/errors/ErrorWrapperPart.tsx | 16 +- src/stores/volume/index.ts | 10 +- 89 files changed, 10 insertions(+), 6101 deletions(-) delete mode 100644 src/_oldvideo/components/VideoPlayer.tsx delete mode 100644 src/_oldvideo/components/VideoPlayerBase.tsx delete mode 100644 src/_oldvideo/components/actions/AirplayAction.tsx delete mode 100644 src/_oldvideo/components/actions/BackdropAction.tsx delete mode 100644 src/_oldvideo/components/actions/CaptionRendererAction.tsx delete mode 100644 src/_oldvideo/components/actions/CastingTextAction.tsx delete mode 100644 src/_oldvideo/components/actions/ChromecastAction.tsx delete mode 100644 src/_oldvideo/components/actions/DividerAction.tsx delete mode 100644 src/_oldvideo/components/actions/FullscreenAction.tsx delete mode 100644 src/_oldvideo/components/actions/HeaderAction.tsx delete mode 100644 src/_oldvideo/components/actions/KeyboardShortcutsAction.tsx delete mode 100644 src/_oldvideo/components/actions/LoadingAction.tsx delete mode 100644 src/_oldvideo/components/actions/MetaAction.tsx delete mode 100644 src/_oldvideo/components/actions/MiddlePauseAction.tsx delete mode 100644 src/_oldvideo/components/actions/MobileCenterAction.tsx delete mode 100644 src/_oldvideo/components/actions/PageTitleAction.tsx delete mode 100644 src/_oldvideo/components/actions/PauseAction.tsx delete mode 100644 src/_oldvideo/components/actions/PictureInPictureAction.tsx delete mode 100644 src/_oldvideo/components/actions/ProgressAction.tsx delete mode 100644 src/_oldvideo/components/actions/SeriesSelectionAction.tsx delete mode 100644 src/_oldvideo/components/actions/SettingsAction.tsx delete mode 100644 src/_oldvideo/components/actions/ShowTitleAction.tsx delete mode 100644 src/_oldvideo/components/actions/SkipTimeAction.tsx delete mode 100644 src/_oldvideo/components/actions/ThumbnailAction.tsx delete mode 100644 src/_oldvideo/components/actions/TimeAction.tsx delete mode 100644 src/_oldvideo/components/actions/VolumeAction.tsx delete mode 100644 src/_oldvideo/components/actions/VolumeAdjustedAction.tsx delete mode 100644 src/_oldvideo/components/actions/list-entries/CaptionsSelectionAction.tsx delete mode 100644 src/_oldvideo/components/actions/list-entries/DownloadAction.tsx delete mode 100644 src/_oldvideo/components/actions/list-entries/PlaybackSpeedSelectionAction.tsx delete mode 100644 src/_oldvideo/components/actions/list-entries/QualityDisplayAction.tsx delete mode 100644 src/_oldvideo/components/actions/list-entries/SourceSelectionAction.tsx delete mode 100644 src/_oldvideo/components/controllers/MetaController.tsx delete mode 100644 src/_oldvideo/components/controllers/ProgressListenerController.tsx delete mode 100644 src/_oldvideo/components/controllers/SeriesController.tsx delete mode 100644 src/_oldvideo/components/controllers/SourceController.tsx delete mode 100644 src/_oldvideo/components/hooks/useCurrentSeriesEpisodeInfo.ts delete mode 100644 src/_oldvideo/components/hooks/useInitialized.ts delete mode 100644 src/_oldvideo/components/hooks/useSyncPopouts.ts delete mode 100644 src/_oldvideo/components/hooks/volumeStore.ts delete mode 100644 src/_oldvideo/components/internal/CastingInternal.tsx delete mode 100644 src/_oldvideo/components/internal/ThumbnailGeneratorInternal.tsx delete mode 100644 src/_oldvideo/components/internal/VideoElementInternal.tsx delete mode 100644 src/_oldvideo/components/internal/WrapperRegisterInternal.tsx delete mode 100644 src/_oldvideo/components/parts/VideoErrorBoundary.tsx delete mode 100644 src/_oldvideo/components/parts/VideoPlayerError.tsx delete mode 100644 src/_oldvideo/components/parts/VideoPlayerHeader.tsx delete mode 100644 src/_oldvideo/components/parts/VideoPlayerIconButton.tsx delete mode 100644 src/_oldvideo/components/parts/VideoPopout.tsx delete mode 100644 src/_oldvideo/components/popouts/CaptionSelectionPopout.tsx delete mode 100644 src/_oldvideo/components/popouts/CaptionSettingsPopout.tsx delete mode 100644 src/_oldvideo/components/popouts/EpisodeSelectionPopout.tsx delete mode 100644 src/_oldvideo/components/popouts/PlaybackSpeedPopout.tsx delete mode 100644 src/_oldvideo/components/popouts/PopoutAnchor.tsx delete mode 100644 src/_oldvideo/components/popouts/PopoutProviderAction.tsx delete mode 100644 src/_oldvideo/components/popouts/PopoutUtils.tsx delete mode 100644 src/_oldvideo/components/popouts/SettingsPopout.tsx delete mode 100644 src/_oldvideo/components/popouts/SourceSelectionPopout.tsx delete mode 100644 src/_oldvideo/state/cache.ts delete mode 100644 src/_oldvideo/state/events.ts delete mode 100644 src/_oldvideo/state/hooks.tsx delete mode 100644 src/_oldvideo/state/init.ts delete mode 100644 src/_oldvideo/state/logic/controls.ts delete mode 100644 src/_oldvideo/state/logic/error.ts delete mode 100644 src/_oldvideo/state/logic/interface.ts delete mode 100644 src/_oldvideo/state/logic/mediaplaying.ts delete mode 100644 src/_oldvideo/state/logic/meta.ts delete mode 100644 src/_oldvideo/state/logic/misc.ts delete mode 100644 src/_oldvideo/state/logic/progress.ts delete mode 100644 src/_oldvideo/state/logic/source.ts delete mode 100644 src/_oldvideo/state/providers/castingStateProvider.ts delete mode 100644 src/_oldvideo/state/providers/helpers.ts delete mode 100644 src/_oldvideo/state/providers/providerTypes.ts delete mode 100644 src/_oldvideo/state/providers/utils.ts delete mode 100644 src/_oldvideo/state/providers/videoStateProvider.ts delete mode 100644 src/_oldvideo/state/types.ts delete mode 100644 src/components/popout/FloatingAnchor.tsx delete mode 100644 src/components/popout/FloatingCard.tsx delete mode 100644 src/components/popout/FloatingContainer.tsx delete mode 100644 src/components/popout/FloatingDragHandle.tsx delete mode 100644 src/components/popout/FloatingView.tsx delete mode 100644 src/components/popout/positions/FloatingCardAnchorPosition.tsx delete mode 100644 src/components/popout/positions/FloatingCardMobilePosition.tsx delete mode 100644 src/hooks/useScrape.ts delete mode 100644 src/hooks/useVolumeToggle.ts 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 ( -