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:
kskarthik 2022-06-25 16:30:45 +05:30 committed by GitHub
parent e875856997
commit 187804f9a1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 28 additions and 2 deletions

View File

@ -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>

View File

@ -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}?",