revamped chapter layouts for desktop view

* desktop chapters layout
* fallback to mobile view on small screens

src/components/ChaptersBar.vue

@@ -1,6 +1,24 @@
 <template>
-    <!-- <h2 v-t="'video.chapters'" class="mb-5" /> -->
+    <!-- desktop view -->
-    <div class="flex overflow-x-auto">
+    <div v-if="mobileLayout == false" class="flex-col <lg:hidden" style="overflow-y: scroll; max-height: 29.3em">
+        <h2 v-t="'video.chapters'" class="mb-2 bg-gray-500/50 p-2" />
+        <div
+            :key="chapter.start"
+            v-for="chapter in chapters"
+            @click="$emit('seek', chapter.start)"
+            class="chapter-vertical"
+        >
+            <div class="flex">
+                <img :src="chapter.image" :alt="chapter.title" />
+                <div class="flex flex-col m-2">
+                    <span class="text-truncate text-sm" :title="chapter.title" v-text="chapter.title" />
+                    <span class="text-sm font-bold text-blue-500" v-text="timeFormat(chapter.start)" />
+                </div>
+            </div>
+        </div>
+    </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">
             <img :src="chapter.image" :alt="chapter.title" class="" />
             <div class="m-1 flex">
@@ -24,6 +42,18 @@
         height: 100%;
     }
 }
+.chapter-vertical {
+    @apply cursor-pointer;
+    align-self: center;
+    padding: 10px;
+    img {
+        width: 30%;
+        height: 30%;
+    }
+}
+.chapter-vertical:hover {
+    @apply bg-gray-500;
+}
 .text-truncate {
     white-space: nowrap;
     width: 10em;
@@ -38,6 +68,10 @@ import { defineProps, defineEmits } from "vue";
 
 defineProps({
     chapters: Object,
+    mobileLayout: {
+        type: Boolean,
+        default: () => true,
+    },
 });
 
 defineEmits(["seek"]);

src/components/WatchVideo.vue

@@ -16,6 +16,7 @@
         <ErrorHandler v-if="video && video.error" :message="video.message" :error="video.error" />
 
         <div v-show="!video.error">
+            <div :class="isMobile ? 'flex-col' : 'flex'">
                 <VideoPlayer
                     ref="videoPlayer"
                     :video="video"
@@ -25,7 +26,13 @@
                     :selected-auto-play="selectedAutoPlay"
                     :selected-auto-loop="selectedAutoLoop"
                 />
-            <ChaptersBar v-if="video?.chapters?.length > 0" :chapters="video.chapters" @seek="navigate" />
+                <ChaptersBar
+                    :mobileLayout="isMobile"
+                    v-if="video?.chapters?.length > 0"
+                    :chapters="video.chapters"
+                    @seek="navigate"
+                />
+            </div>
             <div class="font-bold mt-2 text-2xl break-words" v-text="video.title" />
 
             <div class="flex mb-1.5">
@@ -203,6 +210,7 @@ export default {
             smallViewQuery: smallViewQuery,
             smallView: smallViewQuery.matches,
             showModal: false,
+            isMobile: true,
         };
     },
     computed: {
@@ -226,6 +234,18 @@ export default {
         },
     },
     mounted() {
+        // check screen size
+        if (window.innerWidth >= 1024) {
+            this.isMobile = false;
+        }
+        // add an event listener to watch for screen size changes
+        window.addEventListener("resize", () => {
+            if (window.innerWidth >= 1024) {
+                this.isMobile = false;
+            } else {
+                this.isMobile = true;
+            }
+        });
         this.getVideoData().then(() => {
             (async () => {
                 const videoId = this.getVideoId();