feat: ffprobe for stream checking, drop overlay using webview

src/components/drop-overlay.tsx

@@ -0,0 +1,46 @@
+import { invoke } from "@tauri-apps/api/core";
+import { useEffect, useState } from "react";
+
+type DropOverlayProps = {
+  paths: string[];
+};
+
+type Status = "hidden" | "loading" | "ready" | "error";
+
+const DropOverlay = ({ paths }: DropOverlayProps) => {
+  const [status, setStatus] = useState<Status>("hidden");
+
+  useEffect(() => {
+    if (paths.length === 0) {
+      setStatus("hidden");
+      return;
+    }
+
+    setStatus("loading");
+    invoke("has_streams", { paths }).then((result) => {
+      setStatus(result ? "ready" : "error");
+    });
+  }, [paths]);
+
+  return (
+    <div
+      className={`absolute z-10 top-0 left-0 w-full h-full transition-[opacity] bg-black/20 duration-200 ease-in-out ${
+        status === "hidden" ? "opacity-0 pointer-events-none" : "opacity-100"
+      }`}
+    >
+      <div className="flex flex-col items-center justify-center shadow h-full">
+        <div className="text-2xl font-bold text-zinc-200">
+          {status === "loading"
+            ? "Loading..."
+            : status === "ready"
+            ? "Ready"
+            : status === "error"
+            ? "Error"
+            : "Hidden"}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default DropOverlay;

src/components/graph.tsx

@@ -0,0 +1,85 @@
+import { ResponsiveLine } from "@nivo/line";
+import { formatBytes } from "../lib/format.js";
+
+type Frame = {
+  id: string;
+  data: { x: string | number; y: number }[];
+};
+
+type GraphProps = {
+  data: Frame[];
+};
+
+const Graph = ({ data }: GraphProps) => (
+  <ResponsiveLine
+    data={data}
+    margin={{ top: 50, right: 110, bottom: 50, left: 60 }}
+    xScale={{ type: "linear" }}
+    yScale={{
+      type: "linear",
+      min: 0,
+      max: "auto",
+      stacked: false,
+      reverse: false,
+    }}
+    theme={{
+      tooltip: {
+        container: {
+          backgroundColor: "#2e2b45",
+        },
+      },
+      grid: {
+        line: {
+          stroke: "rgb(252, 191, 212)",
+          strokeWidth: 0.35,
+          strokeOpacity: 0.75,
+        },
+      },
+      crosshair: {
+        line: {
+          stroke: "#fdd3e2",
+          strokeWidth: 1,
+        },
+      },
+      axis: {
+        legend: {},
+        domain: {
+          line: {
+            stroke: "rgb(252, 191, 212)",
+            strokeWidth: 0.5,
+            strokeOpacity: 0.5,
+          },
+        },
+      },
+      text: {
+        fill: "#6e6a86",
+      },
+    }}
+    axisBottom={{ legend: "transportation", legendOffset: 36 }}
+    axisLeft={{
+      legend: "count",
+      legendOffset: -40,
+      format: (v) => formatBytes(v * 1024 * 53),
+    }}
+    pointSize={10}
+    colors={["#3e8faf", "#c4a7e7", "#f5c276", "#EA9B96", "#EB7092", "#9CCFD8"]}
+    pointBorderWidth={0}
+    pointBorderColor={{ from: "seriesColor" }}
+    pointLabelYOffset={-12}
+    enableSlices={"x"}
+    enableTouchCrosshair={true}
+    useMesh={true}
+    legends={[
+      {
+        anchor: "bottom-right",
+        direction: "column",
+        translateX: 100,
+        itemWidth: 80,
+        itemHeight: 22,
+        symbolShape: "circle",
+      },
+    ]}
+  />
+);
+
+export default Graph;