Add Play All and Shuffle Button

src/renderer/components/playlist-info/playlist-info.js

@@ -123,6 +123,29 @@ export default defineComponent({
     }
   },
   computed: {
+    watchRandomVideo() {
+      if (!this.firstVideoIdExists) {
+        return ''
+      }
+
+      const randomVideo = this.videos[Math.floor(Math.random() * this.videos.length)]
+      return {
+        path: `/watch/${randomVideo.videoId}`,
+        query: this.watchPageLinkQuery(randomVideo.playlistItemId, true),
+      }
+    },
+    watchFirstVideo() {
+      if (!this.firstVideoIdExists) {
+        return ''
+      }
+
+      const firstVideo = this.videos[0]
+      return {
+        path: `/watch/${firstVideo.videoId}`,
+        query: this.watchPageLinkQuery(firstVideo.playlistItemId),
+      }
+    },
+
     hideSharingActions: function () {
       return this.$store.getters.getHideSharingActions
     },
@@ -352,6 +375,15 @@ export default defineComponent({
     document.removeEventListener('keydown', this.keyboardShortcutHandler)
   },
   methods: {
+    watchPageLinkQuery(playlistItemId, shuffle = false) {
+      return {
+        playlistId: this.id,
+        playlistType: this.videoPlaylistType,
+        playlistItemId: playlistItemId,
+        playlistEnableShuffle: shuffle,
+      }
+    },
+
     handlePlaylistNameInput(input) {
       if (input.trim() === '') {
         // Need to show message for blank input

src/renderer/components/playlist-info/playlist-info.scss

@@ -73,6 +73,7 @@
   grid-auto-flow: column;
   column-gap: 8px;
   justify-content: flex-end;
+  margin-block: 5px;
 }
 
 .searchInputsRow {
@@ -113,9 +114,14 @@
 
   .playlistOptionsAndSearch {
     display: flex;
-    flex-direction: column;
-    justify-content: space-between;
+    flex-flow: row wrap;
+    justify-content: center;
     align-items: center;
+    gap: 10px;
+  }
+
+  .searchWrapper {
+    flex-basis: 100%;
   }
 
   .channelShareWrapper,

src/renderer/components/playlist-info/playlist-info.vue

@@ -100,6 +100,7 @@
     <hr class="playlistInfoSeparator">
 
     <div
+      v-if="!isUserPlaylist"
       class="channelShareWrapper"
     >
       <router-link
@@ -128,89 +129,114 @@
           {{ channelName }}
         </h3>
       </div>
+    </div>
 
-      <div class="playlistOptionsAndSearch">
-        <div class="playlistOptions">
-          <ft-icon-button
-            v-if="editMode"
-            :title="$t('User Playlists.Save Changes')"
-            :disabled="playlistPersistenceDisabled"
-            :icon="['fas', 'save']"
-            theme="secondary"
-            @click="savePlaylistInfo"
-          />
-          <ft-icon-button
-            v-if="editMode"
-            :title="$t('User Playlists.Cancel')"
-            :icon="['fas', 'times']"
-            theme="secondary"
-            @click="exitEditMode"
-          />
-          <ft-icon-button
-            v-if="!editMode && isUserPlaylist"
-            :title="markedAsQuickBookmarkTarget ? $t('User Playlists.Quick Bookmark Enabled') : $t('User Playlists.Enable Quick Bookmark With This Playlist')"
-            :icon="markedAsQuickBookmarkTarget ? ['fas', 'bookmark'] : ['far', 'bookmark']"
-            :disabled="markedAsQuickBookmarkTarget"
-            :theme="markedAsQuickBookmarkTarget ? 'secondary' : 'base-no-default'"
-            @disabled-click="handleQuickBookmarkEnabledDisabledClick"
-            @click="enableQuickBookmarkForThisPlaylist"
-          />
-          <ft-icon-button
-            v-if="!editMode && isUserPlaylist"
-            :title="$t('User Playlists.Edit Playlist Info')"
-            :icon="['fas', 'edit']"
-            theme="secondary"
-            @click="enterEditMode"
-          />
-          <ft-icon-button
-            v-if="videoCount > 0 && showPlaylists && !editMode"
-            :title="$t('User Playlists.Copy Playlist')"
-            :icon="['fas', 'copy']"
-            theme="secondary"
-            @click="toggleCopyVideosPrompt"
-          />
-          <ft-icon-button
-            v-if="exportPlaylistButtonVisible"
-            :title="$t('User Playlists.Export Playlist')"
-            :icon="['fas', 'file-arrow-down']"
-            theme="secondary"
-            @click="handlePlaylistExport"
-          />
-          <ft-icon-button
-            v-if="!editMode && userPlaylistDuplicateItemCount > 0"
-            :title="$t('User Playlists.Remove Duplicate Videos')"
-            :icon="['fas', 'users-slash']"
-            theme="destructive"
-            @click="showRemoveDuplicateVideosPrompt = true"
-          />
-          <ft-icon-button
-            v-if="!editMode && userPlaylistAnyVideoWatched"
-            :title="$t('User Playlists.Remove Watched Videos')"
-            :icon="['fas', 'eye-slash']"
-            theme="destructive"
-            @click="showRemoveVideosOnWatchPrompt = true"
-          />
-          <ft-icon-button
-            v-if="deletePlaylistButtonVisible"
-            :disabled="markedAsQuickBookmarkTarget"
-            :title="!markedAsQuickBookmarkTarget ? $t('User Playlists.Delete Playlist') : playlistDeletionDisabledLabel"
-            :icon="['fas', 'trash']"
-            theme="destructive"
-            @disabled-click="handlePlaylistDeleteDisabledClick"
-            @click="showDeletePlaylistPrompt = true"
-          />
-          <ft-share-button
-            v-if="sharePlaylistButtonVisible"
-            :id="id"
-            class="sharePlaylistIcon"
-            :dropdown-position-y="description ? 'top' : 'bottom'"
-            share-target-type="Playlist"
+    <div class="playlistOptionsAndSearch">
+      <div class="playlistOptions">
+        <ft-icon-button
+          v-if="editMode"
+          :title="$t('User Playlists.Save Changes')"
+          :disabled="playlistPersistenceDisabled"
+          :icon="['fas', 'save']"
+          theme="secondary"
+          @click="savePlaylistInfo"
+        />
+        <ft-icon-button
+          v-if="editMode"
+          :title="$t('User Playlists.Cancel')"
+          :icon="['fas', 'times']"
+          theme="secondary"
+          @click="exitEditMode"
+        />
+        <ft-icon-button
+          v-if="!editMode && isUserPlaylist"
+          :title="markedAsQuickBookmarkTarget ? $t('User Playlists.Quick Bookmark Enabled') : $t('User Playlists.Enable Quick Bookmark With This Playlist')"
+          :icon="markedAsQuickBookmarkTarget ? ['fas', 'bookmark'] : ['far', 'bookmark']"
+          :disabled="markedAsQuickBookmarkTarget"
+          :theme="markedAsQuickBookmarkTarget ? 'secondary' : 'base-no-default'"
+          @disabled-click="handleQuickBookmarkEnabledDisabledClick"
+          @click="enableQuickBookmarkForThisPlaylist"
+        />
+        <ft-icon-button
+          v-if="!editMode && isUserPlaylist"
+          :title="$t('User Playlists.Edit Playlist Info')"
+          :icon="['fas', 'edit']"
+          theme="secondary"
+          @click="enterEditMode"
+        />
+        <ft-icon-button
+          v-if="videoCount > 0 && showPlaylists && !editMode"
+          :title="$t('User Playlists.Copy Playlist')"
+          :icon="['fas', 'copy']"
+          theme="secondary"
+          @click="toggleCopyVideosPrompt"
+        />
+        <ft-icon-button
+          v-if="exportPlaylistButtonVisible"
+          :title="$t('User Playlists.Export Playlist')"
+          :icon="['fas', 'file-arrow-down']"
+          theme="secondary"
+          @click="handlePlaylistExport"
+        />
+        <ft-icon-button
+          v-if="!editMode && userPlaylistDuplicateItemCount > 0"
+          :title="$t('User Playlists.Remove Duplicate Videos')"
+          :icon="['fas', 'users-slash']"
+          theme="destructive"
+          @click="showRemoveDuplicateVideosPrompt = true"
+        />
+        <ft-icon-button
+          v-if="!editMode && userPlaylistAnyVideoWatched"
+          :title="$t('User Playlists.Remove Watched Videos')"
+          :icon="['fas', 'eye-slash']"
+          theme="destructive"
+          @click="showRemoveVideosOnWatchPrompt = true"
+        />
+        <ft-icon-button
+          v-if="deletePlaylistButtonVisible"
+          :disabled="markedAsQuickBookmarkTarget"
+          :title="!markedAsQuickBookmarkTarget ? $t('User Playlists.Delete Playlist') : playlistDeletionDisabledLabel"
+          :icon="['fas', 'trash']"
+          theme="destructive"
+          @disabled-click="handlePlaylistDeleteDisabledClick"
+          @click="showDeletePlaylistPrompt = true"
+        />
+        <ft-share-button
+          v-if="sharePlaylistButtonVisible"
+          :id="id"
+          class="sharePlaylistIcon"
+          :dropdown-position-y="description ? 'top' : 'bottom'"
+          share-target-type="Playlist"
+        />
+      </div>
+      <div
+        v-if="firstVideoIdExists && !editMode"
+        class="playlistOptions"
+      >
+        <router-link
+          :to="watchFirstVideo"
+        >
+          <ft-button
+            class="playlistPlayButton"
+            :label="$t('Playlist.Play all')"
+            :icon="['fas', 'play']"
           />
-        </div>
-        <div
-          v-if="searchVideoModeAllowed"
-          class="searchInputsRow"
+        </router-link>
+        <router-link
+          :to="watchRandomVideo"
         >
+          <ft-button
+            class="playlistPlayButton"
+            :label="$t('Playlist.Shuffle')"
+            :icon="['fas', 'random']"
+          />
+        </router-link>
+      </div>
+      <div
+        v-if="searchVideoModeAllowed"
+        class="searchInputsRow"
+      >
+        <div class="searchWrapper">
           <ft-input
             ref="searchInput"
             class="inputElement"

src/renderer/components/watch-video-playlist/watch-video-playlist.js

@@ -40,12 +40,16 @@ export default defineComponent({
       type: Boolean,
       required: true,
     },
+    playlistEnableShuffle: {
+      type: Boolean,
+      default: false,
+    },
   },
   emits: ['pause-player'],
   data: function () {
     return {
       isLoading: true,
-      shuffleEnabled: false,
+      shuffleEnabled: this.playlistEnableShuffle,
       loopEnabled: false,
       reversePlaylist: false,
       pauseOnCurrentVideo: false,
@@ -213,6 +217,10 @@ export default defineComponent({
       this.getPlaylistInfoWithDelay()
     }
 
+    if (this.shuffleEnabled) {
+      this.shufflePlaylistItems()
+    }
+
     if ('mediaSession' in navigator) {
       navigator.mediaSession.setActionHandler('previoustrack', this.playPreviousVideo)
       navigator.mediaSession.setActionHandler('nexttrack', this.playNextVideo)

src/renderer/views/Playlist/Playlist.vue

@@ -26,7 +26,7 @@
         :last-updated="lastUpdated"
         :description="playlistDescription"
         :video-count="videoCount"
-        :videos="playlistItems"
+        :videos="sortedPlaylistItems"
         :view-count="viewCount"
         :info-source="infoSource"
         :more-video-data-available="moreVideoDataAvailable"

src/renderer/views/Watch/Watch.js

@@ -111,6 +111,7 @@ export default defineComponent({
       playlistId: '',
       playlistType: '',
       playlistItemId: null,
+      playlistEnableShuffle: false,
       /** @type {number|null} */
       timestamp: null,
       playNextTimeout: null,
@@ -1107,6 +1108,7 @@ export default defineComponent({
 
       this.playlistId = this.$route.query.playlistId
       this.playlistItemId = this.$route.query.playlistItemId
+      this.playlistEnableShuffle = this.$route.query.playlistEnableShuffle === 'true'
 
       if (this.playlistId == null || this.playlistId.length === 0) {
         this.playlistType = ''

src/renderer/views/Watch/Watch.vue

@@ -195,6 +195,7 @@
         :playlist-type="playlistType"
         :video-id="videoId"
         :playlist-item-id="playlistItemId"
+        :playlist-enable-shuffle="playlistEnableShuffle"
         class="watchVideoSideBar watchVideoPlaylist"
         :class="{ theatrePlaylist: useTheatreMode }"
         @pause-player="pausePlayer"

static/locales/en-US.yaml

@@ -892,6 +892,8 @@ Playlist:
   Playlist: Playlist
   View Full Playlist: View Full Playlist
   Last Updated On: Last Updated On
+  Play all: Play all
+  Shuffle: Shuffle
   Sort By:
     Sort By: Sort By
     DateAddedNewest: Latest added first