Move episodes over into new popout

Co-authored-by: mrjvs <mistrjvs@gmail.com>

src/components/popout/FloatingAnchor.tsx

@@ -5,7 +5,7 @@ export function createFloatingAnchorEvent(id: string): string {
 }
 
 interface Props {
-  for: string;
+  id: string;
   children?: ReactNode;
 }
 
@@ -26,9 +26,9 @@ export function FloatingAnchor(props: Props) {
         const newerStr = JSON.stringify(newer);
         if (current !== newerStr) {
           old.current = newerStr;
-          const evtStr = createFloatingAnchorEvent(props.for);
+          const evtStr = createFloatingAnchorEvent(props.id);
           (window as any)[evtStr] = newer;
-          const evObj = new CustomEvent(createFloatingAnchorEvent(props.for), {
+          const evObj = new CustomEvent(createFloatingAnchorEvent(props.id), {
             detail: newer,
           });
           document.dispatchEvent(evObj);

src/components/popout/FloatingCard.tsx

@@ -7,7 +7,7 @@ import { ReactNode, useCallback, useEffect, useRef } from "react";
 interface FloatingCardProps {
   children?: ReactNode;
   onClose?: () => void;
-  id: string;
+  for: string;
 }
 
 interface RootFloatingCardProps extends FloatingCardProps {
@@ -27,7 +27,7 @@ function CardBase(props: { children: ReactNode }) {
   const getNewHeight = useCallback(() => {
     if (!ref.current) return;
     const children = ref.current.querySelectorAll(
-      ":scope > *[data-floating-page='true']"
+      ":scope *[data-floating-page='true']"
     );
     if (children.length === 0) {
       height.start(0);
@@ -54,7 +54,7 @@ function CardBase(props: { children: ReactNode }) {
     observer.observe(ref.current, {
       attributes: false,
       childList: true,
-      subtree: false,
+      subtree: true,
     });
     return () => {
       observer.disconnect();
@@ -90,12 +90,17 @@ export function FloatingCard(props: RootFloatingCardProps) {
     );
 
   return (
-    <FloatingCardAnchorPosition id={props.id} className={props.className}>
+    <FloatingCardAnchorPosition id={props.for} className={props.className}>
       {content}
     </FloatingCardAnchorPosition>
   );
 }
 
 export function PopoutFloatingCard(props: FloatingCardProps) {
-  return <FloatingCard className="rounded-md bg-ash-400 p-2" {...props} />;
+  return (
+    <FloatingCard
+      className="overflow-hidden rounded-md bg-ash-300"
+      {...props}
+    />
+  );
 }

src/components/popout/FloatingContainer.tsx

@@ -36,7 +36,7 @@ export function FloatingContainer(props: Props) {
 
   return createPortal(
     <Transition show={props.show} animation="none">
-      <div className="pointer-events-auto fixed inset-0">
+      <div className="popout-wrapper pointer-events-auto fixed inset-0 select-none">
         <Transition animation="fade" isChild>
           <div
             onClick={click}

src/components/popout/FloatingView.tsx

@@ -6,30 +6,25 @@ interface Props {
   children?: ReactNode;
   show?: boolean;
   className?: string;
-  height: number;
-  width: number;
+  height?: number;
+  width?: number;
 }
 
 export function FloatingView(props: Props) {
   const { isMobile } = useIsMobile();
-  if (!props.show) return null;
+  const width = !isMobile ? `${props.width}px` : "100%";
   return (
+    <Transition animation="slide-up" show={props.show}>
       <div
-      className={[props.className ?? "", "absolute"].join(" ")}
+        className={[props.className ?? "", "absolute left-0 top-0"].join(" ")}
         data-floating-page="true"
         style={{
-        height: `${props.height}px`,
-        width: !isMobile ? `${props.width}px` : "100%",
+          height: props.height ? `${props.height}px` : undefined,
+          width: props.width ? width : undefined,
         }}
       >
         {props.children}
       </div>
-  );
-  return (
-    <Transition animation="slide-up" show={props.show}>
-      <div data-floating-page="true" className={props.className}>
-        {props.children}
-      </div>
     </Transition>
   );
 }

src/components/popout/positions/FloatingCardMobilePosition.tsx

@@ -10,7 +10,6 @@ interface MobilePositionProps {
 
 export function FloatingCardMobilePosition(props: MobilePositionProps) {
   const ref = useRef<HTMLDivElement>(null);
-  const height = 500;
   const closing = useRef<boolean>(false);
   const [cardRect, setCardRect] = useState<DOMRect | null>(null);
   const [{ y }, api] = useSpring(() => ({
@@ -24,6 +23,7 @@ export function FloatingCardMobilePosition(props: MobilePositionProps) {
   const bind = useDrag(
     ({ last, velocity: [, vy], direction: [, dy], movement: [, my] }) => {
       if (closing.current) return;
+      const height = cardRect?.height ?? 0;
       if (last) {
         // if past half height downwards
         // OR Y velocity is past 0.5 AND going down AND 20 pixels below start position
@@ -84,7 +84,7 @@ export function FloatingCardMobilePosition(props: MobilePositionProps) {
         }}
         {...bind()}
       >
-        <div className="mx-auto my-2 mb-4 h-1 w-12 rounded-full bg-ash-500 bg-opacity-30" />
+        <div className="mx-auto my-2 mb-2 h-1 w-12 rounded-full bg-ash-500 bg-opacity-30" />
         {props.children}
         <div className="h-[200px]" />
       </animated.div>

src/video/components/actions/SeriesSelectionAction.tsx

@@ -4,9 +4,9 @@ import { useVideoPlayerDescriptor } from "@/video/state/hooks";
 import { useMeta } from "@/video/state/logic/meta";
 import { VideoPlayerIconButton } from "@/video/components/parts/VideoPlayerIconButton";
 import { useControls } from "@/video/state/logic/controls";
-import { PopoutAnchor } from "@/video/components/popouts/PopoutAnchor";
 import { useInterface } from "@/video/state/logic/interface";
 import { useTranslation } from "react-i18next";
+import { FloatingAnchor } from "@/components/popout/FloatingAnchor";
 
 interface Props {
   className?: string;
@@ -24,7 +24,7 @@ export function SeriesSelectionAction(props: Props) {
   return (
     <div className={props.className}>
       <div className="relative">
-        <PopoutAnchor for="episodes">
+        <FloatingAnchor id="episodes">
           <VideoPlayerIconButton
             active={videoInterface.popout === "episodes"}
             icon={Icons.EPISODES}
@@ -32,7 +32,7 @@ export function SeriesSelectionAction(props: Props) {
             wide
             onClick={() => controls.openPopout("episodes")}
           />
-        </PopoutAnchor>
+        </FloatingAnchor>
       </div>
     </div>
   );

src/video/components/popouts/EpisodeSelectionPopout.tsx

@@ -12,6 +12,7 @@ import { useMeta } from "@/video/state/logic/meta";
 import { useControls } from "@/video/state/logic/controls";
 import { useWatchedContext } from "@/state/watched";
 import { useTranslation } from "react-i18next";
+import { FloatingView } from "@/components/popout/FloatingView";
 import { PopoutListEntry, PopoutSection } from "./PopoutUtils";
 
 export function EpisodeSelectionPopout() {
@@ -99,7 +100,8 @@ export function EpisodeSelectionPopout() {
   }, [isPickingSeason]);
 
   return (
-    <>
+    <FloatingView show height={300} width={500}>
+      <div className="grid h-full grid-rows-[auto,minmax(0,1fr)]">
         <PopoutSection className="bg-ash-100 font-bold text-white">
           <div className="relative flex items-center">
             <button
@@ -203,6 +205,7 @@ export function EpisodeSelectionPopout() {
             )}
           </PopoutSection>
         </div>
-    </>
+      </div>
+    </FloatingView>
   );
 }

src/video/components/popouts/PopoutProviderAction.tsx

@@ -1,6 +1,3 @@
-import { useDrag } from "@use-gesture/react";
-import { a, useSpring, config, easings } from "@react-spring/web";
-import { Transition } from "@/components/Transition";
 import { useSyncPopouts } from "@/video/components/hooks/useSyncPopouts";
 import { EpisodeSelectionPopout } from "@/video/components/popouts/EpisodeSelectionPopout";
 import { SourceSelectionPopout } from "@/video/components/popouts/SourceSelectionPopout";
@@ -8,130 +5,35 @@ import { CaptionSelectionPopout } from "@/video/components/popouts/CaptionSelect
 import { SettingsPopout } from "@/video/components/popouts/SettingsPopout";
 import { useVideoPlayerDescriptor } from "@/video/state/hooks";
 import { useControls } from "@/video/state/logic/controls";
-import { useIsMobile } from "@/hooks/useIsMobile";
-import {
-  useInterface,
-  VideoInterfaceEvent,
-} from "@/video/state/logic/interface";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useInterface } from "@/video/state/logic/interface";
+import { useCallback } from "react";
+import { PopoutFloatingCard } from "@/components/popout/FloatingCard";
+import { FloatingContainer } from "@/components/popout/FloatingContainer";
 
 import "./Popouts.css";
 
-function ShowPopout(props: { popoutId: string | null }) {
-  // only updates popout id when a new one is set, so transitions look good
-  const [popoutId, setPopoutId] = useState<string | null>(props.popoutId);
-  useEffect(() => {
-    if (!props.popoutId) return;
-    setPopoutId(props.popoutId);
-  }, [props]);
+function ShowPopout(props: { popoutId: string | null; onClose: () => void }) {
+  const popoutMap = {
+    source: <SourceSelectionPopout />,
+    captions: <CaptionSelectionPopout />,
+    settings: <SettingsPopout />,
+    episodes: <EpisodeSelectionPopout />,
+  };
 
-  if (popoutId === "episodes") return <EpisodeSelectionPopout />;
-  if (popoutId === "source") return <SourceSelectionPopout />;
-  if (popoutId === "captions") return <CaptionSelectionPopout />;
-  if (popoutId === "settings") return <SettingsPopout />;
   return (
-    <div className="flex w-full items-center justify-center p-10">
-      Unknown popout
-    </div>
-  );
-}
-
-function MobilePopoutContainer(props: {
-  videoInterface: VideoInterfaceEvent;
-  onClose: () => void;
-}) {
-  const ref = useRef<HTMLDivElement>(null);
-  const height = 500;
-  const closing = useRef<boolean>(false);
-  const [{ y }, api] = useSpring(() => ({
-    y: 0,
-    onRest() {
-      if (!closing.current) return;
-      props.onClose();
-    },
-  }));
-
-  const bind = useDrag(
-    ({ last, velocity: [, vy], direction: [, dy], movement: [, my] }) => {
-      if (closing.current) return;
-      if (last) {
-        if (my > height * 0.5 || (vy > 0.5 && dy > 0)) {
-          api.start({
-            y: height * 1.2,
-            immediate: false,
-            config: { ...config.wobbly, velocity: vy, clamp: true },
-          });
-          closing.current = true;
-        } else {
-          api.start({
-            y: 0,
-            immediate: false,
-            config: config.wobbly,
-          });
-        }
-      } else {
-        api.start({ y: my, immediate: true });
-      }
-    },
-    {
-      from: () => [0, y.get()],
-      filterTaps: true,
-      bounds: { top: 0 },
-      rubberband: true,
-    }
-  );
-
-  return (
-    <a.div
-      ref={ref}
-      className="absolute inset-x-0 -bottom-[200px] z-10 mx-auto grid h-[700px] max-w-[400px] touch-none grid-rows-[auto,minmax(0,1fr)] overflow-hidden rounded-t-lg bg-ash-200"
-      style={{
-        y,
-      }}
-      {...bind()}
-    >
-      <div className="mx-auto mt-3 -mb-3 h-1 w-12 rounded-full bg-ash-500 bg-opacity-30" />
-      <ShowPopout popoutId={props.videoInterface.popout} />
-    </a.div>
-  );
-}
-
-function DesktopPopoutContainer(props: {
-  videoInterface: VideoInterfaceEvent;
-}) {
-  const ref = useRef<HTMLDivElement>(null);
-  const [right, setRight] = useState<number>(0);
-  const [bottom, setBottom] = useState<number>(0);
-  const [width, setWidth] = useState<number>(0);
-
-  const calculateAndSetCoords = useCallback((rect: DOMRect, w: number) => {
-    const buttonCenter = rect.left + rect.width / 2;
-
-    setBottom(rect ? rect.height + 30 : 30);
-    setRight(Math.max(window.innerWidth - buttonCenter - w / 2, 30));
-  }, []);
-
-  useEffect(() => {
-    if (!props.videoInterface.popoutBounds) return;
-    calculateAndSetCoords(props.videoInterface.popoutBounds, width);
-  }, [props.videoInterface.popoutBounds, calculateAndSetCoords, width]);
-
-  useEffect(() => {
-    const rect = ref.current?.getBoundingClientRect();
-    setWidth(rect?.width ?? 0);
-  }, []);
-
-  return (
-    <a.div
-      ref={ref}
-      className="absolute z-10 grid h-[500px] w-80 touch-none grid-rows-[auto,minmax(0,1fr)] overflow-hidden rounded-lg bg-ash-200"
-      style={{
-        right: `${right}px`,
-        bottom: `${bottom}px`,
-      }}
+    <>
+      {Object.entries(popoutMap).map(([id, el]) => (
+        <FloatingContainer
+          key={id}
+          show={props.popoutId === id}
+          onClose={props.onClose}
         >
-      <ShowPopout popoutId={props.videoInterface.popout} />
-    </a.div>
+          <PopoutFloatingCard for={id} onClose={props.onClose}>
+            {el}
+          </PopoutFloatingCard>
+        </FloatingContainer>
+      ))}
+    </>
   );
 }
 
@@ -139,30 +41,11 @@ export function PopoutProviderAction() {
   const descriptor = useVideoPlayerDescriptor();
   const videoInterface = useInterface(descriptor);
   const controls = useControls(descriptor);
-  const { isMobile } = useIsMobile(false);
   useSyncPopouts(descriptor);
 
-  const handleClick = useCallback(() => {
+  const onClose = useCallback(() => {
     controls.closePopout();
   }, [controls]);
 
-  return (
-    <Transition
-      show={!!videoInterface.popout}
-      animation="slide-up"
-      className="h-full"
-    >
-      <div className="popout-wrapper pointer-events-auto absolute inset-0">
-        <div onClick={handleClick} className="absolute inset-0" />
-        {isMobile ? (
-          <MobilePopoutContainer
-            videoInterface={videoInterface}
-            onClose={handleClick}
-          />
-        ) : (
-          <DesktopPopoutContainer videoInterface={videoInterface} />
-        )}
-      </div>
-    </Transition>
-  );
+  return <ShowPopout popoutId={videoInterface.popout} onClose={onClose} />;
 }

src/video/components/popouts/PopoutUtils.tsx

@@ -143,7 +143,7 @@ export function PopoutListEntry(props: PopoutListEntryTypes) {
       isOnDarkBackground={props.isOnDarkBackground}
       active={props.active}
       onClick={props.onClick}
-      noChevron={!props.loading && !props.errored}
+      noChevron={props.loading || props.errored}
       right={
         <>
           {props.errored && (

src/views/developer/TestView.tsx

@@ -32,7 +32,7 @@ export function TestView() {
   return (
     <div className="relative h-[800px] w-full rounded border border-white">
       <FloatingContainer show={show} onClose={() => setShow(false)}>
-        <PopoutFloatingCard id="test" onClose={() => setShow(false)}>
+        <PopoutFloatingCard for="test" onClose={() => setShow(false)}>
           <FloatingView
             show={page === "main"}
             height={400}
@@ -58,7 +58,7 @@ export function TestView() {
           left: `${left}px`,
         }}
       >
-        <FloatingAnchor for="test">
+        <FloatingAnchor id="test">
           <div
             className="h-8 w-8 bg-white"
             onClick={() => setShow((v) => !v)}