Piped/src/components/VideoItem.vue

105 lines
3.9 KiB
Vue
Raw Normal View History

2021-06-16 19:14:46 +00:00
<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" />
2021-12-27 14:46:26 +00:00
<div class="relative">
<span
v-if="video.duration"
2021-12-27 14:46:26 +00:00
class="rounded-md absolute video-duration bg-black bg-opacity-75 bottom-5px right-5px"
style="padding: 0 5px"
>{{ timeFormat(video.duration) }}</span
>
<span
v-if="video.watched"
2021-12-27 14:46:26 +00:00
class="rounded-md absolute video-duration bg-black bg-opacity-75 bottom-5px left-5px"
style="padding: 0 5px"
>{{ $t("video.watched") }}</span
>
</div>
<div>
2021-10-07 22:44:54 +00:00
<p
2021-10-28 17:55:20 +00:00
style="
padding-top: 0.5rem;
margin-bottom: 0.5rem;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
"
2021-10-07 22:44:54 +00:00
:title="video.title"
>
{{ video.title }}
</p>
</div>
2021-06-16 19:14:46 +00:00
</router-link>
<div class="uk-align-right" style="margin-left: 0; margin-bottom: 0; display: inline-block; width: 10%">
2021-10-07 22:44:54 +00:00
<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 style="display: flex; flex-flow: row; height: 15%">
<router-link class="uk-link-muted" :to="video.uploaderUrl">
2021-10-07 22:44:54 +00:00
<img
v-if="video.uploaderAvatar"
:src="video.uploaderAvatar"
loading="lazy"
:alt="video.uploaderName"
2021-12-27 14:46:26 +00:00
class="rounded-full"
2021-10-28 17:55:20 +00:00
style="margin-right: 0.5rem; margin-top: 0.5rem; width: 32px; height: 32px"
2021-10-07 22:44:54 +00:00
/>
</router-link>
2021-10-28 17:55:20 +00:00
<div style="width: calc(100% - 32px - 8px)">
2021-10-07 22:44:54 +00:00
<router-link
v-if="video.uploaderUrl && video.uploaderName && !hideChannel"
2021-10-07 22:44:54 +00:00
class="uk-link-muted uk-overflow-hidden"
:to="video.uploaderUrl"
:title="video.uploaderName"
2021-10-28 17:55:20 +00:00
style="display: block; width: 90%"
2021-10-07 22:44:54 +00:00
>
2021-08-17 17:30:36 +00:00
{{ video.uploaderName }}&thinsp;<font-awesome-icon
v-if="video.uploaderVerified"
icon="check"
></font-awesome-icon>
2021-06-16 19:14:46 +00:00
</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>
2021-06-16 19:14:46 +00:00
</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 },
2021-06-16 19:14:46 +00:00
},
};
</script>