Added favicon

Closes #139

.gitignore

@@ -14,4 +14,4 @@ session.dat
 config.yml
 cookies.txt
 __debug*
-ui/
+app/

frontend/index.html

@@ -5,6 +5,7 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="icon" type="image/x-icon" href="/favicon.ico">
     <title>yt-dlp Web UI</title>
 </head>
 

server/internal/stack.go

@@ -1,37 +1,33 @@
 package internal
 
-type Node[T any] struct {
-	Value T
-}
-
 type Stack[T any] struct {
-	Nodes []*Node[T]
-	count int
+	Elements []*T
+	count    int
 }
 
 func NewStack[T any]() *Stack[T] {
 	return &Stack[T]{
-		Nodes: make([]*Node[T], 10),
+		Elements: make([]*T, 10),
 	}
 }
 
 func (s *Stack[T]) Push(val T) {
-	if s.count >= len(s.Nodes) {
-		Nodes := make([]*Node[T], len(s.Nodes)*2)
-		copy(Nodes, s.Nodes)
-		s.Nodes = Nodes
+	if s.count >= len(s.Elements) {
+		Elements := make([]*T, len(s.Elements)*2)
+		copy(Elements, s.Elements)
+		s.Elements = Elements
 	}
-	s.Nodes[s.count] = &Node[T]{Value: val}
+	s.Elements[s.count] = &val
 	s.count++
 }
 
-func (s *Stack[T]) Pop() *Node[T] {
+func (s *Stack[T]) Pop() *T {
 	if s.count == 0 {
 		return nil
 	}
-	node := s.Nodes[s.count-1]
+	Element := s.Elements[s.count-1]
 	s.count--
-	return node
+	return Element
 }
 
 func (s *Stack[T]) IsEmpty() bool {

server/rest/container.go

@@ -30,5 +30,8 @@ func ApplyRouter(db *sql.DB, mdb *internal.MemoryDB, mq *internal.MessageQueue)
 		r.Post("/template", h.AddTemplate())
 		r.Get("/template/all", h.GetTemplates())
 		r.Delete("/template/{id}", h.DeleteTemplate())
+
+		r.Get("/tree", h.DirectoryTree())
+		r.Get("/d/{id}", h.DownloadFile())
 	}
 }

server/rest/handlers.go

@@ -2,7 +2,10 @@ package rest
 
 import (
 	"encoding/json"
+	"io"
 	"net/http"
+	"os"
+	"path/filepath"
 
 	"github.com/go-chi/chi/v5"
 	"github.com/marcopeocchi/yt-dlp-web-ui/server/internal"
@@ -154,3 +157,55 @@ func (h *Handler) DeleteTemplate() http.HandlerFunc {
 		}
 	}
 }
+
+func (h *Handler) DirectoryTree() http.HandlerFunc {
+	return func(w http.ResponseWriter, r *http.Request) {
+		defer r.Body.Close()
+
+		w.Header().Set("Content-Type", "application/json")
+
+		tree, err := h.service.DirectoryTree(r.Context())
+		if err != nil {
+			http.Error(w, err.Error(), http.StatusInternalServerError)
+			return
+		}
+
+		err = json.NewEncoder(w).Encode(tree)
+		if err != nil {
+			http.Error(w, err.Error(), http.StatusInternalServerError)
+		}
+	}
+}
+
+func (h *Handler) DownloadFile() http.HandlerFunc {
+	return func(w http.ResponseWriter, r *http.Request) {
+		defer r.Body.Close()
+
+		w.Header().Set("Content-Type", "application/json")
+
+		id := chi.URLParam(r, "id")
+
+		path, err := h.service.DownloadFile(r.Context(), id)
+		if err != nil {
+			http.Error(w, err.Error(), http.StatusInternalServerError)
+			return
+		}
+
+		w.Header().Add(
+			"Content-Disposition",
+			"inline; filename="+filepath.Base(*path),
+		)
+		w.Header().Set(
+			"Content-Type",
+			"application/octet-stream",
+		)
+
+		fd, err := os.Open(*path)
+		if err != nil {
+			http.Error(w, err.Error(), http.StatusInternalServerError)
+			return
+		}
+
+		io.Copy(w, fd)
+	}
+}

server/rest/service.go

@@ -9,6 +9,7 @@ import (
 
 	"github.com/google/uuid"
 	"github.com/marcopeocchi/yt-dlp-web-ui/server/internal"
+	"github.com/marcopeocchi/yt-dlp-web-ui/server/sys"
 )
 
 type Service struct {
@@ -118,3 +119,16 @@ func (s *Service) DeleteTemplate(ctx context.Context, id string) error {
 
 	return err
 }
+
+func (s *Service) DirectoryTree(ctx context.Context) (*internal.Stack[sys.FSNode], error) {
+	return sys.DirectoryTree()
+}
+
+func (s *Service) DownloadFile(ctx context.Context, id string) (*string, error) {
+	p, err := s.mdb.Get(id)
+	if err != nil {
+		return nil, err
+	}
+
+	return &p.Output.Path, nil
+}

server/rpc/service.go

@@ -140,7 +140,7 @@ func (s *Service) FreeSpace(args NoArgs, free *uint64) error {
 }
 
 // Return a flattned tree of the download directory
-func (s *Service) DirectoryTree(args NoArgs, tree *[]string) error {
+func (s *Service) DirectoryTree(args NoArgs, tree *internal.Stack[sys.FSNode]) error {
 	dfsTree, err := sys.DirectoryTree()
 	if dfsTree != nil {
 		*tree = *dfsTree

server/sys/fs.go

@@ -18,39 +18,35 @@ func FreeSpace() (uint64, error) {
 	return (stat.Bavail * uint64(stat.Bsize)), nil
 }
 
+type FSNode struct {
+	path     string
+	children []FSNode
+}
+
 // Build a directory tree started from the specified path using DFS.
 // Then return the flattened tree represented as a list.
-func DirectoryTree() (*[]string, error) {
-	type Node struct {
-		path     string
-		children []Node
-	}
-
+func DirectoryTree() (*internal.Stack[FSNode], error) {
 	rootPath := config.Instance().DownloadPath
 
-	stack := internal.NewStack[Node]()
-	flattened := make([]string, 0)
+	stack := internal.NewStack[FSNode]()
 
-	stack.Push(Node{path: rootPath})
-
-	flattened = append(flattened, rootPath)
+	stack.Push(FSNode{path: rootPath})
 
 	for stack.IsNotEmpty() {
-		current := stack.Pop().Value
+		current := stack.Pop()
 		children, err := os.ReadDir(current.path)
 		if err != nil {
 			return nil, err
 		}
 		for _, entry := range children {
 			childPath := filepath.Join(current.path, entry.Name())
-			childNode := Node{path: childPath}
+			childNode := FSNode{path: childPath}
 
 			if entry.IsDir() {
 				current.children = append(current.children, childNode)
 				stack.Push(childNode)
-				flattened = append(flattened, childNode.path)
 			}
 		}
 	}
-	return &flattened, nil
+	return stack, nil
 }

ui/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

ui/.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["svelte.svelte-vscode"]
+}

ui/README.md

@@ -0,0 +1,47 @@
+# Svelte + TS + Vite
+
+This template should help get you started developing with Svelte and TypeScript in Vite.
+
+## Recommended IDE Setup
+
+[VS Code](https://code.visualstudio.com/) + [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode).
+
+## Need an official Svelte framework?
+
+Check out [SvelteKit](https://github.com/sveltejs/kit#readme), which is also powered by Vite. Deploy anywhere with its serverless-first approach and adapt to various platforms, with out of the box support for TypeScript, SCSS, and Less, and easily-added support for mdsvex, GraphQL, PostCSS, Tailwind CSS, and more.
+
+## Technical considerations
+
+**Why use this over SvelteKit?**
+
+- It brings its own routing solution which might not be preferable for some users.
+- It is first and foremost a framework that just happens to use Vite under the hood, not a Vite app.
+
+This template contains as little as possible to get started with Vite + TypeScript + Svelte, while taking into account the developer experience with regards to HMR and intellisense. It demonstrates capabilities on par with the other `create-vite` templates and is a good starting point for beginners dipping their toes into a Vite + Svelte project.
+
+Should you later need the extended capabilities and extensibility provided by SvelteKit, the template has been structured similarly to SvelteKit so that it is easy to migrate.
+
+**Why `global.d.ts` instead of `compilerOptions.types` inside `jsconfig.json` or `tsconfig.json`?**
+
+Setting `compilerOptions.types` shuts out all other types not explicitly listed in the configuration. Using triple-slash references keeps the default TypeScript setting of accepting type information from the entire workspace, while also adding `svelte` and `vite/client` type information.
+
+**Why include `.vscode/extensions.json`?**
+
+Other templates indirectly recommend extensions via the README, but this file allows VS Code to prompt the user to install the recommended extension upon opening the project.
+
+**Why enable `allowJs` in the TS template?**
+
+While `allowJs: false` would indeed prevent the use of `.js` files in the project, it does not prevent the use of JavaScript syntax in `.svelte` files. In addition, it would force `checkJs: false`, bringing the worst of both worlds: not being able to guarantee the entire codebase is TypeScript, and also having worse typechecking for the existing JavaScript. In addition, there are valid use cases in which a mixed codebase may be relevant.
+
+**Why is HMR not preserving my local component state?**
+
+HMR state preservation comes with a number of gotchas! It has been disabled by default in both `svelte-hmr` and `@sveltejs/vite-plugin-svelte` due to its often surprising behavior. You can read the details [here](https://github.com/rixo/svelte-hmr#svelte-hmr).
+
+If you have state that's important to retain within a component, consider creating an external store which would not be replaced by HMR.
+
+```ts
+// store.ts
+// An extremely simple external store
+import { writable } from 'svelte/store'
+export default writable(0)
+```

ui/index.html

@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="/svelte.svg" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>yt-dlp WebUI</title>
+</head>
+
+<body>
+  <div id="app"></div>
+  <script type="module" src="/src/main.ts"></script>
+</body>
+
+</html>

ui/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "ui",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "check": "svelte-check --tsconfig ./tsconfig.json"
+  },
+  "devDependencies": {
+    "@sveltejs/vite-plugin-svelte": "^3.0.1",
+    "@tsconfig/svelte": "^5.0.2",
+    "@zerodevx/svelte-toast": "^0.9.5",
+    "autoprefixer": "^10.4.17",
+    "postcss": "^8.4.34",
+    "svelte": "^4.2.8",
+    "svelte-check": "^3.6.2",
+    "tailwindcss": "^3.4.1",
+    "tslib": "^2.6.2",
+    "typescript": "^5.2.2",
+    "vite": "^5.0.8"
+  },
+  "dependencies": {
+    "@fontsource/roboto": "^5.0.8",
+    "fp-ts": "^2.16.2",
+    "lucide-svelte": "^0.323.0",
+    "svelte-spa-router": "^4.0.1"
+  }
+}

ui/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

ui/public/svelte.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="26.6" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 308"><path fill="#FF3E00" d="M239.682 40.707C211.113-.182 154.69-12.301 113.895 13.69L42.247 59.356a82.198 82.198 0 0 0-37.135 55.056a86.566 86.566 0 0 0 8.536 55.576a82.425 82.425 0 0 0-12.296 30.719a87.596 87.596 0 0 0 14.964 66.244c28.574 40.893 84.997 53.007 125.787 27.016l71.648-45.664a82.182 82.182 0 0 0 37.135-55.057a86.601 86.601 0 0 0-8.53-55.577a82.409 82.409 0 0 0 12.29-30.718a87.573 87.573 0 0 0-14.963-66.244"></path><path fill="#FFF" d="M106.889 270.841c-23.102 6.007-47.497-3.036-61.103-22.648a52.685 52.685 0 0 1-9.003-39.85a49.978 49.978 0 0 1 1.713-6.693l1.35-4.115l3.671 2.697a92.447 92.447 0 0 0 28.036 14.007l2.663.808l-.245 2.659a16.067 16.067 0 0 0 2.89 10.656a17.143 17.143 0 0 0 18.397 6.828a15.786 15.786 0 0 0 4.403-1.935l71.67-45.672a14.922 14.922 0 0 0 6.734-9.977a15.923 15.923 0 0 0-2.713-12.011a17.156 17.156 0 0 0-18.404-6.832a15.78 15.78 0 0 0-4.396 1.933l-27.35 17.434a52.298 52.298 0 0 1-14.553 6.391c-23.101 6.007-47.497-3.036-61.101-22.649a52.681 52.681 0 0 1-9.004-39.849a49.428 49.428 0 0 1 22.34-33.114l71.664-45.677a52.218 52.218 0 0 1 14.563-6.398c23.101-6.007 47.497 3.036 61.101 22.648a52.685 52.685 0 0 1 9.004 39.85a50.559 50.559 0 0 1-1.713 6.692l-1.35 4.116l-3.67-2.693a92.373 92.373 0 0 0-28.037-14.013l-2.664-.809l.246-2.658a16.099 16.099 0 0 0-2.89-10.656a17.143 17.143 0 0 0-18.398-6.828a15.786 15.786 0 0 0-4.402 1.935l-71.67 45.674a14.898 14.898 0 0 0-6.73 9.975a15.9 15.9 0 0 0 2.709 12.012a17.156 17.156 0 0 0 18.404 6.832a15.841 15.841 0 0 0 4.402-1.935l27.345-17.427a52.147 52.147 0 0 1 14.552-6.397c23.101-6.006 47.497 3.037 61.102 22.65a52.681 52.681 0 0 1 9.003 39.848a49.453 49.453 0 0 1-22.34 33.12l-71.664 45.673a52.218 52.218 0 0 1-14.563 6.398"></path></svg>

ui/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

ui/src/App.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  import { SvelteToast } from '@zerodevx/svelte-toast';
+  import Router from 'svelte-spa-router';
+  import { wrap } from 'svelte-spa-router/wrap';
+  import Footer from './lib/Footer.svelte';
+  import Home from './views/Home.svelte';
+  import Navbar from './lib/Navbar.svelte';
+
+  const routes = {
+    '/': Home,
+    '/settings': wrap({
+      asyncComponent: () => import('./views/SettingsView.svelte'),
+    }),
+  };
+</script>
+
+<main
+  class="bg-neutral-50 dark:bg-neutral-900 h-screen text-neutral-950 dark:text-neutral-50"
+>
+  <Navbar />
+  <Router {routes} />
+  <Footer />
+  <SvelteToast />
+  <!-- <FloatingAction /> -->
+</main>

ui/src/app.css

@@ -0,0 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* body {
+  font-family: "Roboto";
+} */

ui/src/lib/Button.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  let clazz: string = '';
+  export let disabled: boolean = false;
+  export { clazz as class };
+</script>
+
+<button
+  class={`px-2.5 py-2 rounded-lg bg-blue-300 hover:bg-blue-400 hover:duration-150 text-sm font-semibold ${
+    disabled && 'bg-neutral-300 hover:bg-neutral-300'
+  } ${clazz}`}
+  {disabled}
+  on:click
+>
+  <slot />
+</button>

ui/src/lib/Chip.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  export let text: string;
+</script>
+
+<div
+  class="flex items-center gap-1.5 p-1 bg-blue-200 rounded-lg text-neutral-900"
+>
+  <slot />
+  {text}
+</div>

ui/src/lib/CookiesTextField.svelte

@@ -0,0 +1,137 @@
+<script lang="ts">
+  import { toast } from '@zerodevx/svelte-toast';
+  import * as A from 'fp-ts/Array';
+  import * as E from 'fp-ts/Either';
+  import * as O from 'fp-ts/Option';
+  import { pipe } from 'fp-ts/lib/function';
+  import { get } from 'svelte/store';
+  import { ffetch } from './ffetch';
+  import { cookiesTemplate, serverApiEndpoint } from './store';
+  import { debounce } from './utils';
+
+  const flag = '--cookies=cookies.txt';
+
+  let cookies = localStorage.getItem('cookies') ?? '';
+
+  const validateCookie = (cookie: string) =>
+    pipe(
+      cookie,
+      (cookie) => cookie.replace(/\s\s+/g, ' '),
+      (cookie) => cookie.replaceAll('\t', ' '),
+      (cookie) => cookie.split(' '),
+      E.of,
+      E.flatMap(
+        E.fromPredicate(
+          (f) => f.length === 7,
+          () => `missing parts`,
+        ),
+      ),
+      E.flatMap(
+        E.fromPredicate(
+          (f) => f[0].length > 0,
+          () => 'missing domain',
+        ),
+      ),
+      E.flatMap(
+        E.fromPredicate(
+          (f) => f[1] === 'TRUE' || f[1] === 'FALSE',
+          () => `invalid include subdomains`,
+        ),
+      ),
+      E.flatMap(
+        E.fromPredicate(
+          (f) => f[2].length > 0,
+          () => 'invalid path',
+        ),
+      ),
+      E.flatMap(
+        E.fromPredicate(
+          (f) => f[3] === 'TRUE' || f[3] === 'FALSE',
+          () => 'invalid secure flag',
+        ),
+      ),
+      E.flatMap(
+        E.fromPredicate(
+          (f) => isFinite(Number(f[4])),
+          () => 'invalid expiration',
+        ),
+      ),
+      E.flatMap(
+        E.fromPredicate(
+          (f) => f[5].length > 0,
+          () => 'invalid name',
+        ),
+      ),
+      E.flatMap(
+        E.fromPredicate(
+          (f) => f[6].length > 0,
+          () => 'invalid value',
+        ),
+      ),
+    );
+
+  const validateNetscapeCookies = (cookies: string) =>
+    pipe(
+      cookies,
+      (cookies) => cookies.split('\n'),
+      (cookies) => cookies.filter((f) => !f.startsWith('\n')), // empty lines
+      (cookies) => cookies.filter((f) => !f.startsWith('# ')), // comments
+      (cookies) => cookies.filter(Boolean), // empty lines
+      A.map(validateCookie),
+      A.mapWithIndex((i, either) =>
+        pipe(
+          either,
+          E.matchW(
+            (l) => toast.push(`Error in line ${i + 1}: ${l}`),
+            () => E.isRight(either),
+          ),
+        ),
+      ),
+      A.filter(Boolean),
+      A.match(
+        () => false,
+        (c) => {
+          toast.push(`Valid ${c.length} Netscape cookies`);
+          return true;
+        },
+      ),
+    );
+
+  const submitCookies = (cookies: string) =>
+    ffetch(`${get(serverApiEndpoint)}/api/v1/cookies`, {
+      method: 'POST',
+      body: JSON.stringify({
+        cookies,
+      }),
+    })();
+
+  const execute = (cookies: KeyboardEvent) =>
+    pipe(
+      cookies.target as HTMLTextAreaElement,
+      (cookies) => cookies.value,
+      O.fromPredicate(validateNetscapeCookies),
+      O.match(
+        () => cookiesTemplate.set(''),
+        async (cookies) => {
+          pipe(
+            await submitCookies(cookies),
+            E.match(
+              (l) => toast.push(l),
+              () => {
+                toast.push(`Saved Netscape cookies`);
+                cookiesTemplate.set(flag);
+                localStorage.setItem('cookies', cookies);
+              },
+            ),
+          );
+        },
+      ),
+    );
+</script>
+
+<textarea
+  cols="80"
+  rows="8"
+  value={cookies}
+  on:keyup={debounce(execute, 500)}
+/>

ui/src/lib/DownloadCard.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+  import { get } from 'svelte/store';
+  import Button from './Button.svelte';
+  import Chip from './Chip.svelte';
+  import { rpcClient, serverApiEndpoint } from './store';
+  import type { RPCResult } from './types';
+  import { formatSpeedMiB, roundMiB } from './utils';
+
+  export let download: RPCResult;
+
+  const remove = (id: string) => get(rpcClient).kill(id);
+</script>
+
+<div
+  class="flex gap-4
+  bg-neutral-100 dark:bg-neutral-800
+  p-2 md:p-4
+  rounded-lg shadow-lg
+  border dark:border-neutral-700"
+>
+  <div
+    class="h-full hidden sm:block w-96 bg-cover bg-center rounded"
+    style="background-image: url({download.info.thumbnail})"
+  />
+
+  <div class="flex flex-col justify-between gap-2 w-full">
+    <div>
+      <h2 class="font-bold text-lg">{download.info.title}</h2>
+      <p
+        class="font-mono text-sm mt-2 p-1 break-all bg-neutral-200 dark:bg-neutral-700 rounded"
+      >
+        {download.info.url}
+      </p>
+    </div>
+
+    <div class="flex flex-col justify-end gap-2 select-none flex-wrap">
+      <div class="hidden sm:flex items-center gap-2 text-sm">
+        {#if download.info.vcodec}
+          <Chip text={download.info.vcodec} />
+        {/if}
+        {#if download.info.acodec}
+          <Chip text={download.info.acodec} />
+        {/if}
+        {#if download.info.ext}
+          <Chip text={download.info.ext} />
+        {/if}
+        {#if download.info.resolution}
+          <Chip text={download.info.resolution} />
+        {/if}
+        {#if download.info.filesize_approx}
+          <Chip text={roundMiB(download.info.filesize_approx)} />
+        {/if}
+        <!-- {#if download.progress.process_status}
+          <Chip text={mapProcessStatus(download.progress.process_status)} />
+        {/if} -->
+        {#if download.progress.speed}
+          <Chip text={formatSpeedMiB(download.progress.speed)} />
+        {/if}
+      </div>
+
+      <div class="flex gap-2">
+        <Button class="w-14" on:click={() => remove(download.id)}>Stop</Button>
+        {#if download.progress.process_status === 2}
+          <Button class="w-18">Download</Button>
+          <!-- <a href={`${$serverApiEndpoint}/api/v1/d/${download.id}`}>d</a> -->
+        {/if}
+      </div>
+
+      <div
+        class="w-full mt-4 h-2 rounded-full bg-neutral-200 dark:bg-neutral-700"
+      >
+        <div
+          class={`h-2 rounded-full ${
+            download.progress.process_status === 2
+              ? 'bg-green-600'
+              : 'bg-blue-500'
+          }`}
+          style="width: {download.progress.percentage}"
+        />
+      </div>
+    </div>
+  </div>
+</div>

ui/src/lib/FloatingAction.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { Plus } from 'lucide-svelte';
+</script>
+
+<div class="absolute bottom-10 right-10">
+  <!-- <div class="relative mb-4 flex flex-col justify-center items-center gap-2">
+    <button
+      class="relative flex items-center justify-center bg-blue-500 h-8 w-8 z-10 rounded-2xl shadow-xl text-neutral-100"
+    >
+      <Plus size={18} />
+    </button>
+    <button
+      class="relative flex items-center justify-center bg-blue-500 h-8 w-8 z-10 rounded-2xl shadow-xl text-neutral-100"
+    >
+      <Plus size={18} />
+    </button>
+  </div> -->
+  <button
+    class="relative bg-blue-500 p-5 z-10 rounded-2xl shadow-xl text-neutral-100"
+  >
+    <Plus />
+  </button>
+</div>

ui/src/lib/Footer.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+  import { ChevronDown, ChevronUp } from 'lucide-svelte';
+  import { cubicOut } from 'svelte/easing';
+  import { tweened } from 'svelte/motion';
+  import NewDownload from './NewDownload.svelte';
+
+  const height = tweened(52, {
+    duration: 300,
+    easing: cubicOut,
+  });
+
+  const minHeight = 52;
+  const maxHeight = window.innerHeight / 1.5;
+
+  let open = false;
+  $: open = $height > minHeight;
+</script>
+
+<footer
+  class="
+  fixed bottom-0 z-10
+  w-full
+  p-2
+  bg-neutral-100 dark:bg-neutral-800
+  border-t dark:border-t-neutral-700
+  shadow-lg
+  rounded-t-xl"
+  style="min-height: {$height}px;"
+>
+  <button
+    class="p-1 bg-neutral-200 dark:bg-neutral-700 rounded-lg border dark:border-neutral-700"
+    on:click={() => (open ? height.set(minHeight) : height.set(maxHeight))}
+  >
+    {#if open}
+      <ChevronDown />
+    {:else}
+      <ChevronUp />
+    {/if}
+  </button>
+
+  <div />
+
+  {#if $height > 100}
+    <div class="mt-2">
+      <NewDownload />
+    </div>
+  {/if}
+</footer>

ui/src/lib/FormatsList.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+  import type { DLFormat } from './types';
+
+  let group = '';
+  export let formats: DLFormat[];
+
+  $: console.log(group);
+</script>
+
+<div class="w-full mt-4">
+  <div class="mx-auto w-full">
+    <fieldset class="grid grid-cols-7 gap-2">
+      {#each formats as format}
+        <div class="relative">
+          <input
+            id="formats"
+            class="absolute opacity-0 w-0 h-0 peer"
+            type="radio"
+            bind:group
+            name="type"
+            value="formats"
+          />
+          <label
+            for="formats"
+            class="
+            [&_p]:text-gray-900 [&_span]:text-gray-500
+            peer-checked:[&_p]:text-white peer-checked:[&_span]:text-blue-100
+            peer-focus:ring-2 peer-focus:ring-white
+            peer-focus:ring-opacity-60 peer-focus:ring-offset-2 peer-focus:ring-offset-blue-300
+            bg-white
+            relative flex
+            cursor-pointer
+            rounded-lg px-5 py-4
+            shadow-md
+            focus:outline-none
+            peer-checked:bg-blue-700/75
+            peer-checked:text-white"
+          >
+            <div class="flex w-full items-center justify-between">
+              <div class="flex items-center">
+                <div class="text-sm">
+                  <p class="font-medium" id={format.format_id}>
+                    {format.resolution}
+                  </p>
+                  <span class="inline" id={format.format_id}>
+                    <span>{format.vcodec}</span>
+                    <span aria-hidden="true">·</span>
+                    <span>{format.acodec}</span>
+                  </span>
+                </div>
+              </div>
+              <div class="shrink-0 text-white">
+                <svg viewBox="0 0 24 24" fill="none" class="h-6 w-6">
+                  <circle cx="12" cy="12" r="12" fill="#fff" opacity="0.2" />
+                  <path
+                    d="M7 13l3 3 7-7"
+                    stroke="#fff"
+                    stroke-width="1.5"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                </svg>
+              </div>
+            </div>
+          </label>
+        </div>
+      {/each}
+    </fieldset>
+  </div>
+</div>

ui/src/lib/FullscreenSpinner.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  import Spinner from './Spinner.svelte';
+</script>
+
+<div
+  class="top-0 left-0 absolute w-full h-full bg-neutral-950/20 flex items-center justify-center z-50"
+>
+  <Spinner />
+</div>

ui/src/lib/Navbar.svelte

@@ -0,0 +1,97 @@
+<script lang="ts">
+  import {
+    ArrowDownUp,
+    Github,
+    HardDrive,
+    Network,
+    Settings,
+  } from 'lucide-svelte';
+  import { downloads, rpcClient, serverApiEndpoint } from './store';
+  import { formatGiB, formatSpeedMiB } from './utils';
+  import * as O from 'fp-ts/Option';
+  import { pipe } from 'fp-ts/lib/function';
+  import { onDestroy } from 'svelte';
+  import { link } from 'svelte-spa-router';
+
+  let downloadSpeed = 0;
+
+  const unsubscribe = downloads.subscribe((downloads) =>
+    pipe(
+      downloads,
+      O.matchW(
+        () => (downloadSpeed = 0),
+        (d) =>
+          (downloadSpeed = d
+            .map((d) => d.progress.speed)
+            .reduce((a, b) => a + b)),
+      ),
+    ),
+  );
+
+  onDestroy(unsubscribe);
+</script>
+
+<nav
+  class="
+  p-4
+  flex justify-between items-center
+  bg-neutral-100 dark:bg-neutral-800
+  rounded-b-xl
+  border-b dark:border-b-neutral-700
+  shadow-lg
+  select-none"
+>
+  <a use:link={'/'} href="/" class="font-semibold text-lg">yt-dlp WebUI</a>
+
+  <div />
+
+  <div class="flex items-center gap-2 text-sm">
+    <div
+      class="hidden sm:flex items-center gap-1.5 p-1 text-neutral-900 bg-blue-200 rounded-lg"
+    >
+      <ArrowDownUp size={18} />
+      <div>
+        {formatSpeedMiB(downloadSpeed)}
+      </div>
+    </div>
+
+    <div class="flex items-center gap-2 text-sm">
+      <div
+        class="flex items-center gap-1.5 p-1 text-neutral-900 bg-blue-200 rounded-lg"
+      >
+        <HardDrive size={18} />
+        <div>
+          {#await $rpcClient.freeSpace()}
+            Loading...
+          {:then freeSpace}
+            {formatGiB(freeSpace.result)}
+          {/await}
+        </div>
+      </div>
+
+      <div
+        class="flex items-center gap-1.5 p-1 text-neutral-900 bg-blue-200 rounded-lg"
+      >
+        <Network size={18} />
+        <div>
+          {$serverApiEndpoint.split('//')[1]}
+        </div>
+      </div>
+
+      <a
+        href="https://github.com/marcopeocchi/yt-dlp-web-ui"
+        class="flex items-center gap-1.5 p-1 text-neutral-900 bg-blue-200 rounded-lg"
+      >
+        <Github size={18} />
+      </a>
+
+      <a
+        use:link={'/settings'}
+        href="/settings"
+        class="flex items-center gap-1.5 p-1 text-neutral-900 bg-blue-200 rounded-lg"
+      >
+        <Settings size={18} />
+      </a>
+    </div>
+  </div>
+</nav>

ui/src/lib/NewDownload.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+  import { get } from 'svelte/store';
+  import Button from './Button.svelte';
+  import TextField from './TextField.svelte';
+  import { downloadTemplates, rpcClient } from './store';
+  import Select from './Select.svelte';
+  import type { DLMetadata } from './types';
+  import FormatsList from './FormatsList.svelte';
+
+  let url: string = '';
+  let args: string = '';
+  let metadata: DLMetadata;
+
+  const download = () =>
+    get(rpcClient).download({
+      url,
+      args,
+    });
+
+  const getFormats = () =>
+    get(rpcClient)
+      .formats(url)
+      ?.then((f) => (metadata = f.result));
+</script>
+
+<div class="w-full px-8">
+  <div class="my-4 font-semibold text-xl">New download</div>
+  <div class="grid grid-cols-1 md:grid-cols-2 gap-2 w-full mb-2">
+    <TextField placeholder="https://..." label="URL" bind:value={url} />
+    <TextField
+      placeholder="arguments separated by space"
+      label="yt-dlp arguments"
+      bind:value={args}
+    />
+    <Select bind:value={args}>
+      <option selected disabled value=""> Select download template </option>
+      {#each $downloadTemplates as template}
+        <option id={template.id} value={template.content}>
+          {template.name}
+        </option>
+      {/each}
+    </Select>
+  </div>
+  <Button class="mt-2" on:click={download}>Download</Button>
+  <Button class="mt-2" on:click={getFormats}>Select format</Button>
+  {#if metadata}
+    <FormatsList formats={metadata.formats} />
+  {/if}
+</div>

ui/src/lib/RPCClient.ts

@@ -0,0 +1,195 @@
+import type { DLMetadata, RPCRequest, RPCResponse, RPCResult } from './types'
+
+type DownloadRequestArgs = {
+  url: string,
+  args: string,
+  pathOverride?: string,
+  renameTo?: string,
+  playlist?: boolean
+}
+
+export class RPCClient {
+  private seq: number
+  private httpEndpoint: string
+  private readonly _socket$: WebSocket
+  private readonly token?: string
+
+  constructor(httpEndpoint: string, webSocketEndpoint: string, token?: string) {
+    this.seq = 0
+    this.httpEndpoint = httpEndpoint
+    this.token = token
+    this._socket$ = new WebSocket(
+      token ? `${webSocketEndpoint}?token=${token}` : webSocketEndpoint
+    )
+  }
+
+  /**
+   * Websocket connection
+   */
+  public get socket() {
+    return this._socket$
+  }
+
+  private incrementSeq() {
+    return String(this.seq++)
+  }
+
+  private send(req: RPCRequest) {
+    this._socket$.send(JSON.stringify({
+      ...req,
+      id: this.incrementSeq(),
+    }))
+  }
+
+  private argsSanitizer(args: string) {
+    return args
+      .split(' ')
+      .map(a => a.trim().replaceAll("'", '').replaceAll('"', ''))
+      .filter(Boolean)
+  }
+
+  private async sendHTTP<T>(req: RPCRequest) {
+    const res = await fetch(this.httpEndpoint, {
+      method: 'POST',
+      headers: {
+        'X-Authentication': this.token ?? ''
+      },
+      body: JSON.stringify({
+        ...req,
+        id: this.incrementSeq(),
+      })
+    })
+    const data: RPCResponse<T> = await res.json()
+
+    return data
+  }
+
+  /**
+   * Request a new download. Handles arguments sanitization.
+   * @param req payload
+   * @returns 
+   */
+  public download(req: DownloadRequestArgs) {
+    if (!req.url) {
+      return
+    }
+
+    const rename = req.args.includes('-o')
+      ? req.args
+        .substring(req.args.indexOf('-o'))
+        .replaceAll("'", '')
+        .replaceAll('"', '')
+        .split('-o')
+        .map(s => s.trim())
+        .join('')
+        .split(' ')
+        .at(0) ?? ''
+      : ''
+
+    const sanitizedArgs = this.argsSanitizer(
+      req.args.replace('-o', '').replace(rename, '')
+    )
+
+    if (req.playlist) {
+      return this.sendHTTP({
+        method: 'Service.ExecPlaylist',
+        params: [{
+          URL: req.url,
+          Params: sanitizedArgs,
+          Path: req.pathOverride,
+          Rename: req.renameTo || rename,
+        }]
+      })
+    }
+
+    this.sendHTTP({
+      method: 'Service.Exec',
+      params: [{
+        URL: req.url.split('?list').at(0)!,
+        Params: sanitizedArgs,
+        Path: req.pathOverride,
+        Rename: req.renameTo || rename,
+      }]
+    })
+  }
+
+  /**
+   * Requests the available formats for a given url (-f arg)
+   * @param url requested url
+   * @returns 
+   */
+  public formats(url: string) {
+    if (url) {
+      return this.sendHTTP<DLMetadata>({
+        method: 'Service.Formats',
+        params: [{
+          URL: url.split('?list').at(0)!,
+        }]
+      })
+    }
+  }
+
+  /**
+   * Requests all downloads
+   */
+  public running() {
+    this.send({
+      method: 'Service.Running',
+      params: [],
+    })
+  }
+
+  /**
+   * Stops and removes a download asynchronously
+   * @param id download id
+   */
+  public kill(id: string) {
+    this.sendHTTP({
+      method: 'Service.Kill',
+      params: [id],
+    })
+  }
+
+  /**
+   * Stops and removes all downloads
+   */
+  public killAll() {
+    this.sendHTTP({
+      method: 'Service.KillAll',
+      params: [],
+    })
+  }
+
+  /**
+   * Get asynchronously the avaliable space on downloads directory
+   * @returns free space in bytes
+   */
+  public freeSpace() {
+    return this.sendHTTP<number>({
+      method: 'Service.FreeSpace',
+      params: [],
+    })
+  }
+
+  /**
+   * Get asynchronously the tree view of the download directory
+   * @returns free space in bytes
+   */
+  public directoryTree() {
+    return this.sendHTTP<string[]>({
+      method: 'Service.DirectoryTree',
+      params: [],
+    })
+  }
+
+  /**
+   * Updates synchronously yt-dlp executable
+   * @returns free space in bytes
+   */
+  public updateExecutable() {
+    return this.sendHTTP({
+      method: 'Service.UpdateExecutable',
+      params: []
+    })
+  }
+}

ui/src/lib/Select.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  export let value: any;
+
+  export let disabled: boolean = false;
+  export let placeholder: string = '';
+  export { clazz as class };
+</script>
+
+<select
+  class="
+  p-2
+  bg-neutral-50
+  border rounded-lg
+  appearance-none
+  text-sm font-semibold
+  focus:outline-blue-300
+  "
+  bind:value
+  {disabled}
+  {placeholder}
+>
+  <slot />
+</select>

ui/src/lib/Settings.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import { get } from 'svelte/store';
+  import Button from './Button.svelte';
+  import TextField from './TextField.svelte';
+  import { rpcClient, rpcHost, rpcPort } from './store';
+  import FullscreenSpinner from './FullscreenSpinner.svelte';
+
+  let loading: Promise<any>;
+
+  const update = () => (loading = get(rpcClient).updateExecutable());
+</script>
+
+<div class="w-full">
+  <div class="font-semibold text-lg mb-4">Settings</div>
+
+  <div class="grid grid-cols-1 md:grid-cols-2 gap-2">
+    <TextField
+      label="Server address"
+      bind:value={$rpcHost}
+      placeholder="localhost"
+    />
+    <TextField label="Server port" bind:value={$rpcPort} placeholder="3033" />
+  </div>
+
+  <Button class="mt-4" on:click={update}>Update yt-dlp</Button>
+
+  {#if loading}
+    {#await loading}
+      <FullscreenSpinner />
+    {/await}
+  {/if}
+
+  <!-- <CookiesTextField /> -->
+</div>

ui/src/lib/Spinner.svelte

@@ -0,0 +1,19 @@
+<div role="status">
+  <svg
+    aria-hidden="true"
+    class="w-8 h-8 text-gray-200 animate-spin dark:text-gray-600 fill-blue-400"
+    viewBox="0 0 100 101"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+      fill="currentColor"
+    />
+    <path
+      d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+      fill="currentFill"
+    />
+  </svg>
+  <span class="sr-only">Loading...</span>
+</div>

ui/src/lib/TextField.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  let clazz: string = '';
+  export let label: string;
+  export let value: any;
+
+  export let disabled: boolean = false;
+  export let placeholder: string = '';
+  export { clazz as class };
+</script>
+
+<div class="flex flex-col gap-0.5 text-sm font-semibold">
+  <label for=""> {label} </label>
+  <input
+    type="text"
+    class={`p-2 
+    bg-neutral-50 border 
+    rounded-lg 
+    focus:outline-blue-300 
+    dark:bg-neutral-700 dark:border-neutral-900
+    ${clazz}
+    `}
+    on:keyup
+    bind:value
+    {placeholder}
+    {disabled}
+  />
+</div>

ui/src/lib/ffetch.ts

@@ -0,0 +1,32 @@
+import { tryCatch } from 'fp-ts/TaskEither'
+
+/**
+ *  functional fetch(): composable as TaskEither
+*/
+export const ffetch = <T>(url: string, opt?: RequestInit) => tryCatch(
+  () => fetcher<T>(url, opt),
+  (e) => `error while fetching: ${e}`
+)
+
+const fetcher = async <T>(url: string, opt?: RequestInit) => {
+  const jwt = localStorage.getItem('token')
+
+  if (opt && !opt.headers) {
+    opt.headers = {
+      'Content-Type': 'application/json',
+    }
+  }
+
+  const res = await fetch(url, {
+    ...opt,
+    headers: {
+      ...opt?.headers,
+      'X-Authentication': jwt ?? ''
+    }
+  })
+
+  if (!res.ok) {
+    throw await res.text()
+  }
+  return res.json() as T
+}

ui/src/lib/store.ts

@@ -0,0 +1,57 @@
+import * as O from 'fp-ts/lib/Option'
+import { derived, readable, writable } from 'svelte/store'
+import { RPCClient } from './RPCClient'
+import { type CustomTemplate, type RPCResult } from './types'
+
+export const rpcHost = writable<string>(localStorage.getItem('rpcHost') ?? 'localhost')
+export const rpcPort = writable<number>(Number(localStorage.getItem('rpcPort')) || 3033)
+
+// if authentication is enabled...
+export const rpcWebToken = writable<string>(localStorage.getItem('rpcWebToken') ?? '')
+
+// will be used to access the api and archive endpoints
+export const serverApiEndpoint = derived(
+  [rpcHost, rpcPort],
+  ([$host, $port]) => window.location.port == ''
+    ? `${window.location.protocol}//${$host}`
+    : `${window.location.protocol}//${$host}:${$port}`
+)
+
+// access the websocket JSON-RPC 1.0 to gather downloads state
+export const websocketRpcEndpoint = derived(
+  [rpcHost, rpcPort],
+  ([$host, $port]) => window.location.port == ''
+    ? `${window.location.protocol.startsWith('https') ? 'wss:' : 'ws:'}//${$host}/rpc/ws`
+    : `${window.location.protocol.startsWith('https') ? 'wss:' : 'ws:'}//${$host}:${$port}/rpc/ws`
+)
+
+// same as websocket one but using HTTP-POST mainly used to send commands (download, stop, ...)
+export const httpPostRpcEndpoint = derived(
+  serverApiEndpoint,
+  $ep => window.location.port == '' ? `${$ep}/rpc/http` : `${$ep}/rpc/http`
+)
+
+/**
+ * Will handle Websocket and HTTP-POST communications based on the requested method
+*/
+export const rpcClient = derived(
+  [httpPostRpcEndpoint, websocketRpcEndpoint, rpcWebToken],
+  ([$http, $ws, $token]) => new RPCClient($http, $ws, $token)
+)
+
+/**
+ * Stores all the downloads returned by the rpc
+ */
+export const downloads = writable<O.Option<RPCResult[]>>(O.none)
+
+export const cookiesTemplate = writable<string>('')
+
+/**
+ * fetches download templates, needs manual update
+ */
+export const downloadTemplates = readable<CustomTemplate[]>([], (set) => {
+  serverApiEndpoint
+    .subscribe(ep => fetch(`${ep}/api/v1/template/all`)
+      .then(res => res.json())
+      .then(data => set(data)))
+})

ui/src/lib/types.ts

@@ -0,0 +1,90 @@
+export type RPCMethods =
+  | "Service.Exec"
+  | "Service.Kill"
+  | "Service.Clear"
+  | "Service.Running"
+  | "Service.KillAll"
+  | "Service.FreeSpace"
+  | "Service.Formats"
+  | "Service.ExecPlaylist"
+  | "Service.DirectoryTree"
+  | "Service.UpdateExecutable"
+
+export type RPCRequest = {
+  method: RPCMethods
+  params?: any[]
+  id?: string
+}
+
+export type RPCResponse<T> = Readonly<{
+  result: T
+  error: number | null
+  id?: string
+}>
+
+type DownloadInfo = {
+  url: string
+  filesize_approx?: number
+  resolution?: string
+  thumbnail: string
+  title: string
+  vcodec?: string
+  acodec?: string
+  ext?: string
+  created_at: string
+}
+
+type DownloadProgress = {
+  speed: number
+  eta: number
+  percentage: string
+  process_status: number
+}
+
+export type RPCResult = Readonly<{
+  id: string
+  progress: DownloadProgress
+  info: DownloadInfo
+}>
+
+export type RPCParams = {
+  URL: string
+  Params?: string
+}
+
+export type DLMetadata = {
+  formats: Array<DLFormat>
+  best: DLFormat
+  thumbnail: string
+  title: string
+}
+
+export type DLFormat = {
+  format_id: string
+  format_note: string
+  fps: number
+  resolution: string
+  vcodec: string
+  acodec: string
+  filesize_approx: number
+}
+
+export type DirectoryEntry = {
+  name: string
+  path: string
+  size: number
+  shaSum: string
+  modTime: string
+  isVideo: boolean
+  isDirectory: boolean
+}
+
+export type DeleteRequest = Pick<DirectoryEntry, 'path' | 'shaSum'>
+
+export type PlayRequest = Pick<DirectoryEntry, 'path'>
+
+export type CustomTemplate = {
+  id: string
+  name: string
+  content: string
+}

ui/src/lib/utils.ts

@@ -0,0 +1,93 @@
+import { pipe } from 'fp-ts/lib/function'
+import type { RPCResponse } from "./types"
+
+/**
+ * Validate an ip v4 via regex
+ * @param {string} ipAddr 
+ * @returns ip validity test
+ */
+export function validateIP(ipAddr: string): boolean {
+  let ipRegex = /^(?:25[0-5]|2[0-4]\d|1\d\d|[1-9]\d|\d)(?:\.(?:25[0-5]|2[0-4]\d|1\d\d|[1-9]\d|\d)){3}$/gm
+  return ipRegex.test(ipAddr)
+}
+
+export function validateDomain(url: string): boolean {
+  const urlRegex = /(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()!@:%_\+.~#?&\/\/=]*)/
+  const slugRegex = /^[a-z0-9]+(?:-[a-z0-9]+)*$/
+
+  const [name, slug] = url.split('/')
+
+  return urlRegex.test(url) || name === 'localhost' && slugRegex.test(slug)
+}
+
+export function isValidURL(url: string): boolean {
+  let urlRegex = /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()!@:%_\+.~#?&\/\/=]*)/
+  return urlRegex.test(url)
+}
+
+export function ellipsis(str: string, lim: number): string {
+  if (str) {
+    return str.length > lim ? `${str.substring(0, lim)}...` : str
+  }
+  return ''
+}
+
+export function toFormatArgs(codes: string[]): string {
+  if (codes.length > 1) {
+    return codes.reduce((v, a) => ` -f ${v}+${a}`)
+  }
+  if (codes.length === 1) {
+    return ` -f ${codes[0]}`
+  }
+  return ''
+}
+
+export const formatGiB = (bytes: number) =>
+  `${(bytes / 1_000_000_000).toFixed(0)}GiB`
+
+export const roundMiB = (bytes: number) =>
+  `${(bytes / 1_000_000).toFixed(2)} MiB`
+
+export const formatSpeedMiB = (val: number) =>
+  `${roundMiB(val)}/s`
+
+export const datetimeCompareFunc = (a: string, b: string) =>
+  new Date(a).getTime() - new Date(b).getTime()
+
+export function isRPCResponse(object: any): object is RPCResponse<any> {
+  return 'result' in object && 'id' in object
+}
+
+export function mapProcessStatus(status: number) {
+  switch (status) {
+    case 0:
+      return 'Pending'
+    case 1:
+      return 'Downloading'
+    case 2:
+      return 'Completed'
+    case 3:
+      return 'Error'
+    default:
+      return 'Pending'
+  }
+}
+
+export const prefersDarkMode = () =>
+  window.matchMedia('(prefers-color-scheme: dark)').matches
+
+export const base64URLEncode = (s: string) => pipe(
+  s,
+  s => String.fromCodePoint(...new TextEncoder().encode(s)),
+  btoa,
+  encodeURIComponent
+)
+
+export const debounce = (callback: Function, wait = 300) => {
+  let timeout: ReturnType<typeof setTimeout>
+
+  return (...args: any[]) => {
+    clearTimeout(timeout)
+    timeout = setTimeout(() => callback(...args), wait)
+  }
+}

ui/src/main.ts

@@ -0,0 +1,11 @@
+import './app.css'
+import '@fontsource/roboto'
+import '@fontsource/roboto/400-italic.css'
+import '@fontsource/roboto/400.css'
+import App from './App.svelte'
+
+const app = new App({
+  target: document.getElementById('app'),
+})
+
+export default app

ui/src/views/Home.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+  import * as O from 'fp-ts/Option';
+  import { pipe } from 'fp-ts/lib/function';
+  import { onDestroy } from 'svelte';
+  import DownloadCard from '../lib/DownloadCard.svelte';
+  import Spinner from '../lib/Spinner.svelte';
+  import { downloads, rpcClient } from '../lib/store';
+  import { datetimeCompareFunc, isRPCResponse } from '../lib/utils';
+
+  const unsubscribe = rpcClient.subscribe(($client) => {
+    setInterval(() => $client.running(), 750);
+
+    $client.socket.onmessage = (ev: any) => {
+      const event = JSON.parse(ev.data);
+      // guards
+      if (!isRPCResponse(event)) {
+        return;
+      }
+      if (!Array.isArray(event.result)) {
+        return;
+      }
+
+      if (event.result) {
+        return downloads.set(
+          O.of(
+            event.result
+              .filter((f) => !!f.info.url)
+              .sort((a, b) =>
+                datetimeCompareFunc(b.info.created_at, a.info.created_at),
+              ),
+          ),
+        );
+      }
+
+      downloads.set(O.none);
+    };
+  });
+
+  onDestroy(unsubscribe);
+</script>
+
+{#if O.isNone($downloads)}
+  <div class="h-[90vh] w-full flex justify-center items-center">
+    <Spinner />
+  </div>
+{:else}
+  <div class="grid grid-cols-1 xl:grid-cols-2 gap-2 p-8">
+    {#each pipe( $downloads, O.getOrElseW(() => []), ) as download}
+      <DownloadCard {download} />
+    {/each}
+  </div>
+{/if}

ui/src/views/SettingsView.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  import Settings from '../lib/Settings.svelte';
+</script>
+
+<main
+  class="bg-neutral-100 dark:bg-neutral-800
+  rounded-xl
+  border dark:border-neutral-700
+  shadow-lg
+  m-8 p-4"
+>
+  <Settings />
+</main>

ui/src/vite-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="svelte" />
+/// <reference types="vite/client" />

ui/svelte.config.js

@@ -0,0 +1,7 @@
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
+
+export default {
+  // Consult https://svelte.dev/docs#compile-time-svelte-preprocess
+  // for more information about preprocessors
+  preprocess: vitePreprocess(),
+}

ui/tailwind.config.js

@@ -0,0 +1,12 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{svelte,js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+

ui/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "extends": "@tsconfig/svelte/tsconfig.json",
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "resolveJsonModule": true,
+    /**
+     * Typecheck JS in `.svelte` and `.js` files by default.
+     * Disable checkJs if you'd like to use dynamic types in JS.
+     * Note that setting allowJs false does not prevent the use
+     * of JS in `.svelte` files.
+     */
+    "allowJs": true,
+    "checkJs": true,
+    "isolatedModules": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.js", "src/**/*.svelte"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

ui/tsconfig.node.json

@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler"
+  },
+  "include": ["vite.config.ts"]
+}

ui/vite.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import { svelte } from '@sveltejs/vite-plugin-svelte'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [svelte()],
+})