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

Show video duration in thumbnail (#269) (#291)

Browse source 
* Show video duration in thumbnail (#269)

* Inverse color theme and reduce horizontal padding

* Move video duration to thumbnail
This commit is contained in:
Emil Carlsson 2021-07-21 12:15:07 +02:00 committed by GitHub
parent b9f401cd39
commit 1dbfb14230
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 32 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
src/components/FeedPage.vue
View file

@ -18,7 +18,14 @@
> >
<div class="uk-text-secondary" :style="[{ background: backgroundColor }]"> <div class="uk-text-secondary" :style="[{ background: backgroundColor }]">
<router-link class="uk-text-emphasis" v-bind:to="'/watch?v=' + video.id"> <router-link class="uk-text-emphasis" v-bind:to="'/watch?v=' + video.id">
<div class="uk-position-relative">
<img style="width: 100%" v-bind:src="video.thumbnail" alt="thumbnail" loading="lazy" /> <img style="width: 100%" v-bind:src="video.thumbnail" alt="thumbnail" loading="lazy" />
<span
v-if="video.duration"
class="uk-label uk-border-rounded uk-position-absolute video-duration"
style="bottom: 5px; right: 5px; background: rgba(0, 0, 0, .75); color: white; padding: 0 5px;"
>{{ timeFormat(video.duration) }}</span>
</div>
<p>{{ video.title }}</p> <p>{{ video.title }}</p>
</router-link> </router-link>
@ -42,10 +49,6 @@
</div> </div>
</b> </b>
<div class="uk-align-right"> <div class="uk-align-right">
<b class="uk-text-small">{{ timeFormat(video.duration) }}</b>
<br />
<router-link :to="'/watch?v=' + video.id + '&listen=1'"> <router-link :to="'/watch?v=' + video.id + '&listen=1'">
<font-awesome-icon icon="headphones"></font-awesome-icon> <font-awesome-icon icon="headphones"></font-awesome-icon>
</router-link> </router-link>

10
src/components/SearchResults.vue
View file

@ -27,7 +27,14 @@
> >
<div class="uk-text-secondary"> <div class="uk-text-secondary">
<router-link class="uk-text-emphasis" v-bind:to="result.url"> <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" /> <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> <p>
{{ result.name }}&thinsp;<font-awesome-icon {{ result.name }}&thinsp;<font-awesome-icon
v-if="result.verified" v-if="result.verified"
@ -44,9 +51,6 @@
></font-awesome-icon> ></font-awesome-icon>
</p> </p>
</router-link> </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"> <b v-if="result.uploadDate">
{{ result.uploadDate }} {{ result.uploadDate }}

11
src/components/VideoItem.vue
View file

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