code refactoring, dependencies update

Improved filebrowser (#52 )
* file archive refactor, list dir perf optimization * code refactoring
2023-05-26 11:29:59 +02:00 · 2023-05-26 11:10:10 +02:00 · 2023-05-25 11:42:01 +02:00 · 2023-05-25 11:13:46 +02:00 · 2023-05-24 13:31:48 +02:00 · 2023-05-24 13:31:05 +02:00
33 changed files with 1107 additions and 485 deletions
--- a/.github/workflows/docker-image.yml
+++ b/.github/workflows/docker-image.yml
@@ -5,6 +5,8 @@ on:
    branches: [ master ]
  pull_request:
    branches: [ master ]
+  schedule:
+    - cron: '0 1 * * *'

 jobs:
  build:
--- a/.github/workflows/docker-publish.yml
+++ b/.github/workflows/docker-publish.yml
@@ -13,6 +13,8 @@ on:
    branches: [ master ]
  pull_request:
    branches: [ master ]
+  schedule:
+    - cron : '0 1 * * 0'

 env:
  # Use docker.io for Docker Hub if empty
--- a/.gitignore
+++ b/.gitignore
@@ -15,3 +15,4 @@ downloads
 .DS_Store
 build/
 yt-dlp-webui
+session.dat
--- a/10
+++ b/10
@@ -1,7 +1,4 @@
-# Multi stage build Dockerfile
-
-# There's no point in using the edge (development branch of alpine)
-FROM alpine:3.17 AS build
+FROM golang:1.20-alpine AS build
 # folder structure
 WORKDIR /usr/src/yt-dlp-webui
 # install core dependencies
@@ -15,7 +12,7 @@ RUN npm install
 RUN npm run build
 # build backend + incubator
 WORKDIR /usr/src/yt-dlp-webui
-RUN go build -o yt-dlp-webui
+RUN CGO_ENABLED=0 GOOS=linux go build -o yt-dlp-webui

 # but here yes :)
 FROM alpine:edge
@@ -28,8 +25,7 @@ WORKDIR /app
 RUN apk update && \
    apk add psmisc ffmpeg yt-dlp

-COPY --from=build /usr/src/yt-dlp-webui /app
-RUN chmod +x /app/yt-dlp-webui
+COPY --from=build /usr/src/yt-dlp-webui/yt-dlp-webui /app

 EXPOSE 3033
 CMD [ "./yt-dlp-webui" , "--out", "/downloads" ]
--- a/10
+++ b/10
@@ -1,14 +1,14 @@
 default:
-	go build -o yt-dlp-webui main.go
+	CGO_ENABLED=0 go build -o yt-dlp-webui main.go

 all:
 	cd frontend && pnpm build && cd ..
-	go build -o yt-dlp-webui main.go
+	CGO_ENABLED=0 go build -o yt-dlp-webui main.go

 multiarch:
-	GOOS=linux GOARCH=arm go build -o yt-dlp-webui_linux-arm *.go
-	GOOS=linux GOARCH=arm64 go build -o yt-dlp-webui_linux-arm64 *.go
-	GOOS=linux GOARCH=amd64 go build -o yt-dlp-webui_linux-amd64 *.go
+	CGO_ENABLED=0 GOOS=linux GOARCH=arm go build -o yt-dlp-webui_linux-arm main.go
+	CGO_ENABLED=0 GOOS=linux GOARCH=arm64 go build -o yt-dlp-webui_linux-arm64 main.go
+	CGO_ENABLED=0 GOOS=linux GOARCH=amd64 go build -o yt-dlp-webui_linux-amd64 main.go
 	mkdir -p build
 	mv yt-dlp-webui* build

--- a/frontend/package.json
+++ b/frontend/package.json
@@ -1,6 +1,6 @@
 {
  "name": "yt-dlp-webui",
-  "version": "2.0.6",
+  "version": "2.0.7",
  "description": "Frontend compontent of yt-dlp-webui",
  "scripts": {
    "dev": "vite",
@@ -9,28 +9,28 @@
  "author": "marcopeocchi",
  "license": "MPL-2.0",
  "dependencies": {
-    "@emotion/react": "^11.10.5",
-    "@emotion/styled": "^11.10.5",
-    "@mui/icons-material": "^5.11.0",
-    "@mui/material": "^5.11.5",
-    "@reduxjs/toolkit": "^1.9.1",
+    "@emotion/react": "^11.11.0",
+    "@emotion/styled": "^11.11.0",
+    "@mui/icons-material": "^5.11.16",
+    "@mui/material": "^5.13.2",
+    "@reduxjs/toolkit": "^1.9.5",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-redux": "^8.0.5",
-    "react-router-dom": "^6.7.0",
-    "rxjs": "^7.8.0",
+    "react-router-dom": "^6.11.2",
+    "rxjs": "^7.8.1",
    "uuid": "^9.0.0"
  },
  "devDependencies": {
    "@modyfi/vite-plugin-yaml": "^1.0.4",
-    "@types/node": "^18.11.18",
-    "@types/react": "^18.0.21",
+    "@types/node": "^20.2.4",
+    "@types/react": "^18.2.7",
    "@types/react-dom": "^18.0.10",
    "@types/react-router-dom": "^5.3.3",
-    "@types/uuid": "^9.0.0",
-    "@vitejs/plugin-react": "^3.0.1",
+    "@types/uuid": "^9.0.1",
+    "@vitejs/plugin-react": "^4.0.0",
    "buffer": "^6.0.3",
-    "typescript": "^4.9.4",
-    "vite": "^4.0.4"
+    "typescript": "^5.0.4",
+    "vite": "^4.3.8"
  }
 }
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,45 +1,45 @@
-import { ThemeProvider } from "@emotion/react";
-import {
-  ChevronLeft,
-  Dashboard,
-  // Download,
-  Menu, Settings as SettingsIcon,
-  FormatListBulleted,
-  SettingsEthernet,
-  Storage
-} from "@mui/icons-material";
-import {
-  Box,
-  CircularProgress,
-  createTheme, CssBaseline,
-  Divider,
-  IconButton, List,
-  ListItemIcon, ListItemText, Toolbar,
-  Typography
-} from "@mui/material";
-import { grey } from "@mui/material/colors";
-import ListItemButton from '@mui/material/ListItemButton';
-import { lazy, Suspense, useMemo, useState } from "react";
-import { Provider, useDispatch, useSelector } from "react-redux";
-import {
-  BrowserRouter as Router, Link, Route,
-  Routes
-} from 'react-router-dom';
-import { AppBar } from "./components/AppBar";
-import { Drawer } from "./components/Drawer";
-import { toggleListView } from "./features/settings/settingsSlice";
-import Home from "./Home";
-import { RootState, store } from './stores/store';
-import { formatGiB, getWebSocketEndpoint } from "./utils";
+import { ThemeProvider } from '@emotion/react'
+
+import ChevronLeft from '@mui/icons-material/ChevronLeft'
+import Dashboard from '@mui/icons-material/Dashboard'
+import Menu from '@mui/icons-material/Menu'
+import SettingsIcon from '@mui/icons-material/Settings'
+import SettingsEthernet from '@mui/icons-material/SettingsEthernet'
+import Storage from '@mui/icons-material/Storage'
+
+import { Box, createTheme } from '@mui/material'
+
+import CircularProgress from '@mui/material/CircularProgress'
+import CssBaseline from '@mui/material/CssBaseline'
+import Divider from '@mui/material/Divider'
+import IconButton from '@mui/material/IconButton'
+import List from '@mui/material/List'
+import ListItemButton from '@mui/material/ListItemButton'
+import ListItemIcon from '@mui/material/ListItemIcon'
+import ListItemText from '@mui/material/ListItemText'
+import Toolbar from '@mui/material/Toolbar'
+import Typography from '@mui/material/Typography'
+import DownloadIcon from '@mui/icons-material/Download';
+
+import { grey } from '@mui/material/colors'
+
+import { Suspense, lazy, useMemo, useState } from 'react'
+import { Provider, useDispatch, useSelector } from 'react-redux'
+
+import { BrowserRouter, Link, Route, Routes } from 'react-router-dom'
+import { RootState, store } from './stores/store'
+
+import AppBar from './components/AppBar'
+import Drawer from './components/Drawer'
+
+import Archive from './Archive'
+import { formatGiB } from './utils'

 function AppContent() {
  const [open, setOpen] = useState(false)

  const settings = useSelector((state: RootState) => state.settings)
  const status = useSelector((state: RootState) => state.status)
-  const dispatch = useDispatch()
-
-  const socket = useMemo(() => new WebSocket(getWebSocketEndpoint()), [])

  const mode = settings.theme
  const theme = useMemo(() =>
@@ -57,11 +57,12 @@ function AppContent() {
    setOpen(!open)
  }

+  const Home = lazy(() => import('./Home'))
  const Settings = lazy(() => import('./Settings'))

  return (
    <ThemeProvider theme={theme}>
-      <Router>
+      <BrowserRouter>
        <Box sx={{ display: 'flex' }}>
          <CssBaseline />
          <AppBar position="absolute" open={open}>
@@ -137,12 +138,19 @@ function AppContent() {
                  <ListItemText primary="Home" />
                </ListItemButton>
              </Link>
-              <ListItemButton onClick={() => dispatch(toggleListView())}>
-                <ListItemIcon>
-                  <FormatListBulleted />
-                </ListItemIcon>
-                <ListItemText primary="List view" />
-              </ListItemButton>
+              <Link to={'/archive'} style={
+                {
+                  textDecoration: 'none',
+                  color: mode === 'dark' ? '#ffffff' : '#000000DE'
+                }
+              }>
+                <ListItemButton disabled={status.downloading}>
+                  <ListItemIcon>
+                    <DownloadIcon />
+                  </ListItemIcon>
+                  <ListItemText primary="Archive" />
+                </ListItemButton>
+              </Link>
              <Link to={'/settings'} style={
                {
                  textDecoration: 'none',
@@ -168,18 +176,27 @@ function AppContent() {
          >
            <Toolbar />
            <Routes>
-              <Route path="/" element={<Home socket={socket} />} />
+              <Route path="/" element={
+                <Suspense fallback={<CircularProgress />}>
+                  <Home />
+                </Suspense>
+              } />
              <Route path="/settings" element={
                <Suspense fallback={<CircularProgress />}>
-                  <Settings socket={socket} />
+                  <Settings />
+                </Suspense>
+              } />
+              <Route path="/archive" element={
+                <Suspense fallback={<CircularProgress />}>
+                  <Archive />
                </Suspense>
              } />
            </Routes>
          </Box>
        </Box>
-      </Router>
+      </BrowserRouter>
    </ThemeProvider>
-  );
+  )
 }

 export function App() {
@@ -187,5 +204,5 @@ export function App() {
    <Provider store={store}>
      <AppContent />
    </Provider>
-  );
+  )
 }
--- a/frontend/src/Archive.tsx
+++ b/frontend/src/Archive.tsx
@@ -0,0 +1,221 @@
+import {
+  Backdrop,
+  Button,
+  Checkbox,
+  CircularProgress,
+  Container,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+  List,
+  ListItem,
+  ListItemButton,
+  ListItemIcon,
+  ListItemText,
+  Paper,
+  SpeedDial,
+  SpeedDialAction,
+  SpeedDialIcon,
+  Typography
+} from '@mui/material'
+
+import DeleteForeverIcon from '@mui/icons-material/DeleteForever'
+import VideoFileIcon from '@mui/icons-material/VideoFile'
+import FolderIcon from '@mui/icons-material/Folder'
+import { Buffer } from 'buffer'
+import { useEffect, useMemo, useState, useTransition } from 'react'
+import { useSelector } from 'react-redux'
+import { BehaviorSubject, Subject, combineLatestWith, map, share } from 'rxjs'
+import { useObservable } from './hooks/observable'
+import { RootState } from './stores/store'
+import { DeleteRequest, DirectoryEntry } from './types'
+
+export default function Downloaded() {
+  const settings = useSelector((state: RootState) => state.settings)
+
+  const [openDialog, setOpenDialog] = useState(false)
+
+  const serverAddr =
+    `${window.location.protocol}//${settings.serverAddr}:${settings.serverPort}`
+
+  const files$ = useMemo(() => new Subject<DirectoryEntry[]>(), [])
+  const selected$ = useMemo(() => new BehaviorSubject<string[]>([]), [])
+
+  const [isPending, startTransition] = useTransition()
+
+  const fetcher = () => fetch(`${serverAddr}/downloaded`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({ subdir: '' })
+  })
+    .then(res => res.json())
+    .then(data => files$.next(data))
+
+  const fetcherSubfolder = (sub: string) => {
+    const folders = sub.split('/')
+
+    let subdir = folders.length > 2
+      ? folders.slice(-(folders.length - 1)).join('/')
+      : folders.pop()
+
+    fetch(`${serverAddr}/downloaded`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({ subdir: subdir })
+    })
+      .then(res => res.json())
+      .then(data => {
+        files$.next([{
+          isDirectory: true,
+          name: '..',
+          path: '',
+        }, ...data])
+      })
+  }
+
+  const selectable$ = useMemo(() => files$.pipe(
+    combineLatestWith(selected$),
+    map(([data, selected]) => data.map(x => ({
+      ...x,
+      selected: selected.includes(x.name)
+    }))),
+    share()
+  ), [])
+
+  const selectable = useObservable(selectable$, [])
+
+  const addSelected = (name: string) => {
+    selected$.value.includes(name)
+      ? selected$.next(selected$.value.filter(val => val !== name))
+      : selected$.next([...selected$.value, name])
+  }
+
+  const deleteSelected = () => {
+    Promise.all(selectable
+      .filter(entry => entry.selected)
+      .map(entry => fetch(`${serverAddr}/delete`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          path: entry.path,
+          shaSum: entry.shaSum,
+        } as DeleteRequest)
+      }))
+    ).then(fetcher)
+  }
+
+  useEffect(() => {
+    fetcher()
+  }, [settings.serverAddr, settings.serverPort])
+
+
+  const onFileClick = (path: string) => startTransition(() => {
+    window.open(`${serverAddr}/play?path=${Buffer.from(path).toString('hex')}`)
+  })
+
+  const onFolderClick = (path: string) => startTransition(() => {
+    fetcherSubfolder(path)
+  })
+
+  return (
+    <Container maxWidth="lg" sx={{ mt: 4, mb: 4 }}>
+      <Backdrop
+        sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}
+        open={!(files$.observed) || isPending}
+      >
+        <CircularProgress color="primary" />
+      </Backdrop>
+      <Paper sx={{
+        p: 2,
+        display: 'flex',
+        flexDirection: 'column',
+      }}>
+        <Typography pb={0} variant="h5" color="primary">
+          {'Archive'}
+        </Typography>
+        <List sx={{ width: '100%', bgcolor: 'background.paper' }}>
+          {selectable.length === 0 && 'No files found'}
+          {selectable.map((file, idx) => (
+            <ListItem
+              key={idx}
+              secondaryAction={
+                !file.isDirectory && <Checkbox
+                  edge="end"
+                  checked={file.selected}
+                  onChange={() => addSelected(file.name)}
+                />
+              }
+              disablePadding
+            >
+              <ListItemButton onClick={
+                () => file.isDirectory
+                  ? onFolderClick(file.path)
+                  : onFileClick(file.path)
+              }>
+                <ListItemIcon>
+                  {file.isDirectory
+                    ? <FolderIcon />
+                    : <VideoFileIcon />
+                  }
+                </ListItemIcon>
+                <ListItemText primary={file.name} />
+              </ListItemButton>
+            </ListItem>
+          ))}
+        </List>
+      </Paper>
+      <SpeedDial
+        ariaLabel="SpeedDial basic example"
+        sx={{ position: 'absolute', bottom: 32, right: 32 }}
+        icon={<SpeedDialIcon />}
+      >
+        <SpeedDialAction
+          icon={<DeleteForeverIcon />}
+          tooltipTitle={`Delete selected`}
+          tooltipOpen
+          onClick={() => {
+            if (selected$.value.length > 0) {
+              setOpenDialog(true)
+            }
+          }}
+        />
+      </SpeedDial>
+      <Dialog
+        open={openDialog}
+        onClose={() => setOpenDialog(false)}
+      >
+        <DialogTitle>
+          Are you sure?
+        </DialogTitle>
+        <DialogContent>
+          <DialogContentText id="alert-dialog-description">
+            You're deleting:
+          </DialogContentText>
+          <ul>
+            {selected$.value.map((entry, idx) => (
+              <li key={idx}>{entry}</li>
+            ))}
+          </ul>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={() => setOpenDialog(false)}>Cancel</Button>
+          <Button onClick={() => {
+            deleteSelected()
+            setOpenDialog(false)
+          }} autoFocus
+          >
+            Ok
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </Container>
+  )
+}
--- a/frontend/src/Home.tsx
+++ b/frontend/src/Home.tsx
@@ -1,8 +1,9 @@
-import { FileUpload } from "@mui/icons-material";
+import { FileUpload } from '@mui/icons-material'
+import FormatListBulleted from '@mui/icons-material/FormatListBulleted'
 import {
+  Alert,
  Backdrop,
  Button,
-  ButtonGroup,
  CircularProgress,
  Container,
  FormControl,
@@ -14,66 +15,86 @@ import {
  Paper,
  Select,
  Snackbar,
+  SpeedDial,
+  SpeedDialAction,
+  SpeedDialIcon,
  styled,
-  TextField,
-  Typography
-} from "@mui/material";
-import { Buffer } from 'buffer';
-import { useEffect, useMemo, useState } from "react";
-import { useDispatch, useSelector } from "react-redux";
-import { DownloadsCardView } from "./components/DownloadsCardView";
-import { DownloadsListView } from "./components/DownloadsListView";
-import { CliArguments } from "./features/core/argsParser";
-import I18nBuilder from "./features/core/intl";
-import { RPCClient } from "./features/core/rpcClient";
-import { connected, setFreeSpace } from "./features/status/statusSlice";
-import { RootState } from "./stores/store";
-import { IDLMetadata, RPCResult } from "./types";
-import { isValidURL, toFormatArgs } from "./utils";
+  TextField
+} from '@mui/material'
+import { Buffer } from 'buffer'
+import { useEffect, useMemo, useRef, useState } from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import { DownloadsCardView } from './components/DownloadsCardView'
+import { DownloadsListView } from './components/DownloadsListView'
+import FormatsGrid from './components/FormatsGrid'
+import { CliArguments } from './features/core/argsParser'
+import I18nBuilder from './features/core/intl'
+import { RPCClient, socket$ } from './features/core/rpcClient'
+import { toggleListView } from './features/settings/settingsSlice'
+import { connected, setFreeSpace } from './features/status/statusSlice'
+import { RootState } from './stores/store'
+import type { DLMetadata, RPCResponse, RPCResult } from './types'
+import { isValidURL, toFormatArgs } from './utils'

-type Props = {
-  socket: WebSocket
-}
-
-export default function Home({ socket }: Props) {
+export default function Home() {
  // redux state
  const settings = useSelector((state: RootState) => state.settings)
  const status = useSelector((state: RootState) => state.status)
  const dispatch = useDispatch()

  // ephemeral state
-  const [activeDownloads, setActiveDownloads] = useState<Array<RPCResult>>();
-  const [downloadFormats, setDownloadFormats] = useState<IDLMetadata>();
-  const [pickedVideoFormat, setPickedVideoFormat] = useState('');
-  const [pickedAudioFormat, setPickedAudioFormat] = useState('');
-  const [pickedBestFormat, setPickedBestFormat] = useState('');
+  const [activeDownloads, setActiveDownloads] = useState<Array<RPCResult>>()
+  const [downloadFormats, setDownloadFormats] = useState<DLMetadata>()
+  const [pickedVideoFormat, setPickedVideoFormat] = useState('')
+  const [pickedAudioFormat, setPickedAudioFormat] = useState('')
+  const [pickedBestFormat, setPickedBestFormat] = useState('')

-  const [customArgs, setCustomArgs] = useState('');
-  const [downloadPath, setDownloadPath] = useState(0);
-  const [availableDownloadPaths, setAvailableDownloadPaths] = useState<string[]>([]);
+  const [customArgs, setCustomArgs] = useState('')
+  const [downloadPath, setDownloadPath] = useState(0)
+  const [availableDownloadPaths, setAvailableDownloadPaths] = useState<string[]>([])

-  const [fileNameOverride, setFilenameOverride] = useState('');
+  const [fileNameOverride, setFilenameOverride] = useState('')

-  const [url, setUrl] = useState('');
-  const [workingUrl, setWorkingUrl] = useState('');
+  const [url, setUrl] = useState('')
+  const [workingUrl, setWorkingUrl] = useState('')

-  const [showBackdrop, setShowBackdrop] = useState(true);
-  const [showToast, setShowToast] = useState(true);
+  const [showBackdrop, setShowBackdrop] = useState(true)
+  const [showToast, setShowToast] = useState(true)
+
+  const [socketHasError, setSocketHasError] = useState(false)

  // memos
  const i18n = useMemo(() => new I18nBuilder(settings.language), [settings.language])
-  const client = useMemo(() => new RPCClient(socket), [settings.serverAddr, settings.serverPort])
+  const client = useMemo(() => new RPCClient(), [settings.serverAddr, settings.serverPort])
  const cliArgs = useMemo(() => new CliArguments().fromString(settings.cliArgs), [settings.cliArgs])

+  // refs
+  const urlInputRef = useRef<HTMLInputElement>(null)
+  const customFilenameInputRef = useRef<HTMLInputElement>(null)
+
  /* -------------------- Effects -------------------- */
+
  /* WebSocket connect event handler*/
  useEffect(() => {
-    socket.onopen = () => {
-      dispatch(connected())
-      setCustomArgs(localStorage.getItem('last-input-args') ?? '')
-      setFilenameOverride(localStorage.getItem('last-filename-override') ?? '')
+    if (!status.connected) {
+      const sub = socket$.subscribe({
+        next: () => {
+          dispatch(connected())
+          setCustomArgs(localStorage.getItem('last-input-args') ?? '')
+          setFilenameOverride(localStorage.getItem('last-filename-override') ?? '')
+        },
+        error: () => {
+          setSocketHasError(true)
+          setShowBackdrop(false)
+        },
+        complete: () => {
+          setSocketHasError(true)
+          setShowBackdrop(false)
+        },
+      })
+      return () => sub.unsubscribe()
    }
-  }, [])
+  }, [socket$, status.connected])

  useEffect(() => {
    if (status.connected) {
@@ -84,26 +105,27 @@ export default function Home({ socket }: Props) {
  }, [status.connected])

  useEffect(() => {
-    client.freeSpace()
-      .then(bytes => dispatch(setFreeSpace(bytes.result)))
+    client.freeSpace().then(bytes => dispatch(setFreeSpace(bytes.result)))
  }, [])

  useEffect(() => {
-    socket.onmessage = (event) => {
-      const res = client.decode(event.data)
-      switch (typeof res.result) {
-        case 'object':
-          setActiveDownloads(
-            (res.result ?? [])
-              .filter((r: RPCResult) => !!r.info.url)
-              .sort((a: RPCResult, b: RPCResult) => a.info.title.localeCompare(b.info.title))
-          )
-          break
-        default:
-          break
-      }
+    if (status.connected) {
+      const sub = socket$.subscribe((event: RPCResponse<RPCResult[]>) => {
+        switch (typeof event.result) {
+          case 'object':
+            setActiveDownloads(
+              (event.result ?? [])
+                .filter((r) => !!r.info.url)
+                .sort((a, b) => a.info.title.localeCompare(b.info.title))
+            )
+            break
+          default:
+            break
+        }
+      })
+      return () => sub.unsubscribe()
    }
-  }, [])
+  }, [socket$, status.connected])

  useEffect(() => {
    if (activeDownloads && activeDownloads.length >= 0) {
@@ -118,7 +140,7 @@ export default function Home({ socket }: Props) {
      })
  }, [])

-  /* -------------------- component functions -------------------- */
+  /* -------------------- callbacks-------------------- */

  /**
   * Retrive url from input, cli-arguments from checkboxes and emits via WebSocket
@@ -222,12 +244,9 @@ export default function Home({ socket }: Props) {
  }

  const resetInput = () => {
-    const input = document.getElementById('urlInput') as HTMLInputElement;
-    input.value = '';
-
-    const filename = document.getElementById('customFilenameInput') as HTMLInputElement;
-    if (filename) {
-      filename.value = '';
+    urlInputRef.current!.value = '';
+    if (customFilenameInputRef.current) {
+      customFilenameInputRef.current!.value = '';
    }
  }

@@ -257,7 +276,7 @@ export default function Home({ socket }: Props) {
            <Grid container>
              <TextField
                fullWidth
-                id="urlInput"
+                ref={urlInputRef}
                label={i18n.t('urlInput')}
                variant="outlined"
                onChange={handleUrlChange}
@@ -278,54 +297,50 @@ export default function Home({ socket }: Props) {
            </Grid>
            <Grid container spacing={1} sx={{ mt: 1 }}>
              {
-                settings.enableCustomArgs ?
-                  <Grid item xs={12}>
-                    <TextField
-                      id="customArgsInput"
-                      fullWidth
-                      label={i18n.t('customArgsInput')}
-                      variant="outlined"
-                      onChange={handleCustomArgsChange}
-                      value={customArgs}
-                      disabled={!status.connected || (settings.formatSelection && downloadFormats != null)}
-                    />
-                  </Grid> :
-                  null
+                settings.enableCustomArgs &&
+                <Grid item xs={12}>
+                  <TextField
+                    fullWidth
+                    label={i18n.t('customArgsInput')}
+                    variant="outlined"
+                    onChange={handleCustomArgsChange}
+                    value={customArgs}
+                    disabled={!status.connected || (settings.formatSelection && downloadFormats != null)}
+                  />
+                </Grid>
              }
              {
-                settings.fileRenaming ?
-                  <Grid item xs={8}>
-                    <TextField
-                      id="customFilenameInput"
-                      fullWidth
-                      label={i18n.t('customFilename')}
-                      variant="outlined"
-                      value={fileNameOverride}
-                      onChange={handleFilenameOverrideChange}
-                      disabled={!status.connected || (settings.formatSelection && downloadFormats != null)}
-                    />
-                  </Grid> :
-                  null
+                settings.fileRenaming &&
+                <Grid item xs={8}>
+                  <TextField
+                    ref={customFilenameInputRef}
+                    fullWidth
+                    label={i18n.t('customFilename')}
+                    variant="outlined"
+                    value={fileNameOverride}
+                    onChange={handleFilenameOverrideChange}
+                    disabled={!status.connected || (settings.formatSelection && downloadFormats != null)}
+                  />
+                </Grid>
              }
              {
-                settings.pathOverriding ?
-                  <Grid item xs={4}>
-                    <FormControl fullWidth>
-                      <InputLabel>{i18n.t('customPath')}</InputLabel>
-                      <Select
-                        label={i18n.t('customPath')}
-                        defaultValue={0}
-                        variant={'outlined'}
-                        value={downloadPath}
-                        onChange={(e) => setDownloadPath(Number(e.target.value))}
-                      >
-                        {availableDownloadPaths.map((val: string, idx: number) => (
-                          <MenuItem key={idx} value={idx}>{val}</MenuItem>
-                        ))}
-                      </Select>
-                    </FormControl>
-                  </Grid> :
-                  null
+                settings.pathOverriding &&
+                <Grid item xs={4}>
+                  <FormControl fullWidth>
+                    <InputLabel>{i18n.t('customPath')}</InputLabel>
+                    <Select
+                      label={i18n.t('customPath')}
+                      defaultValue={0}
+                      variant={'outlined'}
+                      value={downloadPath}
+                      onChange={(e) => setDownloadPath(Number(e.target.value))}
+                    >
+                      {availableDownloadPaths.map((val: string, idx: number) => (
+                        <MenuItem key={idx} value={idx}>{val}</MenuItem>
+                      ))}
+                    </Select>
+                  </FormControl>
+                </Grid>
              }
            </Grid>
            <Grid container spacing={1} pt={2}>
@@ -351,120 +366,31 @@ export default function Home({ socket }: Props) {
        </Grid>
      </Grid >
      {/* Format Selection grid */}
-      {
-        downloadFormats ? <Grid container spacing={2} mt={2}>
-          <Grid item xs={12}>
-            <Paper
-              sx={{
-                p: 2,
-                display: 'flex',
-                flexDirection: 'column',
-              }}
-            >
-              <Grid container>
-                <Grid item xs={12}>
-                  <Typography variant="h6" component="div" pb={1}>
-                    {downloadFormats.title}
-                  </Typography>
-                  {/* <Skeleton variant="rectangular" height={180} /> */}
-                </Grid>
-                <Grid item xs={12} pb={1}>
-                  <img src={downloadFormats.thumbnail} height={260} width="100%" style={{ objectFit: 'cover' }} />
-                </Grid>
-                {/* video only */}
-                <Grid item xs={12}>
-                  <Typography variant="body1" component="div">
-                    Best quality
-                  </Typography>
-                </Grid>
-                <Grid item pr={2} py={1}>
-                  <Button
-                    variant="contained"
-                    disabled={pickedBestFormat !== ''}
-                    onClick={() => {
-                      setPickedBestFormat(downloadFormats.best.format_id)
-                      setPickedVideoFormat('')
-                      setPickedAudioFormat('')
-                    }}>
-                    {downloadFormats.best.format_note || downloadFormats.best.format_id} - {downloadFormats.best.vcodec}+{downloadFormats.best.acodec}
-                    &nbsp;({downloadFormats.best.resolution}{(downloadFormats.best.filesize_approx>0)?", ~"+Math.round(downloadFormats.best.filesize_approx/1024/1024)+" MiB":""})
-                  </Button>
-                </Grid>
-                {/* video only */}
-                {downloadFormats.formats.filter(format => format.acodec === 'none' && format.vcodec !== 'none').length ?
-                  <Grid item xs={12}>
-                    <Typography variant="body1" component="div">
-                      Video data {downloadFormats.formats[1].acodec}
-                    </Typography>
-                  </Grid>
-                  : null
-                }
-                {downloadFormats.formats
-                  .filter(format => format.acodec === 'none' && format.vcodec !== 'none')
-                  .map((format, idx) => (
-                    <Grid item pr={2} py={1} key={idx}>
-                      <Button
-                        variant="contained"
-                        onClick={() => {
-                          setPickedVideoFormat(format.format_id)
-                          setPickedBestFormat('')
-                        }}
-                        disabled={pickedVideoFormat === format.format_id}
-                      >
-                        {format.format_note} - {format.vcodec === 'none' ? format.acodec : format.vcodec}
-                        &nbsp;({format.resolution}{(format.filesize_approx>0)?", ~"+Math.round(format.filesize_approx/1024/1024)+" MiB":""})
-                      </Button>
-                    </Grid>
-                  ))
-                }
-                {downloadFormats.formats.filter(format => format.acodec === 'none' && format.vcodec !== 'none').length ?
-                  <Grid item xs={12}>
-                    <Typography variant="body1" component="div">
-                      Audio data
-                    </Typography>
-                  </Grid>
-                  : null
-                }
-                {downloadFormats.formats
-                  .filter(format => format.acodec !== 'none' && format.vcodec === 'none')
-                  .map((format, idx) => (
-                    <Grid item pr={2} py={1} key={idx}>
-                      <Button
-                        variant="contained"
-                        onClick={() => {
-                          setPickedAudioFormat(format.format_id)
-                          setPickedBestFormat('')
-                        }}
-                        disabled={pickedAudioFormat === format.format_id}
-                      >
-                        {format.format_note} - {format.vcodec === 'none' ? format.acodec : format.vcodec}
-                        {(format.filesize_approx>0)?" (~"+Math.round(format.filesize_approx/1024/1024)+" MiB)":""}
-                      </Button>
-                    </Grid>
-                  ))
-                }
-                <Grid item xs={12} pt={2}>
-                  <ButtonGroup disableElevation variant="contained">
-                    <Button
-                      onClick={() => sendUrl()}
-                      disabled={!pickedBestFormat && !(pickedAudioFormat || pickedVideoFormat)}
-                    > Download
-                    </Button>
-                    <Button
-                      onClick={() => {
-                        setPickedAudioFormat('');
-                        setPickedVideoFormat('');
-                        setPickedBestFormat('');
-                      }}
-                    > Clear
-                    </Button>
-                  </ButtonGroup>
-                </Grid>
-              </Grid>
-            </Paper>
-          </Grid>
-        </Grid> : null
-      }
+      {downloadFormats && <FormatsGrid
+        downloadFormats={downloadFormats}
+        onBestQualitySelected={(id) => {
+          setPickedBestFormat(id)
+          setPickedVideoFormat('')
+          setPickedAudioFormat('')
+        }}
+        onVideoSelected={(id) => {
+          setPickedVideoFormat(id)
+          setPickedBestFormat('')
+        }}
+        onAudioSelected={(id) => {
+          setPickedAudioFormat(id)
+          setPickedBestFormat('')
+        }}
+        onClear={() => {
+          setPickedAudioFormat('');
+          setPickedVideoFormat('');
+          setPickedBestFormat('');
+        }}
+        onSubmit={sendUrl}
+        pickedBestFormat={pickedBestFormat}
+        pickedVideoFormat={pickedVideoFormat}
+        pickedAudioFormat={pickedAudioFormat}
+      />}
      {
        settings.listView ?
          <DownloadsListView downloads={activeDownloads ?? []} abortFunction={abort} /> :
@@ -473,9 +399,29 @@ export default function Home({ socket }: Props) {
      <Snackbar
        open={showToast === status.connected}
        autoHideDuration={1500}
-        message="Connected"
        onClose={() => setShowToast(false)}
-      />
-    </Container >
+      >
+        <Alert variant="filled" severity="success">
+          {`Connected to (${settings.serverAddr}:${settings.serverPort})`}
+        </Alert>
+      </Snackbar>
+      <Snackbar open={socketHasError}>
+        <Alert variant="filled" severity="error">
+          {`${i18n.t('rpcConnErr')} (${settings.serverAddr}:${settings.serverPort})`}
+        </Alert>
+      </Snackbar>
+      <SpeedDial
+        ariaLabel="SpeedDial basic example"
+        sx={{ position: 'absolute', bottom: 32, right: 32 }}
+        icon={<SpeedDialIcon />}
+      >
+        <SpeedDialAction
+          icon={<FormatListBulleted />}
+          tooltipTitle={`Table view`}
+          tooltipOpen
+          onClick={() => dispatch(toggleListView())}
+        />
+      </SpeedDial>
+    </Container>
  );
-}
+}
--- a/frontend/src/Settings.tsx
+++ b/frontend/src/Settings.tsx
@@ -16,15 +16,22 @@ import {
  Switch,
  TextField,
  Typography
-} from "@mui/material";
-import { useMemo, useState } from "react";
-import { useDispatch, useSelector } from "react-redux";
-import { debounceTime, distinctUntilChanged, map, of, takeWhile } from "rxjs";
-import { CliArguments } from "./features/core/argsParser";
-import I18nBuilder from "./features/core/intl";
-import { RPCClient } from "./features/core/rpcClient";
+} from '@mui/material'
+import { useEffect, useMemo, useState } from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import {
+  Subject,
+  debounceTime,
+  distinctUntilChanged,
+  map,
+  takeWhile
+} from 'rxjs'
+import { CliArguments } from './features/core/argsParser'
+import I18nBuilder from './features/core/intl'
+import { RPCClient } from './features/core/rpcClient'
 import {
  LanguageUnion,
+  ThemeUnion,
  setCliArgs,
  setEnableCustomArgs,
  setFileRenaming,
@@ -33,32 +40,31 @@ import {
  setPathOverriding,
  setServerAddr,
  setServerPort,
-  setTheme,
-  ThemeUnion
-} from "./features/settings/settingsSlice";
-import { updated } from "./features/status/statusSlice";
-import { RootState } from "./stores/store";
-import { validateDomain, validateIP } from "./utils";
+  setTheme
+} from './features/settings/settingsSlice'
+import { updated } from './features/status/statusSlice'
+import { RootState } from './stores/store'
+import { validateDomain, validateIP } from './utils'

-export default function Settings({ socket }: { socket: WebSocket }) {
-  const settings = useSelector((state: RootState) => state.settings)
-  const status = useSelector((state: RootState) => state.status)
+export default function Settings() {
  const dispatch = useDispatch()

+  const status = useSelector((state: RootState) => state.status)
+  const settings = useSelector((state: RootState) => state.settings)
+
  const [invalidIP, setInvalidIP] = useState(false);

  const i18n = useMemo(() => new I18nBuilder(settings.language), [settings.language])
-  const client = useMemo(() => new RPCClient(socket), [settings.serverAddr, settings.serverPort])
-  const cliArgs = useMemo(() => new CliArguments().fromString(settings.cliArgs), [settings.cliArgs])
-  /**
-   * Update the server ip address state and localstorage whenever the input value changes.  
-   * Validate the ip-addr then set.s
-   * @param event Input change event
-   */
-  const handleAddrChange = (event: any) => {
-    const $serverAddr = of(event)
+
+  const client = useMemo(() => new RPCClient(), [])
+  const cliArgs = useMemo(() => new CliArguments().fromString(settings.cliArgs), [])
+
+  const serverAddr$ = useMemo(() => new Subject<string>(), [])
+  const serverPort$ = useMemo(() => new Subject<string>(), [])
+
+  useEffect(() => {
+    const sub = serverAddr$
      .pipe(
-        map(event => event.target.value),
        debounceTime(500),
        distinctUntilChanged()
      )
@@ -73,24 +79,21 @@ export default function Settings({ socket }: { socket: WebSocket }) {
          setInvalidIP(true)
        }
      })
-    return $serverAddr.unsubscribe()
-  }
+    return () => sub.unsubscribe()
+  }, [serverAddr$])

-  /**
-   * Set server port
-   */
-  const handlePortChange = (event: any) => {
-    const $port = of(event)
+  useEffect(() => {
+    const sub = serverPort$
      .pipe(
-        map(event => event.target.value),
+        debounceTime(500),
        map(val => Number(val)),
        takeWhile(val => isFinite(val) && val <= 65535),
      )
      .subscribe(port => {
        dispatch(setServerPort(port.toString()))
      })
-    return $port.unsubscribe()
-  }
+    return () => sub.unsubscribe()
+  }, [])

  /**
   * Language toggler handler 
@@ -107,7 +110,7 @@ export default function Settings({ socket }: { socket: WebSocket }) {
  }

  /**
-   * Send via WebSocket a message in order to update the yt-dlp binary from server
+   * Send via WebSocket a message to update yt-dlp binary
   */
  const updateBinary = () => {
    client.updateExecutable().then(() => dispatch(updated()))
@@ -125,7 +128,7 @@ export default function Settings({ socket }: { socket: WebSocket }) {
              minHeight: 240,
            }}
          >
-            <Typography pb={2} variant="h6" color="primary">
+            <Typography pb={3} variant="h5" color="primary">
              {i18n.t('settingsAnchor')}
            </Typography>
            <FormGroup>
@@ -136,7 +139,7 @@ export default function Settings({ socket }: { socket: WebSocket }) {
                    label={i18n.t('serverAddressTitle')}
                    defaultValue={settings.serverAddr}
                    error={invalidIP}
-                    onChange={handleAddrChange}
+                    onChange={(e) => serverAddr$.next(e.currentTarget.value)}
                    InputProps={{
                      startAdornment: <InputAdornment position="start">ws://</InputAdornment>,
                    }}
@@ -148,7 +151,7 @@ export default function Settings({ socket }: { socket: WebSocket }) {
                    fullWidth
                    label={i18n.t('serverPortTitle')}
                    defaultValue={settings.serverPort}
-                    onChange={handlePortChange}
+                    onChange={(e) => serverPort$.next(e.currentTarget.value)}
                    error={isNaN(Number(settings.serverPort)) || Number(settings.serverPort) > 65535}
                    sx={{ mb: 2 }}
                  />
@@ -186,16 +189,6 @@ export default function Settings({ socket }: { socket: WebSocket }) {
                    </Select>
                  </FormControl>
                </Grid>
-                {/* <Grid item xs={12} md={6}>
-                  <TextField
-                    fullWidth
-                    label={'Max download speed' || i18n.t('serverPortTitle')}
-                    defaultValue={settings.serverPort}
-                    onChange={handlePortChange}
-                    error={isNaN(Number(settings.serverPort)) || Number(settings.serverPort) > 65535}
-                    sx={{ mb: 2 }}
-                  />
-                </Grid> */}
              </Grid>
              <FormControlLabel
                control={
--- a/frontend/src/assets/i18n.yaml
+++ b/frontend/src/assets/i18n.yaml
@@ -28,6 +28,7 @@ languages:
    customPath: Custom path
    customArgs: Enable custom yt-dlp args (great power = great responsabilities)
    customArgsInput: Custom yt-dlp arguments
+    rpcConnErr: Error while conencting to RPC server
  italian:
    urlInput: URL di YouTube o di qualsiasi altro servizio supportato
    statusTitle: Stato
@@ -55,6 +56,7 @@ languages:
    customPath: Custom path
    customArgs: Enable custom yt-dlp args (great power = great responsabilities)
    customArgsInput: Custom yt-dlp arguments
+    rpcConnErr: Error nella connessione al server RPC
  chinese:
    urlInput: YouTube 或其他受支持服务的视频网址
    statusTitle: 状态
@@ -82,6 +84,7 @@ languages:
    customPath: 自定义路径
    customArgs: 启用自定义 yt-dlp 参数（能力越大 = 责任越大）
    customArgsInput: 自定义 yt-dlp 参数
+    rpcConnErr: Error while conencting to RPC server
  spanish:
    urlInput: YouTube or other supported service video url
    statusTitle: Status
@@ -109,6 +112,7 @@ languages:
    customPath: Custom path
    customArgs: Enable custom yt-dlp args (great power = great responsabilities)
    customArgsInput: Custom yt-dlp arguments
+    rpcConnErr: Error while conencting to RPC server
  russian:
    urlInput: YouTube or other supported service video url
    statusTitle: Status
@@ -136,6 +140,7 @@ languages:
    customPath: Custom path
    customArgs: Enable custom yt-dlp args (great power = great responsabilities)
    customArgsInput: Custom yt-dlp arguments
+    rpcConnErr: Error while conencting to RPC server
  korean:
    urlInput: YouTube나 다른 지원되는 사이트의 URL
    statusTitle: 상태
@@ -163,6 +168,7 @@ languages:
    customPath: Custom path
    customArgs: Enable custom yt-dlp args (great power = great responsabilities)
    customArgsInput: Custom yt-dlp arguments
+    rpcConnErr: Error while conencting to RPC server
  japanese:
    urlInput: YouTubeまたはサポート済み動画のURL
    statusTitle: 状態
@@ -190,4 +196,5 @@ languages:
    customFilename:  (空白の場合は元のファイル名)
    customPath: 保存先
    customArgs: yt-dlpのオプションの有効化 (最適設定にする場合)
-    customArgsInput: yt-dlpのオプション
+    customArgsInput: yt-dlpのオプション
+    rpcConnErr: Error while conencting to RPC server
--- a/frontend/src/components/AppBar.tsx
+++ b/frontend/src/components/AppBar.tsx
@@ -7,7 +7,7 @@ interface AppBarProps extends MuiAppBarProps {

 const drawerWidth = 240;

-export const AppBar = styled(MuiAppBar, {
+const AppBar = styled(MuiAppBar, {
  shouldForwardProp: (prop) => prop !== 'open',
 })<AppBarProps>(({ theme, open }) => ({
  zIndex: theme.zIndex.drawer + 1,
@@ -23,4 +23,6 @@ export const AppBar = styled(MuiAppBar, {
      duration: theme.transitions.duration.enteringScreen,
    }),
  }),
-}));
+}));
+
+export default AppBar
--- a/frontend/src/components/ArchiveResult.tsx
+++ b/frontend/src/components/ArchiveResult.tsx
@@ -1,5 +1,12 @@
-import { Card, CardActionArea, CardContent, CardMedia, Skeleton, Typography } from "@mui/material";
-import { ellipsis } from "../utils";
+import {
+    Card,
+    CardActionArea,
+    CardContent,
+    CardMedia,
+    Skeleton,
+    Typography
+} from '@mui/material'
+import { ellipsis } from '../utils'

 type Props = {
    title: string,
--- a/frontend/src/components/DownloadsCardView.tsx
+++ b/frontend/src/components/DownloadsCardView.tsx
@@ -1,11 +1,12 @@
 import { Grid } from "@mui/material"
 import { Fragment } from "react"
+
 import type { RPCResult } from "../types"
 import { StackableResult } from "./StackableResult"

 type Props = {
  downloads: RPCResult[]
-  abortFunction: Function
+  abortFunction: (id: string) => void
 }

 export function DownloadsCardView({ downloads, abortFunction }: Props) {
--- a/frontend/src/components/DownloadsListView.tsx
+++ b/frontend/src/components/DownloadsListView.tsx
@@ -1,6 +1,18 @@
-import { Button, CircularProgress, Grid, LinearProgress, Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Typography } from "@mui/material"
-import { RPCResult } from "../types"
+import {
+  Button,
+  Grid,
+  LinearProgress,
+  Paper,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Typography
+} from "@mui/material"
 import { ellipsis, formatSpeedMiB, roundMiB } from "../utils"
+import type { RPCResult } from "../types"

 type Props = {
  downloads: RPCResult[]
--- a/frontend/src/components/Drawer.tsx
+++ b/frontend/src/components/Drawer.tsx
@@ -1,9 +1,9 @@
-import { styled } from '@mui/material';
-import MuiDrawer from '@mui/material/Drawer';
+import { styled } from '@mui/material'
+import MuiDrawer from '@mui/material/Drawer'

-const drawerWidth = 240;
+const drawerWidth = 240

-export const Drawer = styled(MuiDrawer, { shouldForwardProp: (prop) => prop !== 'open' })(
+const Drawer = styled(MuiDrawer, { shouldForwardProp: (prop) => prop !== 'open' })(
  ({ theme, open }) => ({
    '& .MuiDrawer-paper': {
      position: 'relative',
@@ -27,4 +27,6 @@ export const Drawer = styled(MuiDrawer, { shouldForwardProp: (prop) => prop !==
      }),
    },
  }),
-);
+)
+
+export default Drawer
--- a/frontend/src/components/FormatsGrid.tsx
+++ b/frontend/src/components/FormatsGrid.tsx
@@ -0,0 +1,126 @@
+import { Button, ButtonGroup, Grid, Paper, Typography } from "@mui/material"
+import type { DLMetadata } from '../types'
+
+type Props = {
+  downloadFormats: DLMetadata
+  onAudioSelected: (format: string) => void
+  onVideoSelected: (format: string) => void
+  onBestQualitySelected: (format: string) => void
+  onSubmit: () => void
+  onClear: () => void
+  pickedBestFormat: string
+  pickedAudioFormat: string
+  pickedVideoFormat: string
+}
+
+export default function FormatsGrid({
+  downloadFormats,
+  onAudioSelected,
+  onVideoSelected,
+  onBestQualitySelected,
+  onSubmit,
+  onClear,
+  pickedBestFormat,
+  pickedAudioFormat,
+  pickedVideoFormat,
+}: Props) {
+  return (
+    <Grid container spacing={2} mt={2}>
+      <Grid item xs={12}>
+        <Paper
+          sx={{
+            p: 2,
+            display: 'flex',
+            flexDirection: 'column',
+          }}
+        >
+          <Grid container>
+            <Grid item xs={12}>
+              <Typography variant="h6" component="div" pb={1}>
+                {downloadFormats.title}
+              </Typography>
+              {/* <Skeleton variant="rectangular" height={180} /> */}
+            </Grid>
+            <Grid item xs={12} pb={1}>
+              <img src={downloadFormats.thumbnail} height={260} width="100%" style={{ objectFit: 'cover' }} />
+            </Grid>
+            {/* video only */}
+            <Grid item xs={12}>
+              <Typography variant="body1" component="div">
+                Best quality
+              </Typography>
+            </Grid>
+            <Grid item pr={2} py={1}>
+              <Button
+                variant="contained"
+                disabled={pickedBestFormat !== ''}
+                onClick={() => onBestQualitySelected(downloadFormats.best.format_id)}
+              >
+                {downloadFormats.best.format_note || downloadFormats.best.format_id} - {downloadFormats.best.vcodec}+{downloadFormats.best.acodec}
+                &nbsp;({downloadFormats.best.resolution}{(downloadFormats.best.filesize_approx > 0) ? ", ~" + Math.round(downloadFormats.best.filesize_approx / 1024 / 1024) + " MiB" : ""})
+              </Button>
+            </Grid>
+            {/* video only */}
+            {downloadFormats.formats.filter(format => format.acodec === 'none' && format.vcodec !== 'none').length &&
+              <Grid item xs={12}>
+                <Typography variant="body1" component="div">
+                  Video data {downloadFormats.formats[1].acodec}
+                </Typography>
+              </Grid>
+            }
+            {downloadFormats.formats
+              .filter(format => format.acodec === 'none' && format.vcodec !== 'none')
+              .map((format, idx) => (
+                <Grid item pr={2} py={1} key={idx}>
+                  <Button
+                    variant="contained"
+                    onClick={() => onVideoSelected(format.format_id)}
+                    disabled={pickedVideoFormat === format.format_id}
+                  >
+                    {format.format_note} - {format.vcodec === 'none' ? format.acodec : format.vcodec}
+                    &nbsp;({format.resolution}{(format.filesize_approx > 0) ? ", ~" + Math.round(format.filesize_approx / 1024 / 1024) + " MiB" : ""})
+                  </Button>
+                </Grid>
+              ))
+            }
+            {downloadFormats.formats.filter(format => format.acodec === 'none' && format.vcodec !== 'none').length &&
+              <Grid item xs={12}>
+                <Typography variant="body1" component="div">
+                  Audio data
+                </Typography>
+              </Grid>
+            }
+            {downloadFormats.formats
+              .filter(format => format.acodec !== 'none' && format.vcodec === 'none')
+              .map((format, idx) => (
+                <Grid item pr={2} py={1} key={idx}>
+                  <Button
+                    variant="contained"
+                    onClick={() => onAudioSelected(format.format_id)}
+                    disabled={pickedAudioFormat === format.format_id}
+                  >
+                    {format.format_note} - {format.vcodec === 'none' ? format.acodec : format.vcodec}
+                    {(format.filesize_approx > 0) ? " (~" + Math.round(format.filesize_approx / 1024 / 1024) + " MiB)" : ""}
+                  </Button>
+                </Grid>
+              ))
+            }
+            <Grid item xs={12} pt={2}>
+              <ButtonGroup disableElevation variant="contained">
+                <Button
+                  onClick={() => onSubmit()}
+                  disabled={!pickedBestFormat && !(pickedAudioFormat || pickedVideoFormat)}
+                > Download
+                </Button>
+                <Button
+                  onClick={() => onClear()}
+                > Clear
+                </Button>
+              </ButtonGroup>
+            </Grid>
+          </Grid>
+        </Paper>
+      </Grid>
+    </Grid>
+  )
+}
--- a/frontend/src/components/StackableResult.tsx
+++ b/frontend/src/components/StackableResult.tsx
@@ -1,4 +1,4 @@
-import { EightK, FourK, Hd, Sd } from "@mui/icons-material";
+import { EightK, FourK, Hd, Sd } from '@mui/icons-material'
 import {
  Button,
  Card,
@@ -11,9 +11,9 @@ import {
  Skeleton,
  Stack,
  Typography
-} from "@mui/material";
-import { useEffect, useState } from "react";
-import { ellipsis, formatSpeedMiB, roundMiB } from "../utils";
+} from '@mui/material'
+import { useEffect, useState } from 'react'
+import { ellipsis, formatSpeedMiB, roundMiB } from '../utils'

 type Props = {
  title: string,
@@ -97,7 +97,8 @@ export function StackableResult({
          variant="contained"
          size="small"
          color="primary"
-          onClick={stopCallback}>
+          onClick={stopCallback}
+        >
          {isCompleted ? "Clear" : "Stop"}
        </Button>
      </CardActions>
--- a/frontend/src/features/core/rpcClient.ts
+++ b/frontend/src/features/core/rpcClient.ts
@@ -1,13 +1,14 @@
-import type { RPCRequest, RPCResponse, IDLMetadata } from "../../types"
+import type { DLMetadata, RPCRequest, RPCResponse } from '../../types'

-import { getHttpRPCEndpoint } from '../../utils'
+import { webSocket } from 'rxjs/webSocket'
+import { getHttpRPCEndpoint, getWebSocketEndpoint } from '../../utils'
+
+export const socket$ = webSocket<any>(getWebSocketEndpoint())

 export class RPCClient {
-  private socket: WebSocket
  private seq: number

-  constructor(socket: WebSocket) {
-    this.socket = socket
+  constructor() {
    this.seq = 0
  }

@@ -16,27 +17,28 @@ export class RPCClient {
  }

  private send(req: RPCRequest) {
-    this.socket.send(JSON.stringify(req))
+    socket$.next({
+      ...req,
+      id: this.incrementSeq(),
+    })
  }

-  private sendHTTP<T>(req: RPCRequest) {
-    return new Promise<RPCResponse<T>>((resolve) => {
-      fetch(getHttpRPCEndpoint(), {
-        method: 'POST',
-        body: JSON.stringify({
-          id: this.incrementSeq(),
-          ...req
-        })
+  private async sendHTTP<T>(req: RPCRequest) {
+    const res = await fetch(getHttpRPCEndpoint(), {
+      method: 'POST',
+      body: JSON.stringify({
+        ...req,
+        id: this.incrementSeq(),
      })
-        .then(res => res.json())
-        .then(data => resolve(data))
    })
+    const data: RPCResponse<T> = await res.json()
+
+    return data
  }

  public download(url: string, args: string, pathOverride = '', renameTo = '') {
    if (url) {
      this.send({
-        id: this.incrementSeq(),
        method: 'Service.Exec',
        params: [{
          URL: url.split("?list").at(0)!,
@@ -50,8 +52,7 @@ export class RPCClient {

  public formats(url: string) {
    if (url) {
-      return this.sendHTTP<IDLMetadata>({
-        id: this.incrementSeq(),
+      return this.sendHTTP<DLMetadata>({
        method: 'Service.Formats',
        params: [{
          URL: url.split("?list").at(0)!,
@@ -62,7 +63,6 @@ export class RPCClient {

  public running() {
    this.send({
-      id: this.incrementSeq(),
      method: 'Service.Running',
      params: [],
    })
@@ -102,8 +102,4 @@ export class RPCClient {
      params: []
    })
  }
-
-  public decode(data: any): RPCResponse<any> {
-    return JSON.parse(data)
-  }
 }
--- a/frontend/src/hooks/observable.ts
+++ b/frontend/src/hooks/observable.ts
@@ -0,0 +1,44 @@
+import { useEffect, useState } from 'react'
+import { Observable } from 'rxjs'
+
+/**
+ * Handles the subscription and unsubscription from an observable.
+ * Automatically disposes the subscription.
+ * @param source$ source observable
+ * @param nextHandler subscriber function
+ * @param errHandler error catching callback
+ */
+export function useSubscription<T>(
+  source$: Observable<T>,
+  nextHandler: (value: T) => void,
+  errHandler?: (err: any) => void,
+) {
+  useEffect(() => {
+    if (source$) {
+      const sub = source$.subscribe({
+        next: nextHandler,
+        error: errHandler,
+      })
+      return () => sub.unsubscribe()
+    }
+  }, [source$])
+}
+
+/**
+ * Use an observable as state
+ * @param source$ source observable
+ * @param initialState the initial state prior to the emission
+ * @param errHandler error catching callback
+ * @returns value emitted to the observable
+ */
+export function useObservable<T>(
+  source$: Observable<T>,
+  initialState: T,
+  errHandler?: (err: any) => void,
+): T {
+  const [value, setValue] = useState(initialState)
+
+  useSubscription(source$, setValue, errHandler)
+
+  return value
+}
--- a/frontend/src/index.tsx
+++ b/frontend/src/index.tsx
@@ -1,10 +1,10 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
 import { App } from './App'

-const root = ReactDOM.createRoot(document.getElementById('root')!)
+const root = createRoot(document.getElementById('root')!)
 root.render(
-    <React.StrictMode>
-        <App></App>
-    </React.StrictMode>
+    <StrictMode>
+        <App />
+    </StrictMode>
 )
--- a/frontend/src/types/index.d.ts
+++ b/frontend/src/types/index.d.ts
@@ -10,13 +10,13 @@ export type RPCMethods =
  | "Service.UpdateExecutable"

 export type RPCRequest = {
-  method: RPCMethods,
-  params?: any[],
+  method: RPCMethods
+  params?: any[]
  id?: string
 }

 export type RPCResponse<T> = {
-  result: T,
+  result: T
  error: number | null
  id?: string
 }
@@ -45,19 +45,31 @@ export type RPCParams = {
  Params?: string
 }

-export interface IDLMetadata {
-  formats: Array<IDLFormat>,
-  best: IDLFormat,
-  thumbnail: string,
-  title: string,
+export interface DLMetadata {
+  formats: Array<DLFormat>
+  best: DLFormat
+  thumbnail: string
+  title: string
 }

-export interface IDLFormat {
-  format_id: string,
-  format_note: string,
-  fps: number,
-  resolution: string,
-  vcodec: string,
-  acodec: string,
-  filesize_approx: number,
-}
+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
+  shaSum: string
+  isDirectory: boolean
+}
+
+export type DeleteRequest = Omit<DirectoryEntry, 'name' | 'isDirectory'>
+
+export type PlayRequest = Omit<DirectoryEntry, 'shaSum' | 'name' | 'isDirectory'>
+
--- a/frontend/src/utils.ts
+++ b/frontend/src/utils.ts
@@ -82,6 +82,10 @@ export function getHttpRPCEndpoint() {
    return `${window.location.protocol}//${localStorage.getItem('server-addr') || window.location.hostname}:${localStorage.getItem('server-port') || window.location.port}/http-rpc`
 }

+export function getHttpEndpoint() {
+    return `${window.location.protocol}//${localStorage.getItem('server-addr') || window.location.hostname}:${localStorage.getItem('server-port') || window.location.port}`
+}
+
 export function formatGiB(bytes: number) {
    return `${(bytes / 1_000_000_000).toFixed(0)}GiB`
 }
--- a/go.mod
+++ b/go.mod
@@ -3,25 +3,28 @@ module github.com/marcopeocchi/yt-dlp-web-ui
 go 1.19

 require (
-	github.com/goccy/go-json v0.10.0
-	github.com/gofiber/fiber/v2 v2.41.0
-	github.com/gofiber/websocket/v2 v2.1.2
+	github.com/goccy/go-json v0.10.2
+	github.com/gofiber/fiber/v2 v2.43.0
+	github.com/gofiber/websocket/v2 v2.1.5
 	github.com/google/uuid v1.3.0
-	github.com/marcopeocchi/fazzoletti v0.0.0-20221114144444-1e802380a7db
-	golang.org/x/sys v0.4.0
+	github.com/marcopeocchi/fazzoletti v0.0.0-20230308161120-c545580f79fa
+	golang.org/x/sys v0.7.0
 	gopkg.in/yaml.v3 v3.0.1
 )

 require (
-	github.com/andybalholm/brotli v1.0.4 // indirect
-	github.com/fasthttp/websocket v1.5.0 // indirect
-	github.com/klauspost/compress v1.15.14 // indirect
+	github.com/andybalholm/brotli v1.0.5 // indirect
+	github.com/fasthttp/websocket v1.5.2 // indirect
+	github.com/klauspost/compress v1.16.4 // indirect
 	github.com/mattn/go-colorable v0.1.13 // indirect
-	github.com/mattn/go-isatty v0.0.17 // indirect
+	github.com/mattn/go-isatty v0.0.18 // indirect
 	github.com/mattn/go-runewidth v0.0.14 // indirect
-	github.com/rivo/uniseg v0.4.3 // indirect
-	github.com/savsgio/gotils v0.0.0-20220530130905-52f3993e8d6d // indirect
+	github.com/philhofer/fwd v1.1.2 // indirect
+	github.com/rivo/uniseg v0.4.4 // indirect
+	github.com/savsgio/dictpool v0.0.0-20221023140959-7bf2e61cea94 // indirect
+	github.com/savsgio/gotils v0.0.0-20230208104028-c358bd845dee // indirect
+	github.com/tinylib/msgp v1.1.8 // indirect
 	github.com/valyala/bytebufferpool v1.0.0 // indirect
-	github.com/valyala/fasthttp v1.43.0 // indirect
+	github.com/valyala/fasthttp v1.45.0 // indirect
 	github.com/valyala/tcplisten v1.0.0 // indirect
 )
--- a/go.sum
+++ b/go.sum
@@ -1,61 +1,92 @@
-github.com/andybalholm/brotli v1.0.4 h1:V7DdXeJtZscaqfNuAdSRuRFzuiKlHSC/Zh3zl9qY3JY=
-github.com/andybalholm/brotli v1.0.4/go.mod h1:fO7iG3H7G2nSZ7m0zPUDn85XEX2GTukHGRSepvi9Eig=
-github.com/fasthttp/websocket v1.5.0 h1:B4zbe3xXyvIdnqjOZrafVFklCUq5ZLo/TqCt5JA1wLE=
-github.com/fasthttp/websocket v1.5.0/go.mod h1:n0BlOQvJdPbTuBkZT0O5+jk/sp/1/VCzquR1BehI2F4=
-github.com/goccy/go-json v0.10.0 h1:mXKd9Qw4NuzShiRlOXKews24ufknHO7gx30lsDyokKA=
-github.com/goccy/go-json v0.10.0/go.mod h1:6MelG93GURQebXPDq3khkgXZkazVtN9CRI+MGFi0w8I=
-github.com/gofiber/fiber/v2 v2.40.1/go.mod h1:Gko04sLksnHbzLSRBFWPFdzM9Ws9pRxvvIaohJK1dsk=
-github.com/gofiber/fiber/v2 v2.41.0 h1:YhNoUS/OTjEz+/WLYuQ01xI7RXgKEFnGBKMagAu5f0M=
-github.com/gofiber/fiber/v2 v2.41.0/go.mod h1:RdebcCuCRFp4W6hr3968/XxwJVg0K+jr9/Ae0PFzZ0Q=
-github.com/gofiber/websocket/v2 v2.1.2 h1:EulKyLB/fJgui5+6c8irwEnYQ9FRsrLZfkrq9OfTDGc=
-github.com/gofiber/websocket/v2 v2.1.2/go.mod h1:S+sKWo0xeC7Wnz5h4/8f6D/NxsrLFIdWDYB3SyVO9pE=
+github.com/andybalholm/brotli v1.0.5 h1:8uQZIdzKmjc/iuPu7O2ioW48L81FgatrcpfFmiq/cCs=
+github.com/andybalholm/brotli v1.0.5/go.mod h1:fO7iG3H7G2nSZ7m0zPUDn85XEX2GTukHGRSepvi9Eig=
+github.com/fasthttp/websocket v1.5.2 h1:KdCb0EpLpdJpfE3IPA5YLK/aYBO3dhZcvwxz6tXe2LQ=
+github.com/fasthttp/websocket v1.5.2/go.mod h1:S0KC1VBlx1SaXGXq7yi1wKz4jMub58qEnHQG9oHuqBw=
+github.com/goccy/go-json v0.10.2 h1:CrxCmQqYDkv1z7lO7Wbh2HN93uovUHgrECaO5ZrCXAU=
+github.com/goccy/go-json v0.10.2/go.mod h1:6MelG93GURQebXPDq3khkgXZkazVtN9CRI+MGFi0w8I=
+github.com/gofiber/fiber/v2 v2.43.0 h1:yit3E4kHf178B60p5CQBa/3v+WVuziWMa/G2ZNyLJB0=
+github.com/gofiber/fiber/v2 v2.43.0/go.mod h1:mpS1ZNE5jU+u+BA4FbM+KKnUzJ4wzTK+FT2tG3tU+6I=
+github.com/gofiber/websocket/v2 v2.1.5 h1:2weAMr0Shb2ubhZ3+P4bkeWL+uCZ/NlgjSa1siEcvFM=
+github.com/gofiber/websocket/v2 v2.1.5/go.mod h1:BZZEk+XsjjF0V6/sAw00iGcB69dFb6Hb85ER9gr/xaU=
 github.com/google/uuid v1.3.0 h1:t6JiXgmwXMjEs8VusXIJk2BXHsn+wx8BZdTaoZ5fu7I=
 github.com/google/uuid v1.3.0/go.mod h1:TIyPZe4MgqvfeYDBFedMoGGpEw/LqOeaOT+nhxU+yHo=
-github.com/klauspost/compress v1.14.1/go.mod h1:/3/Vjq9QcHkK5uEr5lBEmyoZ1iFhe47etQ6QUkpK6sk=
-github.com/klauspost/compress v1.15.9/go.mod h1:PhcZ0MbTNciWF3rruxRgKxI5NkcHHrHUDtV4Yw2GlzU=
-github.com/klauspost/compress v1.15.14 h1:i7WCKDToww0wA+9qrUZ1xOjp218vfFo3nTU6UHp+gOc=
-github.com/klauspost/compress v1.15.14/go.mod h1:QPwzmACJjUTFsnSHH934V6woptycfrDDJnH7hvFVbGM=
-github.com/marcopeocchi/fazzoletti v0.0.0-20221114144444-1e802380a7db h1:SmKRgCLsImPxBTIzmUpbQyv+7FembiZaq/QTwtDqar4=
-github.com/marcopeocchi/fazzoletti v0.0.0-20221114144444-1e802380a7db/go.mod h1:RvfVo/6Sbnfra9kkvIxDW8NYOOaYsHjF0DdtMCs9cdo=
+github.com/klauspost/compress v1.16.4 h1:91KN02FnsOYhuunwU4ssRe8lc2JosWmizWa91B5v1PU=
+github.com/klauspost/compress v1.16.4/go.mod h1:ntbaceVETuRiXiv4DpjP66DpAtAGkEQskQzEyD//IeE=
+github.com/marcopeocchi/fazzoletti v0.0.0-20230308161120-c545580f79fa h1:uaAQLGhN4SesB9inOQ1Q6EH+BwTWHQOvwhR0TIJvnYc=
+github.com/marcopeocchi/fazzoletti v0.0.0-20230308161120-c545580f79fa/go.mod h1:RvfVo/6Sbnfra9kkvIxDW8NYOOaYsHjF0DdtMCs9cdo=
 github.com/mattn/go-colorable v0.1.13 h1:fFA4WZxdEF4tXPZVKMLwD8oUnCTTo08duU7wxecdEvA=
 github.com/mattn/go-colorable v0.1.13/go.mod h1:7S9/ev0klgBDR4GtXTXX8a3vIGJpMovkB8vQcUbaXHg=
 github.com/mattn/go-isatty v0.0.16/go.mod h1:kYGgaQfpe5nmfYZH+SKPsOc2e4SrIfOl2e/yFXSvRLM=
-github.com/mattn/go-isatty v0.0.17 h1:BTarxUcIeDqL27Mc+vyvdWYSL28zpIhv3RoTdsLMPng=
-github.com/mattn/go-isatty v0.0.17/go.mod h1:kYGgaQfpe5nmfYZH+SKPsOc2e4SrIfOl2e/yFXSvRLM=
+github.com/mattn/go-isatty v0.0.18 h1:DOKFKCQ7FNG2L1rbrmstDN4QVRdS89Nkh85u68Uwp98=
+github.com/mattn/go-isatty v0.0.18/go.mod h1:W+V8PltTTMOvKvAeJH7IuucS94S2C6jfK/D7dTCTo3Y=
 github.com/mattn/go-runewidth v0.0.14 h1:+xnbZSEeDbOIg5/mE6JF0w6n9duR1l3/WmbinWVwUuU=
 github.com/mattn/go-runewidth v0.0.14/go.mod h1:Jdepj2loyihRzMpdS35Xk/zdY8IAYHsh153qUoGf23w=
+github.com/philhofer/fwd v1.1.1/go.mod h1:gk3iGcWd9+svBvR0sR+KPcfE+RNWozjowpeBVG3ZVNU=
+github.com/philhofer/fwd v1.1.2 h1:bnDivRJ1EWPjUIRXV5KfORO897HTbpFAQddBdE8t7Gw=
+github.com/philhofer/fwd v1.1.2/go.mod h1:qkPdfjR2SIEbspLqpe1tO4n5yICnr2DY7mqEx2tUTP0=
 github.com/rivo/uniseg v0.2.0/go.mod h1:J6wj4VEh+S6ZtnVlnTBMWIodfgj8LQOQFoIToxlJtxc=
-github.com/rivo/uniseg v0.4.3 h1:utMvzDsuh3suAEnhH0RdHmoPbU648o6CvXxTx4SBMOw=
-github.com/rivo/uniseg v0.4.3/go.mod h1:FN3SvrM+Zdj16jyLfmOkMNblXMcoc8DfTHruCPUcx88=
-github.com/savsgio/gotils v0.0.0-20211223103454-d0aaa54c5899/go.mod h1:oejLrk1Y/5zOF+c/aHtXqn3TFlzzbAgPWg8zBiAHDas=
-github.com/savsgio/gotils v0.0.0-20220530130905-52f3993e8d6d h1:Q+gqLBOPkFGHyCJxXMRqtUgUbTjI8/Ze8vu8GGyNFwo=
+github.com/rivo/uniseg v0.4.4 h1:8TfxU8dW6PdqD27gjM8MVNuicgxIjxpm4K7x4jp8sis=
+github.com/rivo/uniseg v0.4.4/go.mod h1:FN3SvrM+Zdj16jyLfmOkMNblXMcoc8DfTHruCPUcx88=
+github.com/savsgio/dictpool v0.0.0-20221023140959-7bf2e61cea94 h1:rmMl4fXJhKMNWl+K+r/fq4FbbKI+Ia2m9hYBLm2h4G4=
+github.com/savsgio/dictpool v0.0.0-20221023140959-7bf2e61cea94/go.mod h1:90zrgN3D/WJsDd1iXHT96alCoN2KJo6/4x1DZC3wZs8=
 github.com/savsgio/gotils v0.0.0-20220530130905-52f3993e8d6d/go.mod h1:Gy+0tqhJvgGlqnTF8CVGP0AaGRjwBtXs/a5PA0Y3+A4=
+github.com/savsgio/gotils v0.0.0-20230208104028-c358bd845dee h1:8Iv5m6xEo1NR1AvpV+7XmhI4r39LGNzwUL4YpMuL5vk=
+github.com/savsgio/gotils v0.0.0-20230208104028-c358bd845dee/go.mod h1:qwtSXrKuJh/zsFQ12yEE89xfCrGKK63Rr7ctU/uCo4g=
+github.com/tinylib/msgp v1.1.6/go.mod h1:75BAfg2hauQhs3qedfdDZmWAPcFMAvJE5b9rGOMufyw=
+github.com/tinylib/msgp v1.1.8 h1:FCXC1xanKO4I8plpHGH2P7koL/RzZs12l/+r7vakfm0=
+github.com/tinylib/msgp v1.1.8/go.mod h1:qkpG+2ldGg4xRFmx+jfTvZPxfGFhi64BcnL9vkCm/Tw=
 github.com/valyala/bytebufferpool v1.0.0 h1:GqA5TC/0021Y/b9FG4Oi9Mr3q7XYx6KllzawFIhcdPw=
 github.com/valyala/bytebufferpool v1.0.0/go.mod h1:6bBcMArwyJ5K/AmCkWv1jt77kVWyCJ6HpOuEn7z0Csc=
-github.com/valyala/fasthttp v1.33.0/go.mod h1:KJRK/MXx0J+yd0c5hlR+s1tIHD72sniU8ZJjl97LIw4=
-github.com/valyala/fasthttp v1.41.0/go.mod h1:f6VbjjoI3z1NDOZOv17o6RvtRSWxC77seBFc2uWtgiY=
-github.com/valyala/fasthttp v1.43.0 h1:Gy4sb32C98fbzVWZlTM1oTMdLWGyvxR03VhM6cBIU4g=
-github.com/valyala/fasthttp v1.43.0/go.mod h1:f6VbjjoI3z1NDOZOv17o6RvtRSWxC77seBFc2uWtgiY=
+github.com/valyala/fasthttp v1.45.0 h1:zPkkzpIn8tdHZUrVa6PzYd0i5verqiPSkgTd3bSUcpA=
+github.com/valyala/fasthttp v1.45.0/go.mod h1:k2zXd82h/7UZc3VOdJ2WaUqt1uZ/XpXAfE9i+HBC3lA=
 github.com/valyala/tcplisten v1.0.0 h1:rBHj/Xf+E1tRGZyWIWwJDiRY0zc1Js+CV5DqwacVSA8=
 github.com/valyala/tcplisten v1.0.0/go.mod h1:T0xQ8SeCZGxckz9qRXTfG43PvQ/mcWh7FwZEA7Ioqkc=
-golang.org/x/crypto v0.0.0-20220112180741-5e0467b6c7ce/go.mod h1:IxCIyHEi3zRg3s0A5j5BB6A9Jmi73HwBIUl50j+osU4=
-golang.org/x/crypto v0.0.0-20220214200702-86341886e292/go.mod h1:IxCIyHEi3zRg3s0A5j5BB6A9Jmi73HwBIUl50j+osU4=
-golang.org/x/net v0.0.0-20211112202133-69e39bad7dc2/go.mod h1:9nx3DQGgdP8bBQD5qxJ1jj9UTztislL4KSBs9R2vV5Y=
-golang.org/x/net v0.0.0-20220111093109-d55c255bac03/go.mod h1:9nx3DQGgdP8bBQD5qxJ1jj9UTztislL4KSBs9R2vV5Y=
-golang.org/x/net v0.0.0-20220906165146-f3363e06e74c/go.mod h1:YDH+HFinaLZZlnHAfSS6ZXJJ9M9t4Dl22yv3iI2vPwk=
+github.com/yuin/goldmark v1.2.1/go.mod h1:3hX8gzYuyVAZsxl0MRgGTJEmQBFcNTphYh9decYSb74=
+github.com/yuin/goldmark v1.4.13/go.mod h1:6yULJ656Px+3vBD8DxQVa3kxgyrAnzto9xy5taEt/CY=
+golang.org/x/crypto v0.0.0-20190308221718-c2843e01d9a2/go.mod h1:djNgcEr1/C05ACkg1iLfiJU5Ep61QUkGW8qpdssI0+w=
+golang.org/x/crypto v0.0.0-20191011191535-87dc89f01550/go.mod h1:yigFU9vqHzYiE8UmvKecakEJjdnWj3jj499lnFckfCI=
+golang.org/x/crypto v0.0.0-20200622213623-75b288015ac9/go.mod h1:LzIPMQfyMNhhGPhUkYOs5KpL4U8rLKemX1yGLhDgUto=
+golang.org/x/crypto v0.0.0-20210921155107-089bfa567519/go.mod h1:GvvjBRRGRdwPK5ydBHafDWAxML/pGHZbMvKqRZ5+Abc=
+golang.org/x/mod v0.3.0/go.mod h1:s0Qsj1ACt9ePp/hMypM3fl4fZqREWJwdYDEqhRiZZUA=
+golang.org/x/mod v0.6.0-dev.0.20220419223038-86c51ed26bb4/go.mod h1:jJ57K6gSWd91VN4djpZkiMVwK6gcyfeH4XE8wZrZaV4=
+golang.org/x/mod v0.7.0/go.mod h1:iBbtSCu2XBx23ZKBPSOrRkjjQPZFPuis4dIYUhu/chs=
+golang.org/x/net v0.0.0-20190404232315-eb5bcb51f2a3/go.mod h1:t9HGtf8HONx5eT2rtn7q6eTqICYqUVnKs3thJo3Qplg=
+golang.org/x/net v0.0.0-20190620200207-3b0461eec859/go.mod h1:z5CRVTTTmAJ677TzLLGU+0bjPO0LkuOLi4/5GtJWs/s=
+golang.org/x/net v0.0.0-20201021035429-f5854403a974/go.mod h1:sp8m0HH+o8qH0wwXwYZr8TS3Oi6o0r6Gce1SSxlDquU=
+golang.org/x/net v0.0.0-20210226172049-e18ecbb05110/go.mod h1:m0MpNAwzfU5UDzcl9v0D8zg8gWTRqZa9RBIspLL5mdg=
+golang.org/x/net v0.0.0-20220722155237-a158d28d115b/go.mod h1:XRhObCWvk6IyKnWLug+ECip1KBveYUHfp+8e9klMJ9c=
+golang.org/x/net v0.3.0/go.mod h1:MBQ8lrhLObU/6UmLb4fmbmk5OcyYmqtbGd/9yIeKjEE=
+golang.org/x/sync v0.0.0-20190423024810-112230192c58/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
+golang.org/x/sync v0.0.0-20201020160332-67f06af15bc9/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
+golang.org/x/sync v0.0.0-20220722155255-886fb9371eb4/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
+golang.org/x/sync v0.1.0/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
+golang.org/x/sys v0.0.0-20190215142949-d0b11bdaac8a/go.mod h1:STP8DvDyc/dI5b8T5hshtkjS+E42TnysNCUPdjciGhY=
+golang.org/x/sys v0.0.0-20190412213103-97732733099d/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
+golang.org/x/sys v0.0.0-20200930185726-fdedc70b468f/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
 golang.org/x/sys v0.0.0-20201119102817-f84b799fce68/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
-golang.org/x/sys v0.0.0-20210423082822-04245dca01da/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
 golang.org/x/sys v0.0.0-20210615035016-665e8c7367d1/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
-golang.org/x/sys v0.0.0-20220111092808-5a964db01320/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
-golang.org/x/sys v0.0.0-20220728004956-3c1f35247d10/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/sys v0.0.0-20220520151302-bc2c85ada10a/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/sys v0.0.0-20220722155257-8c9f86f7a55f/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.0.0-20220811171246-fbc7d0a398ab/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
-golang.org/x/sys v0.4.0 h1:Zr2JFtRQNX3BCZ8YtxRE9hNJYC8J6I1MVbMg6owUp18=
-golang.org/x/sys v0.4.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/sys v0.3.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/sys v0.6.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/sys v0.7.0 h1:3jlCCIQZPdOYu1h8BkNvLz8Kgwtae2cagcG/VamtZRU=
+golang.org/x/sys v0.7.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/term v0.0.0-20201126162022-7de9c90e9dd1/go.mod h1:bj7SfCRtBDWHUb9snDiAeCFNEtKQo2Wmx5Cou7ajbmo=
 golang.org/x/term v0.0.0-20210927222741-03fcf44c2211/go.mod h1:jbD1KX2456YbFQfuXm/mYQcufACuNUgVhRMnK/tPxf8=
-golang.org/x/text v0.3.6/go.mod h1:5Zoc/QRtKVWzQhOtBMvqHzDpF6irO9z98xDceosuGiQ=
+golang.org/x/term v0.3.0/go.mod h1:q750SLmJuPmVoN1blW3UFBPREJfb1KmY3vwxfr+nFDA=
+golang.org/x/text v0.3.0/go.mod h1:NqM8EUOU14njkJ3fqMW+pc6Ldnwhi/IjpwHt7yyuwOQ=
+golang.org/x/text v0.3.3/go.mod h1:5Zoc/QRtKVWzQhOtBMvqHzDpF6irO9z98xDceosuGiQ=
 golang.org/x/text v0.3.7/go.mod h1:u+2+/6zg+i71rQMx5EYifcz6MCKuco9NR6JIITiCfzQ=
+golang.org/x/text v0.5.0/go.mod h1:mrYo+phRRbMaCq/xk9113O4dZlRixOauAjOtrjsXDZ8=
 golang.org/x/tools v0.0.0-20180917221912-90fa682c2a6e/go.mod h1:n7NCudcB/nEzxVGmLbDWY5pfWTLqBcC2KZ6jyYvM4mQ=
+golang.org/x/tools v0.0.0-20191119224855-298f0cb1881e/go.mod h1:b+2E5dAYhXwXZwtnZ6UAqBI28+e2cm9otk0dWdXHAEo=
+golang.org/x/tools v0.0.0-20201022035929-9cf592e881e9/go.mod h1:emZCQorbCU4vsT4fOWvOPXz4eW1wZW4PmDk9uLelYpA=
+golang.org/x/tools v0.1.12/go.mod h1:hNGJHUnrk76NpqgfD5Aqm5Crs+Hm0VOH/i9J2+nxYbc=
+golang.org/x/tools v0.4.0/go.mod h1:UE5sM2OK9E/d67R0ANs2xJizIymRP5gJU295PvKXxjQ=
+golang.org/x/xerrors v0.0.0-20190717185122-a985d3407aa7/go.mod h1:I/5z698sn9Ka8TeJc9MKroUUfqBBauWjQqLJ2OPfmY0=
+golang.org/x/xerrors v0.0.0-20191011141410-1b5146add898/go.mod h1:I/5z698sn9Ka8TeJc9MKroUUfqBBauWjQqLJ2OPfmY0=
+golang.org/x/xerrors v0.0.0-20200804184101-5ec99f83aff1/go.mod h1:I/5z698sn9Ka8TeJc9MKroUUfqBBauWjQqLJ2OPfmY0=
 gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405 h1:yhCVgyC4o1eVCa2tZl7eS0r+SDo693bJlVdllGtEeKM=
 gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
 gopkg.in/yaml.v3 v3.0.1 h1:fxVm/GzAzEWqLHuvctI91KS9hhNmmWOoWu0XTYJS7CA=
--- a/main.go
+++ b/main.go
@@ -1,7 +1,6 @@
 package main

 import (
-	"context"
 	"embed"
 	"flag"
 	"io/fs"
@@ -11,8 +10,6 @@ import (
 	"github.com/marcopeocchi/yt-dlp-web-ui/server/config"
 )

-type ContextKey interface{}
-
 var (
 	port           int
 	downloadPath   string
@@ -48,9 +45,5 @@ func main() {
 	cfg.DownloadPath(downloadPath)
 	cfg.DownloaderPath(downloaderPath)

-	ctx := context.Background()
-	ctx = context.WithValue(ctx, ContextKey("port"), port)
-	ctx = context.WithValue(ctx, ContextKey("frontend"), frontend)
-
-	server.RunBlocking(ctx)
+	server.RunBlocking(port, frontend)
 }
--- a/server/config/config_singleton.go
+++ b/server/config/config_singleton.go
--- a/server/memory_db.go
+++ b/server/memory_db.go
@@ -13,7 +13,7 @@ import (
 	"github.com/marcopeocchi/yt-dlp-web-ui/server/cli"
 )

-// In-Memory volatile Thread-Safe Key-Value Storage
+// In-Memory Thread-Safe Key-Value Storage with optional persistence
 type MemoryDB struct {
 	table sync.Map
 }
@@ -108,4 +108,14 @@ func (m *MemoryDB) Restore() {
 	feed, _ := os.ReadFile("session.dat")
 	session := Session{}
 	json.Unmarshal(feed, &session)
+
+	for _, proc := range session.Processes {
+		db.table.Store(proc.Id, &Process{
+			id:       proc.Id,
+			url:      proc.Info.URL,
+			Info:     proc.Info,
+			Progress: proc.Progress,
+			mem:      m,
+		})
+	}
 }
--- a/server/process.go
+++ b/server/process.go
@@ -171,14 +171,17 @@ func (p *Process) Kill() error {
 	// has been spawned with setPgid = true. To properly kill
 	// all subprocesses a SIGTERM need to be sent to the correct
 	// process group
-	pgid, err := syscall.Getpgid(p.proc.Pid)
-	if err != nil {
+	if p.proc != nil {
+		pgid, err := syscall.Getpgid(p.proc.Pid)
+		if err != nil {
+			return err
+		}
+		err = syscall.Kill(-pgid, syscall.SIGTERM)
+
+		log.Println("Killed process", p.id)
 		return err
 	}
-	err = syscall.Kill(-pgid, syscall.SIGTERM)
-
-	log.Println("Killed process", p.id)
-	return err
+	return nil
 }

 // Returns the available format for this URL
--- a/server/rest/handlers.go
+++ b/server/rest/handlers.go
@@ -0,0 +1,135 @@
+package rest
+
+import (
+	"crypto/sha256"
+	"encoding/hex"
+	"errors"
+	"io/fs"
+	"net/http"
+	"os"
+	"path/filepath"
+	"strings"
+
+	"github.com/gofiber/fiber/v2"
+	"github.com/marcopeocchi/yt-dlp-web-ui/server/config"
+)
+
+type DirectoryEntry struct {
+	Name        string `json:"name"`
+	Path        string `json:"path"`
+	SHASum      string `json:"shaSum"`
+	IsDirectory bool   `json:"isDirectory"`
+}
+
+func isValidEntry(d fs.DirEntry) bool {
+	return !strings.HasPrefix(d.Name(), ".") &&
+		!strings.HasSuffix(d.Name(), ".part") &&
+		!strings.HasSuffix(d.Name(), ".ytdl")
+}
+
+func shaSumString(path string) string {
+	h := sha256.New()
+	h.Write([]byte(path))
+	return hex.EncodeToString(h.Sum(nil))
+}
+
+func walkDir(root string) (*[]DirectoryEntry, error) {
+	files := []DirectoryEntry{}
+
+	dirs, err := os.ReadDir(root)
+	if err != nil {
+		return nil, err
+	}
+
+	for _, d := range dirs {
+		if !isValidEntry(d) {
+			continue
+		}
+
+		path := filepath.Join(root, d.Name())
+
+		files = append(files, DirectoryEntry{
+			Path:        path,
+			Name:        d.Name(),
+			SHASum:      shaSumString(path),
+			IsDirectory: d.IsDir(),
+		})
+	}
+
+	return &files, err
+}
+
+type ListRequest struct {
+	SubDir string `json:"subdir"`
+}
+
+func ListDownloaded(ctx *fiber.Ctx) error {
+	root := config.Instance().GetConfig().DownloadPath
+	req := new(ListRequest)
+
+	err := ctx.BodyParser(req)
+	if err != nil {
+		return err
+	}
+
+	files, err := walkDir(filepath.Join(root, req.SubDir))
+	if err != nil {
+		return err
+	}
+
+	ctx.Status(http.StatusOK)
+	return ctx.JSON(files)
+}
+
+type DeleteRequest = DirectoryEntry
+
+func DeleteFile(ctx *fiber.Ctx) error {
+	req := new(DeleteRequest)
+
+	err := ctx.BodyParser(req)
+	if err != nil {
+		return err
+	}
+
+	sum := shaSumString(req.Path)
+	if sum != req.SHASum {
+		return errors.New("shasum mismatch")
+	}
+
+	err = os.Remove(req.Path)
+	if err != nil {
+		return err
+	}
+
+	ctx.Status(fiber.StatusOK)
+	return ctx.JSON("ok")
+}
+
+type PlayRequest struct {
+	Path string
+}
+
+func PlayFile(ctx *fiber.Ctx) error {
+	path := ctx.Query("path")
+
+	if path == "" {
+		return errors.New("inexistent path")
+	}
+
+	decoded, err := hex.DecodeString(path)
+	if err != nil {
+		return err
+	}
+
+	root := config.Instance().GetConfig().DownloadPath
+
+	//TODO: further path / file validations
+
+	if strings.Contains(filepath.Dir(string(decoded)), root) {
+		ctx.SendStatus(fiber.StatusPartialContent)
+		return ctx.SendFile(string(decoded))
+	}
+
+	ctx.Status(fiber.StatusOK)
+	return ctx.SendStatus(fiber.StatusUnauthorized)
+}
--- a/server/rx/extensions.go
+++ b/server/rx/extensions.go
@@ -11,6 +11,7 @@ import "time"
 //
 // Debounce emits a string from the source channel only after a particular
 // time span determined a Go Interval
+//
 // --A--B--CD--EFG-------|>
 //
 //	-t->                 |>
--- a/server/server.go
+++ b/server/server.go
@@ -8,18 +8,22 @@ import (
 	"log"
 	"net/http"
 	"net/rpc"
+	"os"
+	"os/signal"
+	"syscall"
+	"time"

 	"github.com/gofiber/fiber/v2"
 	"github.com/gofiber/fiber/v2/middleware/cors"
 	"github.com/gofiber/fiber/v2/middleware/filesystem"
 	"github.com/gofiber/websocket/v2"
+	"github.com/marcopeocchi/yt-dlp-web-ui/server/rest"
 )

 var db MemoryDB

-func RunBlocking(ctx context.Context) {
-	fe := ctx.Value("frontend").(fs.SubFS)
-	port := ctx.Value("port").(int)
+func RunBlocking(port int, frontend fs.FS) {
+	db.Restore()

 	service := new(Service)
 	rpc.Register(service)
@@ -28,12 +32,28 @@ func RunBlocking(ctx context.Context) {

 	app.Use(cors.New())
 	app.Use("/", filesystem.New(filesystem.Config{
-		Root: http.FS(fe),
+		Root: http.FS(frontend),
 	}))

+	app.Get("/settings", func(c *fiber.Ctx) error {
+		return c.Redirect("/")
+	})
+	app.Get("/archive", func(c *fiber.Ctx) error {
+		return c.Redirect("/")
+	})
+
+	app.Post("/downloaded", rest.ListDownloaded)
+
+	app.Post("/delete", rest.DeleteFile)
+	app.Get("/play", rest.PlayFile)
+
 	// RPC handlers
 	// websocket
 	app.Get("/ws-rpc", websocket.New(func(c *websocket.Conn) {
+		c.WriteMessage(websocket.TextMessage, []byte(`{
+			"status": "connected"
+		}`))
+
 		for {
 			mtype, reader, err := c.NextReader()
 			if err != nil {
@@ -52,12 +72,43 @@ func RunBlocking(ctx context.Context) {
 	app.Post("/http-rpc", func(c *fiber.Ctx) error {
 		reader := c.Context().RequestBodyStream()
 		writer := c.Response().BodyWriter()
+
 		res := NewRPCRequest(reader).Call()
 		io.Copy(writer, res)
+
 		return nil
 	})

 	app.Server().StreamRequestBody = true

+	go periodicallyPersist()
+	go gracefulShutdown(app)
+
 	log.Fatal(app.Listen(fmt.Sprintf(":%d", port)))
 }
+
+func gracefulShutdown(app *fiber.App) {
+	ctx, stop := signal.NotifyContext(context.Background(),
+		os.Interrupt,
+		syscall.SIGTERM,
+		syscall.SIGQUIT,
+	)
+
+	go func() {
+		<-ctx.Done()
+		log.Println("shutdown signal received")
+
+		defer func() {
+			db.Persist()
+			stop()
+			app.ShutdownWithTimeout(time.Second * 5)
+		}()
+	}()
+}
+
+func periodicallyPersist() {
+	for {
+		db.Persist()
+		time.Sleep(time.Minute * 5)
+	}
+}
--- a/server/service.go
+++ b/server/service.go
@@ -72,12 +72,15 @@ func (t *Service) Running(args NoArgs, running *Running) error {
 func (t *Service) Kill(args string, killed *string) error {
 	log.Println("Trying killing process with id", args)
 	proc, err := db.Get(args)
+
 	if err != nil {
 		return err
 	}
 	if proc != nil {
 		err = proc.Kill()
 	}
+
+	db.Delete(proc.id)
 	return err
 }
Author	SHA1	Message	Date
marcobaobao	1e0e625d1a	code refactoring, dependencies update	2023-05-26 11:29:59 +02:00
Marco	5b70d25bef	Improved filebrowser (#52 ) * file archive refactor, list dir perf optimization * code refactoring	2023-05-26 11:10:10 +02:00
Marco	8cf130ec23	Merge pull request #51 from marcopeocchi/50-request-for-download-link-and-option-to-delete-downloadded-video 50 request for download link and option to delete downloadded video	2023-05-25 11:42:01 +02:00
marcobaobao	fd0b40ac46	code refactoring, enabled memory db persist to fs.	2023-05-25 11:13:46 +02:00
marcobaobao	acfc5aa064	code refactoring	2023-05-24 13:31:48 +02:00
marcobaobao	b1c6f7248c	code refactoring	2023-05-24 13:31:05 +02:00
marcobaobao	ac6fe98dc8	ui refactor, downloaded files view enabled	2023-05-24 13:29:54 +02:00
marcobaobao	908f4c6636	first implementation of downloaded files viewer	2023-05-24 13:19:04 +02:00
marcobaobao	3737e86de3	backend functions for list, download, and delete local files	2023-05-17 18:32:46 +02:00
Marco	77f9eb0c2a	Update Home.tsx	2023-04-19 18:24:08 +02:00
marcobaobao	e00333a97e	reduced chunks size	2023-04-19 15:01:37 +02:00
marcobaobao	3d86b4c372	bug fix	2023-04-19 14:16:43 +02:00
marcobaobao	fa7cd1a691	code refactoring, switch to rxjs websocket wrapper	2023-04-19 14:14:15 +02:00
marcobaobao	621164589f	Code refactoring and bump deps	2023-04-13 11:13:40 +02:00
Marco	7f602f1e20	Update docker-publish.yml	2023-03-21 22:58:14 +01:00
Marco	5977a57686	Update docker-image.yml	2023-03-21 22:57:43 +01:00