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

Merge videos in FeedPage with VideoItem.

Browse source
This commit is contained in:
FireMasterK 2021-07-21 18:02:17 +05:30
parent 5bd4fd9ebd
commit d3f4653e8a
No known key found for this signature in database
GPG key ID: 49451E4482CC5BCD
2 changed files with 14 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

45
src/components/FeedPage.vue
View file

@ -16,50 +16,14 @@
v-bind:key="video.url" v-bind:key="video.url"
v-for="video in videos" v-for="video in videos"
> >
<div class="uk-text-secondary" :style="[{ background: backgroundColor }]"> <VideoItem :video="video" />
<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" />
<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>
<div>
<div>
<router-link class="uk-link-muted" :to="'/channel/' + video.uploader_id">
<a>{{ video.uploader }}</a>
</router-link>
<br />
</div>
</div>
<b class="uk-text-small uk-align-left">
<div v-if="video.views >= 0">
<font-awesome-icon icon="eye"></font-awesome-icon>
{{ numberFormat(video.views) }} views
<br />
</div>
<div>
{{ timeAgo(video.uploaded) }}
</div>
</b>
<div class="uk-align-right">
<router-link :to="'/watch?v=' + video.id + '&listen=1'">
<font-awesome-icon icon="headphones"></font-awesome-icon>
</router-link>
</div>
</div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import VideoItem from "@/components/VideoItem.vue";
export default { export default {
data() { data() {
return { return {
@ -84,5 +48,8 @@ export default {
return _this.apiUrl() + "/feed/rss?authToken=" + _this.getAuthToken(); return _this.apiUrl() + "/feed/rss?authToken=" + _this.getAuthToken();
}, },
}, },
components: {
VideoItem,
},
}; };
</script> </script>

12
src/components/VideoItem.vue
View file

@ -10,11 +10,12 @@
alt="thumbnail" alt="thumbnail"
loading="lazy" loading="lazy"
/> />
<span <span
v-if="video.duration" v-if="video.duration"
class="uk-label uk-border-rounded uk-position-absolute 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;" style="bottom: 5px; right: 5px; background: rgba(0, 0, 0, .75); color: white; padding: 0 5px;"
>{{ timeFormat(video.duration) }}</span> >{{ timeFormat(video.duration) }}</span
>
</div> </div>
<p>{{ video.title }}</p> <p>{{ video.title }}</p>
</router-link> </router-link>
@ -37,6 +38,9 @@
<div v-if="video.uploadedDate"> <div v-if="video.uploadedDate">
{{ video.uploadedDate }} {{ video.uploadedDate }}
</div> </div>
<div v-if="video.uploaded">
{{ timeAgo(video.uploaded) }}
</div>
</b> </b>
<div class="uk-align-right"> <div class="uk-align-right">
<router-link :to="video.url + '&listen=1'"> <router-link :to="video.url + '&listen=1'">
@ -55,4 +59,4 @@ export default {
hideChannel: Boolean, hideChannel: Boolean,
}, },
}; };
</script> </script>