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

display portrait image in more clean way

Browse source
This commit is contained in:
ArabCoders 2025-02-27 14:09:11 +03:00
parent 96260301be
commit 0cb90645cd
3 changed files with 14 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
ui/assets/css/style.css
View file

@ -249,3 +249,8 @@ hr {
.play-active { .play-active {
opacity: 1; opacity: 1;
} }
.image-portrait {
object-fit: cover;
object-position: top;
}

8
ui/components/History.vue
View file

@ -99,11 +99,13 @@
<figure class="image is-3by1"> <figure class="image is-3by1">
<span v-if="'finished' === item.status" @click="playVideo(item)" class="play-overlay"> <span v-if="'finished' === item.status" @click="playVideo(item)" class="play-overlay">
<div class="play-icon"></div> <div class="play-icon"></div>
<img :src="'/api/thumbnail?url=' + encodePath(item.extras.thumbnail)" v-if="item.extras?.thumbnail" /> <img @load="e => pImg(e)" :src="'/api/thumbnail?url=' + encodePath(item.extras.thumbnail)"
v-if="item.extras?.thumbnail" />
<img v-else src="/images/placeholder.png" /> <img v-else src="/images/placeholder.png" />
</span> </span>
<template v-else> <template v-else>
<img v-if="item.extras?.thumbnail" :src="'/api/thumbnail?url=' + encodePath(item.extras.thumbnail)" /> <img @load="e => pImg(e)" v-if="item.extras?.thumbnail"
:src="'/api/thumbnail?url=' + encodePath(item.extras.thumbnail)" />
<img v-else src="/images/placeholder.png" /> <img v-else src="/images/placeholder.png" />
</template> </template>
</figure> </figure>
@ -473,4 +475,6 @@ const reQueueItem = item => {
template: item.template, template: item.template,
}) })
} }
const pImg = e => e.target.naturalHeight > e.target.naturalWidth ? e.target.classList.add('image-portrait') : null
</script> </script>

5
ui/components/Queue.vue
View file

@ -53,8 +53,7 @@
</header> </header>
<div v-if="false === hideThumbnail" class="card-image"> <div v-if="false === hideThumbnail" class="card-image">
<figure class="image is-3by1" v-if="item.extras?.thumbnail"> <figure class="image is-3by1" v-if="item.extras?.thumbnail">
<img :alt="item.title" <img :alt="item.title" :src="'/api/thumbnail?url=' + encodePath(item.extras.thumbnail)" />
:src="'/api/thumbnail?url=' + encodePath(item.extras.thumbnail)" />
</figure> </figure>
<figure class="image is-3by1" v-else> <figure class="image is-3by1" v-else>
<img :src="'/images/placeholder.png'" /> <img :src="'/images/placeholder.png'" />
@ -274,4 +273,6 @@ const cancelItems = item => {
items.forEach(id => socket.emit('item_cancel', id)); items.forEach(id => socket.emit('item_cancel', id));
} }
const pImg = e => e.target.naturalHeight > e.target.naturalWidth ? e.target.classList.add('image-portrait') : null
</script> </script>