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

added button to run task now

Browse source
This commit is contained in:
ArabCoders 2025-03-04 20:27:26 +03:00
parent 49bc28edc0
commit c58faa28c9
4 changed files with 268 additions and 185 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
ui/components/PresetForm.vue
View file

@ -208,21 +208,21 @@ const props = defineProps({
}, },
}) })
const toast = useToast(); const toast = useToast()
const convertInProgress = ref(false); const convertInProgress = ref(false)
const form = reactive(props.preset); const form = reactive( JSON.parse(JSON.stringify(props.preset)))
const opts = ref(''); const opts = ref('')
const json_preset = ref(''); const json_preset = ref('')
const importExpanded = ref(false); const importExpanded = ref(false)
const convertExpanded = ref(false); const convertExpanded = ref(false)
onMounted(() => { onMounted(() => {
if (props.preset?.args && (typeof props.preset.args === 'object')) { 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')) { 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 +231,7 @@ const checkInfo = async () => {
for (const key of required) { for (const key of required) {
if (!form[key]) { if (!form[key]) {
toast.error(`The ${key} field is required.`); toast.error(`The ${key} field is required.`);
return; return
} }
} }

334
ui/components/TaskForm.vue
View file

@ -1,186 +1,188 @@
<template> <template>
<main class="columns mt-2"> <main class="columns mt-2">
<div class="column"> <div class="column">
<form id="taskForm" @submit.prevent="checkInfo()"> <form id="taskForm" @submit.prevent="checkInfo()" class="box">
<div class="box"> <div class="columns is-multiline is-mobile">
<div class="columns is-multiline is-mobile"> <div class="column is-12">
<div class="column is-12"> <h1 class="title is-6" style="border-bottom: 1px solid #dbdbdb;">
<h1 class="title is-6" style="border-bottom: 1px solid #dbdbdb;"> <span class="icon-text">
<span class="icon-text"> <span class="icon"><i class="fa-solid" :class="reference ? 'fa-cog' : 'fa-plus'" /></span>
<span class="icon"><i class="fa-solid" :class="reference ? 'fa-cog' : 'fa-plus'" /></span> <span>{{ reference ? 'Edit' : 'Add' }}</span>
<span>{{ reference ? 'Edit' : 'Add' }}</span> </span>
</span> </h1>
</h1> </div>
</div>
<div class="column is-6-tablet is-12-mobile"> <div class="column is-6-tablet is-12-mobile">
<div class="field"> <div class="field">
<label class="label is-inline" for="name"> <label class="label is-inline" for="name" v-text="'Name'" />
Task name <div class="control has-icons-left">
</label> <input type="text" class="input" id="name" v-model="form.name" :disabled="addInProgress">
<div class="control has-icons-left"> <span class="icon is-small is-left"><i class="fa-solid fa-user" /></span>
<input type="text" class="input" id="name" v-model="form.name" :disabled="addInProgress"> </div>
<span class="icon is-small is-left"><i class="fa-solid fa-user" /></span> <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> </div>
<span class="help"> <span class="icon is-small is-left"><i class="fa-solid fa-tv" /></span>
<span class="icon"><i class="fa-solid fa-info" /></span> </div>
<span>Task name is used to identify the task in the task list.</span> <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> </span>
</div> </span>
</div> </div>
</div>
<div class="column is-6-tablet is-12-mobile"> <div class="column is-6-tablet is-12-mobile" v-if="showAdvanced">
<div class="field"> <div class="field">
<label class="label is-inline" for="url"> <label class="label is-inline" for="output_template">
URL Output template
</label> </label>
<div class="control has-icons-left"> <div class="control has-icons-left">
<input type="url" class="input" id="url" v-model="form.url" :disabled="addInProgress"> <input type="text" class="input" id="output_template" placeholder="The output template to use"
<span class="icon is-small is-left"><i class="fa-solid fa-link" /></span> v-model="form.template" :disabled="addInProgress">
</div> <span class="icon is-small is-left"><i class="fa-solid fa-file" /></span>
<span class="help"> </div>
<span class="icon"><i class="fa-solid fa-info" /></span> <span class="help">
<span>The channel or playlist URL.</span> <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> </span>
</div> </span>
</div> </div>
</div>
<div class="column is-6-tablet is-12-mobile"> <div class="column is-6-tablet is-12-mobile" v-if="showAdvanced">
<div class="field"> <div class="field">
<label class="label is-inline" for="folder"> <label class="label is-inline" for="config" v-tooltip="'Extends current global yt-dlp config. (JSON)'">
Download path JSON yt-dlp config or CLI options. <NuxtLink
</label> v-if="form.config && (typeof form.config === 'string') && !form.config.trim().startsWith('{')"
<div class="control has-icons-left"> @click="convertOptions()">Convert to JSON</NuxtLink>
<input type="text" class="input" id="folder" placeholder="Leave empty to use default download path" </label>
v-model="form.folder" :disabled="addInProgress" list="folders"> <div class="control">
<span class="icon is-small is-left"><i class="fa-solid fa-folder" /></span> <textarea class="textarea" id="config" v-model="form.config" :disabled="addInProgress"
</div> placeholder="--no-embed-metadata --no-embed-thumbnail"></textarea>
<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>
<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>
<div class="column is-6-tablet is-12-mobile"> <div class="column is-6-tablet is-12-mobile" v-if="showAdvanced">
<div class="field"> <div class="field">
<label class="label is-inline" for="folder"> <label class="label is-inline" for="cookies" v-tooltip="'Netscape HTTP Cookie format.'">Cookies</label>
Preset <div class="control">
</label> <textarea class="textarea" id="cookies" v-model="form.cookies" :disabled="addInProgress"></textarea>
<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> </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>
<div class="column is-6-tablet is-12-mobile"> <div class="column is-12">
<div class="field"> <div class="field is-grouped is-grouped-right">
<label class="label is-inline" for="timer"> <p class="control">
CRON expression timer. <button class="button is-primary" :disabled="addInProgress" type="submit"
</label> :class="{ 'is-loading': addInProgress }" form="taskForm">
<div class="control has-icons-left"> <span class="icon"><i class="fa-solid fa-save" /></span>
<input type="text" class="input" id="timer" placeholder="leave empty to run once every hour." <span>Save</span>
v-model="form.timer" :disabled="addInProgress"> </button>
<span class="icon is-small is-left"><i class="fa-solid fa-clock" /></span> </p>
</div> <p class="control">
<span class="help"> <button class="button is-danger" @click="emitter('cancel')" :disabled="addInProgress" type="button">
<span class="icon"><i class="fa-solid fa-info" /></span> <span class="icon"><i class="fa-solid fa-times" /></span>
<span> <span>Cancel</span>
The CRON timer expression to use for this task. If not set, the task will run once an hour in a </button>
random </p>
minute. For more information on CRON expressions, see <NuxtLink to="https://crontab.guru/" <p class="control">
target="_blank">crontab.guru</NuxtLink>. <button class="button is-info" type="button" @click="showAdvanced = !showAdvanced">
</span> <span class="icon"><i class="fa-solid fa-cog" /></span>
</span> <span>Opts</span>
</div> </button>
</p>
</div> </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>
</div> </div>
</form> </form>
@ -192,6 +194,7 @@
</template> </template>
<script setup> <script setup>
import { useStorage } from '@vueuse/core'
import { parseExpression } from 'cron-parser' import { parseExpression } from 'cron-parser'
import { request } from '~/utils/index' import { request } from '~/utils/index'
@ -199,6 +202,7 @@ const emitter = defineEmits(['cancel', 'submit']);
const toast = useToast(); const toast = useToast();
const config = useConfigStore(); const config = useConfigStore();
const convertInProgress = ref(false); const convertInProgress = ref(false);
const showAdvanced = useStorage('task.showAdvanced', false);
const props = defineProps({ const props = defineProps({
reference: { reference: {

29
ui/pages/presets.vue
View file

@ -53,12 +53,9 @@ div.is-centered {
<div class="column is-6" v-for="item in presetsNoDefault" :key="item.id"> <div class="column is-6" v-for="item in presetsNoDefault" :key="item.id">
<div class="card"> <div class="card">
<header class="card-header"> <header class="card-header">
<div class="card-header-title is-text-overflow is-block"> <div class="card-header-title is-text-overflow is-block" v-text="item.name" />
<NuxtLink target="_blank" :href="item.url">{{ item.name }}</NuxtLink>
</div>
<div class="card-header-icon"> <div class="card-header-icon">
<a class="has-text-primary" v-tooltip="'Copy preset.'" <a class="has-text-primary" v-tooltip="'Copy preset.'" @click.prevent="copyItem(item)">
@click.prevent="copyText(JSON.stringify(item))">
<span class="icon"><i class="fa-solid fa-copy" /></span> <span class="icon"><i class="fa-solid fa-copy" /></span>
</a> </a>
<button @click="item.raw = !item.raw"> <button @click="item.raw = !item.raw">
@ -83,7 +80,7 @@ div.is-centered {
<div class="card-footer"> <div class="card-footer">
<div class="card-footer-item"> <div class="card-footer-item">
<button class="button is-warning is-fullwidth" @click="editItem(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> <span>Edit</span>
</button> </button>
</div> </div>
@ -252,4 +249,24 @@ const editItem = item => {
} }
onMounted(async () => socket.isConnected ? await reloadContent(true) : '') 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> </script>

70
ui/pages/tasks.vue
View file

@ -79,11 +79,11 @@ div.is-centered {
</p> </p>
<p> <p>
<span class="icon"><i class="fa-solid fa-folder" /></span> <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>
<p> <p>
<span class="icon"><i class="fa-solid fa-file" /></span> <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>
<p> <p>
<span class="icon"><i class="fa-solid fa-tv" /></span> <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">
<div class="card-footer-item"> <div class="card-footer-item">
<button class="button is-warning is-fullwidth" @click="editItem(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> <span>Edit</span>
</button> </button>
</div> </div>
@ -109,6 +109,12 @@ div.is-centered {
<span>Delete</span> <span>Delete</span>
</button> </button>
</div> </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> </div>
</div> </div>
@ -146,6 +152,7 @@ watch(() => config.app.basic_mode, async () => {
watch(() => socket.isConnected, async () => { watch(() => socket.isConnected, async () => {
if (socket.isConnected && initialLoad.value) { if (socket.isConnected && initialLoad.value) {
socket.on('status', statusHandler)
await reloadContent(true) await reloadContent(true)
initialLoad.value = false initialLoad.value = false
} }
@ -278,7 +285,13 @@ const calcPath = path => {
return loc 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 => { const tryParse = expression => {
try { try {
@ -287,4 +300,53 @@ const tryParse = expression => {
return "Invalid" 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> </script>