danvics/ytptube
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Merge pull request #188 from arabcoders/dev

Browse source 
Minor frontend improvements
This commit is contained in:
Abdulmohsen 2025-01-30 18:23:46 +03:00 committed by GitHub
commit a1f8245086
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
8 changed files with 123 additions and 97 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
README.md
View file

@ -43,13 +43,12 @@ Your `yt-dlp` config should include the following options for optimal working co
## Run using Docker
```bash
docker run -d --name ytptube -p 8081:8081 -v ./config:/config:rw -v ./downloads:/downloads:rw ghcr.io/arabcoders/ytptube
docker run -d --rm --name ytptube -p 8081:8081 -v ./config:/config:rw -v ./downloads:/downloads:rw ghcr.io/arabcoders/ytptube
```
## Run using docker-compose
## Run using compose file.
```yaml
version: "3.9"
services:
ytptube:
user: "1000:1000"
@ -67,7 +66,7 @@ services:
## Configuration via environment variables
Certain values can be set via environment variables, using the `-e` parameter on the docker command line, or the `environment:` section in docker-compose.
Certain values can be set via environment variables, using the `-e` parameter on the docker command line, or the `environment:` section in `compose.yaml` file.
* __YTP_CONFIG_PATH__: path to where the queue persistence files will be saved. Defaults to `/config` in the docker image, and `./var/config` otherwise.
* __YTP_DOWNLOAD_PATH__: path to where the downloads will be saved. Defaults to `/downloads` in the docker image, and `./var/downloads` otherwise.
@ -99,7 +98,8 @@ Certain values can be set via environment variables, using the `-e` parameter on
* __YTP_PIP_IGNORE_UPDATES__: Do not update the custom pip packages. Defaults to `false`.
* __YTP_BASIC_MODE__: Whether to run WebUI in basic mode. Defaults to `false`. In basic mode, A minimal UI will be shown, the majority of the features will be disabled.
* __YTP_DEFAULT_PRESET__: The default preset to use for the download. Defaults to `default`.
* __YTP_INSTANCE_TITLE__: The title of the instance. Defaults to empty string.
## Running behind a reverse proxy
It's advisable to run YTPTube behind a reverse proxy, if authentication and/or HTTPS support are required.
@ -237,6 +237,11 @@ The `config/ytdlp.json`, is a json file which can be used to alter the default `
]
}
```
The options can be fount at [yt-dlp YoutubeDL.py](https://github.com/yt-dlp/yt-dlp/blob/master/yt_dlp/YoutubeDL.py#L214) file.
And for the postprocessors at [yt-dlp postprocessor](https://github.com/yt-dlp/yt-dlp/tree/master/yt_dlp/postprocessor).
> [!NOTE]
> You can use the `yt-dlp json config` box in the new Download page to convert your cli options to json format.
### presets.json File

4
app/library/config.py
View file

@ -136,6 +136,9 @@ class Config:
default_preset: str = "default"
"The default preset to use when no preset is specified."
instance_title: str | None = None
"The title of the instance."
_manual_vars: tuple = (
"temp_path",
"config_path",
@ -191,6 +194,7 @@ class Config:
"max_workers",
"basic_mode",
"default_preset",
"instance_title",
)
"The variables that are relevant to the frontend."

58
ui/components/NewDownload.vue
View file

@ -70,8 +70,9 @@
placeholder="Uses default output template naming if empty.">
</div>
<span class="help">
All output template naming options can be found at <NuxtLink target="_blank"
to="https://github.com/yt-dlp/yt-dlp#output-template">this page</NuxtLink>.
<span class="icon"><i class="fa-solid fa-info" /></span>
<span>All output template naming options can be found at <NuxtLink target="_blank"
to="https://github.com/yt-dlp/yt-dlp#output-template">this page</NuxtLink>.</span>
</span>
</div>
</div>
@ -80,33 +81,36 @@
<label class="label is-inline" for="ytdlpConfig"
v-tooltip="'Extends current global yt-dlp config. (JSON)'">
JSON yt-dlp config or CLI options.
<NuxtLink v-if="ytdlpConfig && !ytdlpConfig.trim().startsWith('{')" @click="convertOptions()">
Convert to JSON
</NuxtLink>
</label>
<div class="control">
<textarea class="textarea" id="ytdlpConfig" v-model="ytdlpConfig"
:disabled="!socket.isConnected || addInProgress"
:disabled="!socket.isConnected || addInProgress || convertInProgress"
placeholder="--no-embed-metadata --no-embed-thumbnail"></textarea>
</div>
<span class="help">
Some config fields are ignored like <code>format</code> <code>cookiefile</code>, <code>paths</code>,
and <code>outtmpl</code> etc. Available option can be found at <NuxtLink target="_blank"
to="https://github.com/yt-dlp/yt-dlp/blob/a0b19d319a6ce8b7059318fa17a34b144fde1785/yt_dlp/YoutubeDL.py#L194">
this page</NuxtLink>. Warning: Use with caution some of those options can break yt-dlp or the
frontend.
<span class="icon"><i class="fa-solid fa-info" /></span>
<span>Extends current global yt-dlp config with given options. Some fields are ignored like
<code>format</code> <code>cookiefile</code>, <code>paths</code>, and <code>outtmpl</code> etc.
Warning: Use with caution some of those options can break yt-dlp or the frontend.</span>
</span>
</div>
</div>
<div class="column is-6-tablet is-12-mobile">
<div class="field">
<label class="label is-inline" for="ytdlpCookies" v-tooltip="'JSON exported cookies for downloading.'">
yt-dlp Cookies
Cookies
</label>
<div class="control">
<textarea class="textarea" id="ytdlpCookies" v-model="ytdlpCookies"
:disabled="!socket.isConnected || addInProgress"></textarea>
</div>
<span class="help">
Use <NuxtLink target="_blank" to="https://github.com/jrie/flagCookies">
flagCookies</NuxtLink> to extract cookies as JSON string.
<span class="icon"><i class="fa-solid fa-info" /></span>
<span>Use <NuxtLink target="_blank" to="https://github.com/jrie/flagCookies">
flagCookies</NuxtLink> to extract cookies as JSON string.</span>
</span>
</div>
</div>
@ -157,25 +161,12 @@ const downloadPath = useStorage('downloadPath', null)
const url = useStorage('downloadUrl', null)
const showAdvanced = useStorage('show_advanced', false)
const addInProgress = ref(false)
const convertInProgress = ref(false)
const addDownload = async () => {
// -- send request to convert cli options to JSON
if (ytdlpConfig.value && !ytdlpConfig.value.trim().startsWith('{')) {
const response = await request('/api/yt-dlp/convert', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ args: ytdlpConfig.value }),
});
const data = await response.json()
if (200 !== response.status) {
toast.error(`Error: (${response.status}): ${data.error}`)
return
}
ytdlpConfig.value = JSON.stringify(data, null, 2)
await convertOptions()
}
if (ytdlpConfig.value) {
@ -242,6 +233,21 @@ const unlockDownload = async stream => {
}
}
const convertOptions = async () => {
if (convertInProgress.value) {
return
}
try {
convertInProgress.value = true
ytdlpConfig.value = await convertCliOptions(ytdlpConfig.value)
} catch (e) {
toast.error(e.message)
} finally {
convertInProgress.value = false
}
}
onMounted(() => {
socket.on('status', statusHandler)
socket.on('error', unlockDownload)

46
ui/components/TaskForm.vue
View file

@ -127,7 +127,8 @@
<div class="column is-6-tablet is-12-mobile">
<div class="field">
<label class="label is-inline" for="config" v-tooltip="'Extends current global yt-dlp config. (JSON)'">
JSON yt-dlp config or CLI options.
JSON yt-dlp config or CLI options. <NuxtLink v-if="form.config && !form.config.trim().startsWith('{')"
@click="convertOptions()">Convert to JSON</NuxtLink>
</label>
<div class="control">
<textarea class="textarea" id="config" v-model="form.config" :disabled="addInProgress"
@ -135,8 +136,9 @@
</div>
<span class="help">
<span class="icon"><i class="fa-solid fa-info" /></span>
<span>Extends current global yt-dlp config with given options. If CLI options are given, they will be
converted pre-saving.</span>
<span> Extends current global yt-dlp config with given options. Some fields are ignored like
<code>format</code> <code>cookiefile</code>, <code>paths</code>, and <code>outtmpl</code> etc.
Warning: Use with caution some of those options can break yt-dlp or the frontend.</span>
</span>
</div>
</div>
@ -193,6 +195,7 @@ import { request } from '~/utils/index'
const emitter = defineEmits(['cancel', 'submit']);
const toast = useToast();
const config = useConfigStore();
const convertInProgress = ref(false);
const props = defineProps({
reference: {
@ -249,26 +252,10 @@ const checkInfo = async () => {
return;
}
// -- send request to convert cli options to JSON
if (form.config && form.config.length > 2 && !form.config.trim().startsWith('{')) {
const response = await request('/api/yt-dlp/convert', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ args: form.config }),
});
const data = await response.json()
if (200 !== response.status) {
toast.error(`Error: (${response.status}): ${data.error}`)
return
}
form.config = JSON.stringify(data, null, 4)
if (form.config && !form.config.trim().startsWith('{')) {
await convertOptions();
}
// -- check config
if (form.config) {
try {
form.config = JSON.parse(form.config)
@ -278,7 +265,6 @@ const checkInfo = async () => {
}
}
// -- check cookies syntax
if (form.cookies) {
try {
JSON.parse(form.cookies);
@ -290,4 +276,20 @@ const checkInfo = async () => {
emitter('submit', { reference: toRaw(props.reference), task: toRaw(form) });
}
const convertOptions = async () => {
if (convertInProgress.value) {
return
}
try {
convertInProgress.value = true
form.config = await convertCliOptions(form.config)
} catch (e) {
toast.error(e.message)
} finally {
convertInProgress.value = false
}
}
</script>

65
ui/layouts/default.vue
View file

@ -1,46 +1,28 @@
<template>
<div id="main_container" class="container">
<nav class="navbar is-mobile is-dark">
<div class="navbar-brand pl-5">
<div class="navbar-brand pl-5 is-hidden-mobile">
<NuxtLink class="navbar-item has-tooltip-bottom" to="/"
v-tooltip="socket.isConnected ? 'Connected' : 'Connecting'">
<span>
<span class="icon"> <i class="fas fa-home" /></span>
<span :class="socket.isConnected ? 'has-text-success' : 'has-text-danger'"><b>YTPTube</b></span>
<span :class="socket.isConnected ? 'has-text-success' : 'has-text-danger'">
<b>YTPTube</b>
</span>
<span v-if="config?.app?.instance_title">: {{ config.app.instance_title }}</span>
</span>
</NuxtLink>
</div>
<div class="navbar-end is-flex" style="flex-flow:wrap">
<div class="navbar-item">
<div class="navbar-item is-hidden-tablet">
<NuxtLink class="button is-dark has-tooltip-bottom" to="/" v-tooltip.bottom="'Downloads'">
<span class="icon"><i class="fa-solid fa-download" /></span>
<span :class="socket.isConnected ? 'has-text-success' : 'has-text-danger'" class="icon"><i
class="fa-solid fa-home" /></span>
</NuxtLink>
</div>
<div class="navbar-item has-dropdown is-unselectable" :class="{ 'is-active': theme_open }"
@click.prevent="openCloseTheme" v-tooltip.bottom="'Change Theme'">
<a class="navbar-link is-arrowless">
<span class="icon"><i class="fas fa-repeat" /></span>
</a>
<div class="navbar-dropdown">
<a class="navbar-item" :class="{ 'is-selected': 'auto' === selectedTheme }" @click="selectTheme('auto')">
<span class="icon"><i class="fas fa-sync" /></span>
<span>Auto</span>
</a>
<hr class="navbar-divider">
<a class="navbar-item" :class="{ 'is-selected': 'light' === selectedTheme }" @click="selectTheme('light')">
<span class="icon"><i class="fas fa-sun" /></span>
<span>Light</span>
</a>
<a class="navbar-item" :class="{ 'is-selected': 'dark' === selectedTheme }" @click="selectTheme('dark')">
<span class="icon"><i class="fas fa-moon" /></span>
<span>Dark</span>
</a>
</div>
</div>
<div class="navbar-item" v-if="!config.app.basic_mode">
<NuxtLink class="button is-dark has-tooltip-bottom" to="/console" v-tooltip.bottom="'Terminal'">
<span class="icon"><i class="fa-solid fa-terminal" /></span>
@ -59,6 +41,21 @@
</NuxtLink>
</div>
<div class="navbar-item">
<button class="button is-dark has-tooltip-bottom" v-tooltip.bottom="'Switch to Light theme'"
v-if="'auto' == selectedTheme" @click="selectTheme('light')">
<span class="icon has-text-warning"><i class="fas fa-sun" /></span>
</button>
<button class="button is-dark has-tooltip-bottom" v-tooltip.bottom="'Switch to Dark theme'"
v-if="'light' == selectedTheme" @click="selectTheme('dark')">
<span class="icon"><i class="fas fa-moon" /></span>
</button>
<button class="button is-dark has-tooltip-bottom" v-tooltip.bottom="'Switch to auto theme'"
v-if="'dark' == selectedTheme" @click="selectTheme('auto')">
<span class="icon"><i class="fas fa-microchip" /></span>
</button>
</div>
<div class="navbar-item">
<button class="button is-dark" @click="reloadPage">
<span class="icon"><i class="fas fa-refresh"></i></span>
@ -101,8 +98,6 @@ const Year = new Date().getFullYear()
const selectedTheme = useStorage('theme', 'auto')
const socket = useSocketStore()
const config = useConfigStore()
const theme_open = ref(false)
const theme_inner_click = ref(false)
const applyPreferredColorScheme = scheme => {
if (!scheme || 'auto' === scheme) {
@ -165,23 +160,9 @@ watch(selectedTheme, value => {
const reloadPage = () => window.location.reload()
const selectTheme = theme => {
theme_inner_click.value = true
theme_open.value = false
console.log('selectedTheme', selectedTheme.value, theme_open.value)
if (theme === selectedTheme.value) {
return
}
selectedTheme.value = theme
if ('auto' === theme) {
return reloadPage()
}
}
const openCloseTheme = () => {
if (theme_inner_click.value) {
theme_inner_click.value = false
return
}
theme_open.value = !theme_open.value
}
</script>

8
ui/pages/index.vue
View file

@ -9,7 +9,8 @@
.navbar-item.is-hoverable:hover .navbar-dropdown {
display: block;
}
.navbar-item.has-dropdown{
.navbar-item.has-dropdown {
padding: 0.5rem 0.75rem;
}
</style>
@ -20,7 +21,10 @@
<span class="title is-4">
<span class="icon-text">
<span class="icon"><i class="fa-solid fa-download" /></span>
<span>Downloads</span>
<span class="is-hidden-mobile">Downloads</span>
<span class="is-hidden-tablet">
{{ config?.app?.instance_title ? config.app.instance_title : 'Downloads' }}
</span>
</span>
</span>

1
ui/stores/ConfigStore.js
View file

@ -14,6 +14,7 @@ const CONFIG_KEYS = {
has_cookies: false,
basic_mode: true,
default_preset: 'default',
instance_title: null,
},
presets: [
{

23
ui/utils/index.js
View file

@ -381,6 +381,28 @@ const formatBytes = (bytes, decimals = 2) => {
return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`
}
/**
* Convert options to JSON
*
* @param {string} opts
*
* @returns {Promise<string>}
*/
const convertCliOptions = async opts => {
const response = await request('/api/yt-dlp/convert', {
method: 'POST',
body: JSON.stringify({ args: opts }),
});
const data = await response.json()
if (200 !== response.status) {
throw new Error(`Error: (${response.status}): ${data.error}`)
}
return JSON.stringify(data, null, 2)
}
export {
ag_set,
ag,
@ -402,4 +424,5 @@ export {
getQueryParams,
makeDownload,
formatBytes,
convertCliOptions,
}