1
0
mirror of https://github.com/TeamPiped/Piped.git synced 2024-12-15 14:50:28 +05:30
Piped/src/components/VideoItem.vue
FireMasterK 18752c7de7
Add light theme. (#219)
* Add light theme.

* Reload on theme change.
2021-06-29 01:15:03 +05:30

56 lines
1.7 KiB
Vue

<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"
/>
<p>{{ video.title }}</p>
</router-link>
<div :class="{ 'uk-align-left': !(video.views >= 0 || video.uploadedDate) }">
<div v-if="video.uploaderUrl && video.uploaderName && !hideChannel">
<router-link class="uk-link-muted" :to="video.uploaderUrl">
<a>{{ video.uploaderName }}</a>
</router-link>
<br />
</div>
</div>
<b v-if="video.views >= 0 || video.uploadedDate" 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 v-if="video.uploadedDate">
{{ video.uploadedDate }}
</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>
</div>
</div>
</template>
<script>
export default {
props: {
video: Object,
height: String,
width: String,
hideChannel: Boolean,
},
};
</script>