Merge pull request #199 from arabcoders/dev
This commit is contained in:
Abdulmohsen
GitHub
commit
327136bf09
5 changed files with 325 additions and 279 deletions
143
README.md
143
README.md
|
|
@ -29,11 +29,10 @@ Your `yt-dlp` config should include the following options for optimal working co
|
|||
|
||||
```json
|
||||
{
|
||||
"windowsfilenames": true,
|
||||
"live_from_start": true,
|
||||
"format_sort": [
|
||||
"codec:avc:m4a"
|
||||
]
|
||||
"windowsfilenames": true,
|
||||
"continue_dl": true,
|
||||
"live_from_start": true,
|
||||
"format_sort": [ "codec:avc:m4a" ],
|
||||
}
|
||||
```
|
||||
* Note, the `format_sort`, forces YouTube to use x264 instead of vp9 codec, you can ignore it if you want. i prefer the media in x264.
|
||||
|
|
@ -144,7 +143,6 @@ Before asking a question or submitting an issue for YTPTube, please remember tha
|
|||
|
||||
In order to test with the yt-dlp command directly, you can either download it and run it locally, or for a better simulation of its actual conditions, you can run it within the YTPTube container itself.
|
||||
|
||||
|
||||
#### Via HTTP
|
||||
|
||||
Simply go to `Console` button in your navbar and directly use the yt-dlp command.
|
||||
|
|
@ -186,97 +184,66 @@ A Docker image can be built locally (it will build the UI too):
|
|||
docker build . -t ytptube
|
||||
```
|
||||
|
||||
### ytdlp.json File
|
||||
## ytdlp.json file
|
||||
|
||||
The `config/ytdlp.json`, is a json file which can be used to alter the default `yt-dlp` config settings. For example these are the options i personally use,
|
||||
The `config/ytdlp.json`, is a json file which can be used to alter the default `yt-dlp` config settings globally.
|
||||
We recommend not use this file for options that aren't **truly global**, everything that can be done via the `ytdlp.json` file
|
||||
can be done via a preset, which only effects the download that uses it. For example, my personal preset that i use for all
|
||||
my jp video downloads is:
|
||||
|
||||
```json5
|
||||
{
|
||||
// Make the final filename windows compatible.
|
||||
"windowsfilenames": true,
|
||||
// Write subtitles if the stream has them.
|
||||
"writesubtitles": true,
|
||||
// Write info.json file for each download. It can be used by many tools to generate info etc.
|
||||
"writeinfojson": true,
|
||||
// Write thumbnail if available.
|
||||
"writethumbnail": true,
|
||||
// Do not download automatically generated subtitles.
|
||||
"writeautomaticsub": false,
|
||||
// MP4 is limited with the codecs we use, so "mkv" make sense.
|
||||
"merge_output_format": "mkv",
|
||||
// Record live stream from the start.
|
||||
"live_from_start": true,
|
||||
// For YouTube try to force H264 video codec & AAC audio.
|
||||
"format_sort": [
|
||||
"codec:avc:m4a"
|
||||
],
|
||||
// Your choice of subtitle languages to download.
|
||||
"subtitleslangs": [ "en", "ar" ],
|
||||
// postprocessors to run on the file
|
||||
"name": "jp_videos",
|
||||
"format": "bv[ext=mp4]+(ba[ext=m4a][format_note*=original]/ba)/bv[ext=mp4]+ba[ext=m4a]/b[ext=mp4]/b",
|
||||
"args": {
|
||||
"writesubtitles": true,
|
||||
"writeinfojson": true,
|
||||
"writethumbnail": true,
|
||||
"merge_output_format": "mkv",
|
||||
"final_ext": "mkv",
|
||||
"format_sort": [ "codec:avc:m4a" ],
|
||||
"subtitleslangs": [ "en", "ar" ]
|
||||
},
|
||||
"postprocessors": [
|
||||
// this processor convert the downloaded thumbnail to jpg.
|
||||
{
|
||||
"key": "FFmpegThumbnailsConvertor",
|
||||
"format": "jpg"
|
||||
},
|
||||
// This processor convert subtitles to srt format.
|
||||
{
|
||||
"key": "FFmpegSubtitlesConvertor",
|
||||
"format": "srt"
|
||||
},
|
||||
// This processor embed metadata & info.json file into the final mkv file.
|
||||
{
|
||||
"key": "FFmpegMetadata",
|
||||
"add_infojson": true,
|
||||
"add_metadata": true
|
||||
},
|
||||
// This process embed subtitles into the final file if it doesn't have subtitles embedded.
|
||||
{
|
||||
"key": "FFmpegEmbedSubtitle",
|
||||
"already_have_subtitle": false
|
||||
}
|
||||
{
|
||||
"key": "FFmpegVideoRemuxer",
|
||||
"preferedformat": "mkv"
|
||||
},
|
||||
{
|
||||
"key": "FFmpegConcat",
|
||||
"only_multi_video": true,
|
||||
"when": "playlist"
|
||||
},
|
||||
{
|
||||
"key": "FFmpegThumbnailsConvertor",
|
||||
"format": "jpg"
|
||||
},
|
||||
{
|
||||
"key": "FFmpegSubtitlesConvertor",
|
||||
"format": "srt"
|
||||
},
|
||||
{
|
||||
"key": "FFmpegMetadata",
|
||||
"add_chapters": true,
|
||||
"add_infojson": true,
|
||||
"add_metadata": true
|
||||
},
|
||||
{
|
||||
"key": "FFmpegEmbedSubtitle",
|
||||
"already_have_subtitle": false
|
||||
},
|
||||
{
|
||||
"key": "Exec",
|
||||
"exec_cmd": "/usr/bin/mkvpropedit %(filepath)q --edit track:a1 --set language=jpn --set name=Japanese --add-track-statistics-tags",
|
||||
"when": "after_move"
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
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
|
||||
|
||||
The `config/presets.json`, is a json file, which can be used to add custom presets for selection in WebUI.
|
||||
|
||||
The file is supposed to be an array of objects, each object represent a preset, the schema for the object is as the following.
|
||||
```json5
|
||||
[
|
||||
{
|
||||
// (name: string) - REQUIRED - The preset name.
|
||||
"name": "My super preset",
|
||||
// (format: string) - REQUIRED - The required yt-dlp format. i.e. -f option in yt-dlp cli.
|
||||
"format": "best",
|
||||
// (postprocessors: array) - OPTIONAL - The postprocessors to run on the file. if it's preset or set to empty array, it will override the default postprocessors.
|
||||
"postprocessors": [
|
||||
// for example to embed thumbnail.
|
||||
{
|
||||
"key": "EmbedThumbnail",
|
||||
"already_have_thumbnail": false
|
||||
}
|
||||
],
|
||||
// (args: dict) - OPTIONAL - Extra yt-dlp arguments to pass to yt-dlp.
|
||||
"args": {
|
||||
// (key: string) - REQUIRED - The yt-dlp argument key.
|
||||
"writethumbnail": true
|
||||
}
|
||||
},
|
||||
{
|
||||
// another preset, etc...
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
For more expanded example please take look at the default presets file found in [app/library/presets.json](app/library/presets.json).
|
||||
You can convert your own yt-dlp command arguments into a preset using the box found in the presets add page. For reference,
|
||||
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).
|
||||
|
||||
## Authentication
|
||||
|
||||
|
|
|
|||
|
|
@ -88,9 +88,7 @@
|
|||
|
||||
<div class="column is-6-tablet is-12-mobile">
|
||||
<div class="field">
|
||||
<label class="label is-inline" for="name">
|
||||
Preset name
|
||||
</label>
|
||||
<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>
|
||||
|
|
@ -104,9 +102,7 @@
|
|||
|
||||
<div class="column is-6-tablet is-12-mobile">
|
||||
<div class="field">
|
||||
<label class="label is-inline" for="format">
|
||||
Format
|
||||
</label>
|
||||
<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>
|
||||
|
|
@ -208,21 +204,21 @@ const props = defineProps({
|
|||
},
|
||||
})
|
||||
|
||||
const toast = useToast();
|
||||
const convertInProgress = ref(false);
|
||||
const form = reactive(props.preset);
|
||||
const opts = ref('');
|
||||
const json_preset = ref('');
|
||||
const importExpanded = ref(false);
|
||||
const convertExpanded = ref(false);
|
||||
const toast = useToast()
|
||||
const convertInProgress = ref(false)
|
||||
const form = reactive(JSON.parse(JSON.stringify(props.preset)))
|
||||
const opts = ref('')
|
||||
const json_preset = ref('')
|
||||
const importExpanded = ref(false)
|
||||
const convertExpanded = ref(false)
|
||||
|
||||
onMounted(() => {
|
||||
if (props.preset?.args && (typeof props.preset.args === 'object')) {
|
||||
form.args = JSON.stringify(props.preset.args, null, 2);
|
||||
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);
|
||||
form.postprocessors = JSON.stringify(props.preset.postprocessors, null, 2)
|
||||
}
|
||||
})
|
||||
|
||||
|
|
@ -231,7 +227,7 @@ const checkInfo = async () => {
|
|||
for (const key of required) {
|
||||
if (!form[key]) {
|
||||
toast.error(`The ${key} field is required.`);
|
||||
return;
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,186 +1,188 @@
|
|||
<template>
|
||||
<main class="columns mt-2">
|
||||
<div class="column">
|
||||
<form id="taskForm" @submit.prevent="checkInfo()">
|
||||
<div class="box">
|
||||
<div class="columns is-multiline is-mobile">
|
||||
<div class="column is-12">
|
||||
<h1 class="title is-6" style="border-bottom: 1px solid #dbdbdb;">
|
||||
<span class="icon-text">
|
||||
<span class="icon"><i class="fa-solid" :class="reference ? 'fa-cog' : 'fa-plus'" /></span>
|
||||
<span>{{ reference ? 'Edit' : 'Add' }}</span>
|
||||
</span>
|
||||
</h1>
|
||||
</div>
|
||||
<form id="taskForm" @submit.prevent="checkInfo()" class="box">
|
||||
<div class="columns is-multiline is-mobile">
|
||||
<div class="column is-12">
|
||||
<h1 class="title is-6" style="border-bottom: 1px solid #dbdbdb;">
|
||||
<span class="icon-text">
|
||||
<span class="icon"><i class="fa-solid" :class="reference ? 'fa-cog' : 'fa-plus'" /></span>
|
||||
<span>{{ reference ? 'Edit' : 'Add' }}</span>
|
||||
</span>
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<div class="column is-6-tablet is-12-mobile">
|
||||
<div class="field">
|
||||
<label class="label is-inline" for="name">
|
||||
Task name
|
||||
</label>
|
||||
<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-user" /></span>
|
||||
<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-user" /></span>
|
||||
</div>
|
||||
<span class="help">
|
||||
<span class="icon"><i class="fa-solid fa-info" /></span>
|
||||
<span>Task name is used to identify the task in the task list and in logs.</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column is-6-tablet is-12-mobile">
|
||||
<div class="field">
|
||||
<label class="label is-inline" for="url" v-text="'URL'" />
|
||||
<div class="control has-icons-left">
|
||||
<input type="url" class="input" id="url" v-model="form.url" :disabled="addInProgress">
|
||||
<span class="icon is-small is-left"><i class="fa-solid fa-link" /></span>
|
||||
</div>
|
||||
<span class="help">
|
||||
<span class="icon"><i class="fa-solid fa-info" /></span>
|
||||
<span>The channel or playlist URL.</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column is-6-tablet is-12-mobile">
|
||||
<div class="field">
|
||||
<label class="label is-inline" for="folder">
|
||||
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>Downloads are relative to download path, defaults to root path if not set.</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column is-6-tablet is-12-mobile">
|
||||
<div class="field">
|
||||
<label class="label is-inline" for="folder">
|
||||
Preset
|
||||
</label>
|
||||
<div class="control has-icons-left">
|
||||
<div class="select is-fullwidth">
|
||||
<select id="preset" class="is-fullwidth" v-model="form.preset"
|
||||
:disabled="addInProgress || hasFormatInConfig"
|
||||
v-tooltip.bottom="hasFormatInConfig ? 'Presets are disabled. Format key is present in the config.' : ''">
|
||||
<option v-for="item in config.presets" :key="item.name" :value="item.name">
|
||||
{{ item.name }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<span class="help">
|
||||
<span class="icon"><i class="fa-solid fa-info" /></span>
|
||||
<span>Task name is used to identify the task in the task list.</span>
|
||||
<span class="icon is-small is-left"><i class="fa-solid fa-tv" /></span>
|
||||
</div>
|
||||
<span class="help">
|
||||
<span class="icon"><i class="fa-solid fa-info" /></span>
|
||||
<span>Select the preset to use for this URL. The preset will be ignored if format key is present in
|
||||
config.</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column is-6-tablet is-12-mobile">
|
||||
<div class="field">
|
||||
<label class="label is-inline" for="timer">
|
||||
CRON expression timer.
|
||||
</label>
|
||||
<div class="control has-icons-left">
|
||||
<input type="text" class="input" id="timer" placeholder="leave empty to run once every hour."
|
||||
v-model="form.timer" :disabled="addInProgress">
|
||||
<span class="icon is-small is-left"><i class="fa-solid fa-clock" /></span>
|
||||
</div>
|
||||
<span class="help">
|
||||
<span class="icon"><i class="fa-solid fa-info" /></span>
|
||||
<span>
|
||||
The CRON timer expression to use for this task. If not set, the task will run once an hour in a
|
||||
random
|
||||
minute. For more information on CRON expressions, see <NuxtLink to="https://crontab.guru/"
|
||||
target="_blank">crontab.guru</NuxtLink>.
|
||||
</span>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column is-6-tablet is-12-mobile">
|
||||
<div class="field">
|
||||
<label class="label is-inline" for="url">
|
||||
URL
|
||||
</label>
|
||||
<div class="control has-icons-left">
|
||||
<input type="url" class="input" id="url" v-model="form.url" :disabled="addInProgress">
|
||||
<span class="icon is-small is-left"><i class="fa-solid fa-link" /></span>
|
||||
</div>
|
||||
<span class="help">
|
||||
<span class="icon"><i class="fa-solid fa-info" /></span>
|
||||
<span>The channel or playlist URL.</span>
|
||||
<div class="column is-6-tablet is-12-mobile" v-if="showAdvanced">
|
||||
<div class="field">
|
||||
<label class="label is-inline" for="output_template">
|
||||
Output template
|
||||
</label>
|
||||
<div class="control has-icons-left">
|
||||
<input type="text" class="input" id="output_template" placeholder="The output template to use"
|
||||
v-model="form.template" :disabled="addInProgress">
|
||||
<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>The output template to use, 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>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column is-6-tablet is-12-mobile">
|
||||
<div class="field">
|
||||
<label class="label is-inline" for="folder">
|
||||
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>Downloads are relative to download path, defaults to root path if not set.</span>
|
||||
</span>
|
||||
<div class="column is-6-tablet is-12-mobile" v-if="showAdvanced">
|
||||
<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. <NuxtLink
|
||||
v-if="form.config && (typeof form.config === 'string') && !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"
|
||||
placeholder="--no-embed-metadata --no-embed-thumbnail"></textarea>
|
||||
</div>
|
||||
<span class="help">
|
||||
<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>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="folder">
|
||||
Preset
|
||||
</label>
|
||||
<div class="control has-icons-left">
|
||||
<div class="select is-fullwidth">
|
||||
<select id="preset" class="is-fullwidth" v-model="form.preset"
|
||||
:disabled="addInProgress || hasFormatInConfig"
|
||||
v-tooltip.bottom="hasFormatInConfig ? 'Presets are disabled. Format key is present in the config.' : ''">
|
||||
<option v-for="item in config.presets" :key="item.name" :value="item.name">
|
||||
{{ item.name }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<span class="icon is-small is-left"><i class="fa-solid fa-tv" /></span>
|
||||
</div>
|
||||
<span class="help">
|
||||
<span class="icon"><i class="fa-solid fa-info" /></span>
|
||||
<span>Select the preset to use for this URL. The preset will be ignored if format key is present in
|
||||
config.</span>
|
||||
</span>
|
||||
<div class="column is-6-tablet is-12-mobile" v-if="showAdvanced">
|
||||
<div class="field">
|
||||
<label class="label is-inline" for="cookies" v-tooltip="'Netscape HTTP Cookie format.'">Cookies</label>
|
||||
<div class="control">
|
||||
<textarea class="textarea" id="cookies" v-model="form.cookies" :disabled="addInProgress"></textarea>
|
||||
</div>
|
||||
<span class="help">
|
||||
<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> by yt-dlp to export cookies. The cookies MUST be in Netscape HTTP
|
||||
Cookie format.</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column is-6-tablet is-12-mobile">
|
||||
<div class="field">
|
||||
<label class="label is-inline" for="timer">
|
||||
CRON expression timer.
|
||||
</label>
|
||||
<div class="control has-icons-left">
|
||||
<input type="text" class="input" id="timer" placeholder="leave empty to run once every hour."
|
||||
v-model="form.timer" :disabled="addInProgress">
|
||||
<span class="icon is-small is-left"><i class="fa-solid fa-clock" /></span>
|
||||
</div>
|
||||
<span class="help">
|
||||
<span class="icon"><i class="fa-solid fa-info" /></span>
|
||||
<span>
|
||||
The CRON timer expression to use for this task. If not set, the task will run once an hour in a
|
||||
random
|
||||
minute. For more information on CRON expressions, see <NuxtLink to="https://crontab.guru/"
|
||||
target="_blank">crontab.guru</NuxtLink>.
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="column is-12">
|
||||
<div class="field is-grouped is-grouped-right">
|
||||
<p class="control">
|
||||
<button class="button is-primary" :disabled="addInProgress" type="submit"
|
||||
:class="{ 'is-loading': addInProgress }" form="taskForm">
|
||||
<span class="icon"><i class="fa-solid fa-save" /></span>
|
||||
<span>Save</span>
|
||||
</button>
|
||||
</p>
|
||||
<p class="control">
|
||||
<button class="button is-danger" @click="emitter('cancel')" :disabled="addInProgress" type="button">
|
||||
<span class="icon"><i class="fa-solid fa-times" /></span>
|
||||
<span>Cancel</span>
|
||||
</button>
|
||||
</p>
|
||||
<p class="control">
|
||||
<button class="button is-info" type="button" @click="showAdvanced = !showAdvanced">
|
||||
<span class="icon"><i class="fa-solid fa-cog" /></span>
|
||||
<span>Opts</span>
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="column is-6-tablet is-12-mobile">
|
||||
<div class="field">
|
||||
<label class="label is-inline" for="output_template">
|
||||
Output template
|
||||
</label>
|
||||
<div class="control has-icons-left">
|
||||
<input type="text" class="input" id="output_template" placeholder="The output template to use"
|
||||
v-model="form.template" :disabled="addInProgress">
|
||||
<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>The output template to use, if not set, it will defaults to
|
||||
<code>{{ config.app.template }}</code></span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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. <NuxtLink
|
||||
v-if="form.config && (typeof form.config === 'string') && !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"
|
||||
placeholder="--no-embed-metadata --no-embed-thumbnail"></textarea>
|
||||
</div>
|
||||
<span class="help">
|
||||
<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>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="cookies" v-tooltip="'Netscape HTTP Cookie format.'">Cookies</label>
|
||||
<div class="control">
|
||||
<textarea class="textarea" id="cookies" v-model="form.cookies" :disabled="addInProgress"></textarea>
|
||||
</div>
|
||||
<span class="help">
|
||||
<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> by yt-dlp to export cookies. The cookies MUST be in Netscape HTTP
|
||||
Cookie format.</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column is-12">
|
||||
<div class="field is-grouped is-grouped-right">
|
||||
<p class="control">
|
||||
<button class="button is-primary" :disabled="addInProgress" type="submit"
|
||||
:class="{ 'is-loading': addInProgress }" form="taskForm">
|
||||
<span class="icon"><i class="fa-solid fa-save" /></span>
|
||||
<span>Save</span>
|
||||
</button>
|
||||
</p>
|
||||
<p class="control">
|
||||
<button class="button is-danger" @click="emitter('cancel')" :disabled="addInProgress" type="button">
|
||||
<span class="icon"><i class="fa-solid fa-times" /></span>
|
||||
<span>Cancel</span>
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
|
@ -192,6 +194,7 @@
|
|||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useStorage } from '@vueuse/core'
|
||||
import { parseExpression } from 'cron-parser'
|
||||
import { request } from '~/utils/index'
|
||||
|
||||
|
|
@ -199,6 +202,7 @@ const emitter = defineEmits(['cancel', 'submit']);
|
|||
const toast = useToast();
|
||||
const config = useConfigStore();
|
||||
const convertInProgress = ref(false);
|
||||
const showAdvanced = useStorage('task.showAdvanced', false);
|
||||
|
||||
const props = defineProps({
|
||||
reference: {
|
||||
|
|
|
|||
|
|
@ -53,12 +53,9 @@ div.is-centered {
|
|||
<div class="column is-6" v-for="item in presetsNoDefault" :key="item.id">
|
||||
<div class="card">
|
||||
<header class="card-header">
|
||||
<div class="card-header-title is-text-overflow is-block">
|
||||
<NuxtLink target="_blank" :href="item.url">{{ item.name }}</NuxtLink>
|
||||
</div>
|
||||
<div class="card-header-title is-text-overflow is-block" v-text="item.name" />
|
||||
<div class="card-header-icon">
|
||||
<a class="has-text-primary" v-tooltip="'Copy preset.'"
|
||||
@click.prevent="copyText(JSON.stringify(item))">
|
||||
<a class="has-text-primary" v-tooltip="'Copy preset.'" @click.prevent="copyItem(item)">
|
||||
<span class="icon"><i class="fa-solid fa-copy" /></span>
|
||||
</a>
|
||||
<button @click="item.raw = !item.raw">
|
||||
|
|
@ -83,7 +80,7 @@ div.is-centered {
|
|||
<div class="card-footer">
|
||||
<div class="card-footer-item">
|
||||
<button class="button is-warning is-fullwidth" @click="editItem(item);">
|
||||
<span class="icon"><i class="fa-solid fa-trash-can" /></span>
|
||||
<span class="icon"><i class="fa-solid fa-cog" /></span>
|
||||
<span>Edit</span>
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -252,4 +249,24 @@ const editItem = item => {
|
|||
}
|
||||
|
||||
onMounted(async () => socket.isConnected ? await reloadContent(true) : '')
|
||||
|
||||
const copyItem = item => {
|
||||
let data = JSON.parse(JSON.stringify(item))
|
||||
const keys = ['id', 'default', 'raw']
|
||||
keys.forEach(key => {
|
||||
if (key in data) {
|
||||
delete data[key]
|
||||
}
|
||||
})
|
||||
|
||||
if (data.args && (typeof data.args === 'string')) {
|
||||
data.args = JSON.parse(data.args)
|
||||
}
|
||||
|
||||
if (data.postprocessors && (typeof data.postprocessors === 'string')) {
|
||||
data.postprocessors = JSON.parse(data.postprocessors)
|
||||
}
|
||||
|
||||
return copyText(JSON.stringify(data))
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -79,11 +79,11 @@ div.is-centered {
|
|||
</p>
|
||||
<p>
|
||||
<span class="icon"><i class="fa-solid fa-folder" /></span>
|
||||
<span>{{ calcPath(item.folder) }}</span>
|
||||
<span>{{ item.folder ? calcPath(item.folder) : config.app.download_path }}</span>
|
||||
</p>
|
||||
<p>
|
||||
<span class="icon"><i class="fa-solid fa-file" /></span>
|
||||
<span>{{ item.template ?? config.app.output_template }}</span>
|
||||
<span>{{ item.template ? item.template : config.app.output_template }}</span>
|
||||
</p>
|
||||
<p>
|
||||
<span class="icon"><i class="fa-solid fa-tv" /></span>
|
||||
|
|
@ -99,7 +99,7 @@ div.is-centered {
|
|||
<div class="card-footer">
|
||||
<div class="card-footer-item">
|
||||
<button class="button is-warning is-fullwidth" @click="editItem(item);">
|
||||
<span class="icon"><i class="fa-solid fa-trash-can" /></span>
|
||||
<span class="icon"><i class="fa-solid fa-cog" /></span>
|
||||
<span>Edit</span>
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -109,6 +109,12 @@ div.is-centered {
|
|||
<span>Delete</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="card-footer-item">
|
||||
<button class="button is-purple is-fullwidth" @click="runNow(item)">
|
||||
<span class="icon"><i class="fa-solid fa-microchip" /></span>
|
||||
<span>Run now</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -146,6 +152,7 @@ watch(() => config.app.basic_mode, async () => {
|
|||
|
||||
watch(() => socket.isConnected, async () => {
|
||||
if (socket.isConnected && initialLoad.value) {
|
||||
socket.on('status', statusHandler)
|
||||
await reloadContent(true)
|
||||
initialLoad.value = false
|
||||
}
|
||||
|
|
@ -278,7 +285,13 @@ const calcPath = path => {
|
|||
return loc
|
||||
}
|
||||
|
||||
onMounted(async () => socket.isConnected ? await reloadContent(true) : '')
|
||||
onMounted(async () => {
|
||||
if (!socket.isConnected){
|
||||
return;
|
||||
}
|
||||
socket.on('status', statusHandler)
|
||||
await reloadContent(true)
|
||||
});
|
||||
|
||||
const tryParse = expression => {
|
||||
try {
|
||||
|
|
@ -287,4 +300,53 @@ const tryParse = expression => {
|
|||
return "Invalid"
|
||||
}
|
||||
}
|
||||
|
||||
const runNow = item => {
|
||||
if (true !== confirm(`Run '${item.name}' now? it will also run at the scheduled time.`)) {
|
||||
return
|
||||
}
|
||||
|
||||
let data = {
|
||||
url: item.url,
|
||||
preset: item.preset,
|
||||
}
|
||||
|
||||
if (item.folder) {
|
||||
data.folder = item.folder
|
||||
}
|
||||
|
||||
if (item.template) {
|
||||
data.template = item.template
|
||||
}
|
||||
|
||||
if (item.cookies) {
|
||||
data.cookies = item.cookies
|
||||
}
|
||||
|
||||
if (item.config) {
|
||||
if (typeof item.config === 'object') {
|
||||
data.config = JSON.stringify(item.config)
|
||||
}
|
||||
|
||||
try {
|
||||
JSON.parse(data.config)
|
||||
} catch (e) {
|
||||
toast.error(`Invalid JSON yt-dlp config. ${e.message}`)
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
socket.emit('add_url', data)
|
||||
}
|
||||
|
||||
onUnmounted(() => socket.off('status', statusHandler))
|
||||
|
||||
const statusHandler = async stream => {
|
||||
const { status, msg } = JSON.parse(stream)
|
||||
|
||||
if ('error' === status) {
|
||||
toast.error(msg)
|
||||
return
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in a new issue