Style cleanup, address suggestions and placeholders for songs in cardBuilder and listView

src/assets/css/flexstyles.css

@@ -42,6 +42,10 @@
     justify-content: flex-end;
 }
 
+.justify-content-space-between {
+    justify-content: space-between;
+}
+
 .flex-wrap-wrap {
     flex-wrap: wrap;
 }

src/components/cardbuilder/card.css

@@ -167,8 +167,9 @@ button::-moz-focus-inner {
     position: relative;
     background-clip: content-box !important;
     color: inherit;
+}
 
-    /* This is only needed for scalable cards */
+.cardImageContainer.cardScalable {
     height: 100%;
     contain: strict;
 }

src/components/cardbuilder/cardBuilder.js

@@ -1537,8 +1537,11 @@ import 'programStyles';
                 case 'MusicAlbum':
                     return '<span class="cardImageIcon material-icons album"></span>';
                 case 'MusicArtist':
+                    return '<span class="cardImageIcon material-icons person"></span>';
                 case 'Person':
                     return '<span class="cardImageIcon material-icons person"></span>';
+                case 'Audio':
+                    return '<span class="cardImageIcon material-icons audiotrack"></span>';
                 case 'Movie':
                     return '<span class="cardImageIcon material-icons movie"></span>';
                 case 'Series':

src/components/listview/listview.js

@@ -1,4 +1,4 @@
-define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutManager', 'globalize', 'datetime', 'apphost', 'css!./listview', 'emby-ratingbutton', 'emby-playstatebutton'], function (itemHelper, mediaInfo, indicators, connectionManager, layoutManager, globalize, datetime, appHost) {
+define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutManager', 'globalize', 'datetime', 'cardBuilder', 'css!./listview', 'emby-ratingbutton', 'emby-playstatebutton'], function (itemHelper, mediaInfo, indicators, connectionManager, layoutManager, globalize, datetime, cardBuilder) {
     'use strict';
 
     function getIndex(item, options) {
@@ -270,54 +270,56 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
 
             if (options.image !== false) {
                 let imgData = options.imageSource === 'channel' ? getChannelImageUrl(item, downloadWidth) : getImageUrl(item, downloadWidth);
+                let imgUrl;
+                let blurhash;
                 if (imgData) {
-                    let imgUrl = imgData.url;
+                    imgUrl = imgData.url;
-                    let blurhash = imgData.blurhash;
+                    blurhash = imgData.blurhash;
-                    let imageClass = isLargeStyle ? 'listItemImage listItemImage-large' : 'listItemImage';
-
-                    if (isLargeStyle && layoutManager.tv) {
-                        imageClass += ' listItemImage-large-tv';
-                    }
-
-                    var playOnImageClick = options.imagePlayButton && !layoutManager.tv;
-
-                    if (!clickEntireItem) {
-                        imageClass += ' itemAction';
-                    }
-
-                    var imageAction = playOnImageClick ? 'resume' : action;
-
-                    let blurhashAttrib = '';
-                    if (blurhash && blurhash.length > 0) {
-                        blurhashAttrib = 'data-blurhash="' + blurhash + '"';
-                    }
-
-                    if (imgUrl) {
-                        html += '<div data-action="' + imageAction + '" class="' + imageClass + ' lazy" data-src="' + imgUrl + '" ' + blurhashAttrib + ' item-icon>';
-                    } else {
-                        html += '<div class="' + imageClass + '">';
-                    }
-
-                    var indicatorsHtml = '';
-                    indicatorsHtml += indicators.getPlayedIndicatorHtml(item);
-
-                    if (indicatorsHtml) {
-                        html += '<div class="indicators listItemIndicators">' + indicatorsHtml + '</div>';
-                    }
-
-                    if (playOnImageClick) {
-                        html += '<button is="paper-icon-button-light" class="listItemImageButton itemAction" data-action="resume"><span class="material-icons listItemImageButton-icon play_arrow"></span></button>';
-                    }
-
-                    var progressHtml = indicators.getProgressBarHtml(item, {
-                        containerClass: 'listItemProgressBar'
-                    });
-
-                    if (progressHtml) {
-                        html += progressHtml;
-                    }
-                    html += '</div>';
                 }
+                let imageClass = isLargeStyle ? 'listItemImage listItemImage-large' : 'listItemImage';
+
+                if (isLargeStyle && layoutManager.tv) {
+                    imageClass += ' listItemImage-large-tv';
+                }
+
+                var playOnImageClick = options.imagePlayButton && !layoutManager.tv;
+
+                if (!clickEntireItem) {
+                    imageClass += ' itemAction';
+                }
+
+                var imageAction = playOnImageClick ? 'resume' : action;
+
+                let blurhashAttrib = '';
+                if (blurhash && blurhash.length > 0) {
+                    blurhashAttrib = 'data-blurhash="' + blurhash + '"';
+                }
+
+                if (imgUrl) {
+                    html += '<div data-action="' + imageAction + '" class="' + imageClass + ' lazy" data-src="' + imgUrl + '" ' + blurhashAttrib + ' item-icon>';
+                } else {
+                    html += '<div class="' + imageClass + ' cardImageContainer ' + cardBuilder.getDefaultBackgroundClass(item.Name) + '">' + cardBuilder.getDefaultText(item, options);
+                }
+
+                var indicatorsHtml = '';
+                indicatorsHtml += indicators.getPlayedIndicatorHtml(item);
+
+                if (indicatorsHtml) {
+                    html += '<div class="indicators listItemIndicators">' + indicatorsHtml + '</div>';
+                }
+
+                if (playOnImageClick) {
+                    html += '<button is="paper-icon-button-light" class="listItemImageButton itemAction" data-action="resume"><span class="material-icons listItemImageButton-icon play_arrow"></span></button>';
+                }
+
+                var progressHtml = indicators.getProgressBarHtml(item, {
+                    containerClass: 'listItemProgressBar'
+                });
+
+                if (progressHtml) {
+                    html += progressHtml;
+                }
+                html += '</div>';
             }
 
             if (options.showIndexNumberLeft) {

src/components/nowPlayingBar/nowPlayingBar.css

@@ -133,10 +133,7 @@
     .toggleRepeatButton {
         display: none !important;
     }
-}
+    .nowPlayingBar .btnShuffleQueue {
-
-@media all and (max-width: 66em) {
-    .btnShuffle {
         display: none !important;
     }
 }
@@ -152,18 +149,21 @@
     }
 }
 
+.layout-mobile .nowPlayingBarRight button:not(.playPauseButton, .nextTrackButton) {
+    display: none;
+}
+
+.layout-mobile .nowPlayingBarRight input,
+.layout-mobile .nowPlayingBarRight div {
+    display: none;
+}
+
 @media all and (max-width: 56em) {
     .nowPlayingBarCenter {
         display: none !important;
     }
 }
 
-@media all and (min-width: 56em) {
-    .nowPlayingBarRight .playPauseButton {
-        display: none;
-    }
-}
-
 @media all and (max-width: 60em) {
     .nowPlayingBarRight .nowPlayingBarVolumeSliderContainer {
         display: none !important;

src/components/nowPlayingBar/nowPlayingBar.js

@@ -63,7 +63,7 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
         html += '</div>';
 
         html += '<button is="paper-icon-button-light" class="toggleRepeatButton mediaButton"><span class="material-icons repeat"></span></button>';
-        html += '<button is="paper-icon-button-light" class="btnShuffle mediaButton"><span class="material-icons shuffle"></span></button>';
+        html += '<button is="paper-icon-button-light" class="btnShuffleQueue mediaButton"><span class="material-icons shuffle"></span></button>';
 
         html += '<div class="nowPlayingBarUserDataButtons">';
         html += '</div>';
@@ -179,7 +179,7 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
             }
         });
 
-        elem.querySelector('.btnShuffle').addEventListener('click', function () {
+        elem.querySelector('.btnShuffleQueue').addEventListener('click', function () {
             if (currentPlayer) {
                 if (playbackManager.getQueueShuffleMode(currentPlayer) === 'Sorted') {
                     playbackManager.setQueueShuffleMode('Shuffle', currentPlayer);
@@ -290,7 +290,8 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
                 nowPlayingBarElement = parentContainer.querySelector('.nowPlayingBar');
 
                 if (layoutManager.mobile) {
-                    hideButton(nowPlayingBarElement.querySelector('.shuffle'));
+                    hideButton(nowPlayingBarElement.querySelector('.btnShuffleQueue'));
+                    hideButton(nowPlayingBarElement.querySelector('.nowPlayingBarCenter'));
                 }
 
                 if (browser.safari && browser.slow) {
@@ -634,12 +635,12 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
     function onQueueShuffleModeChange() {
         let shuffleMode = playbackManager.getQueueShuffleMode(this);
         let context = nowPlayingBarElement;
-        let toggleShuffleButton = context.querySelector('.btnShuffle');
+        let toggleShuffleButton = context.querySelector('.btnShuffleQueue');
 
-        if ('Sorted' === shuffleMode) {
+        if (shuffleMode === 'Sorted') {
-            toggleShuffleButton.classList.remove('shuffleButton-active');
+            toggleShuffleButton.classList.remove('shuffleQueue-active');
-        } else if ('Shuffle' === shuffleMode) {
+        } else if (shuffleMode === 'Shuffle') {
-            toggleShuffleButton.classList.add('shuffleButton-active');
+            toggleShuffleButton.classList.add('shuffleQueue-active');
         }
     }
 

src/components/remotecontrol/remotecontrol.css

@@ -175,10 +175,6 @@
     background: rgba(0, 0, 0, 0) !important;
 }
 
-.layout-mobile .btnShuffle {
-    display: unset !important;
-}
-
 .layout-mobile .playlistSection .playlist,
 .layout-mobile .playlistSection .contextMenu {
     position: absolute;
@@ -202,62 +198,82 @@
     padding-right: 7.3%;
 }
 
-.playlistSectionButton:not(>.layout-mobile) {
+.layout-desktop .playlistSectionButton,
-    background: unset !important;
+.layout-tv .playlistSectionButton {
+    background: none;
 }
 
-.nowPlayingPlaylist:not(>.layout-mobile) {
+.layout-desktop .nowPlayingPlaylist,
-    background: unset !important;
+.layout-tv .nowPlayingPlaylist {
+    background: none;
 }
 
 .layout-mobile .playlistSectionButton .btnTogglePlaylist {
     font-size: larger;
     margin: 0;
-    padding-left: 0;
 }
 
 .layout-mobile .playlistSectionButton .btnSavePlaylist {
     margin: 0;
     padding-right: 0;
-    -webkit-box-flex: 1;
+    border-radius: 0;
-    -webkit-flex-grow: 1;
+}
-    flex-grow: 1;
+
-    -webkit-box-pack: end;
+.layout-mobile .playlistSectionButton .volumecontrol {
-    -webkit-justify-content: flex-end;
+    margin: 0;
-    justify-content: flex-end;
+    padding-right: 0;
     border-radius: 0;
 }
 
 .layout-mobile .playlistSectionButton .btnToggleContextMenu {
     font-size: larger;
     margin: 0;
-    padding-right: 0;
+}
+
+.layout-mobile .nowPlayingSecondaryButtons .btnShuffleQueue {
+    display: none;
+}
+
+.layout-mobile .nowPlayingSecondaryButtons .volumecontrol {
+    display: none;
+}
+
+.layout-mobile .nowPlayingSecondaryButtons .btnRepeat {
+    display: none;
+}
+
+.layout-desktop .nowPlayingInfoButtons .btnRepeat,
+.layout-tv .nowPlayingInfoButtons .btnRepeat {
+    display: none;
+}
+
+.layout-desktop .nowPlayingInfoButtons .btnShuffleQueue,
+.layout-tv .nowPlayingInfoButtons .btnShuffleQueue{
+    display: none;
+}
+
+.layout-desktop .playlistSectionButton .volumecontrol,
+.layout-tv .playlistSectionButton .volumecontrol {
+    display: none;
+}
+
+.nowPlayingSecondaryButtons {
     -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;
+}
+
+.nowPlayingInfoControls .nowPlayingPageUserDataButtonsTitle {
+    display: none;
 }
 
 @media all and (min-width: 63em) {
     .nowPlayingPage {
         padding: 8em 0 0 0 !important;
     }
-
-    .nowPlayingSecondaryButtons {
-        -webkit-box-flex: 1;
-        -webkit-flex-grow: 1;
-        flex-grow: 1;
-        -webkit-box-pack: end;
-        -webkit-justify-content: flex-end;
-        justify-content: flex-end;
-    }
-
-    .nowPlayingPageUserDataButtonsTitle {
-        display: none !important;
-    }
 }
 
 @media all and (min-width: 80em) {
@@ -275,6 +291,10 @@
         flex-direction: column;
     }
 
+    .nowPlayingInfoControls .nowPlayingPageUserDataButtonsTitle {
+        display: unset;
+    }
+
     .nowPlayingInfoContainer {
         -webkit-box-orient: vertical !important;
         -webkit-box-direction: normal !important;
@@ -362,7 +382,7 @@
         font-size: smaller;
     }
 
-    .nowPlayingInfoButtons .btnShuffle {
+    .nowPlayingInfoButtons .btnShuffleQueue {
         position: absolute;
         right: 0;
         margin-right: 0;
@@ -447,6 +467,10 @@
     background-image: url(../../assets/img/equalizer.gif) !important;
 }
 
+.playlistIndexIndicatorImage > * {
+    display: none;
+}
+
 .hideVideoButtons .videoButton {
     display: none;
 }
@@ -456,7 +480,6 @@
 }
 
 @media all and (max-width: 63em) {
-    .nowPlayingSecondaryButtons .nowPlayingPageUserDataButtons,
     .nowPlayingSecondaryButtons .repeatToggleButton,
     .nowPlayingInfoButtons .playlist .listItemMediaInfo,
     .nowPlayingInfoButtons .btnStop {

src/components/remotecontrol/remotecontrol.js

@@ -511,11 +511,11 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
         function onShuffleQueueModeChange() {
             let shuffleMode = playbackManager.getQueueShuffleMode(this);
             let context = dlg;
-            let shuffleButton = context.querySelector('.btnShuffle');
+            let shuffleButton = context.querySelector('.btnShuffleQueue');
             if ('Sorted' === shuffleMode) {
-                shuffleButton.classList.remove('shuffleButton-active');
+                shuffleButton.classList.remove('shuffleQueue-active');
             } else if ('Shuffle' === shuffleMode) {
-                shuffleButton.classList.add('shuffleButton-active');
+                shuffleButton.classList.add('shuffleQueue-active');
             }
             onPlaylistUpdate();
         }
@@ -703,7 +703,7 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
                     playbackManager.fastForward(currentPlayer);
                 }
             });
-            context.querySelector('.btnShuffle').addEventListener('click', function () {
+            context.querySelector('.btnShuffleQueue').addEventListener('click', function () {
                 if (currentPlayer) {
                     if (playbackManager.getQueueShuffleMode(currentPlayer) === 'Sorted') {
                         playbackManager.setQueueShuffleMode('Shuffle', currentPlayer);
@@ -841,27 +841,23 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
         }
 
         function init(ownerView, context) {
-            let contextmenuHtml = `<button id="toggleContextMenu" is="paper-icon-button-light" class="btnToggleContextMenu" title=${globalize.translate('ButtonToggleContextMenu')}><span class="material-icons more_vert"></span></button>`;
             let 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')}><span class="xlargePaperIconButton material-icons volume_up"></span></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>';
-            let shuffleButtonHtml = `<button is="paper-icon-button-light" class="btnShuffle autoSize" title="${globalize.translate('ButtonShuffle')}"><span class="material-icons shuffle"></span></button>`;
-            let repeatButtonHtml = `<button is="paper-icon-button-light" class="btnCommand btnRepeat repeatToggleButton autoSize" title="${globalize.translate('ButtonRepeat')}" data-command="SetRepeatMode"><span class="material-icons repeat"></span></button>`;
             let optionsSection = context.querySelector('.playlistSectionButton');
             if (!layoutManager.mobile) {
-                context.querySelector('.nowPlayingSecondaryButtons').insertAdjacentHTML('beforeend', repeatButtonHtml + shuffleButtonHtml + volumecontrolHtml);
+                context.querySelector('.nowPlayingSecondaryButtons').insertAdjacentHTML('beforeend', volumecontrolHtml);
-                optionsSection.innerHTML += contextmenuHtml;
                 optionsSection.classList.remove('align-items-center', 'justify-content-center');
                 optionsSection.classList.add('align-items-right', 'justify-content-flex-end');
                 context.querySelector('.playlist').classList.remove('hide');
                 context.querySelector('.btnSavePlaylist').classList.remove('hide');
             } else {
-                optionsSection.innerHTML += volumecontrolHtml + contextmenuHtml;
+                optionsSection.querySelector('.btnTogglePlaylist').insertAdjacentHTML('afterend', volumecontrolHtml);
                 optionsSection.classList.add('playlistSectionButtonTransparent');
                 context.querySelector('.btnTogglePlaylist').classList.remove('hide');
-                context.querySelector('.nowPlayingInfoButtons').insertAdjacentHTML('afterbegin', repeatButtonHtml);
+                context.querySelector('.playlistSectionButton').classList.remove('justify-content-center');
-                context.querySelector('.nowPlayingInfoButtons').insertAdjacentHTML('beforeend', shuffleButtonHtml);
+                context.querySelector('.playlistSectionButton').classList.add('justify-content-space-between');
             }
 
             bindEvents(context);

src/nowplaying.html

@@ -30,6 +30,11 @@
                 
                     <div class="nowPlayingInfoButtons">
 
+                        <button is="paper-icon-button-light" class="btnCommand btnRepeat repeatToggleButton autoSize" title="${ButtonRepeat}"
+                            data-command="SetRepeatMode">
+                            <span class="material-icons repeat"></span>
+                        </button>
+                    
                         <button is="paper-icon-button-light" class="btnRewind btnNowPlayingRewind btnPlayStateCommand autoSize" title="${Rewind}">
                             <span class="material-icons replay_10"></span>
                         </button>
@@ -54,6 +59,10 @@
                             <span class="material-icons forward_30"></span>
                         </button>
 
+                        <button is="paper-icon-button-light" class="btnShuffleQueue autoSize" title="${ButtonShuffle}">
+                            <span class="material-icons shuffle"></span>
+                        </button>
+
                     </div>
 
                     <div class="nowPlayingSecondaryButtons">
@@ -72,6 +81,15 @@
                             <span class="material-icons fullscreen"></span>
                         </button>
 
+                        <button is="paper-icon-button-light" class="btnShuffleQueue autoSize" title="${ButtonShuffle}">
+                            <span class="material-icons shuffle"></span>
+                        </button>
+
+                        <button is="paper-icon-button-light" class="btnCommand btnRepeat repeatToggleButton autoSize" title="${ButtonRepeat}"
+                            data-command="SetRepeatMode">
+                            <span class="material-icons repeat"></span>
+                        </button>
+
                     </div>
                 </div>
             </div>
@@ -165,6 +183,9 @@
                 <button is="paper-icon-button-light" class="btnSavePlaylist hide" title="${ButtonSave}">
                     <span class="material-icons save"></span>
                 </button>
+                <button id="toggleContextMenu" is="paper-icon-button-light" class="btnToggleContextMenu" title="${ButtonToggleContextMenu}">
+                    <span class="material-icons more_vert"></span>
+                </button>
             </div>
             <div id="playlist" class="playlist itemsContainer vertical-list nowPlayingPlaylist hide" is="emby-itemscontainer" data-dragreorder="true"></div>
         </div>

src/themes/appletv/theme.css

@@ -450,7 +450,7 @@ html {
     color: #4285f4;
 }
 
-.shuffleButton-active {
+.shuffleQueue-active {
     color: #4285f4 !important;
 }
 

src/themes/blueradiance/theme.css

@@ -450,7 +450,7 @@ html {
     color: #4285f4;
 }
 
-.shuffleButton-active {
+.shuffleQueue-active {
     color: #4285f4 !important;
 }
 

src/themes/dark/theme.css

@@ -421,7 +421,7 @@ html {
     color: #4285f4;
 }
 
-.shuffleButton-active {
+.shuffleQueue-active {
     color: #4285f4 !important;
 }
 

src/themes/light/theme.css

@@ -432,7 +432,7 @@ html {
     color: #4285f4;
 }
 
-.shuffleButton-active {
+.shuffleQueue-active {
     color: #4285f4 !important;
 }
 

src/themes/purplehaze/theme.css

@@ -547,7 +547,7 @@ a[data-role=button] {
     color: #4285f4;
 }
 
-.shuffleButton-active {
+.shuffleQueue-active {
     color: #4285f4 !important;
 }
 

src/themes/wmc/theme.css

@@ -430,7 +430,7 @@ html {
     color: #4285f4;
 }
 
-.shuffleButton-active {
+.shuffleQueue-active {
     color: #4285f4 !important;
 }