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

Add option to completely disable videos thumbnail.

Browse source
This commit is contained in:
arabcoders 2025-06-05 21:36:52 +03:00
parent 0f0dd51a41
commit 8b0b744d98
4 changed files with 70 additions and 55 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
ui/components/History.vue
View file

@ -107,7 +107,7 @@
</label>
</td>
<td class="is-vcentered">
<div v-if="item.extras.thumbnail">
<div v-if="showThumbnails && item.extras.thumbnail">
<FloatingImage :image="uri('/api/thumbnail?url=' + encodePath(item.extras.thumbnail))"
:title="item.title">
<div class="is-text-overflow">
@ -198,37 +198,36 @@
</div>
<div class="columns is-multiline" v-else>
<LateLoader :unrender="true" :min-height="hideThumbnail ? 210 : 410" class="column is-6"
<LateLoader :unrender="true" :min-height="showThumbnails ? 410 : 210" class="column is-6"
v-for="item in sortCompleted" :key="item._id">
<div class="card is-flex is-full-height is-flex-direction-column"
:class="{ 'is-bordered-danger': item.status === 'error', 'is-bordered-info': item.live_in || item.is_live }">
<header class="card-header has-tooltip">
<header class="card-header ">
<div class="card-header-title is-text-overflow is-block" v-tooltip="item.title">
<NuxtLink target="_blank" :href="item.url">{{ item.title }}</NuxtLink>
<NuxtLink target="_blank" :href="item.url" class="has-tooltip">{{ item.title }}</NuxtLink>
</div>
<div class="card-header-icon">
<span v-if="hideThumbnail">
<span v-if="!showThumbnails">
<a v-if="'finished' === item.status && item.filename" href="#" @click.prevent="playVideo(item)"
v-tooltip="'Play video.'">
<span class="icon"><i class="fa-solid fa-play" /></span>
</a>
<a v-else-if="isEmbedable(item.url)" href="#" @click.prevent="embed_url = getEmbedable(item.url)"
v-tooltip="'Play video.'">
v-tooltip="'Play video.'" class="has-text-danger">
<span class="icon"><i class="fa-solid fa-play" /></span>
</a>
</span>
<a :href="item.url" class="has-text-primary" v-tooltip="'Copy url.'" @click.prevent="copyText(item.url)">
<span class="icon"><i class="fa-solid fa-copy" /></span>
</a>
<button @click="hideThumbnail = !hideThumbnail">
<button @click="hideThumbnail = !hideThumbnail" v-if="thumbnails">
<span class="icon"><i class="fa-solid"
:class="{ 'fa-arrow-down': hideThumbnail, 'fa-arrow-up': !hideThumbnail, }" /></span>
</button>
</div>
</header>
<div v-if="false === hideThumbnail" class="card-image">
<div v-if="showThumbnails" class="card-image">
<figure class="image is-3by1">
<span v-if="'finished' === item.status && item.filename" @click="playVideo(item)" class="play-overlay">
<div class="play-icon"></div>
@ -382,6 +381,14 @@ import { makeDownload, formatBytes, uri } from '~/utils/index'
import { isEmbedable, getEmbedable } from '~/utils/embedable'
const emitter = defineEmits(['getInfo', 'add_new'])
const props = defineProps({
thumbnails: {
type: Boolean,
default: true
}
})
const config = useConfigStore()
const stateStore = useStateStore()
const socket = useSocketStore()
@ -401,6 +408,8 @@ const video_item = ref(null)
const playVideo = item => video_item.value = item
const closeVideo = () => video_item.value = null
const showThumbnails = computed(() => props.thumbnails && !hideThumbnail.value)
const bg_enable = useStorage('random_bg', true)
const bg_opacity = useStorage('random_bg_opacity', 0.85)

15
ui/components/Queue.vue
View file

@ -66,7 +66,7 @@
</label>
</td>
<td class="is-text-overflow is-vcentered">
<div v-if="item.extras?.thumbnail">
<div v-if="showThumbnails && item.extras?.thumbnail">
<FloatingImage :image="uri('/api/thumbnail?url=' + encodePath(item.extras.thumbnail))"
:title="item.title">
<div class="is-text-overflow">
@ -128,7 +128,7 @@
</div>
<div class="columns is-multiline" v-else>
<LateLoader :unrender="true" :min-height="hideThumbnail ? 265 : 475" class="column is-6"
<LateLoader :unrender="true" :min-height="showThumbnails ? 475 : 265" class="column is-6"
v-for="item in stateStore.queue" :key="item._id">
<div class="card is-flex is-full-height is-flex-direction-column">
<header class="card-header">
@ -139,13 +139,13 @@
<a :href="item.url" class="has-text-primary" v-tooltip="'Copy url.'" @click.prevent="copyText(item.url)">
<span class="icon"><i class="fa-solid fa-copy" /></span>
</a>
<button @click="hideThumbnail = !hideThumbnail">
<button @click="hideThumbnail = !hideThumbnail" v-if="thumbnails">
<span class="icon"><i class="fa-solid"
:class="{ 'fa-arrow-down': hideThumbnail, 'fa-arrow-up': !hideThumbnail, }" /></span>
</button>
</div>
</header>
<div v-if="false === hideThumbnail" class="card-image">
<div v-if="showThumbnails" class="card-image">
<figure class="image is-3by1">
<span v-if="isEmbedable(item.url)" @click="embed_url = getEmbedable(item.url)" class="play-overlay">
<div class="play-icon embed-icon"></div>
@ -247,6 +247,12 @@ import { ucFirst } from '~/utils/index'
import { isEmbedable, getEmbedable } from '~/utils/embedable'
const emitter = defineEmits(['getInfo'])
const props = defineProps({
thumbnails: {
type: Boolean,
default: true
}
})
const config = useConfigStore()
const stateStore = useStateStore()
const socket = useSocketStore()
@ -257,6 +263,7 @@ const masterSelectAll = ref(false)
const showQueue = useStorage('showQueue', true)
const hideThumbnail = useStorage('hideThumbnailQueue', false)
const display_style = useStorage('display_style', 'cards')
const showThumbnails = computed(() => props.thumbnails && !hideThumbnail.value)
const embed_url = ref('')

77
ui/components/Settings.vue
View file

@ -11,92 +11,87 @@
<div class="card-content">
<div class="columns is-multiline">
<div class="column is-6">
<div class="field">
<label class="label">Color scheme</label>
<label class="label is-unselectable">Color scheme</label>
<div class="control">
<label for="auto" class="radio">
<input id="auto" type="radio" v-model="selectedTheme" value="auto">
System Default
<span class="icon"><i class="fa-solid fa-circle-half-stroke" /></span>
<span>Auto</span>
</label>
<label for="light" class="radio">
<input id="light" type="radio" v-model="selectedTheme" value="light">
Light
<span class="icon has-text-warning"><i class="fa-solid fa-sun" /></span>
<span>Light</span>
</label>
<label for="dark" class="radio">
<input id="dark" type="radio" v-model="selectedTheme" value="dark">
Dark
<span class="icon"><i class="fa-solid fa-moon" /></span>
<span>Dark</span>
</label>
</div>
<p class="help">
<span class="icon"><i class="fa-solid fa-info" /></span>
<span>Select the color scheme for the WebUI.</span>
</p>
</div>
<div class="field">
<label class="label" for="random_bg">Backgrounds</label>
<label class="label is-unselectable">
Backgrounds
<template v-if="bg_enable">
<NuxtLink @click="$emit('reload_bg')" class="is-bold">Reload</NuxtLink>
<span class="icon" v-if="isLoading"><i class="fa fa-spin fa-spinner" /></span>
</template>
</label>
<div class="control">
<input id="random_bg" type="checkbox" class="switch is-success" v-model="bg_enable">
<label for="random_bg" class="is-unselectable">&nbsp;Enable</label>
<label for="random_bg" class="is-unselectable">
&nbsp;{{ bg_enable ? 'Enabled' : 'Disabled' }}
</label>
</div>
<p class="help">
<span class="icon"><i class="fa-solid fa-info" /></span>
<span>
Use random background image.
<NuxtLink @click="$emit('reload_bg')" class="is-bold" v-if="bg_enable">
Reload
</NuxtLink>
<span class="icon" v-if="isLoading"><i class="fa fa-spin fa-spinner" /></span>
</span>
</p>
</div>
<div class="field">
<label class="label" for="random_bg_opacity">
Background Visibility: (<code>{{ bg_opacity }}</code>)
<label class="label is-unselectable" for="random_bg_opacity">
Background visibility <code>{{ parseFloat(1.0 - bg_opacity).toFixed(2) }}</code>
</label>
<div class="control">
<input id="random_bg_opacity" style="width: 100%" type="range" v-model="bg_opacity" min="0.50"
max="1.00" step="0.05">
</div>
<p class="help">
<span class="icon"><i class="fa-solid fa-info" /></span>
<span>How visible the background image should be.</span>
</p>
</div>
<div class="field">
<label class="label is-unselectable" for="show_thumbnail">Show Videos Thumbnail when possible</label>
<div class="control">
<input id="show_thumbnail" type="checkbox" class="switch is-success" v-model="show_thumbnail">
<label for="show_thumbnail" class="is-unselectable">
&nbsp;{{ show_thumbnail ? 'Enabled' : 'Disabled' }}
</label>
</div>
</div>
</div>
<div class="column is-6">
<div class="field">
<label class="label" for="reduce_confirm">Reduce confirm box usage</label>
<label class="label is-unselectable" for="reduce_confirm">Reduce confirm box usage</label>
<div class="control">
<input id="reduce_confirm" type="checkbox" class="switch is-success" v-model="reduce_confirm">
<label for="reduce_confirm" class="is-unselectable">
&nbsp;{{ reduce_confirm ? 'Enabled' : 'Disabled' }}
</label>
</div>
<p class="help">
<span class="icon"><i class="fa-solid fa-info" /></span>
<span>Reduce the usage of confirm boxes in the WebUI.</span>
</p>
</div>
<div class="field">
<label class="label" for="allow_toasts">Show toasts</label>
<label class="label" for="allow_toasts">Show notifications toasts</label>
<div class="control">
<input id="allow_toasts" type="checkbox" class="switch is-success" v-model="allow_toasts">
<label for="allow_toasts" class="is-unselectable">
&nbsp;{{ allow_toasts ? 'Enabled' : 'Disabled' }}
</label>
</div>
<p class="help">
<span class="icon"><i class="fa-solid fa-info" /></span>
<span class="has-text-danger is-bold">
Show notification toasts. If disabled, you will not see errors reported or anything else.
</span>
</p>
</div>
<div class="field">
<div class="field" v-if="allow_toasts">
<label class="label">Toasts position</label>
<div class="control">
<div class="select is-fullwidth">
@ -112,7 +107,7 @@
</div>
</div>
<div class="field">
<div class="field" v-if="allow_toasts">
<label class="label" for="dismiss_on_click">Dismiss toasts on click</label>
<div class="control">
<input id="dismiss_on_click" type="checkbox" class="switch is-success"
@ -149,4 +144,6 @@ const allow_toasts = useStorage('allow_toasts', true)
const reduce_confirm = useStorage('reduce_confirm', false)
const toast_position = useStorage('toast_position', POSITION.TOP_RIGHT)
const toast_dismiss_on_click = useStorage('toast_dismiss_on_click', true)
const show_thumbnail = useStorage('show_thumbnail', true)
</script>

6
ui/pages/index.vue
View file

@ -49,8 +49,8 @@
<NewDownload v-if="config.showForm || config.app.basic_mode" @getInfo="url => get_info = url" :item="item_form"
@clear_form="item_form = {}" />
<Queue @getInfo="url => get_info = url" />
<History @getInfo="url => get_info = url" @add_new="item => toNewDownload(item)" />
<Queue @getInfo="url => get_info = url" :thumbnails="show_thumbnail" />
<History @getInfo="url => get_info = url" @add_new="item => toNewDownload(item)" :thumbnails="show_thumbnail" />
<GetInfo v-if="get_info" :link="get_info" @closeModel="get_info = ''" />
</div>
</template>
@ -68,6 +68,8 @@ const get_info = ref('')
const bg_enable = useStorage('random_bg', true)
const bg_opacity = useStorage('random_bg_opacity', 0.85)
const display_style = useStorage('display_style', 'cards')
const show_thumbnail = useStorage('show_thumbnail', true)
const item_form = ref({})
onMounted(() => {