marcopeocchi / yt-dlp-web-ui

A terrible web ui for yt-dlp 🙄. Designed to be self-hosted.

Important

Major frontend refactoring in progress.
I won't add features or fix minor issues until completition.

---

yt-dlp Web UI

A not so terrible web ui for yt-dlp.
Created for the only purpose of fetching videos from my server/nas.

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.

Docker images are available on Docker Hub or ghcr.io.

docker pull marcobaobao/yt-dlp-webui

# latest dev
docker pull ghcr.io/marcopeocchi/yt-dlp-web-ui:latest

app.webm

Integrated File browser

Stream or download your content, easily.

Changelog

05/03/22: Korean translation by kimpig

03/03/22: cut-down image size by switching to Alpine linux based container

01/03/22: Chinese translation by deluxghost

03/02/22: i18n enabled! I need help with the translations :/

27/01/22: Multidownload implemented!

26/01/22: Multiple downloads are being implemented. Maybe by next release they will be there.
Refactoring and JSDoc.

04/01/22: Background jobs now are retrieved!! It's still rudimentary but it leverages on yt-dlp resume feature.

05/05/22: Material UI update.

03/06/22: The most requested feature finally implemented: Format Selection!!

08/06/22: ARM builds.

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.

Settings

The currently avaible settings are:

• Server address
• Switch theme
• Extract audio
• Switch language
• Optional format selection
• Override the output filename
• Override the output path
• Pass custom yt-dlp arguments safely
• Download queue (limit concurrent downloads)

Format selection

This feature is disabled by default as this intended to be used to retrieve the best quality automatically.

To enable it just go to the settings page and enable the Enable video/audio formats selection flag!

Troubleshooting

• It says that it isn't connected/ip in the header is not defined.
  • You must set the server ip address in the settings section (gear icon).
• 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 installation

docker pull marcobaobao/yt-dlp-webui
docker run -d -p 3033:3033 -v <your dir>:/downloads marcobaobao/yt-dlp-webui

Or with docker but building the container manually.

docker build -t yt-dlp-webui .
docker run -d -p 3033:3033 -v <your dir>:/downloads yt-dlp-webui

docker run -d -p 3033:3033 \
  -v <your dir>:/downloads \  
  -v <your dir>:/config \ # optional
  yt-dlp-webui

If you opt to add RPC authentication...

docker run -d \
    -p 3033:3033 \
    -e JWT_SECRET randomsecret
    -v /path/to/downloads:/downloads \
    -v /path/for/config:/config \ # optional
    marcobaobao/yt-dlp-webui \
    --auth \
    --user your_username \
    --pass your_pass

If you wish for limiting the download queue size...

e.g. limiting max 2 concurrent download.

docker run -d \
    -p 3033:3033 \
    -e JWT_SECRET randomsecret
    -v /path/to/downloads:/downloads \
    marcobaobao/yt-dlp-webui \
    --qs 2

Prebuilt binaries installation

# download the latest release from the releases page
mv yt-dlp-webui_linux-[your_system_arch] /usr/local/bin/yt-dlp-webui

# /home/user/downloads as an example and yt-dlp in $PATH
yt-dlp-webui --out /home/user/downloads

# specifying yt-dlp path
yt-dlp-webui --out /home/user/downloads --driver /opt/soemdir/yt-dlp

# specifying using a config file
yt-dlp-webui --conf /home/user/.config/yt-dlp-webui.conf

Arguments

Usage yt-dlp-webui:
  -auth
        Enable RPC authentication
  -conf string
        Config file path
  -driver string
        yt-dlp executable path (default "yt-dlp")
  -out string
        Where files will be saved (default ".")
  -host string
        Host where server will listen at (default "0.0.0.0")
  -port int
        Port where server will listen at (default 3033)
  -qs int
        Download queue size (default 8)
  -user string
        Username required for auth
  -pass string
        Password required for auth

Config file

By running yt-dlp-webui in standalone mode you have the ability to also specify a config file. The config file will overwrite what have been passed as cli argument.

# Simple configuration file for yt-dlp webui

---
# Host where server will listen at (default: "0.0.0.0")
#host: 0.0.0.0

# Port where server will listen at (default: 3033)
port: 8989

# Directory where downloaded files will be stored (default: ".")
downloadPath: /home/ren/archive

# [optional] Enable RPC authentication (requires username and password)
require_auth: true
username: my_username
password: my_random_secret

# [optional] The download queue size (default: 8)
queue_size: 4

# [optional] Full path to the yt-dlp (default: "yt-dlp")
downloaderPath: /usr/local/bin/yt-dlp

# [optional] Directory where the log file will be stored (default: ".")
#log_path: .

# [optional] Directory where the session database file will be stored (default: ".")
#session_file_path: .

Systemd integration

By defining a service file in /etc/systemd/system/yt-dlp-webui.service yt-dlp webui can be launched as in background.

[Unit]
Description=yt-dlp-webui service file
After=network.target

[Service]
User=some_user
ExecStart=/usr/local/bin/yt-dlp-webui --out /mnt/share/downloads --port 8100

[Install]
WantedBy=multi-user.target

systemctl enable yt-dlp-webui
systemctl start yt-dlp-webui

Manual installation

# the dependencies are: python3, ffmpeg, nodejs, psmisc, go.

cd frontend
npm i
npm run build

go build -o yt-dlp-webui main.go

Extendable

You dont'like the Material feel? Want to build your own frontend? We got you covered 🤠

yt-dlp-webui now exposes a nice JSON-RPC 1.0 interface through Websockets and HTTP-POST It is planned to also expose a gRPC server.

Just as an overview, these are the available methods:

• Service.Exec
• Service.Progress
• Service.Formats
• Service.Pending
• Service.Running
• Service.Kill
• Service.KillAll
• Service.Clear

For more information open an issue on GitHub and I will provide more info ASAP.

What yt-dlp-webui is not

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.

yt-dlp-web-ui's Issues

Filfe path with Portainer

Hi,
how can I set the download path with portainer, if I give the command -v /home/user/downloads:/downloads or try to set the path by the volume option in portainer, it does not work. Need some help please.

I need to set the download path to a mounted network share, can this probably be simplified?

If I start it without portainer only with Docker and specify the path with -v /mnt/xyz:/usr/src/lp-w/downloads, then it works strangely. But how do I make it run with Portainer?

ability to change yt-dlp WebUI page title

please ability to change "yt-dlp WebUI"page title

French lang (frontend/src/assets/i18n.yaml)

frontend/src/assets/i18n.yaml

Hello, here's the French translation. Thank you for this Mistletoe, which has found its place alongside "Navidrome".
Bonjour, Voici la traduction francaise pour le fichier :

French :
    urlInput : URL vidéo de YouTube ou d'un autre service pris en charge
    statusTitle : Statut
    statusReady : Prêt
    selectFormatButton : Sélectionner le format
    startButton : Démarrer
    abortAllButton : Abort All
    updateBinButton : Mettre à jour le binaire yt-dlp
    darkThemeButton : Thème sombre
    lightThemeButton : Thème clair
    settingsAnchor : Paramètres
    serverAddressTitle : Adresse du serveur
    serverPortTitle : Port
    extractAudioCheckbox : Extraire l'audio
    noMTimeCheckbox : Ne pas définir le temps de modification du fichier
    bgReminder : Une fois que vous aurez fermé cette page, le téléchargement se poursuivra en arrière-plan.
    toastConnected : 'Connecté à '
    toastUpdated : Mise à jour du binaire yt-dlp !
    formatSelectionEnabler : Active la sélection des formats vidéo/audio
    themeSelect : 'Theme' (Thème)
    languageSelect : 'Langue'
    overridesAnchor : Surcharges
    pathOverrideOption : Activation de la surcharge du chemin de sortie
    filenameOverrideOption : Active la surcharge du nom du fichier de sortie
    customFilename : Nom de fichier personnalisé (laisser vide pour utiliser le nom par défaut)
    customPath : Chemin personnalisé
    customArgs : Activer les args personnalisés yt-dlp (grand pouvoir = grandes responsabilités)
    customArgsInput : Arguments yt-dlp personnalisés
    rpcConnErr : Erreur lors de la connexion au serveur RPC
    splashText : Aucun téléchargement actif
    archiveTitle : Archive
    clipboardAction : URL copiée dans le presse-papiers
    playlistCheckbox : Télécharger la liste de lecture (cela prendra du temps, vous pouvez fermer cette fenêtre après l'avoir validée)
    restartAppMessage : Nécessite un rechargement de la page pour prendre effet
    servedFromReverseProxyCheckbox : Est derrière un sous-dossier de proxy inverse

Is it possible to pass custom options to yt-dlp via settings?

Your awesome project looks more advanced than other yt-dlp web frontends.

There is one missing feature which prevents me from switch over, settings.json only has download_path option.

Is there any way to pass additional options to yt-dlp?

404 when the application put under nginx subdirectory with proxy_pass

I tried to put the application under nginx subdirectory with proxy_pass like following:

location ~/yt-dlp/(.*)$ {
	    proxy_pass http://127.0.0.1:3033/$1;
	    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
	    proxy_set_header Host $http_host;
	    proxy_redirect off;

		proxy_http_version 1.1;
		proxy_set_header Upgrade $http_upgrade;
		proxy_set_header Connection "upgrade";

	    client_max_body_size 20000m;
	    proxy_connect_timeout       3000;
	    proxy_send_timeout          3000;
	    proxy_read_timeout          3000;
	    send_timeout                 @3000;
	}

It will not work because the whole front end use absolute assets address, even after following fix there will still be application internal error.

Patch

Could you help fix this issue?

Need more settings available

Hope more yt-dlp configs can be setup in this app, thanks:)
Such as output combine format to .mkv

Add Advanced Setting to upload youtube-dl/yt-dlp config

Could we have a checkbox and then file upload or textbox to hold a yt-dlp or youtube-dl config? The checkbox would be a "make sure you know what you are doing" and then if it's checked the textbox (preferable) would show the contents of the config file (XDG_HOME).

Cant run on synology nas

Hello, before I go in, this could be my problem.

I am using Docker on Synology NAS.

However, when I run it, an X is displayed at the bottom and there is no response even when I press the start button.
Is there anything I set wrong?

API

Hi,

is there some kind of API to send Links to the UI? I would like to build an iOS shortcut to add a download.

greetings
waldi

Initial Download to Temporary Directory

I know this isn't the default functionality in yt-dlp or youtube-dl, but would it be possible to have the videos download to a temporary location and then move the download location once complete?

So when I click Start the download starts in /temp or something similar and then once the download is complete move to /download.

Update **Korean** translation

Some videos with too long titles cannot be downloaded because the Web UI lacks necessary setting items.

Example: https://www.youtube.com/watch?v=dGYNinKfUR4
The original yt-dlp can solve this problem by changing the file name when downloading with -o.

download path error

PLease how to change download path in details , also please can you do the username and password login , and really thank you for this script , amazing work

Cannot remove/replace link when "select format" was pressed

If I enter a link and then click on "select format", unfortunately I can no longer delete or edit the link.
By clicking on "Abort all" nothing changes.
Only when I switch back and forth to Settings or download the video, the input field is editable again.

Output Arg

So I'm trying to integrate this with Jellyfin using this add on:

https://github.com/ankenyr/jellyfin-youtube-metadata-plugin

The add on requires a specific file name

3Blue1Brown - 20211023 - A_few_of_the_best_math_explainers_from_this_summer [F3Qixy-r_rQ].mkv

I'm trying to use the following arg

--output "%(uploader)s/%(uploader)s - %(upload_date)s - %(title)s/%(uploader)s - %(upload_date)s - %(title)s [%(id)s].%(ext)s"

However nothing is downloaded when I use this --output arg.

Issue with docker : "permission denied: unknown"

Hi,
first of all thanks for your work.

I'm facing an issue with Docker compose:

Recreating ytdlp ... error

ERROR: for ytdlp Cannot start service ytdlp: failed to create shim task: OCI runtime create failed: runc create failed: unable to start container process: exec: "/usr/bin/yt-dlp-webui": permission denied: unknown
ERROR: Encountered errors while bringing up the project.

Seems this append with last build.
Could you help me ?
Thanks

Must read

Hello, marcopeocchi.
First of all very big thank you for this project.
The target of this issue is to create a list of information that needs to know if someone wants to understand or contribute to this project.
What do you recommend reading or watching to figure out this project?
Thank you for your answers.

Update **Chinese** translation

wrong disk usage

yt-dlp-web-ui/server/src/utils/procUtils.ts

Line 47 in 8ee9710

exec("df -P -h | tail -1 | awk '{print $4}'", (_, stdout) => {

Looks like you always fetch the last line of df output, which doesn't make any sense, for example:

 # df -P -h
Filesystem                Size      Used Available Capacity Mounted on
overlay                  15.9T    103.7G     15.0T   1% /
tmpfs                    64.0M         0     64.0M   0% /dev
tmpfs                     7.8G         0      7.8G   0% /sys/fs/cgroup
shm                      64.0M         0     64.0M   0% /dev/shm
/dev/sda3                15.9T    103.7G     15.0T   1% /etc/resolv.conf
/dev/sda3                15.9T    103.7G     15.0T   1% /etc/hostname
/dev/sda3                15.9T    103.7G     15.0T   1% /etc/hosts
/dev/sda3                15.9T    103.7G     15.0T   1% /usr/src/yt-dlp-webui/downloads
tmpfs                     7.8G         0      7.8G   0% /proc/acpi
tmpfs                    64.0M         0     64.0M   0% /proc/kcore
tmpfs                    64.0M         0     64.0M   0% /proc/keys
tmpfs                    64.0M         0     64.0M   0% /proc/timer_list
tmpfs                    64.0M         0     64.0M   0% /proc/sched_debug
tmpfs                     7.8G         0      7.8G   0% /proc/scsi
tmpfs                     7.8G         0      7.8G   0% /sys/firmware

you will get 7.8G

how can I use this?

add proxy option in setting tab

yt-dlp support parameter --proxy URL, but I found I am not able to set that in yt-dlp-web-ui 's setting tab.
could you add that function?

Rights to delete

I installed this container on a raspberry pi and created an smb storage to access the video using my PC, but I ran into a problem, I can't delete the videos buzzed through the container because of access rights. How can this be changed?

Update

Is there a way, to update the software?

Request for download link and option to delete downloaded video

Firstly, I would like to appreciate your work as everything works flawlessly for me. However, I would like to ask if you could add an option to the WebUI to generate/show a download link so that the downloaded video/audio file can be exported/downloaded to any device using the browser. Currently, in order to download from my server, I have to use a FTP client.

Also, I would like to suggest a settings/button to delete the downloaded file from the server instead of manually deleting the downloaded files using CLI rm-rf or FTP client.

These aforementioned features can also be combined together e.g. auto delete downloaded fille from the server after I or a user successfully downloaded the file to a device using a browser or maybe after every x days it gets deleted.

Static custom yt-dlp args

Hi
I mostly use --audio-format mp3 to get the same format on all files while downloading playlist, is there a way to set those settings in the setting, not so I have to enter it every time I want to download anything?

Folder on playlist download

Is it possible to let yt-dlp create a folder on playlist download, so the download folder does not get messy.

Could be done with a simple -o '/%%(playlist_title)s/%%(title)s.%%(ext)s'

How can use yt-dlp-web-ui on AlpineLinux via Prebuilt binaries

Hello , I install yt-dlp-web-ui Prebuilt binaries on AlpineLinux，when I use cmd like 'yt-dlp-webui --out /data --driver /usr/bin/yt-dlp --port 3033' it well done , but when I try to use '/usr/local/bin/yt-dlp-webui --conf /etc/yt-dlp-webui/config.conf' , it is wrong.
then config.conf is

port: 3033
downloadPath: /data
downloaderPath: /usr/bin/yt-dlp
queue_size: 8

so how to write the rc-service of yt-dlp-web-ui for AlpineLinux , thank you!

New Feature - autodl new episode

Hi,
Is it possible to add an auto-download feature when a new episode is posted on a channel?
Thanks

Download Path and more metadata

Hi.

I was wondering if there is some sort of documentation about the rpc api.
I found a little information from your other rpc project and the rpcclient.js, but maybe there is something a little more userfriendly and more complete?
Also would it be possible to add the path of the downloaded media to the rpc response or possibly even the whole yt-dlp metadata?

(task list) show finished task

also show finished downloads, and a user can delete it from the list (but do not delete file), or download the file through the browser

The list of suggestion

Hello. First of all very big thank you for this project.
What do you think about these:

1. Add a date picker to download videos from the channel by specific date range,
   --datebefore DATE Download only videos uploaded on or before
   this date. The date formats accepted is the
   same as --date
   --dateafter DATE Download only videos uploaded on or after
   this date.

2. Add embed-thumbnail to the video file,
   --embed-thumbnail Embed thumbnail in the video as cover art.

3. Write comment of the video,
   --write-comments

4. Add comment viewer,
   https://gist.github.com/pukkandan/ee737fec64822f2552caf3ca4cbf5db7

5. Write a video description of the video,
   --write-description Write video description to a .description file.

6. Download subtitles of the video,
   Select the language and download the srt file of the subtitle.

7. Download the channel or playlist.

8. Automatically download more the new videos from channel or playlist,
   (Can be implemented using CRON and API request).

9. Add Nginx reverse proxy config example.

10. Add example integration with Authelia.

11. Create a download template. Save the download argument to reuse.

12. Ability to download mp4, add drop-down list with video formats,
    480p
    bestvideo[height<=480][ext=mp4]+bestaudio[ext=m4a]/best[height<=480][ext=mp4]
    720p
    bestvideo[height<=720][ext=mp4]+bestaudio[ext=m4a]/best[height<=720][ext=mp4]
    1080p
    bestvideo[height<=1080][ext=mp4]+bestaudio[ext=m4a]/best[height<=1080][ext=mp4]
    4k
    bestvideo[height<=2160][ext=mp4]+bestaudio[ext=m4a]/best[height<=2160][ext=mp4]
    8k
    bestvideo[height<=4320][ext=mp4]+bestaudio[ext=m4a]/best[height<=4320][ext=mp4]

Thank you very much for your answers.

Login Support

I would like to deploy this project on the public network, but without login support, anyone with this URL can call the service to download videos. Is it possible to add login support?

Is there a way to change the default yt-dlp download options?

I am wanting to change the default output settings and define a couple of other options on a permanent basis, is this possible? i know i can do it per download but typing those options every time is tedious

After updating to 2.0.4, Docker images failed to start.

docker pull ghcr.io/marcopeocchi/yt-dlp-web-ui:latest

2023-01-14T20:52:07.622611805Z Node.js v18.12.1
2023-01-14T20:52:10.546057358Z node:internal/modules/cjs/loader:998
2023-01-14T20:52:10.546513156Z   throw err;
2023-01-14T20:52:10.546546692Z   ^
2023-01-14T20:52:10.546569331Z
2023-01-14T20:52:10.546589092Z Error: Cannot find module '/usr/src/yt-dlp-webui/dist/main.js'
2023-01-14T20:52:10.546621895Z     at Module._resolveFilename (node:internal/modules/cjs/loader:995:15)
2023-01-14T20:52:10.546650453Z     at Module._load (node:internal/modules/cjs/loader:841:27)
2023-01-14T20:52:10.546675262Z     at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
2023-01-14T20:52:10.546703896Z     at node:internal/main/run_main_module:23:47 {
2023-01-14T20:52:10.546727440Z   code: 'MODULE_NOT_FOUND',
2023-01-14T20:52:10.546749868Z   requireStack: []
2023-01-14T20:52:10.546769049Z }

HTTPS compatibility

I'm trying to add a reverse proxy in front of the webui with auto https:

[webui docker container] --- [caddy (reverse proxy)] --- [browser]

but some frontend requests always use http/ws under https environment, this behavior will be blocked by modern browsers:

https://developer.mozilla.org/en-US/docs/Web/Security/Mixed_content

While the webui might be supposed to run at local host, I don't see any downside to improve this compatibility

Feature Request: Expose config folder or file on Docker for persistent changes.

According to the provided instructions on this project's GitHub page, by running yt-dlp-webui in standalone mode we, as the users, have the ability to also specify a config file. It would be nice to have the same option under Docker, by exposing the config folder outside the Docker image, like so many projects allow the users to do.

Button remove does not remove file from disc

I just clicked the button "Remove", the file was gone in the ui but it was still on disc.

Expected behaviour: Remove file from disc as well.

No download start anymore

Hi,
I have a problem to download the youtube video at moment i'm getting for all video this message:

Can i made something to fix?

Thanks.

Docker mount point issue

Hi,
I'm using image recommended Docker image.
But download mount point should point to /downloads not /usr/src/yt-dlp-webui/downloads.
Am I right ?
Thanks

Mobile Access

When I browse to the web site in a mobile browser I get a greyed out page with a blue loading circle and it never goes away.

Website works fine on desktop (edge)

I'm using iOS 17 beta 3 with mobile safari.

Feature Request: Data location for requesting client

It would be great if the following options could be available:

1. Download to requesting client directly. Could the downloaded data be redirected to the browser of the client and not download into the container/server at all? Not sure if this is possible without locally caching the file first? The use case I'm thinking of implementing another install for somebody else on their SBC that doesn't have much storage available.

2. As a secondary option, when downloading to the default location on the container/server - could the list of downloads made be presented to the client with an option to download them or delete them?

One workaround would be to present the downloads folder in Apache in the host - but a bit messy having two locations. Or maybe use rclone to sync changes to the client over scp etc.

What should I do if I want to add - cookies?

What should I do if I want to add - cookies?

mp3 format

Hi, Would it be possible to download the video audio in mp3 format? Thank you

Update **Japanese** translation

Download Live Stream Issue

When trying to download a live stream i.e. chaturbate, the stream doesn't get downloaded. The GUI immediate changes the progress bar to green and nothing is downloaded. Also, the entry is blank in the GUI.

[Problematic] Playlist only downloading 1 or 2 videos

I started a playlist download but it downloads only 2 things and the others stay on "Pending"
I don't really know what else to write here, as I couldn't find a log.

Publish an all-in-one docker image?

Hey, this is awesome, thanks for making it! Is there any chance you could put together an all-in-one image that includes this frontend + the yt-dlp binary and publish it to docker hub?

Download to Subfolder?

I roughly organize videos per show and have one folder per show. Currently your UI always downloads to the root folder and I move the file some time later manually. Would it be possible to enumerate all existing folders in the download directory (maybe in a simple <select>) and use that path as target path?

And thanks for this awesome GUI, I love having a possibility to very quickly add a new video to the kids library without firing up a SSH session.

cannot stop main.js gracefully?

I'm using docker deployment, the docker stop takes longer than 10 seconds to be done

I think node dist/main.js ignores SIGTERM, so docker must wait until the default 10s timeout and kill the container

Playlist download is not surpported now?

Playlist download is powerful, may everyone needs it :)