1005 lines
32 KiB
Vue
1005 lines
32 KiB
Vue
<template>
|
|
<main class="columns mt-2">
|
|
<div class="column is-12">
|
|
<form autocomplete="off" @submit.prevent="addDownload">
|
|
<div class="box">
|
|
<div class="columns is-multiline is-mobile">
|
|
<div class="column is-12">
|
|
<label class="label is-inline is-unselectable" for="url">
|
|
<span class="icon"><i class="fa-solid fa-link" /></span>
|
|
<span
|
|
class="has-tooltip"
|
|
v-tooltip="'Use Shift+Enter to switch to multiline input mode.'"
|
|
>
|
|
URLs separated by newlines or
|
|
<span class="is-bold is-lowercase">{{ getSeparatorsName(separator) }}</span>
|
|
</span>
|
|
</label>
|
|
<div class="field is-grouped">
|
|
<div class="control is-expanded">
|
|
<textarea
|
|
v-if="isMultiLineInput"
|
|
ref="urlTextarea"
|
|
class="textarea"
|
|
id="url"
|
|
:disabled="addInProgress"
|
|
v-model="form.url"
|
|
@keydown="handleKeyDown"
|
|
@input="adjustTextareaHeight"
|
|
style="resize: none; overflow-y: auto; min-height: 38px; max-height: 300px"
|
|
/>
|
|
<input
|
|
v-else
|
|
type="text"
|
|
class="input"
|
|
id="url"
|
|
placeholder="URLs to download"
|
|
:disabled="addInProgress"
|
|
v-model="form.url"
|
|
@keydown="handleKeyDown"
|
|
@paste="handlePaste"
|
|
/>
|
|
</div>
|
|
<div class="control">
|
|
<button
|
|
type="submit"
|
|
class="button is-primary"
|
|
:class="{ 'is-loading': addInProgress }"
|
|
:disabled="addInProgress || !hasValidUrl"
|
|
>
|
|
<span class="icon"><i class="fa-solid fa-plus" /></span>
|
|
<span>Add</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="column is-4-tablet is-12-mobile">
|
|
<label class="label" for="preset">
|
|
<span class="icon"><i class="fa-solid fa-sliders" /></span>
|
|
<span>Preset</span>
|
|
</label>
|
|
<div class="field has-addons">
|
|
<div class="control" @click="show_description = !show_description">
|
|
<label class="button is-static">
|
|
<span class="icon"><i class="fa-solid fa-info-circle" /></span>
|
|
</label>
|
|
</div>
|
|
<div class="control is-expanded">
|
|
<div class="select is-fullwidth">
|
|
<select
|
|
id="preset"
|
|
class="is-fullwidth"
|
|
:disabled="addInProgress || hasFormatInConfig"
|
|
v-model="form.preset"
|
|
v-tooltip.bottom="
|
|
hasFormatInConfig
|
|
? 'Presets are disabled. Format key is present in the command options for yt-dlp.'
|
|
: ''
|
|
"
|
|
>
|
|
<optgroup
|
|
label="Custom presets"
|
|
v-if="config?.presets.filter((p) => !p?.default).length > 0"
|
|
>
|
|
<option
|
|
v-for="cPreset in filter_presets(false)"
|
|
:key="cPreset.name"
|
|
:value="cPreset.name"
|
|
>
|
|
{{ prettyName(cPreset.name) }}
|
|
</option>
|
|
</optgroup>
|
|
<optgroup label="Default presets">
|
|
<option
|
|
v-for="dPreset in filter_presets(true)"
|
|
:key="dPreset.name"
|
|
:value="dPreset.name"
|
|
>
|
|
{{ prettyName(dPreset.name) }}
|
|
</option>
|
|
</optgroup>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="column is-6-tablet is-12-mobile">
|
|
<label class="label" for="folder">
|
|
<span class="icon"><i class="fa-solid fa-save" /></span>
|
|
<span>Download path</span>
|
|
</label>
|
|
<div class="field has-addons">
|
|
<div
|
|
class="control"
|
|
v-tooltip="`Download path relative to: ${config.app.download_path}`"
|
|
>
|
|
<label class="button is-static">
|
|
<span>{{ shortPath(config.app.download_path) }}</span>
|
|
</label>
|
|
</div>
|
|
<div class="control is-expanded">
|
|
<input
|
|
type="text"
|
|
class="input is-fullwidth"
|
|
id="folder"
|
|
v-model="form.folder"
|
|
:placeholder="getDefault('folder', '/')"
|
|
:disabled="addInProgress"
|
|
list="folders"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="column is-align-content-end">
|
|
<button type="button" class="button is-info" @click="showAdvanced = !showAdvanced">
|
|
<span class="icon"><i class="fa-solid fa-cog" /></span>
|
|
<span>Advanced Options</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div
|
|
class="column is-12"
|
|
v-if="show_description && !hasFormatInConfig && get_preset(form.preset)?.description"
|
|
>
|
|
<div class="is-overflow-auto" style="max-height: 150px">
|
|
<div class="is-ellipsis is-clickable" @click="expand_description">
|
|
<span class="icon"><i class="fa-solid fa-info" /></span>
|
|
{{ get_preset(form.preset)?.description }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="columns is-multiline is-mobile" v-if="showAdvanced">
|
|
<div class="column is-2-tablet is-12-mobile">
|
|
<DLInput
|
|
id="force_download"
|
|
type="bool"
|
|
label="Force download"
|
|
icon="fa-solid fa-download"
|
|
v-model="dlFields['--no-download-archive']"
|
|
:disabled="addInProgress"
|
|
description="Ignore archive."
|
|
/>
|
|
</div>
|
|
|
|
<div class="column is-2-tablet is-12-mobile">
|
|
<DLInput
|
|
id="auto_start"
|
|
type="bool"
|
|
label="Auto start"
|
|
v-model="auto_start"
|
|
icon="fa-solid fa-play"
|
|
:disabled="addInProgress"
|
|
description="Download automatically."
|
|
/>
|
|
</div>
|
|
|
|
<div class="column is-2-tablet is-12-mobile">
|
|
<DLInput
|
|
id="no_cache"
|
|
type="bool"
|
|
label="Bypass cache"
|
|
icon="fa-solid fa-broom"
|
|
v-model="dlFields['--no-continue']"
|
|
:disabled="addInProgress"
|
|
description="Remove temporary files."
|
|
/>
|
|
</div>
|
|
|
|
<div class="column is-6-tablet is-12-mobile">
|
|
<DLInput
|
|
id="output_template"
|
|
type="string"
|
|
label="Output template"
|
|
v-model="form.template"
|
|
icon="fa-solid fa-file"
|
|
:disabled="addInProgress"
|
|
:placeholder="
|
|
getDefault('template', config.app.output_template || '%(title)s.%(ext)s')
|
|
"
|
|
>
|
|
<template #help>
|
|
<span class="help is-bold is-unselectable">
|
|
<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>
|
|
</template>
|
|
</DLInput>
|
|
</div>
|
|
|
|
<div class="column is-6-tablet is-12-mobile">
|
|
<div class="field">
|
|
<label class="label is-unselectable" for="cli_options">
|
|
<span class="icon"><i class="fa-solid fa-terminal" /></span>
|
|
<span>Command options for yt-dlp</span>
|
|
</label>
|
|
<TextareaAutocomplete
|
|
id="cli_options"
|
|
v-model="form.cli"
|
|
:options="ytDlpOpt"
|
|
:placeholder="getDefault('cli', '')"
|
|
:disabled="addInProgress"
|
|
/>
|
|
<span class="help is-bold">
|
|
<span class="icon"><i class="fa-solid fa-info" /></span>
|
|
<span>
|
|
<NuxtLink @click="showOptions = true">View all options</NuxtLink>. 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>
|
|
|
|
<div class="column is-6-tablet is-12-mobile">
|
|
<div class="field">
|
|
<label class="label is-unselectable" for="ytdlpCookies">
|
|
<span class="icon"><i class="fa-solid fa-cookie" /></span>
|
|
<span
|
|
>Cookies -
|
|
<NuxtLink @click="cookiesDropzoneRef?.triggerFileSelect()"
|
|
>Upload file</NuxtLink
|
|
>
|
|
</span>
|
|
</label>
|
|
<TextDropzone
|
|
ref="cookiesDropzoneRef"
|
|
id="ytdlpCookies"
|
|
v-model="form.cookies"
|
|
:disabled="addInProgress"
|
|
@error="(msg: string) => toast.error(msg)"
|
|
:placeholder="
|
|
getDefault(
|
|
'cookies',
|
|
'Leave empty to use default cookies. Or drag & drop a cookie file here.',
|
|
)
|
|
"
|
|
/>
|
|
<span class="help is-bold">
|
|
<span class="icon"><i class="fa-solid fa-info" /></span>
|
|
<span
|
|
>Use the
|
|
<NuxtLink
|
|
target="_blank"
|
|
to="https://github.com/yt-dlp/yt-dlp/wiki/FAQ#how-do-i-pass-cookies-to-yt-dlp"
|
|
>
|
|
Recommended addon</NuxtLink
|
|
>
|
|
to export cookies.
|
|
<span class="has-text-danger"
|
|
>The cookies MUST be in Netscape HTTP Cookie format.</span
|
|
>
|
|
</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<template v-if="config.dl_fields.length > 0">
|
|
<div
|
|
class="column is-6-tablet is-12-mobile"
|
|
v-for="(fi, index) in sortedDLFields"
|
|
:key="fi.id || `dlf-${index}`"
|
|
>
|
|
<DLInput
|
|
:id="fi?.id || `dlf-${index}`"
|
|
:type="fi.kind"
|
|
:description="fi.description"
|
|
:label="fi.name"
|
|
:icon="fi.icon"
|
|
v-model="dlFields[fi.field]"
|
|
:field="fi.field"
|
|
:disabled="addInProgress"
|
|
/>
|
|
</div>
|
|
</template>
|
|
<div class="column is-12 is-hidden-tablet">
|
|
<Dropdown icons="fa-solid fa-cogs" label="Actions">
|
|
<NuxtLink class="dropdown-item" to="/dl_fields">
|
|
<span class="icon has-text-purple"><i class="fa-solid fa-plus" /></span>
|
|
<span>Custom Fields</span>
|
|
</NuxtLink>
|
|
<hr class="dropdown-divider" />
|
|
|
|
<NuxtLink
|
|
class="dropdown-item"
|
|
@click="emitter('getInfo', form.url, form.preset, form.cli)"
|
|
>
|
|
<span class="icon has-text-info"><i class="fa-solid fa-info" /></span>
|
|
<span>yt-dlp Information</span>
|
|
</NuxtLink>
|
|
|
|
<hr class="dropdown-divider" v-if="config.app.console_enabled" />
|
|
<NuxtLink
|
|
class="dropdown-item"
|
|
@click="runCliCommand"
|
|
v-if="config.app.console_enabled"
|
|
>
|
|
<span class="icon has-text-warning"><i class="fa-solid fa-terminal" /></span>
|
|
<span>Run CLI</span>
|
|
</NuxtLink>
|
|
|
|
<NuxtLink
|
|
class="dropdown-item"
|
|
@click="testDownloadOptions"
|
|
v-if="config.app.console_enabled"
|
|
>
|
|
<span class="icon has-text-success"><i class="fa-solid fa-flask" /></span>
|
|
<span>Show compiled yt-dlp options</span>
|
|
</NuxtLink>
|
|
|
|
<hr class="dropdown-divider" />
|
|
<NuxtLink class="dropdown-item" @click="resetConfig">
|
|
<span class="icon has-text-danger"><i class="fa-solid fa-rotate-left" /></span>
|
|
<span>Reset local settings</span>
|
|
</NuxtLink>
|
|
</Dropdown>
|
|
</div>
|
|
<div class="column is-12">
|
|
<div class="field is-grouped is-justify-self-end is-hidden-mobile">
|
|
<div class="control">
|
|
<button
|
|
type="button"
|
|
class="button is-purple"
|
|
@click="() => navigateTo('/dl_fields')"
|
|
v-tooltip="'Manage custom fields'"
|
|
>
|
|
<span class="icon"><i class="fa-solid fa-plus" /></span>
|
|
</button>
|
|
</div>
|
|
|
|
<div
|
|
class="control"
|
|
v-if="config.app.console_enabled"
|
|
v-tooltip="'Run directly in console'"
|
|
>
|
|
<button
|
|
type="button"
|
|
class="button is-warning"
|
|
@click="runCliCommand"
|
|
:disabled="!hasValidUrl"
|
|
>
|
|
<span class="icon"><i class="fa-solid fa-terminal" /></span>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="control">
|
|
<button
|
|
type="button"
|
|
class="button is-info"
|
|
v-tooltip="'Get yt-dlp information for the provided URL.'"
|
|
@click="
|
|
emitter('getInfo', splitUrls(form.url || '')[0] || '', form.preset, form.cli)
|
|
"
|
|
:disabled="addInProgress || !hasValidUrl"
|
|
>
|
|
<span class="icon"><i class="fa-solid fa-info" /></span>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="control" v-if="config.app.console_enabled">
|
|
<button
|
|
type="button"
|
|
class="button is-success"
|
|
@click="testDownloadOptions"
|
|
:disabled="!hasValidUrl"
|
|
v-tooltip="'Show compiled yt-dlp options.'"
|
|
>
|
|
<span class="icon"><i class="fa-solid fa-flask" /></span>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="control">
|
|
<button
|
|
type="button"
|
|
class="button is-danger"
|
|
@click="resetConfig"
|
|
:disabled="!!form?.id"
|
|
v-tooltip="'Reset local settings'"
|
|
>
|
|
<span class="icon"><i class="fa-solid fa-rotate-left" /></span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<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>
|
|
|
|
<ModalText v-if="showTestResults" @closeModel="CloseTestResults" :data="testResultsData" />
|
|
</main>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import 'assets/css/bulma-switch.css';
|
|
import { useStorage } from '@vueuse/core';
|
|
import TextareaAutocomplete from '~/components/TextareaAutocomplete.vue';
|
|
import TextDropzone from '~/components/TextDropzone.vue';
|
|
import type { item_request } from '~/types/item';
|
|
import type { AutoCompleteOptions } from '~/types/autocomplete';
|
|
import { prettyName } from '~/utils';
|
|
import { navigateTo } from '#app';
|
|
import { useDialog } from '~/composables/useDialog';
|
|
|
|
const props = defineProps<{ item?: Partial<item_request> }>();
|
|
const emitter = defineEmits<{
|
|
(e: 'getInfo', url: string, preset: string | undefined, cli: string | undefined): void;
|
|
(e: 'clear_form'): void;
|
|
}>();
|
|
const config = useConfigStore();
|
|
const toast = useNotification();
|
|
const dialog = useDialog();
|
|
|
|
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 storedCommand = useStorage<string>('console_command', '');
|
|
|
|
const addInProgress = ref<boolean>(false);
|
|
const showOptions = ref<boolean>(false);
|
|
const showTestResults = ref<boolean>(false);
|
|
const testResultsData = ref<any>(null);
|
|
const dlFieldsExtra = ['--no-download-archive', '--no-continue'];
|
|
const ytDlpOpt = ref<AutoCompleteOptions>([]);
|
|
const cookiesDropzoneRef = ref<InstanceType<typeof TextDropzone> | null>(null);
|
|
const urlTextarea = ref<HTMLTextAreaElement | null>(null);
|
|
|
|
const form = useStorage<item_request>('local_config_v1', {
|
|
id: null,
|
|
url: '',
|
|
preset: config.app.default_preset,
|
|
cookies: '',
|
|
cli: '',
|
|
template: '',
|
|
folder: '',
|
|
extras: {},
|
|
}) as Ref<item_request>;
|
|
|
|
const is_valid_dl_field = (dl_field: string): boolean => {
|
|
if (dlFieldsExtra.includes(dl_field)) {
|
|
return true;
|
|
}
|
|
|
|
if (config.dl_fields && config.dl_fields.length > 0) {
|
|
return config.dl_fields.some((f) => f.field === dl_field);
|
|
}
|
|
|
|
return false;
|
|
};
|
|
|
|
const adjustTextareaHeight = async (): Promise<void> => {
|
|
await nextTick();
|
|
if (urlTextarea.value) {
|
|
urlTextarea.value.style.height = 'auto';
|
|
const newHeight = Math.min(urlTextarea.value.scrollHeight, 300);
|
|
urlTextarea.value.style.height = `${newHeight}px`;
|
|
}
|
|
};
|
|
|
|
const handleKeyDown = async (event: KeyboardEvent): Promise<void> => {
|
|
const target = event.target as HTMLInputElement | HTMLTextAreaElement;
|
|
const isTextarea = target.tagName === 'TEXTAREA';
|
|
if (event.key !== 'Enter') {
|
|
return;
|
|
}
|
|
|
|
if (event.ctrlKey && isTextarea && !hasValidUrl.value) {
|
|
event.preventDefault();
|
|
addDownload();
|
|
return;
|
|
}
|
|
|
|
if (event.shiftKey && !isTextarea) {
|
|
event.preventDefault();
|
|
const cursorPos = target.selectionStart || form.value.url.length;
|
|
form.value.url =
|
|
form.value.url.substring(0, cursorPos) +
|
|
'\n' +
|
|
form.value.url.substring(target.selectionEnd || cursorPos);
|
|
|
|
await nextTick();
|
|
|
|
if (urlTextarea.value) {
|
|
await adjustTextareaHeight();
|
|
urlTextarea.value.setSelectionRange(cursorPos + 1, cursorPos + 1);
|
|
urlTextarea.value.focus();
|
|
}
|
|
}
|
|
};
|
|
|
|
const handlePaste = async (event: ClipboardEvent): Promise<void> => {
|
|
const pastedText = event.clipboardData?.getData('text') || '';
|
|
if (!pastedText.includes('\n')) {
|
|
return;
|
|
}
|
|
|
|
event.preventDefault();
|
|
|
|
const target = event.target as HTMLInputElement;
|
|
const currentValue = form.value.url || '';
|
|
const start = target.selectionStart || currentValue.length;
|
|
const end = target.selectionEnd || currentValue.length;
|
|
form.value.url = currentValue.substring(0, start) + pastedText + currentValue.substring(end);
|
|
|
|
await nextTick();
|
|
|
|
if (urlTextarea.value) {
|
|
await adjustTextareaHeight();
|
|
const newPos = start + pastedText.length;
|
|
urlTextarea.value.setSelectionRange(newPos, newPos);
|
|
urlTextarea.value.focus();
|
|
}
|
|
};
|
|
|
|
const splitUrls = (urlString: string): Array<string> => {
|
|
const lines = urlString.split('\n');
|
|
const urls: string[] = [];
|
|
|
|
lines.forEach((line) =>
|
|
line.split(separator.value).forEach((url) => {
|
|
const trimmed = url.trim();
|
|
if (trimmed) {
|
|
urls.push(trimmed);
|
|
}
|
|
}),
|
|
);
|
|
|
|
return urls;
|
|
};
|
|
|
|
const addDownload = async () => {
|
|
if (form.value.folder) {
|
|
form.value.folder = form.value.folder.trim();
|
|
}
|
|
|
|
let form_cli = (form.value?.cli || '').trim();
|
|
|
|
if (dlFields.value && Object.keys(dlFields.value).length > 0) {
|
|
const joined = [];
|
|
for (const [key, value] of Object.entries(dlFields.value)) {
|
|
if (false === is_valid_dl_field(key)) {
|
|
continue;
|
|
}
|
|
|
|
if ([undefined, null, '', false].includes(value as any)) {
|
|
continue;
|
|
}
|
|
|
|
const keyRegex = new RegExp(`(^|\\s)${key}(\\s|$)`);
|
|
if (form_cli && keyRegex.test(form_cli)) {
|
|
continue;
|
|
}
|
|
|
|
joined.push(true === value ? `${key}` : `${key} ${value}`);
|
|
}
|
|
|
|
if (joined.length > 0) {
|
|
form_cli = form_cli ? `${form_cli} ${joined.join(' ')}` : joined.join(' ');
|
|
}
|
|
}
|
|
|
|
if (form_cli && form_cli.trim()) {
|
|
const options = await convertOptions(form_cli);
|
|
if (null === options) {
|
|
return;
|
|
}
|
|
}
|
|
|
|
const request_data = [] as Array<item_request>;
|
|
|
|
splitUrls(form.value.url).forEach(async (url: string) => {
|
|
const data = {
|
|
url: url,
|
|
preset: form.value.preset || config.app.default_preset,
|
|
folder: form.value.folder,
|
|
template: form.value.template,
|
|
cookies: form.value.cookies,
|
|
cli: form_cli,
|
|
auto_start: auto_start.value,
|
|
} as item_request;
|
|
|
|
if (form.value?.extras && Object.keys(form.value.extras).length > 0) {
|
|
data.extras = form.value.extras;
|
|
}
|
|
|
|
request_data.push(data);
|
|
});
|
|
|
|
try {
|
|
addInProgress.value = true;
|
|
const response = await request('/api/history', {
|
|
method: 'POST',
|
|
body: JSON.stringify(request_data),
|
|
});
|
|
|
|
const data = await response.json();
|
|
if (!response.ok) {
|
|
toast.error(`Error: ${data.error || 'Failed to add download.'}`);
|
|
return;
|
|
}
|
|
|
|
let had_errors = false;
|
|
|
|
if (200 === response.status) {
|
|
data.forEach((item: Record<string, any>) => {
|
|
if (false !== item.status) {
|
|
return;
|
|
}
|
|
|
|
had_errors = true;
|
|
|
|
if (item?.hidden) {
|
|
return;
|
|
}
|
|
|
|
toast.error(`Error: ${item.msg || 'Failed to add download.'}`);
|
|
});
|
|
}
|
|
|
|
if (202 === response.status) {
|
|
toast.success(data.message, { timeout: 2000 });
|
|
}
|
|
|
|
if (false === had_errors) {
|
|
form.value.url = '';
|
|
emitter('clear_form');
|
|
}
|
|
} catch (e: any) {
|
|
console.error(e);
|
|
toast.error(`Error: ${e.message}`);
|
|
} finally {
|
|
addInProgress.value = false;
|
|
}
|
|
};
|
|
|
|
const resetConfig = async () => {
|
|
const { status } = await dialog.confirmDialog({
|
|
title: 'Confirm Action',
|
|
message: `Reset local configuration?`,
|
|
confirmColor: 'is-danger',
|
|
});
|
|
if (!status) {
|
|
return;
|
|
}
|
|
|
|
form.value = {
|
|
url: '',
|
|
preset: config.app.default_preset,
|
|
cookies: '',
|
|
cli: '',
|
|
template: '',
|
|
folder: '',
|
|
extras: {},
|
|
} as item_request;
|
|
dlFields.value = {};
|
|
showAdvanced.value = false;
|
|
toast.success('Local configuration has been reset.');
|
|
};
|
|
|
|
const convertOptions = async (args: string) => {
|
|
try {
|
|
const response = await convertCliOptions(args);
|
|
|
|
if (response.output_template) {
|
|
form.value.template = response.output_template;
|
|
}
|
|
|
|
if (response.download_path) {
|
|
form.value.folder = response.download_path;
|
|
}
|
|
|
|
return response.opts;
|
|
} catch (e: any) {
|
|
toast.error(e.message);
|
|
}
|
|
|
|
return null;
|
|
};
|
|
|
|
onUpdated(async () => {
|
|
await nextTick();
|
|
|
|
if ('' === form.value?.preset) {
|
|
form.value.preset = config.app.default_preset;
|
|
}
|
|
|
|
if (
|
|
config.isLoaded() &&
|
|
form.value?.preset &&
|
|
!config.presets.some((p) => p.name === form.value.preset)
|
|
) {
|
|
form.value.preset = config.app.default_preset;
|
|
}
|
|
});
|
|
|
|
watch(
|
|
() => config.ytdlp_options,
|
|
(newOptions) =>
|
|
(ytDlpOpt.value = newOptions
|
|
.filter((opt) => !opt.ignored)
|
|
.flatMap((opt) =>
|
|
opt.flags
|
|
.filter((flag) => flag.startsWith('--'))
|
|
.map((flag) => ({ value: flag, description: opt.description || '' })),
|
|
)),
|
|
{ immediate: true },
|
|
);
|
|
|
|
onMounted(async () => {
|
|
await nextTick();
|
|
|
|
if ('' === form.value?.preset) {
|
|
form.value.preset = config.app.default_preset;
|
|
}
|
|
|
|
if (form.value?.folder) {
|
|
form.value.folder = form.value.folder.trim();
|
|
await nextTick();
|
|
}
|
|
|
|
if (
|
|
config.isLoaded() &&
|
|
form.value?.preset &&
|
|
!config.presets.some((p) => p.name === form.value.preset)
|
|
) {
|
|
form.value.preset = config.app.default_preset;
|
|
}
|
|
|
|
if (props?.item) {
|
|
const updates: Partial<item_request> = {};
|
|
const keys = Object.keys(props.item) as (keyof item_request)[];
|
|
for (const key of keys) {
|
|
const value = props.item[key];
|
|
updates[key] = key === 'extras' ? JSON.parse(JSON.stringify(value)) : value!;
|
|
}
|
|
form.value = { ...form.value, ...updates };
|
|
emitter('clear_form');
|
|
}
|
|
|
|
await nextTick();
|
|
|
|
if (!separators.some((s) => s.value === separator.value)) {
|
|
separator.value = separators[0]?.value ?? ',';
|
|
}
|
|
|
|
if (isMultiLineInput.value && urlTextarea.value) {
|
|
await adjustTextareaHeight();
|
|
}
|
|
});
|
|
|
|
const runCliCommand = async (): Promise<void> => {
|
|
if (!form.value.url) {
|
|
toast.warning('Please enter a URL first');
|
|
return;
|
|
}
|
|
|
|
if (form.value?.folder) {
|
|
form.value.folder = form.value.folder.trim();
|
|
await nextTick();
|
|
}
|
|
|
|
const { status } = await dialog.confirmDialog({
|
|
title: 'Run CLI Command',
|
|
message: `This will generate a yt-dlp command and run it in the console. Continue?`,
|
|
});
|
|
|
|
if (!status) {
|
|
return;
|
|
}
|
|
|
|
let form_cli = (form.value?.cli || '').trim();
|
|
|
|
if (dlFields.value && Object.keys(dlFields.value).length > 0) {
|
|
const joined = [];
|
|
for (const [key, value] of Object.entries(dlFields.value)) {
|
|
if (false === is_valid_dl_field(key)) {
|
|
continue;
|
|
}
|
|
|
|
if ([undefined, null, '', false].includes(value as any)) {
|
|
continue;
|
|
}
|
|
|
|
const keyRegex = new RegExp(`(^|\\s)${key}(\\s|$)`);
|
|
if (form_cli && keyRegex.test(form_cli)) {
|
|
continue;
|
|
}
|
|
|
|
joined.push(true === value ? `${key}` : `${key} ${value}`);
|
|
}
|
|
|
|
if (joined.length > 0) {
|
|
form_cli = form_cli ? `${form_cli} ${joined.join(' ')}` : joined.join(' ');
|
|
}
|
|
}
|
|
|
|
if (form_cli && form_cli.trim()) {
|
|
const options = await convertOptions(form_cli);
|
|
if (null === options) {
|
|
return;
|
|
}
|
|
}
|
|
|
|
try {
|
|
const resp = await request('/api/yt-dlp/command', {
|
|
method: 'POST',
|
|
body: JSON.stringify({
|
|
url: splitUrls(form.value.url).join(' '),
|
|
preset: form.value.preset,
|
|
folder: form.value.folder,
|
|
cookies: form.value.cookies,
|
|
template: form.value.template,
|
|
cli: form_cli,
|
|
}),
|
|
});
|
|
|
|
const json = (await resp.json()) as { command?: string; error?: string };
|
|
|
|
if (!resp.ok) {
|
|
toast.error(`Error: ${json.error || 'Failed to generate command.'}`);
|
|
return;
|
|
}
|
|
|
|
storedCommand.value = json.command;
|
|
|
|
await nextTick();
|
|
await navigateTo('/console');
|
|
} catch (error) {
|
|
toast.error(
|
|
error instanceof Error ? error.message : 'Failed to create and navigate to command',
|
|
);
|
|
}
|
|
};
|
|
|
|
const testDownloadOptions = async (): Promise<void> => {
|
|
if (!form.value.url) {
|
|
toast.warning('Please enter a URL first');
|
|
return;
|
|
}
|
|
|
|
if (form.value?.folder) {
|
|
form.value.folder = form.value.folder.trim();
|
|
await nextTick();
|
|
}
|
|
|
|
let form_cli = (form.value?.cli || '').trim();
|
|
|
|
if (dlFields.value && Object.keys(dlFields.value).length > 0) {
|
|
const joined = [];
|
|
for (const [key, value] of Object.entries(dlFields.value)) {
|
|
if (false === is_valid_dl_field(key)) {
|
|
continue;
|
|
}
|
|
|
|
if ([undefined, null, '', false].includes(value as any)) {
|
|
continue;
|
|
}
|
|
|
|
const keyRegex = new RegExp(`(^|\\s)${key}(\\s|$)`);
|
|
if (form_cli && keyRegex.test(form_cli)) {
|
|
continue;
|
|
}
|
|
|
|
joined.push(true === value ? `${key}` : `${key} ${value}`);
|
|
}
|
|
|
|
if (joined.length > 0) {
|
|
form_cli = form_cli ? `${form_cli} ${joined.join(' ')}` : joined.join(' ');
|
|
}
|
|
}
|
|
|
|
try {
|
|
const resp = await request('/api/yt-dlp/command?full=true', {
|
|
method: 'POST',
|
|
body: JSON.stringify({
|
|
url: form.value.url,
|
|
preset: form.value.preset,
|
|
folder: form.value.folder,
|
|
cookies: form.value.cookies,
|
|
template: form.value.template,
|
|
cli: form_cli,
|
|
}),
|
|
});
|
|
|
|
const json = await resp.json();
|
|
|
|
if (!resp.ok) {
|
|
toast.error(`Error: ${json.error || 'Failed to generate command.'}`);
|
|
return;
|
|
}
|
|
|
|
testResultsData.value = {
|
|
command: json.command,
|
|
yt_dlp: json.ytdlp,
|
|
};
|
|
showTestResults.value = true;
|
|
} catch (error) {
|
|
toast.error(error instanceof Error ? error.message : 'Failed to test download options');
|
|
}
|
|
};
|
|
|
|
const CloseTestResults = () => {
|
|
showTestResults.value = false;
|
|
testResultsData.value = null;
|
|
};
|
|
|
|
const isMultiLineInput = computed(() => !!form.value.url && form.value.url.includes('\n'));
|
|
const hasFormatInConfig = computed(
|
|
(): boolean => !!form.value.cli?.match(/(?<!\S)(-f|--format)(=|\s)(\S+)/),
|
|
);
|
|
|
|
const filter_presets = (flag: boolean = true) =>
|
|
config.presets.filter((item) => item.default === flag);
|
|
const get_preset = (name: string | undefined) => config.presets.find((item) => item.name === name);
|
|
const expand_description = (e: Event) =>
|
|
toggleClass(e.target as HTMLElement, ['is-ellipsis', 'is-pre-wrap']);
|
|
|
|
const getDefault = (type: 'cookies' | 'cli' | 'template' | 'folder', ret: string = '') => {
|
|
if (false !== hasFormatInConfig.value || !form.value.preset) {
|
|
return ret;
|
|
}
|
|
|
|
const preset = config.presets.find((p) => p.name === form.value.preset);
|
|
|
|
if (!preset) {
|
|
return ret;
|
|
}
|
|
|
|
if (type === 'cookies' && preset.cookies) {
|
|
return preset.cookies;
|
|
}
|
|
|
|
if (type === 'cli' && preset.cli) {
|
|
return preset.cli;
|
|
}
|
|
|
|
if (type === 'template' && preset.template) {
|
|
return preset.template;
|
|
}
|
|
|
|
if (type === 'folder' && preset.folder) {
|
|
return preset.folder.replace(config.app.download_path, '') || ret;
|
|
}
|
|
|
|
return ret;
|
|
};
|
|
|
|
const sortedDLFields = computed(() =>
|
|
[...config.dl_fields].sort((a, b) => (a.order || 0) - (b.order || 0)),
|
|
);
|
|
const hasValidUrl = computed(() => form.value.url && form.value.url.trim().length > 0);
|
|
|
|
watch(isMultiLineInput, async (newValue) => {
|
|
await nextTick();
|
|
if (newValue) {
|
|
await adjustTextareaHeight();
|
|
urlTextarea.value?.focus();
|
|
return;
|
|
}
|
|
const inputElement = document.getElementById('url') as HTMLInputElement;
|
|
inputElement?.focus();
|
|
});
|
|
</script>
|