Piped/src/components/ChaptersBar.vue

100 lines
2.9 KiB
Vue
Raw Normal View History

<template>
<!-- desktop view -->
<div v-if="!mobileLayout" class="flex-col overflow-y-scroll max-h-75vh min-h-64 <lg:hidden">
<h2 class="mb-2 bg-gray-500/50 p-2" aria-label="chapters" title="chapters">
{{ $t("video.chapters") }} ({{ chapters.length }})
</h2>
<div
:key="chapter.start"
v-for="(chapter, index) in chapters"
@click="$emit('seek', chapter.start)"
class="chapter-vertical"
:class="
2022-07-22 18:50:21 +00:00
isCurrentChapter(chapters, index, playerPosition)
? 'chapter-vertical bg-red-500/50'
: 'chapter-vertical'
"
>
<div class="flex">
<span class="mt-5 mr-2 text-current" v-text="index + 1" />
<img :src="chapter.image" :alt="chapter.title" />
<div class="flex flex-col m-2">
<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 view -->
<div v-else class="flex overflow-x-auto">
<div
:key="chapter.start"
2022-07-22 18:54:52 +00:00
v-for="(chapter, index) in chapters"
@click="$emit('seek', chapter.start)"
2022-07-22 18:50:21 +00:00
:class="isCurrentChapter(chapters, index, playerPosition) ? 'chapter bg-red-500/50' : 'chapter'"
>
2022-06-24 22:28:06 +00:00
<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" />
2022-06-24 22:28:06 +00:00
<span class="px-1 text-sm font-bold text-blue-500" v-text="timeFormat(chapter.start)" />
</div>
</div>
</div>
</template>
2022-01-26 04:39:36 +00:00
<style>
::-webkit-scrollbar {
height: 5px;
}
2022-01-26 04:39:36 +00:00
.chapter {
2022-06-24 22:28:06 +00:00
@apply cursor-pointer self-center p-2.5;
img {
2022-06-24 22:28:06 +00:00
@apply w-full h-full;
}
}
.chapter-vertical {
2022-06-24 22:28:06 +00:00
@apply cursor-pointer self-center p-2.5;
img {
2022-06-24 22:28:06 +00:00
@apply w-3/10 h-3/10;
}
}
.chapter-vertical:hover {
@apply bg-gray-500;
}
.text-truncate {
2022-06-24 22:28:06 +00:00
@apply truncate overflow-hidden inline-block w-10em;
2022-01-26 04:39:36 +00:00
}
</style>
2022-07-22 18:50:21 +00:00
<script>
export default {
methods: {
isCurrentChapter(chapters, index, playerPosition) {
2022-07-22 18:52:35 +00:00
if (index + 1 == chapters.length) {
2022-07-23 12:40:16 +00:00
return playerPosition >= chapters[index].start;
} else {
return playerPosition >= chapters[index].start && playerPosition < chapters[index + 1].start;
}
2022-07-22 18:50:21 +00:00
},
},
};
</script>
<script setup>
import { defineProps, defineEmits } from "vue";
defineProps({
chapters: Object,
mobileLayout: {
type: Boolean,
default: () => true,
},
playerPosition: {
type: Number,
default: () => 0,
},
});
defineEmits(["seek"]);
</script>