scrape styling and attempt at centering

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

src/components/Icon.tsx

@@ -1,3 +1,4 @@
+import classNames from "classnames";
 import { memo, useEffect, useRef } from "react";
 
 export enum Icons {
@@ -113,7 +114,7 @@ export const Icon = memo((props: IconProps) => {
   return (
     <span
       dangerouslySetInnerHTML={{ __html: iconList[props.icon] }} // eslint-disable-line react/no-danger
-      className={props.className}
+      className={classNames(props.className, "inline-block")}
     />
   );
 });

src/components/player/internals/ScrapeCard.tsx

@@ -0,0 +1,65 @@
+import classNames from "classnames";
+import { ReactNode } from "react";
+
+import { StatusCircle } from "@/components/player/internals/StatusCircle";
+import { Transition } from "@/components/Transition";
+
+export interface ScrapeItemProps {
+  status: "failure" | "pending" | "notfound" | "success" | "waiting";
+  name: string;
+  id?: string;
+  percentage?: number;
+  children?: ReactNode;
+}
+
+export interface ScrapeCardProps extends ScrapeItemProps {
+  hasChildren?: boolean;
+}
+
+const statusTextMap: Partial<Record<ScrapeCardProps["status"], string>> = {
+  notfound: "Doesn't have the video",
+  failure: "Error occured",
+  pending: "Checking for videos...",
+};
+
+const statusMap: Record<ScrapeCardProps["status"], StatusCircle["type"]> = {
+  failure: "error",
+  notfound: "noresult",
+  pending: "loading",
+  success: "success",
+  waiting: "waiting",
+};
+
+export function ScrapeItem(props: ScrapeItemProps) {
+  const text = statusTextMap[props.status];
+  const status = statusMap[props.status];
+
+  return (
+    <div className="grid gap-6 grid-cols-[auto,1fr]" data-source-id={props.id}>
+      <StatusCircle type={status} percentage={props.percentage ?? 0} />
+      <div>
+        <p className="font-bold text-white">{props.name}</p>
+        <div className="h-4">
+          <Transition animation="fade" show={!!text}>
+            <p>{text}</p>
+          </Transition>
+        </div>
+        {props.children}
+      </div>
+    </div>
+  );
+}
+
+export function ScrapeCard(props: ScrapeCardProps) {
+  return (
+    <div
+      data-source-id={props.id}
+      className={classNames({
+        "!bg-opacity-100": props.hasChildren,
+        "w-72 rounded-md p-6 bg-video-scraping-card bg-opacity-0": true,
+      })}
+    >
+      <ScrapeItem {...props} />
+    </div>
+  );
+}

src/components/player/internals/StatusCircle.tsx

@@ -1,10 +1,15 @@
+import { a, to, useSpring } from "@react-spring/web";
+import classNames from "classnames";
+
 import { Icon, Icons } from "@/components/Icon";
+import { Transition } from "@/components/Transition";
 
-interface StatusCircle {
-  type: "loading" | "done" | "error" | "pending" | "noresult";
+export interface StatusCircle {
+  type: "loading" | "success" | "error" | "noresult" | "waiting";
+  percentage?: number;
 }
 
-interface StatusCircleLoading extends StatusCircle {
+export interface StatusCircleLoading extends StatusCircle {
   type: "loading";
   percentage: number;
 }
@@ -16,19 +21,27 @@ function statusIsLoading(
 }
 
 export function StatusCircle(props: StatusCircle | StatusCircleLoading) {
-  let classes = "";
-  if (props.type === "loading") classes = "text-video-scraping-loading";
-  if (props.type === "noresult")
-    classes = "text-video-scraping-noresult text-opacity-50";
-  if (props.type === "error")
-    classes = "text-video-scraping-error bg-video-scraping-error";
+  const [spring] = useSpring(
+    () => ({
+      percentage: statusIsLoading(props) ? props.percentage : 0,
+    }),
+    [props]
+  );
 
   return (
     <div
-      className={[
-        "p-0.5 border-current border-2 rounded-full h-6 w-6 relative",
-        classes || "",
-      ].join(" ")}
+      className={classNames({
+        "p-0.5 border-current border-2 rounded-full h-6 w-6 relative transition-colors":
+          true,
+        "text-video-scraping-loading": props.type === "loading",
+        "text-video-scraping-noresult text-opacity-50":
+          props.type === "waiting",
+        "text-video-scraping-error bg-video-scraping-error":
+          props.type === "error",
+        "text-green-500 bg-green-500": props.type === "success",
+        "text-video-scraping-noresult bg-video-scraping-noresult":
+          props.type === "noresult",
+      })}
     >
       <svg
         width="100%"
@@ -37,21 +50,36 @@ export function StatusCircle(props: StatusCircle | StatusCircleLoading) {
         xmlns="http://www.w3.org/2000/svg"
         className="rounded-full -rotate-90"
       >
-        {statusIsLoading(props) ? (
-          <circle
+        <Transition animation="fade" show={statusIsLoading(props)}>
+          <a.circle
             strokeWidth="32"
-            strokeDasharray={`${props.percentage} 100`}
+            strokeDasharray={to(spring.percentage, (val) => `${val} 100`)}
             r="25%"
             cx="50%"
             cy="50%"
             fill="transparent"
             stroke="currentColor"
+            className="transition-[strokeDasharray]"
           />
-        ) : null}
+        </Transition>
       </svg>
-      {props.type === "error" ? (
-        <Icon className="absolute inset-0 text-white" icon={Icons.X} />
-      ) : null}
+      <Transition animation="fade" show={props.type === "error"}>
+        <Icon
+          className="absolute inset-0 flex items-center justify-center text-white"
+          icon={Icons.X}
+        />
+      </Transition>
+      <Transition animation="fade" show={props.type === "success"}>
+        <Icon
+          className="absolute inset-0 flex items-center text-xs justify-center text-white"
+          icon={Icons.CHECKMARK}
+        />
+      </Transition>
+      <Transition animation="fade" show={props.type === "noresult"}>
+        <div className="absolute inset-0 flex items-center">
+          <div className="h-[3px] flex-1 mx-1 rounded-full bg-background-main" />
+        </div>
+      </Transition>
     </div>
   );
 }

src/pages/PlayerView.tsx

@@ -1,9 +1,12 @@
+import { useEffect, useState } from "react";
+
 import { MWStreamType } from "@/backend/helpers/streams";
 import { BrandPill } from "@/components/layout/BrandPill";
 import { Player } from "@/components/player";
 import { AutoPlayStart } from "@/components/player/atoms";
 import { usePlayer } from "@/components/player/hooks/usePlayer";
 import { useShouldShowControls } from "@/components/player/hooks/useShouldShowControls";
+import { StatusCircle } from "@/components/player/internals/StatusCircle";
 import { ScrapingPart } from "@/pages/parts/player/ScrapingPart";
 import { playerStatus } from "@/stores/player/slices/source";
 
@@ -11,13 +14,19 @@ export function PlayerView() {
   const { status, setScrapeStatus, playMedia } = usePlayer();
   const desktopControlsVisible = useShouldShowControls();
 
+  const [a, setA] = useState(0);
+  useEffect(() => {
+    const dsf = setInterval(() => setA(Math.floor(Math.random() * 100)), 1000);
+    return () => clearInterval(dsf);
+  }, [setA]);
+
   return (
     <Player.Container onLoad={setScrapeStatus}>
       {status === playerStatus.SCRAPING ? (
         <ScrapingPart
           media={{
             type: "movie",
-            title: "Everything Everywhere All At Once",
+            title: "Everything Everywhere All At OnceASFAFS",
             tmdbId: "545611",
             releaseYear: 2022,
           }}

src/pages/parts/player/ScrapingPart.tsx

@@ -1,8 +1,12 @@
 import { ProviderControls, ScrapeMedia } from "@movie-web/providers";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import type { AsyncReturnType } from "type-fest";
 
 import { usePlayer } from "@/components/player/hooks/usePlayer";
+import {
+  ScrapeCard,
+  ScrapeItem,
+} from "@/components/player/internals/ScrapeCard";
 import { StatusCircle } from "@/components/player/internals/StatusCircle";
 import { providers } from "@/utils/providers";
 
@@ -27,6 +31,7 @@ export interface ScrapingItems {
 function useScrape() {
   const [sources, setSources] = useState<Record<string, ScrapingSegment>>({});
   const [sourceOrder, setSourceOrder] = useState<ScrapingItems[]>([]);
+  const [currentSource, setCurrentSource] = useState<string>();
 
   const startScraping = useCallback(
     async (media: ScrapeMedia) => {
@@ -60,6 +65,7 @@ function useScrape() {
               if (s[id]) s[id].status = "pending";
               return { ...s };
             });
+            setCurrentSource(id);
           },
           update(evt) {
             setSources((s) => {
@@ -105,12 +111,52 @@ function useScrape() {
     startScraping,
     sourceOrder,
     sources,
+    currentSource,
   };
 }
 
 export function ScrapingPart(props: ScrapingProps) {
   const { playMedia } = usePlayer();
-  const { startScraping, sourceOrder, sources } = useScrape();
+  const { startScraping, sourceOrder, sources, currentSource } = useScrape();
+
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const listRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    if (!containerRef.current) return;
+    if (!listRef.current) return;
+
+    const elements = [
+      ...listRef.current.querySelectorAll("div[data-source-id]"),
+    ] as HTMLDivElement[];
+
+    const currentIndex = elements.findIndex(
+      (e) => e.getAttribute("data-source-id") === currentSource
+    );
+
+    const currentElement = elements[currentIndex];
+
+    if (!currentElement) return;
+
+    const containerWidth = containerRef.current.getBoundingClientRect().width;
+    const listWidth = listRef.current.getBoundingClientRect().width;
+
+    const containerHeight = containerRef.current.getBoundingClientRect().height;
+    const listHeight = listRef.current.getBoundingClientRect().height;
+
+    const listTop = listRef.current.getBoundingClientRect().top;
+
+    const currentTop = currentElement.getBoundingClientRect().top;
+    const currentHeight = currentElement.getBoundingClientRect().height;
+
+    const topDifference = currentTop - listTop;
+
+    const listNewLeft = containerWidth / 2 - listWidth / 2;
+    const listNewTop = containerHeight / 2 - topDifference + currentHeight / 2;
+
+    listRef.current.style.left = `${listNewLeft}px`;
+    listRef.current.style.top = `${listNewTop}px`;
+  }, [sourceOrder, currentSource]);
 
   const started = useRef(false);
   useEffect(() => {
@@ -123,52 +169,35 @@ export function ScrapingPart(props: ScrapingProps) {
   }, [startScraping, props, playMedia]);
 
   return (
-    <div className="h-full w-full flex items-center justify-center flex-col">
-      {sourceOrder.map((order) => {
-        const source = sources[order.id];
-        if (!source) return null;
-
-        // Progress circle
-        let Circle = <StatusCircle type="pending" />;
-        if (source.status === "pending")
-          Circle = (
-            <StatusCircle type="loading" percentage={source.percentage} />
+    <div className="h-full w-full relative" ref={containerRef}>
+      <div className="absolute" ref={listRef}>
+        {sourceOrder.map((order) => {
+          const source = sources[order.id];
+          return (
+            <ScrapeCard
+              id={order.id}
+              name={source.name}
+              status={source.status}
+              hasChildren={order.children.length > 0}
+              percentage={source.percentage}
+              key={order.id}
+            >
+              {order.children.map((embedId) => {
+                const embed = sources[embedId];
+                return (
+                  <ScrapeItem
+                    id={embedId}
+                    name={embed.name}
+                    status={source.status}
+                    percentage={embed.percentage}
+                    key={embedId}
+                  />
+                );
+              })}
+            </ScrapeCard>
           );
-        if (source.status === "notfound")
-          Circle = <StatusCircle type="error" />;
-
-        // Main thing
-        return (
-          <div
-            key={order.id}
-            className="bg-video-scraping-card w-72 rounded-md p-6"
-          >
-            <div className="grid gap-6 grid-cols-[auto,1fr]">
-              {Circle}
-              <div>
-                <p className="font-bold text-white">{source.name}</p>
-                <p>
-                  status: {source.status} ({source.percentage}%)
-                </p>
-                <p>reason: {source.reason}</p>
-              </div>
-            </div>
-            {order.children.map((embedId) => {
-              const embed = sources[embedId];
-              if (!embed) return null;
-              return (
-                <div key={embedId} className="border border-blue-300 rounded">
-                  <p className="font-bold text-white">{embed.name}</p>
-                  <p>
-                    status: {embed.status} ({embed.percentage}%)
-                  </p>
-                  <p>reason: {embed.reason}</p>
-                </div>
-              );
-            })}
-          </div>
-        );
-      })}
+        })}
+      </div>
     </div>
   );
 }