From a1c40bd8a846914c94f4ebdf9a33705eee857bc3 Mon Sep 17 00:00:00 2001 From: samuel9554 Date: Thu, 16 Apr 2020 15:45:32 -0400 Subject: [PATCH] As requested by @MrTimscampi + theme adjustement --- src/components/nowplayingbar/nowplayingbar.js | 7 +++--- .../remotecontrol/remotecontrol.css | 19 +++++++++++---- src/components/remotecontrol/remotecontrol.js | 24 ++++++++++--------- src/nowplaying.html | 9 ++++--- src/themes/appletv/theme.css | 4 +++- src/themes/blueradiance/theme.css | 2 ++ src/themes/dark/theme.css | 2 ++ src/themes/light/theme.css | 4 +++- src/themes/purplehaze/theme.css | 2 ++ src/themes/wmc/theme.css | 4 +++- 10 files changed, 51 insertions(+), 26 deletions(-) diff --git a/src/components/nowplayingbar/nowplayingbar.js b/src/components/nowplayingbar/nowplayingbar.js index 3308ad252a..a3839a9342 100644 --- a/src/components/nowplayingbar/nowplayingbar.js +++ b/src/components/nowplayingbar/nowplayingbar.js @@ -439,7 +439,7 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader', text = itemHelper.getDisplayName(item); } - return '' + text + ''; + return `${text}`; } function seriesImageUrl(item, options) { @@ -522,10 +522,11 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader', var cssClass = nowPlayingName.secondary ? ' class="nowPlayingBarSecondaryText"' : ''; if (nowPlayingName.item) { - return '' + getTextActionButton(nowPlayingName.item, nowPlayingName.text) + ''; + var nowPlayingText = getTextActionButton(nowPlayingName.item, nowPlayingName.text); + return `
${nowPlayingText}
`; } - return '' + nowPlayingName.text + ''; + return `
${nowPlayingText}
`; }).join(''); diff --git a/src/components/remotecontrol/remotecontrol.css b/src/components/remotecontrol/remotecontrol.css index 08192cae05..21342bff73 100644 --- a/src/components/remotecontrol/remotecontrol.css +++ b/src/components/remotecontrol/remotecontrol.css @@ -40,6 +40,7 @@ .nowPlayingArtist a { font-weight: normal; text-align: left !important; + color: inherit !important; } .nowPlayingButtonsContainer { @@ -143,6 +144,10 @@ padding: 1.5em 0; } +.contextMenuList a { + color: inherit !important; +} + .contextMenuList i.listItemIcon { font-size: x-large; } @@ -295,6 +300,7 @@ .btnPlayPause { padding: 0; margin: 0; + font-size: 1.7em; } .btnPlayPause:hover { @@ -332,7 +338,8 @@ display: inline-block; left: 0; right: 0; - background: #202020; + + /* background: #202020; */ z-index: 1000; } @@ -344,7 +351,8 @@ right: 0; padding-left: 7.3%; padding-right: 7.3%; - background-color: #101010; + + /* background-color: #101010; */ } .playlistSectionButton .btnTogglePlaylist { @@ -486,6 +494,7 @@ .btnPlayPause { padding: 0; margin: 0; + font-size: 1.7em; } .btnPlayPause:hover { @@ -523,7 +532,8 @@ display: inline-block; left: 0; right: 0; - background: #202020; + + /* background: #202020; */ z-index: 1000; } @@ -535,7 +545,8 @@ right: 0; padding-left: 4.3%; padding-right: 4.3%; - background-color: #101010; + + /* background-color: #101010; */ } .playlistSectionButton .btnTogglePlaylist { diff --git a/src/components/remotecontrol/remotecontrol.js b/src/components/remotecontrol/remotecontrol.js index 88f7d4e919..a4f04ef413 100644 --- a/src/components/remotecontrol/remotecontrol.js +++ b/src/components/remotecontrol/remotecontrol.js @@ -113,8 +113,8 @@ define(["browser", "datetime", "backdrop", "libraryBrowser", "listView", "imageL function updateNowPlayingInfo(context, state, serverId) { var item = state.NowPlayingItem; var displayName = item ? getNowPlayingNameHtml(item).replace("
", " - ") : ""; - console.debug(JSON.stringify(item, null, 4)); - if (typeof item != 'undefined') { + 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) { @@ -122,10 +122,10 @@ define(["browser", "datetime", "backdrop", "libraryBrowser", "listView", "imageL var artistName; if (item.ArtistItems != null) { artistName = item.ArtistItems[0].Name; - context.querySelector(".nowPlayingAlbum").innerHTML = '' + albumName + ''; - context.querySelector(".nowPlayingArtist").innerHTML = '' + artistName + ''; - context.querySelector(".contextMenuAlbum").innerHTML = 'album ' + globalize.translate("ViewAlbum") + ''; - context.querySelector(".contextMenuArtist").innerHTML = 'person ' + globalize.translate("ViewArtist") + ''; + context.querySelector(".nowPlayingAlbum").innerHTML = '${albumName}`; + context.querySelector(".nowPlayingArtist").innerHTML = '${artistName}`; + context.querySelector(".contextMenuAlbum").innerHTML = ' ` + globalize.translate("ViewAlbum") + ''; + context.querySelector(".contextMenuArtist").innerHTML = ' ` + globalize.translate("ViewArtist") + ''; } else { artistName = item.Artists; context.querySelector(".nowPlayingAlbum").innerHTML = albumName; @@ -135,13 +135,15 @@ define(["browser", "datetime", "backdrop", "libraryBrowser", "listView", "imageL context.querySelector(".nowPlayingSongName").innerHTML = songName; } else if (item.Type == "Episode") { if (item.SeasonName != null) { - context.querySelector(".nowPlayingSeason").innerHTML = '' + item.SeasonName + ''; + var seasonName = item.SeasonName; + context.querySelector(".nowPlayingSeason").innerHTML = '${seasonName}`; } if (item.SeriesName != null) { + var seriesName = item.SeriesName; if (item.SeriesId !=null) { - context.querySelector(".nowPlayingSerie").innerHTML = '' + item.SeriesName + ''; + context.querySelector(".nowPlayingSerie").innerHTML = '${seriesName}`; } else { - context.querySelector(".nowPlayingSerie").innerHTML = item.SeriesName; + context.querySelector(".nowPlayingSerie").innerHTML = seriesName; } } context.querySelector(".nowPlayingEpisode").innerHTML = item.Name; @@ -149,7 +151,7 @@ define(["browser", "datetime", "backdrop", "libraryBrowser", "listView", "imageL context.querySelector(".nowPlayingPageTitle").innerHTML = displayName; } - if (displayName.length > 0 && item.Type != "Audio") { + if (displayName.length > 0 && item.Type != "Audio" && item.Type != "Episode") { context.querySelector(".nowPlayingPageTitle").classList.remove("hide"); } else { context.querySelector(".nowPlayingPageTitle").classList.add("hide"); @@ -379,7 +381,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 ? "play_circle_filled" : "pause_circle_filled"; + btnPlayPause.querySelector("i").innerHTML = isPaused ? "" : ""; buttonVisible(btnPlayPause, isActive); } diff --git a/src/nowplaying.html b/src/nowplaying.html index a1ddcc26a7..7bfde2d9e9 100644 --- a/src/nowplaying.html +++ b/src/nowplaying.html @@ -163,16 +163,15 @@
-
-
-
+
+
diff --git a/src/themes/appletv/theme.css b/src/themes/appletv/theme.css index 5ca517bea5..6a91dcf8cf 100644 --- a/src/themes/appletv/theme.css +++ b/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%; diff --git a/src/themes/blueradiance/theme.css b/src/themes/blueradiance/theme.css index b929c2a296..d7c47b1a2c 100644 --- a/src/themes/blueradiance/theme.css +++ b/src/themes/blueradiance/theme.css @@ -42,6 +42,8 @@ html { } .dialog, +.nowPlayingPlaylist, +.nowPlayingContextMenu, html { background-color: #033361; } diff --git a/src/themes/dark/theme.css b/src/themes/dark/theme.css index 4363be991b..291a0b8b55 100644 --- a/src/themes/dark/theme.css +++ b/src/themes/dark/theme.css @@ -36,6 +36,8 @@ html { .backgroundContainer, .dialog, +.nowPlayingPlaylist, +.nowPlayingContextMenu, html { background-color: #101010; } diff --git a/src/themes/light/theme.css b/src/themes/light/theme.css index d84a1c3b67..ad9695c6ee 100644 --- a/src/themes/light/theme.css +++ b/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; } diff --git a/src/themes/purplehaze/theme.css b/src/themes/purplehaze/theme.css index 45f43abc2f..f01c0c6405 100644 --- a/src/themes/purplehaze/theme.css +++ b/src/themes/purplehaze/theme.css @@ -37,6 +37,8 @@ html { } .dialog, +.nowPlayingPlaylist, +.nowPlayingContextMenu, html { background-color: #230c33; } diff --git a/src/themes/wmc/theme.css b/src/themes/wmc/theme.css index 6143b7fe2c..2cdae4dd2e 100644 --- a/src/themes/wmc/theme.css +++ b/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);