Add playlist shuffling toggle to remotecontrol.js

src/components/playback/playbackmanager.js

@@ -2097,6 +2097,7 @@ define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'pla
                 state.PlayState.IsMuted = player.isMuted();
                 state.PlayState.IsPaused = player.paused();
                 state.PlayState.RepeatMode = self.getRepeatMode(player);
+                state.PlayState.ShuffleMode = self.getPlaylistShuffleMode(player);
                 state.PlayState.MaxStreamingBitrate = self.getMaxStreamingBitrate(player);
 
                 state.PlayState.PositionTicks = getCurrentTicks(player);
@@ -3304,6 +3305,11 @@ define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'pla
             sendProgressUpdate(player, 'repeatmodechange');
         }
 
+        function onShufflePlaylistModeChange() {
+            var player = this;
+            sendProgressUpdate(player, 'shuffleplaylistmodechange');
+        }
+
         function onPlaylistItemMove(e) {
             var player = this;
             sendProgressUpdate(player, 'playlistitemmove', true);
@@ -3358,6 +3364,7 @@ define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'pla
                 events.on(player, 'unpause', onPlaybackUnpause);
                 events.on(player, 'volumechange', onPlaybackVolumeChange);
                 events.on(player, 'repeatmodechange', onRepeatModeChange);
+                events.on(player, 'shuffleplaylistmodechange', onShufflePlaylistModeChange);
                 events.on(player, 'playlistitemmove', onPlaylistItemMove);
                 events.on(player, 'playlistitemremove', onPlaylistItemRemove);
                 events.on(player, 'playlistitemadd', onPlaylistItemAdd);
@@ -3370,6 +3377,7 @@ define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'pla
                 events.on(player, 'unpause', onPlaybackUnpause);
                 events.on(player, 'volumechange', onPlaybackVolumeChange);
                 events.on(player, 'repeatmodechange', onRepeatModeChange);
+                events.on(player, 'shuffleplaylistmodechange', onShufflePlaylistModeChange);
                 events.on(player, 'playlistitemmove', onPlaylistItemMove);
                 events.on(player, 'playlistitemremove', onPlaylistItemRemove);
                 events.on(player, 'playlistitemadd', onPlaylistItemAdd);
@@ -3811,7 +3819,7 @@ define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'pla
         });
     };
 
-    PlaybackManager.prototype.shuffle = function (shuffleItem, player, queryOptions) {
+    PlaybackManager.prototype.shuffle = function (shuffleItem, player) {
 
         player = player || this._currentPlayer;
         if (player && player.shuffle) {
@@ -3878,6 +3886,7 @@ define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'pla
                 'GoToSearch',
                 'DisplayMessage',
                 'SetRepeatMode',
+                'SetPlaylistShuffleMode',
                 'PlayMediaSource',
                 'PlayTrailers'
             ];
@@ -3932,6 +3941,27 @@ define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'pla
         return this._playQueueManager.getRepeatMode();
     };
 
+    PlaybackManager.prototype.setPlaylistShuffleMode = function (value, player) {
+
+        player = player || this._currentPlayer;
+        if (player && !enableLocalPlaylistManagement(player)) {
+            return player.setShuffleMode(value);
+        }
+
+        this._playQueueManager.setShuffleMode(value);
+        events.trigger(player, 'shuffleplaylistmodechange');
+    };
+
+    PlaybackManager.prototype.getPlaylistShuffleMode = function (player) {
+
+        player = player || this._currentPlayer;
+        if (player && !enableLocalPlaylistManagement(player)) {
+            return player.getPlaylistShuffleMode();
+        }
+
+        return this._playQueueManager.getShuffleMode();
+    };
+
     PlaybackManager.prototype.trySetActiveDeviceName = function (name) {
 
         name = normalizeName(name);
@@ -4000,6 +4030,9 @@ define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'pla
             case 'SetRepeatMode':
                 this.setRepeatMode(cmd.Arguments.RepeatMode, player);
                 break;
+            case 'SetPlaylistShuffleMode':
+                this.setPlaylistShuffleMode(cmd.Arguments.ShuffleMode, player);
+                break;
             case 'VolumeUp':
                 this.volumeUp(player);
                 break;

src/components/playback/playqueuemanager.js

@@ -24,8 +24,10 @@ define([], function () {
 
     function PlayQueueManager() {
 
+        this._sortedPlaylist = [];
         this._playlist = [];
         this._repeatMode = 'RepeatNone';
+        this._shuffleMode = 'Sorted';
     }
 
     PlayQueueManager.prototype.getPlaylist = function () {
@@ -56,6 +58,30 @@ define([], function () {
         }
     };
 
+    PlayQueueManager.prototype.shufflePlaylist = function () {
+        this._sortedPlaylist = [];
+        for (let item of this._playlist) {
+            this._sortedPlaylist.push(item);
+        }
+
+        for (let i = this._playlist.length - 1; i > 0; i--) {
+            const j = Math.floor(Math.random() * i);
+            const temp = this._playlist[i];
+            this._playlist[i] = this._playlist[j];
+            this._playlist[j] = temp;
+        }
+        this._shuffleMode = 'Shuffle';
+    };
+
+    PlayQueueManager.prototype.sortShuffledPlaylist = function () {
+        this._playlist = [];
+        for (let item of this._sortedPlaylist) {
+            this._playlist.push(item);
+        }
+        this._sortedPlaylist = [];
+        this._shuffleMode = 'Sorted';
+    };
+
     function arrayInsertAt(destArray, pos, arrayToInsert) {
         var args = [];
         args.push(pos); // where to insert
@@ -176,21 +202,39 @@ define([], function () {
 
     PlayQueueManager.prototype.reset = function () {
 
+        this._sortedPlaylist = [];
         this._playlist = [];
         this._currentPlaylistItemId = null;
         this._repeatMode = 'RepeatNone';
+        this._shuffleMode = 'Sorted';
     };
 
     PlayQueueManager.prototype.setRepeatMode = function (value) {
-
+        if (value === 'RepeatOne' || value === 'RepeatAll' || value === 'RepeatNone') {
             this._repeatMode = value;
+        } else {
+            throw new TypeError('invalid value provided for setRepeatMode');
+        }
     };
 
     PlayQueueManager.prototype.getRepeatMode = function () {
-
         return this._repeatMode;
     };
 
+    PlayQueueManager.prototype.setShuffleMode = function (value) {
+        if (value === 'Sorted') {
+            this.sortShuffledPlaylist();
+        } else if (value === 'Shuffle') {
+            this.shufflePlaylist();
+        } else {
+            throw new TypeError('invalid value provided for setShuffleMode');
+        }
+    };
+
+    PlayQueueManager.prototype.getShuffleMode = function () {
+        return this._shuffleMode;
+    };
+
     PlayQueueManager.prototype.getNextItemInfo = function () {
 
         var newIndex;

src/components/remotecontrol/remotecontrol.css

@@ -298,7 +298,7 @@
         font-size: smaller;
     }
 
-    .nowPlayingInfoButtons .btnFastForward {
+    .nowPlayingInfoButtons .btnShuffleMobile {
         position: absolute;
         right: 0;
         margin-right: 0;

src/components/remotecontrol/remotecontrol.js

@@ -297,6 +297,7 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
                 buttonVisible(context.querySelector('.btnRewind'), false);
                 buttonVisible(context.querySelector('.btnFastForward'), false);
                 buttonVisible(context.querySelector('.nowPlayingInfoButtons').querySelector('.repeatToggleButton'), true);
+                buttonVisible(context.querySelector('.nowPlayingInfoButtons').querySelector('.btnShuffleMobile'), true);
             } else {
                 buttonVisible(context.querySelector('.btnRewind'), null != item);
                 buttonVisible(context.querySelector('.btnFastForward'), null != item);
@@ -495,6 +496,18 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
             updateRepeatModeDisplay(playbackManager.getRepeatMode(player));
         }
 
+        function onShufflePlaylistModeChange() {
+            let shuffleMode = playbackManager.getPlaylistShuffleMode(this);
+            let context = dlg;
+            let shuffleButton = context.querySelector('.btnShuffle');
+            if ('Sorted' === shuffleMode) {
+                shuffleButton.classList.remove('shuffleButton-active');
+            } else if ('Shuffle' === shuffleMode) {
+                shuffleButton.classList.add('shuffleButton-active');
+            }
+            onPlaylistUpdate();
+        }
+
         function onPlaylistUpdate(e) {
             loadPlaylist(dlg, this);
         }
@@ -556,7 +569,8 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
                 events.off(player, 'playbackstart', onPlaybackStart);
                 events.off(player, 'statechange', onStateChanged);
                 events.off(player, 'repeatmodechange', onRepeatModeChange);
-                events.off(player, 'playlistitemremove', onPlaylistUpdate);
+                events.off(player, 'shuffleplaylistmodechange', onShufflePlaylistModeChange);
+                events.off(player, 'playlistitemremove', onPlaylistItemRemoved);
                 events.off(player, 'playlistitemmove', onPlaylistUpdate);
                 events.off(player, 'playbackstop', onPlaybackStopped);
                 events.off(player, 'volumechange', onVolumeChanged);
@@ -576,6 +590,7 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
                 events.on(player, 'playbackstart', onPlaybackStart);
                 events.on(player, 'statechange', onStateChanged);
                 events.on(player, 'repeatmodechange', onRepeatModeChange);
+                events.on(player, 'shuffleplaylistmodechange', onShufflePlaylistModeChange);
                 events.on(player, 'playlistitemremove', onPlaylistItemRemoved);
                 events.on(player, 'playlistitemmove', onPlaylistUpdate);
                 events.on(player, 'playbackstop', onPlaybackStopped);
@@ -676,6 +691,16 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
                     playbackManager.fastForward(currentPlayer);
                 }
             });
+            context.querySelector('.btnShuffle').addEventListener('click', function () {
+                if (currentPlayer) {
+                    if (playbackManager.getPlaylistShuffleMode(currentPlayer) === 'Sorted') {
+                        playbackManager.setPlaylistShuffleMode('Shuffle', currentPlayer);
+                    } else {
+                        playbackManager.setPlaylistShuffleMode('Sorted', currentPlayer);
+                    }
+                }
+            });
+
             context.querySelector('.btnPreviousTrack').addEventListener('click', function () {
                 console.log(currentPlayer);
                 if (currentPlayer) {

src/nowplaying.html

@@ -59,6 +59,9 @@
                             <span class="material-icons forward_30"></span>
                         </button>
 
+                        <button is="paper-icon-button-light" class="btnShuffleMobile btnShuffle autoSize hide" title="${ButtonShuffle}">
+                            <span class="material-icons shuffle"></span>
+                        </button>
                     </div>
 
                     <div class="nowPlayingSecondaryButtons">

src/plugins/sessionPlayer/plugin.js

@@ -506,6 +506,13 @@ define(['playbackManager', 'events', 'serverNotifications', 'connectionManager']
         });
     };
 
+    SessionPlayer.prototype.setPlaylistShuffleMode = function (mode) {
+
+        sendCommandByName(this, 'SetPlaylistShuffleMode', {
+            ShuffleMode: mode
+        });
+    };
+
     SessionPlayer.prototype.displayContent = function (options) {
 
         sendCommandByName(this, 'DisplayContent', options);

src/themes/appletv/theme.css

@@ -450,6 +450,10 @@ html {
     color: #4285f4;
 }
 
+.shuffleButton-active {
+    color: #4285f4 !important;
+}
+
 .card:focus .cardBox.visualCardBox,
 .card:focus .cardBox:not(.visualCardBox) .cardScalable {
     border-color: #00a4dc !important;

src/themes/blueradiance/theme.css

@@ -450,6 +450,10 @@ html {
     color: #4285f4;
 }
 
+.shuffleButton-active {
+    color: #4285f4 !important;
+}
+
 .card:focus .cardBox.visualCardBox,
 .card:focus .cardBox:not(.visualCardBox) .cardScalable {
     border-color: #00a4dc !important;

src/themes/dark/theme.css

@@ -421,6 +421,10 @@ html {
     color: #4285f4;
 }
 
+.shuffleButton-active {
+    color: #4285f4 !important;
+}
+
 .card:focus .cardBox.visualCardBox,
 .card:focus .cardBox:not(.visualCardBox) .cardScalable {
     border-color: #00a4dc !important;

src/themes/light/theme.css

@@ -432,6 +432,10 @@ html {
     color: #4285f4;
 }
 
+.shuffleButton-active {
+    color: #4285f4 !important;
+}
+
 .card:focus .cardBox.visualCardBox,
 .card:focus .cardBox:not(.visualCardBox) .cardScalable {
     border-color: #00a4dc !important;

src/themes/purplehaze/theme.css

@@ -547,6 +547,10 @@ a[data-role=button] {
     color: #4285f4;
 }
 
+.shuffleButton-active {
+    color: #4285f4 !important;
+}
+
 .personCard .cardScalable {
     border-radius: 50%;
     border: 1px solid rgb(255, 255, 255);

src/themes/wmc/theme.css

@@ -430,6 +430,10 @@ html {
     color: #4285f4;
 }
 
+.shuffleButton-active {
+    color: #4285f4 !important;
+}
+
 .card:focus .cardBox.visualCardBox,
 .card:focus .cardBox:not(.visualCardBox) .cardScalable {
     border-color: #fff !important;