From 32c3f6e4e4356c572aaebde3be938766a52fc994 Mon Sep 17 00:00:00 2001
From: Sai Karthik <kskarthik@disroot.org>
Date: Fri, 17 Jun 2022 10:36:05 +0530
Subject: [PATCH 1/3] feat: horizontal scrollable chapters as tiles

---
 src/components/ChaptersBar.vue | 33 +++++++++++++++++++++++++--------
 1 file changed, 25 insertions(+), 8 deletions(-)

diff --git a/src/components/ChaptersBar.vue b/src/components/ChaptersBar.vue
index 412f6833..0f9b8c1f 100644
--- a/src/components/ChaptersBar.vue
+++ b/src/components/ChaptersBar.vue
@@ -1,18 +1,35 @@
 <template>
-    <h2 v-t="'video.chapters'" />
-    <div :key="chapter.start" v-for="chapter in chapters" @click="$emit('seek', chapter.start)" class="chapter">
-        <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)" />
+    <!-- <h2 v-t="'video.chapters'" class="mb-5" /> -->
+    <div 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">
+                <span class="text-truncate text-sm" :title="chapter.title" v-text="chapter.title" />
+                <span class="text-sm font-bold text-yellow-500" v-text="timeFormat(chapter.start)" />
+            </div>
         </div>
     </div>
 </template>
 
 <style>
+::-webkit-scrollbar {
+    height: 5px;
+}
 .chapter {
-    @apply flex items-center mb-2 cursor-pointer w-sm max-w-90vw;
+    @apply cursor-pointer;
+    align-self: center;
+    padding: 10px;
+    img {
+        width: 100%;
+        height: 100%;
+    }
+}
+.text-truncate {
+    white-space: nowrap;
+    width: 10em;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: inline-block;
 }
 </style>
 

From 3e15c11be8e6d4c94fd1b7844d1aea15d8aa27d9 Mon Sep 17 00:00:00 2001
From: Sai Karthik <kskarthik@disroot.org>
Date: Fri, 17 Jun 2022 10:37:07 +0530
Subject: [PATCH 2/3] show chapter above video title

---
 src/components/WatchVideo.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/WatchVideo.vue b/src/components/WatchVideo.vue
index f3f1c4bc..b1421b14 100644
--- a/src/components/WatchVideo.vue
+++ b/src/components/WatchVideo.vue
@@ -25,6 +25,7 @@
                 :selected-auto-play="selectedAutoPlay"
                 :selected-auto-loop="selectedAutoLoop"
             />
+            <ChaptersBar v-if="video?.chapters?.length > 0" :chapters="video.chapters" @seek="navigate" />
             <div class="font-bold mt-2 text-2xl break-words" v-text="video.title" />
 
             <div class="flex mb-1.5">
@@ -100,7 +101,6 @@
             />
             <!-- eslint-disable-next-line vue/no-v-html -->
             <div v-show="showDesc" class="break-words" v-html="purifyHTML(video.description)" />
-            <ChaptersBar v-if="video?.chapters?.length > 0" :chapters="video.chapters" @seek="navigate" />
             <div
                 v-if="showDesc && sponsors && sponsors.segments"
                 v-text="`${$t('video.sponsor_segments')}: ${sponsors.segments.length}`"

From b856239427804d4b292546854ef5fb1caca0a8a8 Mon Sep 17 00:00:00 2001
From: Sai Karthik <kskarthik@disroot.org>
Date: Fri, 17 Jun 2022 13:24:40 +0530
Subject: [PATCH 3/3] blue chapter time looks better on white/dark mode alike

---
 src/components/ChaptersBar.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ChaptersBar.vue b/src/components/ChaptersBar.vue
index 0f9b8c1f..0a8a271a 100644
--- a/src/components/ChaptersBar.vue
+++ b/src/components/ChaptersBar.vue
@@ -5,7 +5,7 @@
             <img :src="chapter.image" :alt="chapter.title" class="" />
             <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-yellow-500" v-text="timeFormat(chapter.start)" />
+                <span class="text-sm font-bold text-blue-500" v-text="timeFormat(chapter.start)" />
             </div>
         </div>
     </div>