TeamPiped-mirror/Piped
1
0
Fork 0
mirror of https://github.com/TeamPiped/Piped.git synced 2024-08-04 18:29:33 +00:00
Code Issues Projects Releases Packages Wiki Activity

chapters: highlight current playing chapter

Browse source
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
1 changed files with 34 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
src/components/ChaptersBar.vue
View file

@ -9,6 +9,11 @@
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="
playerPosition >= chapter.start && playerPosition < chapters[index + 1].start
? '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" />
@ -22,7 +27,16 @@
</div> </div>
<!-- mobile view --> <!-- mobile view -->
<div v-else class="flex overflow-x-auto"> <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" /> <img :src="chapter.image" :alt="chapter.title" />
<div class="m-1 flex"> <div class="m-1 flex">
<span class="text-truncate text-sm" :title="chapter.title" v-text="chapter.title" /> <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; @apply truncate overflow-hidden inline-block w-10em;
} }
</style> </style>
<script type="text/javascript">
<script setup> export default {
import { defineProps, defineEmits } from "vue"; emits: ["seek"],
props: {
defineProps({
chapters: Object, chapters: Object,
mobileLayout: { mobileLayout: {
type: Boolean, type: Boolean,
default: () => true, default: () => true,
}, },
}); },
data() {
defineEmits(["seek"]); return { playerPosition: 0 };
},
mounted() {
// get current video position in regular intervals
setInterval(() => {
this.playerPosition = document.querySelector("video").currentTime;
}, 2000);
},
};
</script> </script>