Mirrored_Repos/Piped
1
0
Fork 0
mirror of https://github.com/TeamPiped/Piped.git synced 2025-12-21 12:10:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

Implement content item component.

Browse Source
This commit is contained in:
Kavin
2022-11-01 12:12:54 +00:00
parent f5d4da7c2b
commit 1ec8480351
12 changed files with 142 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
src/components/VideoItem.vue
View File

@@ -4,7 +4,7 @@
:to="{
path: '/watch',
query: {
v: video.url.substr(-11),
v: item.url.substr(-11),
...(playlistId && { list: playlistId }),
...(index >= 0 && { index: index + 1 }),
},
@@ -12,36 +12,36 @@
>
<img
class="w-full"
:src="video.thumbnail"
:alt="video.title"
:class="{ 'shorts-img': video.isShort }"
:src="item.thumbnail"
:alt="item.title"
:class="{ 'shorts-img': item.isShort }"
loading="lazy"
/>
<div class="relative text-sm">
<span
class="thumbnail-overlay thumbnail-right"
v-if="video.duration > 0"
v-text="timeFormat(video.duration)"
v-if="item.duration > 0"
v-text="timeFormat(item.duration)"
/>
<!-- shorts thumbnail -->
<span class="thumbnail-overlay thumbnail-left" v-if="video.isShort" v-t="'video.shorts'" />
<span class="thumbnail-overlay thumbnail-left" v-if="item.isShort" v-t="'video.shorts'" />
<span
class="thumbnail-overlay thumbnail-right"
v-else-if="video.duration >= 60"
v-text="timeFormat(video.duration)"
v-else-if="item.duration >= 60"
v-text="timeFormat(item.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'" />
<span v-if="item.watched" class="thumbnail-overlay bottom-5px left-5px" v-t="'video.watched'" />
</div>
<div>
<p
style="display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical"
class="my-2 overflow-hidden flex link"
:title="video.title"
v-text="video.title"
:title="item.title"
v-text="item.title"
/>
</div>
</router-link>
@@ -51,14 +51,14 @@
:to="{
path: '/watch',
query: {
v: video.url.substr(-11),
v: item.url.substr(-11),
...(playlistId && { list: playlistId }),
...(index >= 0 && { index: index + 1 }),
listen: '1',
},
}"
:aria-label="'Listen to ' + video.title"
:title="'Listen to ' + video.title"
:aria-label="'Listen to ' + item.title"
:title="'Listen to ' + item.title"
>
<font-awesome-icon icon="headphones" />
</router-link>
@@ -69,20 +69,20 @@
v-if="admin"
:title="$t('actions.remove_from_playlist')"
ref="removeButton"
@click="removeVideo(video.url.substr(-11))"
@click="removeVideo(item.url.substr(-11))"
>
<font-awesome-icon icon="circle-minus" />
</button>
<PlaylistAddModal v-if="showModal" :video-id="video.url.substr(-11)" @close="showModal = !showModal" />
<PlaylistAddModal v-if="showModal" :video-id="item.url.substr(-11)" @close="showModal = !showModal" />
</div>
<div class="flex">
<router-link :to="video.uploaderUrl">
<router-link :to="item.uploaderUrl">
<img
v-if="video.uploaderAvatar"
:src="video.uploaderAvatar"
v-if="item.uploaderAvatar"
:src="item.uploaderAvatar"
loading="lazy"
:alt="video.uploaderName"
:alt="item.uploaderName"
class="rounded-full mr-0.5 mt-0.5 w-32px h-32px"
width="68"
height="68"
@@ -91,22 +91,22 @@
<div class="w-[calc(100%-32px-1rem)]">
<router-link
v-if="video.uploaderUrl && video.uploaderName && !hideChannel"
v-if="item.uploaderUrl && item.uploaderName && !hideChannel"
class="link-secondary overflow-hidden block"
:to="video.uploaderUrl"
:title="video.uploaderName"
:to="item.uploaderUrl"
:title="item.uploaderName"
>
<span v-text="video.uploaderName" />
<font-awesome-icon class="ml-1.5" v-if="video.uploaderVerified" icon="check" />
<span v-text="item.uploaderName" />
<font-awesome-icon class="ml-1.5" v-if="item.uploaderVerified" icon="check" />
</router-link>
<strong v-if="video.views >= 0 || video.uploadedDate" class="text-sm">
<span v-if="video.views >= 0">
<strong v-if="item.views >= 0 || item.uploadedDate" class="text-sm">
<span v-if="item.views >= 0">
<font-awesome-icon icon="eye" />
<span class="pl-0.5" v-text="`${numberFormat(video.views)} •`" />
<span class="pl-0.5" v-text="`${numberFormat(item.views)} •`" />
</span>
<span v-if="video.uploaded > 0" class="pl-0.5" v-text="timeAgo(video.uploaded)" />
<span v-else-if="video.uploadedDate" class="pl-0.5" v-text="video.uploadedDate" />
<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>
</div>
</div>
@@ -124,7 +124,7 @@ import PlaylistAddModal from "./PlaylistAddModal.vue";
export default {
props: {
video: {
item: {
type: Object,
default: () => {
return {};
@@ -174,7 +174,7 @@ export default {
if (!this.isFeed || !this.getPreferenceBoolean("hideWatched", false)) return;
const objectStore = window.db.transaction("watch_history", "readonly").objectStore("watch_history");
const request = objectStore.get(this.video.url.substr(-11));
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) {