mirror of
https://github.com/TeamPiped/Piped.git
synced 2024-11-10 02:08:21 +00:00
chapters: highlight current playing chapter
This commit is contained in:
parent
7ec18073a1
commit
f96a7fa86a
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user