Piped/src/components/ChaptersBar.vue

117 lines
3.8 KiB
Vue

<template>
<!-- desktop view -->
<div v-if="!mobileLayout" class="max-h-75vh max-w-35vw min-h-64 flex-col overflow-y-scroll lt-lg:hidden">
<h2 class="mb-2 bg-gray-500/50 p-2" aria-label="chapters" title="chapters">
{{ $t("video.chapters") }} ({{ chapters.length }})
</h2>
<div
v-for="(chapter, index) in chapters"
:key="chapter.start"
class="chapter-vertical"
:class="{ 'bg-red-500/50': isCurrentChapter(index) }"
@click="$emit('seek', chapter.start)"
>
<div class="flex">
<span class="mr-2 mt-5 text-current" v-text="index + 1" />
<img class="shrink-0" :src="chapter.image" :alt="chapter.title" />
<div class="m-2 flex flex-col">
<span class="text-sm" :title="chapter.title" v-text="chapter.title" />
<span class="text-sm font-bold text-blue-500" v-text="timeFormat(chapter.start)" />
</div>
</div>
</div>
</div>
<!-- mobile vertical view -->
<div
v-if="mobileLayout && getPreferenceString('mobileChapterLayout') == 'Vertical'"
class="max-h-64 flex flex-col overflow-y-scroll"
>
<h2 class="mb-2 bg-gray-500/50 p-2" aria-label="chapters" title="chapters">
{{ $t("video.chapters") }} ({{ chapters.length }})
</h2>
<div
v-for="(chapter, index) in chapters"
:key="chapter.start"
class="chapter-vertical"
:class="{ 'bg-red-500/50': isCurrentChapter(index) }"
@click="$emit('seek', chapter.start)"
>
<div class="flex">
<span class="mr-2 mt-5 text-current" v-text="index + 1" />
<img class="shrink-0" :src="chapter.image" :alt="chapter.title" />
<div class="m-2 flex flex-col">
<span class="text-sm" :title="chapter.title" v-text="chapter.title" />
<span class="text-sm font-bold text-blue-500" v-text="timeFormat(chapter.start)" />
</div>
</div>
</div>
</div>
<!-- mobile Horizontal view -->
<div v-if="getPreferenceString('mobileChapterLayout') == 'Horizontal' && mobileLayout" class="flex overflow-x-auto">
<div
v-for="(chapter, index) in chapters"
:key="chapter.start"
class="chapter"
:class="{ 'bg-red-500/50': isCurrentChapter(index) }"
@click="$emit('seek', chapter.start)"
>
<img :src="chapter.image" :alt="chapter.title" />
<div class="m-1 flex">
<span class="text-truncate text-sm" :title="chapter.title" v-text="chapter.title" />
<span class="px-1 text-sm font-bold text-blue-500" v-text="timeFormat(chapter.start)" />
</div>
</div>
</div>
</template>
<script setup>
const props = defineProps({
chapters: {
type: Object,
default: () => null,
},
mobileLayout: {
type: Boolean,
default: () => true,
},
playerPosition: {
type: Number,
default: () => 0,
},
});
const isCurrentChapter = index => {
return (
props.playerPosition >= props.chapters[index].start &&
props.playerPosition < (props.chapters[index + 1]?.start ?? Infinity)
);
};
defineEmits(["seek"]);
</script>
<style>
::-webkit-scrollbar {
height: 5px;
}
.chapter {
@apply cursor-pointer self-center p-2.5;
}
.chapter img {
@apply w-full h-full;
}
.chapter-vertical {
@apply cursor-pointer self-center p-2.5;
}
.chapter-vertical img {
@apply w-3/10 h-3/10;
}
.chapter-vertical:hover {
@apply bg-gray-500;
}
.text-truncate {
@apply truncate overflow-hidden inline-block w-10em;
}
</style>