Merge pull request #1149 from kskarthik/revamp-chapters

Revamp chapters for desktop view

src/components/ChaptersBar.vue

@@ -1,11 +1,29 @@
 <template>
-    <!-- <h2 v-t="'video.chapters'" class="mb-5" /> -->
-    <div class="flex overflow-x-auto">
+    <!-- desktop view -->
+    <div v-if="!mobileLayout" class="flex-col overflow-y-scroll max-h-75vh min-h-64 <lg:hidden">
+        <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="" />
+            <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" />
-                <span class="text-sm font-bold text-blue-500" v-text="timeFormat(chapter.start)" />
+                <span class="px-1 text-sm font-bold text-blue-500" v-text="timeFormat(chapter.start)" />
             </div>
         </div>
     </div>
@@ -16,20 +34,22 @@
     height: 5px;
 }
 .chapter {
-    @apply cursor-pointer;
-    align-self: center;
-    padding: 10px;
+    @apply cursor-pointer self-center p-2.5;
     img {
-        width: 100%;
-        height: 100%;
+        @apply w-full h-full;
     }
 }
+.chapter-vertical {
+    @apply cursor-pointer self-center p-2.5;
+    img {
+        @apply w-3/10 h-3/10;
+    }
+}
+.chapter-vertical:hover {
+    @apply bg-gray-500;
+}
 .text-truncate {
-    white-space: nowrap;
-    width: 10em;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display: inline-block;
+    @apply truncate overflow-hidden inline-block w-10em;
 }
 </style>
 
@@ -38,6 +58,10 @@ import { defineProps, defineEmits } from "vue";
 
 defineProps({
     chapters: Object,
+    mobileLayout: {
+        type: Boolean,
+        default: () => true,
+    },
 });
 
 defineEmits(["seek"]);

src/components/WatchVideo.vue

@@ -16,16 +16,23 @@
         <ErrorHandler v-if="video && video.error" :message="video.message" :error="video.error" />
 
         <div v-show="!video.error">
-            <VideoPlayer
-                ref="videoPlayer"
-                :video="video"
-                :sponsors="sponsors"
-                :playlist="playlist"
-                :index="index"
-                :selected-auto-play="selectedAutoPlay"
-                :selected-auto-loop="selectedAutoLoop"
-            />
-            <ChaptersBar v-if="video?.chapters?.length > 0" :chapters="video.chapters" @seek="navigate" />
+            <div :class="isMobile ? 'flex-col' : 'flex'">
+                <VideoPlayer
+                    ref="videoPlayer"
+                    :video="video"
+                    :sponsors="sponsors"
+                    :playlist="playlist"
+                    :index="index"
+                    :selected-auto-play="selectedAutoPlay"
+                    :selected-auto-loop="selectedAutoLoop"
+                />
+                <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();