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

Refactor: remove socket connection checks in various UI components.

Browse source
This commit is contained in:
arabcoders 2026-01-04 18:54:22 +03:00
parent b03d4ab42e
commit 750322dae4
7 changed files with 29 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -9,22 +9,20 @@
<span class="icon"><i class="fa-solid fa-link" /></span> <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.'"> <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) URLs separated by newlines or <span class="is-bold is-lowercase">{{ getSeparatorsName(separator)
}}</span> }}</span>
</span> </span>
</label> </label>
<div class="field is-grouped"> <div class="field is-grouped">
<div class="control is-expanded"> <div class="control is-expanded">
<textarea v-if="isMultiLineInput" ref="urlTextarea" class="textarea" id="url" <textarea v-if="isMultiLineInput" ref="urlTextarea" class="textarea" id="url"
:disabled="!socket.isConnected || addInProgress" v-model="form.url" @keydown="handleKeyDown" :disabled="addInProgress" v-model="form.url" @keydown="handleKeyDown" @input="adjustTextareaHeight"
@input="adjustTextareaHeight"
style="resize: none; overflow-y: auto; min-height: 38px; max-height: 300px;" /> 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" <input v-else type="text" class="input" id="url" placeholder="URLs to download"
:disabled="!socket.isConnected || addInProgress" v-model="form.url" @keydown="handleKeyDown" :disabled="addInProgress" v-model="form.url" @keydown="handleKeyDown" @paste="handlePaste">
@paste="handlePaste">
</div> </div>
<div class="control"> <div class="control">
<button type="submit" class="button is-primary" :class="{ 'is-loading': addInProgress }" <button type="submit" class="button is-primary" :class="{ 'is-loading': addInProgress }"
:disabled="!socket.isConnected || addInProgress || !hasValidUrl"> :disabled="addInProgress || !hasValidUrl">
<span class="icon"><i class="fa-solid fa-plus" /></span> <span class="icon"><i class="fa-solid fa-plus" /></span>
<span>Add</span> <span>Add</span>
</button> </button>
@ -45,8 +43,8 @@
</div> </div>
<div class="control is-expanded"> <div class="control is-expanded">
<div class="select is-fullwidth"> <div class="select is-fullwidth">
<select id="preset" class="is-fullwidth" <select id="preset" class="is-fullwidth" :disabled="addInProgress || hasFormatInConfig"
:disabled="!socket.isConnected || addInProgress || hasFormatInConfig" v-model="form.preset" v-model="form.preset"
v-tooltip.bottom="hasFormatInConfig ? 'Presets are disabled. Format key is present in the command options for yt-dlp.' : ''"> 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"> <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"> <option v-for="cPreset in filter_presets(false)" :key="cPreset.name" :value="cPreset.name">
@ -77,15 +75,13 @@
</div> </div>
<div class="control is-expanded"> <div class="control is-expanded">
<input type="text" class="input is-fullwidth" id="folder" v-model="form.folder" <input type="text" class="input is-fullwidth" id="folder" v-model="form.folder"
:placeholder="getDefault('folder', '/')" :disabled="!socket.isConnected || addInProgress" :placeholder="getDefault('folder', '/')" :disabled="addInProgress" list="folders">
list="folders">
</div> </div>
</div> </div>
</div> </div>
<div class="column is-align-content-end"> <div class="column is-align-content-end">
<button type="button" class="button is-info" @click="showAdvanced = !showAdvanced" <button type="button" class="button is-info" @click="showAdvanced = !showAdvanced">
:disabled="!socket.isConnected">
<span class="icon"><i class="fa-solid fa-cog" /></span> <span class="icon"><i class="fa-solid fa-cog" /></span>
<span>Advanced Options</span> <span>Advanced Options</span>
</button> </button>
@ -104,24 +100,22 @@
<div class="columns is-multiline is-mobile" v-if="showAdvanced"> <div class="columns is-multiline is-mobile" v-if="showAdvanced">
<div class="column is-2-tablet is-12-mobile"> <div class="column is-2-tablet is-12-mobile">
<DLInput id="force_download" type="bool" label="Force download" icon="fa-solid fa-download" <DLInput id="force_download" type="bool" label="Force download" icon="fa-solid fa-download"
v-model="dlFields['--no-download-archive']" :disabled="!socket.isConnected || addInProgress" v-model="dlFields['--no-download-archive']" :disabled="addInProgress" description="Ignore archive." />
description="Ignore archive." />
</div> </div>
<div class="column is-2-tablet is-12-mobile"> <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" <DLInput id="auto_start" type="bool" label="Auto start" v-model="auto_start" icon="fa-solid fa-play"
:disabled="!socket.isConnected || addInProgress" description="Download automatically." /> :disabled="addInProgress" description="Download automatically." />
</div> </div>
<div class="column is-2-tablet is-12-mobile"> <div class="column is-2-tablet is-12-mobile">
<DLInput id="no_cache" type="bool" label="Bypass cache" icon="fa-solid fa-broom" <DLInput id="no_cache" type="bool" label="Bypass cache" icon="fa-solid fa-broom"
v-model="dlFields['--no-continue']" :disabled="!socket.isConnected || addInProgress" v-model="dlFields['--no-continue']" :disabled="addInProgress" description="Remove temporary files." />
description="Remove temporary files." />
</div> </div>
<div class="column is-6-tablet is-12-mobile"> <div class="column is-6-tablet is-12-mobile">
<DLInput id="output_template" type="string" label="Output template" v-model="form.template" <DLInput id="output_template" type="string" label="Output template" v-model="form.template"
icon="fa-solid fa-file" :disabled="!socket.isConnected || addInProgress" icon="fa-solid fa-file" :disabled="addInProgress"
:placeholder="getDefault('template', config.app.output_template || '%(title)s.%(ext)s')"> :placeholder="getDefault('template', config.app.output_template || '%(title)s.%(ext)s')">
<template #help> <template #help>
<span class="help is-bold is-unselectable"> <span class="help is-bold is-unselectable">
@ -140,7 +134,7 @@
<span>Command options for yt-dlp</span> <span>Command options for yt-dlp</span>
</label> </label>
<TextareaAutocomplete id="cli_options" v-model="form.cli" :options="ytDlpOpt" <TextareaAutocomplete id="cli_options" v-model="form.cli" :options="ytDlpOpt"
:placeholder="getDefault('cli', '')" :disabled="!socket.isConnected || addInProgress" /> :placeholder="getDefault('cli', '')" :disabled="addInProgress" />
<span class="help is-bold"> <span class="help is-bold">
<span class="icon"><i class="fa-solid fa-info" /></span> <span class="icon"><i class="fa-solid fa-info" /></span>
<span> <span>
@ -161,7 +155,7 @@
</span> </span>
</label> </label>
<TextDropzone ref="cookiesDropzoneRef" id="ytdlpCookies" v-model="form.cookies" <TextDropzone ref="cookiesDropzoneRef" id="ytdlpCookies" v-model="form.cookies"
:disabled="!socket.isConnected || addInProgress" @error="(msg: string) => toast.error(msg)" :disabled="addInProgress" @error="(msg: string) => toast.error(msg)"
:placeholder="getDefault('cookies', 'Leave empty to use default cookies. Or drag & drop a cookie file here.')" /> :placeholder="getDefault('cookies', 'Leave empty to use default cookies. Or drag & drop a cookie file here.')" />
<span class="help is-bold"> <span class="help is-bold">
<span class="icon"><i class="fa-solid fa-info" /></span> <span class="icon"><i class="fa-solid fa-info" /></span>
@ -177,8 +171,7 @@
<div class="column is-6-tablet is-12-mobile" v-for="(fi, index) in sortedDLFields" <div class="column is-6-tablet is-12-mobile" v-for="(fi, index) in sortedDLFields"
:key="fi.id || `dlf-${index}`"> :key="fi.id || `dlf-${index}`">
<DLInput :id="fi?.id || `dlf-${index}`" :type="fi.kind" :description="fi.description" :label="fi.name" <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" :icon="fi.icon" v-model="dlFields[fi.field]" :field="fi.field" :disabled="addInProgress" />
:disabled="!socket.isConnected || addInProgress" />
</div> </div>
</template> </template>
<div class="column is-12 is-hidden-tablet"> <div class="column is-12 is-hidden-tablet">
@ -216,14 +209,13 @@
<div class="field is-grouped is-justify-self-end is-hidden-mobile"> <div class="field is-grouped is-justify-self-end is-hidden-mobile">
<div class="control"> <div class="control">
<button type="button" class="button is-purple" @click="() => showFields = true" <button type="button" class="button is-purple" @click="() => showFields = true"
:disabled="!socket.isConnected" v-tooltip="'Manage custom fields'"> v-tooltip="'Manage custom fields'">
<span class="icon"><i class="fa-solid fa-plus" /></span> <span class="icon"><i class="fa-solid fa-plus" /></span>
</button> </button>
</div> </div>
<div class="control" v-if="config.app.console_enabled" v-tooltip="'Run directly in console'"> <div class="control" v-if="config.app.console_enabled" v-tooltip="'Run directly in console'">
<button type="button" class="button is-warning" @click="runCliCommand" <button type="button" class="button is-warning" @click="runCliCommand" :disabled="!hasValidUrl">
:disabled="!socket.isConnected || !hasValidUrl">
<span class="icon"><i class="fa-solid fa-terminal" /></span> <span class="icon"><i class="fa-solid fa-terminal" /></span>
</button> </button>
</div> </div>
@ -232,21 +224,21 @@
<button type="button" class="button is-info" <button type="button" class="button is-info"
v-tooltip="'Get yt-dlp information for the provided URL.'" v-tooltip="'Get yt-dlp information for the provided URL.'"
@click="emitter('getInfo', splitUrls(form.url || '')[0] || '', form.preset, form.cli)" @click="emitter('getInfo', splitUrls(form.url || '')[0] || '', form.preset, form.cli)"
:disabled="!socket.isConnected || addInProgress || !hasValidUrl"> :disabled="addInProgress || !hasValidUrl">
<span class="icon"><i class="fa-solid fa-info" /></span> <span class="icon"><i class="fa-solid fa-info" /></span>
</button> </button>
</div> </div>
<div class="control" v-if="config.app.console_enabled"> <div class="control" v-if="config.app.console_enabled">
<button type="button" class="button is-success" @click="testDownloadOptions" <button type="button" class="button is-success" @click="testDownloadOptions" :disabled="!hasValidUrl"
:disabled="!socket.isConnected || !hasValidUrl" v-tooltip="'Show compiled yt-dlp options.'"> v-tooltip="'Show compiled yt-dlp options.'">
<span class="icon"><i class="fa-solid fa-flask" /></span> <span class="icon"><i class="fa-solid fa-flask" /></span>
</button> </button>
</div> </div>
<div class="control"> <div class="control">
<button type="button" class="button is-danger" @click="resetConfig" <button type="button" class="button is-danger" @click="resetConfig" :disabled="!!(form?.id)"
:disabled="!!(!socket.isConnected || form?.id)" v-tooltip="'Reset local settings'"> v-tooltip="'Reset local settings'">
<span class="icon"><i class="fa-solid fa-rotate-left" /></span> <span class="icon"><i class="fa-solid fa-rotate-left" /></span>
</button> </button>
</div> </div>
@ -286,7 +278,6 @@ const emitter = defineEmits<{
(e: 'clear_form'): void (e: 'clear_form'): void
}>() }>()
const config = useConfigStore() const config = useConfigStore()
const socket = useSocketStore()
const toast = useNotification() const toast = useNotification()
const dialog = useDialog() const dialog = useDialog()

2
ui/app/pages/browser/[...slug].vue
View file

@ -95,7 +95,7 @@
</p> </p>
<p class="control"> <p class="control">
<button class="button is-info" @click="reloadContent(path, true)" :class="{ 'is-loading': isLoading }" <button class="button is-info" @click="reloadContent(path, true)" :class="{ 'is-loading': isLoading }"
:disabled="!socket.isConnected || isLoading"> :disabled="isLoading">
<span class="icon"><i class="fas fa-refresh" /></span> <span class="icon"><i class="fas fa-refresh" /></span>
</button> </button>
</p> </p>

2
ui/app/pages/conditions.vue
View file

@ -24,7 +24,7 @@
</p> </p>
<p class="control"> <p class="control">
<button class="button is-info" @click="reloadContent(false)" :class="{ 'is-loading': isLoading }" <button class="button is-info" @click="reloadContent(false)" :class="{ 'is-loading': isLoading }"
:disabled="!socket.isConnected || isLoading" v-if="items && items.length > 0"> :disabled="isLoading" v-if="items && items.length > 0">
<span class="icon"><i class="fas fa-refresh" /></span> <span class="icon"><i class="fas fa-refresh" /></span>
<span v-if="!isMobile">Reload</span> <span v-if="!isMobile">Reload</span>
</button> </button>

3
ui/app/pages/index.vue
View file

@ -9,7 +9,7 @@
</span> </span>
</span> </span>
<div class="is-pulled-right" v-if="socket.isConnected"> <div class="is-pulled-right">
<div class="field is-grouped"> <div class="field is-grouped">
<p class="control has-icons-left" v-if="toggleFilter"> <p class="control has-icons-left" v-if="toggleFilter">
<input type="search" v-model.lazy="query" class="input" id="filter" <input type="search" v-model.lazy="query" class="input" id="filter"
@ -114,7 +114,6 @@ import type { StoreItem } from '~/types/store'
const config = useConfigStore() const config = useConfigStore()
const stateStore = useStateStore() const stateStore = useStateStore()
const socket = useSocketStore()
const route = useRoute() const route = useRoute()
const router = useRouter() const router = useRouter()

4
ui/app/pages/notifications.vue
View file

@ -25,7 +25,7 @@
</p> </p>
<p class="control" v-if="notifications.length > 0"> <p class="control" v-if="notifications.length > 0">
<button class="button is-warning" @click="sendTest" v-tooltip="'Send test notification.'" <button class="button is-warning" @click="sendTest" v-tooltip="'Send test notification.'"
:class="{ 'is-loading': isLoading }" :disabled="!socket.isConnected || isLoading"> :class="{ 'is-loading': isLoading }" :disabled="isLoading">
<span class="icon"><i class="fas fa-paper-plane"></i></span> <span class="icon"><i class="fas fa-paper-plane"></i></span>
<span v-if="!isMobile">Send Test</span> <span v-if="!isMobile">Send Test</span>
</button> </button>
@ -44,7 +44,7 @@
<p class="control" v-if="notifications.length > 0"> <p class="control" v-if="notifications.length > 0">
<button class="button is-info" @click="reloadContent()" :class="{ 'is-loading': isLoading }" <button class="button is-info" @click="reloadContent()" :class="{ 'is-loading': isLoading }"
:disabled="!socket.isConnected || isLoading || notifications.length < 1"> :disabled="isLoading || notifications.length < 1">
<span class="icon"><i class="fas fa-refresh"></i></span> <span class="icon"><i class="fas fa-refresh"></i></span>
</button> </button>
</p> </p>

2
ui/app/pages/presets.vue
View file

@ -37,7 +37,7 @@
</p> </p>
<p class="control"> <p class="control">
<button class="button is-info" @click="reloadContent()" :class="{ 'is-loading': isLoading }" <button class="button is-info" @click="reloadContent()" :class="{ 'is-loading': isLoading }"
:disabled="!socket.isConnected || isLoading" v-if="presets && presets.length > 0"> :disabled="isLoading" v-if="presets && presets.length > 0">
<span class="icon"><i class="fas fa-refresh" /></span> <span class="icon"><i class="fas fa-refresh" /></span>
<span v-if="!isMobile">Reload</span> <span v-if="!isMobile">Reload</span>
</button> </button>

2
ui/app/pages/tasks.vue
View file

@ -49,7 +49,7 @@
<p class="control"> <p class="control">
<button class="button is-info" @click="reloadContent()" :class="{ 'is-loading': isLoading }" <button class="button is-info" @click="reloadContent()" :class="{ 'is-loading': isLoading }"
:disabled="!socket.isConnected || isLoading" v-if="tasks && tasks.length > 0"> :disabled="isLoading" v-if="tasks && tasks.length > 0">
<span class="icon"><i class="fas fa-refresh" /></span> <span class="icon"><i class="fas fa-refresh" /></span>
<span v-if="!isMobile">Reload</span> <span v-if="!isMobile">Reload</span>
</button> </button>