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

Enable floating image for list view.

Browse source
This commit is contained in:
arabcoders 2025-05-10 18:13:40 +03:00
parent 5a76f1d68a
commit f62b01b361
2 changed files with 24 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
ui/components/FloatingImage.vue
View file

@ -1,14 +1,16 @@
<template>
<vTooltip @show="loadContent" @hide="stopTimer">
<slot />
<template #popper>
<span class="icon" v-if="!url"><i class="fas fa-circle-notch fa-spin"></i></span>
<template #popper class="p-0 m-0">
<span class="icon" v-if="!url"><i class="fas fa-circle-notch fa-spin" /></span>
<template v-else>
<div>
<h1 v-if="props.title" class="is-4">{{ props.title }}</h1>
<img :src="url" style="width:720px; height: auto" class="card-image" :alt="props.title" @error="clearCache"
:crossorigin="props.privacy ? 'anonymous' : 'use-credentials'"
:referrerpolicy="props.privacy ? 'no-referrer' : 'origin'" />
<div style="max-width:650px" class="m-1">
<div class="is-block" style="word-break: all;" v-text="props.title" v-if="props.title" />
<figure class="image is-3by1">
<img @load="e => pImg(e)" :src="url" :alt="props.title" @error="clearCache"
:crossorigin="props.privacy ? 'anonymous' : 'use-credentials'"
:referrerpolicy="props.privacy ? 'no-referrer' : 'origin'" />
</figure>
</div>
</template>
</template>
@ -54,9 +56,7 @@ const defaultLoader = async () => {
return
}
const response = await request('/api/thumbnail?url=' + encodePath(props.image), {
signal: cancelRequest.signal,
})
const response = await request(props.image, { signal: cancelRequest.signal })
if (200 !== response.status) {
toast.error(`ImageView Request error. ${response.status}: ${response.statusText}`)
@ -110,4 +110,6 @@ const clearCache = async () => {
url.value = '';
return loadContent()
}
const pImg = e => e.target.naturalHeight > e.target.naturalWidth ? e.target.classList.add('image-portrait') : null
</script>

14
ui/components/History.vue
View file

@ -107,9 +107,19 @@
</label>
</td>
<td class="is-vcentered">
<div class="is-text-overflow" v-tooltip="item.title">
<NuxtLink target="_blank" :href="item.url">{{ item.title }}</NuxtLink>
<div v-if="item.extras.thumbnail">
<FloatingImage :image="'/api/thumbnail?url=' + encodePath(item.extras.thumbnail)"
:title="item.title">
<div class="is-text-overflow">
<NuxtLink target="_blank" :href="item.url">{{ item.title }}</NuxtLink>
</div>
</FloatingImage>
</div>
<template v-else>
<div class="is-text-overflow" v-tooltip="item.title">
<NuxtLink target="_blank" :href="item.url">{{ item.title }}</NuxtLink>
</div>
</template>
<div v-if="item.error" class="is-text-overflow is-pointer" @click="toggle_class($event)">
<span class="has-text-danger">{{ item.error }}</span>
</div>