TeamPiped-mirror/Piped
1
0
Fork 0
mirror of https://github.com/TeamPiped/Piped.git synced 2024-08-14 23:57:27 +00:00
Code Issues Projects Releases Packages Wiki Activity

Add class for short videos.

Browse source
This commit is contained in:
Kavin 2022-06-25 11:56:02 +01:00
parent 1712a43202
commit b30d7f2e95
No known key found for this signature in database
GPG key ID: 49451E4482CC5BCD
1 changed files with 11 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

13
src/components/VideoItem.vue
View file

@ -11,10 +11,10 @@
}" }"
> >
<img <img
:style="`max-height: ${height}px; max-width: ${width}px; object-fit: contain`"
class="w-full" class="w-full"
:src="video.thumbnail" :src="video.thumbnail"
:alt="video.title" :alt="video.title"
:class="{ 'shorts-img': short }"
loading="lazy" loading="lazy"
/> />
<div class="relative text-sm"> <div class="relative text-sm">
@ -24,7 +24,7 @@
v-text="timeFormat(video.duration)" v-text="timeFormat(video.duration)"
/> />
<!-- shorts thumbnail --> <!-- shorts thumbnail -->
<span class="thumbnail-overlay thumbnail-left" v-if="video.duration <= 60" v-t="'video.shorts'" /> <span class="thumbnail-overlay thumbnail-left" v-if="short" v-t="'video.shorts'" />
<span <span
class="thumbnail-overlay thumbnail-right" class="thumbnail-overlay thumbnail-right"
v-else-if="video.duration >= 60" v-else-if="video.duration >= 60"
@ -124,6 +124,10 @@
.thumbnail-left { .thumbnail-left {
@apply bottom-5px left-5px text-xs font-bold bg-red-600 uppercase; @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>
@ -170,6 +174,11 @@ export default {
} }
}, },
}, },
computed: {
short() {
return this.video.duration > 0 && this.video.duration <= 60;
},
},
components: { PlaylistAddModal }, components: { PlaylistAddModal },
}; };
</script> </script>