Mirrored_Repos/Piped
1
0
Fork 0
mirror of https://github.com/TeamPiped/Piped.git synced 2025-04-25 08:06:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: merge duration/live/shorts indicator to VideoThumbnail component

Browse Source
This commit is contained in:
Bnyro 2025-01-22 15:14:00 +01:00
parent 5266b2d1d9
commit 691cb6d86b
3 changed files with 25 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/components/PlaylistVideos.vue
View File

@ -22,7 +22,7 @@
:prefer-listen="preferListen"
>
<router-link
class="flex hover:bg-gray-50 .dark:hover:bg-neutral-800"
class="flex rounded px-2 py-1 hover:bg-gray-50 .dark:hover:bg-neutral-800"
:class="{ 'bg-gray-200 .dark:bg-neutral-700': index === selectedIndex - 1 }"
:to="{
path: '/watch',
@ -35,34 +35,12 @@
}"
>
<span class="min-w-5 flex-none text-xs" v-text="index + 1" />
<div class="w-24 flex-none pb-1">
<VideoThumbnail :item="related" />
<div class="relative text-xs">
<!-- shorts thumbnail -->
<span v-if="related.isShort" v-t="'video.shorts'" class="thumbnail-overlay thumbnail-left" />
<span
v-if="related.duration > 0 || (related.duration == 0 && related.isShort)"
class="thumbnail-overlay thumbnail-right px-0.5"
v-text="timeFormat(related.duration)"
/>
<i18n-t
v-else
keypath="video.live"
class="thumbnail-overlay thumbnail-right !bg-red-600"
tag="div"
>
<i class="i-fa6-solid:tower-broadcast w-3" />
</i18n-t>
<span
v-if="related.watched"
v-t="'video.watched'"
class="thumbnail-overlay bottom-5px left-5px px-0.5"
/>
</div>
<div class="w-24 flex-none">
<VideoThumbnail :item="related" :small="true" />
</div>
<div class="ml-2 flex flex-col">
<span class="text-sm font-semibold leading-4" :title="related.title" v-text="related.title" />
<span class="link" :title="related.title" v-text="related.title" />
<div class="flex-1">
<router-link
v-if="related.uploaderUrl && related.uploaderName && !hideChannel"

14
src/components/VideoItem.vue
View File

@ -14,20 +14,6 @@
>
<VideoThumbnail :item="item" />
<div class="relative text-sm">
<!-- shorts thumbnail -->
<span v-if="item.isShort" v-t="'video.shorts'" class="thumbnail-overlay thumbnail-left" />
<span
v-if="item.duration > 0 || (item.duration == 0 && item.isShort)"
class="thumbnail-overlay thumbnail-right px-0.5"
v-text="timeFormat(item.duration)"
/>
<i18n-t v-else keypath="video.live" class="thumbnail-overlay thumbnail-right !bg-red-600" tag="div">
<i class="i-fa6-solid:tower-broadcast w-3" />
</i18n-t>
<span v-if="item.watched" v-t="'video.watched'" class="thumbnail-overlay bottom-5px left-5px" />
</div>
<div>
<p
style="display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical"

20
src/components/VideoThumbnail.vue
View File

@ -16,6 +16,20 @@
/>
</div>
</div>
<div class="relative" :class="small ? 'text-xs' : 'text-sm'">
<!-- shorts thumbnail -->
<span v-if="item.isShort" v-t="'video.shorts'" class="thumbnail-overlay thumbnail-left" />
<span
v-if="item.duration > 0 || (item.duration == 0 && item.isShort)"
class="thumbnail-overlay thumbnail-right px-0.5"
v-text="timeFormat(item.duration)"
/>
<i18n-t v-else keypath="video.live" class="thumbnail-overlay thumbnail-right !bg-red-600" tag="div">
<i class="i-fa6-solid:tower-broadcast w-3" />
</i18n-t>
<span v-if="item.watched" v-t="'video.watched'" class="thumbnail-overlay bottom-5px left-5px" />
</div>
</template>
<script>
export default {
@ -26,6 +40,12 @@ export default {
return {};
},
},
small: {
type: Boolean,
default: () => {
return false;
},
},
},
computed: {
title() {