feat: configurable chapters layout on mobile screen

src/components/ChaptersBar.vue

@@ -1,11 +1,31 @@
 <template>
-    <!-- desktop / mobile view -->
+    <!-- desktop view -->
+    <div v-if="!mobileLayout" class="flex-col overflow-y-scroll max-w-35vw max-h-75vh min-h-64 lt-lg:hidden">
+        <h2 class="mb-2 bg-gray-500/50 p-2" aria-label="chapters" title="chapters">
+            {{ $t("video.chapters") }} ({{ chapters.length }})
+        </h2>
         <div
-        :class="
+            :key="chapter.start"
-            !mobileLayout
+            v-for="(chapter, index) in chapters"
-                ? 'flex-col overflow-y-scroll max-w-35vw max-h-75vh min-h-64 lt-lg:hidden'
+            @click="$emit('seek', chapter.start)"
-                : 'flex flex-col overflow-y-scroll max-h-64'
+            class="chapter-vertical"
-        "
+            :class="{ 'bg-red-500/50': isCurrentChapter(index) }"
+        >
+            <div class="flex">
+                <span class="mt-5 mr-2 text-current" v-text="index + 1" />
+                <img class="shrink-0" :src="chapter.image" :alt="chapter.title" />
+                <div class="flex flex-col m-2">
+                    <span class="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 vertical view -->
+    <div
+        v-if="mobileLayout && getPreferenceString('mobileChapterLayout') == 'Vertical'"
+        class="flex flex-col overflow-y-scroll max-h-64"
     >
         <h2 class="mb-2 bg-gray-500/50 p-2" aria-label="chapters" title="chapters">
             {{ $t("video.chapters") }} ({{ chapters.length }})
@@ -27,8 +47,8 @@
             </div>
         </div>
     </div>
-    <!-- old mobile view -->
+    <!-- mobile Horizontal view -->
-    <!-- <div v-else class="flex overflow-x-auto">
+    <div v-if="getPreferenceString('mobileChapterLayout') == 'Horizontal' && mobileLayout" class="flex overflow-x-auto">
         <div
             :key="chapter.start"
             v-for="(chapter, index) in chapters"
@@ -42,7 +62,7 @@
                 <span class="px-1 text-sm font-bold text-blue-500" v-text="timeFormat(chapter.start)" />
             </div>
         </div>
-    </div> -->
+    </div>
 </template>
 
 <style>

src/components/PreferencesPage.vue

@@ -126,6 +126,22 @@
             @change="onChange($event)"
         />
     </label>
+    <!-- chapters layout on mobile -->
+    <label class="pref" for="chkMinimizeChapters">
+        <strong v-t="'actions.chapters_layout_mobile'" />
+
+        <select id="ddlDefaultHomepage" v-model="mobileChapterLayout" class="select w-auto" @change="onChange($event)">
+            <option v-t="'video.chapters_horizontal'" value="Horizontal" />
+            <option v-t="'video.chapters_vertical'" value="Vertical" />
+        </select>
+        <!-- <input
+            id="chkMinimizeChapters"
+            v-model="minimizeChapters"
+            class="checkbox"
+            type="checkbox"
+            @change="onChange($event)"
+        /> -->
+    </label>
     <label class="pref" for="chkShowWatchOnYouTube">
         <strong v-t="'actions.show_watch_on_youtube'" />
         <input
@@ -353,6 +369,7 @@ import ConfirmModal from "./ConfirmModal.vue";
 export default {
     data() {
         return {
+            mobileChapterLayout: "Vertical",
             selectedInstance: null,
             authInstance: false,
             selectedAuthInstance: null,
@@ -511,6 +528,10 @@ export default {
             this.disableLBRY = this.getPreferenceBoolean("disableLBRY", false);
             this.proxyLBRY = this.getPreferenceBoolean("proxyLBRY", false);
             this.hideWatched = this.getPreferenceBoolean("hideWatched", false);
+            this.mobileChapterLayout = this.getPreferenceString(
+                "mobileChapterLayout",
+                localStorage.getItem("mobileChapterLayout") || "Vertical",
+            );
             if (this.selectedLanguage != "en") {
                 try {
                     this.CountryMap = await import(`../utils/CountryMaps/${this.selectedLanguage}.json`).then(
@@ -568,6 +589,7 @@ export default {
                 localStorage.setItem("disableLBRY", this.disableLBRY);
                 localStorage.setItem("proxyLBRY", this.proxyLBRY);
                 localStorage.setItem("hideWatched", this.hideWatched);
+                localStorage.setItem("mobileChapterLayout", this.mobileChapterLayout);
 
                 if (shouldReload) window.location.reload();
             }

src/locales/en.json

@@ -99,6 +99,7 @@
         "logout": "Logout from this device",
         "minimize_recommendations_default": "Minimize Recommendations by default",
         "minimize_chapters_default": "Minimize Chapters by default",
+        "chapters_layout_mobile": "Chapters Layout On Mobile",
         "show_watch_on_youtube": "Show Watch on YouTube button",
         "invalidate_session": "Logout all devices",
         "different_auth_instance": "Use a different instance for authentication",
@@ -168,7 +169,10 @@
         "live": "{0} Live",
         "shorts": "Shorts",
         "all": "All",
-        "category": "Category"
+        "category": "Category",
+				"chapters_horizontal": "Horizontal",
+				"chapters_vertical": "Vertical"
+
     },
     "search": {
         "did_you_mean": "Did you mean: {0}?",