From f6a9f4679ae14f81b664d63efd09918c977583d3 Mon Sep 17 00:00:00 2001 From: ferferga Date: Mon, 22 Jun 2020 17:37:06 +0200 Subject: [PATCH] Style cleanup, address suggestions and placeholders for songs in cardBuilder and listView --- src/assets/css/flexstyles.css | 4 + src/components/cardbuilder/card.css | 3 +- src/components/cardbuilder/cardBuilder.js | 3 + src/components/listview/listview.js | 96 ++++++++++--------- .../nowPlayingBar/nowPlayingBar.css | 20 ++-- src/components/nowPlayingBar/nowPlayingBar.js | 17 ++-- .../remotecontrol/remotecontrol.css | 87 ++++++++++------- src/components/remotecontrol/remotecontrol.js | 20 ++-- src/nowplaying.html | 21 ++++ src/themes/appletv/theme.css | 2 +- src/themes/blueradiance/theme.css | 2 +- src/themes/dark/theme.css | 2 +- src/themes/light/theme.css | 2 +- src/themes/purplehaze/theme.css | 2 +- src/themes/wmc/theme.css | 2 +- 15 files changed, 167 insertions(+), 116 deletions(-) diff --git a/src/assets/css/flexstyles.css b/src/assets/css/flexstyles.css index 2f3a386bff..429ed7a650 100644 --- a/src/assets/css/flexstyles.css +++ b/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; } diff --git a/src/components/cardbuilder/card.css b/src/components/cardbuilder/card.css index c24fcf6ba6..f02f1de6bf 100644 --- a/src/components/cardbuilder/card.css +++ b/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; } diff --git a/src/components/cardbuilder/cardBuilder.js b/src/components/cardbuilder/cardBuilder.js index e540a40211..37c0e26969 100644 --- a/src/components/cardbuilder/cardBuilder.js +++ b/src/components/cardbuilder/cardBuilder.js @@ -1537,8 +1537,11 @@ import 'programStyles'; case 'MusicAlbum': return ''; case 'MusicArtist': + return ''; case 'Person': return ''; + case 'Audio': + return ''; case 'Movie': return ''; case 'Series': diff --git a/src/components/listview/listview.js b/src/components/listview/listview.js index 4ce8526c98..1bbde6fdbc 100644 --- a/src/components/listview/listview.js +++ b/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; - let 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 += '
'; - } else { - html += '
'; - } - - var indicatorsHtml = ''; - indicatorsHtml += indicators.getPlayedIndicatorHtml(item); - - if (indicatorsHtml) { - html += '
' + indicatorsHtml + '
'; - } - - if (playOnImageClick) { - html += ''; - } - - var progressHtml = indicators.getProgressBarHtml(item, { - containerClass: 'listItemProgressBar' - }); - - if (progressHtml) { - html += progressHtml; - } - html += '
'; + imgUrl = imgData.url; + 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 += '
'; + } else { + html += '
' + cardBuilder.getDefaultText(item, options); + } + + var indicatorsHtml = ''; + indicatorsHtml += indicators.getPlayedIndicatorHtml(item); + + if (indicatorsHtml) { + html += '
' + indicatorsHtml + '
'; + } + + if (playOnImageClick) { + html += ''; + } + + var progressHtml = indicators.getProgressBarHtml(item, { + containerClass: 'listItemProgressBar' + }); + + if (progressHtml) { + html += progressHtml; + } + html += '
'; } if (options.showIndexNumberLeft) { diff --git a/src/components/nowPlayingBar/nowPlayingBar.css b/src/components/nowPlayingBar/nowPlayingBar.css index a2d5b4479c..c22429eedc 100644 --- a/src/components/nowPlayingBar/nowPlayingBar.css +++ b/src/components/nowPlayingBar/nowPlayingBar.css @@ -133,10 +133,7 @@ .toggleRepeatButton { display: none !important; } -} - -@media all and (max-width: 66em) { - .btnShuffle { + .nowPlayingBar .btnShuffleQueue { 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; diff --git a/src/components/nowPlayingBar/nowPlayingBar.js b/src/components/nowPlayingBar/nowPlayingBar.js index 07cdaac4fe..f0b585e9d0 100644 --- a/src/components/nowPlayingBar/nowPlayingBar.js +++ b/src/components/nowPlayingBar/nowPlayingBar.js @@ -63,7 +63,7 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader', html += '
'; html += ''; - html += ''; + html += ''; html += '
'; html += '
'; @@ -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) { - toggleShuffleButton.classList.remove('shuffleButton-active'); - } else if ('Shuffle' === shuffleMode) { - toggleShuffleButton.classList.add('shuffleButton-active'); + if (shuffleMode === 'Sorted') { + toggleShuffleButton.classList.remove('shuffleQueue-active'); + } else if (shuffleMode === 'Shuffle') { + toggleShuffleButton.classList.add('shuffleQueue-active'); } } diff --git a/src/components/remotecontrol/remotecontrol.css b/src/components/remotecontrol/remotecontrol.css index 6dbd3b7160..3fd0ab0971 100644 --- a/src/components/remotecontrol/remotecontrol.css +++ b/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) { - background: unset !important; +.layout-desktop .playlistSectionButton, +.layout-tv .playlistSectionButton { + background: none; } -.nowPlayingPlaylist:not(>.layout-mobile) { - background: unset !important; +.layout-desktop .nowPlayingPlaylist, +.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; - -webkit-flex-grow: 1; - flex-grow: 1; - -webkit-box-pack: end; - -webkit-justify-content: flex-end; - justify-content: flex-end; + border-radius: 0; +} + +.layout-mobile .playlistSectionButton .volumecontrol { + margin: 0; + 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 { diff --git a/src/components/remotecontrol/remotecontrol.js b/src/components/remotecontrol/remotecontrol.js index 784e7ff5b1..18a8f2005c 100644 --- a/src/components/remotecontrol/remotecontrol.js +++ b/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 = ``; let volumecontrolHtml = '
'; volumecontrolHtml += ``; volumecontrolHtml += '
'; volumecontrolHtml += '
'; - let shuffleButtonHtml = ``; - let repeatButtonHtml = ``; let optionsSection = context.querySelector('.playlistSectionButton'); if (!layoutManager.mobile) { - context.querySelector('.nowPlayingSecondaryButtons').insertAdjacentHTML('beforeend', repeatButtonHtml + shuffleButtonHtml + volumecontrolHtml); - optionsSection.innerHTML += contextmenuHtml; + context.querySelector('.nowPlayingSecondaryButtons').insertAdjacentHTML('beforeend', volumecontrolHtml); 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('.nowPlayingInfoButtons').insertAdjacentHTML('beforeend', shuffleButtonHtml); + context.querySelector('.playlistSectionButton').classList.remove('justify-content-center'); + context.querySelector('.playlistSectionButton').classList.add('justify-content-space-between'); } bindEvents(context); diff --git a/src/nowplaying.html b/src/nowplaying.html index 0c76882466..e429647076 100644 --- a/src/nowplaying.html +++ b/src/nowplaying.html @@ -29,6 +29,11 @@
+ + + +
@@ -72,6 +81,15 @@ + + + +
@@ -165,6 +183,9 @@ +
diff --git a/src/themes/appletv/theme.css b/src/themes/appletv/theme.css index 9d0ccdc9d8..8b6b3e1902 100644 --- a/src/themes/appletv/theme.css +++ b/src/themes/appletv/theme.css @@ -450,7 +450,7 @@ html { color: #4285f4; } -.shuffleButton-active { +.shuffleQueue-active { color: #4285f4 !important; } diff --git a/src/themes/blueradiance/theme.css b/src/themes/blueradiance/theme.css index 5215f4bb6c..d8d7525d3c 100644 --- a/src/themes/blueradiance/theme.css +++ b/src/themes/blueradiance/theme.css @@ -450,7 +450,7 @@ html { color: #4285f4; } -.shuffleButton-active { +.shuffleQueue-active { color: #4285f4 !important; } diff --git a/src/themes/dark/theme.css b/src/themes/dark/theme.css index 1e8a996c98..9491b2cae9 100644 --- a/src/themes/dark/theme.css +++ b/src/themes/dark/theme.css @@ -421,7 +421,7 @@ html { color: #4285f4; } -.shuffleButton-active { +.shuffleQueue-active { color: #4285f4 !important; } diff --git a/src/themes/light/theme.css b/src/themes/light/theme.css index 82b2f50755..abb5a58fb4 100644 --- a/src/themes/light/theme.css +++ b/src/themes/light/theme.css @@ -432,7 +432,7 @@ html { color: #4285f4; } -.shuffleButton-active { +.shuffleQueue-active { color: #4285f4 !important; } diff --git a/src/themes/purplehaze/theme.css b/src/themes/purplehaze/theme.css index 140969f657..ca8fe1fdfa 100644 --- a/src/themes/purplehaze/theme.css +++ b/src/themes/purplehaze/theme.css @@ -547,7 +547,7 @@ a[data-role=button] { color: #4285f4; } -.shuffleButton-active { +.shuffleQueue-active { color: #4285f4 !important; } diff --git a/src/themes/wmc/theme.css b/src/themes/wmc/theme.css index a62d38297e..7def8215fe 100644 --- a/src/themes/wmc/theme.css +++ b/src/themes/wmc/theme.css @@ -430,7 +430,7 @@ html { color: #4285f4; } -.shuffleButton-active { +.shuffleQueue-active { color: #4285f4 !important; }