Piped/src/components/VideoItem.vue

201 lines
7.3 KiB
Vue
Raw Normal View History

2021-06-16 19:14:46 +00:00
<template>
2022-09-10 17:08:50 +00:00
<div v-if="showVideo">
2022-04-08 21:29:50 +00:00
<router-link
:to="{
path: '/watch',
query: {
2022-11-01 12:12:54 +00:00
v: item.url.substr(-11),
2022-04-08 21:29:50 +00:00
...(playlistId && { list: playlistId }),
...(index >= 0 && { index: index + 1 }),
},
}"
>
2023-02-16 17:26:14 +00:00
<div class="w-full">
<img
class="w-full aspect-video"
:src="item.thumbnail"
:alt="item.title"
:class="{ 'shorts-img': item.isShort }"
loading="lazy"
/>
<!-- progress bar -->
<div class="relative w-full h-1">
<div
class="absolute bottom-0 left-0 h-1 bg-red-600"
v-if="item.watched && item.duration > 0"
:style="{ width: `clamp(0%, ${(item.currentTime / item.duration) * 100}%, 100%` }"
/>
</div>
</div>
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"
2022-11-01 12:12:54 +00:00
v-if="item.duration > 0"
v-text="timeFormat(item.duration)"
2021-12-27 16:29:25 +00:00
/>
<!-- shorts thumbnail -->
2022-11-01 12:12:54 +00:00
<span class="thumbnail-overlay thumbnail-left" v-if="item.isShort" v-t="'video.shorts'" />
<span
class="thumbnail-overlay thumbnail-right"
v-else-if="item.duration >= 0"
2022-11-01 12:12:54 +00:00
v-text="timeFormat(item.duration)"
/>
<i18n-t v-else keypath="video.live" class="thumbnail-overlay thumbnail-right !bg-red-600" tag="div">
2022-08-17 13:34:57 +00:00
<font-awesome-icon class="w-3" :icon="['fas', 'broadcast-tower']" />
</i18n-t>
2022-11-01 12:12:54 +00:00
<span v-if="item.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"
2022-11-01 12:12:54 +00:00
:title="item.title"
v-text="item.title"
2021-12-27 16:29:25 +00:00
/>
</div>
2021-06-16 19:14:46 +00:00
</router-link>
2022-04-07 02:33:25 +00:00
<div class="float-right m-0 inline-block children:px-1">
2021-10-07 22:44:54 +00:00
<router-link
2022-04-08 21:29:50 +00:00
:to="{
path: '/watch',
query: {
2022-11-01 12:12:54 +00:00
v: item.url.substr(-11),
2022-04-08 21:29:50 +00:00
...(playlistId && { list: playlistId }),
...(index >= 0 && { index: index + 1 }),
listen: '1',
},
}"
2022-11-01 12:12:54 +00:00
:aria-label="'Listen to ' + item.title"
:title="'Listen to ' + item.title"
2021-10-07 22:44:54 +00:00
>
2021-12-27 22:33:55 +00:00
<font-awesome-icon icon="headphones" />
</router-link>
2022-04-07 02:33:25 +00:00
<button v-if="authenticated" :title="$t('actions.add_to_playlist')" @click="showModal = !showModal">
<font-awesome-icon icon="circle-plus" />
</button>
<button
v-if="admin"
:title="$t('actions.remove_from_playlist')"
ref="removeButton"
2022-11-01 12:12:54 +00:00
@click="removeVideo(item.url.substr(-11))"
2022-04-07 02:33:25 +00:00
>
<font-awesome-icon icon="circle-minus" />
</button>
2022-11-01 12:12:54 +00:00
<PlaylistAddModal v-if="showModal" :video-id="item.url.substr(-11)" @close="showModal = !showModal" />
</div>
2022-01-12 11:59:50 +00:00
<div class="flex">
2022-11-01 12:12:54 +00:00
<router-link :to="item.uploaderUrl">
2021-10-07 22:44:54 +00:00
<img
2022-11-01 12:12:54 +00:00
v-if="item.uploaderAvatar"
:src="item.uploaderAvatar"
2021-10-07 22:44:54 +00:00
loading="lazy"
2022-11-01 12:12:54 +00:00
:alt="item.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
2022-11-01 12:12:54 +00:00
v-if="item.uploaderUrl && item.uploaderName && !hideChannel"
class="link-secondary overflow-hidden block"
2022-11-01 12:12:54 +00:00
:to="item.uploaderUrl"
:title="item.uploaderName"
2021-10-07 22:44:54 +00:00
>
2022-11-01 12:12:54 +00:00
<span v-text="item.uploaderName" />
<font-awesome-icon class="ml-1.5" v-if="item.uploaderVerified" icon="check" />
2021-06-16 19:14:46 +00:00
</router-link>
2022-11-01 12:12:54 +00:00
<strong v-if="item.views >= 0 || item.uploadedDate" class="text-sm">
<span v-if="item.views >= 0">
2021-12-27 22:33:55 +00:00
<font-awesome-icon icon="eye" />
2022-11-01 12:12:54 +00:00
<span class="pl-0.5" v-text="`${numberFormat(item.views)} •`" />
</span>
2022-11-01 12:12:54 +00:00
<span v-if="item.uploaded > 0" class="pl-0.5" v-text="timeAgo(item.uploaded)" />
<span v-else-if="item.uploadedDate" class="pl-0.5" v-text="item.uploadedDate" />
</strong>
2021-06-16 19:14:46 +00:00
</div>
</div>
</div>
</template>
2021-12-27 14:46:29 +00:00
<style>
.shorts-img {
@apply max-h-[17.5vh] w-full object-contain;
}
2021-12-27 14:46:29 +00:00
</style>
2021-06-16 19:14:46 +00:00
<script>
2022-04-07 02:33:25 +00:00
import PlaylistAddModal from "./PlaylistAddModal.vue";
2021-06-16 19:14:46 +00:00
export default {
props: {
2022-11-01 12:12:54 +00:00
item: {
type: Object,
default: () => {
return {};
},
},
2022-09-10 17:08:50 +00:00
isFeed: {
type: Boolean,
default: false,
},
height: { type: String, default: "118" },
width: { type: String, default: "210" },
hideChannel: { type: Boolean, default: false },
2022-04-07 02:33:25 +00:00
index: { type: Number, default: -1 },
playlistId: { type: String, default: null },
admin: { type: Boolean, default: false },
},
data() {
return {
showModal: false,
2022-09-10 17:08:50 +00:00
showVideo: true,
2022-04-07 02:33:25 +00:00
};
},
2022-09-10 17:08:50 +00:00
mounted() {
this.shouldShowVideo();
},
2022-04-07 02:33:25 +00:00
methods: {
removeVideo() {
if (confirm(this.$t("actions.delete_playlist_video_confirm"))) {
this.$refs.removeButton.disabled = true;
this.fetchJson(this.authApiUrl() + "/user/playlists/remove", null, {
2022-04-07 02:33:25 +00:00
method: "POST",
body: JSON.stringify({
playlistId: this.playlistId,
index: this.index,
}),
headers: {
Authorization: this.getAuthToken(),
"Content-Type": "application/json",
},
}).then(json => {
if (json.error) alert(json.error);
else this.$emit("remove");
});
}
},
2022-09-10 17:08:50 +00:00
shouldShowVideo() {
if (!this.isFeed || !this.getPreferenceBoolean("hideWatched", false)) return;
const objectStore = window.db.transaction("watch_history", "readonly").objectStore("watch_history");
2022-11-01 12:12:54 +00:00
const request = objectStore.get(this.item.url.substr(-11));
request.onsuccess = event => {
const video = event.target.result;
if (video && (video.currentTime ?? 0) > video.duration * 0.9) {
this.showVideo = false;
return;
2022-09-10 17:08:50 +00:00
}
};
},
2021-06-16 19:14:46 +00:00
},
2022-04-07 02:33:25 +00:00
components: { PlaylistAddModal },
2021-06-16 19:14:46 +00:00
};
</script>