Mirrored_Repos/Piped
1
0
Fork 0
mirror of https://github.com/TeamPiped/Piped.git synced 2026-05-03 22:17:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: improve playlists display aside

Browse Source
This commit is contained in:
nieve
2024-08-26 14:55:38 -04:00
committed by Bnyro
parent fa1ee969a7
commit 5266b2d1d9
4 changed files with 399 additions and 265 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/components/VideoItem.vue
View File

@@ -12,35 +12,14 @@
},
}"
>
<div class="w-full">
<img
loading="lazy"
class="aspect-video w-full rounded-md object-contain"
:src="thumbnail"
:alt="title"
:class="{ 'shorts-img': item.isShort, 'opacity-75': item.watched }"
/>
<!-- progress bar -->
<div class="relative h-1 w-full">
<div
v-if="item.watched && item.duration > 0"
class="absolute bottom-0 left-0 h-1 bg-red-600"
:style="{ width: `clamp(0%, ${(item.currentTime / item.duration) * 100}%, 100%` }"
/>
</div>
</div>
<VideoThumbnail :item="item" />
<div class="relative text-sm">
<span
v-if="item.duration > 0"
class="thumbnail-overlay thumbnail-right"
v-text="timeFormat(item.duration)"
/>
<!-- shorts thumbnail -->
<span v-if="item.isShort" v-t="'video.shorts'" class="thumbnail-overlay thumbnail-left" />
<span
v-else-if="item.duration >= 0"
class="thumbnail-overlay thumbnail-right"
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">
@@ -166,9 +145,10 @@
import PlaylistAddModal from "./PlaylistAddModal.vue";
import ShareModal from "./ShareModal.vue";
import ConfirmModal from "./ConfirmModal.vue";
import VideoThumbnail from "./VideoThumbnail.vue";
export default {
components: { PlaylistAddModal, ConfirmModal, ShareModal },
components: { PlaylistAddModal, ConfirmModal, ShareModal, VideoThumbnail },
props: {
item: {
type: Object,
@@ -268,10 +248,6 @@ export default {
</script>
<style>
.shorts-img {
@apply w-full object-contain;
}
.video-info {
@apply mt-1 text-xs text-gray-600 font-normal;
}