chore: last progress before tauri

.gitignore

@@ -1,3 +1,5 @@
 build/bin
 node_modules
 frontend/dist
+.data/*
+!.data/*.ps1

README.md

@@ -24,3 +24,13 @@ A 'simple' application for reading and visualizing the bitrate of media files.
 - [ ] Confirmation Dialogs
 - [ ] Localization
 - [ ] Logging & Log Viewer
+- [ ] Stream Merging or Splitting
+- [ ] GIF, Audio, Video support
+
+## Usage Flow
+
+1. Drop file
+2. Select streams manually or using preset buttons
+
+- Drag and drop with editable stream names
+- Presets reorganize streams smartly (All Together, Separate Video/Audio, All Separate, Separate Main Streams, Main Streams Only)

app.go

@@ -3,24 +3,57 @@ package main
 import (
 	"context"
 	"fmt"
+
+	"github.com/wailsapp/wails/v2/pkg/runtime"
+	"gopkg.in/vansante/go-ffprobe.v2"
 )
 
 // App struct
 type App struct {
 	ctx   context.Context
+	files []File
 }
 
 // NewApp creates a new App application struct
 func NewApp() *App {
-	return &App{}
+	return &App{
+		files: []File{},
+	}
 }
 
 // startup is called when the app starts. The context is saved
 // so we can call the runtime methods
 func (a *App) startup(ctx context.Context) {
+	runtime.OnFileDrop(ctx, func(x, y int, paths []string) {
+		a.OnFileDrop(x, y, paths)
+	})
+
 	a.ctx = ctx
 }
 
+func (a *App) shutdown(ctx context.Context) {
+	runtime.OnFileDropOff(ctx)
+}
+
+func (a *App) GetStream(path string) {
+}
+
+func (a *App) OnFileDrop(x, y int, paths []string) {
+	runtime.LogPrint(a.ctx, fmt.Sprintf("OnFileDrop: %v", paths))
+
+	for _, path := range paths {
+		probe, err := ffprobe.ProbeURL(a.ctx, path)
+		if err != nil {
+			runtime.LogPrint(a.ctx, fmt.Sprintf("Error: %v", err))
+			continue
+		}
+
+		for _, stream := range probe.Streams {
+			runtime.LogPrint(a.ctx, fmt.Sprintf("Stream: %v", stream))
+		}
+	}
+}
+
 // Greet returns a greeting for the given name
 func (a *App) Greet(name string) string {
 	return fmt.Sprintf("Hello %s, It's show time!", name)

frontend/src/App.tsx

@@ -1,299 +1,51 @@
-import { useState } from "react";
-import "./App.css";
-import { Greet } from "../wailsjs/go/main/App.js";
 import { ResponsiveLine } from "@nivo/line";
+import { useEffect, useMemo } from "react";
+import { OnFileDrop, OnFileDropOff } from "../wailsjs/runtime/runtime.js";
+import "./App.css";
 import { formatBytes } from "./lib/format.js";
 
+type Frame = {
+  id: string;
+  data: { x: string | number; y: number }[];
+};
+
 function App() {
-  const [resultText, setResultText] = useState(
+  useEffect(() => {
-    "Please enter your name below 👇"
+    OnFileDrop((_x, _y, paths) => {}, true);
-  );
+    return () => OnFileDropOff();
-  const [name, setName] = useState("");
+  }, []);
-  const updateName = (e: any) => setName(e.target.value);
-  const updateResultText = (result: string) => setResultText(result);
 
-  const data = [
+  const data: Frame[] = [];
-    {
+  // const data: Frame[] = useMemo(() =>
-      id: "japan",
+  //   // Array.from({ length: 4 }, (_, i) => {
-      data: [
+  //   //   const d = Math.random();
-        {
+  //   //   const g = Math.random();
-          x: "plane",
+  //   //   return {
-          y: 99,
+  //   //     id: `file-${i}`,
-        },
+  //   //     data: Array.from({ length: 500 }, (_, j) => {
-        {
+  //   //       if (Math.random() < 0.5) return null;
-          x: "helicopter",
+  //   //       return {
-          y: 80,
+  //   //         x: j,
-        },
+  //   //         y: Math.random() * 256 * d + (1 - g) * 1024,
-        {
+  //   //       };
-          x: "boat",
+  //   //     }).filter((i) => i !== null),
-          y: 60,
+  //   //   };
-        },
+  //   // }),
-        {
+  //   []
-          x: "train",
+  // );
-          y: 179,
-        },
-        {
-          x: "subway",
-          y: 102,
-        },
-        {
-          x: "bus",
-          y: 68,
-        },
-        {
-          x: "car",
-          y: 200,
-        },
-        {
-          x: "moto",
-          y: 38,
-        },
-        {
-          x: "bicycle",
-          y: 32,
-        },
-        {
-          x: "horse",
-          y: 84,
-        },
-        {
-          x: "skateboard",
-          y: 93,
-        },
-        {
-          x: "others",
-          y: 206,
-        },
-      ],
-    },
-    {
-      id: "france",
-      data: [
-        {
-          x: "plane",
-          y: 227,
-        },
-        {
-          x: "helicopter",
-          y: 278,
-        },
-        {
-          x: "boat",
-          y: 241,
-        },
-        {
-          x: "train",
-          y: 104,
-        },
-        {
-          x: "subway",
-          y: 140,
-        },
-        {
-          x: "bus",
-          y: 16,
-        },
-        {
-          x: "car",
-          y: 21,
-        },
-        {
-          x: "moto",
-          y: 135,
-        },
-        {
-          x: "bicycle",
-          y: 158,
-        },
-        {
-          x: "horse",
-          y: 41,
-        },
-        {
-          x: "skateboard",
-          y: 20,
-        },
-        {
-          x: "others",
-          y: 172,
-        },
-      ],
-    },
-    {
-      id: "us",
-      data: [
-        {
-          x: "plane",
-          y: 54,
-        },
-        {
-          x: "helicopter",
-          y: 59,
-        },
-        {
-          x: "boat",
-          y: 165,
-        },
-        {
-          x: "train",
-          y: 213,
-        },
-        {
-          x: "subway",
-          y: 79,
-        },
-        {
-          x: "bus",
-          y: 248,
-        },
-        {
-          x: "car",
-          y: 184,
-        },
-        {
-          x: "moto",
-          y: 251,
-        },
-        {
-          x: "bicycle",
-          y: 122,
-        },
-        {
-          x: "horse",
-          y: 12,
-        },
-        {
-          x: "skateboard",
-          y: 269,
-        },
-        {
-          x: "others",
-          y: 101,
-        },
-      ],
-    },
-    {
-      id: "germany",
-      data: [
-        {
-          x: "plane",
-          y: 177,
-        },
-        {
-          x: "helicopter",
-          y: 249,
-        },
-        {
-          x: "boat",
-          y: 37,
-        },
-        {
-          x: "train",
-          y: 173,
-        },
-        {
-          x: "subway",
-          y: 145,
-        },
-        {
-          x: "bus",
-          y: 283,
-        },
-        {
-          x: "car",
-          y: 50,
-        },
-        {
-          x: "moto",
-          y: 231,
-        },
-        {
-          x: "bicycle",
-          y: 100,
-        },
-        {
-          x: "horse",
-          y: 226,
-        },
-        {
-          x: "skateboard",
-          y: 5,
-        },
-        {
-          x: "others",
-          y: 139,
-        },
-      ],
-    },
-    {
-      id: "norway",
-      data: [
-        {
-          x: "plane",
-          y: 234,
-        },
-        {
-          x: "helicopter",
-          y: 38,
-        },
-        {
-          x: "boat",
-          y: 254,
-        },
-        {
-          x: "train",
-          y: 228,
-        },
-        {
-          x: "subway",
-          y: 106,
-        },
-        {
-          x: "bus",
-          y: 213,
-        },
-        {
-          x: "car",
-          y: 289,
-        },
-        {
-          x: "moto",
-          y: 116,
-        },
-        {
-          x: "bicycle",
-          y: 272,
-        },
-        {
-          x: "horse",
-          y: 50,
-        },
-        {
-          x: "skateboard",
-          y: 263,
-        },
-        {
-          x: "others",
-          y: 196,
-        },
-      ],
-    },
-  ];
 
-  function greet() {
+  console.log(data);
-    Greet(name).then(updateResultText);
-  }
 
-  return (
+  const graph = (
-    <div id="App" className="min-h-screen min-w-screen overflow-hidden">
     <ResponsiveLine
       data={data}
       margin={{ top: 50, right: 110, bottom: 50, left: 60 }}
+      xScale={{ type: "linear" }}
       yScale={{
         type: "linear",
         min: 0,
         max: "auto",
-          stacked: true,
+        stacked: false,
         reverse: false,
       }}
       theme={{
@@ -363,6 +115,25 @@ function App() {
         },
       ]}
     />
+  );
+
+  return (
+    <div
+      id="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>
+      {graph}
     </div>
   );
 }

frontend/src/style.css

@@ -27,3 +27,16 @@ 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;
+  }
+}

frontend/wailsjs/go/main/App.d.ts

@@ -1,4 +1,8 @@
 // Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
 // This file is automatically generated. DO NOT EDIT
 
+export function GetStream(arg1:string):Promise<void>;
+
 export function Greet(arg1:string):Promise<string>;
+
+export function OnFileDrop(arg1:number,arg2:number,arg3:Array<string>):Promise<void>;

frontend/wailsjs/go/main/App.js

@@ -2,6 +2,14 @@
 // Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
 // This file is automatically generated. DO NOT EDIT
 
+export function GetStream(arg1) {
+  return window['go']['main']['App']['GetStream'](arg1);
+}
+
 export function Greet(arg1) {
   return window['go']['main']['App']['Greet'](arg1);
 }
+
+export function OnFileDrop(arg1, arg2, arg3) {
+  return window['go']['main']['App']['OnFileDrop'](arg1, arg2, arg3);
+}

go.mod

@@ -2,7 +2,10 @@ module byteme
 
 go 1.23
 
-require github.com/wailsapp/wails/v2 v2.10.1
+require (
+	github.com/wailsapp/wails/v2 v2.10.1
+	gopkg.in/vansante/go-ffprobe.v2 v2.2.1
+)
 
 require (
 	github.com/bep/debounce v1.2.1 // indirect

go.sum

@@ -75,5 +75,7 @@ golang.org/x/text v0.3.6/go.mod h1:5Zoc/QRtKVWzQhOtBMvqHzDpF6irO9z98xDceosuGiQ=
 golang.org/x/text v0.22.0 h1:bofq7m3/HAFvbF51jz3Q9wLg3jkvSPuiZu/pD1XwgtM=
 golang.org/x/text v0.22.0/go.mod h1:YRoo4H8PVmsu+E3Ou7cqLVH8oXWIHVoX0jqUWALQhfY=
 golang.org/x/tools v0.0.0-20180917221912-90fa682c2a6e/go.mod h1:n7NCudcB/nEzxVGmLbDWY5pfWTLqBcC2KZ6jyYvM4mQ=
+gopkg.in/vansante/go-ffprobe.v2 v2.2.1 h1:sFV08OT1eZ1yroLCZVClIVd9YySgCh9eGjBWO0oRayI=
+gopkg.in/vansante/go-ffprobe.v2 v2.2.1/go.mod h1:qF0AlAjk7Nqzqf3y333Ly+KxN3cKF2JqA3JT5ZheUGE=
 gopkg.in/yaml.v3 v3.0.1 h1:fxVm/GzAzEWqLHuvctI91KS9hhNmmWOoWu0XTYJS7CA=
 gopkg.in/yaml.v3 v3.0.1/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=

main.go

@@ -20,11 +20,16 @@ func main() {
 		Title:  "byteme",
 		Width:  1024,
 		Height: 768,
+
 		AssetServer: &assetserver.Options{
 			Assets: assets,
 		},
+		DragAndDrop: &options.DragAndDrop{
+			EnableFileDrop: true,
+		},
 		BackgroundColour: &options.RGBA{R: 27, G: 38, B: 54, A: 1},
 		OnStartup:        app.startup,
+		OnShutdown:       app.shutdown,
 		Bind: []interface{}{
 			app,
 		},

probe.go

@@ -0,0 +1,18 @@
+package main
+
+type Frame struct {
+	Key   string
+	Bytes uint32
+}
+
+type File struct {
+	Path string
+	Data []Frame
+}
+
+func NewFile(path string) File {
+	return File{
+		Path: path,
+		Data: []Frame{},
+	}
+}