mirror of
https://github.com/TeamPiped/Piped.git
synced 2024-11-10 10:18:23 +00:00
Fix shorts Thumbnail scaling (#1153)
* handle shorts videos in trending page * shorts label for video items if video length <= a minute * fix translation * fix: shorts thumbnail scaling * Use tailwind classes and properly do localization. * Add class for short videos. Co-authored-by: Kavin <20838718+FireMasterK@users.noreply.github.com>
This commit is contained in:
parent
e875856997
commit
187804f9a1
@ -10,13 +10,26 @@
|
|||||||
},
|
},
|
||||||
}"
|
}"
|
||||||
>
|
>
|
||||||
<img :height="height" :width="width" class="w-full" :src="video.thumbnail" alt="" loading="lazy" />
|
<img
|
||||||
|
class="w-full"
|
||||||
|
:src="video.thumbnail"
|
||||||
|
:alt="video.title"
|
||||||
|
:class="{ 'shorts-img': short }"
|
||||||
|
loading="lazy"
|
||||||
|
/>
|
||||||
<div class="relative text-sm">
|
<div class="relative text-sm">
|
||||||
<span
|
<span
|
||||||
class="thumbnail-overlay thumbnail-right"
|
class="thumbnail-overlay thumbnail-right"
|
||||||
v-if="video.duration > 0"
|
v-if="video.duration > 0"
|
||||||
v-text="timeFormat(video.duration)"
|
v-text="timeFormat(video.duration)"
|
||||||
/>
|
/>
|
||||||
|
<!-- shorts thumbnail -->
|
||||||
|
<span class="thumbnail-overlay thumbnail-left" v-if="short" v-t="'video.shorts'" />
|
||||||
|
<span
|
||||||
|
class="thumbnail-overlay thumbnail-right"
|
||||||
|
v-else-if="video.duration >= 60"
|
||||||
|
v-text="timeFormat(video.duration)"
|
||||||
|
/>
|
||||||
<i18n-t v-else keypath="video.live" class="thumbnail-overlay thumbnail-right !bg-red-600" tag="div">
|
<i18n-t v-else keypath="video.live" class="thumbnail-overlay thumbnail-right !bg-red-600" tag="div">
|
||||||
<font-awesome-icon class="!w-3" :icon="['fas', 'broadcast-tower']" />
|
<font-awesome-icon class="!w-3" :icon="['fas', 'broadcast-tower']" />
|
||||||
</i18n-t>
|
</i18n-t>
|
||||||
@ -108,6 +121,13 @@
|
|||||||
.thumbnail-right {
|
.thumbnail-right {
|
||||||
@apply bottom-5px right-5px;
|
@apply bottom-5px right-5px;
|
||||||
}
|
}
|
||||||
|
.thumbnail-left {
|
||||||
|
@apply bottom-5px left-5px text-xs font-bold bg-red-600 uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shorts-img {
|
||||||
|
@apply max-h-[17.5vh] w-full object-contain;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
@ -154,6 +174,11 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
computed: {
|
||||||
|
short() {
|
||||||
|
return this.video.duration > 0 && this.video.duration <= 60;
|
||||||
|
},
|
||||||
|
},
|
||||||
components: { PlaylistAddModal },
|
components: { PlaylistAddModal },
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
@ -105,7 +105,8 @@
|
|||||||
"sponsor_segments": "Sponsors Segments",
|
"sponsor_segments": "Sponsors Segments",
|
||||||
"ratings_disabled": "Ratings Disabled",
|
"ratings_disabled": "Ratings Disabled",
|
||||||
"chapters": "Chapters",
|
"chapters": "Chapters",
|
||||||
"live": "{0} Live"
|
"live": "{0} Live",
|
||||||
|
"shorts": "Shorts"
|
||||||
},
|
},
|
||||||
"search": {
|
"search": {
|
||||||
"did_you_mean": "Did you mean: {0}?",
|
"did_you_mean": "Did you mean: {0}?",
|
||||||
|
Loading…
Reference in New Issue
Block a user