Mirrored_Repos/Piped
1
0
Fork 0
mirror of https://github.com/TeamPiped/Piped.git synced 2026-04-04 14:56:58 +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

84
src/components/PlaylistVideos.vue
View File

@@ -1,24 +1,90 @@
<template>
<div ref="scrollable" class="h-screen-sm overflow-x-scroll">
<VideoItem
<div>
<router-link :to="{ path: '/playlist', query: { list: playlistId } }"
><h1 class="font-bold !text-lg hover:underline" v-text="playlist.name"
/></router-link>
<span class="text-sm">
<template v-if="playlist.uploader">
<router-link class="link-secondary" :to="playlist.uploaderUrl" :title="playlist.uploader">
{{ playlist.uploader }}
</router-link>
-
</template>
{{ selectedIndex }} / {{ playlist.videos }}
</span>
</div>
<div ref="scrollable" class="mt-4 max-h-screen-sm overflow-y-auto">
<div
v-for="(related, index) in playlist.relatedStreams"
:key="related.url"
:item="related"
:index="index"
:playlist-id="playlistId"
:prefer-listen="preferListen"
height="94"
width="168"
/>
>
<router-link
class="flex hover:bg-gray-50 .dark:hover:bg-neutral-800"
:class="{ 'bg-gray-200 .dark:bg-neutral-700': index === selectedIndex - 1 }"
:to="{
path: '/watch',
query: {
v: related.url.substr(-11),
...(playlistId && { list: playlistId }),
...(index >= 0 && { index: index + 1 }),
...(preferListen && { listen: 1 }),
},
}"
>
<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>
<div class="ml-2 flex flex-col">
<span class="text-sm font-semibold leading-4" :title="related.title" v-text="related.title" />
<div class="flex-1">
<router-link
v-if="related.uploaderUrl && related.uploaderName && !hideChannel"
class="link-secondary block overflow-hidden text-xs"
:to="related.uploaderUrl"
:title="related.uploaderName"
>
<span v-text="related.uploaderName" />
<i v-if="related.uploaderVerified" class="i-fa6-solid:check ml-1.5" />
</router-link>
</div>
</div>
</router-link>
</div>
</div>
</template>
<script>
import { nextTick } from "vue";
import VideoItem from "./VideoItem.vue";
import VideoThumbnail from "./VideoThumbnail.vue";
export default {
components: { VideoItem },
components: { VideoThumbnail },
props: {
playlist: {
type: Object,