chapters: highlight current playing chapter

This commit is contained in:
Sai Karthik 2022-07-19 18:11:42 +05:30
parent 7ec18073a1
commit f96a7fa86a
No known key found for this signature in database
GPG Key ID: F5B9A961BF6EAF0E

View File

@ -9,6 +9,11 @@
v-for="(chapter, index) in chapters"
@click="$emit('seek', chapter.start)"
class="chapter-vertical"
:class="
playerPosition >= chapter.start && playerPosition < chapters[index + 1].start
? 'chapter-vertical bg-red-500/50'
: 'chapter-vertical'
"
>
<div class="flex">
<span class="mt-5 mr-2 text-current" v-text="index + 1" />
@ -22,7 +27,16 @@
</div>
<!-- mobile view -->
<div v-else class="flex overflow-x-auto">
<div :key="chapter.start" v-for="chapter in chapters" @click="$emit('seek', chapter.start)" class="chapter">
<div
:key="chapter.start"
v-for="(chapter, index) in chapters"
@click="$emit('seek', chapter.start)"
:class="
playerPosition >= chapter.start && playerPosition < chapters[index + 1].start
? 'chapter bg-red-500/50'
: 'chapter'
"
>
<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" />
@ -55,17 +69,24 @@
@apply truncate overflow-hidden inline-block w-10em;
}
</style>
<script setup>
import { defineProps, defineEmits } from "vue";
defineProps({
<script type="text/javascript">
export default {
emits: ["seek"],
props: {
chapters: Object,
mobileLayout: {
type: Boolean,
default: () => true,
},
});
defineEmits(["seek"]);
},
data() {
return { playerPosition: 0 };
},
mounted() {
// get current video position in regular intervals
setInterval(() => {
this.playerPosition = document.querySelector("video").currentTime;
}, 2000);
},
};
</script>