Merge pull request #1056 from samuel9554/master

Revamp player (nowplaying.html, remotecontrol.js)

src/components/itemcontextmenu.js

@@ -90,7 +90,7 @@ define(["apphost", "globalize", "connectionManager", "itemHelper", "appRouter",
                 });
             }
 
-            if (itemHelper.supportsAddingToPlaylist(item)) {
+            if (itemHelper.supportsAddingToPlaylist(item) && options.playlist !== false) {
                 commands.push({
                     name: globalize.translate("AddToPlaylist"),
                     id: "addtoplaylist",

src/components/nowplayingbar/nowplayingbar.js

@@ -1,4 +1,4 @@
-define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader', 'layoutManager', 'playbackManager', 'nowPlayingHelper', 'apphost', 'dom', 'connectionManager', 'paper-icon-button-light', 'emby-ratingbutton'], function (require, datetime, itemHelper, events, browser, imageLoader, layoutManager, playbackManager, nowPlayingHelper, appHost, dom, connectionManager) {
+define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader', 'layoutManager', 'playbackManager', 'nowPlayingHelper', 'apphost', 'dom', 'connectionManager', 'itemContextMenu', 'paper-icon-button-light', 'emby-ratingbutton'], function (require, datetime, itemHelper, events, browser, imageLoader, layoutManager, playbackManager, nowPlayingHelper, appHost, dom, connectionManager, itemContextMenu) {
     'use strict';
 
     var currentPlayer;
@@ -66,7 +66,7 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
         html += '</div>';
 
         html += '<button is="paper-icon-button-light" class="playPauseButton mediaButton"><i class="material-icons">pause</i></button>';
-        html += '<button is="paper-icon-button-light" class="remoteControlButton mediaButton"><i class="material-icons playlist_play"></i></button>';
+        html += '<button is="paper-icon-button-light" class="btnToggleContextMenu"><i class="material-icons more_vert"></i></button>';
 
         html += '</div>';
         html += '</div>';
@@ -155,8 +155,6 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
             }
         });
 
-        elem.querySelector('.remoteControlButton').addEventListener('click', showRemoteControl);
-
         toggleRepeatButton = elem.querySelector('.toggleRepeatButton');
         toggleRepeatButton.addEventListener('click', function () {
 
@@ -226,7 +224,7 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
 
         elem.addEventListener('click', function (e) {
 
-            if (!dom.parentWithTag(e.target, ['BUTTON', 'INPUT', 'A'])) {
+            if (!dom.parentWithTag(e.target, ['BUTTON', 'INPUT'])) {
                 showRemoteControl();
             }
         });
@@ -435,17 +433,13 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
         }
     }
 
-    function getTextActionButton(item, text, serverId) {
+    function getTextActionButton(item, text) {
 
         if (!text) {
             text = itemHelper.getDisplayName(item);
         }
 
-        var html = '<button data-id="' + item.Id + '" data-serverid="' + (item.ServerId || serverId) + '" data-type="' + item.Type + '" data-mediatype="' + item.MediaType + '" data-channelid="' + item.ChannelId + '" data-isfolder="' + item.IsFolder + '" type="button" class="itemAction textActionButton" data-action="link">';
+        return `<a>${text}</a>`;
-        html += text;
-        html += '</button>';
-
-        return html;
     }
 
     function seriesImageUrl(item, options) {
@@ -523,16 +517,16 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
         if (textLines.length > 1) {
             textLines[1].secondary = true;
         }
-        var serverId = nowPlayingItem ? nowPlayingItem.ServerId : null;
         nowPlayingTextElement.innerHTML = textLines.map(function (nowPlayingName) {
 
             var cssClass = nowPlayingName.secondary ? ' class="nowPlayingBarSecondaryText"' : '';
 
             if (nowPlayingName.item) {
-                return '<div' + cssClass + '>' + getTextActionButton(nowPlayingName.item, nowPlayingName.text, serverId) + '</div>';
+                var nowPlayingText = getTextActionButton(nowPlayingName.item, nowPlayingName.text);
+                return `<div ${cssClass}>${nowPlayingText}</div>`;
             }
 
-            return '<div' + cssClass + '>' + nowPlayingName.text + '</div>';
+            return `<div ${cssClass}>${nowPlayingText}</div>`;
 
         }).join('');
 
@@ -561,15 +555,25 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
             if (isRefreshing) {
 
                 var apiClient = connectionManager.getApiClient(nowPlayingItem.ServerId);
-
                 apiClient.getItem(apiClient.getCurrentUserId(), nowPlayingItem.Id).then(function (item) {
-
                     var userData = item.UserData || {};
                     var likes = userData.Likes == null ? '' : userData.Likes;
-
+                    var contextButton = document.querySelector('.btnToggleContextMenu');
+                    var options = {
+                        play: false,
+                        queue: false,
+                        positionTo: contextButton
+                    };
                     nowPlayingUserData.innerHTML = '<button is="emby-ratingbutton" type="button" class="listItemButton mediaButton paper-icon-button-light" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-itemtype="' + item.Type + '" data-likes="' + likes + '" data-isfavorite="' + (userData.IsFavorite) + '"><i class="material-icons">favorite</i></button>';
+                    apiClient.getCurrentUser().then(function(user) {
+                        contextButton.addEventListener('click', function () {
+                            itemContextMenu.show(Object.assign({
+                                item: item,
+                                user: user
+                            }, options ));
+                        });
+                    });
                 });
-
             }
         } else {
             nowPlayingUserData.innerHTML = '';

src/components/remotecontrol/remotecontrol.css

@@ -1,3 +1,7 @@
+.nowPlayingPage {
+    padding: 5em 0 0 0 !important;
+}
+
 .nowPlayingInfoContainer {
     display: -webkit-box;
     display: -webkit-flex;
@@ -36,8 +40,30 @@
     margin: 0 0 0.5em 0.5em;
 }
 
+.nowPlayingAlbum a,
+.nowPlayingArtist a {
+    font-weight: normal;
+    text-align: left !important;
+    color: inherit !important;
+}
+
+.nowPlayingButtonsContainer {
+    display: flex;
+}
+
+.nowPlayingInfoContainerMedia {
+    text-align: left;
+    margin-bottom: 1em;
+}
+
+.nowPlayingPositionSlider {
+    width: stretch;
+}
+
 .nowPlayingPositionSliderContainer {
-    margin: 0.7em 0 0.7em 1em;
+    margin: 0.2em 1em 0.2em 1em;
+    width: 100%;
+    z-index: 0;
 }
 
 .nowPlayingInfoButtons {
@@ -59,17 +85,32 @@
 }
 
 .nowPlayingPageImageContainer {
-    width: 20%;
+    width: 16%;
-    margin-right: 0.25em;
+    margin-right: 1em;
     position: relative;
     -webkit-flex-shrink: 0;
     flex-shrink: 0;
 }
 
-@media all and (min-width: 50em) {
+.nowPlayingPageImageContainerNoAlbum {
-    .nowPlayingPageImageContainer {
+    width: 100%;
-        width: 16%;
+    position: relative;
-    }
+}
+
+.nowPlayingPageImageContainerNoAlbum button {
+    cursor: default;
+}
+
+.nowPlayingPageImageContainerNoAlbum::after {
+    content: "";
+    display: block;
+    padding-bottom: 100%;
+}
+
+.btnPlayPause {
+    font-size: xx-large;
+    padding: 0;
+    margin: 0;
 }
 
 .nowPlayingInfoControls {
@@ -87,14 +128,15 @@
 }
 
 .nowPlayingPageImage {
+    display: block;
     bottom: 0;
     left: 0;
     right: 0;
+    margin: 0 auto;
     width: 100%;
     -webkit-box-shadow: 0 0 1.9vh #000;
     box-shadow: 0 0 1.9vh #000;
     border: 0.1em solid #222;
-    user-drag: none;
     user-select: none;
     -moz-user-select: none;
     -webkit-user-drag: none;
@@ -102,60 +144,16 @@
     -ms-user-select: none;
 }
 
-@media all and (orientation: portrait) and (max-width: 50em) {
+.contextMenuList {
-    .nowPlayingInfoContainer {
+    padding: 1.5em 0;
-        -webkit-box-orient: vertical !important;
-        -webkit-box-direction: normal !important;
-        -webkit-flex-direction: column !important;
-        flex-direction: column !important;
-        -webkit-box-align: center;
-        -webkit-align-items: center;
-        align-items: center;
-    }
-
-    .nowPlayingPageTitle {
-        text-align: center;
-        margin: 0.5em 0 0.75em;
-    }
-
-    .nowPlayingPositionSliderContainer {
-        margin: 0.7em 1em;
-    }
-
-    .nowPlayingInfoButtons {
-        -webkit-box-pack: center;
-        -webkit-justify-content: center;
-        justify-content: center;
-    }
-
-    .nowPlayingPageImageContainer {
-        width: auto;
-        margin-right: 0;
-    }
-
-    .nowPlayingInfoControls {
-        margin-top: 1em;
-        max-width: 100%;
-    }
-
-    .nowPlayingPageImage {
-        width: auto;
-        height: 36vh;
-    }
 }
 
-@media all and (orientation: portrait) and (max-width: 40em) {
+.contextMenuList a {
-    .nowPlayingPageImage {
+    color: inherit !important;
-        height: 30vh;
-    }
 }
 
-.nowPlayingTime {
+.contextMenuList i.listItemIcon {
-    display: flex;
+    font-size: x-large;
-    -webkit-box-align: center;
-    -webkit-align-items: center;
-    align-items: center;
-    margin: 0 1em;
 }
 
 .nowPlayingSecondaryButtons {
@@ -167,12 +165,17 @@
     align-items: center;
     -webkit-flex-wrap: wrap;
     flex-wrap: wrap;
-    -webkit-box-pack: center;
+    -webkit-box-pack: end;
-    -webkit-justify-content: center;
+    -webkit-justify-content: flex-end;
-    justify-content: center;
+    justify-content: flex-end;
+    z-index: 0;
 }
 
-@media all and (min-width: 50em) {
+@media all and (min-width: 63em) {
+    .nowPlayingPage {
+        padding: 8em 0 0 0 !important;
+    }
+
     .nowPlayingSecondaryButtons {
         -webkit-box-flex: 1;
         -webkit-flex-grow: 1;
@@ -181,6 +184,16 @@
         -webkit-justify-content: flex-end;
         justify-content: flex-end;
     }
+
+    .nowPlayingPageUserDataButtonsTitle {
+        display: none !important;
+    }
+
+    .playlistSectionButton,
+    .nowPlayingPlaylist,
+    .nowPlayingContextMenu {
+        background: unset !important;
+    }
 }
 
 @media all and (min-width: 80em) {
@@ -189,6 +202,414 @@
     }
 }
 
+@media all and (orientation: portrait) and (max-width: 47em) {
+    .remoteControlContent {
+        padding-left: 7.3% !important;
+        padding-right: 7.3% !important;
+        display: flex;
+        height: 100%;
+        flex-direction: column;
+    }
+
+    .nowPlayingInfoContainer {
+        -webkit-box-orient: vertical !important;
+        -webkit-box-direction: normal !important;
+        -webkit-flex-direction: column !important;
+        flex-direction: column !important;
+        -webkit-box-align: center;
+        -webkit-align-items: center;
+        align-items: center;
+        width: 100%;
+        height: calc(100% - 4.2em);
+    }
+
+    .nowPlayingPageTitle {
+        /* text-align: center; */
+        margin: 0;
+    }
+
+    .nowPlayingAlbum,
+    .nowPlayingArtist {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    .nowPlayingInfoContainerMedia {
+        text-align: left !important;
+        width: 80%;
+    }
+
+    .nowPlayingPositionSliderContainer {
+        margin: 0.2em 1em 0.2em 1em;
+    }
+
+    .nowPlayingInfoButtons {
+        /* margin: 1.5em 0 0 0; */
+        -webkit-box-pack: center;
+        -webkit-justify-content: center;
+        justify-content: center;
+        font-size: x-large;
+        height: 100%;
+    }
+
+    .nowPlayingPageImageContainer {
+        width: 100%;
+        margin: auto auto 0.5em;
+    }
+
+    .nowPlayingPageImageContainerNoAlbum .cardImageContainer .cardImageIcon {
+        font-size: 15em;
+        color: inherit;
+    }
+
+    .nowPlayingInfoControls {
+        margin: 0.5em 0 1em 0;
+        width: 100%;
+        -webkit-box-pack: start !important;
+        -webkit-justify-content: start !important;
+        justify-content: start !important;
+    }
+
+    .nowPlayingSecondaryButtons {
+        -webkit-box-pack: center;
+        -webkit-justify-content: center;
+        justify-content: center;
+    }
+
+    .nowPlayingInfoControls .nowPlayingPageUserDataButtonsTitle {
+        width: 20%;
+        font-size: large;
+    }
+
+    .nowPlayingInfoControls .nowPlayingPageUserDataButtonsTitle button {
+        padding-top: 0;
+        padding-right: 0;
+        margin-right: 0;
+        float: right;
+        border-radius: 0;
+    }
+
+    .nowPlayingInfoButtons .btnRewind {
+        position: absolute;
+        left: 0;
+        margin-left: 0;
+        padding-left: 7.3%;
+        font-size: smaller;
+    }
+
+    .nowPlayingInfoButtons .btnFastForward {
+        position: absolute;
+        right: 0;
+        margin-right: 0;
+        padding-right: 7.3%;
+        font-size: smaller;
+    }
+
+    .paper-icon-button-light:hover {
+        color: #fff !important;
+        background-color: transparent !important;
+    }
+
+    .btnPlayPause {
+        padding: 0;
+        margin: 0;
+        font-size: 1.7em;
+    }
+
+    .btnPlayPause:hover {
+        background-color: transparent !important;
+    }
+
+    .nowPlayingPageImage {
+        /* width: inherit; */
+        overflow-y: hidden;
+        overflow: hidden;
+        margin: 0 auto;
+    }
+
+    .nowPlayingPageImage.nowPlayingPageImageAudio {
+        width: 100%;
+    }
+
+    .nowPlayingPageImageContainer.nowPlayingPageImagePoster {
+        height: 50%;
+        overflow: hidden;
+    }
+
+    .nowPlayingPageImageContainer.nowPlayingPageImagePoster img {
+        height: 100%;
+        width: auto;
+    }
+
+    #nowPlayingPage .playlistSection .playlist,
+    #nowPlayingPage .playlistSection .contextMenu {
+        position: absolute;
+        top: 12.2em;
+        bottom: 4.2em;
+        overflow: scroll;
+        padding: 0 1em;
+        display: inline-block;
+        left: 0;
+        right: 0;
+        z-index: 1000;
+    }
+
+    .playlistSectionButton {
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        height: 4.2em;
+        right: 0;
+        padding-left: 7.3%;
+        padding-right: 7.3%;
+    }
+
+    .playlistSectionButton .btnTogglePlaylist {
+        font-size: larger;
+        margin: 0;
+        padding-left: 0;
+    }
+
+    .playlistSectionButton .btnSavePlaylist {
+        margin: 0;
+        padding-right: 0;
+        -webkit-box-flex: 1;
+        -webkit-flex-grow: 1;
+        flex-grow: 1;
+        -webkit-box-pack: end;
+        -webkit-justify-content: flex-end;
+        justify-content: flex-end;
+        border-radius: 0;
+    }
+
+    .playlistSectionButton .btnToggleContextMenu {
+        font-size: larger;
+        margin: 0;
+        padding-right: 0;
+        -webkit-box-flex: 1;
+        -webkit-flex-grow: 1;
+        flex-grow: 1;
+        -webkit-box-pack: end;
+        -webkit-justify-content: flex-end;
+        justify-content: flex-end;
+        border-radius: 0;
+    }
+
+    .playlistSectionButton .volumecontrol {
+        width: 100%;
+    }
+
+    .remoteControlSection {
+        margin: 0;
+        padding: 0 0 4.2em 0;
+    }
+
+    .nowPlayingButtonsContainer {
+        display: flex;
+        height: 100%;
+        flex-direction: column;
+    }
+}
+
+@media all and (orientation: landscape) and (max-width: 63em) {
+    .remoteControlContent {
+        padding-left: 4.3% !important;
+        padding-right: 4.3% !important;
+        display: flex;
+        height: 100%;
+        flex-direction: column;
+    }
+
+    .nowPlayingInfoContainer {
+        -webkit-box-orient: horizontal !important;
+        -webkit-box-direction: normal !important;
+        -webkit-flex-direction: row !important;
+        flex-direction: row !important;
+        -webkit-box-align: center;
+        -webkit-align-items: center;
+        align-items: center;
+        width: 100%;
+        height: calc(100% - 4.2em);
+    }
+
+    .nowPlayingPageTitle {
+        /* text-align: center; */
+        margin: 0;
+    }
+
+    .nowPlayingInfoContainerMedia {
+        text-align: left !important;
+        width: 80%;
+    }
+
+    .nowPlayingPositionSliderContainer {
+        margin: 0.2em 1em 0.2em 1em;
+    }
+
+    .nowPlayingInfoButtons {
+        /* margin: 1.5em 0 0 0; */
+        -webkit-box-pack: center;
+        -webkit-justify-content: center;
+        justify-content: center;
+        font-size: x-large;
+        height: 100%;
+    }
+
+    .nowPlayingPageImageContainer {
+        width: 30%;
+        margin: auto 1em auto auto;
+    }
+
+    .nowPlayingPageImageContainerNoAlbum .cardImageContainer .cardImageIcon {
+        font-size: 12em;
+        color: inherit;
+    }
+
+    .nowPlayingInfoControls {
+        margin: 0.5em 0 1em 0;
+        width: 100%;
+        -webkit-box-pack: start !important;
+        -webkit-justify-content: start !important;
+        justify-content: start !important;
+    }
+
+    .nowPlayingSecondaryButtons {
+        -webkit-box-flex: 1;
+        -webkit-flex-grow: 1;
+        flex-grow: 1;
+        -webkit-box-pack: center;
+        -webkit-justify-content: center;
+        justify-content: center;
+    }
+
+    .nowPlayingInfoControls .nowPlayingPageUserDataButtonsTitle {
+        width: 20%;
+        font-size: large;
+    }
+
+    .nowPlayingInfoControls .nowPlayingPageUserDataButtonsTitle button {
+        padding-top: 0;
+        padding-right: 0;
+        margin-right: 0;
+        float: right;
+        border-radius: 0;
+    }
+
+    .paper-icon-button-light:hover {
+        color: #fff !important;
+        background-color: transparent !important;
+    }
+
+    .btnPlayPause {
+        padding: 0;
+        margin: 0;
+        font-size: 1.7em;
+    }
+
+    .btnPlayPause:hover {
+        background-color: transparent !important;
+    }
+
+    .nowPlayingPageImage {
+        /* width: inherit; */
+        overflow-y: hidden;
+        overflow: hidden;
+        margin: 0 auto;
+    }
+
+    .nowPlayingPageImage.nowPlayingPageImageAudio {
+        width: 100%;
+    }
+
+    .nowPlayingPageImageContainer.nowPlayingPageImagePoster {
+        height: 100%;
+        overflow: hidden;
+    }
+
+    .nowPlayingPageImageContainer.nowPlayingPageImagePoster img {
+        height: 100%;
+        width: auto;
+    }
+
+    #nowPlayingPage .playlistSection .playlist,
+    #nowPlayingPage .playlistSection .contextMenu {
+        position: absolute;
+        top: 7.2em;
+        bottom: 4.2em;
+        overflow: scroll;
+        padding: 0 1em;
+        display: inline-block;
+        left: 0;
+        right: 0;
+        z-index: 1000;
+    }
+
+    .playlistSectionButton {
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        height: 4.2em;
+        right: 0;
+        padding-left: 4.3%;
+        padding-right: 4.3%;
+    }
+
+    .playlistSectionButton .btnTogglePlaylist {
+        font-size: larger;
+        margin: 0;
+        padding-left: 0;
+    }
+
+    .playlistSectionButton .btnSavePlaylist {
+        margin: 0;
+        padding-right: 0;
+        -webkit-box-flex: 1;
+        -webkit-flex-grow: 1;
+        flex-grow: 1;
+        -webkit-box-pack: end;
+        -webkit-justify-content: flex-end;
+        justify-content: flex-end;
+        border-radius: 0;
+    }
+
+    .playlistSectionButton .btnToggleContextMenu {
+        font-size: larger;
+        margin: 0;
+        padding-right: 0;
+        -webkit-box-flex: 1;
+        -webkit-flex-grow: 1;
+        flex-grow: 1;
+        -webkit-box-pack: end;
+        -webkit-justify-content: flex-end;
+        justify-content: flex-end;
+        border-radius: 0;
+    }
+
+    .playlistSectionButton .volumecontrol {
+        width: 100%;
+    }
+
+    .remoteControlSection {
+        margin: 4.2em 0 0 0;
+        padding: 0 0 4.2em 0;
+    }
+
+    .nowPlayingButtonsContainer {
+        display: flex;
+        height: 100%;
+        flex-direction: column;
+    }
+}
+
+.nowPlayingTime {
+    display: flex;
+    -webkit-box-align: center;
+    -webkit-align-items: center;
+    align-items: center;
+    margin: 0 1em;
+}
+
 .nowPlayingNavButtonContainer {
     width: 30em;
 }
@@ -214,8 +635,11 @@
     width: 9em;
 }
 
-@media all and (max-width: 50em) {
+@media all and (max-width: 63em) {
-    .nowPlayingInfoButtons .nowPlayingPageUserDataButtons {
+    .nowPlayingSecondaryButtons .nowPlayingPageUserDataButtons,
+    .nowPlayingSecondaryButtons .repeatToggleButton,
+    .nowPlayingInfoButtons .playlist .listItemMediaInfo,
+    .nowPlayingInfoButtons .btnStop {
         display: none !important;
     }
 
@@ -223,17 +647,3 @@
         font-size: 4em;
     }
 }
-
-@media all and (max-width: 47em) {
-    .nowPlayingInfoButtons .repeatToggleButton {
-        display: none !important;
-    }
-}
-
-@media all and (max-width: 34em) {
-    .nowPlayingInfoButtons .btnNowPlayingFastForward,
-    .nowPlayingInfoButtons .btnNowPlayingRewind,
-    .nowPlayingInfoButtons .playlist .listItemMediaInfo {
-        display: none !important;
-    }
-}

src/components/remotecontrol/remotecontrol.js

@@ -1,4 +1,4 @@
-define(["browser", "datetime", "backdrop", "libraryBrowser", "listView", "imageLoader", "playbackManager", "nowPlayingHelper", "events", "connectionManager", "apphost", "globalize", "layoutManager", "userSettings", "cardStyle", "emby-itemscontainer", "css!./remotecontrol.css", "emby-ratingbutton"], function (browser, datetime, backdrop, libraryBrowser, listView, imageLoader, playbackManager, nowPlayingHelper, events, connectionManager, appHost, globalize, layoutManager, userSettings) {
+define(["browser", "datetime", "backdrop", "libraryBrowser", "listView", "imageLoader", "playbackManager", "nowPlayingHelper", "events", "connectionManager", "apphost", "globalize", "layoutManager", "userSettings", "cardBuilder", "cardStyle", "emby-itemscontainer", "css!./remotecontrol.css", "emby-ratingbutton"], function (browser, datetime, backdrop, libraryBrowser, listView, imageLoader, playbackManager, nowPlayingHelper, events, connectionManager, appHost, globalize, layoutManager, userSettings, cardBuilder) {
     "use strict";
 
     function showAudioMenu(context, player, button, item) {
@@ -110,49 +110,93 @@ define(["browser", "datetime", "backdrop", "libraryBrowser", "listView", "imageL
         return null;
     }
 
-    function updateNowPlayingInfo(context, state) {
+    function updateNowPlayingInfo(context, state, serverId) {
         var item = state.NowPlayingItem;
         var displayName = item ? getNowPlayingNameHtml(item).replace("<br/>", " - ") : "";
-        context.querySelector(".nowPlayingPageTitle").innerHTML = displayName;
+        if (typeof item !== 'undefined') {
+            var nowPlayingServerId = (item.ServerId || serverId);
+            if (item.Type == "Audio" || item.MediaStreams[0].Type == "Audio") {
+                var songName = item.Name;
+                if (item.Album != null && item.Artists != null) {
+                    var albumName = item.Album;
+                    var artistName;
+                    if (item.ArtistItems != null) {
+                        artistName = item.ArtistItems[0].Name;
+                        context.querySelector(".nowPlayingAlbum").innerHTML = '<a class="button-link emby-button" is="emby-linkbutton" href="itemdetails.html?id=' + item.AlbumId + `&amp;serverId=${nowPlayingServerId}">${albumName}</a>`;
+                        context.querySelector(".nowPlayingArtist").innerHTML = '<a class="button-link emby-button" is="emby-linkbutton" href="itemdetails.html?id=' + item.ArtistItems[0].Id + `&amp;serverId=${nowPlayingServerId}">${artistName}</a>`;
+                        context.querySelector(".contextMenuAlbum").innerHTML = '<a class="button-link emby-button" is="emby-linkbutton" href="itemdetails.html?id=' + item.AlbumId + `&amp;serverId=${nowPlayingServerId}"><i class="actionsheetMenuItemIcon listItemIcon listItemIcon-transparent material-icons album"></i> ` + globalize.translate("ViewAlbum") + '</a>';
+                        context.querySelector(".contextMenuArtist").innerHTML = '<a class="button-link emby-button" is="emby-linkbutton" href="itemdetails.html?id=' + item.ArtistItems[0].Id + `&amp;serverId=${nowPlayingServerId}"><i class="actionsheetMenuItemIcon listItemIcon listItemIcon-transparent material-icons person"></i> ` + globalize.translate("ViewArtist") + '</a>';
+                    } else {
+                        artistName = item.Artists;
+                        context.querySelector(".nowPlayingAlbum").innerHTML = albumName;
+                        context.querySelector(".nowPlayingArtist").innerHTML = artistName;
+                    }
+                }
+                context.querySelector(".nowPlayingSongName").innerHTML = songName;
+            } else if (item.Type == "Episode") {
+                if (item.SeasonName != null) {
+                    var seasonName = item.SeasonName;
+                    context.querySelector(".nowPlayingSeason").innerHTML = '<a class="button-link emby-button" is="emby-linkbutton" href="itemdetails.html?id=' + item.SeasonId + `&amp;serverId=${nowPlayingServerId}">${seasonName}</a>`;
+                }
+                if (item.SeriesName != null) {
+                    var seriesName = item.SeriesName;
+                    if (item.SeriesId !=null) {
+                        context.querySelector(".nowPlayingSerie").innerHTML = '<a class="button-link emby-button" is="emby-linkbutton" href="itemdetails.html?id=' + item.SeriesId + `&amp;serverId=${nowPlayingServerId}">${seriesName}</a>`;
+                    } else {
+                        context.querySelector(".nowPlayingSerie").innerHTML = seriesName;
+                    }
+                }
+                context.querySelector(".nowPlayingEpisode").innerHTML = item.Name;
+            } else {
+                context.querySelector(".nowPlayingPageTitle").innerHTML = displayName;
+            }
 
-        if (displayName.length > 0) {
+            if (displayName.length > 0 && item.Type != "Audio" && item.Type != "Episode") {
-            context.querySelector(".nowPlayingPageTitle").classList.remove("hide");
+                context.querySelector(".nowPlayingPageTitle").classList.remove("hide");
-        } else {
+            } else {
-            context.querySelector(".nowPlayingPageTitle").classList.add("hide");
+                context.querySelector(".nowPlayingPageTitle").classList.add("hide");
-        }
+            }
 
-        var url = item ? seriesImageUrl(item, {
+            var url = item ? seriesImageUrl(item, {
-            maxHeight: 300 * 2
+                maxHeight: 300 * 2
-        }) || imageUrl(item, {
+            }) || imageUrl(item, {
-            maxHeight: 300 * 2
+                maxHeight: 300 * 2
-        }) : null;
+            }) : null;
 
-        console.debug("updateNowPlayingInfo");
+            console.debug("updateNowPlayingInfo");
-        setImageUrl(context, url);
+            setImageUrl(context, state, url);
-        if (item) {
+            if (item) {
-            backdrop.setBackdrops([item]);
+                backdrop.setBackdrops([item]);
-            var apiClient = connectionManager.getApiClient(item.ServerId);
+                var apiClient = connectionManager.getApiClient(item.ServerId);
-            apiClient.getItem(apiClient.getCurrentUserId(), item.Id).then(function (fullItem) {
+                apiClient.getItem(apiClient.getCurrentUserId(), item.Id).then(function (fullItem) {
-                var userData = fullItem.UserData || {};
+                    var userData = fullItem.UserData || {};
-                var likes = null == userData.Likes ? "" : userData.Likes;
+                    var likes = null == userData.Likes ? "" : userData.Likes;
-                context.querySelector(".nowPlayingPageUserDataButtons").innerHTML = '<button is="emby-ratingbutton" type="button" class="listItemButton paper-icon-button-light" data-id="' + fullItem.Id + '" data-serverid="' + fullItem.ServerId + '" data-itemtype="' + fullItem.Type + '" data-likes="' + likes + '" data-isfavorite="' + userData.IsFavorite + '"><i class="material-icons">favorite</i></button>';
+                    context.querySelector(".nowPlayingPageUserDataButtonsTitle").innerHTML = '<button is="emby-ratingbutton" type="button" class="listItemButton paper-icon-button-light" data-id="' + fullItem.Id + '" data-serverid="' + fullItem.ServerId + '" data-itemtype="' + fullItem.Type + '" data-likes="' + likes + '" data-isfavorite="' + userData.IsFavorite + '"><i class="material-icons">favorite</i></button>';
-            });
+                    context.querySelector(".nowPlayingPageUserDataButtons").innerHTML = '<button is="emby-ratingbutton" type="button" class="listItemButton paper-icon-button-light" data-id="' + fullItem.Id + '" data-serverid="' + fullItem.ServerId + '" data-itemtype="' + fullItem.Type + '" data-likes="' + likes + '" data-isfavorite="' + userData.IsFavorite + '"><i class="material-icons">favorite</i></button>';
-        } else {
+                });
-            backdrop.clear();
+            } else {
-            context.querySelector(".nowPlayingPageUserDataButtons").innerHTML = "";
+                backdrop.clear();
+                context.querySelector(".nowPlayingPageUserDataButtons").innerHTML = "";
+            }
         }
     }
 
-    function setImageUrl(context, url) {
+    function setImageUrl(context, state, url) {
         currentImgUrl = url;
+        var item = state.NowPlayingItem;
         var imgContainer = context.querySelector(".nowPlayingPageImageContainer");
 
         if (url) {
             imgContainer.innerHTML = '<img class="nowPlayingPageImage" src="' + url + '" />';
-            imgContainer.classList.remove("hide");
+            if (item.Type == "Audio") {
+                context.querySelector(".nowPlayingPageImage").classList.add("nowPlayingPageImageAudio");
+                context.querySelector(".nowPlayingPageImageContainer").classList.remove("nowPlayingPageImageAudio");
+            } else {
+                context.querySelector(".nowPlayingPageImageContainer").classList.add("nowPlayingPageImagePoster");
+                context.querySelector(".nowPlayingPageImage").classList.remove("nowPlayingPageImageAudio");
+            }
         } else {
-            imgContainer.classList.add("hide");
+            imgContainer.innerHTML = '<div class="nowPlayingPageImageContainerNoAlbum"><button data-action="link" class="cardContent-button cardImageContainer coveredImage ' + cardBuilder.getDefaultBackgroundClass(item.Name) + ' cardContent cardContent-shadow itemAction"><i class="cardImageIcon material-icons">album</i></button></div>';
-            imgContainer.innerHTML = "";
         }
     }
 
@@ -199,28 +243,35 @@ define(["browser", "datetime", "backdrop", "libraryBrowser", "listView", "imageL
             var supportedCommands = playerInfo.supportedCommands;
             currentPlayerSupportedCommands = supportedCommands;
             var playState = state.PlayState || {};
-            buttonVisible(context.querySelector(".btnToggleFullscreen"), item && "Video" == item.MediaType && -1 != supportedCommands.indexOf("ToggleFullscreen"));
+            var isSupportedCommands = supportedCommands.includes("DisplayMessage") || supportedCommands.includes("SendString") || supportedCommands.includes("Select");
+            buttonVisible(context.querySelector(".btnToggleFullscreen"), item && "Video" == item.MediaType && supportedCommands.includes("ToggleFullscreen"));
             updateAudioTracksDisplay(player, context);
             updateSubtitleTracksDisplay(player, context);
 
-            if (-1 != supportedCommands.indexOf("DisplayMessage") && !currentPlayer.isLocalPlayer) {
+            if (supportedCommands.includes("DisplayMessage") && !currentPlayer.isLocalPlayer) {
                 context.querySelector(".sendMessageSection").classList.remove("hide");
             } else {
                 context.querySelector(".sendMessageSection").classList.add("hide");
             }
 
-            if (-1 != supportedCommands.indexOf("SendString") && !currentPlayer.isLocalPlayer) {
+            if (supportedCommands.includes("SendString") && !currentPlayer.isLocalPlayer) {
                 context.querySelector(".sendTextSection").classList.remove("hide");
             } else {
                 context.querySelector(".sendTextSection").classList.add("hide");
             }
 
-            if (-1 != supportedCommands.indexOf("Select") && !currentPlayer.isLocalPlayer) {
+            if (supportedCommands.includes("Select") && !currentPlayer.isLocalPlayer) {
                 context.querySelector(".navigationSection").classList.remove("hide");
             } else {
                 context.querySelector(".navigationSection").classList.add("hide");
             }
 
+            if (isSupportedCommands && !currentPlayer.isLocalPlayer) {
+                context.querySelector(".remoteControlSection").classList.remove("hide");
+            } else {
+                context.querySelector(".remoteControlSection").classList.add("hide");
+            }
+
             buttonVisible(context.querySelector(".btnStop"), null != item);
             buttonVisible(context.querySelector(".btnNextTrack"), null != item);
             buttonVisible(context.querySelector(".btnPreviousTrack"), null != item);
@@ -331,7 +382,7 @@ define(["browser", "datetime", "backdrop", "libraryBrowser", "listView", "imageL
         function updatePlayPauseState(isPaused, isActive) {
             var context = dlg;
             var btnPlayPause = context.querySelector(".btnPlayPause");
-            btnPlayPause.querySelector("i").innerHTML = isPaused ? "&#xE037;" : "pause";
+            btnPlayPause.querySelector("i").innerHTML = isPaused ? "&#xE038;" : "&#xE035;";
             buttonVisible(btnPlayPause, isActive);
         }
 
@@ -374,9 +425,9 @@ define(["browser", "datetime", "backdrop", "libraryBrowser", "listView", "imageL
                 });
 
                 if (items.length) {
-                    context.querySelector(".playlistSection").classList.remove("hide");
+                    context.querySelector(".btnTogglePlaylist").classList.remove("hide");
                 } else {
-                    context.querySelector(".playlistSection").classList.add("hide");
+                    context.querySelector(".btnTogglePlaylist").classList.add("hide");
                 }
 
                 var itemsContainer = context.querySelector(".playlist");
@@ -393,6 +444,9 @@ define(["browser", "datetime", "backdrop", "libraryBrowser", "listView", "imageL
                 }
 
                 imageLoader.lazyChildren(itemsContainer);
+                context.querySelector(".playlist").classList.add("hide");
+                context.querySelector(".contextMenu").classList.add("hide");
+                context.querySelector(".btnSavePlaylist").classList.add("hide");
             });
         }
 
@@ -618,6 +672,18 @@ define(["browser", "datetime", "backdrop", "libraryBrowser", "listView", "imageL
                 playbackManager.setVolume(this.value, currentPlayer);
             }
 
+            var contextmenuHtml = '<button id="toggleContextMenu" is="paper-icon-button-light" class="btnToggleContextMenu" title=' + globalize.translate('ButtonToggleContextMenu') + '><i class="material-icons more_vert"></i></button>';
+            var volumecontrolHtml = '<div class="volumecontrol flex align-items-center flex-wrap-wrap justify-content-center">';
+            volumecontrolHtml += '<button is="paper-icon-button-light" class="buttonMute autoSize" title=' + globalize.translate('Mute') + '><i class="xlargePaperIconButton material-icons"></i></button>';
+            volumecontrolHtml += '<div class="sliderContainer nowPlayingVolumeSliderContainer"><input is="emby-slider" type="range" step="1" min="0" max="100" value="0" class="nowPlayingVolumeSlider"/></div>';
+            volumecontrolHtml += '</div>';
+            if (!layoutManager.mobile) {
+                context.querySelector(".nowPlayingSecondaryButtons").innerHTML += volumecontrolHtml;
+                context.querySelector(".playlistSectionButton").innerHTML += contextmenuHtml;
+            } else {
+                context.querySelector(".playlistSectionButton").innerHTML += volumecontrolHtml + contextmenuHtml;
+            }
+
             context.querySelector(".nowPlayingVolumeSlider").addEventListener("change", setVolume);
             context.querySelector(".nowPlayingVolumeSlider").addEventListener("mousemove", setVolume);
             context.querySelector(".nowPlayingVolumeSlider").addEventListener("touchmove", setVolume);
@@ -634,6 +700,27 @@ define(["browser", "datetime", "backdrop", "libraryBrowser", "listView", "imageL
                 playbackManager.movePlaylistItem(playlistItemId, newIndex, currentPlayer);
             });
             context.querySelector(".btnSavePlaylist").addEventListener("click", savePlaylist);
+            context.querySelector(".btnTogglePlaylist").addEventListener("click", function () {
+                if (context.querySelector(".playlist").classList.contains("hide")) {
+                    context.querySelector(".playlist").classList.remove("hide");
+                    context.querySelector(".btnSavePlaylist").classList.remove("hide");
+                    context.querySelector(".contextMenu").classList.add("hide");
+                    context.querySelector(".volumecontrol").classList.add("hide");
+                } else {
+                    context.querySelector(".playlist").classList.add("hide");
+                    context.querySelector(".btnSavePlaylist").classList.add("hide");
+                    context.querySelector(".volumecontrol").classList.remove("hide");
+                }
+            });
+            context.querySelector(".btnToggleContextMenu").addEventListener("click", function () {
+                if (context.querySelector(".contextMenu").classList.contains("hide")) {
+                    context.querySelector(".contextMenu").classList.remove("hide");
+                    context.querySelector(".btnSavePlaylist").classList.add("hide");
+                    context.querySelector(".playlist").classList.add("hide");
+                } else {
+                    context.querySelector(".contextMenu").classList.add("hide");
+                }
+            });
         }
 
         function onPlayerChange() {

src/nowplaying.html

@@ -1,57 +1,71 @@
-<div id="nowPlayingPage" data-role="page" class="page libraryPage nowPlayingPage noSecondaryNavPage selfBackdropPage" data-title="-" style="padding:6em 0 0!important;">
+<div id="nowPlayingPage" data-role="page" class="page libraryPage nowPlayingPage noSecondaryNavPage selfBackdropPage" data-title="-">
 
     <div class="remoteControlContent padded-left padded-right">
 
         <div class="nowPlayingInfoContainer">
             <div class="nowPlayingPageImageContainer"></div>
             <div class="nowPlayingInfoControls">
+            
+                <div class="flex">
 
-                <h2 class="nowPlayingPageTitle"></h2>
+                    <div class="nowPlayingInfoContainerMedia">
-
+                        <h2 class="nowPlayingPageTitle"></h2>
-                <div class="sliderContainer nowPlayingPositionSliderContainer">
+                        <div style="font-weight: bold;" class="nowPlayingSongName nowPlayingEpisode"></div>
-                    <input type="range" is="emby-slider" pin step="1" min="0" max="100" value="0" class="nowPlayingPositionSlider" data-slider-keep-progress="true" />
+                        <div class="nowPlayingAlbum nowPlayingSeason"></div>
+                        <div class="nowPlayingArtist nowPlayingSerie"></div>
+                    </div>
+                    <div class="nowPlayingPageUserDataButtonsTitle"></div>
+                    
                 </div>
+                
+                <div class="sliderContainer flex">
+                    <div class="positionTime"></div>
+                        <div class="nowPlayingPositionSliderContainer">
+                            <input type="range" is="emby-slider" pin step="1" min="0" max="100" value="0" class="nowPlayingPositionSlider" data-slider-keep-progress="true" />
+                        </div>
+                    <div class="runtime"></div>
+                </div>
+                
+                <div class="nowPlayingButtonsContainer">
+                
+                    <div class="nowPlayingInfoButtons focuscontainer-x">
+                    
+                        <button is="paper-icon-button-light" class="btnRewind btnNowPlayingRewind btnPlayStateCommand autoSize" title="${Rewind}">
+                            <i class="material-icons replay_10"></i>
+                        </button>
+                        
+                        <button is="paper-icon-button-light" class="btnPreviousTrack btnPlayStateCommand autoSize" title="${ButtonPreviousTrack}">
+                            <i class="material-icons skip_previous"></i>
+                        </button>
 
-                <div class="nowPlayingInfoButtons focuscontainer-x">
+                        <button is="paper-icon-button-light" class="btnPlayPause btnPlayStateCommand autoSize" title="${ButtonPause}">
-                    <button is="paper-icon-button-light" class="btnPreviousTrack btnPlayStateCommand autoSize" title="${ButtonPreviousTrack}">
+                            <i class="material-icons">pause</i>
-                        <i class="material-icons skip_previous"></i>
+                        </button>
-                    </button>
 
-                    <button is="paper-icon-button-light" class="btnRewind btnNowPlayingRewind btnPlayStateCommand autoSize" title="${Rewind}">
+                        <button is="paper-icon-button-light" class="btnPlayStateCommand btnStop autoSize" title="${ButtonStop}">
-                        <i class="material-icons fast_rewind"></i>
+                            <i class="material-icons">stop</i>
-                    </button>
+                        </button>
 
-                    <button is="paper-icon-button-light" class="btnPlayPause btnPlayStateCommand autoSize" title="${ButtonPause}">
+                        <button is="paper-icon-button-light" class="btnPlayStateCommand btnNextTrack autoSize" title="${ButtonNextTrack}">
-                        <i class="material-icons">pause</i>
+                            <i class="material-icons skip_next"></i>
-                    </button>
+                        </button>
-
+                        
-                    <button is="paper-icon-button-light" class="btnPlayStateCommand btnStop autoSize" title="${ButtonStop}">
+                        <button is="paper-icon-button-light" class="btnPlayStateCommand btnFastForward btnNowPlayingFastForward autoSize" title="${FastForward}">
-                        <i class="material-icons">stop</i>
+                            <i class="material-icons forward_30"></i>
-                    </button>
+                        </button>
-
+                    
-                    <button is="paper-icon-button-light" class="btnPlayStateCommand btnFastForward btnNowPlayingFastForward autoSize" title="${FastForward}">
-                        <i class="material-icons fast_forward"></i>
-                    </button>
-
-                    <button is="paper-icon-button-light" class="btnPlayStateCommand btnNextTrack autoSize" title="${ButtonNextTrack}">
-                        <i class="material-icons skip_next"></i>
-                    </button>
-
-                    <button is="paper-icon-button-light" class="btnAudioTracks videoButton btnPlayStateCommand autoSize" title="${ButtonAudioTracks}" data-command="GoToSearch">
-                        <i class="material-icons">audiotrack</i>
-                    </button>
-
-                    <button is="paper-icon-button-light" class="btnSubtitles videoButton btnPlayStateCommand autoSize" title="${ButtonSubtitles}" data-command="GoToSearch">
-                        <i class="material-icons closed_caption"></i>
-                    </button>
-
-                    <div class="nowPlayingTime">
-                        <div class="positionTime"></div>
-                        <div style="margin: 0 .25em;">/</div>
-                        <div class="runtime"></div>
                     </div>
 
                     <div class="nowPlayingSecondaryButtons">
+                    
+                        <button is="paper-icon-button-light" class="btnAudioTracks videoButton btnPlayStateCommand autoSize" title="${ButtonAudioTracks}" data-command="GoToSearch">
+                            <i class="material-icons">audiotrack</i>
+                        </button>
+
+                        <button is="paper-icon-button-light" class="btnSubtitles videoButton btnPlayStateCommand autoSize" title="${ButtonSubtitles}" data-command="GoToSearch">
+                            <i class="material-icons closed_caption"></i>
+                        </button>
+                    
                         <div class="nowPlayingPageUserDataButtons"></div>
 
                         <button is="paper-icon-button-light" class="btnToggleFullscreen videoButton btnPlayStateCommand autoSize" title="${ButtonFullscreen}" data-command="ToggleFullscreen">
@@ -62,17 +76,11 @@
                             <i class="material-icons">repeat</i>
                         </button>
 
-                        <button is="paper-icon-button-light" class="buttonMute autoSize" title="${Mute}">
-                            <i class="xlargePaperIconButton material-icons"></i>
-                        </button>
-                        <div class="sliderContainer nowPlayingVolumeSliderContainer">
-                            <input is="emby-slider" type="range" step="1" min="0" max="100" value="0" class="nowPlayingVolumeSlider" />
-                        </div>
                     </div>
                 </div>
             </div>
         </div>
-        <div>
+        <div class="remoteControlSection">
             <div class="navigationSection">
                 <div is="emby-collapse" title="${HeaderNavigation}">
                     <div class="collapseContent">
@@ -120,8 +128,6 @@
                     </div>
                 </div>
             </div>
-        </div>
-        <div>
             <div class="sendMessageSection">
                 <div is="emby-collapse" title="${HeaderSendMessage}">
                     <div class="collapseContent" style="text-align: left;">
@@ -155,21 +161,22 @@
                 </div>
             </div>
         </div>
-
+        <div class="playlistSection">
-        <br />
+            <div class="playlistSectionButton flex align-items-center justify-content-center">
-        <div class="playlistSection hide">
+                <button id="togglePlaylist" is="paper-icon-button-light" class="btnTogglePlaylist" title="${ButtonTogglePlaylist}">
-            <div style="display: flex; align-items: center;margin:2em 0 1em">
+                    <i class="material-icons queue_music"></i>   
-                <h2 style="margin:0;">${TabPlaylist}</h2>
+                </button>
-                <button is="paper-icon-button-light" class="btnSavePlaylist" title="${ButtonSave}" style="margin-left:1em;">
+                <button is="paper-icon-button-light" class="btnSavePlaylist" title="${ButtonSave}">
-                    <i class="material-icons">save</i>
+                    <i class="material-icons save"></i>  
                 </button>
             </div>
-            <div class="playlist itemsContainer vertical-list" is="emby-itemscontainer" data-dragreorder="true">
+            <div id="playlist" class="playlist itemsContainer vertical-list nowPlayingPlaylist hide" is="emby-itemscontainer" data-dragreorder="true"></div>
+            <div id="contextMenu" class="contextMenu itemsContainer vertical-list nowPlayingContextMenu hide" is="emby-itemscontainer">
+                <div class="listItem listItem-border contextMenuList contextMenuArtist">
+                </div>
+                <div class="listItem listItem-border contextMenuList contextMenuAlbum">
+                </div>
             </div>
         </div>
-        <br />
-        <br />
-        <br />
-        <br />
     </div>
 </div>

src/themes/appletv/theme.css

@@ -43,7 +43,9 @@ html {
 }
 
 .backgroundContainer,
-.dialog {
+.dialog,
+.nowPlayingPlaylist,
+.nowPlayingContextMenu {
     background: #d5e9f2;
     -webkit-background-size: 100% 100%;
     background-size: 100% 100%;
@@ -186,7 +188,8 @@ html {
 }
 
 .appfooter,
-.formDialogFooter:not(.formDialogFooter-clear) {
+.formDialogFooter:not(.formDialogFooter-clear),
+.playlistSectionButton {
     color: rgba(0, 0, 0, 0.7);
     background: #303030;
     background: -webkit-gradient(linear, left top, right top, from(#bcbcbc), color-stop(#a7b4b7), color-stop(#beb5a5), color-stop(#adbec2), to(#b9c7cb));

src/themes/blueradiance/theme.css

@@ -42,6 +42,8 @@ html {
 }
 
 .dialog,
+.nowPlayingPlaylist,
+.nowPlayingContextMenu,
 html {
     background-color: #033361;
 }
@@ -179,7 +181,8 @@ html {
     color: rgba(255, 255, 255, 0.87);
 }
 
-.appfooter {
+.appfooter,
+.playlistSectionButton {
     background: #033664;
     color: #ccc;
     color: rgba(255, 255, 255, 0.78);

src/themes/dark/theme.css

@@ -36,6 +36,8 @@ html {
 
 .backgroundContainer,
 .dialog,
+.nowPlayingPlaylist,
+.nowPlayingContextMenu,
 html {
     background-color: #101010;
 }
@@ -161,7 +163,8 @@ html {
     color: rgba(255, 255, 255, 0.87);
 }
 
-.appfooter {
+.appfooter,
+.playlistSectionButton {
     background: #202020;
     color: #ccc;
     color: rgba(255, 255, 255, 0.78);

src/themes/light/theme.css

@@ -51,7 +51,9 @@ html {
     background-color: rgba(255, 255, 255, 0.8);
 }
 
-.dialog {
+.dialog,
+.nowPlayingPlaylist,
+.nowPlayingContextMenu {
     background-color: #f0f0f0;
 }
 
@@ -183,7 +185,8 @@ html {
     color: rgba(255, 255, 255, 0.87);
 }
 
-.appfooter {
+.appfooter,
+.playlistSectionButton {
     background: #282828;
     color: #ccc;
     color: rgba(255, 255, 255, 0.78);

src/themes/purplehaze/theme.css

@@ -37,6 +37,8 @@ html {
 }
 
 .dialog,
+.nowPlayingPlaylist,
+.nowPlayingContextMenu,
 html {
     background-color: #230c33;
 }
@@ -269,7 +271,8 @@ a[data-role=button] {
     color: rgba(255, 255, 255, 0.87);
 }
 
-.appfooter {
+.appfooter,
+.playlistSectionButton {
     background: #06256f;
     color: #ccc;
     color: rgba(255, 255, 255, 0.78);

src/themes/wmc/theme.css

@@ -48,7 +48,9 @@ html {
 }
 
 .backgroundContainer,
-.dialog {
+.dialog,
+.nowPlayingPlaylist,
+.nowPlayingContextMenu {
     background: -webkit-gradient(linear, left top, left bottom, from(#0f3562), color-stop(#1162a4), to(#03215f));
     background: -webkit-linear-gradient(top, #0f3562, #1162a4, #03215f);
     background: -o-linear-gradient(top, #0f3562, #1162a4, #03215f);
@@ -172,7 +174,8 @@ html {
 }
 
 .appfooter,
-.formDialogFooter:not(.formDialogFooter-clear) {
+.formDialogFooter:not(.formDialogFooter-clear),
+.playlistSectionButton {
     background: #0c2450;
     background: -webkit-gradient(linear, left bottom, left top, from(#0c2450), to(#081b3b));
     background: -webkit-linear-gradient(bottom, #0c2450, #081b3b);