Add support for displaying chapters (#694)

src/components/Chapters.vue

@@ -0,0 +1,26 @@
+<template>
+    <h2 v-t="'video.chapters'" />
+    <div
+        :key="chapter.start"
+        v-for="chapter in props.chapters"
+        @click="$emit('seek', chapter.start)"
+        class="flex items-center mb-2 cursor-pointer w-sm"
+    >
+        <img :src="chapter.image" :alt="chapter.title" class="h-12" />
+        <div class="ml-1">
+            <span class="text-xl" v-text="chapter.title" />
+            <br />
+            <span class="text-sm" v-text="timeFormat(chapter.start)" />
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { defineProps, defineEmits } from "vue";
+
+const props = defineProps({
+    chapters: Object,
+});
+
+defineEmits(["seek"]);
+</script>

src/components/Player.vue

@@ -79,7 +79,6 @@ export default {
                     "f,m,j,k,l,c,space,up,down,left,right,0,1,2,3,4,5,6,7,8,9,shift+,,shift+.",
                     function (e, handler) {
                         const videoEl = self.$refs.videoEl;
-                        console.log(handler.key);
                         switch (handler.key) {
                             case "f":
                                 self.$ui.getControls().toggleFullScreen();
@@ -503,6 +502,11 @@ export default {
                 }
             };
         },
+        seek(time) {
+            if (this.$refs.videoEl) {
+                this.$refs.videoEl.currentTime = time;
+            }
+        },
         destroy() {
             if (this.$ui) {
                 this.$ui.destroy();

src/components/WatchVideo.vue

@@ -89,6 +89,7 @@
             />
             <!-- eslint-disable-next-line vue/no-v-html -->
             <p v-show="showDesc" class="break-words" v-html="purifyHTML(video.description)" />
+            <Chapters :chapters="video.chapters" @seek="navigate" />
             <div
                 v-if="showDesc && sponsors && sponsors.segments"
                 v-text="`${$t('video.sponsor_segments')}: ${sponsors.segments.length}`"
@@ -143,6 +144,7 @@ import Player from "@/components/Player.vue";
 import VideoItem from "@/components/VideoItem.vue";
 import ErrorHandler from "@/components/ErrorHandler.vue";
 import Comment from "@/components/Comment.vue";
+import Chapters from "@/components/Chapters.vue";
 
 export default {
     name: "App",
@@ -151,6 +153,7 @@ export default {
         VideoItem,
         ErrorHandler,
         Comment,
+        Chapters,
     },
     data() {
         const smallViewQuery = window.matchMedia("(max-width: 640px)");
@@ -337,6 +340,9 @@ export default {
         getVideoId() {
             return this.$route.query.v || this.$route.params.v;
         },
+        navigate(time) {
+            this.$refs.videoPlayer.seek(time);
+        },
     },
 };
 </script>

src/locales/en.json

@@ -88,7 +88,8 @@
         "views": "views",
         "watched": "Watched",
         "sponsor_segments": "Sponsors Segments",
-        "ratings_disabled": "Ratings Disabled"
+        "ratings_disabled": "Ratings Disabled",
+        "chapters": "Chapters"
     },
     "search": {
         "did_you_mean": "Did you mean: "