Mirrored_Repos/Piped
1
0
Fork 0
mirror of https://github.com/TeamPiped/Piped.git synced 2024-11-15 12:48:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update VideoItem.vue

Browse Source
This commit is contained in:
Dragos 2022-11-08 19:02:24 +02:00 committed by GitHub
parent 3b6a25bbcd
commit c27e0e1436
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 32 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

97
src/components/VideoItem.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div v-if="showVideo"> <div v-if="showVideo" class="efy_trans_filter">
<router-link <router-link
:to="{ :to="{
path: '/watch', path: '/watch',
@ -17,37 +17,17 @@
:class="{ 'shorts-img': item.isShort }" :class="{ 'shorts-img': item.isShort }"
loading="lazy" loading="lazy"
/> />
<div class="relative text-sm"> <p class="pp-video-card-title my-2 overflow-hidden flex link" :title="item.title" v-text="item.title" />
<span
class="thumbnail-overlay thumbnail-right"
v-if="item.duration > 0"
v-text="timeFormat(item.duration)"
/>
<!-- shorts thumbnail -->
<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"
v-text="timeFormat(item.duration)"
/>
<i18n-t v-else keypath="video.live" class="thumbnail-overlay thumbnail-right live-badge" tag="div">
<font-awesome-icon :icon="['fas', 'broadcast-tower']" />
</i18n-t>
<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="item.title"
v-text="item.title"
/>
</div>
</router-link> </router-link>
<div class="float-right m-0 inline-block children:px-1"> <div class="pp-video-card-buttons">
<button v-if="item.duration > 0" v-text="timeFormat(item.duration)" tabindex="-1" />
<button v-if="item.views >= 0" tabindex="-1">
<font-awesome-icon icon="eye" />
<span class="pl-0.5" v-text="`${numberFormat(item.views)}`" />
</button>
<router-link <router-link
class="btn"
:to="{ :to="{
path: '/watch', path: '/watch',
query: { query: {
@ -73,52 +53,39 @@
> >
<font-awesome-icon icon="circle-minus" /> <font-awesome-icon icon="circle-minus" />
</button> </button>
<button v-if="item.uploadedDate" class="pl-0.5" v-text="item.uploadedDate" tabindex="-1" />
<button class="pp-color" v-if="item.isShort" v-t="'video.shorts'" tabindex="-1" />
<button v-else-if="item.duration < 0" v-t="'video.live'" class="pp-color" tabindex="-1" />
<button v-if="item.watched" v-t="'video.watched'" class="pp-color" tabindex="-1" />
</div> </div>
<div class="flex"> <router-link
<router-link :to="item.uploaderUrl"> :to="item.uploaderUrl"
<img class="pp-video-card-channel"
v-if="item.uploaderAvatar" v-if="item.uploaderUrl && item.uploaderName && !hideChannel"
:src="item.uploaderAvatar" >
loading="lazy" <img
:alt="item.uploaderName" v-if="item.uploaderAvatar"
class="rounded-full mr-0.5 mt-0.5 w-32px h-32px" :src="item.uploaderAvatar"
width="68" loading="lazy"
height="68" :alt="item.uploaderName"
/> class="mt-0.5 w-36rem h-36rem"
</router-link> width="36"
height="36"
/>
<div class="w-[calc(100%-32px-1rem)]"> <div class="pp-text" title="item.uploaderName">
<router-link <span v-text="item.uploaderName" />
v-if="item.uploaderUrl && item.uploaderName && !hideChannel" <font-awesome-icon class="ml-1.5" v-if="item.uploaderVerified" icon="check" />
class="link-secondary overflow-hidden block"
:to="item.uploaderUrl"
:title="item.uploaderName"
>
<span v-text="item.uploaderName" />
<font-awesome-icon class="ml-1.5" v-if="item.uploaderVerified" icon="check" />
</router-link>
<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(item.views)} •`" />
</span>
<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>
</div> </router-link>
</div> </div>
<PlaylistAddModal v-if="showModal" :video-id="video.url.substr(-11)" @close="showModal = !showModal" /> <PlaylistAddModal v-if="showModal" :video-id="video.url.substr(-11)" @close="showModal = !showModal" />
</template> </template>
<style> <style>
.thumbnail-overlay {
@apply absolute;
}
.shorts-img { .shorts-img {
@apply max-h-[17.5vh] w-full object-contain; @apply w-full object-contain;
} }
</style> </style>