Implement more responsive view on watch page

Closes #4172

src/components/ChaptersBar.vue

@@ -24,52 +24,52 @@
 
     <!-- mobile vertical view -->
     <div
-        v-if="mobileLayout && getPreferenceString('mobileChapterLayout') == 'Vertical'"
+        v-if="mobileLayout && getPreferenceString('mobileChapterLayout', 'Horizontal') == 'Vertical'"
         class="flex max-h-64 flex-col overflow-y-auto"
     >
-        <h2 class="mb-2 bg-gray-500/50 p-2" aria-label="chapters" title="chapters">
+        <h2 class="mb-2 bg-gray-500/50 p-2 text-sm font-semibold" aria-label="chapters" title="chapters">
             {{ $t("video.chapters") }} ({{ chapters.length }})
         </h2>
         <div
             v-for="(chapter, index) in chapters"
             :key="chapter.start"
-            class="cursor-pointer self-center p-2.5 hover:bg-gray-500"
+            class="flex cursor-pointer items-center gap-2 px-2 py-1.5 hover:bg-gray-500"
             :class="{ 'bg-red-500/50': isCurrentChapter(index) }"
             @click="$emit('seek', chapter.start)"
         >
-            <div class="flex">
-                <span class="mt-5 mr-2 text-current" v-text="index + 1" />
-                <img class="h-[30%] w-[30%] shrink-0" :src="chapter.image" :alt="chapter.title" />
-                <div class="m-2 flex flex-col">
-                    <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>
+            <span class="w-5 shrink-0 text-center text-xs" v-text="index + 1" />
+            <img class="h-10 w-16 shrink-0 rounded object-cover" :src="chapter.image" :alt="chapter.title" />
+            <div class="flex min-w-0 flex-col">
+                <span class="truncate text-sm" :title="chapter.title" v-text="chapter.title" />
+                <span class="text-xs font-bold text-blue-500" v-text="timeFormat(chapter.start)" />
             </div>
         </div>
     </div>
     <!-- mobile Horizontal view -->
-    <div v-if="getPreferenceString('mobileChapterLayout') == 'Horizontal' && mobileLayout" class="flex overflow-x-auto">
+    <div
+        v-if="getPreferenceString('mobileChapterLayout', 'Horizontal') == 'Horizontal' && mobileLayout"
+        class="flex gap-2 overflow-x-auto pb-2"
+    >
         <div
             v-for="(chapter, index) in chapters"
             :key="chapter.start"
-            class="cursor-pointer self-center p-2.5"
+            class="w-32 flex-none cursor-pointer rounded p-1"
             :class="{ 'bg-red-500/50': isCurrentChapter(index) }"
             @click="$emit('seek', chapter.start)"
         >
-            <img class="size-full" :src="chapter.image" :alt="chapter.title" />
-            <div class="m-1 flex">
-                <span
-                    class="inline-block w-[10em] truncate overflow-hidden text-sm"
-                    :title="chapter.title"
-                    v-text="chapter.title"
-                />
-                <span class="px-1 text-sm font-bold text-blue-500" v-text="timeFormat(chapter.start)" />
+            <img class="aspect-video w-full rounded object-cover" :src="chapter.image" :alt="chapter.title" />
+            <div class="mt-1 px-0.5">
+                <span class="line-clamp-2 text-xs leading-tight" :title="chapter.title" v-text="chapter.title" />
+                <span class="text-xs font-bold text-blue-500" v-text="timeFormat(chapter.start)" />
             </div>
         </div>
     </div>
 </template>
 
 <script setup>
+import { timeFormat } from "@/composables/useFormatting.js";
+import { getPreferenceString } from "@/composables/usePreferences.js";
+
 const props = defineProps({
     chapters: {
         type: Object,

src/components/NavBar.vue

@@ -129,7 +129,7 @@
             @focus="onInputFocus"
             @blur="onInputBlur"
         />
-        <ClearButton v-if="searchText" @clear="searchText = ''" />\n
+        <ClearButton v-if="searchText" @clear="searchText = ''" />
     </div>
     <SearchSuggestions
         v-show="(searchText || showSearchHistory) && suggestionsVisible"

src/components/WatchVideo.vue

@@ -17,9 +17,8 @@
                 <i18n-t keypath="info.next_video_countdown">{{ counter }}</i18n-t>
             </ToastComponent>
         </Transition>
-        <div class="flex gap-5">
-            <div class="flex-auto">
-                <div v-show="!video.error">
+        <div v-show="!video.error" class="flex gap-5">
+            <div class="min-w-0 flex-auto">
                 <Teleport defer to="#theaterModeSpot" :disabled="!theaterMode">
                     <div class="flex flex-row">
                         <keep-alive>
@@ -51,13 +50,6 @@
                     </div>
                 </Teleport>
                 <div v-if="video && isMobile">
-                        <ChaptersBar
-                            v-if="video?.chapters?.length > 0 && showChapters"
-                            :mobile-layout="isMobile"
-                            :chapters="video.chapters"
-                            :player-position="currentTime"
-                            @seek="navigate"
-                        />
                     <PlaylistVideos
                         v-if="playlist"
                         :playlist-id="playlistId"
@@ -65,6 +57,13 @@
                         :selected-index="index"
                         :prefer-listen="isListening"
                     />
+                    <ChaptersBar
+                        v-if="video?.chapters?.length > 0 && showChapters"
+                        :mobile-layout="true"
+                        :chapters="video.chapters"
+                        :player-position="currentTime"
+                        @seek="navigate"
+                    />
                 </div>
                 <!-- video title -->
                 <div class="mt-2 text-2xl font-bold wrap-break-word" v-text="video.title" />
@@ -84,10 +83,7 @@
                             </div>
                             <div class="flex items-center">
                                 <i-fa6-solid-thumbs-down />
-                                    <strong
-                                        class="ml-1"
-                                        v-text="video.dislikes >= 0 ? addCommas(video.dislikes) : '?'"
-                                    />
+                                <strong class="ml-1" v-text="video.dislikes >= 0 ? addCommas(video.dislikes) : '?'" />
                             </div>
                         </template>
                         <template v-if="video.likes < 0">
@@ -162,9 +158,7 @@
                                 aria-label="RSS feed"
                                 title="RSS feed"
                                 role="button"
-                                    :href="`${apiUrl()}/feed/unauthenticated/rss?channels=${
-                                        video.uploaderUrl.split('/')[2]
-                                    }`"
+                                :href="`${apiUrl()}/feed/unauthenticated/rss?channels=${video.uploaderUrl.split('/')[2]}`"
                                 target="_blank"
                                 class="inline-block w-auto cursor-pointer rounded-sm bg-gray-300 py-2 text-gray-600 hover:bg-gray-500 hover:text-white focus:shadow-red-400 focus:outline-2 focus:outline-red-500 max-md:px-2 md:px-4 dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300"
                             >
@@ -253,7 +247,6 @@
                         >
                     </div>
                 </template>
-                </div>
 
                 <hr />
 
@@ -273,12 +266,12 @@
                 </select>
 
                 <hr />
-                <div v-if="isMobile">
                 <a
                     v-t="`actions.${showRecs ? 'minimize_recommendations' : 'show_recommendations'}`"
                     class="mb-2 inline-block w-auto cursor-pointer rounded-sm bg-gray-300 py-2 text-gray-600 hover:bg-gray-500 hover:text-white focus:shadow-red-400 focus:outline-2 focus:outline-red-500 max-md:px-2 md:px-4 dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300"
                     @click="showRecs = !showRecs"
                 />
+                <div v-if="isMobile">
                     <hr v-show="showRecs" />
                     <div v-show="showRecs">
                         <ContentItem
@@ -326,7 +319,7 @@
                     </div>
                 </div>
             </div>
-            <div v-if="video && !isMobile" class="max-w-96 flex-none">
+            <div v-if="video && showDesktopSidebar" class="w-96 flex-none">
                 <ChaptersBar
                     v-if="video?.chapters?.length > 0 && showChapters"
                     :mobile-layout="isMobile"
@@ -341,11 +334,6 @@
                     :selected-index="index"
                     :prefer-listen="isListening"
                 />
-                <a
-                    v-t="`actions.${showRecs ? 'minimize_recommendations' : 'show_recommendations'}`"
-                    class="mb-2 inline-block w-auto cursor-pointer rounded-sm bg-gray-300 py-2 text-gray-600 hover:bg-gray-500 hover:text-white focus:shadow-red-400 focus:outline-2 focus:outline-red-500 max-md:px-2 md:px-4 dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300"
-                    @click="showRecs = !showRecs"
-                />
                 <hr v-show="showRecs" />
                 <div v-show="showRecs">
                     <ContentItem
@@ -439,6 +427,13 @@ const selectedAutoPlayEnabled = computed(() => {
     return Number(selectedAutoPlay.value) >= 1;
 });
 
+const showDesktopSidebar = computed(() => {
+    return (
+        !isMobile.value &&
+        (showRecs.value || Boolean(playlist.value) || (video.value?.chapters?.length > 0 && showChapters.value))
+    );
+});
+
 const toggleListenUrl = computed(() => {
     const url = new URL(window.location.href);
     url.searchParams.set("listen", isListening.value ? "0" : "1");