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 {
@@ -111,7 +112,7 @@
     margin-block-start: 8px;
   }
 
-  .playlistOptionsAndSearch {
+  .playlistOptionsWrapper {
     display: flex;
     flex-direction: column;
     justify-content: space-between;

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

@@ -129,7 +129,7 @@
         </h3>
       </div>
 
-      <div class="playlistOptionsAndSearch">
+      <div class="playlistOptionsWrapper">
         <div class="playlistOptions">
           <ft-icon-button
             v-if="editMode"
@@ -207,22 +207,6 @@
             share-target-type="Playlist"
           />
         </div>
-        <div
-          v-if="searchVideoModeAllowed"
-          class="searchInputsRow"
-        >
-          <ft-input
-            ref="searchInput"
-            class="inputElement"
-            :placeholder="$t('User Playlists.SinglePlaylistView.Search for Videos')"
-            :show-clear-text-button="true"
-            :show-action-button="false"
-            :value="query"
-            :maxlength="255"
-            @input="(input) => updateQueryDebounce(input)"
-            @clear="updateQueryDebounce('')"
-          />
-        </div>
       </div>
       <ft-prompt
         v-if="showDeletePlaylistPrompt"
@@ -249,6 +233,48 @@
         @click="handleRemoveDuplicateVideosPromptAnswer"
       />
     </div>
+
+    <div class="playlistOptionsWrapper">
+      <div
+        v-if="firstVideoIdExists"
+        class="playlistOptions"
+      >
+        <router-link
+          :to="watchFirstVideo"
+        >
+          <ft-button
+            class="playlistPlayButton"
+            :label="$t('Playlist.Play all')"
+            :icon="['fas', 'play']"
+          />
+        </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"
+      >
+        <ft-input
+          ref="searchInput"
+          class="inputElement"
+          :placeholder="$t('User Playlists.SinglePlaylistView.Search for Videos')"
+          :show-clear-text-button="true"
+          :show-action-button="false"
+          :value="query"
+          :maxlength="255"
+          @input="(input) => updateQueryDebounce(input)"
+          @clear="updateQueryDebounce('')"
+        />
+      </div>
+    </div>
   </div>
 </template>
 

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)
@@ -529,7 +537,6 @@ export default defineComponent({
         items.push(remainingItems[randomInt])
         remainingItems.splice(randomInt, 1)
       }
-
       this.randomizedPlaylistItems = items
     },
 

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