feat: ffprobe for stream checking, drop overlay using webview

2025-12-14 22:11:16 -06:00 · 2025-07-13 13:59:40 -05:00
parent 7fcb3e3f7c
commit 2e03281a79
9 changed files with 182 additions and 249 deletions
--- a/src/App.css
+++ b/src/App.css
@@ -1,109 +0,0 @@
-:root {
-  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
-  font-size: 16px;
-  line-height: 24px;
-  font-weight: 400;
-
-  color: #0f0f0f;
-  background-color: #f6f6f6;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-text-size-adjust: 100%;
-}
-
-.container {
-  margin: 0;
-  padding-top: 10vh;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  text-align: center;
-}
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: 0.75s;
-}
-
-.logo.tauri:hover {
-  filter: drop-shadow(0 0 2em #24c8db);
-}
-
-.row {
-  display: flex;
-  justify-content: center;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-
-a:hover {
-  color: #535bf2;
-}
-
-h1 {
-  text-align: center;
-}
-
-input,
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  color: #0f0f0f;
-  background-color: #ffffff;
-  transition: border-color 0.25s;
-  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
-}
-
-button {
-  cursor: pointer;
-}
-
-button:hover {
-  border-color: #396cd8;
-}
-button:active {
-  border-color: #396cd8;
-  background-color: #e8e8e8;
-}
-
-input,
-button {
-  outline: none;
-}
-
-#greet-input {
-  margin-right: 5px;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    color: #f6f6f6;
-    background-color: #2f2f2f;
-  }
-
-  a:hover {
-    color: #24c8db;
-  }
-
-  input,
-  button {
-    color: #ffffff;
-    background-color: #0f0f0f98;
-  }
-  button:active {
-    background-color: #0f0f0f69;
-  }
-}
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,26 +1,26 @@
-import { ResponsiveLine } from "@nivo/line";
-import { formatBytes } from "./lib/format.js";
-
 type Frame = {
  id: string;
  data: { x: string | number; y: number }[];
 };

 import { getCurrentWebview } from "@tauri-apps/api/webview";
-import { useEffect } from "react";
+import { useEffect, useRef, useState } from "react";
+import Graph from "./components/Graph.js";
+import DropOverlay from "./components/drop-overlay.js";

 function App() {
  const data: Frame[] = [];

+  const [paths, setPaths] = useState<string[]>([]);
  useEffect(() => {
    const unlistenPromise = getCurrentWebview().onDragDropEvent(
-      async (event) => {
-        if (event.payload.type === "over") {
-          console.log("User hovering", event.payload.position);
-        } else if (event.payload.type === "drop") {
-          console.log("User dropped", event.payload.paths);
-        } else {
-          console.log("File drop cancelled");
+      async ({ payload }) => {
+        if (payload.type === "enter") {
+          setPaths(payload.paths);
+          console.log("User hovering", payload);
+        } else if (payload.type === "leave" || payload.type === "drop") {
+          setPaths([]);
+          console.log("User left", payload);
        }
      }
    );
@@ -34,106 +34,7 @@ function App() {
    };
  }, []);

-  // const data: Frame[] = useMemo(() =>
-  //   // Array.from({ length: 4 }, (_, i) => {
-  //   //   const d = Math.random();
-  //   //   const g = Math.random();
-  //   //   return {
-  //   //     id: `file-${i}`,
-  //   //     data: Array.from({ length: 500 }, (_, j) => {
-  //   //       if (Math.random() < 0.5) return null;
-  //   //       return {
-  //   //         x: j,
-  //   //         y: Math.random() * 256 * d + (1 - g) * 1024,
-  //   //       };
-  //   //     }).filter((i) => i !== null),
-  //   //   };
-  //   // }),
-  //   []
-  // );
-
-  console.log(data);
-
-  const graph = (
-    <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",
-      ]}
-      // pointColor={{ modifiers: [["brighter", 1100]] }}
-      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",
-        },
-      ]}
-    />
-  );
+  const graph = <Graph data={data} />;

  return (
    <div
@@ -141,16 +42,7 @@ function App() {
      className="min-h-screen min-w-screen overflow-hidden"
      style={{ "--wails-drop-target": "drop" } as React.CSSProperties}
    >
-      <div
-        id="drop-target"
-        className="absolute z-10 top-0 left-0 w-full h-full transition-[opacity] duration-200 ease-in-out"
-      >
-        <div className="flex flex-col items-center justify-center shadow h-full">
-          <div className="text-2xl font-bold text-zinc-200">
-            Drag and Drop to Add
-          </div>
-        </div>
-      </div>
+      <DropOverlay paths={paths} />
      {graph}
    </div>
  );
--- a/src/components/drop-overlay.tsx
+++ b/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;
--- a/src/components/graph.tsx
+++ b/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;
--- a/src/global.css
+++ b/src/global.css
@@ -37,16 +37,3 @@ body {
  height: 100vh;
  text-align: center;
 }
-
-#drop-target {
-  pointer-events: none;
-  opacity: 0;
-  background-color: rgb(0, 0, 0, 0.5) !important;
-}
-
-.wails-drop-target-active {
-  #drop-target {
-    pointer-events: auto;
-    opacity: 1;
-  }
-}