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

14
ui/components/History.vue
View file

@ -107,9 +107,19 @@
</label> </label>
</td> </td>
<td class="is-vcentered"> <td class="is-vcentered">
<div class="is-text-overflow" v-tooltip="item.title"> <div v-if="item.extras.thumbnail">
<NuxtLink target="_blank" :href="item.url">{{ item.title }}</NuxtLink> <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> </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)"> <div v-if="item.error" class="is-text-overflow is-pointer" @click="toggle_class($event)">
<span class="has-text-danger">{{ item.error }}</span> <span class="has-text-danger">{{ item.error }}</span>
</div> </div>