462 lines
17 KiB
Vue
462 lines
17 KiB
Vue
<template>
|
|
<main class="columns mt-2 is-multiline">
|
|
<div class="column is-12">
|
|
<form autocomplete="off" id="presetForm" @submit.prevent="checkInfo()">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<div class="card-header-title is-text-overflow is-block">
|
|
<span class="icon-text">
|
|
<span class="icon"><i class="fa-solid" :class="reference ? 'fa-cog' : 'fa-plus'" /></span>
|
|
<span>{{ reference ? 'Edit' : 'Add' }}</span>
|
|
</span>
|
|
</div>
|
|
<div class="card-header-icon" v-if="reference">
|
|
<button type="button" @click="showImport = !showImport">
|
|
<span class="icon"><i class="fa-solid" :class="{
|
|
'fa-arrow-down': !showImport,
|
|
'fa-arrow-up': showImport,
|
|
}" /></span>
|
|
<span>{{ showImport ? 'Hide' : 'Show' }} import</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card-content">
|
|
|
|
<div class="columns is-multiline is-mobile">
|
|
|
|
<div class="column is-12" v-if="showImport || !reference">
|
|
<label class="label is-inline" for="import_string">
|
|
Import string
|
|
</label>
|
|
|
|
<div class="field has-addons">
|
|
<div class="control has-icons-left is-expanded">
|
|
<input type="text" class="input" id="import_string" v-model="import_string" autocomplete="off">
|
|
<span class="icon is-small is-left"><i class="fa-solid fa-t" /></span>
|
|
</div>
|
|
|
|
<div class="control">
|
|
<button class="button is-primary" :disabled="!import_string" type="button" @click="importItem">
|
|
<span class="icon"><i class="fa-solid fa-add" /></span>
|
|
<span>Import</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<span class="help">
|
|
<span class="icon"><i class="fa-solid fa-info" /></span>
|
|
<span>You can use this field to populate the data, using shared string.</span>
|
|
</span>
|
|
</div>
|
|
|
|
<div class="column is-6-tablet is-12-mobile">
|
|
<div class="field">
|
|
<label class="label is-inline" for="name" v-text="'Name'" />
|
|
<div class="control has-icons-left">
|
|
<input type="text" class="input" id="name" v-model="form.name" :disabled="addInProgress">
|
|
<span class="icon is-small is-left"><i class="fa-solid fa-n" /></span>
|
|
</div>
|
|
<span class="help">
|
|
<span class="icon"><i class="fa-solid fa-info" /></span>
|
|
<span>The name to refers to this custom settings.</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="column is-6-tablet is-12-mobile">
|
|
<div class="field">
|
|
<label class="label is-inline" for="format" v-text="'Format'" />
|
|
<div class="control has-icons-left">
|
|
<input type="text" class="input" id="format" v-model="form.format" :disabled="addInProgress">
|
|
<span class="icon is-small is-left"><i class="fa-solid fa-f" /></span>
|
|
</div>
|
|
<span class="help">
|
|
<span class="icon"><i class="fa-solid fa-info" /></span>
|
|
<span>The yt-dlp <code>[--format, -f]</code> video format code. see <NuxtLink
|
|
href="https://github.com/yt-dlp/yt-dlp?tab=readme-ov-file#format-selection" target="blank">this
|
|
url</NuxtLink> for more info.</span>. Note, as this key is required, you can set the value to
|
|
<code>default</code> to let <code>yt-dlp</code> choose the best format.
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="column is-6-tablet is-12-mobile">
|
|
<div class="field">
|
|
<label class="label is-inline" for="folder">
|
|
Default Download path
|
|
</label>
|
|
<div class="control has-icons-left">
|
|
<input type="text" class="input" id="folder" placeholder="Leave empty to use default download path"
|
|
v-model="form.folder" :disabled="addInProgress" list="folders">
|
|
<span class="icon is-small is-left"><i class="fa-solid fa-folder" /></span>
|
|
</div>
|
|
<span class="help">
|
|
<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>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="column is-6-tablet is-12-mobile">
|
|
<div class="field">
|
|
<label class="label is-inline" for="output_template">
|
|
Default Output template
|
|
</label>
|
|
<div class="control has-icons-left">
|
|
<input type="text" class="input" id="output_template" :disabled="addInProgress"
|
|
placeholder="Leave empty to use default template." v-model="form.template">
|
|
<span class="icon is-small is-left"><i class="fa-solid fa-file" /></span>
|
|
</div>
|
|
<span class="help">
|
|
<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>.
|
|
For more information <NuxtLink href="https://github.com/yt-dlp/yt-dlp#output-template"
|
|
target="_blank">visit this url</NuxtLink>.
|
|
</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="column is-12">
|
|
<div class="field">
|
|
<label class="label is-inline" for="cli_options">
|
|
Command arguments for yt-dlp
|
|
</label>
|
|
<div class="control">
|
|
<input type="text" class="input" 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="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>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="column is-12">
|
|
<div class="field">
|
|
<label class="label is-inline" for="cookies"
|
|
v-tooltip="'Netscape HTTP Cookie format.'">Cookies</label>
|
|
<div class="control">
|
|
<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="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">
|
|
Recommended addon</NuxtLink> by yt-dlp to export cookies. The cookies MUST be in Netscape HTTP
|
|
Cookie format.
|
|
</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="column is-12" v-if="has_data(form?.args) || has_data(form?.postprocessors)">
|
|
<Message title="Deprecation Warning" class="is-background-warning-80 has-text-dark"
|
|
icon="fas fa-exclamation-circle">
|
|
<ul>
|
|
<li>
|
|
The <code>JSON yt-dlp config</code> and <code>JSON yt-dlp Post-Processors</code> fields are
|
|
deprecated and will be removed in the future. Please use the <b>Command arguments for yt-dlp</b>
|
|
field instead. The deprecated fields will still be working for now but they will stop, we suggest
|
|
that you migrate to the new field. as soon as possible to avoid any issues. No support will be
|
|
given for the deprecated fields.
|
|
</li>
|
|
<li>
|
|
If both fields are set, the <b>Command arguments for yt-dlp</b> field will take precedence over
|
|
the deprecated fields. and when you click save it will remove the deprecated fields.
|
|
</li>
|
|
</ul>
|
|
</Message>
|
|
</div>
|
|
<div class="column is-6-tablet is-12-mobile" v-if="has_data(form?.args)">
|
|
<div class="field">
|
|
<label class="label is-inline" for="args" v-tooltip="'Extends current global yt-dlp config. (JSON)'">
|
|
JSON yt-dlp config <span class="has-text-danger">(DEPRECATED)</span>
|
|
</label>
|
|
<div class="control">
|
|
<textarea class="textarea" id="args" v-model="form.args" :disabled="addInProgress"
|
|
placeholder="{}" />
|
|
</div>
|
|
<span class="help has-text-danger">
|
|
<span class="icon"><i class="fa-solid fa-info" /></span>
|
|
<span>Deprecated, use <b>Command arguments for yt-dlp</b> field instead. </span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="column is-6-tablet is-12-mobile" v-if="has_data(form?.postprocessors)">
|
|
<div class="field">
|
|
<label class="label is-inline" for="postprocessors"
|
|
v-tooltip="'Things to do after download is done.'">
|
|
JSON yt-dlp Post-Processors <span class="has-text-danger">(DEPRECATED)</span>
|
|
</label>
|
|
<div class="control">
|
|
<textarea class="textarea" id="postprocessors" v-model="form.postprocessors"
|
|
:disabled="addInProgress" placeholder="[]" />
|
|
</div>
|
|
<span class="help has-text-danger">
|
|
<span class="icon"><i class="fa-solid fa-info" /></span>
|
|
<span>Deprecated, use <b>Command arguments for yt-dlp</b> field instead. </span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card-footer">
|
|
<div class="card-footer-item">
|
|
<button class="button is-fullwidth is-primary" :disabled="addInProgress" type="submit"
|
|
:class="{ 'is-loading': addInProgress }" form="presetForm">
|
|
<span class="icon"><i class="fa-solid fa-save" /></span>
|
|
<span>Save</span>
|
|
</button>
|
|
</div>
|
|
<div class="card-footer-item">
|
|
<button class="button is-fullwidth is-danger" @click="emitter('cancel')" :disabled="addInProgress"
|
|
type="button">
|
|
<span class="icon"><i class="fa-solid fa-times" /></span>
|
|
<span>Cancel</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<datalist id="folders" v-if="config?.folders">
|
|
<option v-for="dir in config.folders" :key="dir" :value="dir" />
|
|
</datalist>
|
|
</main>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { useStorage } from '@vueuse/core'
|
|
const emitter = defineEmits(['cancel', 'submit']);
|
|
|
|
const props = defineProps({
|
|
reference: {
|
|
type: String,
|
|
required: false,
|
|
default: null,
|
|
},
|
|
preset: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
addInProgress: {
|
|
type: Boolean,
|
|
required: false,
|
|
default: false,
|
|
},
|
|
presets: {
|
|
type: Array,
|
|
required: false,
|
|
default: () => [],
|
|
},
|
|
})
|
|
|
|
const config = useConfigStore()
|
|
const toast = useToast()
|
|
const form = reactive(JSON.parse(JSON.stringify(props.preset)))
|
|
const import_string = ref('')
|
|
const showImport = useStorage('showImport', false);
|
|
|
|
onMounted(() => {
|
|
if (props.preset?.cli && '' !== props.preset?.cli) {
|
|
return
|
|
}
|
|
|
|
if (props.preset?.args && (typeof props.preset.args === 'object')) {
|
|
form.args = JSON.stringify(props.preset.args, null, 2)
|
|
}
|
|
|
|
if (props.preset?.postprocessors && (typeof props.preset.postprocessors === 'object')) {
|
|
form.postprocessors = JSON.stringify(props.preset.postprocessors, null, 2)
|
|
}
|
|
})
|
|
|
|
const checkInfo = async () => {
|
|
const required = ['name', 'format'];
|
|
for (const key of required) {
|
|
if (!form[key]) {
|
|
toast.error(`The ${key} field is required.`);
|
|
return
|
|
}
|
|
}
|
|
|
|
if (form?.cli && '' !== form.cli) {
|
|
const options = await convertOptions(form.cli);
|
|
if (null === options) {
|
|
return
|
|
}
|
|
form.cli = form.cli.trim()
|
|
}
|
|
|
|
let copy = JSON.parse(JSON.stringify(form));
|
|
|
|
let usedName = false;
|
|
let name = String(form.name).trim().toLowerCase();
|
|
|
|
props.presets.forEach(p => {
|
|
if (p.id === props.reference) {
|
|
return;
|
|
}
|
|
|
|
if (String(p.name).toLowerCase() === name) {
|
|
usedName = true;
|
|
}
|
|
});
|
|
|
|
if (true === usedName) {
|
|
toast.error('The preset name is already in use.');
|
|
return;
|
|
}
|
|
|
|
if (form?.cli && '' !== form.cli) {
|
|
if ((has_data(copy?.args) || has_data(copy?.postprocessors))) {
|
|
if (false === confirm('cli options are set, this will remove the JSON yt-dlp config and Post-Processors. Are you sure?')) {
|
|
toast.warning('User cancelled the operation.')
|
|
return
|
|
}
|
|
}
|
|
|
|
if (copy?.args) {
|
|
delete copy.args
|
|
}
|
|
|
|
if (copy?.postprocessors) {
|
|
delete copy.postprocessors
|
|
}
|
|
}
|
|
else {
|
|
if (typeof copy.args === 'object') {
|
|
copy.args = JSON.stringify(copy.args, null, 2);
|
|
}
|
|
|
|
if (typeof copy.postprocessors === 'object') {
|
|
copy.postprocessors = JSON.stringify(copy.postprocessors, null, 2);
|
|
}
|
|
|
|
if (copy?.args) {
|
|
try {
|
|
copy.args = JSON.parse(copy.args)
|
|
} catch (e) {
|
|
toast.error(`Invalid JSON yt-dlp config. ${e.message}`)
|
|
return;
|
|
}
|
|
}
|
|
|
|
if (copy?.postprocessors) {
|
|
try {
|
|
copy.postprocessors = JSON.parse(copy.postprocessors)
|
|
} catch (e) {
|
|
toast.error(`Invalid JSON yt-dlp Post-Processors. ${e.message}`)
|
|
return;
|
|
}
|
|
}
|
|
}
|
|
|
|
// trim all fields in copy only if they are strings
|
|
for (const key in copy) {
|
|
if (typeof copy[key] === 'string') {
|
|
copy[key] = copy[key].trim()
|
|
}
|
|
}
|
|
|
|
emitter('submit', { reference: toRaw(props.reference), preset: toRaw(copy) });
|
|
}
|
|
|
|
const convertOptions = async args => {
|
|
try {
|
|
const response = await convertCliOptions(args)
|
|
|
|
if (response.output_template) {
|
|
form.template = response.output_template
|
|
}
|
|
|
|
if (response.download_path) {
|
|
form.folder = response.download_path
|
|
}
|
|
|
|
if (response.format) {
|
|
form.format = response.format
|
|
}
|
|
|
|
return response.opts
|
|
} catch (e) {
|
|
toast.error(e.message)
|
|
}
|
|
|
|
return null;
|
|
}
|
|
|
|
const importItem = async () => {
|
|
let val = import_string.value.trim()
|
|
if (!val) {
|
|
toast.error('The import string is required.')
|
|
return
|
|
}
|
|
|
|
if (false === val.startsWith('{')) {
|
|
try {
|
|
val = base64UrlDecode(val)
|
|
} catch (e) {
|
|
console.error(e)
|
|
toast.error(`Failed to decode string. ${e.message}`)
|
|
return
|
|
}
|
|
}
|
|
|
|
try {
|
|
const item = JSON.parse(val)
|
|
|
|
console.log(item)
|
|
|
|
if ('preset' !== item._type) {
|
|
toast.error(`Invalid import string. Expected type 'preset', got '${item._type}'.`)
|
|
import_string.value = ''
|
|
return
|
|
}
|
|
|
|
if (form.format || form.cli) {
|
|
if (false === confirm('This will overwrite the current form fields. Are you sure?')) {
|
|
return
|
|
}
|
|
}
|
|
|
|
if (item.name) {
|
|
form.name = item.name
|
|
}
|
|
|
|
if (item.format) {
|
|
form.format = item.format
|
|
}
|
|
|
|
if (item.cli) {
|
|
form.cli = item.cli
|
|
}
|
|
|
|
if (item.template) {
|
|
form.template = item.template
|
|
}
|
|
|
|
if (item.folder) {
|
|
form.folder = item.folder
|
|
}
|
|
|
|
import_string.value = ''
|
|
showImport.value = false
|
|
} catch (e) {
|
|
console.error(e)
|
|
toast.error(`Failed to string. ${e.message}`)
|
|
}
|
|
}
|
|
|
|
</script>
|