100 lines
3.9 KiB
Vue
100 lines
3.9 KiB
Vue
<template>
|
|
<div class="uk-text-secondary" :style="[{ background: backgroundColor }]">
|
|
<router-link class="uk-text-emphasis" :to="video.url">
|
|
<img :height="height" :width="width" style="width: 100%" :src="video.thumbnail" alt="" loading="lazy" />
|
|
<div class="uk-position-relative">
|
|
<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
|
|
>
|
|
<span
|
|
v-if="video.watched"
|
|
class="uk-label uk-border-rounded uk-position-absolute video-duration"
|
|
style="bottom: 5px; left: 5px; background: rgba(0, 0, 0, .75); color: white; padding: 0 5px;"
|
|
>{{ $t("video.watched") }}</span
|
|
>
|
|
</div>
|
|
|
|
<div>
|
|
<p
|
|
style="padding-top: 0.5rem; margin-bottom: 0.5rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;"
|
|
:title="video.title"
|
|
>
|
|
{{ video.title }}
|
|
</p>
|
|
</div>
|
|
</router-link>
|
|
|
|
<div class="uk-align-right" style="margin-left: 0; margin-bottom: 0; display: inline-block; width: 10%">
|
|
<router-link
|
|
:to="video.url + '&listen=1'"
|
|
:aria-label="'Listen to ' + video.title"
|
|
:title="'Listen to ' + video.title"
|
|
>
|
|
<font-awesome-icon icon="headphones"></font-awesome-icon>
|
|
</router-link>
|
|
</div>
|
|
|
|
<div
|
|
v-if="video.uploaderUrl && video.uploaderName && !hideChannel"
|
|
style="display: flex; flex-flow: row; height: 15%"
|
|
>
|
|
<router-link class="uk-link-muted" :to="video.uploaderUrl">
|
|
<img
|
|
v-if="video.uploaderAvatar"
|
|
:src="video.uploaderAvatar"
|
|
loading="lazy"
|
|
:alt="video.uploaderName"
|
|
class="uk-border-circle"
|
|
style="margin-right: 0.5rem; margin-top:0.5rem; width: 32px; height: 32px;"
|
|
/>
|
|
</router-link>
|
|
|
|
<div style="width: calc(100% - 32px - 8px);">
|
|
<router-link
|
|
class="uk-link-muted uk-overflow-hidden"
|
|
:to="video.uploaderUrl"
|
|
:title="video.uploaderName"
|
|
style="display:block; width: 90%"
|
|
>
|
|
{{ video.uploaderName }} <font-awesome-icon
|
|
v-if="video.uploaderVerified"
|
|
icon="check"
|
|
></font-awesome-icon>
|
|
</router-link>
|
|
|
|
<b v-if="video.views >= 0 || video.uploadedDate" class="uk-text-small">
|
|
<span v-if="video.views >= 0">
|
|
<font-awesome-icon icon="eye"></font-awesome-icon>
|
|
{{ numberFormat(video.views) }} •
|
|
</span>
|
|
<span v-if="video.uploadedDate">
|
|
{{ video.uploadedDate }}
|
|
</span>
|
|
<span v-if="video.uploaded">
|
|
{{ timeAgo(video.uploaded) }}
|
|
</span>
|
|
</b>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
video: {
|
|
type: Object,
|
|
default: () => {
|
|
return {};
|
|
},
|
|
},
|
|
height: { type: String, default: "118" },
|
|
width: { type: String, default: "210" },
|
|
hideChannel: { type: Boolean, default: false },
|
|
},
|
|
};
|
|
</script>
|