Piped/src/components/VideoItem.vue

101 lines
3.5 KiB
Vue
Raw Normal View History

2021-06-16 19:14:46 +00:00
<template>
2021-12-27 14:46:30 +00:00
<div class="uk-text-secondary">
<router-link class="uk-text-emphasis" :to="video.url">
2021-12-27 14:46:30 +00:00
<img :height="height" :width="width" class="w-full" :src="video.thumbnail" alt="" loading="lazy" />
2021-12-27 14:46:26 +00:00
<div class="relative">
2021-12-27 14:46:29 +00:00
<span v-if="video.duration" class="thumbnail-overlay bottom-5px right-5px" style="padding: 0 5px">{{
timeFormat(video.duration)
}}</span>
<span v-if="video.watched" class="thumbnail-overlay 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="
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
"
2021-12-27 14:46:30 +00:00
class="my-2 overflow-hidden flex link"
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>
2021-12-27 14:46:30 +00:00
<div class="float-right ml-0 mb-0 inline-block">
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>
2021-12-27 14:46:30 +00:00
<div class="flex" style="flex-flow: row">
<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:29 +00:00
class="rounded-full mr-0.5 mt-0.5 w-32px h-32px"
2021-10-07 22:44:54 +00:00
/>
</router-link>
2021-12-27 14:46:29 +00:00
<div class="w-[calc(100%-32px-1rem)]">
2021-10-07 22:44:54 +00:00
<router-link
v-if="video.uploaderUrl && video.uploaderName && !hideChannel"
2021-12-27 14:46:29 +00:00
class="uk-link-muted overflow-hidden block"
2021-10-07 22:44:54 +00:00
:to="video.uploaderUrl"
:title="video.uploaderName"
>
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>
2021-12-27 14:46:29 +00:00
<style>
.thumbnail-overlay {
@apply rounded-md absolute bg-black bg-opacity-75;
}
</style>
2021-06-16 19:14:46 +00:00
<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>