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,28 +6,23 @@ 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;
-  return (
-    <div
-      className={[props.className ?? "", "absolute"].join(" ")}
-      data-floating-page="true"
-      style={{
-        height: `${props.height}px`,
-        width: !isMobile ? `${props.width}px` : "100%",
-      }}
-    >
-      {props.children}
-    </div>
-  );
+  const width = !isMobile ? `${props.width}px` : "100%";
   return (
     <Transition animation="slide-up" show={props.show}>
-      <div data-floating-page="true" className={props.className}>
+      <div
+        className={[props.className ?? "", "absolute left-0 top-0"].join(" ")}
+        data-floating-page="true"
+        style={{
+          height: props.height ? `${props.height}px` : undefined,
+          width: props.width ? width : undefined,
+        }}
+      >
         {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,110 +100,112 @@ export function EpisodeSelectionPopout() {
   }, [isPickingSeason]);
 
   return (
-    <>
-      <PopoutSection className="bg-ash-100 font-bold text-white">
-        <div className="relative flex items-center">
-          <button
-            className={[
-              "-m-1.5 rounded-lg p-1.5 transition-opacity duration-100 hover:bg-ash-200",
-              isPickingSeason ? "pointer-events-none opacity-0" : "opacity-1",
-            ].join(" ")}
-            onClick={toggleIsPickingSeason}
-            type="button"
-          >
-            <Icon icon={Icons.CHEVRON_LEFT} />
-          </button>
-          <span
-            className={[
-              titlePositionClass,
-              !isPickingSeason ? "opacity-1" : "opacity-0",
-            ].join(" ")}
-          >
-            {currentSeasonInfo?.title || ""}
-          </span>
-          <span
-            className={[
-              titlePositionClass,
-              isPickingSeason ? "opacity-1" : "opacity-0",
-            ].join(" ")}
-          >
-            {t("videoPlayer.popouts.seasons")}
-          </span>
-        </div>
-      </PopoutSection>
-      <div className="relative grid h-full grid-rows-[minmax(1px,1fr)]">
-        <PopoutSection
-          className={[
-            "absolute inset-0 z-30 overflow-y-auto border-ash-400 bg-ash-100 transition-[max-height,padding] duration-200",
-            isPickingSeason
-              ? "max-h-full border-t"
-              : "max-h-0 overflow-hidden py-0",
-          ].join(" ")}
-        >
-          {currentSeasonInfo
-            ? meta?.seasons?.map?.((season) => (
-                <PopoutListEntry
-                  key={season.id}
-                  active={meta?.episode?.seasonId === season.id}
-                  onClick={() => setSeason(season.id)}
-                  isOnDarkBackground
-                >
-                  {season.title}
-                </PopoutListEntry>
-              ))
-            : "No season"}
+    <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
+              className={[
+                "-m-1.5 rounded-lg p-1.5 transition-opacity duration-100 hover:bg-ash-200",
+                isPickingSeason ? "pointer-events-none opacity-0" : "opacity-1",
+              ].join(" ")}
+              onClick={toggleIsPickingSeason}
+              type="button"
+            >
+              <Icon icon={Icons.CHEVRON_LEFT} />
+            </button>
+            <span
+              className={[
+                titlePositionClass,
+                !isPickingSeason ? "opacity-1" : "opacity-0",
+              ].join(" ")}
+            >
+              {currentSeasonInfo?.title || ""}
+            </span>
+            <span
+              className={[
+                titlePositionClass,
+                isPickingSeason ? "opacity-1" : "opacity-0",
+              ].join(" ")}
+            >
+              {t("videoPlayer.popouts.seasons")}
+            </span>
+          </div>
         </PopoutSection>
-        <PopoutSection className="relative h-full overflow-y-auto">
-          {loading ? (
-            <div className="flex h-full w-full items-center justify-center">
-              <Loading />
-            </div>
-          ) : error ? (
-            <div className="flex h-full w-full items-center justify-center">
-              <div className="flex flex-col flex-wrap items-center text-slate-400">
-                <IconPatch
-                  icon={Icons.EYE_SLASH}
-                  className="text-xl text-bink-600"
-                />
-                <p className="mt-6 w-full text-center">
-                  {t("videoPLayer.popouts.errors.loadingWentWrong", {
-                    seasonTitle: currentSeasonInfo?.title?.toLowerCase(),
-                  })}
-                </p>
+        <div className="relative grid h-full grid-rows-[minmax(1px,1fr)]">
+          <PopoutSection
+            className={[
+              "absolute inset-0 z-30 overflow-y-auto border-ash-400 bg-ash-100 transition-[max-height,padding] duration-200",
+              isPickingSeason
+                ? "max-h-full border-t"
+                : "max-h-0 overflow-hidden py-0",
+            ].join(" ")}
+          >
+            {currentSeasonInfo
+              ? meta?.seasons?.map?.((season) => (
+                  <PopoutListEntry
+                    key={season.id}
+                    active={meta?.episode?.seasonId === season.id}
+                    onClick={() => setSeason(season.id)}
+                    isOnDarkBackground
+                  >
+                    {season.title}
+                  </PopoutListEntry>
+                ))
+              : "No season"}
+          </PopoutSection>
+          <PopoutSection className="relative h-full overflow-y-auto">
+            {loading ? (
+              <div className="flex h-full w-full items-center justify-center">
+                <Loading />
               </div>
-            </div>
-          ) : (
-            <div>
-              {currentSeasonEpisodes && currentSeasonInfo
-                ? currentSeasonEpisodes.map((e) => (
-                    <PopoutListEntry
-                      key={e.id}
-                      active={e.id === meta?.episode?.episodeId}
-                      onClick={() => {
-                        if (e.id === meta?.episode?.episodeId)
-                          controls.closePopout();
-                        else setCurrent(currentSeasonInfo.id, e.id);
-                      }}
-                      percentageCompleted={
-                        watched.items.find(
-                          (item) =>
-                            item.item?.series?.seasonId ===
-                              currentSeasonInfo.id &&
-                            item.item?.series?.episodeId === e.id
-                        )?.percentage
-                      }
-                    >
-                      {t("videoPlayer.popouts.episode", {
-                        index: e.number,
-                        title: e.title,
-                      })}
-                    </PopoutListEntry>
-                  ))
-                : "No episodes"}
-            </div>
-          )}
-        </PopoutSection>
+            ) : error ? (
+              <div className="flex h-full w-full items-center justify-center">
+                <div className="flex flex-col flex-wrap items-center text-slate-400">
+                  <IconPatch
+                    icon={Icons.EYE_SLASH}
+                    className="text-xl text-bink-600"
+                  />
+                  <p className="mt-6 w-full text-center">
+                    {t("videoPLayer.popouts.errors.loadingWentWrong", {
+                      seasonTitle: currentSeasonInfo?.title?.toLowerCase(),
+                    })}
+                  </p>
+                </div>
+              </div>
+            ) : (
+              <div>
+                {currentSeasonEpisodes && currentSeasonInfo
+                  ? currentSeasonEpisodes.map((e) => (
+                      <PopoutListEntry
+                        key={e.id}
+                        active={e.id === meta?.episode?.episodeId}
+                        onClick={() => {
+                          if (e.id === meta?.episode?.episodeId)
+                            controls.closePopout();
+                          else setCurrent(currentSeasonInfo.id, e.id);
+                        }}
+                        percentageCompleted={
+                          watched.items.find(
+                            (item) =>
+                              item.item?.series?.seasonId ===
+                                currentSeasonInfo.id &&
+                              item.item?.series?.episodeId === e.id
+                          )?.percentage
+                        }
+                      >
+                        {t("videoPlayer.popouts.episode", {
+                          index: e.number,
+                          title: e.title,
+                        })}
+                      </PopoutListEntry>
+                    ))
+                  : "No episodes"}
+              </div>
+            )}
+          </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]);
-
-  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,
-    }
-  );
+function ShowPopout(props: { popoutId: string | null; onClose: () => void }) {
+  const popoutMap = {
+    source: <SourceSelectionPopout />,
+    captions: <CaptionSelectionPopout />,
+    settings: <SettingsPopout />,
+    episodes: <EpisodeSelectionPopout />,
+  };
 
   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`,
-      }}
-    >
-      <ShowPopout popoutId={props.videoInterface.popout} />
-    </a.div>
+    <>
+      {Object.entries(popoutMap).map(([id, el]) => (
+        <FloatingContainer
+          key={id}
+          show={props.popoutId === id}
+          onClose={props.onClose}
+        >
+          <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)}