diff --git a/src/video/components/__old/DecoratedVideoPlayer.tsx b/__old/DecoratedVideoPlayer.tsx similarity index 100% rename from src/video/components/__old/DecoratedVideoPlayer.tsx rename to __old/DecoratedVideoPlayer.tsx diff --git a/src/video/components/__old/VideoContext.tsx b/__old/VideoContext.tsx similarity index 100% rename from src/video/components/__old/VideoContext.tsx rename to __old/VideoContext.tsx diff --git a/src/video/components/__old/VideoPlayer.tsx b/__old/VideoPlayer.tsx similarity index 96% rename from src/video/components/__old/VideoPlayer.tsx rename to __old/VideoPlayer.tsx index b16416d5..3e064aa1 100644 --- a/src/video/components/__old/VideoPlayer.tsx +++ b/__old/VideoPlayer.tsx @@ -1,12 +1,12 @@ import { useGoBack } from "@/hooks/useGoBack"; import { useVolumeControl } from "@/hooks/useVolumeToggle"; import { forwardRef, useContext, useEffect, useRef } from "react"; -import { VideoErrorBoundary } from "../../components/video/parts/VideoErrorBoundary"; +import { VideoErrorBoundary } from "./parts/VideoErrorBoundary"; import { useVideoPlayerState, VideoPlayerContext, VideoPlayerContextProvider, -} from "../../video/components./../components/video/VideoContext"; +} from "./VideoContext"; export interface VideoPlayerProps { autoPlay?: boolean; diff --git a/src/video/components/__old/controls/AirplayControl.tsx b/__old/controls/AirplayControl.tsx similarity index 100% rename from src/video/components/__old/controls/AirplayControl.tsx rename to __old/controls/AirplayControl.tsx diff --git a/src/video/components/__old/controls/BackdropControl.tsx b/__old/controls/BackdropControl.tsx similarity index 100% rename from src/video/components/__old/controls/BackdropControl.tsx rename to __old/controls/BackdropControl.tsx diff --git a/src/video/components/__old/controls/ChromeCastControl.tsx b/__old/controls/ChromeCastControl.tsx similarity index 100% rename from src/video/components/__old/controls/ChromeCastControl.tsx rename to __old/controls/ChromeCastControl.tsx diff --git a/src/video/components/__old/controls/FullscreenControl.tsx b/__old/controls/FullscreenControl.tsx similarity index 100% rename from src/video/components/__old/controls/FullscreenControl.tsx rename to __old/controls/FullscreenControl.tsx diff --git a/src/video/components/__old/controls/LoadingControl.tsx b/__old/controls/LoadingControl.tsx similarity index 100% rename from src/video/components/__old/controls/LoadingControl.tsx rename to __old/controls/LoadingControl.tsx diff --git a/src/video/components/__old/controls/MiddlePauseControl.tsx b/__old/controls/MiddlePauseControl.tsx similarity index 100% rename from src/video/components/__old/controls/MiddlePauseControl.tsx rename to __old/controls/MiddlePauseControl.tsx diff --git a/src/video/components/__old/controls/MobileCenterControl.tsx b/__old/controls/MobileCenterControl.tsx similarity index 100% rename from src/video/components/__old/controls/MobileCenterControl.tsx rename to __old/controls/MobileCenterControl.tsx diff --git a/src/video/components/__old/controls/PageTitleControl.tsx b/__old/controls/PageTitleControl.tsx similarity index 100% rename from src/video/components/__old/controls/PageTitleControl.tsx rename to __old/controls/PageTitleControl.tsx diff --git a/src/video/components/__old/controls/PauseControl.tsx b/__old/controls/PauseControl.tsx similarity index 100% rename from src/video/components/__old/controls/PauseControl.tsx rename to __old/controls/PauseControl.tsx diff --git a/src/video/components/__old/controls/ProgressControl.tsx b/__old/controls/ProgressControl.tsx similarity index 100% rename from src/video/components/__old/controls/ProgressControl.tsx rename to __old/controls/ProgressControl.tsx diff --git a/src/video/components/__old/controls/ProgressListenerControl.tsx b/__old/controls/ProgressListenerControl.tsx similarity index 100% rename from src/video/components/__old/controls/ProgressListenerControl.tsx rename to __old/controls/ProgressListenerControl.tsx diff --git a/src/video/components/__old/controls/QualityDisplayControl.tsx b/__old/controls/QualityDisplayControl.tsx similarity index 100% rename from src/video/components/__old/controls/QualityDisplayControl.tsx rename to __old/controls/QualityDisplayControl.tsx diff --git a/src/video/components/__old/controls/SeriesSelectionControl.tsx b/__old/controls/SeriesSelectionControl.tsx similarity index 100% rename from src/video/components/__old/controls/SeriesSelectionControl.tsx rename to __old/controls/SeriesSelectionControl.tsx diff --git a/src/video/components/__old/controls/ShowControl.tsx b/__old/controls/ShowControl.tsx similarity index 100% rename from src/video/components/__old/controls/ShowControl.tsx rename to __old/controls/ShowControl.tsx diff --git a/src/video/components/__old/controls/ShowTitleControl.tsx b/__old/controls/ShowTitleControl.tsx similarity index 100% rename from src/video/components/__old/controls/ShowTitleControl.tsx rename to __old/controls/ShowTitleControl.tsx diff --git a/src/video/components/__old/controls/SkipTime.tsx b/__old/controls/SkipTime.tsx similarity index 100% rename from src/video/components/__old/controls/SkipTime.tsx rename to __old/controls/SkipTime.tsx diff --git a/src/video/components/__old/controls/SourceControl.tsx b/__old/controls/SourceControl.tsx similarity index 100% rename from src/video/components/__old/controls/SourceControl.tsx rename to __old/controls/SourceControl.tsx diff --git a/src/video/components/__old/controls/SourceSelectionControl.tsx b/__old/controls/SourceSelectionControl.tsx similarity index 100% rename from src/video/components/__old/controls/SourceSelectionControl.tsx rename to __old/controls/SourceSelectionControl.tsx diff --git a/src/video/components/__old/controls/TimeControl.tsx b/__old/controls/TimeControl.tsx similarity index 100% rename from src/video/components/__old/controls/TimeControl.tsx rename to __old/controls/TimeControl.tsx diff --git a/src/video/components/__old/controls/VolumeControl.tsx b/__old/controls/VolumeControl.tsx similarity index 100% rename from src/video/components/__old/controls/VolumeControl.tsx rename to __old/controls/VolumeControl.tsx diff --git a/src/video/components/__old/hooks/controlVideo.ts b/__old/hooks/controlVideo.ts similarity index 100% rename from src/video/components/__old/hooks/controlVideo.ts rename to __old/hooks/controlVideo.ts diff --git a/src/video/components/__old/hooks/useCurrentSeriesEpisodeInfo.ts b/__old/hooks/useCurrentSeriesEpisodeInfo.ts similarity index 100% rename from src/video/components/__old/hooks/useCurrentSeriesEpisodeInfo.ts rename to __old/hooks/useCurrentSeriesEpisodeInfo.ts diff --git a/src/video/components/__old/hooks/useVideoPlayer.ts b/__old/hooks/useVideoPlayer.ts similarity index 100% rename from src/video/components/__old/hooks/useVideoPlayer.ts rename to __old/hooks/useVideoPlayer.ts diff --git a/src/video/components/__old/hooks/utils.ts b/__old/hooks/utils.ts similarity index 100% rename from src/video/components/__old/hooks/utils.ts rename to __old/hooks/utils.ts diff --git a/src/video/components/__old/hooks/volumeStore.ts b/__old/hooks/volumeStore.ts similarity index 100% rename from src/video/components/__old/hooks/volumeStore.ts rename to __old/hooks/volumeStore.ts diff --git a/src/video/components/__old/parts/VideoErrorBoundary.tsx b/__old/parts/VideoErrorBoundary.tsx similarity index 100% rename from src/video/components/__old/parts/VideoErrorBoundary.tsx rename to __old/parts/VideoErrorBoundary.tsx diff --git a/src/video/components/__old/parts/VideoPlayerError.tsx b/__old/parts/VideoPlayerError.tsx similarity index 100% rename from src/video/components/__old/parts/VideoPlayerError.tsx rename to __old/parts/VideoPlayerError.tsx diff --git a/src/video/components/__old/parts/VideoPlayerHeader.tsx b/__old/parts/VideoPlayerHeader.tsx similarity index 100% rename from src/video/components/__old/parts/VideoPlayerHeader.tsx rename to __old/parts/VideoPlayerHeader.tsx diff --git a/src/video/components/__old/parts/VideoPlayerIconButton.tsx b/__old/parts/VideoPlayerIconButton.tsx similarity index 100% rename from src/video/components/__old/parts/VideoPlayerIconButton.tsx rename to __old/parts/VideoPlayerIconButton.tsx diff --git a/src/video/components/__old/parts/VideoPopout.tsx b/__old/parts/VideoPopout.tsx similarity index 100% rename from src/video/components/__old/parts/VideoPopout.tsx rename to __old/parts/VideoPopout.tsx diff --git a/src/hooks/useVolumeToggle.ts b/src/hooks/useVolumeToggle.ts index 7b814762..b0fad7b6 100644 --- a/src/hooks/useVolumeToggle.ts +++ b/src/hooks/useVolumeToggle.ts @@ -1,4 +1,4 @@ -import { useVideoPlayerState } from "@/components/video/VideoContext"; +import { useVideoPlayerState } from "@/../__old/VideoContext"; import { useState } from "react"; export function useVolumeControl() { diff --git a/src/video/components/VideoPlayerBase.tsx b/src/video/components/VideoPlayerBase.tsx index b151250b..3fe23298 100644 --- a/src/video/components/VideoPlayerBase.tsx +++ b/src/video/components/VideoPlayerBase.tsx @@ -1,10 +1,11 @@ import { VideoPlayerContextProvider } from "../state/hooks"; +import { VideoElementInternal } from "./internal/VideoElementInternal"; -export interface VideoPlayerProps { +export interface VideoPlayerBaseProps { children?: React.ReactNode; } -export function VideoPlayer(props: VideoPlayerProps) { +export function VideoPlayerBase(props: VideoPlayerBaseProps) { // TODO error boundary // TODO move error boundary to only decorated, shouldn't have styling // TODO internal controls @@ -12,6 +13,7 @@ export function VideoPlayer(props: VideoPlayerProps) { return (
+
{props.children}
diff --git a/src/video/components/actions/PauseAction.tsx b/src/video/components/actions/PauseAction.tsx new file mode 100644 index 00000000..558ac914 --- /dev/null +++ b/src/video/components/actions/PauseAction.tsx @@ -0,0 +1,34 @@ +import { Icons } from "@/components/Icon"; +import { useVideoPlayerDescriptor } from "@/video/state/hooks"; +import { useControls } from "@/video/state/logic/controls"; +import { useMediaPlaying } from "@/video/state/logic/mediaplaying"; +import { useCallback } from "react"; +import { VideoPlayerIconButton } from "../parts/VideoPlayerIconButton"; + +interface Props { + className?: string; + iconSize?: string; +} + +export function PauseAction(props: Props) { + const descriptor = useVideoPlayerDescriptor(); + const mediaPlaying = useMediaPlaying(descriptor); + const controls = useControls(descriptor); + + const handleClick = useCallback(() => { + if (mediaPlaying.isPlaying) controls.pause(); + else controls.play(); + }, [mediaPlaying, controls]); + + // TODO add seeking back + const icon = mediaPlaying.isPlaying ? Icons.PAUSE : Icons.PLAY; + + return ( + + ); +} diff --git a/src/video/components/internal/VideoElementInternal.tsx b/src/video/components/internal/VideoElementInternal.tsx new file mode 100644 index 00000000..d084b1ac --- /dev/null +++ b/src/video/components/internal/VideoElementInternal.tsx @@ -0,0 +1,30 @@ +import { useVideoPlayerDescriptor } from "@/video/state/hooks"; +import { setProvider, unsetStateProvider } from "@/video/state/providers/utils"; +import { createVideoStateProvider } from "@/video/state/providers/videoStateProvider"; +import { useEffect, useRef } from "react"; + +export function VideoElementInternal() { + const descriptor = useVideoPlayerDescriptor(); + const ref = useRef(null); + + useEffect(() => { + if (!ref.current) return; + const provider = createVideoStateProvider(descriptor, ref.current); + setProvider(descriptor, provider); + const { destroy } = provider.providerStart(); + return () => { + unsetStateProvider(descriptor); + destroy(); + }; + }, [descriptor]); + + // TODO autoplay and muted + return ( +