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

Added built-in reference for yt-dlp options.

Browse source
This commit is contained in:
arabcoders 2025-08-19 22:24:51 +03:00
parent 444e1458be
commit 89d4c026c5
12 changed files with 443 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.vscode/settings.json vendored
View file

@ -98,6 +98,7 @@
"smhd",
"socketio",
"sstr",
"SUPPRESSHELP",
"tebibytes",
"tiktok",
"timespec",

16
app/library/Utils.py
View file

@ -43,7 +43,21 @@ REMOVE_KEYS: list = [
"progress_template": "--progress-template",
"consoletitle": "--console-title",
"progress_with_newline": "--newline",
"forcejson": "-j, --dump-json",
"forcejson": "-j, --dump-single-json",
"opt_update_to": "--update-to",
"opt_ap_list_mso": "--ap-list-mso",
"opt_batch_file": "-a, --batch-file",
"opt_alias": "--alias",
"opt_list_extractors": "--list-extractors",
"opt_version": "--version",
"opt_help": "-h, --help",
"opt_update": "-U, --update",
"opt_list_subtitles": "--list-subs",
"opt_list_thumbnails": "--list-thumbnails",
"opt_list_format": "-F, --list-formats",
"opt_dump_agent": "--dump-user-agent",
"opt_extractor_descriptions": "--extractor-descriptions",
"opt_list_impersonate_targets": "--list-impersonate-targets"
},
]

45
app/library/ytdlp.py
View file

@ -1,3 +1,7 @@
from __future__ import annotations
from typing import Any
import yt_dlp
import app.postprocessors # noqa: F401
@ -12,3 +16,44 @@ class YTDLP(yt_dlp.YoutubeDL):
return None
return super()._delete_downloaded_files(*args, **kwargs)
def ytdlp_options() -> list[dict[str, Any]]:
"""
Collect yt-dlp options and return them in a structured format.
Returns:
list[dict[str, Any]]: A list of dictionaries containing option flags, descriptions,
"""
from yt_dlp.options import create_parser
from app.library.Utils import REMOVE_KEYS
parser = create_parser()
ignored_flags: set[str] = {
f.strip() for group in REMOVE_KEYS for v in group.values() for f in v.split(",") if f.strip()
}
def collect(opts, group: str) -> list[dict[str, Any]]:
return [
{
"flags": list(getattr(opt, "_short_opts", [])) + list(getattr(opt, "_long_opts", [])),
"description": getattr(opt, "help", None),
"group": group,
"ignored": any(
f in ignored_flags for f in getattr(opt, "_short_opts", []) + getattr(opt, "_long_opts", [])
),
}
for opt in opts
if (
(getattr(opt, "_short_opts", []) or getattr(opt, "_long_opts", []))
and getattr(opt, "help", None)
and "SUPPRESSHELP" not in getattr(opt, "help", "")
)
]
return collect(parser.option_list, "root") + [
entry for grp in parser.option_groups for entry in collect(grp.option_list, grp.title or "other")
]

16
app/routes/api/yt_dlp.py
View file

@ -296,3 +296,19 @@ async def archive_recheck(cache: Cache) -> Response:
response.append({id: bool(data.get("id", None)) if isinstance(data, dict) else False})
return web.json_response(data=response, status=web.HTTPOk.status_code)
@route("GET", "api/yt-dlp/options/", "get_options")
async def get_options() -> Response:
"""
Get the yt-dlp CLI options.
Returns:
Response: The response object with the yt-dlp CLI options.
"""
from app.library.ytdlp import ytdlp_options
return web.json_response(
body=json.dumps(ytdlp_options(), indent=4, default=str), status=web.HTTPOk.status_code
)

7
ui/app/assets/css/style.css
View file

@ -357,3 +357,10 @@ table.is-fixed {
div.is-centered {
justify-content: center;
}
.modal-content-max {
width: max-content;
padding: 0;
margin: 0;
}

23
ui/app/components/ConditionForm.vue
View file

@ -59,7 +59,7 @@
<input type="text" class="input" id="name" v-model="form.name" :disabled="addInProgress"
placeholder="For the problematic channel or video name.">
</div>
<span class="help">
<span class="help is-bold">
<span class="icon"><i class="fa-solid fa-info" /></span>
<span>The name that refers to this condition.</span>
</span>
@ -81,7 +81,7 @@
<input type="text" class="input" id="filter" v-model="form.filter" :disabled="addInProgress"
placeholder="availability = 'needs_auth' & channel_id = 'channel_id'">
</div>
<span class="help">
<span class="help is-bold">
<span class="icon"><i class="fa-solid fa-info" /></span>
<span>yt-dlp <code>[--match-filters]</code> logic.</span>
</span>
@ -92,19 +92,20 @@
<div class="field">
<label class="label is-inline" for="cli_options">
<span class="icon"><i class="fa-solid fa-terminal" /></span>
Command options for yt-dlp
<span>
Command options for yt-dlp -
<NuxtLink @click="showOptions = true" v-text="'View Options'" />
</span>
</label>
<div class="control">
<textarea class="textarea is-pre" v-model="form.cli" id="cli_options" :disabled="addInProgress"
placeholder="command options to use, e.g. --proxy 1.2.3.4:3128" />
</div>
<span class="help">
<span class="help is-bold">
<span class="icon"><i class="fa-solid fa-info" /></span>
<span>If the filter is matched, these options will be used.
<span class="has-text-danger">This will override the command options for yt-dlp given with the
URL. it's recommended to use presets and keep that field with url empty if you plan to use this
feature.</span>
</span>
<span>Not all options are supported <NuxtLink target="_blank"
to="https://github.com/arabcoders/ytptube/blob/master/app/library/Utils.py#L26">some are
ignored</NuxtLink>. Use with caution.</span>
</span>
</div>
</div>
@ -202,6 +203,9 @@
</form>
</Modal>
</div>
<Modal v-if="showOptions" @close="showOptions = false" :contentClass="'modal-content-max'">
<YTDLPOptions />
</Modal>
</main>
</template>
@ -233,6 +237,7 @@ const test_data = ref<{
changed: boolean,
data: { status: boolean | null, data: Record<string, any> }
}>({ show: false, url: '', in_progress: false, changed: false, data: { status: null, data: {} } })
const showOptions = ref<boolean>(false)
watch(() => form.filter, () => test_data.value.changed = true)

9
ui/app/components/DLInput.vue
View file

@ -1,8 +1,13 @@
<template>
<div class="field">
<label :for="`dlf-${id}`" class="label is-unselectable">
<span v-if="icon" class="icon"><i :class="icon" /></span>
<span v-tooltip="field ? `yt-dlp option: ${field}` : null" :class="{ 'has-tooltip': field }">{{ label }}</span>
<template v-if="$slots.title">
<slot name="title"></slot>
</template>
<template v-else>
<span v-if="icon" class="icon"><i :class="icon" /></span>
<span v-tooltip="field ? `yt-dlp option: ${field}` : null" :class="{ 'has-tooltip': field }">{{ label }}</span>
</template>
</label>
<div class="control is-expanded" v-if="'string' === type">
<input :id="`dlf-${id}`" :type="type" class="input" v-model="model" :placeholder="placeholder"

12
ui/app/components/Modal.vue
View file

@ -1,9 +1,14 @@
<style>
.model-content {
width: 70vw;
}
</style>
<template>
<div>
<div class="modal is-active">
<div class="model-title" v-if="title" />
<div class="modal-background" @click="emitter('close')"></div>
<div class="modal-content" style="width:70vw;">
<div class="modal-content" :class="contentClass">
<slot />
</div>
<button class="modal-close is-large" aria-label="close" @click="emitter('close')"></button>
@ -22,6 +27,11 @@ defineProps({
default: '',
required: false,
},
contentClass: {
type: String,
default: '',
required: false,
},
})
const handle_event = (e: KeyboardEvent) => {

22
ui/app/components/NewDownload.vue
View file

@ -118,16 +118,18 @@
<div class="column is-6-tablet is-12-mobile">
<DLInput id="cli_options" type="text" label="Command options for yt-dlp" v-model="form.cli"
icon="fa-solid fa-terminal" :disabled="!socket.isConnected || addInProgress">
<template #title>
<span class="icon"><i class="fa-solid fa-terminal" /></span>
<span>Command options for yt-dlp -
<NuxtLink @click="showOptions = true" v-text="'View Options'" />
</span>
</template>
<template #help>
<span class="help is-bold">
<span class="icon"><i class="fa-solid fa-info" /></span>
<span>Check <NuxtLink target="_blank" to="https://github.com/yt-dlp/yt-dlp#general-options">this
page</NuxtLink> for more info. <span class="has-text-danger">Not all options are supported
<NuxtLink target="_blank"
to="https://github.com/arabcoders/ytptube/blob/master/app/library/Utils.py#L26-L48">some are
ignored</NuxtLink>. Use with caution these options can break yt-dlp or the frontend.
</span>
</span>
<span>Not all options are supported <NuxtLink target="_blank"
to="https://github.com/arabcoders/ytptube/blob/master/app/library/Utils.py#L26">some are
ignored</NuxtLink>. Use with caution.</span>
</span>
</template>
</DLInput>
@ -230,6 +232,9 @@
@cancel="() => dialog_confirm.visible = false" />
<DLFields v-if="showFields" @cancel="() => showFields = false" />
<Modal v-if="showOptions" @close="showOptions = false" :contentClass="'modal-content-max'">
<YTDLPOptions />
</Modal>
</main>
</template>
@ -252,10 +257,11 @@ const showAdvanced = useStorage<boolean>('show_advanced', false)
const separator = useStorage<string>('url_separator', separators[0]?.value ?? ',')
const auto_start = useStorage<boolean>('auto_start', true)
const show_description = useStorage<boolean>('show_description', true)
const dlFields = useStorage<Record<string, any>>('dl_fields', {})
const addInProgress = ref<boolean>(false)
const showFields = ref<boolean>(false)
const dlFields = useStorage<Record<string, any>>('dl_fields', {})
const showOptions = ref<boolean>(false)
const dlFieldsExtra = ['--no-download-archive']
const form = useStorage<item_request>('local_config_v1', {

30
ui/app/components/PresetForm.vue
View file

@ -96,7 +96,7 @@
<div class="control">
<input type="text" class="input" id="name" v-model="form.name" :disabled="addInProgress">
</div>
<span class="help">
<span class="help is-bold">
<span class="icon"><i class="fa-solid fa-info" /></span>
<span>The name to refers to this preset of settings.</span>
</span>
@ -113,7 +113,7 @@
<input type="text" class="input" id="folder" placeholder="Leave empty to use default download path"
v-model="form.folder" :disabled="addInProgress" list="folders">
</div>
<span class="help">
<span class="help is-bold">
<span class="icon"><i class="fa-solid fa-info" /></span>
<span>Use this folder if non is given with URL. Leave empty to use default download path. Default
download path <code>{{ config.app.download_path }}</code>.</span>
@ -131,7 +131,7 @@
<input type="text" class="input" id="output_template" :disabled="addInProgress"
placeholder="Leave empty to use default template." v-model="form.template">
</div>
<span class="help">
<span class="help is-bold">
<span class="icon"><i class="fa-solid fa-info" /></span>
<span>Use this output template if non are given with URL. if not set, it will defaults to
<code>{{ config.app.output_template }}</code>.
@ -146,20 +146,19 @@
<div class="column is-6-tablet is-12-mobile">
<div class="field">
<label class="label is-inline" for="cli_options">
<span class="icon"><i class="fa-solid fa-terminal" /></span>
Command options for yt-dlp
<span>Command options for yt-dlp -
<NuxtLink @click="showOptions = true" v-text="'View Options'" />
</span>
</label>
<div class="control">
<textarea class="textarea is-pre" v-model="form.cli" id="cli_options" :disabled="addInProgress"
placeholder="command options to use, e.g. --no-embed-metadata --no-embed-thumbnail" />
</div>
<span class="help">
<span class="help is-bold">
<span class="icon"><i class="fa-solid fa-info" /></span>
<span>yt-dlp cli arguments. Check <NuxtLink target="_blank"
to="https://github.com/yt-dlp/yt-dlp?tab=readme-ov-file#general-options">this page</NuxtLink>.
For more info. <span class="has-text-danger">Not all options are supported some are ignored. Use
with caution those arguments can break yt-dlp or the frontend.</span>
</span>
<span>Not all options are supported <NuxtLink target="_blank"
to="https://github.com/arabcoders/ytptube/blob/master/app/library/Utils.py#L26">some are
ignored</NuxtLink>. Use with caution.</span>
</span>
</div>
</div>
@ -174,7 +173,7 @@
<textarea class="textarea is-pre" id="cookies" v-model="form.cookies" :disabled="addInProgress"
placeholder="Leave empty to use default cookies" />
</div>
<span class="help">
<span class="help is-bold">
<span class="icon"><i class="fa-solid fa-info" /></span>
<span>Use this cookies if non are given with the URL. Use the <NuxtLink target="_blank"
to="https://github.com/yt-dlp/yt-dlp/wiki/FAQ#how-do-i-pass-cookies-to-yt-dlp">
@ -195,7 +194,7 @@
<textarea class="textarea" id="description" v-model="form.description" :disabled="addInProgress"
placeholder="Extras instructions for users to follow" />
</div>
<span class="help">
<span class="help is-bold">
<span class="icon"><i class="fa-solid fa-info" /></span>
<span>Use this field to help users to understand how to use this preset.</span>
</span>
@ -227,6 +226,10 @@
<datalist id="folders" v-if="config?.folders">
<option v-for="dir in config.folders" :key="dir" :value="dir" />
</datalist>
<Modal v-if="showOptions" @close="showOptions = false" :contentClass="'modal-content-max'">
<YTDLPOptions />
</Modal>
</main>
</template>
@ -252,6 +255,7 @@ const form = reactive<Preset>(JSON.parse(JSON.stringify(props.preset)))
const import_string = ref<string>('')
const showImport = useStorage<boolean>('showImport', false)
const selected_preset = ref<string>('')
const showOptions = ref<boolean>(false)
const checkInfo = async (): Promise<void> => {
for (const key of ['name']) {

18
ui/app/components/TaskForm.vue
View file

@ -234,20 +234,20 @@
<div class="field">
<label class="label is-inline" for="cli_options">
<span class="icon"><i class="fa-solid fa-terminal" /></span>
Command options for yt-dlp
<span>Command options for yt-dlp -
<NuxtLink @click="showOptions = true" v-text="'View Options'" />
</span>
</label>
<div class="control">
<textarea type="text" class="textarea is-pre" v-model="form.cli" id="cli_options"
:disabled="addInProgress"
placeholder="command options to use, e.g. --no-embed-metadata --no-embed-thumbnail" />
</div>
<span class="help">
<span class="help is-bold">
<span class="icon"><i class="fa-solid fa-info" /></span>
<span class="is-bold">yt-dlp cli arguments. Check <NuxtLink target="_blank"
to="https://github.com/yt-dlp/yt-dlp?tab=readme-ov-file#general-options">this page</NuxtLink>.
For more info. <span class="has-text-danger">Not all options are supported some are ignored. Use
with caution those arguments can break yt-dlp or the frontend.</span>
</span>
<span>Not all options are supported <NuxtLink target="_blank"
to="https://github.com/arabcoders/ytptube/blob/master/app/library/Utils.py#L26">some are
ignored</NuxtLink>. Use with caution.</span>
</span>
</div>
</div>
@ -297,6 +297,9 @@
<datalist id="folders" v-if="config?.folders">
<option v-for="dir in config.folders" :key="dir" :value="dir" />
</datalist>
<Modal v-if="showOptions" @close="showOptions = false" :contentClass="'modal-content-max'">
<YTDLPOptions />
</Modal>
</main>
</template>
@ -324,6 +327,7 @@ const showImport = useStorage('showImport', false)
const convertInProgress = ref<boolean>(false)
const import_string = ref<string>('')
const showOptions = ref<boolean>(false)
const CHANNEL_REGEX = /^https?:\/\/(?:www\.)?youtube\.com\/(?:(?:channel\/(?<channelId>UC[0-9A-Za-z_-]{22}))|(?:c\/(?<customName>[A-Za-z0-9_-]+))|(?:user\/(?<userName>[A-Za-z0-9_-]+))|(?:@(?<handle>[A-Za-z0-9_-]+)))(?<suffix>\/.*)?\/?$/

285
ui/app/components/YTDLPOptions.vue Normal file
View file

@ -0,0 +1,285 @@
<!-- ui/app/pages/options.vue -->
<template>
<div class="p-1 container" style="border-radius: 0; padding:0">
<div class="box m-2">
<div class="columns is-multiline is-vcentered">
<div class="column is-12 is-6-desktop">
<label class="label is-small">Search</label>
<div class="control has-icons-left">
<input v-model.trim="filters.query" type="text" class="input" placeholder="Filter by flag or description..."
autocomplete="off" />
<span class="icon is-left"><i class="fa-solid fa-magnifying-glass" /></span>
</div>
</div>
<div class="column is-6-tablet is-3-desktop">
<label class="label is-small">Group Filter</label>
<div class="select is-fullwidth">
<select v-model="filters.group">
<option value="">All</option>
<option v-for="g in groupNames" :key="g" :value="g">{{ g }}</option>
</select>
</div>
</div>
<div class="column is-6-tablet is-3-desktop">
<label class="label is-small">Display</label>
<div class="control">
<div class="select is-fullwidth">
<select v-model="displayMode">
<option value="grouped">Grouped</option>
<option value="list">List</option>
</select>
</div>
</div>
</div>
<div class="column is-6-tablet is-3-desktop">
<label class="label is-small">Sort By</label>
<div class="select is-fullwidth">
<select v-model="sortBy">
<option value="flag">Flag</option>
<option value="group">Group</option>
</select>
</div>
</div>
<div class="column is-6-tablet is-3-desktop">
<label class="label is-small">Order</label>
<div class="select is-fullwidth">
<select v-model="sortDir">
<option value="asc">Asc</option>
<option value="desc">Desc</option>
</select>
</div>
</div>
<div class="column is-12 is-6-desktop">
<label class="label is-small">Flags</label>
<div class="buttons are-small">
<button class="button" :class="{ 'is-link': filters.flagKind === 'any' }"
@click="filters.flagKind = 'any'">Any</button>
<button class="button" :class="{ 'is-link': filters.flagKind === 'short' }"
@click="filters.flagKind = 'short'">Short Only (-x)</button>
<button class="button" :class="{ 'is-link': filters.flagKind === 'long' }"
@click="filters.flagKind = 'long'">Long Only (--xyz)</button>
</div>
</div>
</div>
</div>
<div v-if="0 === visible.length" class="has-text-centered has-text-grey">
<p>No options match your criteria.</p>
</div>
<template v-if="'grouped' === displayMode && 0 !== grouped.length">
<section v-for="group in grouped" :key="group.name" class="m-2 mb-5">
<h2 class="title is-6 mb-3">
<span class="icon-text">
<span class="icon"><i class="fa-regular fa-folder-open" /></span>
<span>{{ group.name }} <small class="has-text-grey">({{ group.items.length }})</small></span>
</span>
</h2>
<div class="table-container">
<table class="table is-fullwidth is-striped is-hoverable is-bordered">
<thead>
<tr>
<th style="width: 30%">Flags</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<template v-for="opt in group.items" :key="opt.flags.join('|')">
<tr v-if="!opt.ignored">
<td>
<i class="has-text-primary is-pointer is-pulled-right fa-regular fa-copy is-unselectable"
@click="copyFlag(opt.flags)" />
<div class="is-flex is-align-items-center">
<div class="tags">
<span v-for="f in opt.flags" :key="f" class="tag is-info">{{ f }}</span>
</div>
</div>
</td>
<td>
<span v-if="opt.description && 0 !== opt.description.length">{{ opt.description }}</span>
<span v-else class="has-text-grey">—</span>
</td>
</tr>
</template>
</tbody>
</table>
</div>
</section>
</template>
<template v-else>
<div class="table-container">
<table class="table is-fullwidth is-striped is-hoverable is-bordered m-2">
<thead>
<tr>
<th style="width: 30%">Flags</th>
<th style="width: 20%">Group</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<template v-for="opt in visible" :key="opt.flags.join('|')">
<tr v-if="!opt.ignored">
<td>
<i class="has-text-primary is-pointer is-pulled-right fa-regular fa-copy is-unselectable"
@click="copyFlag(opt.flags)" />
<div class="is-flex is-align-items-center">
<div class="tags">
<span v-for="f in opt.flags" :key="f" class="tag is-info">{{ f }}</span>
</div>
</div>
</td>
<td class="is-bold">
{{ opt.group || 'root' }}
</td>
<td>
<span v-if="opt.description && 0 !== opt.description.length">{{ opt.description }}</span>
<span v-else class="has-text-grey">—</span>
</td>
</tr>
</template>
</tbody>
</table>
</div>
</template>
</div>
</template>
<script setup lang="ts">
import { useStorage } from '@vueuse/core'
type YTDLPOption = {
flags: string[],
description: string | null,
group: string | null,
ignored: boolean,
}
const isLoading = ref(false)
const options = ref<YTDLPOption[]>([])
const displayMode = useStorage<'grouped' | 'list'>('opts_display', 'grouped')
const sortBy = useStorage<'flag' | 'group'>('opts_sort_by', 'flag')
const sortDir = useStorage<'asc' | 'desc'>('opts_sort_dir', 'asc')
const filters = reactive({
query: '',
group: '',
flagKind: 'any' as 'any' | 'short' | 'long',
})
const reload = async (): Promise<void> => {
try {
isLoading.value = true
const resp = await request('/api/yt-dlp/options', { credentials: 'include' })
if (!resp.ok) {
return
}
const data = await resp.json()
if (Array.isArray(data)) {
options.value = data as YTDLPOption[]
}
} finally {
isLoading.value = false
}
}
const copyFlag = async (flags: string[]): Promise<void> => {
const longFlag = flags.find(f => f.startsWith('--'))
if (!longFlag) {
return
}
copyText(longFlag)
}
onMounted(async () => await reload())
const groupNames = computed<string[]>(() => {
const s = new Set<string>()
for (const o of options.value) {
s.add(o.group || 'root')
}
return Array.from(s).sort((a, b) => a.localeCompare(b))
})
const filtered = computed<YTDLPOption[]>(() => {
const q = filters.query.toLowerCase()
const g = filters.group
return options.value.filter((o) => {
if (g && (o.group || 'root') !== g) {
return false
}
if ('short' === filters.flagKind && !o.flags.some((f) => /^-\w(,|$)|^-\w$/.test(f))) {
return false
}
if ('long' === filters.flagKind && !o.flags.some((f) => /^--[a-zA-Z0-9][\w-]*/.test(f))) {
return false
}
if (0 !== q.length) {
const hay = [o.flags.join(' '), o.description || '', o.group || 'root'].join(' ').toLowerCase()
if (-1 === hay.indexOf(q)) {
return false
}
}
return true
})
})
const sorted = computed<YTDLPOption[]>(() => {
const dir = 'asc' === sortDir.value ? 1 : -1
const arr = [...filtered.value]
arr.sort((a, b) => {
if ('group' === sortBy.value) {
const ga = (a.group || 'root').localeCompare(b.group || 'root')
if (0 !== ga) {
return ga * dir
}
}
const fa = (a.flags[0] || '').localeCompare(b.flags[0] || '')
return fa * dir
})
return arr
})
const visible = computed<YTDLPOption[]>(() => sorted.value)
const grouped = computed<{ name: string, items: YTDLPOption[] }[]>(() => {
const map = new Map<string, YTDLPOption[]>()
for (const o of visible.value) {
const key = o.group || 'root'
if (!map.has(key)) {
map.set(key, [])
}
map.get(key)!.push(o)
}
const out = Array.from(map.entries()).map(([name, items]) => {
items.sort((a, b) => (a.flags[0] || '').localeCompare(b.flags[0] || ''))
return { name, items }
})
out.sort((a, b) => a.name.localeCompare(b.name))
return out
})
</script>
<style scoped>
.table td,
.table th {
vertical-align: top;
}
</style>