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

13
src/components/FeedPage.vue
View file

@ -18,7 +18,14 @@
>
<div class="uk-text-secondary" :style="[{ background: backgroundColor }]">
<router-link class="uk-text-emphasis" v-bind:to="'/watch?v=' + video.id">
<img style="width: 100%" v-bind:src="video.thumbnail" alt="thumbnail" loading="lazy" />
<div class="uk-position-relative">
<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>
</router-link>
@ -42,10 +49,6 @@
</div>
</b>
<div class="uk-align-right">
<b class="uk-text-small">{{ timeFormat(video.duration) }}</b>
<br />
<router-link :to="'/watch?v=' + video.id + '&listen=1'">
<font-awesome-icon icon="headphones"></font-awesome-icon>
</router-link>

12
src/components/SearchResults.vue
View file

@ -27,7 +27,14 @@
>
<div class="uk-text-secondary">
<router-link class="uk-text-emphasis" v-bind:to="result.url">
<img style="width: 100%" v-bind:src="result.thumbnail" loading="lazy" />
<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 }}

29
src/components/VideoItem.vue
View file

@ -1,14 +1,21 @@
<template>
<div class="uk-text-secondary" :style="[{ background: backgroundColor }]">
<router-link class="uk-text-emphasis" v-bind:to="video.url">
<img
:height="height"
:width="width"
style="width: 100%"
v-bind:src="video.thumbnail"
alt="thumbnail"
loading="lazy"
/>
<div class="uk-position-relative">
<img
:height="height"
:width="width"
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>
</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>
@ -52,4 +55,4 @@ export default {
hideChannel: Boolean,
},
};
</script>
</script>