Piped/src/components/VideoItem.vue

99 lines
3.5 KiB
Vue
Raw Normal View History

2021-06-16 19:14:46 +00:00
<template>
<div>
<router-link :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:33 +00:00
<div class="relative text-sm">
2021-12-27 16:29:25 +00:00
<span
class="thumbnail-overlay thumbnail-right"
v-if="video.duration > 0"
2021-12-27 16:29:25 +00:00
v-text="timeFormat(video.duration)"
/>
<i18n-t v-else keypath="video.live" class="thumbnail-overlay thumbnail-right !bg-red-600" tag="div">
<font-awesome-icon class="!w-3" :icon="['fas', 'broadcast-tower']" />
</i18n-t>
<span v-if="video.watched" class="thumbnail-overlay bottom-5px left-5px" v-t="'video.watched'" />
</div>
<div>
2021-10-07 22:44:54 +00:00
<p
2021-12-28 14:39: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"
2021-12-27 16:29:25 +00:00
v-text="video.title"
/>
</div>
2021-06-16 19:14:46 +00:00
</router-link>
2022-01-12 11:59:50 +00:00
<div class="float-right m-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"
>
2021-12-27 22:33:55 +00:00
<font-awesome-icon icon="headphones" />
</router-link>
</div>
2022-01-12 11:59:50 +00:00
<div class="flex">
<router-link :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-12-27 14:46:31 +00:00
width="68"
height="68"
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"
class="link-secondary overflow-hidden block"
2021-10-07 22:44:54 +00:00
:to="video.uploaderUrl"
:title="video.uploaderName"
>
2021-12-27 16:29:25 +00:00
<span v-text="video.uploaderName" />
2021-12-27 22:33:55 +00:00
<font-awesome-icon class="ml-1.5" v-if="video.uploaderVerified" icon="check" />
2021-06-16 19:14:46 +00:00
</router-link>
<strong v-if="video.views >= 0 || video.uploadedDate" class="text-sm">
<span v-if="video.views >= 0">
2021-12-27 22:33:55 +00:00
<font-awesome-icon icon="eye" />
<span class="pl-0.5" v-text="`${numberFormat(video.views)} •`" />
</span>
<span v-if="video.uploadedDate" class="pl-0.5" v-text="video.uploadedDate" />
<span v-if="video.uploaded" class="pl-0.5" v-text="timeAgo(video.uploaded)" />
</strong>
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 text-white bg-opacity-75 px-5px;
}
.thumbnail-right {
@apply bottom-5px right-5px;
2021-12-27 14:46:29 +00:00
}
</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>