Update Dockerfile

Create LICENSE.md

.github/workflows/docker-image.yml

@@ -1,4 +1,4 @@
-name: Docker Image CI
+name: Docker Image CI (Dockerhub)
 
 on:
   push:
@@ -7,11 +7,8 @@ on:
     branches: [ master ]
 
 jobs:
-
   build:
-
     runs-on: ubuntu-latest
-
     steps:
     - uses: actions/checkout@v2
     - name: Login to Docker Hub
@@ -20,7 +17,10 @@ jobs:
         DOCKER_PASSWORD: ${{secrets.DOCKER_HUB_PASSWORD}}
       run: |
         docker login -u $DOCKER_USER -p $DOCKER_PASSWORD
+    - name: Install buildx
+      uses: crazy-max/ghaction-docker-buildx@v1
+      with:
+        version: latest
     - name: Build the Docker image
-      run: docker build . --file Dockerfile --tag ${{secrets.DOCKER_HUB_USERNAME}}/yt-dlp-webui:latest
-    - name: Publish the Docker image
-      run: docker push ${{secrets.DOCKER_HUB_USERNAME}}/yt-dlp-webui:latest
+      run: docker buildx build . --file Dockerfile --tag ${{secrets.DOCKER_HUB_USERNAME}}/yt-dlp-webui:latest --push --platform linux/amd64,linux/arm/v7,linux/arm64
+

.github/workflows/docker-publish.yml

@@ -1,4 +1,4 @@
-name: Docker
+name: Docker (ghcr.io)
 
 # This workflow uses actions that are not certified by GitHub.
 # They are provided by a third-party and are governed by
@@ -6,12 +6,11 @@ name: Docker
 # documentation.
 
 on:
-#  schedule:
-#    - cron: '39 13 * * *'
+  release:
+    branches: [ master ]
+    tags: [ 'v*.*.*' ]
   push:
     branches: [ master ]
-    # Publish semver tags as releases.
-    tags: [ 'v*.*.*' ]
   pull_request:
     branches: [ master ]
 

Dockerfile

@@ -1,20 +1,35 @@
-FROM alpine:3.17
+# Multi stage build Dockerfile
+
+# There's no point in using the edge (development branch of alpine)
+FROM alpine:3.17 AS build
 # folder structure
-WORKDIR /usr/src/yt-dlp-webui/downloads
-VOLUME /usr/src/yt-dlp-webui/downloads
 WORKDIR /usr/src/yt-dlp-webui
 # install core dependencies
-RUN apk update
-RUN apk add curl wget psmisc ffmpeg nodejs npm go yt-dlp
-# copy srcs
+RUN apk update && \
+    apk add nodejs npm go
+# copia la salsa
 COPY . .
-# install node dependencies
+# build frontend
 WORKDIR /usr/src/yt-dlp-webui/frontend
-RUN npm i
+RUN npm install
 RUN npm run build
-# install go dependencies
+# build backend + incubator
 WORKDIR /usr/src/yt-dlp-webui
 RUN go build -o yt-dlp-webui
-# expose and run
+
+
+FROM alpine:3.17
+
+WORKDIR /downloads
+VOLUME /downloads
+
+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
+
 EXPOSE 3033
-CMD [ "yt-dlp-webui" , "--out", "./downloads" ]
+CMD [ "./yt-dlp-webui" , "--out", "/downloads" ]

LICENSE.md

@@ -0,0 +1,373 @@
+Mozilla Public License Version 2.0
+==================================
+
+1. Definitions
+--------------
+
+1.1. "Contributor"
+    means each individual or legal entity that creates, contributes to
+    the creation of, or owns Covered Software.
+
+1.2. "Contributor Version"
+    means the combination of the Contributions of others (if any) used
+    by a Contributor and that particular Contributor's Contribution.
+
+1.3. "Contribution"
+    means Covered Software of a particular Contributor.
+
+1.4. "Covered Software"
+    means Source Code Form to which the initial Contributor has attached
+    the notice in Exhibit A, the Executable Form of such Source Code
+    Form, and Modifications of such Source Code Form, in each case
+    including portions thereof.
+
+1.5. "Incompatible With Secondary Licenses"
+    means
+
+    (a) that the initial Contributor has attached the notice described
+        in Exhibit B to the Covered Software; or
+
+    (b) that the Covered Software was made available under the terms of
+        version 1.1 or earlier of the License, but not also under the
+        terms of a Secondary License.
+
+1.6. "Executable Form"
+    means any form of the work other than Source Code Form.
+
+1.7. "Larger Work"
+    means a work that combines Covered Software with other material, in
+    a separate file or files, that is not Covered Software.
+
+1.8. "License"
+    means this document.
+
+1.9. "Licensable"
+    means having the right to grant, to the maximum extent possible,
+    whether at the time of the initial grant or subsequently, any and
+    all of the rights conveyed by this License.
+
+1.10. "Modifications"
+    means any of the following:
+
+    (a) any file in Source Code Form that results from an addition to,
+        deletion from, or modification of the contents of Covered
+        Software; or
+
+    (b) any new file in Source Code Form that contains any Covered
+        Software.
+
+1.11. "Patent Claims" of a Contributor
+    means any patent claim(s), including without limitation, method,
+    process, and apparatus claims, in any patent Licensable by such
+    Contributor that would be infringed, but for the grant of the
+    License, by the making, using, selling, offering for sale, having
+    made, import, or transfer of either its Contributions or its
+    Contributor Version.
+
+1.12. "Secondary License"
+    means either the GNU General Public License, Version 2.0, the GNU
+    Lesser General Public License, Version 2.1, the GNU Affero General
+    Public License, Version 3.0, or any later versions of those
+    licenses.
+
+1.13. "Source Code Form"
+    means the form of the work preferred for making modifications.
+
+1.14. "You" (or "Your")
+    means an individual or a legal entity exercising rights under this
+    License. For legal entities, "You" includes any entity that
+    controls, is controlled by, or is under common control with You. For
+    purposes of this definition, "control" means (a) the power, direct
+    or indirect, to cause the direction or management of such entity,
+    whether by contract or otherwise, or (b) ownership of more than
+    fifty percent (50%) of the outstanding shares or beneficial
+    ownership of such entity.
+
+2. License Grants and Conditions
+--------------------------------
+
+2.1. Grants
+
+Each Contributor hereby grants You a world-wide, royalty-free,
+non-exclusive license:
+
+(a) under intellectual property rights (other than patent or trademark)
+    Licensable by such Contributor to use, reproduce, make available,
+    modify, display, perform, distribute, and otherwise exploit its
+    Contributions, either on an unmodified basis, with Modifications, or
+    as part of a Larger Work; and
+
+(b) under Patent Claims of such Contributor to make, use, sell, offer
+    for sale, have made, import, and otherwise transfer either its
+    Contributions or its Contributor Version.
+
+2.2. Effective Date
+
+The licenses granted in Section 2.1 with respect to any Contribution
+become effective for each Contribution on the date the Contributor first
+distributes such Contribution.
+
+2.3. Limitations on Grant Scope
+
+The licenses granted in this Section 2 are the only rights granted under
+this License. No additional rights or licenses will be implied from the
+distribution or licensing of Covered Software under this License.
+Notwithstanding Section 2.1(b) above, no patent license is granted by a
+Contributor:
+
+(a) for any code that a Contributor has removed from Covered Software;
+    or
+
+(b) for infringements caused by: (i) Your and any other third party's
+    modifications of Covered Software, or (ii) the combination of its
+    Contributions with other software (except as part of its Contributor
+    Version); or
+
+(c) under Patent Claims infringed by Covered Software in the absence of
+    its Contributions.
+
+This License does not grant any rights in the trademarks, service marks,
+or logos of any Contributor (except as may be necessary to comply with
+the notice requirements in Section 3.4).
+
+2.4. Subsequent Licenses
+
+No Contributor makes additional grants as a result of Your choice to
+distribute the Covered Software under a subsequent version of this
+License (see Section 10.2) or under the terms of a Secondary License (if
+permitted under the terms of Section 3.3).
+
+2.5. Representation
+
+Each Contributor represents that the Contributor believes its
+Contributions are its original creation(s) or it has sufficient rights
+to grant the rights to its Contributions conveyed by this License.
+
+2.6. Fair Use
+
+This License is not intended to limit any rights You have under
+applicable copyright doctrines of fair use, fair dealing, or other
+equivalents.
+
+2.7. Conditions
+
+Sections 3.1, 3.2, 3.3, and 3.4 are conditions of the licenses granted
+in Section 2.1.
+
+3. Responsibilities
+-------------------
+
+3.1. Distribution of Source Form
+
+All distribution of Covered Software in Source Code Form, including any
+Modifications that You create or to which You contribute, must be under
+the terms of this License. You must inform recipients that the Source
+Code Form of the Covered Software is governed by the terms of this
+License, and how they can obtain a copy of this License. You may not
+attempt to alter or restrict the recipients' rights in the Source Code
+Form.
+
+3.2. Distribution of Executable Form
+
+If You distribute Covered Software in Executable Form then:
+
+(a) such Covered Software must also be made available in Source Code
+    Form, as described in Section 3.1, and You must inform recipients of
+    the Executable Form how they can obtain a copy of such Source Code
+    Form by reasonable means in a timely manner, at a charge no more
+    than the cost of distribution to the recipient; and
+
+(b) You may distribute such Executable Form under the terms of this
+    License, or sublicense it under different terms, provided that the
+    license for the Executable Form does not attempt to limit or alter
+    the recipients' rights in the Source Code Form under this License.
+
+3.3. Distribution of a Larger Work
+
+You may create and distribute a Larger Work under terms of Your choice,
+provided that You also comply with the requirements of this License for
+the Covered Software. If the Larger Work is a combination of Covered
+Software with a work governed by one or more Secondary Licenses, and the
+Covered Software is not Incompatible With Secondary Licenses, this
+License permits You to additionally distribute such Covered Software
+under the terms of such Secondary License(s), so that the recipient of
+the Larger Work may, at their option, further distribute the Covered
+Software under the terms of either this License or such Secondary
+License(s).
+
+3.4. Notices
+
+You may not remove or alter the substance of any license notices
+(including copyright notices, patent notices, disclaimers of warranty,
+or limitations of liability) contained within the Source Code Form of
+the Covered Software, except that You may alter any license notices to
+the extent required to remedy known factual inaccuracies.
+
+3.5. Application of Additional Terms
+
+You may choose to offer, and to charge a fee for, warranty, support,
+indemnity or liability obligations to one or more recipients of Covered
+Software. However, You may do so only on Your own behalf, and not on
+behalf of any Contributor. You must make it absolutely clear that any
+such warranty, support, indemnity, or liability obligation is offered by
+You alone, and You hereby agree to indemnify every Contributor for any
+liability incurred by such Contributor as a result of warranty, support,
+indemnity or liability terms You offer. You may include additional
+disclaimers of warranty and limitations of liability specific to any
+jurisdiction.
+
+4. Inability to Comply Due to Statute or Regulation
+---------------------------------------------------
+
+If it is impossible for You to comply with any of the terms of this
+License with respect to some or all of the Covered Software due to
+statute, judicial order, or regulation then You must: (a) comply with
+the terms of this License to the maximum extent possible; and (b)
+describe the limitations and the code they affect. Such description must
+be placed in a text file included with all distributions of the Covered
+Software under this License. Except to the extent prohibited by statute
+or regulation, such description must be sufficiently detailed for a
+recipient of ordinary skill to be able to understand it.
+
+5. Termination
+--------------
+
+5.1. The rights granted under this License will terminate automatically
+if You fail to comply with any of its terms. However, if You become
+compliant, then the rights granted under this License from a particular
+Contributor are reinstated (a) provisionally, unless and until such
+Contributor explicitly and finally terminates Your grants, and (b) on an
+ongoing basis, if such Contributor fails to notify You of the
+non-compliance by some reasonable means prior to 60 days after You have
+come back into compliance. Moreover, Your grants from a particular
+Contributor are reinstated on an ongoing basis if such Contributor
+notifies You of the non-compliance by some reasonable means, this is the
+first time You have received notice of non-compliance with this License
+from such Contributor, and You become compliant prior to 30 days after
+Your receipt of the notice.
+
+5.2. If You initiate litigation against any entity by asserting a patent
+infringement claim (excluding declaratory judgment actions,
+counter-claims, and cross-claims) alleging that a Contributor Version
+directly or indirectly infringes any patent, then the rights granted to
+You by any and all Contributors for the Covered Software under Section
+2.1 of this License shall terminate.
+
+5.3. In the event of termination under Sections 5.1 or 5.2 above, all
+end user license agreements (excluding distributors and resellers) which
+have been validly granted by You or Your distributors under this License
+prior to termination shall survive termination.
+
+************************************************************************
+*                                                                      *
+*  6. Disclaimer of Warranty                                           *
+*  -------------------------                                           *
+*                                                                      *
+*  Covered Software is provided under this License on an "as is"       *
+*  basis, without warranty of any kind, either expressed, implied, or  *
+*  statutory, including, without limitation, warranties that the       *
+*  Covered Software is free of defects, merchantable, fit for a        *
+*  particular purpose or non-infringing. The entire risk as to the     *
+*  quality and performance of the Covered Software is with You.        *
+*  Should any Covered Software prove defective in any respect, You     *
+*  (not any Contributor) assume the cost of any necessary servicing,   *
+*  repair, or correction. This disclaimer of warranty constitutes an   *
+*  essential part of this License. No use of any Covered Software is   *
+*  authorized under this License except under this disclaimer.         *
+*                                                                      *
+************************************************************************
+
+************************************************************************
+*                                                                      *
+*  7. Limitation of Liability                                          *
+*  --------------------------                                          *
+*                                                                      *
+*  Under no circumstances and under no legal theory, whether tort      *
+*  (including negligence), contract, or otherwise, shall any           *
+*  Contributor, or anyone who distributes Covered Software as          *
+*  permitted above, be liable to You for any direct, indirect,         *
+*  special, incidental, or consequential damages of any character      *
+*  including, without limitation, damages for lost profits, loss of    *
+*  goodwill, work stoppage, computer failure or malfunction, or any    *
+*  and all other commercial damages or losses, even if such party      *
+*  shall have been informed of the possibility of such damages. This   *
+*  limitation of liability shall not apply to liability for death or   *
+*  personal injury resulting from such party's negligence to the       *
+*  extent applicable law prohibits such limitation. Some               *
+*  jurisdictions do not allow the exclusion or limitation of           *
+*  incidental or consequential damages, so this exclusion and          *
+*  limitation may not apply to You.                                    *
+*                                                                      *
+************************************************************************
+
+8. Litigation
+-------------
+
+Any litigation relating to this License may be brought only in the
+courts of a jurisdiction where the defendant maintains its principal
+place of business and such litigation shall be governed by laws of that
+jurisdiction, without reference to its conflict-of-law provisions.
+Nothing in this Section shall prevent a party's ability to bring
+cross-claims or counter-claims.
+
+9. Miscellaneous
+----------------
+
+This License represents the complete agreement concerning the subject
+matter hereof. If any provision of this License is held to be
+unenforceable, such provision shall be reformed only to the extent
+necessary to make it enforceable. Any law or regulation which provides
+that the language of a contract shall be construed against the drafter
+shall not be used to construe this License against a Contributor.
+
+10. Versions of the License
+---------------------------
+
+10.1. New Versions
+
+Mozilla Foundation is the license steward. Except as provided in Section
+10.3, no one other than the license steward has the right to modify or
+publish new versions of this License. Each version will be given a
+distinguishing version number.
+
+10.2. Effect of New Versions
+
+You may distribute the Covered Software under the terms of the version
+of the License under which You originally received the Covered Software,
+or under the terms of any subsequent version published by the license
+steward.
+
+10.3. Modified Versions
+
+If you create software not governed by this License, and you want to
+create a new license for such software, you may create and use a
+modified version of this License if you rename the license and remove
+any references to the name of the license steward (except to note that
+such modified license differs from this License).
+
+10.4. Distributing Source Code Form that is Incompatible With Secondary
+Licenses
+
+If You choose to distribute Source Code Form that is Incompatible With
+Secondary Licenses under the terms of this version of the License, the
+notice described in Exhibit B of this License must be attached.
+
+Exhibit A - Source Code Form License Notice
+-------------------------------------------
+
+  This Source Code Form is subject to the terms of the Mozilla Public
+  License, v. 2.0. If a copy of the MPL was not distributed with this
+  file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+If it is not possible or desirable to put the notice in a particular
+file, then You may include the notice in a location (such as a LICENSE
+file in a relevant directory) where a recipient would be likely to look
+for such a notice.
+
+You may add additional accurate notices of copyright ownership.
+
+Exhibit B - "Incompatible With Secondary Licenses" Notice
+---------------------------------------------------------
+
+  This Source Code Form is "Incompatible With Secondary Licenses", as
+  defined by the Mozilla Public License, v. 2.0.

README.md

@@ -7,17 +7,21 @@ Intended to be used with docker and in standalone mode. 😎👍
 
 Developed to be as lightweight as possible (because my server is basically an intel atom sbc). 
 
-The bottleneck remains yt-dlp startup time (until yt-dlp will provide a rpc interface).
+The bottleneck remains yt-dlp startup time.
 
-**I strongly recomend the ghcr build instead of docker hub one.**
+**Docker images are available on [Docker Hub](https://hub.docker.com/r/marcobaobao/yt-dlp-webui) or [ghcr.io](https://github.com/marcopeocchi/yt-dlp-web-ui/pkgs/container/yt-dlp-web-ui)**.
 
-```shell
-docker pull ghcr.io/marcopeocchi/yt-dlp-web-ui:master
+```sh
+docker pull marcobaobao/yt-dlp-webui:latest
+```
+```sh
+docker pull ghcr.io/marcopeocchi/yt-dlp-web-ui:latest
 ```
 
----
+![](https://i.ibb.co/RCpfg7q/image.png)
+![](https://i.ibb.co/N2749CD/image.png)
 
-Changelog:
+## Changelog
 ```
 05/03/22: Korean translation by kimpig
 
@@ -40,15 +44,11 @@ Refactoring and JSDoc.
 
 08/06/22: ARM builds.
 
-28/02/22: Reworked resume download feature. Now it's pratically instantaneous. It no longer stops and restarts each process, references to each process are saved in memory.
+28/06/22: Reworked resume download feature. Now it's pratically instantaneous. It no longer stops and restarts each process, references to each process are saved in memory.
 
 12/01/23: Switched from TypeScript to Golang on the backend. It was a great effort but it was worth it.
 ```
 
-
-![](https://i.ibb.co/RCpfg7q/image.png)
-![](https://i.ibb.co/N2749CD/image.png)
-
 ## Settings
 
 The currently avaible settings are:
@@ -85,22 +85,24 @@ Future releases will have:
 -   **The download  doesn't start.**
     - As before server address is not specified or simply yt-dlp process takes a lot of time to fire up. (Forking yt-dlp isn't fast especially if you have a lower-end/low-power NAS/server/desktop where the server is running)
 
-## [Docker](https://github.com/marcopeocchi/yt-dlp-web-ui/pkgs/container/yt-dlp-web-ui/63294924?tag=master) installation
+## [Docker](https://github.com/marcopeocchi/yt-dlp-web-ui/pkgs/container/yt-dlp-web-ui) installation
 ```sh
 # recomended for ARM and x86 devices 
-docker pull ghcr.io/marcopeocchi/yt-dlp-web-ui:master
-docker run -d -p 3022:3022 -v <your dir>:/usr/src/yt-dlp-webui/downloads ghcr.io/marcopeocchi/yt-dlp-web-ui:master
+docker pull ghcr.io/marcopeocchi/yt-dlp-web-ui:latest
+# or
+# docker pull marcobaobao/yt-dlp-webui:latest
+docker run -d -p 3033:3033 -v <your dir>:/downloads ghcr.io/marcopeocchi/yt-dlp-web-ui:latest
 
 # or even
-docker pull ghcr.io/marcopeocchi/yt-dlp-web-ui:master
-docker create --name yt-dlp-webui -p 8082:3022 -v <your dir>:/usr/src/yt-dlp-webui/downloads ghcr.io/marcopeocchi/yt-dlp-web-ui:master
+docker pull ghcr.io/marcopeocchi/yt-dlp-web-ui:latest
+docker create --name yt-dlp-webui -p 8082:3033 -v <your dir>:/downloads ghcr.io/marcopeocchi/yt-dlp-web-ui:latest
 ```
 
 Or with docker but building the container manually.
 
 ```sh
 docker build -t yt-dlp-webui .
-docker run -d -p 3022:3022 -v <your dir>:/usr/src/yt-dlp-webui/downloads yt-dlp-webui
+docker run -d -p 3033:3033 -v <your dir>:/downloads yt-dlp-webui
 ```
 
 ## [Prebuilt binaries](https://github.com/marcopeocchi/yt-dlp-web-ui/releases) installation
@@ -197,4 +199,4 @@ For more information open an issue on GitHub and I will provide more info ASAP.
     - I genuinely don't know. I know that standalone yt-dlp is slow to start up even on my M1 Mac, so....
 
 ## What yt-dlp-webui is not
-`yt-dlp-webui` isn't your ordinary website where downloading stuff from the internet, so don't try asking for links of where this is hosted. It's a self hosted platform for a Linux NAS.
+`yt-dlp-webui` isn't your ordinary website where to download stuff from the internet, so don't try asking for links of where this is hosted. It's a self hosted platform for a Linux NAS.

fetch-yt-dlp.sh

@@ -1,13 +0,0 @@
-#!/bin/sh
-
-echo "Downloading latest yt-dlp build..."
-
-rm -f yt-dlp
-
-RELEASE=$(curl --silent "https://api.github.com/repos/yt-dlp/yt-dlp/releases/latest" | grep '"tag_name":' | sed -E 's/.*"([^"]+)".*/\1/')
-
-wget "https://github.com/yt-dlp/yt-dlp/releases/download/$RELEASE/yt-dlp"
-
-chmod +x yt-dlp
-
-echo "Done!"

frontend/package.json

@@ -1,40 +1,36 @@
 {
   "name": "yt-dlp-webui",
-  "version": "1.1.0",
-  "description": "A terrible webUI for yt-dlp, all-in-one solution.",
+  "version": "2.0.6",
+  "description": "Frontend compontent of yt-dlp-webui",
   "scripts": {
     "dev": "vite",
     "build": "vite build"
   },
-  "author": "marcobaobao",
-  "license": "ISC",
+  "author": "marcopeocchi",
+  "license": "MPL-2.0",
   "dependencies": {
-    "@emotion/react": "^11.9.0",
-    "@emotion/styled": "^11.8.1",
-    "@koa/cors": "^3.3.0",
-    "@mui/icons-material": "^5.6.2",
-    "@mui/material": "^5.6.4",
-    "@reduxjs/toolkit": "^1.8.1",
-    "radash": "^10.6.0",
+    "@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",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-redux": "^8.0.1",
-    "react-router-dom": "^6.3.0",
-    "rxjs": "^7.4.0",
-    "uuid": "^8.3.2"
+    "react-redux": "^8.0.5",
+    "react-router-dom": "^6.7.0",
+    "rxjs": "^7.8.0",
+    "uuid": "^9.0.0"
   },
   "devDependencies": {
-    "@modyfi/vite-plugin-yaml": "^1.0.2",
+    "@modyfi/vite-plugin-yaml": "^1.0.4",
     "@types/node": "^18.11.18",
     "@types/react": "^18.0.21",
-    "@types/react-dom": "^18.0.6",
+    "@types/react-dom": "^18.0.10",
     "@types/react-router-dom": "^5.3.3",
-    "@types/uuid": "^8.3.4",
-    "@vitejs/plugin-react": "^1.3.2",
+    "@types/uuid": "^9.0.0",
+    "@vitejs/plugin-react": "^3.0.1",
     "buffer": "^6.0.3",
-    "path-browserify": "^1.0.1",
-    "process": "^0.11.10",
-    "typescript": "^4.6.4",
-    "vite": "^2.9.10"
+    "typescript": "^4.9.4",
+    "vite": "^4.0.4"
   }
 }

frontend/src/App.tsx

@@ -4,11 +4,13 @@ import {
   Dashboard,
   // Download,
   Menu, Settings as SettingsIcon,
+  FormatListBulleted,
   SettingsEthernet,
   Storage
 } from "@mui/icons-material";
 import {
   Box,
+  CircularProgress,
   createTheme, CssBaseline,
   Divider,
   IconButton, List,
@@ -17,16 +19,16 @@ import {
 } from "@mui/material";
 import { grey } from "@mui/material/colors";
 import ListItemButton from '@mui/material/ListItemButton';
-import { useMemo, useState } from "react";
-import { Provider, useSelector } from "react-redux";
+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 Settings from "./Settings";
 import { RootState, store } from './stores/store';
 import { formatGiB, getWebSocketEndpoint } from "./utils";
 
@@ -35,6 +37,7 @@ function AppContent() {
 
   const settings = useSelector((state: RootState) => state.settings)
   const status = useSelector((state: RootState) => state.status)
+  const dispatch = useDispatch()
 
   const socket = useMemo(() => new WebSocket(getWebSocketEndpoint()), [])
 
@@ -54,6 +57,8 @@ function AppContent() {
     setOpen(!open)
   }
 
+  const Settings = lazy(() => import('./Settings'))
+
   return (
     <ThemeProvider theme={theme}>
       <Router>
@@ -132,6 +137,12 @@ function AppContent() {
                   <ListItemText primary="Home" />
                 </ListItemButton>
               </Link>
+              <ListItemButton onClick={() => dispatch(toggleListView())}>
+                <ListItemIcon>
+                  <FormatListBulleted />
+                </ListItemIcon>
+                <ListItemText primary="List view" />
+              </ListItemButton>
               <Link to={'/settings'} style={
                 {
                   textDecoration: 'none',
@@ -158,7 +169,11 @@ function AppContent() {
             <Toolbar />
             <Routes>
               <Route path="/" element={<Home socket={socket} />} />
-              <Route path="/settings" element={<Settings socket={socket} />} />
+              <Route path="/settings" element={
+                <Suspense fallback={<CircularProgress />}>
+                  <Settings socket={socket} />
+                </Suspense>
+              } />
             </Routes>
           </Box>
         </Box>

frontend/src/Home.tsx

@@ -19,9 +19,10 @@ import {
   Typography
 } from "@mui/material";
 import { Buffer } from 'buffer';
-import { Fragment, useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
-import { StackableResult } from "./components/StackableResult";
+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";
@@ -41,7 +42,7 @@ export default function Home({ socket }: Props) {
   const dispatch = useDispatch()
 
   // ephemeral state
-  const [activeDownloads, setActiveDownloads] = useState(new Array<RPCResult>());
+  const [activeDownloads, setActiveDownloads] = useState<Array<RPCResult>>();
   const [downloadFormats, setDownloadFormats] = useState<IDLMetadata>();
   const [pickedVideoFormat, setPickedVideoFormat] = useState('');
   const [pickedAudioFormat, setPickedAudioFormat] = useState('');
@@ -56,7 +57,7 @@ export default function Home({ socket }: Props) {
   const [url, setUrl] = useState('');
   const [workingUrl, setWorkingUrl] = useState('');
 
-  const [showBackdrop, setShowBackdrop] = useState(false);
+  const [showBackdrop, setShowBackdrop] = useState(true);
   const [showToast, setShowToast] = useState(true);
 
   // memos
@@ -70,6 +71,7 @@ export default function Home({ socket }: Props) {
     socket.onopen = () => {
       dispatch(connected())
       setCustomArgs(localStorage.getItem('last-input-args') ?? '')
+      setFilenameOverride(localStorage.getItem('last-filename-override') ?? '')
     }
   }, [])
 
@@ -104,10 +106,10 @@ export default function Home({ socket }: Props) {
   }, [])
 
   useEffect(() => {
-    if (activeDownloads.length > 0 && showBackdrop) {
+    if (activeDownloads && activeDownloads.length >= 0) {
       setShowBackdrop(false)
     }
-  }, [activeDownloads, showBackdrop])
+  }, [activeDownloads?.length])
 
   useEffect(() => {
     client.directoryTree()
@@ -136,7 +138,7 @@ export default function Home({ socket }: Props) {
 
     setUrl('')
     setWorkingUrl('')
-    setFilenameOverride('')
+    setShowBackdrop(true)
 
     setTimeout(() => {
       resetInput()
@@ -179,6 +181,7 @@ export default function Home({ socket }: Props) {
    */
   const handleFilenameOverrideChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setFilenameOverride(e.target.value)
+    localStorage.setItem('last-filename-override', e.target.value)
   }
 
   /**
@@ -297,6 +300,7 @@ export default function Home({ socket }: Props) {
                       fullWidth
                       label={i18n.t('customFilename')}
                       variant="outlined"
+                      value={fileNameOverride}
                       onChange={handleFilenameOverrideChange}
                       disabled={!status.connected || (settings.formatSelection && downloadFormats != null)}
                     />
@@ -458,25 +462,11 @@ export default function Home({ socket }: Props) {
           </Grid>
         </Grid> : null
       }
-      <Grid container spacing={{ xs: 2, md: 2 }} columns={{ xs: 4, sm: 8, md: 12 }} pt={2}>
-        {
-          activeDownloads.map(download => (
-            <Grid item xs={4} sm={8} md={6} key={download.id}>
-              <Fragment>
-                <StackableResult
-                  title={download.info.title}
-                  thumbnail={download.info.thumbnail}
-                  percentage={download.progress.percentage}
-                  stopCallback={() => abort(download.id)}
-                  resolution={download.info.resolution ?? ''}
-                  speed={download.progress.speed}
-                  size={download.info.filesize_approx ?? 0}
-                />
-              </Fragment>
-            </Grid>
-          ))
-        }
-      </Grid>
+      {
+        settings.listView ?
+          <DownloadsListView downloads={activeDownloads ?? []} abortFunction={abort} /> :
+          <DownloadsCardView downloads={activeDownloads ?? []} abortFunction={abort} />
+      }
       <Snackbar
         open={showToast === status.connected}
         autoHideDuration={1500}

frontend/src/assets/i18n.yaml

@@ -72,15 +72,15 @@ languages:
     toastConnected: '已连接到 '
     toastUpdated: 已更新 yt-dlp 可执行文件！
     formatSelectionEnabler: 启用视频/音频格式选择
-    themeSelect: 'Theme'
-    languageSelect: 'Language'
-    overridesAnchor: Overrides
-    pathOverrideOption: Enable output path overriding
-    filenameOverrideOption: Enable output file name overriding
-    customFilename: Custom filemame (leave blank to use default)
-    customPath: Custom path
-    customArgs: Enable custom yt-dlp args (great power = great responsabilities)
-    customArgsInput: Custom yt-dlp arguments
+    themeSelect: '主题'
+    languageSelect: '语言'
+    overridesAnchor: 覆盖
+    pathOverrideOption: 启用输出路径覆盖
+    filenameOverrideOption: 启用输出文件名覆盖
+    customFilename: 自定义文件名（留空使用默认值）
+    customPath: 自定义路径
+    customArgs: 启用自定义 yt-dlp 参数（能力越大 = 责任越大）
+    customArgsInput: 自定义 yt-dlp 参数
   spanish:
     urlInput: YouTube or other supported service video url
     statusTitle: Status
@@ -188,4 +188,4 @@ languages:
     customFilename: Custom filemame (leave blank to use default)
     customPath: Custom path
     customArgs: Enable custom yt-dlp args (great power = great responsabilities)
-    customArgsInput: Custom yt-dlp arguments
+    customArgsInput: Custom yt-dlp arguments

frontend/src/components/DownloadsCardView.tsx

@@ -0,0 +1,33 @@
+import { Grid } from "@mui/material"
+import { Fragment } from "react"
+import type { RPCResult } from "../types"
+import { StackableResult } from "./StackableResult"
+
+type Props = {
+  downloads: RPCResult[]
+  abortFunction: Function
+}
+
+export function DownloadsCardView({ downloads, abortFunction }: Props) {
+  return (
+    <Grid container spacing={{ xs: 2, md: 2 }} columns={{ xs: 4, sm: 8, md: 12 }} pt={2}>
+      {
+        downloads.map(download => (
+          <Grid item xs={4} sm={8} md={6} key={download.id}>
+            <Fragment>
+              <StackableResult
+                title={download.info.title}
+                thumbnail={download.info.thumbnail}
+                percentage={download.progress.percentage}
+                stopCallback={() => abortFunction(download.id)}
+                resolution={download.info.resolution ?? ''}
+                speed={download.progress.speed}
+                size={download.info.filesize_approx ?? 0}
+              />
+            </Fragment>
+          </Grid>
+        ))
+      }
+    </Grid>
+  )
+}

frontend/src/components/DownloadsListView.tsx

@@ -0,0 +1,70 @@
+import { Button, CircularProgress, Grid, LinearProgress, Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Typography } from "@mui/material"
+import { RPCResult } from "../types"
+import { ellipsis, formatSpeedMiB, roundMiB } from "../utils"
+
+type Props = {
+  downloads: RPCResult[]
+  abortFunction: Function
+}
+
+export function DownloadsListView({ downloads, abortFunction }: Props) {
+  return (
+    <Grid container spacing={{ xs: 2, md: 2 }} columns={{ xs: 4, sm: 8, md: 12 }} pt={2}>
+      <Grid item xs={12}>
+        <TableContainer component={Paper} sx={{ minHeight: '65vh' }} elevation={2}>
+          <Table>
+            <TableHead>
+              <TableRow>
+                <TableCell>
+                  <Typography fontWeight={500} fontSize={15}>Title</Typography>
+                </TableCell>
+                <TableCell>
+                  <Typography fontWeight={500} fontSize={15}>Progress</Typography>
+                </TableCell>
+                <TableCell>
+                  <Typography fontWeight={500} fontSize={15}>Speed</Typography>
+                </TableCell>
+                <TableCell>
+                  <Typography fontWeight={500} fontSize={15}>Size</Typography>
+                </TableCell>
+                <TableCell>
+                  <Typography fontWeight={500} fontSize={15}>Actions</Typography>
+                </TableCell>
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {
+                downloads.map(download => (
+                  <TableRow key={download.id}>
+                    <TableCell>{ellipsis(download.info.title, 80)}</TableCell>
+                    <TableCell>
+                      <LinearProgress
+                        value={
+                          download.progress.percentage === '-1' ? 100 :
+                            Number(download.progress.percentage.replace('%', ''))
+                        }
+                        variant="determinate"
+                        color={download.progress.percentage === '-1' ? 'success' : 'primary'}
+                      />
+                    </TableCell>
+                    <TableCell>{formatSpeedMiB(download.progress.speed)}</TableCell>
+                    <TableCell>{roundMiB(download.info.filesize_approx ?? 0)}</TableCell>
+                    <TableCell>
+                      <Button
+                        variant="contained"
+                        size="small"
+                        onClick={() => abortFunction(download.id)}
+                      >
+                        {download.progress.percentage === '-1' ? 'Remove' : 'Stop'}
+                      </Button>
+                    </TableCell>
+                  </TableRow>
+                ))
+              }
+            </TableBody>
+          </Table>
+        </TableContainer>
+      </Grid>
+    </Grid>
+  )
+}

frontend/src/components/StackableResult.tsx

@@ -13,7 +13,7 @@ import {
   Typography
 } from "@mui/material";
 import { useEffect, useState } from "react";
-import { ellipsis } from "../utils";
+import { ellipsis, formatSpeedMiB, roundMiB } from "../utils";
 
 type Props = {
   title: string,
@@ -42,6 +42,8 @@ export function StackableResult({
     }
   }, [percentage])
 
+  const percentageToNumber = () => isCompleted ? 100 : Number(percentage.replace('%', ''))
+
   const guessResolution = (xByY: string): any => {
     if (!xByY) return null;
     if (xByY.includes('4320')) return (<EightK color="primary" />);
@@ -51,11 +53,6 @@ export function StackableResult({
     return null;
   }
 
-  const percentageToNumber = () => isCompleted ? 100 : Number(percentage.replace('%', ''))
-
-  const roundMiB = (bytes: number) => `${(bytes / 1_000_000).toFixed(2)} MiB`
-  const formatSpeedMiB = (val: number) => `${roundMiB(val)}/s`
-
   return (
     <Card>
       <CardActionArea>

frontend/src/features/core/intl.ts

@@ -1,28 +1,28 @@
 // @ts-nocheck
-import i18n from "../../assets/i18n.yaml";
+import i18n from "../../assets/i18n.yaml"
 
 export default class I18nBuilder {
-    private language: string;
-    private textMap = i18n.languages;
+    private language: string
+    private textMap = i18n.languages
 
     constructor(language: string) {
-        this.language = language;
+        this.language = language
     }
 
     getLanguage(): string {
-        return this.language;
+        return this.language
     }
 
     setLanguage(language: string): void {
-        this.language = language;
+        this.language = language
     }
 
     t(key: string): string {
         const map = this.textMap[this.language]
         if (map) {
-            const translation = map[key];
-            return translation ?? 'caption not defined';
+            const translation = map[key]
+            return translation ?? 'caption not defined'
         }
-        return 'caption not defined';
+        return 'caption not defined'
     }
 }

frontend/src/features/core/rpcClient.ts

@@ -20,10 +20,13 @@ export class RPCClient {
   }
 
   private sendHTTP<T>(req: RPCRequest) {
-    return new Promise<RPCResponse<T>>((resolve, reject) => {
+    return new Promise<RPCResponse<T>>((resolve) => {
       fetch(getHttpRPCEndpoint(), {
         method: 'POST',
-        body: JSON.stringify(req)
+        body: JSON.stringify({
+          id: this.incrementSeq(),
+          ...req
+        })
       })
         .then(res => res.json())
         .then(data => resolve(data))
@@ -59,6 +62,7 @@ export class RPCClient {
 
   public running() {
     this.send({
+      id: this.incrementSeq(),
       method: 'Service.Running',
       params: [],
     })

frontend/src/features/settings/settingsSlice.ts

@@ -14,6 +14,7 @@ export interface SettingsState {
     fileRenaming: boolean
     pathOverriding: boolean
     enableCustomArgs: boolean
+    listView: boolean
 }
 
 const initialState: SettingsState = {
@@ -27,6 +28,7 @@ const initialState: SettingsState = {
     fileRenaming: localStorage.getItem("file-renaming") === "true",
     pathOverriding: localStorage.getItem("path-overriding") === "true",
     enableCustomArgs: localStorage.getItem("enable-custom-args") === "true",
+    listView: localStorage.getItem("listview") === "true",
 }
 
 export const settingsSlice = createSlice({
@@ -73,6 +75,10 @@ export const settingsSlice = createSlice({
             state.enableCustomArgs = action.payload
             localStorage.setItem("enable-custom-args", action.payload.toString())
         },
+        toggleListView: (state) => {
+            state.listView = !state.listView
+            localStorage.setItem("listview", state.listView.toString())
+        },
     }
 })
 
@@ -87,6 +93,7 @@ export const {
     setFileRenaming,
     setPathOverriding,
     setEnableCustomArgs,
+    toggleListView
 } = settingsSlice.actions
 
 export default settingsSlice.reducer

frontend/src/utils.ts

@@ -83,4 +83,7 @@ export function getHttpRPCEndpoint() {
 
 export function formatGiB(bytes: number) {
     return `${(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`

go.mod

@@ -9,6 +9,7 @@ require (
 	github.com/google/uuid v1.3.0
 	github.com/marcopeocchi/fazzoletti v0.0.0-20221114144444-1e802380a7db
 	golang.org/x/sys v0.4.0
+	gopkg.in/yaml.v3 v3.0.1
 )
 
 require (
@@ -23,5 +24,4 @@ require (
 	github.com/valyala/bytebufferpool v1.0.0 // indirect
 	github.com/valyala/fasthttp v1.43.0 // indirect
 	github.com/valyala/tcplisten v1.0.0 // indirect
-	gopkg.in/yaml.v3 v3.0.1 // indirect
 )

go.sum

@@ -56,6 +56,7 @@ golang.org/x/term v0.0.0-20210927222741-03fcf44c2211/go.mod h1:jbD1KX2456YbFQfuX
 golang.org/x/text v0.3.6/go.mod h1:5Zoc/QRtKVWzQhOtBMvqHzDpF6irO9z98xDceosuGiQ=
 golang.org/x/text v0.3.7/go.mod h1:u+2+/6zg+i71rQMx5EYifcz6MCKuco9NR6JIITiCfzQ=
 golang.org/x/tools v0.0.0-20180917221912-90fa682c2a6e/go.mod h1:n7NCudcB/nEzxVGmLbDWY5pfWTLqBcC2KZ6jyYvM4mQ=
+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=
 gopkg.in/yaml.v3 v3.0.1/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=