Cleanup code slightly.

This commit is contained in:
Kavin 2022-07-25 17:50:42 +05:30
parent e68e73794e
commit e2fd9f6c68
No known key found for this signature in database
GPG key ID: 49451E4482CC5BCD

View file

@ -9,11 +9,7 @@
v-for="(chapter, index) in chapters" v-for="(chapter, index) in chapters"
@click="$emit('seek', chapter.start)" @click="$emit('seek', chapter.start)"
class="chapter-vertical" class="chapter-vertical"
:class=" :class="{ 'bg-red-500/50': isCurrentChapter(index) }"
isCurrentChapter(chapters, index, playerPosition)
? 'chapter-vertical bg-red-500/50'
: 'chapter-vertical'
"
> >
<div class="flex"> <div class="flex">
<span class="mt-5 mr-2 text-current" v-text="index + 1" /> <span class="mt-5 mr-2 text-current" v-text="index + 1" />
@ -31,7 +27,8 @@
:key="chapter.start" :key="chapter.start"
v-for="(chapter, index) in chapters" v-for="(chapter, index) in chapters"
@click="$emit('seek', chapter.start)" @click="$emit('seek', chapter.start)"
:class="isCurrentChapter(chapters, index, playerPosition) ? 'chapter bg-red-500/50' : 'chapter'" class="chapter"
:class="{ 'bg-red-500/50': isCurrentChapter(index) }"
> >
<img :src="chapter.image" :alt="chapter.title" /> <img :src="chapter.image" :alt="chapter.title" />
<div class="m-1 flex"> <div class="m-1 flex">
@ -66,24 +63,10 @@
} }
</style> </style>
<script>
export default {
methods: {
isCurrentChapter(chapters, index, playerPosition) {
if (index + 1 == chapters.length) {
return playerPosition >= chapters[index].start;
} else {
return playerPosition >= chapters[index].start && playerPosition < chapters[index + 1].start;
}
},
},
};
</script>
<script setup> <script setup>
import { defineProps, defineEmits } from "vue"; import { defineProps, defineEmits } from "vue";
defineProps({ const props = defineProps({
chapters: Object, chapters: Object,
mobileLayout: { mobileLayout: {
type: Boolean, type: Boolean,
@ -95,5 +78,12 @@ defineProps({
}, },
}); });
const isCurrentChapter = index => {
return (
props.playerPosition >= props.chapters[index].start &&
props.playerPosition < (props.chapters[index + 1]?.start ?? Infinity)
);
};
defineEmits(["seek"]); defineEmits(["seek"]);
</script> </script>