Mirrored_Repos/Piped
1
0
Fork 0
mirror of https://github.com/TeamPiped/Piped.git synced 2026-11-09 12:07:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

Migrate to tailwind + reka ui

Browse Source
This commit is contained in:
Kavin
2026-03-27 11:43:13 +05:30
parent 9d0da61e34
commit d1ef96e7d4
54 changed files with 2206 additions and 1926 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
src/components/VideoThumbnail.vue
View File

@@ -1,11 +1,11 @@
<template>
<div class="w-full">
<div class="relative w-full">
<img
loading="lazy"
class="aspect-video w-full rounded-md object-contain"
:src="item.thumbnail"
:alt="item.title"
:class="{ 'shorts-img': item.isShort, 'opacity-75': item.watched }"
:class="{ 'w-full object-contain': item.isShort, 'opacity-75': item.watched }"
/>
<!-- progress bar -->
<div class="relative h-1 w-full">
@@ -15,20 +15,33 @@
:style="{ width: `clamp(0%, ${(item.currentTime / item.duration) * 100}%, 100%` }"
/>
</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.isShort"
v-t="'video.shorts'"
class="absolute bottom-1.25 left-1.25 rounded-md bg-red-600 px-1.25 text-xs font-bold text-white uppercase"
/>
<span
v-if="item.duration > 0 || (item.duration == 0 && item.isShort)"
class="thumbnail-overlay thumbnail-right px-0.5"
class="absolute right-1.25 bottom-1.25 rounded-md bg-black/75 px-0.5 text-white"
:class="small ? 'text-xs' : 'text-sm'"
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
v-else
keypath="video.live"
class="absolute right-1.25 bottom-1.25 inline-flex items-center gap-1 rounded-md bg-red-600 px-1.25 text-white"
:class="small ? 'text-xs' : 'text-sm'"
tag="div"
>
<i-fa6-solid-tower-broadcast class="w-3" />
</i18n-t>
<span v-if="item.watched" v-t="'video.watched'" class="thumbnail-overlay bottom-5px left-5px" />
<span
v-if="item.watched"
v-t="'video.watched'"
class="absolute bottom-1.25 left-1.25 rounded-md bg-black/75 px-1.25 text-white"
:class="small ? 'text-xs' : 'text-sm'"
/>
</div>
</template>
<script setup>
@@ -49,9 +62,3 @@ defineProps({
},
});
</script>
<style>
.shorts-img {
@apply w-full object-contain;
}
</style>