Fix breakage on remote sessions and address review comments

src/components/nowPlayingBar/nowPlayingBar.css

@@ -154,6 +154,10 @@
     display: none;
 }
 
+.layout-desktop .nowPlayingBarRight .playPauseButton {
+    display: none;
+}
+
 .layout-mobile .nowPlayingBarRight input,
 .layout-mobile .nowPlayingBarRight div {
     display: none;

src/components/nowPlayingBar/nowPlayingBar.js

@@ -196,8 +196,8 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
                     playbackManager.setRepeatMode('RepeatNone');
                     break;
                 default:
+                case 'RepeatNone':
                     playbackManager.setRepeatMode('RepeatAll');
-                    break;
             }
         });
 
@@ -371,12 +371,11 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
                 toggleRepeatButtonIcon.classList.add('repeat_one');
                 toggleRepeatButton.classList.add(cssClass);
                 break;
+            default:
             case 'RepeatNone':
                 toggleRepeatButtonIcon.classList.add('repeat');
                 toggleRepeatButton.classList.remove(cssClass);
                 break;
-            default:
-                throw new TypeError('invalid value for repeatMode');
         }
     }
 
@@ -633,17 +632,17 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
     function onQueueShuffleModeChange() {
         let shuffleMode = playbackManager.getQueueShuffleMode();
         let context = nowPlayingBarElement;
+        const cssClass = 'shuffleQueue-active';
         let toggleShuffleButton = context.querySelector('.btnShuffleQueue');
 
         switch (shuffleMode) {
-            case 'Sorted':
-                toggleShuffleButton.classList.remove('shuffleQueue-active');
-                break;
             case 'Shuffle':
-                toggleShuffleButton.classList.add('shuffleQueue-active');
+                toggleShuffleButton.classList.toggle(cssClass, true);
                 break;
             default:
-                throw new TypeError('invalid value for shuffleMode');
+            case 'Sorted':
+                toggleShuffleButton.classList.toggle(cssClass, false);
+                break;
         }
     }
 

src/components/remotecontrol/remotecontrol.js

@@ -252,14 +252,16 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
     return function () {
         function toggleRepeat() {
             switch (playbackManager.getRepeatMode()) {
-                case 'RepeatNone':
-                    playbackManager.setRepeatMode('RepeatAll');
-                    break;
                 case 'RepeatAll':
                     playbackManager.setRepeatMode('RepeatOne');
                     break;
                 case 'RepeatOne':
                     playbackManager.setRepeatMode('RepeatNone');
+                    break;
+                default:
+                case 'RepeatNone':
+                    playbackManager.setRepeatMode('RepeatAll');
+                    break;
             }
         }
 
@@ -360,11 +362,10 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
                 case 'RepeatOne':
                     innHtml = '<span class="material-icons repeat_one"></span>';
                     break;
+                default:
                 case 'RepeatNone':
                     repeatOn = false;
                     break;
-                default:
-                    throw new TypeError('invalid value for repeatMode');
             }
 
             for (const toggleRepeatButton of toggleRepeatButtons) {
@@ -523,14 +524,13 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
 
             for (let shuffleButton of shuffleButtons) {
                 switch (shuffleMode) {
-                    case 'Sorted':
-                        shuffleButton.classList.toggle(cssClass, false);
-                        break;
                     case 'Shuffle':
                         shuffleButton.classList.toggle(cssClass, true);
                         break;
                     default:
-                        throw new TypeError('invalid shuffle mode');
+                    case 'Sorted':
+                        shuffleButton.classList.toggle(cssClass, false);
+                        break;
                 }
             }
             onPlaylistUpdate();
@@ -867,6 +867,7 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
                 optionsSection.classList.add('align-items-right', 'justify-content-flex-end');
                 context.querySelector('.playlist').classList.remove('hide');
                 context.querySelector('.btnSavePlaylist').classList.remove('hide');
+                context.classList.add('padded-bottom');
             } else {
                 optionsSection.querySelector('.btnTogglePlaylist').insertAdjacentHTML('afterend', volumecontrolHtml);
                 optionsSection.classList.add('playlistSectionButtonTransparent');

src/nowplaying.html

@@ -176,7 +176,7 @@
             </div>
         </div>
         <div class="playlistSection">
-            <div class="playlistSectionButton flex align-items-center justify-content-center">
+            <div class="playlistSectionButton flex align-items-center justify-content-center focuscontainer-x">
                 <button id="togglePlaylist" is="paper-icon-button-light" class="btnTogglePlaylist hide" title="${ButtonTogglePlaylist}">
                     <span class="material-icons queue_music"></span>
                 </button>

src/plugins/sessionPlayer/plugin.js

@@ -257,13 +257,13 @@ define(['playbackManager', 'events', 'serverNotifications', 'connectionManager']
                     return {
                         name: s.DeviceName,
                         deviceName: s.DeviceName,
-                        deviceType: s.DeviceType,
+                        deviceType: 'Remote Control',
                         id: s.Id,
                         playerName: name,
                         appName: s.Client,
                         playableMediaTypes: s.PlayableMediaTypes,
                         isLocalPlayer: false,
-                        supportedCommands: s.SupportedCommands,
+                        supportedCommands: s.Capabilities.SupportedCommands,
                         user: s.UserId ? {
 
                             Id: s.UserId,

src/scripts/site.js

@@ -196,7 +196,7 @@ var Dashboard = {
     capabilities: function (appHost) {
         var capabilities = {
             PlayableMediaTypes: ['Audio', 'Video'],
-            SupportedCommands: ['MoveUp', 'MoveDown', 'MoveLeft', 'MoveRight', 'PageUp', 'PageDown', 'PreviousLetter', 'NextLetter', 'ToggleOsd', 'ToggleContextMenu', 'Select', 'Back', 'SendKey', 'SendString', 'GoHome', 'GoToSettings', 'VolumeUp', 'VolumeDown', 'Mute', 'Unmute', 'ToggleMute', 'SetVolume', 'SetAudioStreamIndex', 'SetSubtitleStreamIndex', 'DisplayContent', 'GoToSearch', 'DisplayMessage', 'SetRepeatMode', 'ChannelUp', 'ChannelDown', 'PlayMediaSource', 'PlayTrailers'],
+            SupportedCommands: ['MoveUp', 'MoveDown', 'MoveLeft', 'MoveRight', 'PageUp', 'PageDown', 'PreviousLetter', 'NextLetter', 'ToggleOsd', 'ToggleContextMenu', 'Select', 'Back', 'SendKey', 'SendString', 'GoHome', 'GoToSettings', 'VolumeUp', 'VolumeDown', 'Mute', 'Unmute', 'ToggleMute', 'SetVolume', 'SetAudioStreamIndex', 'SetSubtitleStreamIndex', 'DisplayContent', 'GoToSearch', 'DisplayMessage', 'SetRepeatMode', 'SetShuffleQueue', 'ChannelUp', 'ChannelDown', 'PlayMediaSource', 'PlayTrailers'],
             SupportsPersistentIdentifier: 'cordova' === self.appMode || 'android' === self.appMode,
             SupportsMediaControl: true
         };