Add button to collapse playlist when watching a video

src/renderer/components/WatchVideoPlaylist/WatchVideoPlaylist.css

@@ -13,15 +13,20 @@
 .channelName {
   font-size: 15px;
   position: relative;
-  inset-block-end: 15px;
+  inset-block-end: 0;
 }
 
 .playlistIndex {
   position: relative;
-  inset-block-end: 15px;
+  inset-block-end: 0;
   color: var(--tertiary-text-color);
 }
 
+.playlistIndex.isCollapsed {
+  display: block;
+  margin-block-end: -6px;
+}
+
 .playlistProgressBarContainer {
   margin-inline-start: 10px;
   position: relative;
@@ -155,6 +160,32 @@
   transition: background 0.2s ease-in;
 }
 
+.playlistHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 10px;
+  margin-block-end: 4px;
+}
+
+.playlistHeader .playlistCollapseButton {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  inline-size: 32px;
+  block-size: 32px;
+  margin-block-start: 0;
+  font-size: 16px;
+}
+
+.playlistHeader .playlistTitle {
+  flex: 1;
+  min-inline-size: 0;
+  margin: 0;
+  padding-block-start: 8px;
+}
+
 .playlistIcon {
   inline-size: 1em;
 }

src/renderer/components/WatchVideoPlaylist/WatchVideoPlaylist.vue

@@ -1,25 +1,42 @@
 <template>
-  <FtCard class="relative">
+  <FtCard
+    class="relative"
+    :class="{ isCollapsed }"
+  >
     <FtLoader
       v-if="isLoading"
     />
     <div
       v-else
     >
-      <h3
-        class="playlistTitle"
-        :title="playlistTitle"
-      >
-        <RouterLink
-          class="playlistTitleLink"
-          dir="auto"
-          :to="playlistPageLinkTo"
+      <div class="playlistHeader">
+        <h3
+          class="playlistTitle"
+          :title="playlistTitle"
         >
-          {{ playlistTitle }}
-        </RouterLink>
-      </h3>
+          <RouterLink
+            class="playlistTitleLink"
+            dir="auto"
+            :to="playlistPageLinkTo"
+          >
+            {{ playlistTitle }}
+          </RouterLink>
+        </h3>
+        <button
+          class="playlistButton playlistCollapseButton"
+          :aria-label="isCollapsed ? t('Video.Expand Playlist') : t('Video.Collapse Playlist')"
+          :aria-expanded="!isCollapsed"
+          :title="isCollapsed ? t('Video.Expand Playlist') : t('Video.Collapse Playlist')"
+          @click="toggleCollapse"
+        >
+          <FontAwesomeIcon
+            class="playlistIcon"
+            :icon="['fas', isCollapsed ? 'angle-down' : 'angle-up']"
+          />
+        </button>
+      </div>
       <template
-        v-if="channelName !== ''"
+        v-if="!isCollapsed && channelName !== ''"
       >
         <RouterLink
           v-if="channelId"
@@ -38,14 +55,15 @@
       </template>
       <span
         class="playlistIndex"
+        :class="{ isCollapsed }"
       >
         <label for="playlistProgressBar">
           {{ currentVideoIndexOneBased }} / {{ playlistVideoCount }}
         </label>
 
         <!-- eslint-disable vuejs-accessibility/mouse-events-have-key-events, vuejs-accessibility/click-events-have-key-events -->
         <div
-          v-if="!shuffleEnabled && !reversePlaylist"
+          v-if="!isCollapsed && !shuffleEnabled && !reversePlaylist"
           class="playlistProgressBarContainer"
           @mouseenter="showProgressBarPreview = true"
           @mouseleave="showProgressBarPreview = false"
@@ -85,7 +103,10 @@
           </div>
         </div>
       </span>
-      <div class="playlistButtons">
+      <div
+        v-show="!isCollapsed"
+        class="playlistButtons"
+      >
         <button
           class="playlistButton"
           :class="{ playlistButtonActive: loopEnabled }"
@@ -128,6 +149,7 @@
       </div>
       <div
         v-if="!isLoading"
+        v-show="!isCollapsed"
         ref="playlistItemsWrapper"
         class="playlistItemsWrapper"
       >
@@ -206,6 +228,7 @@ const { locale, t } = useI18n()
 const router = useRouter()
 
 const isLoading = ref(false)
+const isCollapsed = ref(false)
 const shuffleEnabled = ref(false)
 const loopEnabled = ref(false)
 const reversePlaylist = ref(false)
@@ -218,6 +241,8 @@ const showProgressBarPreview = ref(false)
 const previewPosition = ref(0)
 const previewVideoIndex = ref(1)
 const windowWidth = ref(window.innerWidth)
+const savedScrollTop = ref(0)
+const lastScrolledVideoId = ref(null)
 
 let prevVideoBeforeDeletion = null
 let getPlaylistInfoRun = false
@@ -334,6 +359,10 @@ watch(selectedUserPlaylistLastUpdatedAt, () => {
 })
 
 watch(() => props.videoId, (newId, oldId) => {
+  if (!isCollapsed.value) {
+    nextTick(scrollToCurrentVideo)
+  }
+
   // Check if next video is from the shuffled list or if the user clicked a different video
   if (shuffleEnabled.value) {
     const newVideoIndex = randomizedPlaylistItems.value.findIndex((item) => {
@@ -449,6 +478,33 @@ function getPlaylistInfoWithDelay() {
   }
 }
 
+function saveScrollState() {
+  if (playlistItemsWrapper.value) {
+    savedScrollTop.value = playlistItemsWrapper.value.scrollTop
+    lastScrolledVideoId.value = props.videoId
+  }
+}
+
+function restoreScrollState() {
+  if (lastScrolledVideoId.value !== props.videoId) {
+    scrollToCurrentVideo()
+  } else if (playlistItemsWrapper.value) {
+    playlistItemsWrapper.value.scrollTop = savedScrollTop.value
+  }
+}
+
+watch(isCollapsed, (collapsed) => {
+  if (collapsed) {
+    saveScrollState()
+  } else {
+    nextTick(restoreScrollState)
+  }
+})
+
+function toggleCollapse() {
+  isCollapsed.value = !isCollapsed.value
+}
+
 function toggleLoop() {
   if (loopEnabled.value) {
     loopEnabled.value = false
@@ -735,6 +791,7 @@ function scrollToVideo(index) {
 }
 
 function scrollToCurrentVideo() {
+  if (isCollapsed.value) return
   scrollToVideo(currentVideoIndexZeroBased.value)
 }
 

src/renderer/views/Watch/Watch.scss

@@ -167,12 +167,17 @@
   }
 
   .watchVideoPlaylist {
+    &.isCollapsed {
+      block-size: auto;
+    }
+
     :deep(.videoThumbnail) {
       margin-block: auto;
     }
 
-    @media (width <= 768px) {
+    @media (width <= 1050px) {
       block-size: auto;
+      margin-inline: 0;
     }
   }
 

static/locales/en-US.yaml

@@ -874,6 +874,8 @@ Video:
   Loop Playlist: Loop Playlist
   Shuffle Playlist: Shuffle Playlist
   Reverse Playlist: Reverse Playlist
+  Collapse Playlist: Collapse Playlist
+  Expand Playlist: Expand Playlist
   Previous: Previous
   Next: Next
   Watched: Watched