scraping ui

Co-authored-by: Jip Frijlink <JipFr@users.noreply.github.com>

src/components/player/internals/StatusCircle.tsx

@@ -0,0 +1,57 @@
+import { Icon, Icons } from "@/components/Icon";
+
+interface StatusCircle {
+  type: "loading" | "done" | "error" | "pending" | "noresult";
+}
+
+interface StatusCircleLoading extends StatusCircle {
+  type: "loading";
+  percentage: number;
+}
+
+function statusIsLoading(
+  props: StatusCircle | StatusCircleLoading
+): props is StatusCircleLoading {
+  return props.type === "loading";
+}
+
+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";
+
+  return (
+    <div
+      className={[
+        "p-0.5 border-current border-2 rounded-full h-6 w-6 relative",
+        classes || "",
+      ].join(" ")}
+    >
+      <svg
+        width="100%"
+        height="100%"
+        viewBox="0 0 64 64"
+        xmlns="http://www.w3.org/2000/svg"
+        className="rounded-full -rotate-90"
+      >
+        {statusIsLoading(props) ? (
+          <circle
+            strokeWidth="32"
+            strokeDasharray={`${props.percentage} 100`}
+            r="25%"
+            cx="50%"
+            cy="50%"
+            fill="transparent"
+            stroke="currentColor"
+          />
+        ) : null}
+      </svg>
+      {props.type === "error" ? (
+        <Icon className="absolute inset-0 text-white" icon={Icons.X} />
+      ) : null}
+    </div>
+  );
+}

src/pages/PlayerView.tsx

@@ -15,7 +15,8 @@ export function PlayerView() {
         <ScrapingPart
           media={{
             type: "movie",
-            title: "Everything Everywhere All At Once",
+            title:
+              "Everything Everywhere All At Once bsbasjkdsakjdashjdasjhkds",
             tmdbId: "545611",
             releaseYear: 2022,
           }}

src/pages/parts/player/ScrapingPart.tsx

@@ -3,6 +3,7 @@ import { useCallback, useEffect, useRef, useState } from "react";
 
 import { MWStreamType } from "@/backend/helpers/streams";
 import { usePlayer } from "@/components/player/hooks/usePlayer";
+import { StatusCircle } from "@/components/player/internals/StatusCircle";
 import { providers } from "@/utils/providers";
 
 export interface ScrapingProps {
@@ -131,13 +132,32 @@ export function ScrapingPart(props: ScrapingProps) {
       {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} />
+          );
+        if (source.status === "notfound")
+          Circle = <StatusCircle type="error" />;
+
+        // Main thing
         return (
-          <div key={order.id}>
+          <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;

tailwind.config.js

@@ -107,6 +107,14 @@ module.exports = {
             video: {
               buttonBackground: "#444B5C",
 
+              scraping: {
+                card: "#161620",
+                error: "#E44F4F",
+                success: "#40B44B",
+                loading: "#B759D8",
+                noresult: "#64647B"
+              },
+
               progress: {
                 background: "#8787A8",
                 preloaded: "#8787A8",