Show video duration in thumbnail (#269)

This commit is contained in:
carlssonemil 2021-07-20 23:28:29 +02:00
parent fca4d88202
commit 7add9c9d8e
2 changed files with 24 additions and 17 deletions

View file

@ -27,7 +27,14 @@
>
<div class="uk-text-secondary">
<router-link class="uk-text-emphasis" v-bind:to="result.url">
<div class="uk-position-relative">
<img style="width: 100%" v-bind:src="result.thumbnail" loading="lazy" />
<span
v-if="result.duration"
class="uk-label uk-border-rounded uk-position-absolute uk-dark"
style="bottom: 5px; right: 5px; opacity: .95;"
>{{ timeFormat(result.duration) }}</span>
</div>
<p>
{{ result.name }}&thinsp;<font-awesome-icon
v-if="result.verified"
@ -44,9 +51,6 @@
></font-awesome-icon>
</p>
</router-link>
<b v-if="result.duration" class="uk-text-small uk-align-right uk-text-align-right">
{{ timeFormat(result.duration) }}
</b>
<b v-if="result.uploadDate">
{{ result.uploadDate }}

View file

@ -1,6 +1,7 @@
<template>
<div class="uk-text-secondary" :style="[{ background: backgroundColor }]">
<router-link class="uk-text-emphasis" v-bind:to="video.url">
<div class="uk-position-relative">
<img
:height="height"
:width="width"
@ -9,6 +10,12 @@
alt="thumbnail"
loading="lazy"
/>
<span
v-if="video.duration"
class="uk-label uk-border-rounded uk-position-absolute uk-dark"
style="bottom: 5px; right: 5px; opacity: .95;"
>{{ timeFormat(video.duration) }}</span>
</div>
<p>{{ video.title }}</p>
</router-link>
@ -32,10 +39,6 @@
</div>
</b>
<div class="uk-align-right">
<b class="uk-text-small">{{ timeFormat(video.duration) }}</b>
<br />
<router-link :to="video.url + '&listen=1'">
<font-awesome-icon icon="headphones"></font-awesome-icon>
</router-link>