move video to old and setup new video structure

Co-authored-by: William Oldham <github@binaryoverload.co.uk>

package.json

@@ -34,7 +34,8 @@
     "react-use": "^17.4.0",
     "slugify": "^1.6.6",
     "subsrt-ts": "^2.1.1",
-    "unpacker": "^1.0.1"
+    "unpacker": "^1.0.1",
+    "zustand": "^4.3.9"
   },
   "scripts": {
     "dev": "vite",

src/_oldvideo/components/VideoPlayer.tsx

@@ -1,34 +1,34 @@
 import { ReactNode, useCallback, useState } from "react";
 
-import { Transition } from "@/components/Transition";
+import { AirplayAction } from "@/_oldvideo/components/actions/AirplayAction";
-import { useIsMobile } from "@/hooks/useIsMobile";
+import { BackdropAction } from "@/_oldvideo/components/actions/BackdropAction";
-import { AirplayAction } from "@/video/components/actions/AirplayAction";
+import { CastingTextAction } from "@/_oldvideo/components/actions/CastingTextAction";
-import { BackdropAction } from "@/video/components/actions/BackdropAction";
+import { ChromecastAction } from "@/_oldvideo/components/actions/ChromecastAction";
-import { CastingTextAction } from "@/video/components/actions/CastingTextAction";
+import { FullscreenAction } from "@/_oldvideo/components/actions/FullscreenAction";
-import { ChromecastAction } from "@/video/components/actions/ChromecastAction";
+import { HeaderAction } from "@/_oldvideo/components/actions/HeaderAction";
-import { FullscreenAction } from "@/video/components/actions/FullscreenAction";
+import { KeyboardShortcutsAction } from "@/_oldvideo/components/actions/KeyboardShortcutsAction";
-import { HeaderAction } from "@/video/components/actions/HeaderAction";
+import { LoadingAction } from "@/_oldvideo/components/actions/LoadingAction";
-import { KeyboardShortcutsAction } from "@/video/components/actions/KeyboardShortcutsAction";
+import { MiddlePauseAction } from "@/_oldvideo/components/actions/MiddlePauseAction";
-import { LoadingAction } from "@/video/components/actions/LoadingAction";
+import { MobileCenterAction } from "@/_oldvideo/components/actions/MobileCenterAction";
-import { MiddlePauseAction } from "@/video/components/actions/MiddlePauseAction";
+import { PageTitleAction } from "@/_oldvideo/components/actions/PageTitleAction";
-import { MobileCenterAction } from "@/video/components/actions/MobileCenterAction";
+import { PauseAction } from "@/_oldvideo/components/actions/PauseAction";
-import { PageTitleAction } from "@/video/components/actions/PageTitleAction";
+import { PictureInPictureAction } from "@/_oldvideo/components/actions/PictureInPictureAction";
-import { PauseAction } from "@/video/components/actions/PauseAction";
+import { ProgressAction } from "@/_oldvideo/components/actions/ProgressAction";
-import { PictureInPictureAction } from "@/video/components/actions/PictureInPictureAction";
+import { SeriesSelectionAction } from "@/_oldvideo/components/actions/SeriesSelectionAction";
-import { ProgressAction } from "@/video/components/actions/ProgressAction";
+import { ShowTitleAction } from "@/_oldvideo/components/actions/ShowTitleAction";
-import { SeriesSelectionAction } from "@/video/components/actions/SeriesSelectionAction";
+import { SkipTimeAction } from "@/_oldvideo/components/actions/SkipTimeAction";
-import { ShowTitleAction } from "@/video/components/actions/ShowTitleAction";
+import { TimeAction } from "@/_oldvideo/components/actions/TimeAction";
-import { SkipTimeAction } from "@/video/components/actions/SkipTimeAction";
+import { VolumeAction } from "@/_oldvideo/components/actions/VolumeAction";
-import { TimeAction } from "@/video/components/actions/TimeAction";
+import { VideoPlayerError } from "@/_oldvideo/components/parts/VideoPlayerError";
-import { VolumeAction } from "@/video/components/actions/VolumeAction";
+import { PopoutProviderAction } from "@/_oldvideo/components/popouts/PopoutProviderAction";
-import { VideoPlayerError } from "@/video/components/parts/VideoPlayerError";
-import { PopoutProviderAction } from "@/video/components/popouts/PopoutProviderAction";
 import {
   VideoPlayerBase,
   VideoPlayerBaseProps,
-} from "@/video/components/VideoPlayerBase";
+} from "@/_oldvideo/components/VideoPlayerBase";
-import { useVideoPlayerDescriptor } from "@/video/state/hooks";
+import { useVideoPlayerDescriptor } from "@/_oldvideo/state/hooks";
-import { useControls } from "@/video/state/logic/controls";
+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";

src/_oldvideo/components/VideoPlayerBase.tsx

@@ -1,10 +1,10 @@
 import { useRef } from "react";
 
-import { CastingInternal } from "@/video/components/internal/CastingInternal";
+import { CastingInternal } from "@/_oldvideo/components/internal/CastingInternal";
-import { WrapperRegisterInternal } from "@/video/components/internal/WrapperRegisterInternal";
+import { WrapperRegisterInternal } from "@/_oldvideo/components/internal/WrapperRegisterInternal";
-import { VideoErrorBoundary } from "@/video/components/parts/VideoErrorBoundary";
+import { VideoErrorBoundary } from "@/_oldvideo/components/parts/VideoErrorBoundary";
-import { useInterface } from "@/video/state/logic/interface";
+import { useInterface } from "@/_oldvideo/state/logic/interface";
-import { useMeta } from "@/video/state/logic/meta";
+import { useMeta } from "@/_oldvideo/state/logic/meta";
 
 import { MetaAction } from "./actions/MetaAction";
 import ThumbnailGeneratorInternal from "./internal/ThumbnailGeneratorInternal";

src/_oldvideo/components/actions/AirplayAction.tsx

@@ -1,9 +1,9 @@
 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 { useVideoPlayerDescriptor } from "@/video/state/hooks";
-import { useControls } from "@/video/state/logic/controls";
-import { useMisc } from "@/video/state/logic/misc";
 
 import { VideoPlayerIconButton } from "../parts/VideoPlayerIconButton";
 

src/_oldvideo/components/actions/BackdropAction.tsx

@@ -1,9 +1,9 @@
 import React, { useCallback, useEffect, useRef, useState } from "react";
 
-import { useVideoPlayerDescriptor } from "@/video/state/hooks";
+import { useVideoPlayerDescriptor } from "@/_oldvideo/state/hooks";
-import { useControls } from "@/video/state/logic/controls";
+import { useControls } from "@/_oldvideo/state/logic/controls";
-import { useInterface } from "@/video/state/logic/interface";
+import { useInterface } from "@/_oldvideo/state/logic/interface";
-import { useMediaPlaying } from "@/video/state/logic/mediaplaying";
+import { useMediaPlaying } from "@/_oldvideo/state/logic/mediaplaying";
 
 interface BackdropActionProps {
   children?: React.ReactNode;

src/_oldvideo/components/actions/CastingTextAction.tsx

@@ -1,8 +1,8 @@
 import { useTranslation } from "react-i18next";
 
+import { useVideoPlayerDescriptor } from "@/_oldvideo/state/hooks";
+import { useMisc } from "@/_oldvideo/state/logic/misc";
 import { Icon, Icons } from "@/components/Icon";
-import { useVideoPlayerDescriptor } from "@/video/state/hooks";
-import { useMisc } from "@/video/state/logic/misc";
 
 export function CastingTextAction() {
   const { t } = useTranslation();

src/_oldvideo/components/actions/ChromecastAction.tsx

@@ -1,9 +1,9 @@
 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";
-import { VideoPlayerIconButton } from "@/video/components/parts/VideoPlayerIconButton";
-import { useVideoPlayerDescriptor } from "@/video/state/hooks";
-import { useMisc } from "@/video/state/logic/misc";
 
 interface Props {
   className?: string;

src/_oldvideo/components/actions/DividerAction.tsx

@@ -1,6 +1,6 @@
+import { useVideoPlayerDescriptor } from "@/_oldvideo/state/hooks";
+import { useMeta } from "@/_oldvideo/state/logic/meta";
 import { MWMediaType } from "@/backend/metadata/types/mw";
-import { useVideoPlayerDescriptor } from "@/video/state/hooks";
-import { useMeta } from "@/video/state/logic/meta";
 
 export function DividerAction() {
   const descriptor = useVideoPlayerDescriptor();

src/_oldvideo/components/actions/FullscreenAction.tsx

@@ -1,10 +1,10 @@
 import { useCallback } from "react";
 
+import { useVideoPlayerDescriptor } from "@/_oldvideo/state/hooks";
+import { useControls } from "@/_oldvideo/state/logic/controls";
+import { useInterface } from "@/_oldvideo/state/logic/interface";
 import { Icons } from "@/components/Icon";
 import { canFullscreen } from "@/utils/detectFeatures";
-import { useVideoPlayerDescriptor } from "@/video/state/hooks";
-import { useControls } from "@/video/state/logic/controls";
-import { useInterface } from "@/video/state/logic/interface";
 
 import { VideoPlayerIconButton } from "../parts/VideoPlayerIconButton";
 

src/_oldvideo/components/actions/HeaderAction.tsx

@@ -1,6 +1,6 @@
-import { VideoPlayerHeader } from "@/video/components/parts/VideoPlayerHeader";
+import { VideoPlayerHeader } from "@/_oldvideo/components/parts/VideoPlayerHeader";
-import { useVideoPlayerDescriptor } from "@/video/state/hooks";
+import { useVideoPlayerDescriptor } from "@/_oldvideo/state/hooks";
-import { useMeta } from "@/video/state/logic/meta";
+import { useMeta } from "@/_oldvideo/state/logic/meta";
 
 interface Props {
   onClick?: () => void;

src/_oldvideo/components/actions/KeyboardShortcutsAction.tsx

@@ -1,12 +1,12 @@
 import { useEffect, useRef } from "react";
 
+import { getPlayerState } from "@/_oldvideo/state/cache";
+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";
+import { useProgress } from "@/_oldvideo/state/logic/progress";
 import { useVolumeControl } from "@/hooks/useVolumeToggle";
-import { getPlayerState } from "@/video/state/cache";
-import { useVideoPlayerDescriptor } from "@/video/state/hooks";
-import { useControls } from "@/video/state/logic/controls";
-import { useInterface } from "@/video/state/logic/interface";
-import { useMediaPlaying } from "@/video/state/logic/mediaplaying";
-import { useProgress } from "@/video/state/logic/progress";
 
 export function KeyboardShortcutsAction() {
   const descriptor = useVideoPlayerDescriptor();

src/_oldvideo/components/actions/LoadingAction.tsx

@@ -1,7 +1,7 @@
+import { useVideoPlayerDescriptor } from "@/_oldvideo/state/hooks";
+import { useMediaPlaying } from "@/_oldvideo/state/logic/mediaplaying";
+import { useMisc } from "@/_oldvideo/state/logic/misc";
 import { Spinner } from "@/components/layout/Spinner";
-import { useVideoPlayerDescriptor } from "@/video/state/hooks";
-import { useMediaPlaying } from "@/video/state/logic/mediaplaying";
-import { useMisc } from "@/video/state/logic/misc";
 
 export function LoadingAction() {
   const descriptor = useVideoPlayerDescriptor();

src/_oldvideo/components/actions/MetaAction.tsx

@@ -1,13 +1,16 @@
 import { useEffect } from "react";
 
-import { useVideoPlayerDescriptor } from "@/video/state/hooks";
+import { useVideoPlayerDescriptor } from "@/_oldvideo/state/hooks";
 import {
   VideoMediaPlayingEvent,
   useMediaPlaying,
-} from "@/video/state/logic/mediaplaying";
+} from "@/_oldvideo/state/logic/mediaplaying";
-import { useMeta } from "@/video/state/logic/meta";
+import { useMeta } from "@/_oldvideo/state/logic/meta";
-import { VideoProgressEvent, useProgress } from "@/video/state/logic/progress";
+import {
-import { VideoPlayerMeta } from "@/video/state/types";
+  VideoProgressEvent,
+  useProgress,
+} from "@/_oldvideo/state/logic/progress";
+import { VideoPlayerMeta } from "@/_oldvideo/state/types";
 
 export type WindowMeta = {
   media: VideoPlayerMeta;

src/_oldvideo/components/actions/MiddlePauseAction.tsx

@@ -1,9 +1,9 @@
 import { useCallback } from "react";
 
+import { useVideoPlayerDescriptor } from "@/_oldvideo/state/hooks";
+import { useControls } from "@/_oldvideo/state/logic/controls";
+import { useMediaPlaying } from "@/_oldvideo/state/logic/mediaplaying";
 import { Icon, Icons } from "@/components/Icon";
-import { useVideoPlayerDescriptor } from "@/video/state/hooks";
-import { useControls } from "@/video/state/logic/controls";
-import { useMediaPlaying } from "@/video/state/logic/mediaplaying";
 
 export function MiddlePauseAction() {
   const descriptor = useVideoPlayerDescriptor();

src/_oldvideo/components/actions/MobileCenterAction.tsx

@@ -1,10 +1,10 @@
-import { PauseAction } from "@/video/components/actions/PauseAction";
+import { PauseAction } from "@/_oldvideo/components/actions/PauseAction";
 import {
   SkipTimeBackwardAction,
   SkipTimeForwardAction,
-} from "@/video/components/actions/SkipTimeAction";
+} from "@/_oldvideo/components/actions/SkipTimeAction";
-import { useVideoPlayerDescriptor } from "@/video/state/hooks";
+import { useVideoPlayerDescriptor } from "@/_oldvideo/state/hooks";
-import { useMediaPlaying } from "@/video/state/logic/mediaplaying";
+import { useMediaPlaying } from "@/_oldvideo/state/logic/mediaplaying";
 
 export function MobileCenterAction() {
   const descriptor = useVideoPlayerDescriptor();

src/_oldvideo/components/actions/PageTitleAction.tsx

@@ -1,6 +1,6 @@
 import { Helmet } from "react-helmet";
 
-import { useVideoPlayerDescriptor } from "@/video/state/hooks";
+import { useVideoPlayerDescriptor } from "@/_oldvideo/state/hooks";
 
 import { useCurrentSeriesEpisodeInfo } from "../hooks/useCurrentSeriesEpisodeInfo";
 

src/_oldvideo/components/actions/PauseAction.tsx

@@ -1,9 +1,9 @@
 import { useCallback } from "react";
 
+import { useVideoPlayerDescriptor } from "@/_oldvideo/state/hooks";
+import { useControls } from "@/_oldvideo/state/logic/controls";
+import { useMediaPlaying } from "@/_oldvideo/state/logic/mediaplaying";
 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 { VideoPlayerIconButton } from "../parts/VideoPlayerIconButton";
 

src/_oldvideo/components/actions/PictureInPictureAction.tsx

@@ -1,14 +1,14 @@
 import { useCallback } from "react";
 import { useTranslation } from "react-i18next";
 
+import { useVideoPlayerDescriptor } from "@/_oldvideo/state/hooks";
+import { useControls } from "@/_oldvideo/state/logic/controls";
 import { Icons } from "@/components/Icon";
 import { useIsMobile } from "@/hooks/useIsMobile";
 import {
   canPictureInPicture,
   canWebkitPictureInPicture,
 } from "@/utils/detectFeatures";
-import { useVideoPlayerDescriptor } from "@/video/state/hooks";
-import { useControls } from "@/video/state/logic/controls";
 
 import { VideoPlayerIconButton } from "../parts/VideoPlayerIconButton";
 

src/_oldvideo/components/actions/ProgressAction.tsx

@@ -1,15 +1,15 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 
+import { getPlayerState } from "@/_oldvideo/state/cache";
+import { useVideoPlayerDescriptor } from "@/_oldvideo/state/hooks";
+import { useControls } from "@/_oldvideo/state/logic/controls";
+import { useProgress } from "@/_oldvideo/state/logic/progress";
 import {
   MouseActivity,
   makePercentage,
   makePercentageString,
   useProgressBar,
 } from "@/hooks/useProgressBar";
-import { getPlayerState } from "@/video/state/cache";
-import { useVideoPlayerDescriptor } from "@/video/state/hooks";
-import { useControls } from "@/video/state/logic/controls";
-import { useProgress } from "@/video/state/logic/progress";
 
 import ThumbnailAction from "./ThumbnailAction";
 

src/_oldvideo/components/actions/SeriesSelectionAction.tsx

@@ -1,13 +1,13 @@
 import { useTranslation } from "react-i18next";
 
+import { VideoPlayerIconButton } from "@/_oldvideo/components/parts/VideoPlayerIconButton";
+import { useVideoPlayerDescriptor } from "@/_oldvideo/state/hooks";
+import { useControls } from "@/_oldvideo/state/logic/controls";
+import { useInterface } from "@/_oldvideo/state/logic/interface";
+import { useMeta } from "@/_oldvideo/state/logic/meta";
 import { MWMediaType } from "@/backend/metadata/types/mw";
 import { Icons } from "@/components/Icon";
 import { FloatingAnchor } from "@/components/popout/FloatingAnchor";
-import { VideoPlayerIconButton } from "@/video/components/parts/VideoPlayerIconButton";
-import { useVideoPlayerDescriptor } from "@/video/state/hooks";
-import { useControls } from "@/video/state/logic/controls";
-import { useInterface } from "@/video/state/logic/interface";
-import { useMeta } from "@/video/state/logic/meta";
 
 interface Props {
   className?: string;

src/_oldvideo/components/actions/SettingsAction.tsx

@@ -1,12 +1,12 @@
 import { useTranslation } from "react-i18next";
 
+import { VideoPlayerIconButton } from "@/_oldvideo/components/parts/VideoPlayerIconButton";
+import { useVideoPlayerDescriptor } from "@/_oldvideo/state/hooks";
+import { useControls } from "@/_oldvideo/state/logic/controls";
+import { useInterface } from "@/_oldvideo/state/logic/interface";
 import { Icons } from "@/components/Icon";
 import { FloatingAnchor } from "@/components/popout/FloatingAnchor";
 import { useIsMobile } from "@/hooks/useIsMobile";
-import { VideoPlayerIconButton } from "@/video/components/parts/VideoPlayerIconButton";
-import { useVideoPlayerDescriptor } from "@/video/state/hooks";
-import { useControls } from "@/video/state/logic/controls";
-import { useInterface } from "@/video/state/logic/interface";
 
 interface Props {
   className?: string;

src/_oldvideo/components/actions/ShowTitleAction.tsx

@@ -1,4 +1,4 @@
-import { useVideoPlayerDescriptor } from "@/video/state/hooks";
+import { useVideoPlayerDescriptor } from "@/_oldvideo/state/hooks";
 
 import { useCurrentSeriesEpisodeInfo } from "../hooks/useCurrentSeriesEpisodeInfo";
 

src/_oldvideo/components/actions/SkipTimeAction.tsx

@@ -1,7 +1,7 @@
+import { useVideoPlayerDescriptor } from "@/_oldvideo/state/hooks";
+import { useControls } from "@/_oldvideo/state/logic/controls";
+import { useProgress } from "@/_oldvideo/state/logic/progress";
 import { Icons } from "@/components/Icon";
-import { useVideoPlayerDescriptor } from "@/video/state/hooks";
-import { useControls } from "@/video/state/logic/controls";
-import { useProgress } from "@/video/state/logic/progress";
 
 import { VideoPlayerIconButton } from "../parts/VideoPlayerIconButton";
 

src/_oldvideo/components/actions/ThumbnailAction.tsx

@@ -1,10 +1,10 @@
 import { RefObject, useMemo } from "react";
 
+import { useVideoPlayerDescriptor } from "@/_oldvideo/state/hooks";
+import { VideoProgressEvent } from "@/_oldvideo/state/logic/progress";
+import { useSource } from "@/_oldvideo/state/logic/source";
 import { Icon, Icons } from "@/components/Icon";
 import { formatSeconds } from "@/utils/formatSeconds";
-import { useVideoPlayerDescriptor } from "@/video/state/hooks";
-import { VideoProgressEvent } from "@/video/state/logic/progress";
-import { useSource } from "@/video/state/logic/source";
 
 const THUMBNAIL_HEIGHT = 100;
 function position(

src/_oldvideo/components/actions/TimeAction.tsx

@@ -1,13 +1,13 @@
 import { useTranslation } from "react-i18next";
 
+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";
+import { useProgress } from "@/_oldvideo/state/logic/progress";
+import { VideoPlayerTimeFormat } from "@/_oldvideo/state/types";
 import { useIsMobile } from "@/hooks/useIsMobile";
 import { formatSeconds } from "@/utils/formatSeconds";
-import { useVideoPlayerDescriptor } from "@/video/state/hooks";
-import { useControls } from "@/video/state/logic/controls";
-import { useInterface } from "@/video/state/logic/interface";
-import { useMediaPlaying } from "@/video/state/logic/mediaplaying";
-import { useProgress } from "@/video/state/logic/progress";
-import { VideoPlayerTimeFormat } from "@/video/state/types";
 
 function durationExceedsHour(secs: number): boolean {
   return secs > 60 * 60;

src/_oldvideo/components/actions/VolumeAction.tsx

@@ -1,5 +1,9 @@
 import { 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";
 import { Icon, Icons } from "@/components/Icon";
 import {
   makePercentage,
@@ -8,10 +12,6 @@ import {
 } from "@/hooks/useProgressBar";
 import { useVolumeControl } from "@/hooks/useVolumeToggle";
 import { canChangeVolume } from "@/utils/detectFeatures";
-import { useVideoPlayerDescriptor } from "@/video/state/hooks";
-import { useControls } from "@/video/state/logic/controls";
-import { useInterface } from "@/video/state/logic/interface";
-import { useMediaPlaying } from "@/video/state/logic/mediaplaying";
 
 interface Props {
   className?: string;

src/_oldvideo/components/actions/VolumeAdjustedAction.tsx

@@ -1,7 +1,7 @@
+import { useVideoPlayerDescriptor } from "@/_oldvideo/state/hooks";
+import { useInterface } from "@/_oldvideo/state/logic/interface";
+import { useMediaPlaying } from "@/_oldvideo/state/logic/mediaplaying";
 import { Icon, Icons } from "@/components/Icon";
-import { useVideoPlayerDescriptor } from "@/video/state/hooks";
-import { useInterface } from "@/video/state/logic/interface";
-import { useMediaPlaying } from "@/video/state/logic/mediaplaying";
 
 export function VolumeAdjustedAction() {
   const descriptor = useVideoPlayerDescriptor();

src/_oldvideo/components/actions/list-entries/DownloadAction.tsx

@@ -1,11 +1,11 @@
 import { useTranslation } from "react-i18next";
 
+import { useVideoPlayerDescriptor } from "@/_oldvideo/state/hooks";
+import { useMeta } from "@/_oldvideo/state/logic/meta";
+import { useSource } from "@/_oldvideo/state/logic/source";
 import { MWStreamType } from "@/backend/helpers/streams";
 import { Icons } from "@/components/Icon";
 import { normalizeTitle } from "@/utils/normalizeTitle";
-import { useVideoPlayerDescriptor } from "@/video/state/hooks";
-import { useMeta } from "@/video/state/logic/meta";
-import { useSource } from "@/video/state/logic/source";
 
 import { PopoutListAction } from "../../popouts/PopoutUtils";
 

src/_oldvideo/components/actions/list-entries/QualityDisplayAction.tsx

@@ -1,5 +1,5 @@
-import { useVideoPlayerDescriptor } from "@/video/state/hooks";
+import { useVideoPlayerDescriptor } from "@/_oldvideo/state/hooks";
-import { useSource } from "@/video/state/logic/source";
+import { useSource } from "@/_oldvideo/state/logic/source";
 
 export function QualityDisplayAction() {
   const descriptor = useVideoPlayerDescriptor();

src/_oldvideo/components/controllers/MetaController.tsx

@@ -1,10 +1,10 @@
 import { useEffect } from "react";
 
+import { useVideoPlayerDescriptor } from "@/_oldvideo/state/hooks";
+import { useControls } from "@/_oldvideo/state/logic/controls";
+import { VideoPlayerMeta } from "@/_oldvideo/state/types";
 import { MWCaption } from "@/backend/helpers/streams";
 import { MWSeasonWithEpisodeMeta } from "@/backend/metadata/types/mw";
-import { useVideoPlayerDescriptor } from "@/video/state/hooks";
-import { useControls } from "@/video/state/logic/controls";
-import { VideoPlayerMeta } from "@/video/state/types";
 
 interface MetaControllerProps {
   data?: VideoPlayerMeta;

src/_oldvideo/components/controllers/ProgressListenerController.tsx

@@ -1,12 +1,12 @@
 import throttle from "lodash.throttle";
 import { useEffect, useMemo, useRef } from "react";
 
+import { useVideoPlayerDescriptor } from "@/_oldvideo/state/hooks";
+import { useControls } from "@/_oldvideo/state/logic/controls";
+import { useMediaPlaying } from "@/_oldvideo/state/logic/mediaplaying";
+import { useMisc } from "@/_oldvideo/state/logic/misc";
+import { useProgress } from "@/_oldvideo/state/logic/progress";
 import { useQueryParams } from "@/hooks/useQueryParams";
-import { useVideoPlayerDescriptor } from "@/video/state/hooks";
-import { useControls } from "@/video/state/logic/controls";
-import { useMediaPlaying } from "@/video/state/logic/mediaplaying";
-import { useMisc } from "@/video/state/logic/misc";
-import { useProgress } from "@/video/state/logic/progress";
 
 interface Props {
   startAt?: number;

src/_oldvideo/components/controllers/SeriesController.tsx

@@ -1,8 +1,8 @@
 import { useEffect, useRef } from "react";
 import { useHistory } from "react-router-dom";
 
-import { useVideoPlayerDescriptor } from "@/video/state/hooks";
+import { useVideoPlayerDescriptor } from "@/_oldvideo/state/hooks";
-import { useMeta } from "@/video/state/logic/meta";
+import { useMeta } from "@/_oldvideo/state/logic/meta";
 
 interface SeriesControllerProps {
   onSelect?: (state: { episodeId?: string; seasonId?: string }) => void;

src/_oldvideo/components/controllers/SourceController.tsx

@@ -1,5 +1,8 @@
 import { useEffect, useRef } from "react";
 
+import { useInitialized } from "@/_oldvideo/components/hooks/useInitialized";
+import { useVideoPlayerDescriptor } from "@/_oldvideo/state/hooks";
+import { useControls } from "@/_oldvideo/state/logic/controls";
 import { getCaptionUrl, makeCaptionId } from "@/backend/helpers/captions";
 import {
   MWCaption,
@@ -8,9 +11,6 @@ import {
 } from "@/backend/helpers/streams";
 import { captionLanguages } from "@/setup/iso6391";
 import { useSettings } from "@/state/settings";
-import { useInitialized } from "@/video/components/hooks/useInitialized";
-import { useVideoPlayerDescriptor } from "@/video/state/hooks";
-import { useControls } from "@/video/state/logic/controls";
 
 interface SourceControllerProps {
   source: string;

src/_oldvideo/components/hooks/useCurrentSeriesEpisodeInfo.ts

@@ -1,8 +1,8 @@
 import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 
+import { useMeta } from "@/_oldvideo/state/logic/meta";
 import { MWMediaType } from "@/backend/metadata/types/mw";
-import { useMeta } from "@/video/state/logic/meta";
 
 export function useCurrentSeriesEpisodeInfo(descriptor: string) {
   const meta = useMeta(descriptor);

src/_oldvideo/components/hooks/useInitialized.ts

@@ -1,6 +1,6 @@
 import { useMemo } from "react";
 
-import { useMisc } from "@/video/state/logic/misc";
+import { useMisc } from "@/_oldvideo/state/logic/misc";
 
 export function useInitialized(descriptor: string): { initialized: boolean } {
   const misc = useMisc(descriptor);

src/_oldvideo/components/hooks/useSyncPopouts.ts

@@ -1,8 +1,8 @@
 import { useEffect, useRef } from "react";
 import { useHistory, useLocation } from "react-router-dom";
 
-import { ControlMethods, useControls } from "@/video/state/logic/controls";
+import { ControlMethods, useControls } from "@/_oldvideo/state/logic/controls";
-import { useInterface } from "@/video/state/logic/interface";
+import { useInterface } from "@/_oldvideo/state/logic/interface";
 
 function syncRouteToPopout(
   location: ReturnType<typeof useLocation>,

src/_oldvideo/components/internal/CastingInternal.tsx

@@ -1,11 +1,14 @@
 import { useEffect, useMemo, useRef } from "react";
 
+import { getPlayerState } from "@/_oldvideo/state/cache";
+import { useVideoPlayerDescriptor } from "@/_oldvideo/state/hooks";
+import { updateMisc, useMisc } from "@/_oldvideo/state/logic/misc";
+import { createCastingStateProvider } from "@/_oldvideo/state/providers/castingStateProvider";
+import {
+  setProvider,
+  unsetStateProvider,
+} from "@/_oldvideo/state/providers/utils";
 import { useChromecastAvailable } from "@/hooks/useChromecastAvailable";
-import { getPlayerState } from "@/video/state/cache";
-import { useVideoPlayerDescriptor } from "@/video/state/hooks";
-import { updateMisc, useMisc } from "@/video/state/logic/misc";
-import { createCastingStateProvider } from "@/video/state/providers/castingStateProvider";
-import { setProvider, unsetStateProvider } from "@/video/state/providers/utils";
 
 export function CastingInternal() {
   const descriptor = useVideoPlayerDescriptor();

src/_oldvideo/components/internal/ThumbnailGeneratorInternal.tsx

@@ -1,11 +1,11 @@
 import Hls from "hls.js";
-import { RefObject, useCallback, useEffect, useRef, useState } from "react";
+import { RefObject, useCallback, useEffect, useRef } from "react";
 
+import { getPlayerState } from "@/_oldvideo/state/cache";
+import { useVideoPlayerDescriptor } from "@/_oldvideo/state/hooks";
+import { updateSource, useSource } from "@/_oldvideo/state/logic/source";
+import { Thumbnail } from "@/_oldvideo/state/types";
 import { MWStreamType } from "@/backend/helpers/streams";
-import { getPlayerState } from "@/video/state/cache";
-import { useVideoPlayerDescriptor } from "@/video/state/hooks";
-import { updateSource, useSource } from "@/video/state/logic/source";
-import { Thumbnail } from "@/video/state/types";
 
 async function* generate(
   videoRef: RefObject<HTMLVideoElement>,

src/_oldvideo/components/internal/VideoElementInternal.tsx

@@ -1,10 +1,13 @@
 import { useEffect, useMemo, useRef } from "react";
 
-import { useVideoPlayerDescriptor } from "@/video/state/hooks";
+import { useVideoPlayerDescriptor } from "@/_oldvideo/state/hooks";
-import { useMediaPlaying } from "@/video/state/logic/mediaplaying";
+import { useMediaPlaying } from "@/_oldvideo/state/logic/mediaplaying";
-import { useMisc } from "@/video/state/logic/misc";
+import { useMisc } from "@/_oldvideo/state/logic/misc";
-import { setProvider, unsetStateProvider } from "@/video/state/providers/utils";
+import {
-import { createVideoStateProvider } from "@/video/state/providers/videoStateProvider";
+  setProvider,
+  unsetStateProvider,
+} from "@/_oldvideo/state/providers/utils";
+import { createVideoStateProvider } from "@/_oldvideo/state/providers/videoStateProvider";
 
 interface Props {
   autoPlay?: boolean;

src/_oldvideo/components/internal/WrapperRegisterInternal.tsx

@@ -1,8 +1,8 @@
 import { useEffect } from "react";
 
-import { getPlayerState } from "@/video/state/cache";
+import { getPlayerState } from "@/_oldvideo/state/cache";
-import { useVideoPlayerDescriptor } from "@/video/state/hooks";
+import { useVideoPlayerDescriptor } from "@/_oldvideo/state/hooks";
-import { updateMisc } from "@/video/state/logic/misc";
+import { updateMisc } from "@/_oldvideo/state/logic/misc";
 
 export function WrapperRegisterInternal(props: {
   wrapper: HTMLDivElement | null;

src/_oldvideo/components/parts/VideoPlayerError.tsx

@@ -1,11 +1,11 @@
 import { ReactNode } from "react";
 
+import { useVideoPlayerDescriptor } from "@/_oldvideo/state/hooks";
+import { useError } from "@/_oldvideo/state/logic/error";
+import { useMeta } from "@/_oldvideo/state/logic/meta";
 import { IconPatch } from "@/components/buttons/IconPatch";
 import { Icons } from "@/components/Icon";
 import { Title } from "@/components/text/Title";
-import { useVideoPlayerDescriptor } from "@/video/state/hooks";
-import { useError } from "@/video/state/logic/error";
-import { useMeta } from "@/video/state/logic/meta";
 
 import { VideoPlayerHeader } from "./VideoPlayerHeader";
 

src/_oldvideo/components/parts/VideoPlayerHeader.tsx

@@ -1,5 +1,7 @@
 import { useTranslation } from "react-i18next";
 
+import { AirplayAction } from "@/_oldvideo/components/actions/AirplayAction";
+import { ChromecastAction } from "@/_oldvideo/components/actions/ChromecastAction";
 import { MWMediaMeta } from "@/backend/metadata/types/mw";
 import { IconPatch } from "@/components/buttons/IconPatch";
 import { Icon, Icons } from "@/components/Icon";
@@ -10,8 +12,6 @@ import {
   getIfBookmarkedFromPortable,
   useBookmarkContext,
 } from "@/state/bookmark";
-import { AirplayAction } from "@/video/components/actions/AirplayAction";
-import { ChromecastAction } from "@/video/components/actions/ChromecastAction";
 
 interface VideoPlayerHeaderProps {
   media?: MWMediaMeta;

src/_oldvideo/components/parts/VideoPopout.tsx

@@ -1,8 +1,8 @@
 import { useEffect, useRef } from "react";
 
-import { useVideoPlayerDescriptor } from "@/video/state/hooks";
+import { useVideoPlayerDescriptor } from "@/_oldvideo/state/hooks";
-import { useControls } from "@/video/state/logic/controls";
+import { useControls } from "@/_oldvideo/state/logic/controls";
-import { useInterface } from "@/video/state/logic/interface";
+import { useInterface } from "@/_oldvideo/state/logic/interface";
 
 interface Props {
   children?: React.ReactNode;

src/_oldvideo/components/popouts/CaptionSelectionPopout.tsx

@@ -1,6 +1,10 @@
 import { useMemo, useRef } from "react";
 import { useTranslation } from "react-i18next";
 
+import { useVideoPlayerDescriptor } from "@/_oldvideo/state/hooks";
+import { useControls } from "@/_oldvideo/state/logic/controls";
+import { useMeta } from "@/_oldvideo/state/logic/meta";
+import { useSource } from "@/_oldvideo/state/logic/source";
 import {
   customCaption,
   getCaptionUrl,
@@ -14,10 +18,6 @@ import { FloatingCardView } from "@/components/popout/FloatingCard";
 import { FloatingView } from "@/components/popout/FloatingView";
 import { useFloatingRouter } from "@/hooks/useFloatingRouter";
 import { useLoading } from "@/hooks/useLoading";
-import { useVideoPlayerDescriptor } from "@/video/state/hooks";
-import { useControls } from "@/video/state/logic/controls";
-import { useMeta } from "@/video/state/logic/meta";
-import { useSource } from "@/video/state/logic/source";
 
 import { PopoutListEntry, PopoutSection } from "./PopoutUtils";
 

src/_oldvideo/components/popouts/EpisodeSelectionPopout.tsx

@@ -2,6 +2,9 @@ import { useCallback, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useParams } from "react-router-dom";
 
+import { useVideoPlayerDescriptor } from "@/_oldvideo/state/hooks";
+import { useControls } from "@/_oldvideo/state/logic/controls";
+import { useMeta } from "@/_oldvideo/state/logic/meta";
 import { getMetaFromId } from "@/backend/metadata/getmeta";
 import { decodeTMDBId } from "@/backend/metadata/tmdb";
 import {
@@ -16,9 +19,6 @@ import { FloatingView } from "@/components/popout/FloatingView";
 import { useFloatingRouter } from "@/hooks/useFloatingRouter";
 import { useLoading } from "@/hooks/useLoading";
 import { useWatchedContext } from "@/state/watched";
-import { useVideoPlayerDescriptor } from "@/video/state/hooks";
-import { useControls } from "@/video/state/logic/controls";
-import { useMeta } from "@/video/state/logic/meta";
 
 import { PopoutListEntry } from "./PopoutUtils";
 

src/_oldvideo/components/popouts/PlaybackSpeedPopout.tsx

@@ -1,13 +1,13 @@
 import { useTranslation } from "react-i18next";
 
+import { useVideoPlayerDescriptor } from "@/_oldvideo/state/hooks";
+import { useControls } from "@/_oldvideo/state/logic/controls";
+import { useMediaPlaying } from "@/_oldvideo/state/logic/mediaplaying";
 import { Icon, Icons } from "@/components/Icon";
 import { FloatingCardView } from "@/components/popout/FloatingCard";
 import { FloatingView } from "@/components/popout/FloatingView";
 import { Slider } from "@/components/Slider";
 import { useFloatingRouter } from "@/hooks/useFloatingRouter";
-import { useVideoPlayerDescriptor } from "@/video/state/hooks";
-import { useControls } from "@/video/state/logic/controls";
-import { useMediaPlaying } from "@/video/state/logic/mediaplaying";
 
 import { PopoutListEntry, PopoutSection } from "./PopoutUtils";
 

src/_oldvideo/components/popouts/PopoutAnchor.tsx

@@ -1,8 +1,8 @@
 import { ReactNode, useEffect, useRef } from "react";
 
-import { getPlayerState } from "@/video/state/cache";
+import { getPlayerState } from "@/_oldvideo/state/cache";
-import { useVideoPlayerDescriptor } from "@/video/state/hooks";
+import { useVideoPlayerDescriptor } from "@/_oldvideo/state/hooks";
-import { updateInterface } from "@/video/state/logic/interface";
+import { updateInterface } from "@/_oldvideo/state/logic/interface";
 
 interface Props {
   for: string;

src/_oldvideo/components/popouts/PopoutProviderAction.tsx

@@ -1,13 +1,13 @@
 import { useCallback } from "react";
 
+import { useSyncPopouts } from "@/_oldvideo/components/hooks/useSyncPopouts";
+import { EpisodeSelectionPopout } from "@/_oldvideo/components/popouts/EpisodeSelectionPopout";
+import { SettingsPopout } from "@/_oldvideo/components/popouts/SettingsPopout";
+import { useVideoPlayerDescriptor } from "@/_oldvideo/state/hooks";
+import { useControls } from "@/_oldvideo/state/logic/controls";
+import { useInterface } from "@/_oldvideo/state/logic/interface";
 import { PopoutFloatingCard } from "@/components/popout/FloatingCard";
 import { FloatingContainer } from "@/components/popout/FloatingContainer";
-import { useSyncPopouts } from "@/video/components/hooks/useSyncPopouts";
-import { EpisodeSelectionPopout } from "@/video/components/popouts/EpisodeSelectionPopout";
-import { SettingsPopout } from "@/video/components/popouts/SettingsPopout";
-import { useVideoPlayerDescriptor } from "@/video/state/hooks";
-import { useControls } from "@/video/state/logic/controls";
-import { useInterface } from "@/video/state/logic/interface";
 
 function ShowPopout(props: { popoutId: string | null; onClose: () => void }) {
   const popoutMap = {

src/_oldvideo/components/popouts/SettingsPopout.tsx

@@ -1,11 +1,11 @@
+import { CaptionsSelectionAction } from "@/_oldvideo/components/actions/list-entries/CaptionsSelectionAction";
+import { DownloadAction } from "@/_oldvideo/components/actions/list-entries/DownloadAction";
+import { PlaybackSpeedSelectionAction } from "@/_oldvideo/components/actions/list-entries/PlaybackSpeedSelectionAction";
+import { SourceSelectionAction } from "@/_oldvideo/components/actions/list-entries/SourceSelectionAction";
 import { FloatingCardView } from "@/components/popout/FloatingCard";
 import { FloatingDragHandle } from "@/components/popout/FloatingDragHandle";
 import { FloatingView } from "@/components/popout/FloatingView";
 import { useFloatingRouter } from "@/hooks/useFloatingRouter";
-import { CaptionsSelectionAction } from "@/video/components/actions/list-entries/CaptionsSelectionAction";
-import { DownloadAction } from "@/video/components/actions/list-entries/DownloadAction";
-import { PlaybackSpeedSelectionAction } from "@/video/components/actions/list-entries/PlaybackSpeedSelectionAction";
-import { SourceSelectionAction } from "@/video/components/actions/list-entries/SourceSelectionAction";
 
 import { CaptionSelectionPopout } from "./CaptionSelectionPopout";
 import { CaptionSettingsPopout } from "./CaptionSettingsPopout";

src/_oldvideo/components/popouts/SourceSelectionPopout.tsx

@@ -1,6 +1,10 @@
 import { useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 
+import { useVideoPlayerDescriptor } from "@/_oldvideo/state/hooks";
+import { useControls } from "@/_oldvideo/state/logic/controls";
+import { useMeta } from "@/_oldvideo/state/logic/meta";
+import { useSource } from "@/_oldvideo/state/logic/source";
 import { MWEmbed, MWEmbedType } from "@/backend/helpers/embed";
 import { MWProviderScrapeResult } from "@/backend/helpers/provider";
 import {
@@ -16,10 +20,6 @@ import { FloatingCardView } from "@/components/popout/FloatingCard";
 import { FloatingView } from "@/components/popout/FloatingView";
 import { useFloatingRouter } from "@/hooks/useFloatingRouter";
 import { useLoading } from "@/hooks/useLoading";
-import { useVideoPlayerDescriptor } from "@/video/state/hooks";
-import { useControls } from "@/video/state/logic/controls";
-import { useMeta } from "@/video/state/logic/meta";
-import { useSource } from "@/video/state/logic/source";
 
 import { PopoutListEntry } from "./PopoutUtils";
 

src/_oldvideo/state/logic/controls.ts

@@ -1,7 +1,10 @@
-import { updateInterface } from "@/video/state/logic/interface";
+import { updateInterface } from "@/_oldvideo/state/logic/interface";
-import { updateMeta } from "@/video/state/logic/meta";
+import { updateMeta } from "@/_oldvideo/state/logic/meta";
-import { updateProgress } from "@/video/state/logic/progress";
+import { updateProgress } from "@/_oldvideo/state/logic/progress";
-import { VideoPlayerMeta, VideoPlayerTimeFormat } from "@/video/state/types";
+import {
+  VideoPlayerMeta,
+  VideoPlayerTimeFormat,
+} from "@/_oldvideo/state/types";
 
 import { getPlayerState } from "../cache";
 import { VideoPlayerStateController } from "../providers/providerTypes";

src/_oldvideo/state/providers/castingStateProvider.ts

@@ -1,5 +1,12 @@
 import fscreen from "fscreen";
 
+import {
+  getStoredVolume,
+  setStoredVolume,
+} from "@/_oldvideo/components/hooks/volumeStore";
+import { updateInterface } from "@/_oldvideo/state/logic/interface";
+import { updateSource } from "@/_oldvideo/state/logic/source";
+import { resetStateForSource } from "@/_oldvideo/state/providers/helpers";
 import { revokeCaptionBlob } from "@/backend/helpers/captions";
 import {
   canChangeVolume,
@@ -7,13 +14,6 @@ import {
   canFullscreenAnyElement,
   canWebkitFullscreen,
 } from "@/utils/detectFeatures";
-import {
-  getStoredVolume,
-  setStoredVolume,
-} from "@/video/components/hooks/volumeStore";
-import { updateInterface } from "@/video/state/logic/interface";
-import { updateSource } from "@/video/state/logic/source";
-import { resetStateForSource } from "@/video/state/providers/helpers";
 
 import { VideoPlayerStateProvider } from "./providerTypes";
 import { getPlayerState } from "../cache";

src/_oldvideo/state/providers/helpers.ts

@@ -1,8 +1,8 @@
-import { resetForSource } from "@/video/state/init";
+import { resetForSource } from "@/_oldvideo/state/init";
-import { updateMediaPlaying } from "@/video/state/logic/mediaplaying";
+import { updateMediaPlaying } from "@/_oldvideo/state/logic/mediaplaying";
-import { updateMisc } from "@/video/state/logic/misc";
+import { updateMisc } from "@/_oldvideo/state/logic/misc";
-import { updateProgress } from "@/video/state/logic/progress";
+import { updateProgress } from "@/_oldvideo/state/logic/progress";
-import { VideoPlayerState } from "@/video/state/types";
+import { VideoPlayerState } from "@/_oldvideo/state/types";
 
 export function resetStateForSource(descriptor: string, s: VideoPlayerState) {
   const state = s;

src/_oldvideo/state/providers/utils.ts

@@ -1,4 +1,4 @@
-import { updateMisc } from "@/video/state/logic/misc";
+import { updateMisc } from "@/_oldvideo/state/logic/misc";
 
 import { VideoPlayerStateProvider } from "./providerTypes";
 import { getPlayerState } from "../cache";

src/_oldvideo/state/providers/videoStateProvider.ts

@@ -1,6 +1,15 @@
 import fscreen from "fscreen";
 import Hls from "hls.js";
 
+import {
+  getStoredVolume,
+  setStoredVolume,
+} from "@/_oldvideo/components/hooks/volumeStore";
+import { updateError } from "@/_oldvideo/state/logic/error";
+import { updateInterface } from "@/_oldvideo/state/logic/interface";
+import { updateMisc } from "@/_oldvideo/state/logic/misc";
+import { updateSource } from "@/_oldvideo/state/logic/source";
+import { resetStateForSource } from "@/_oldvideo/state/providers/helpers";
 import { revokeCaptionBlob } from "@/backend/helpers/captions";
 import { MWStreamType } from "@/backend/helpers/streams";
 import {
@@ -11,15 +20,6 @@ import {
   canWebkitFullscreen,
   canWebkitPictureInPicture,
 } from "@/utils/detectFeatures";
-import {
-  getStoredVolume,
-  setStoredVolume,
-} from "@/video/components/hooks/volumeStore";
-import { updateError } from "@/video/state/logic/error";
-import { updateInterface } from "@/video/state/logic/interface";
-import { updateMisc } from "@/video/state/logic/misc";
-import { updateSource } from "@/video/state/logic/source";
-import { resetStateForSource } from "@/video/state/providers/helpers";
 
 import { VideoPlayerStateProvider } from "./providerTypes";
 import { handleBuffered } from "./utils";

src/components/player/Player.ts

@@ -0,0 +1,2 @@
+export * from "./atoms";
+export * from "./base/Container";

src/components/player/atoms/index.ts

@@ -0,0 +1 @@
+export * from "./pause";

src/components/player/atoms/pause.tsx

@@ -0,0 +1,3 @@
+export function Pause() {
+  return <button type="button" />;
+}

src/components/player/base/Container.tsx

@@ -0,0 +1,9 @@
+import { ReactNode } from "react";
+
+export interface PlayerProps {
+  children?: ReactNode;
+}
+
+export function Container(props: PlayerProps) {
+  return <div>{props.children}</div>;
+}

src/components/player/index.tsx

@@ -0,0 +1 @@
+export * as Player from "./Player";

src/components/player/internals/VideoContainer.tsx

@@ -0,0 +1,3 @@
+export function VideoContainer() {
+  return <div />;
+}

src/components/popout/FloatingCard.tsx

@@ -2,10 +2,10 @@ import { animated, easings, useSpringValue } from "@react-spring/web";
 import { ReactNode, useCallback, useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 
+import { PopoutSection } from "@/_oldvideo/components/popouts/PopoutUtils";
 import { FloatingCardAnchorPosition } from "@/components/popout/positions/FloatingCardAnchorPosition";
 import { FloatingCardMobilePosition } from "@/components/popout/positions/FloatingCardMobilePosition";
 import { useIsMobile } from "@/hooks/useIsMobile";
-import { PopoutSection } from "@/video/components/popouts/PopoutUtils";
 
 import { FloatingDragHandle, MobilePopoutSpacer } from "./FloatingDragHandle";
 import { Icon, Icons } from "../Icon";

src/hooks/useVolumeToggle.ts

@@ -1,7 +1,7 @@
 import { useState } from "react";
 
-import { useControls } from "@/video/state/logic/controls";
+import { useControls } from "@/_oldvideo/state/logic/controls";
-import { useMediaPlaying } from "@/video/state/logic/mediaplaying";
+import { useMediaPlaying } from "@/_oldvideo/state/logic/mediaplaying";
 
 export function useVolumeControl(descriptor: string) {
   const [storedVolume, setStoredVolume] = useState(1);

src/views/PlayerView.tsx

@@ -0,0 +1,9 @@
+import { Player } from "@/components/player";
+
+export function PlayerView() {
+  return (
+    <Player.Container>
+      <Player.Pause />
+    </Player.Container>
+  );
+}

src/views/SettingsModal.tsx

@@ -1,6 +1,7 @@
 import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 
+import { CaptionCue } from "@/_oldvideo/components/actions/CaptionRendererAction";
 import CaptionColorSelector, {
   colors,
 } from "@/components/CaptionColorSelector";
@@ -16,7 +17,6 @@ import {
   captionLanguages,
 } from "@/setup/iso6391";
 import { useSettings } from "@/state/settings";
-import { CaptionCue } from "@/video/components/actions/CaptionRendererAction";
 
 export default function SettingsModal(props: {
   onClose: () => void;

src/views/developer/VideoTesterView.tsx

@@ -1,113 +1,5 @@
-import { useCallback, useState } from "react";
+import { PlayerView } from "@/views/PlayerView";
-import { Helmet } from "react-helmet";
-
-import { MWStreamQuality, MWStreamType } from "@/backend/helpers/streams";
-import { DetailedMeta } from "@/backend/metadata/getmeta";
-import { MWMediaType } from "@/backend/metadata/types/mw";
-import { Button } from "@/components/Button";
-import { Dropdown } from "@/components/Dropdown";
-import { Navigation } from "@/components/layout/Navigation";
-import { ThinContainer } from "@/components/layout/ThinContainer";
-import { MetaController } from "@/video/components/controllers/MetaController";
-import { SourceController } from "@/video/components/controllers/SourceController";
-import { VideoPlayer } from "@/video/components/VideoPlayer";
-
-interface VideoData {
-  streamUrl: string;
-  type: MWStreamType;
-}
-
-const testData: VideoData = {
-  streamUrl:
-    "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4",
-  type: MWStreamType.MP4,
-};
-const testMeta: DetailedMeta = {
-  imdbId: "",
-  tmdbId: "",
-  meta: {
-    id: "hello-world",
-    title: "Big Buck Bunny",
-    type: MWMediaType.MOVIE,
-    seasons: undefined,
-    year: "2000",
-  },
-};
 
 export default function VideoTesterView() {
-  const [video, setVideo] = useState<VideoData | null>(null);
+  return <PlayerView />;
-  const [videoType, setVideoType] = useState<MWStreamType>(MWStreamType.MP4);
-  const [url, setUrl] = useState("");
-
-  const playVideo = useCallback(
-    (streamUrl: string) => {
-      setVideo({
-        streamUrl,
-        type: videoType,
-      });
-    },
-    [videoType]
-  );
-
-  if (video) {
-    return (
-      <div className="fixed left-0 top-0 h-[100dvh] w-screen">
-        <Helmet>
-          <html data-full="true" />
-        </Helmet>
-        <VideoPlayer includeSafeArea autoPlay onGoBack={() => setVideo(null)}>
-          <MetaController
-            data={{
-              captions: [],
-              meta: testMeta,
-            }}
-            linkedCaptions={[]}
-          />
-          <SourceController
-            source={video.streamUrl}
-            type={videoType}
-            quality={MWStreamQuality.QUNKNOWN}
-            captions={[]}
-          />
-        </VideoPlayer>
-      </div>
-    );
-  }
-
-  return (
-    <div className="py-64">
-      <Navigation />
-      <ThinContainer classNames="flex items-start flex-col space-y-4">
-        <div className="w-48">
-          <Dropdown
-            options={[
-              { id: MWStreamType.MP4, name: "Mp4" },
-              { id: MWStreamType.HLS, name: "hls/m3u8" },
-            ]}
-            selectedItem={{ id: videoType, name: videoType }}
-            setSelectedItem={(a) => setVideoType(a.id as MWStreamType)}
-          />
-        </div>
-        <div className="mb-4 flex gap-4">
-          <input
-            type="text"
-            placeholder="stream url here..."
-            value={url}
-            onChange={(e) => setUrl(e.target.value)}
-          />
-          <Button onClick={() => playVideo(url)}>Play video</Button>
-        </div>
-        <Button
-          onClick={() =>
-            setVideo({
-              streamUrl: testData.streamUrl,
-              type: testData.type,
-            })
-          }
-        >
-          Play default video
-        </Button>
-      </ThinContainer>
-    </div>
-  );
 }

src/views/media/MediaErrorView.tsx

@@ -1,9 +1,9 @@
 import { Helmet } from "react-helmet";
 import { useTranslation } from "react-i18next";
 
+import { VideoPlayerHeader } from "@/_oldvideo/components/parts/VideoPlayerHeader";
 import { ErrorMessage } from "@/components/layout/ErrorBoundary";
 import { useGoBack } from "@/hooks/useGoBack";
-import { VideoPlayerHeader } from "@/video/components/parts/VideoPlayerHeader";
 
 export function MediaFetchErrorView() {
   const { t } = useTranslation();

src/views/media/MediaView.tsx

@@ -3,6 +3,13 @@ import { Helmet } from "react-helmet";
 import { useTranslation } from "react-i18next";
 import { useHistory, useParams } from "react-router-dom";
 
+import { MetaController } from "@/_oldvideo/components/controllers/MetaController";
+import { ProgressListenerController } from "@/_oldvideo/components/controllers/ProgressListenerController";
+import { SeriesController } from "@/_oldvideo/components/controllers/SeriesController";
+import { SourceController } from "@/_oldvideo/components/controllers/SourceController";
+import { VideoPlayerHeader } from "@/_oldvideo/components/parts/VideoPlayerHeader";
+import { VideoPlayer } from "@/_oldvideo/components/VideoPlayer";
+import { VideoPlayerMeta } from "@/_oldvideo/state/types";
 import { MWStream } from "@/backend/helpers/streams";
 import { DetailedMeta, getMetaFromId } from "@/backend/metadata/getmeta";
 import { decodeTMDBId } from "@/backend/metadata/tmdb";
@@ -17,13 +24,6 @@ import { useGoBack } from "@/hooks/useGoBack";
 import { useLoading } from "@/hooks/useLoading";
 import { SelectedMediaData, useScrape } from "@/hooks/useScrape";
 import { useWatchedItem } from "@/state/watched";
-import { MetaController } from "@/video/components/controllers/MetaController";
-import { ProgressListenerController } from "@/video/components/controllers/ProgressListenerController";
-import { SeriesController } from "@/video/components/controllers/SeriesController";
-import { SourceController } from "@/video/components/controllers/SourceController";
-import { VideoPlayerHeader } from "@/video/components/parts/VideoPlayerHeader";
-import { VideoPlayer } from "@/video/components/VideoPlayer";
-import { VideoPlayerMeta } from "@/video/state/types";
 
 import { MediaFetchErrorView } from "./MediaErrorView";
 import { MediaScrapeLog } from "./MediaScrapeLog";

src/views/notfound/NotFoundView.tsx

@@ -2,13 +2,13 @@ import { ReactNode } from "react";
 import { Helmet } from "react-helmet";
 import { useTranslation } from "react-i18next";
 
+import { VideoPlayerHeader } from "@/_oldvideo/components/parts/VideoPlayerHeader";
 import { IconPatch } from "@/components/buttons/IconPatch";
 import { Icons } from "@/components/Icon";
 import { Navigation } from "@/components/layout/Navigation";
 import { ArrowLink } from "@/components/text/ArrowLink";
 import { Title } from "@/components/text/Title";
 import { useGoBack } from "@/hooks/useGoBack";
-import { VideoPlayerHeader } from "@/video/components/parts/VideoPlayerHeader";
 
 export function NotFoundWrapper(props: {
   children?: ReactNode;