Merge pull request #2522 from kskarthik/master

refactor: vertical chapters layout for mobile screen

package.json

@@ -6,7 +6,7 @@
         "serve": "vite",
         "build": "vite build",
         "preview": "vite preview",
-        "format": "prettier -w --ignore-path .gitignore **/**.{js,vue}",
+        "format": "prettier -w --ignore-path .gitignore **/**.{js,vue,json}",
         "lint": "eslint --fix --color --ignore-path .gitignore --ext .js,.vue ."
     },
     "dependencies": {

renovate.json

@@ -1,20 +1,11 @@
 {
     "$schema": "https://docs.renovatebot.com/renovate-schema.json",
-  "extends": [
-    "config:base",
-    "group:recommended"
-  ],
-  "ignorePresets": [
-    ":prHourlyLimit2"
-  ],
+    "extends": ["config:base", "group:recommended"],
+    "ignorePresets": [":prHourlyLimit2"],
     "packageRules": [
         {
-      "matchPackagePrefixes": [
-        "@unocss/"
-      ],
-      "matchPackageNames": [
-        "unocss"
-      ],
+            "matchPackagePrefixes": ["@unocss/"],
+            "matchPackageNames": ["unocss"],
             "groupName": "unocss"
         }
     ],

src/components/ChaptersBar.vue

@@ -21,8 +21,34 @@
             </div>
         </div>
     </div>
-    <!-- mobile view -->
-    <div v-else class="flex overflow-x-auto">
+
+    <!-- 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 }})
+        </h2>
+        <div
+            :key="chapter.start"
+            v-for="(chapter, index) in chapters"
+            @click="$emit('seek', chapter.start)"
+            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 Horizontal view -->
+    <div v-if="getPreferenceString('mobileChapterLayout') == 'Horizontal' && mobileLayout" class="flex overflow-x-auto">
         <div
             :key="chapter.start"
             v-for="(chapter, index) in chapters"

src/components/PreferencesPage.vue

@@ -126,6 +126,15 @@
             @change="onChange($event)"
         />
     </label>
+    <!-- chapters layout on mobile -->
+    <label class="lg:invisible 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>
+    </label>
     <label class="pref" for="chkShowWatchOnYouTube">
         <strong v-t="'actions.show_watch_on_youtube'" />
         <input
@@ -363,6 +372,7 @@ import ConfirmModal from "./ConfirmModal.vue";
 export default {
     data() {
         return {
+            mobileChapterLayout: "Vertical",
             selectedInstance: null,
             authInstance: false,
             selectedAuthInstance: null,
@@ -523,6 +533,7 @@ 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", "Vertical");
             if (this.selectedLanguage != "en") {
                 try {
                     this.CountryMap = await import(`../utils/CountryMaps/${this.selectedLanguage}.json`).then(
@@ -581,6 +592,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/components/WatchVideo.vue

@@ -148,7 +148,7 @@
                 v-t="`actions.${showDesc ? 'minimize_description' : 'show_description'}`"
             />
 
-            <span class="btn" v-show="video?.chapters?.length > 0">
+            <span class="btn ml-2" v-show="video?.chapters?.length > 0">
                 <input id="showChapters" type="checkbox" v-model="showChapters" />
                 <label class="ml-2" for="showChapters" v-t="'actions.show_chapters'" />
             </span>

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",
@@ -169,7 +170,9 @@
         "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}?",