From b1af60a0c3d2eea67e93151c726ccf1a07026005 Mon Sep 17 00:00:00 2001 From: Samuel Date: Thu, 9 Apr 2020 19:14:49 -0400 Subject: [PATCH 01/30] Update nowplaying.html --- src/nowplaying.html | 125 +++++++++++++++++++++++++------------------- 1 file changed, 71 insertions(+), 54 deletions(-) diff --git a/src/nowplaying.html b/src/nowplaying.html index 59b6a4b789..1d81f69ef5 100644 --- a/src/nowplaying.html +++ b/src/nowplaying.html @@ -1,57 +1,71 @@ -
+
+ +
-

- -
- +
+

+
+
+
+
+
+
+ +
+
+
+ +
+
+
+ +
+ +
+ + + + -
- + - + - - - - - - - - - - - - -
-
-
/
-
+ + + +
+ + + + +
-
+
@@ -120,8 +134,6 @@
-
-
@@ -155,21 +167,26 @@
- -
-
-

${TabPlaylist}

- + +
-
+
+
+
+
+
+
-
-
-
-
From d3d34eec731c171850153ad427f60371cb0b6bc2 Mon Sep 17 00:00:00 2001 From: Samuel Date: Thu, 9 Apr 2020 19:15:27 -0400 Subject: [PATCH 02/30] Update remotecontrol.css --- .../remotecontrol/remotecontrol.css | 276 +++++++++++++++--- 1 file changed, 240 insertions(+), 36 deletions(-) diff --git a/src/components/remotecontrol/remotecontrol.css b/src/components/remotecontrol/remotecontrol.css index 83a1c48e5f..55ed615072 100644 --- a/src/components/remotecontrol/remotecontrol.css +++ b/src/components/remotecontrol/remotecontrol.css @@ -36,8 +36,32 @@ margin: 0 0 0.5em 0.5em; } +.nowPlayingAlbum a { + font-weight: normal; +} + +.nowPlayingArtist a { + font-weight: normal; +} + +.nowPlayingButtonsContainer { + display: flex; +} + +.nowPlayingInfoContainerMedia { + text-align: left; + margin-bottom: 1em; +} + +.nowPlayingPositionSlider { + width: -moz-available; /* Mozilla-based browsers will ignore this. */ + width: -webkit-fill-available; /* Mozilla-based browsers will ignore this. */ + width: fill-available; +} + .nowPlayingPositionSliderContainer { - margin: 0.7em 0 0.7em 1em; + margin: 0.2em 1em 0.2em 1em; + width: 100%; } .nowPlayingInfoButtons { @@ -60,16 +84,43 @@ .nowPlayingPageImageContainer { width: 20%; - margin-right: 0.25em; + margin-right: 1em; position: relative; -webkit-flex-shrink: 0; flex-shrink: 0; } -@media all and (min-width: 50em) { +.nowPlayingPageImageContainerNoAlbum { + width: 100%; + position: relative; + background-color: #5ccea9; +} + +.nowPlayingPageImageContainerNoAlbum:after { + content: ""; + display: block; + padding-bottom: 100%; +} + +.btnPlayPause { + font-size: xx-large; + padding: 0; + margin: 0; +} + +@media all and (min-width: 27em) { .nowPlayingPageImageContainer { width: 16%; } + + .nowPlayingPageUserDataButtonsTitle { + display: none !important; + } + + .nowPlayingPageImage { + margin: 0 auto; + width: 100%; + } } .nowPlayingInfoControls { @@ -87,10 +138,11 @@ } .nowPlayingPageImage { + display: block; bottom: 0; left: 0; right: 0; - width: 100%; + /* width: 100%; */ -webkit-box-shadow: 0 0 1.9vh #000; box-shadow: 0 0 1.9vh #000; border: 0.1em solid #222; @@ -102,7 +154,24 @@ -ms-user-select: none; } -@media all and (orientation: portrait) and (max-width: 50em) { +.contextMenuList { + padding: 1.5em 0; +} + +.contextMenuList i.listItemIcon { + font-size: x-large; +} + +@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; @@ -111,43 +180,182 @@ -webkit-box-align: center; -webkit-align-items: center; align-items: center; + width: 100%; + flex-flow: column; + height: calc(100% - 4.2em); } .nowPlayingPageTitle { - text-align: center; - margin: 0.5em 0 0.75em; + /* text-align: center; */ + margin: 0; + } + + .nowPlayingInfoContainerMedia { + text-align: left !important; + width: 80%; } .nowPlayingPositionSliderContainer { - margin: 0.7em 1em; + 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: auto; - margin-right: 0; + width: 100%; + margin: auto auto; } - + + .nowPlayingPageImageContainerNoAlbum .cardImageContainer .cardImageIcon { + font-size: 15em; + color: inherit; + } + .nowPlayingInfoControls { - margin-top: 1em; - max-width: 100%; + margin: 1em 0 1em 0; + width: 100%; + -webkit-box-pack: start !important; + -webkit-justify-content: start !important; + justify-content: start !important; + } + + .nowPlayingSecondaryButtons { + /* margin: 1em 0 1em 0; */ + } + + .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:hover { + background-color: transparent !important; } .nowPlayingPageImage { - width: auto; - height: 36vh; + /* width: inherit; */ + overflow-y: hidden; + overflow: hidden; + margin: 0 auto; } -} - -@media all and (orientation: portrait) and (max-width: 40em) { - .nowPlayingPageImage { - height: 30vh; + + .nowPlayingPageImage.nowPlayingPageImageAudio { + width: 100%; } + + .nowPlayingPageImageContainer.nowPlayingPageImagePoster { + height: 50%; + } + + .nowPlayingPageImageContainer.nowPlayingPageImagePoster img{ + height: 100%; + } + + #nowPlayingPage .playlistSection { + + } + + #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; + background: #202020; + z-index: 1000; + } + + .playlistSectionButton { + position: fixed; + bottom: 0; + left: 0; + height: 4.2em; + right: 0; + padding-left: 7.3%; + padding-right: 7.3%; + background-color: #101010; + } + + .btnPlayPause { + padding: 0; + margin: 0; + } + + .playlistSectionButton .btnTooglePlaylist { + 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 .btnToogleContextMenu { + 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; + } + + .remoteControlSection { + margin: 4.2em 0 0 0; + } + } .nowPlayingTime { @@ -172,7 +380,7 @@ justify-content: center; } -@media all and (min-width: 50em) { +@media all and (min-width: 47em) { .nowPlayingSecondaryButtons { -webkit-box-flex: 1; -webkit-flex-grow: 1; @@ -181,6 +389,7 @@ -webkit-justify-content: flex-end; justify-content: flex-end; } + } @media all and (min-width: 80em) { @@ -214,26 +423,21 @@ width: 9em; } -@media all and (max-width: 50em) { - .nowPlayingInfoButtons .nowPlayingPageUserDataButtons { +@media all and (max-width: 47em) { + .nowPlayingSecondaryButtons .nowPlayingPageUserDataButtons, + .nowPlayingSecondaryButtons .repeatToggleButton, + .nowPlayingInfoButtons .playlist .listItemMediaInfo, + .nowPlayingInfoButtons .btnStop { display: none !important; } .navigationSection .collapseContent i { 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; + + .nowPlayingButtonsContainer { + display: block; + height: 100%; } + } From 567b80502382e6bb6cb6ea805693aa8211f1a2cc Mon Sep 17 00:00:00 2001 From: Samuel Date: Thu, 9 Apr 2020 19:15:49 -0400 Subject: [PATCH 03/30] Update remotecontrol.js --- src/components/remotecontrol/remotecontrol.js | 76 ++++++++++++++++--- 1 file changed, 64 insertions(+), 12 deletions(-) diff --git a/src/components/remotecontrol/remotecontrol.js b/src/components/remotecontrol/remotecontrol.js index 7b620d536a..1149440264 100644 --- a/src/components/remotecontrol/remotecontrol.js +++ b/src/components/remotecontrol/remotecontrol.js @@ -110,31 +110,54 @@ 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("
", " - ") : ""; - context.querySelector(".nowPlayingPageTitle").innerHTML = displayName; + console.debug(JSON.stringify(item, null, 4)); + //alert(item.Artists); + if(item.Type == "Audio" || item.MediaStreams[0].Type == "Audio"){ + var songName = item.Name; + if(item.Album != null && (item.Artists != null)) { + var albumName = item.Album; + if(item.ArtistItems != null) { + var artistName = item.ArtistItems[0].Name; + context.querySelector(".nowPlayingAlbum").innerHTML = '' + albumName + ''; + context.querySelector(".nowPlayingArtist").innerHTML = '' + artistName + ''; + context.querySelector(".contextMenuAlbum").innerHTML = 'album View album'; + context.querySelector(".contextMenuArtist").innerHTML = 'person View artist'; + } else { + context.querySelector(".nowPlayingAlbum").innerHTML = albumName; + var artistName = item.Artists; + context.querySelector(".nowPlayingArtist").innerHTML = artistName; + } + + } + context.querySelector(".nowPlayingSongName").innerHTML = songName; + } else { + context.querySelector(".nowPlayingPageTitle").innerHTML = displayName; + } - if (displayName.length > 0) { + if (displayName.length > 0 && item.Type != "Audio") { context.querySelector(".nowPlayingPageTitle").classList.remove("hide"); } else { context.querySelector(".nowPlayingPageTitle").classList.add("hide"); } var url = item ? seriesImageUrl(item, { - maxHeight: 300 * 2 + maxHeight: 300 }) || imageUrl(item, { - maxHeight: 300 * 2 + maxHeight: 300 }) : null; console.debug("updateNowPlayingInfo"); - setImageUrl(context, url); + setImageUrl(context, state, url); if (item) { backdrop.setBackdrops([item]); var apiClient = connectionManager.getApiClient(item.ServerId); apiClient.getItem(apiClient.getCurrentUserId(), item.Id).then(function (fullItem) { var userData = fullItem.UserData || {}; var likes = null == userData.Likes ? "" : userData.Likes; + context.querySelector(".nowPlayingPageUserDataButtonsTitle").innerHTML = ''; context.querySelector(".nowPlayingPageUserDataButtons").innerHTML = ''; }); } else { @@ -143,17 +166,24 @@ define(["browser", "datetime", "backdrop", "libraryBrowser", "listView", "imageL } } - function setImageUrl(context, url) { + function setImageUrl(context, state, url) { currentImgUrl = url; + var item = state.NowPlayingItem; var imgContainer = context.querySelector(".nowPlayingPageImageContainer"); if (url) { imgContainer.innerHTML = ''; - 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 = ""; + imgContainer.innerHTML = '
'; } + } function buttonVisible(btn, enabled) { @@ -331,7 +361,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 ? "" : "pause"; + btnPlayPause.querySelector("i").innerHTML = isPaused ? "play_circle_filled" : "pause_circle_filled"; buttonVisible(btnPlayPause, isActive); } @@ -393,6 +423,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"); }); } @@ -647,7 +680,26 @@ define(["browser", "datetime", "backdrop", "libraryBrowser", "listView", "imageL var playlistItemId = e.detail.playlistItemId; playbackManager.movePlaylistItem(playlistItemId, newIndex, currentPlayer); }); - context.querySelector(".btnSavePlaylist").addEventListener("click", savePlaylist); + //context.querySelector(".btnSavePlaylist").addEventListener("click", savePlaylist); + context.querySelector(".btnTooglePlaylist").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"); + } else { + context.querySelector(".playlist").classList.add("hide"); + context.querySelector(".btnSavePlaylist").classList.add("hide"); + } + }); + context.querySelector(".btnToogleContextMenu").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() { From 6619da9ba5324b01ecd79653dae566cce9681364 Mon Sep 17 00:00:00 2001 From: Samuel Date: Thu, 9 Apr 2020 22:07:52 -0400 Subject: [PATCH 04/30] Update remotecontrol.js --- src/components/remotecontrol/remotecontrol.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/components/remotecontrol/remotecontrol.js b/src/components/remotecontrol/remotecontrol.js index 1149440264..6f9e12cb2d 100644 --- a/src/components/remotecontrol/remotecontrol.js +++ b/src/components/remotecontrol/remotecontrol.js @@ -114,7 +114,6 @@ define(["browser", "datetime", "backdrop", "libraryBrowser", "listView", "imageL var item = state.NowPlayingItem; var displayName = item ? getNowPlayingNameHtml(item).replace("
", " - ") : ""; console.debug(JSON.stringify(item, null, 4)); - //alert(item.Artists); if(item.Type == "Audio" || item.MediaStreams[0].Type == "Audio"){ var songName = item.Name; if(item.Album != null && (item.Artists != null)) { @@ -680,7 +679,6 @@ define(["browser", "datetime", "backdrop", "libraryBrowser", "listView", "imageL var playlistItemId = e.detail.playlistItemId; playbackManager.movePlaylistItem(playlistItemId, newIndex, currentPlayer); }); - //context.querySelector(".btnSavePlaylist").addEventListener("click", savePlaylist); context.querySelector(".btnTooglePlaylist").addEventListener("click", function () { if(context.querySelector(".playlist").classList.contains("hide")) { context.querySelector(".playlist").classList.remove("hide"); From c200abb058607b99ed055f96cc6e79d3993bd380 Mon Sep 17 00:00:00 2001 From: Samuel Date: Thu, 9 Apr 2020 22:27:55 -0400 Subject: [PATCH 05/30] Update remotecontrol.js --- src/components/remotecontrol/remotecontrol.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/remotecontrol/remotecontrol.js b/src/components/remotecontrol/remotecontrol.js index 6f9e12cb2d..c4fb0c0984 100644 --- a/src/components/remotecontrol/remotecontrol.js +++ b/src/components/remotecontrol/remotecontrol.js @@ -118,15 +118,16 @@ define(["browser", "datetime", "backdrop", "libraryBrowser", "listView", "imageL var songName = item.Name; if(item.Album != null && (item.Artists != null)) { var albumName = item.Album; + var artistName; if(item.ArtistItems != null) { - var artistName = item.ArtistItems[0].Name; + artistName = item.ArtistItems[0].Name; context.querySelector(".nowPlayingAlbum").innerHTML = '' + albumName + ''; context.querySelector(".nowPlayingArtist").innerHTML = '' + artistName + ''; context.querySelector(".contextMenuAlbum").innerHTML = 'album View album'; context.querySelector(".contextMenuArtist").innerHTML = 'person View artist'; } else { context.querySelector(".nowPlayingAlbum").innerHTML = albumName; - var artistName = item.Artists; + artistName = item.Artists; context.querySelector(".nowPlayingArtist").innerHTML = artistName; } From 04d3dcdd55e5402fa53035a291fe720d5afb04c2 Mon Sep 17 00:00:00 2001 From: Samuel Date: Thu, 9 Apr 2020 22:33:58 -0400 Subject: [PATCH 06/30] Update remotecontrol.js --- src/components/remotecontrol/remotecontrol.js | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/src/components/remotecontrol/remotecontrol.js b/src/components/remotecontrol/remotecontrol.js index c4fb0c0984..8e4a1760b8 100644 --- a/src/components/remotecontrol/remotecontrol.js +++ b/src/components/remotecontrol/remotecontrol.js @@ -114,12 +114,12 @@ define(["browser", "datetime", "backdrop", "libraryBrowser", "listView", "imageL var item = state.NowPlayingItem; var displayName = item ? getNowPlayingNameHtml(item).replace("
", " - ") : ""; console.debug(JSON.stringify(item, null, 4)); - if(item.Type == "Audio" || item.MediaStreams[0].Type == "Audio"){ + if (item.Type == "Audio" || item.MediaStreams[0].Type == "Audio") { var songName = item.Name; - if(item.Album != null && (item.Artists != null)) { + if (item.Album != null && (item.Artists != null)) { var albumName = item.Album; var artistName; - if(item.ArtistItems != null) { + if (item.ArtistItems != null) { artistName = item.ArtistItems[0].Name; context.querySelector(".nowPlayingAlbum").innerHTML = '' + albumName + ''; context.querySelector(".nowPlayingArtist").innerHTML = '' + artistName + ''; @@ -130,7 +130,6 @@ define(["browser", "datetime", "backdrop", "libraryBrowser", "listView", "imageL artistName = item.Artists; context.querySelector(".nowPlayingArtist").innerHTML = artistName; } - } context.querySelector(".nowPlayingSongName").innerHTML = songName; } else { @@ -173,7 +172,7 @@ define(["browser", "datetime", "backdrop", "libraryBrowser", "listView", "imageL if (url) { imgContainer.innerHTML = ''; - if(item.Type == "Audio"){ + if (item.Type == "Audio") { context.querySelector(".nowPlayingPageImage").classList.add("nowPlayingPageImageAudio"); context.querySelector(".nowPlayingPageImageContainer").classList.remove("nowPlayingPageImageAudio"); } else { @@ -183,7 +182,6 @@ define(["browser", "datetime", "backdrop", "libraryBrowser", "listView", "imageL } else { imgContainer.innerHTML = '
'; } - } function buttonVisible(btn, enabled) { @@ -681,7 +679,7 @@ define(["browser", "datetime", "backdrop", "libraryBrowser", "listView", "imageL playbackManager.movePlaylistItem(playlistItemId, newIndex, currentPlayer); }); context.querySelector(".btnTooglePlaylist").addEventListener("click", function () { - if(context.querySelector(".playlist").classList.contains("hide")) { + 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"); @@ -691,7 +689,7 @@ define(["browser", "datetime", "backdrop", "libraryBrowser", "listView", "imageL } }); context.querySelector(".btnToogleContextMenu").addEventListener("click", function () { - if(context.querySelector(".contextMenu").classList.contains("hide")) { + 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"); From d3a27baf4552f09de515e443b00967554f0205a8 Mon Sep 17 00:00:00 2001 From: Samuel Date: Thu, 9 Apr 2020 22:52:46 -0400 Subject: [PATCH 07/30] Update remotecontrol.css --- .../remotecontrol/remotecontrol.css | 80 +++++++++---------- 1 file changed, 36 insertions(+), 44 deletions(-) diff --git a/src/components/remotecontrol/remotecontrol.css b/src/components/remotecontrol/remotecontrol.css index 55ed615072..f64cc162ef 100644 --- a/src/components/remotecontrol/remotecontrol.css +++ b/src/components/remotecontrol/remotecontrol.css @@ -96,7 +96,7 @@ background-color: #5ccea9; } -.nowPlayingPageImageContainerNoAlbum:after { +.nowPlayingPageImageContainerNoAlbum::after { content: ""; display: block; padding-bottom: 100%; @@ -112,11 +112,11 @@ .nowPlayingPageImageContainer { width: 16%; } - + .nowPlayingPageUserDataButtonsTitle { display: none !important; } - + .nowPlayingPageImage { margin: 0 auto; width: 100%; @@ -142,7 +142,6 @@ bottom: 0; left: 0; right: 0; - /* width: 100%; */ -webkit-box-shadow: 0 0 1.9vh #000; box-shadow: 0 0 1.9vh #000; border: 0.1em solid #222; @@ -163,7 +162,7 @@ } @media all and (orientation: portrait) and (max-width: 47em) { - + .remoteControlContent { padding-left: 7.3% !important; padding-right: 7.3% !important; @@ -171,7 +170,7 @@ height: 100%; flex-direction: column; } - + .nowPlayingInfoContainer { -webkit-box-orient: vertical !important; -webkit-box-direction: normal !important; @@ -181,7 +180,6 @@ -webkit-align-items: center; align-items: center; width: 100%; - flex-flow: column; height: calc(100% - 4.2em); } @@ -189,7 +187,7 @@ /* text-align: center; */ margin: 0; } - + .nowPlayingInfoContainerMedia { text-align: left !important; width: 80%; @@ -212,12 +210,12 @@ width: 100%; margin: auto auto; } - + .nowPlayingPageImageContainerNoAlbum .cardImageContainer .cardImageIcon { font-size: 15em; color: inherit; } - + .nowPlayingInfoControls { margin: 1em 0 1em 0; width: 100%; @@ -225,16 +223,16 @@ -webkit-justify-content: start !important; justify-content: start !important; } - + .nowPlayingSecondaryButtons { /* margin: 1em 0 1em 0; */ } - + .nowPlayingInfoControls .nowPlayingPageUserDataButtonsTitle { width: 20%; font-size: large; } - + .nowPlayingInfoControls .nowPlayingPageUserDataButtonsTitle button { padding-top: 0; padding-right: 0; @@ -242,28 +240,33 @@ float: right; border-radius: 0; } - + .nowPlayingInfoButtons .btnRewind { position: absolute; left: 0; margin-left: 0; padding-left: 7.3%; - font-size: smaller + font-size: smaller; } - + .nowPlayingInfoButtons .btnFastForward { position: absolute; right: 0; margin-right: 0; padding-right: 7.3%; - font-size: smaller + font-size: smaller; } - + .paper-icon-button-light:hover { color: #fff !important; background-color: transparent !important; } - + + .btnPlayPause { + padding: 0; + margin: 0; + } + .btnPlayPause:hover { background-color: transparent !important; } @@ -274,25 +277,21 @@ overflow: hidden; margin: 0 auto; } - + .nowPlayingPageImage.nowPlayingPageImageAudio { width: 100%; } - + .nowPlayingPageImageContainer.nowPlayingPageImagePoster { height: 50%; } - - .nowPlayingPageImageContainer.nowPlayingPageImagePoster img{ + + .nowPlayingPageImageContainer.nowPlayingPageImagePoster img { height: 100%; } - - #nowPlayingPage .playlistSection { - - } - + #nowPlayingPage .playlistSection .playlist, - #nowPlayingPage .playlistSection .contextMenu { + #nowPlayingPage .playlistSection .contextMenu { position: absolute; top: 12.2em; bottom: 4.2em; @@ -304,7 +303,7 @@ background: #202020; z-index: 1000; } - + .playlistSectionButton { position: fixed; bottom: 0; @@ -315,18 +314,13 @@ padding-right: 7.3%; background-color: #101010; } - - .btnPlayPause { - padding: 0; - margin: 0; - } - + .playlistSectionButton .btnTooglePlaylist { font-size: larger; margin: 0; padding-left: 0; } - + .playlistSectionButton .btnSavePlaylist { margin: 0; padding-right: 0; @@ -338,7 +332,7 @@ justify-content: flex-end; border-radius: 0; } - + .playlistSectionButton .btnToogleContextMenu { font-size: larger; margin: 0; @@ -351,11 +345,11 @@ justify-content: flex-end; border-radius: 0; } - + .remoteControlSection { margin: 4.2em 0 0 0; } - + } .nowPlayingTime { @@ -381,7 +375,7 @@ } @media all and (min-width: 47em) { - .nowPlayingSecondaryButtons { + .nowPlayingSecondaryButtons { -webkit-box-flex: 1; -webkit-flex-grow: 1; flex-grow: 1; @@ -389,7 +383,6 @@ -webkit-justify-content: flex-end; justify-content: flex-end; } - } @media all and (min-width: 80em) { @@ -434,10 +427,9 @@ .navigationSection .collapseContent i { font-size: 4em; } - + .nowPlayingButtonsContainer { display: block; height: 100%; } - } From 281b51b967929815ece99ea697c1d3067bfdd8b9 Mon Sep 17 00:00:00 2001 From: Samuel Date: Thu, 9 Apr 2020 22:56:14 -0400 Subject: [PATCH 08/30] Update remotecontrol.css --- src/components/remotecontrol/remotecontrol.css | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/components/remotecontrol/remotecontrol.css b/src/components/remotecontrol/remotecontrol.css index f64cc162ef..70c89b7f87 100644 --- a/src/components/remotecontrol/remotecontrol.css +++ b/src/components/remotecontrol/remotecontrol.css @@ -162,7 +162,6 @@ } @media all and (orientation: portrait) and (max-width: 47em) { - .remoteControlContent { padding-left: 7.3% !important; padding-right: 7.3% !important; @@ -262,7 +261,7 @@ background-color: transparent !important; } - .btnPlayPause { + .btnPlayPause { padding: 0; margin: 0; } @@ -349,7 +348,6 @@ .remoteControlSection { margin: 4.2em 0 0 0; } - } .nowPlayingTime { @@ -375,7 +373,7 @@ } @media all and (min-width: 47em) { - .nowPlayingSecondaryButtons { + .nowPlayingSecondaryButtons { -webkit-box-flex: 1; -webkit-flex-grow: 1; flex-grow: 1; From 6724e2f2fd0a108c7312d261aee03f522862fe59 Mon Sep 17 00:00:00 2001 From: ferferga Date: Fri, 10 Apr 2020 15:51:05 +0200 Subject: [PATCH 09/30] Rename class and use flex class instead of style --- src/components/remotecontrol/remotecontrol.css | 4 ++-- src/components/remotecontrol/remotecontrol.js | 4 ++-- src/nowplaying.html | 8 ++++---- 3 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/components/remotecontrol/remotecontrol.css b/src/components/remotecontrol/remotecontrol.css index 70c89b7f87..0f271fcb07 100644 --- a/src/components/remotecontrol/remotecontrol.css +++ b/src/components/remotecontrol/remotecontrol.css @@ -314,7 +314,7 @@ background-color: #101010; } - .playlistSectionButton .btnTooglePlaylist { + .playlistSectionButton .btnTogglePlaylist { font-size: larger; margin: 0; padding-left: 0; @@ -332,7 +332,7 @@ border-radius: 0; } - .playlistSectionButton .btnToogleContextMenu { + .playlistSectionButton .btnToggleContextMenu { font-size: larger; margin: 0; padding-right: 0; diff --git a/src/components/remotecontrol/remotecontrol.js b/src/components/remotecontrol/remotecontrol.js index 8e4a1760b8..2563594900 100644 --- a/src/components/remotecontrol/remotecontrol.js +++ b/src/components/remotecontrol/remotecontrol.js @@ -678,7 +678,7 @@ define(["browser", "datetime", "backdrop", "libraryBrowser", "listView", "imageL var playlistItemId = e.detail.playlistItemId; playbackManager.movePlaylistItem(playlistItemId, newIndex, currentPlayer); }); - context.querySelector(".btnTooglePlaylist").addEventListener("click", function () { + 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"); @@ -688,7 +688,7 @@ define(["browser", "datetime", "backdrop", "libraryBrowser", "listView", "imageL context.querySelector(".btnSavePlaylist").classList.add("hide"); } }); - context.querySelector(".btnToogleContextMenu").addEventListener("click", function () { + 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"); diff --git a/src/nowplaying.html b/src/nowplaying.html index 1d81f69ef5..625c051163 100644 --- a/src/nowplaying.html +++ b/src/nowplaying.html @@ -6,7 +6,7 @@
-
+

@@ -18,7 +18,7 @@
-
+
@@ -170,13 +170,13 @@
- -
From 9993f336c2403c15184245f886365d424425da40 Mon Sep 17 00:00:00 2001 From: ferferga Date: Fri, 10 Apr 2020 18:17:57 +0200 Subject: [PATCH 10/30] Removed links in miniplayer and add context menu --- src/components/itemcontextmenu.js | 2 +- src/components/nowplayingbar/nowplayingbar.js | 33 +++++++++++-------- 2 files changed, 21 insertions(+), 14 deletions(-) diff --git a/src/components/itemcontextmenu.js b/src/components/itemcontextmenu.js index bdbcfc782b..2bdd37c98a 100644 --- a/src/components/itemcontextmenu.js +++ b/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", diff --git a/src/components/nowplayingbar/nowplayingbar.js b/src/components/nowplayingbar/nowplayingbar.js index 8da9b9c053..e02cb87716 100644 --- a/src/components/nowplayingbar/nowplayingbar.js +++ b/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; @@ -67,6 +67,7 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader', html += ''; html += ''; + html += ''; html += '
'; html += '
'; @@ -449,17 +450,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 = ''; - - return html; + return '' + text + ''; } function seriesImageUrl(item, options) { @@ -537,13 +534,12 @@ 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 '' + getTextActionButton(nowPlayingName.item, nowPlayingName.text, serverId) + '
'; + return '' + getTextActionButton(nowPlayingName.item, nowPlayingName.text) + '
'; } return '' + nowPlayingName.text + '
'; @@ -575,15 +571,26 @@ 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, + playlist: false, + positionTo: contextButton + }; nowPlayingUserData.innerHTML = ''; + apiClient.getCurrentUser().then(function(user) { + contextButton.addEventListener('click', function () { + itemContextMenu.show(Object.assign({ + item: item, + user: user + }, options )); + }); + }); }); - } } else { nowPlayingUserData.innerHTML = ''; From d82c379cbbdbfaccb95fd6125881fdb6ecf8e754 Mon Sep 17 00:00:00 2001 From: ferferga Date: Fri, 10 Apr 2020 18:28:01 +0200 Subject: [PATCH 11/30] Fix clickable area --- src/components/nowplayingbar/nowplayingbar.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/nowplayingbar/nowplayingbar.js b/src/components/nowplayingbar/nowplayingbar.js index e02cb87716..d9f1ba9a5c 100644 --- a/src/components/nowplayingbar/nowplayingbar.js +++ b/src/components/nowplayingbar/nowplayingbar.js @@ -240,8 +240,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(0); } }); From 34cea7120b77de6c3a5adf7fecf15e5e7056105e Mon Sep 17 00:00:00 2001 From: ferferga Date: Fri, 10 Apr 2020 18:50:00 +0200 Subject: [PATCH 12/30] Removed playlist button and added back "add to playlist" in context menu --- src/components/nowplayingbar/nowplayingbar.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/components/nowplayingbar/nowplayingbar.js b/src/components/nowplayingbar/nowplayingbar.js index d9f1ba9a5c..25e25f2d31 100644 --- a/src/components/nowplayingbar/nowplayingbar.js +++ b/src/components/nowplayingbar/nowplayingbar.js @@ -66,7 +66,6 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader', html += '
'; html += ''; - html += ''; html += ''; html += '
'; @@ -156,8 +155,6 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader', } }); - elem.querySelector('.remoteControlButton').addEventListener('click', showRemoteControl); - toggleRepeatButton = elem.querySelector('.toggleRepeatButton'); toggleRepeatButton.addEventListener('click', function () { @@ -577,7 +574,6 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader', var options = { play: false, queue: false, - playlist: false, positionTo: contextButton }; nowPlayingUserData.innerHTML = ''; From 5926b1cb9b2b4f3e17d60da0203e07194766d10d Mon Sep 17 00:00:00 2001 From: Samuel Date: Fri, 10 Apr 2020 12:59:01 -0400 Subject: [PATCH 13/30] Update nowplaying.html Add Tv show Support --- src/nowplaying.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/nowplaying.html b/src/nowplaying.html index 625c051163..74ce0f92ec 100644 --- a/src/nowplaying.html +++ b/src/nowplaying.html @@ -10,9 +10,9 @@

-
-
-
+
+
+
From c3354a36e31a4105970bd7948e378862c6579759 Mon Sep 17 00:00:00 2001 From: Samuel Date: Fri, 10 Apr 2020 13:02:39 -0400 Subject: [PATCH 14/30] Hide overflow on Image when landscape image --- src/components/remotecontrol/remotecontrol.css | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/remotecontrol/remotecontrol.css b/src/components/remotecontrol/remotecontrol.css index 0f271fcb07..bc1929f58d 100644 --- a/src/components/remotecontrol/remotecontrol.css +++ b/src/components/remotecontrol/remotecontrol.css @@ -207,7 +207,7 @@ .nowPlayingPageImageContainer { width: 100%; - margin: auto auto; + margin: auto auto 0.5em; } .nowPlayingPageImageContainerNoAlbum .cardImageContainer .cardImageIcon { @@ -216,7 +216,7 @@ } .nowPlayingInfoControls { - margin: 1em 0 1em 0; + margin: 0.5em 0 1em 0; width: 100%; -webkit-box-pack: start !important; -webkit-justify-content: start !important; @@ -283,6 +283,7 @@ .nowPlayingPageImageContainer.nowPlayingPageImagePoster { height: 50%; + overflow: hidden; } .nowPlayingPageImageContainer.nowPlayingPageImagePoster img { From 811a809e1bc1e75503de850ae13395b02a342e4e Mon Sep 17 00:00:00 2001 From: Samuel Date: Fri, 10 Apr 2020 13:06:26 -0400 Subject: [PATCH 15/30] Add support for Tv show --- src/components/remotecontrol/remotecontrol.js | 26 ++++++++++++++----- 1 file changed, 19 insertions(+), 7 deletions(-) diff --git a/src/components/remotecontrol/remotecontrol.js b/src/components/remotecontrol/remotecontrol.js index 2563594900..f2eba7cad9 100644 --- a/src/components/remotecontrol/remotecontrol.js +++ b/src/components/remotecontrol/remotecontrol.js @@ -116,23 +116,35 @@ define(["browser", "datetime", "backdrop", "libraryBrowser", "listView", "imageL console.debug(JSON.stringify(item, null, 4)); if (item.Type == "Audio" || item.MediaStreams[0].Type == "Audio") { var songName = item.Name; - if (item.Album != null && (item.Artists != null)) { + 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 = '' + albumName + ''; context.querySelector(".nowPlayingArtist").innerHTML = '' + artistName + ''; - context.querySelector(".contextMenuAlbum").innerHTML = 'album View album'; - context.querySelector(".contextMenuArtist").innerHTML = 'person View artist'; + context.querySelector(".contextMenuAlbum").innerHTML = 'album ' + globalize.translate("ViewAlbum") + ''; + context.querySelector(".contextMenuArtist").innerHTML = 'person ' + globalize.translate("ViewArtist") + ''; } else { - context.querySelector(".nowPlayingAlbum").innerHTML = albumName; artistName = item.Artists; + context.querySelector(".nowPlayingAlbum").innerHTML = albumName; context.querySelector(".nowPlayingArtist").innerHTML = artistName; } } context.querySelector(".nowPlayingSongName").innerHTML = songName; - } else { + } else if (item.Type == "Episode") { + if (item.SeasonName != null) { + context.querySelector(".nowPlayingSeason").innerHTML = '' + item.SeasonName + ''; + } + if (item.SeriesName != null) { + if (item.SeriesId !=null) { + context.querySelector(".nowPlayingSerie").innerHTML = '' + item.SeriesName + ''; + } else { + context.querySelector(".nowPlayingSerie").innerHTML = item.SeriesName; + } + } + context.querySelector(".nowPlayingEpisode").innerHTML = item.Name; + } else { context.querySelector(".nowPlayingPageTitle").innerHTML = displayName; } @@ -143,9 +155,9 @@ define(["browser", "datetime", "backdrop", "libraryBrowser", "listView", "imageL } var url = item ? seriesImageUrl(item, { - maxHeight: 300 + maxHeight: 300 * 2 }) || imageUrl(item, { - maxHeight: 300 + maxHeight: 300 * 2 }) : null; console.debug("updateNowPlayingInfo"); From 5f9d33fe217d7baaeeb0c19e29f03a12f1859081 Mon Sep 17 00:00:00 2001 From: Samuel Date: Fri, 10 Apr 2020 13:09:25 -0400 Subject: [PATCH 16/30] Fix lint after last commit --- src/components/remotecontrol/remotecontrol.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/remotecontrol/remotecontrol.js b/src/components/remotecontrol/remotecontrol.js index f2eba7cad9..5984b46a44 100644 --- a/src/components/remotecontrol/remotecontrol.js +++ b/src/components/remotecontrol/remotecontrol.js @@ -144,7 +144,7 @@ define(["browser", "datetime", "backdrop", "libraryBrowser", "listView", "imageL } } context.querySelector(".nowPlayingEpisode").innerHTML = item.Name; - } else { + } else { context.querySelector(".nowPlayingPageTitle").innerHTML = displayName; } From 859ec893c2e9edbb42b4d8dafd0d103f11fae5f9 Mon Sep 17 00:00:00 2001 From: Samuel Date: Fri, 10 Apr 2020 14:44:31 -0400 Subject: [PATCH 17/30] Update src/components/remotecontrol/remotecontrol.css As suggested by @ferferga Co-Authored-By: Fernando --- src/components/remotecontrol/remotecontrol.css | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/components/remotecontrol/remotecontrol.css b/src/components/remotecontrol/remotecontrol.css index bc1929f58d..11872daa66 100644 --- a/src/components/remotecontrol/remotecontrol.css +++ b/src/components/remotecontrol/remotecontrol.css @@ -54,9 +54,7 @@ } .nowPlayingPositionSlider { - width: -moz-available; /* Mozilla-based browsers will ignore this. */ - width: -webkit-fill-available; /* Mozilla-based browsers will ignore this. */ - width: fill-available; + width: stretch; } .nowPlayingPositionSliderContainer { From dbdfd25eefdb2020d1fba8c84bbe49f42221d22f Mon Sep 17 00:00:00 2001 From: Samuel Date: Fri, 10 Apr 2020 14:51:44 -0400 Subject: [PATCH 18/30] Fix text alignement of the album and artirst Fix suggested by @ferferga for the alignment of the album, artist button in the player. Artist and album text are now align on the left. --- src/components/remotecontrol/remotecontrol.css | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/components/remotecontrol/remotecontrol.css b/src/components/remotecontrol/remotecontrol.css index 11872daa66..c2254d1864 100644 --- a/src/components/remotecontrol/remotecontrol.css +++ b/src/components/remotecontrol/remotecontrol.css @@ -36,12 +36,10 @@ margin: 0 0 0.5em 0.5em; } -.nowPlayingAlbum a { - font-weight: normal; -} - +.nowPlayingAlbum a, .nowPlayingArtist a { font-weight: normal; + text-align: left !important; } .nowPlayingButtonsContainer { From c8edd2055829e44c76ae9355de75b9b8eeae5ff2 Mon Sep 17 00:00:00 2001 From: Samuel Date: Fri, 10 Apr 2020 15:51:12 -0400 Subject: [PATCH 19/30] Randomize album card color when no image Randomize album card color when no image present. Added function cardBuilder --- src/components/remotecontrol/remotecontrol.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/remotecontrol/remotecontrol.js b/src/components/remotecontrol/remotecontrol.js index 5984b46a44..0680d419c3 100644 --- a/src/components/remotecontrol/remotecontrol.js +++ b/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) { @@ -192,7 +192,7 @@ define(["browser", "datetime", "backdrop", "libraryBrowser", "listView", "imageL context.querySelector(".nowPlayingPageImage").classList.remove("nowPlayingPageImageAudio"); } } else { - imgContainer.innerHTML = '
'; + imgContainer.innerHTML = '
'; } } From e8b9a22d6439f8bf7936dc151062df8d005aa91d Mon Sep 17 00:00:00 2001 From: Samuel Date: Fri, 10 Apr 2020 16:12:45 -0400 Subject: [PATCH 20/30] EventListener for savePlaylist was removed fix Put back the EventListener for savePlaylist that I removed by accident. --- src/components/remotecontrol/remotecontrol.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/remotecontrol/remotecontrol.js b/src/components/remotecontrol/remotecontrol.js index 0680d419c3..de029d7f00 100644 --- a/src/components/remotecontrol/remotecontrol.js +++ b/src/components/remotecontrol/remotecontrol.js @@ -690,6 +690,7 @@ define(["browser", "datetime", "backdrop", "libraryBrowser", "listView", "imageL var playlistItemId = e.detail.playlistItemId; 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"); From 8651b8c177845dadbd108f07cde00e60715cbaa6 Mon Sep 17 00:00:00 2001 From: Samuel Date: Sun, 12 Apr 2020 10:50:13 -0400 Subject: [PATCH 21/30] Add support for landscape --- .../remotecontrol/remotecontrol.css | 294 ++++++++++++++---- 1 file changed, 241 insertions(+), 53 deletions(-) diff --git a/src/components/remotecontrol/remotecontrol.css b/src/components/remotecontrol/remotecontrol.css index c2254d1864..02970e5211 100644 --- a/src/components/remotecontrol/remotecontrol.css +++ b/src/components/remotecontrol/remotecontrol.css @@ -104,21 +104,6 @@ margin: 0; } -@media all and (min-width: 27em) { - .nowPlayingPageImageContainer { - width: 16%; - } - - .nowPlayingPageUserDataButtonsTitle { - display: none !important; - } - - .nowPlayingPageImage { - margin: 0 auto; - width: 100%; - } -} - .nowPlayingInfoControls { -webkit-box-flex: 1; -webkit-flex-grow: 1; @@ -157,6 +142,50 @@ font-size: x-large; } +.nowPlayingPageImageContainer { + width: 16%; +} + +.nowPlayingPageImage { + margin: 0 auto; + width: 100%; +} + +.nowPlayingSecondaryButtons { + display: -webkit-box; + display: -webkit-flex; + display: flex; + -webkit-box-align: center; + -webkit-align-items: center; + align-items: center; + -webkit-flex-wrap: wrap; + flex-wrap: wrap; + -webkit-box-pack: end; + -webkit-justify-content: flex-end; + justify-content: flex-end; +} + +@media all and (min-width: 63em) { + .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) { + .nowPlayingPageImageContainer { + margin-right: 0.75em; + } +} + @media all and (orientation: portrait) and (max-width: 47em) { .remoteControlContent { padding-left: 7.3% !important; @@ -220,7 +249,9 @@ } .nowPlayingSecondaryButtons { - /* margin: 1em 0 1em 0; */ + -webkit-box-pack: center; + -webkit-justify-content: center; + justify-content: center; } .nowPlayingInfoControls .nowPlayingPageUserDataButtonsTitle { @@ -284,6 +315,7 @@ .nowPlayingPageImageContainer.nowPlayingPageImagePoster img { height: 100%; + width: auto; } #nowPlayingPage .playlistSection .playlist, @@ -345,6 +377,198 @@ .remoteControlSection { margin: 4.2em 0 0 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; + } + + .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; + background: #202020; + z-index: 1000; + } + + .playlistSectionButton { + position: fixed; + bottom: 0; + left: 0; + height: 4.2em; + right: 0; + padding-left: 4.3%; + padding-right: 4.3%; + background-color: #101010; + } + + .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; + } + + .remoteControlSection { + margin: 4.2em 0 0 0; + } + + .nowPlayingButtonsContainer { + display: flex; + height: 100%; + flex-direction: column; + } } .nowPlayingTime { @@ -355,37 +579,6 @@ margin: 0 1em; } -.nowPlayingSecondaryButtons { - display: -webkit-box; - display: -webkit-flex; - display: flex; - -webkit-box-align: center; - -webkit-align-items: center; - align-items: center; - -webkit-flex-wrap: wrap; - flex-wrap: wrap; - -webkit-box-pack: center; - -webkit-justify-content: center; - justify-content: center; -} - -@media all and (min-width: 47em) { - .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; - } -} - -@media all and (min-width: 80em) { - .nowPlayingPageImageContainer { - margin-right: 0.75em; - } -} - .nowPlayingNavButtonContainer { width: 30em; } @@ -411,7 +604,7 @@ width: 9em; } -@media all and (max-width: 47em) { +@media all and (max-width: 63em) { .nowPlayingSecondaryButtons .nowPlayingPageUserDataButtons, .nowPlayingSecondaryButtons .repeatToggleButton, .nowPlayingInfoButtons .playlist .listItemMediaInfo, @@ -422,9 +615,4 @@ .navigationSection .collapseContent i { font-size: 4em; } - - .nowPlayingButtonsContainer { - display: block; - height: 100%; - } } From 3ab01d471fa62a645bfd241484de9ebcfbf654aa Mon Sep 17 00:00:00 2001 From: Samuel Date: Sun, 12 Apr 2020 10:55:52 -0400 Subject: [PATCH 22/30] Fix undefined item when casting to other device Fix undefined item when changing cast to other device. Removed NowPlayingAlbum because on smaller device we need more height --- src/components/remotecontrol/remotecontrol.js | 110 +++++++++--------- 1 file changed, 56 insertions(+), 54 deletions(-) diff --git a/src/components/remotecontrol/remotecontrol.js b/src/components/remotecontrol/remotecontrol.js index de029d7f00..d25f4e59e0 100644 --- a/src/components/remotecontrol/remotecontrol.js +++ b/src/components/remotecontrol/remotecontrol.js @@ -114,66 +114,68 @@ define(["browser", "datetime", "backdrop", "libraryBrowser", "listView", "imageL var item = state.NowPlayingItem; var displayName = item ? getNowPlayingNameHtml(item).replace("
", " - ") : ""; console.debug(JSON.stringify(item, null, 4)); - 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 = '' + albumName + ''; - context.querySelector(".nowPlayingArtist").innerHTML = '' + artistName + ''; - context.querySelector(".contextMenuAlbum").innerHTML = 'album ' + globalize.translate("ViewAlbum") + ''; - context.querySelector(".contextMenuArtist").innerHTML = 'person ' + globalize.translate("ViewArtist") + ''; - } else { - artistName = item.Artists; - context.querySelector(".nowPlayingAlbum").innerHTML = albumName; - context.querySelector(".nowPlayingArtist").innerHTML = artistName; + if (typeof item != 'undefined') { + 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 = '' + albumName + ''; + context.querySelector(".nowPlayingArtist").innerHTML = '' + artistName + ''; + context.querySelector(".contextMenuAlbum").innerHTML = 'album ' + globalize.translate("ViewAlbum") + ''; + context.querySelector(".contextMenuArtist").innerHTML = 'person ' + globalize.translate("ViewArtist") + ''; + } 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) { - context.querySelector(".nowPlayingSeason").innerHTML = '' + item.SeasonName + ''; - } - if (item.SeriesName != null) { - if (item.SeriesId !=null) { - context.querySelector(".nowPlayingSerie").innerHTML = '' + item.SeriesName + ''; - } else { - context.querySelector(".nowPlayingSerie").innerHTML = item.SeriesName; + context.querySelector(".nowPlayingSongName").innerHTML = songName; + } else if (item.Type == "Episode") { + if (item.SeasonName != null) { + context.querySelector(".nowPlayingSeason").innerHTML = '' + item.SeasonName + ''; } + if (item.SeriesName != null) { + if (item.SeriesId !=null) { + context.querySelector(".nowPlayingSerie").innerHTML = '' + item.SeriesName + ''; + } else { + context.querySelector(".nowPlayingSerie").innerHTML = item.SeriesName; + } + } + context.querySelector(".nowPlayingEpisode").innerHTML = item.Name; + } else { + context.querySelector(".nowPlayingPageTitle").innerHTML = displayName; } - context.querySelector(".nowPlayingEpisode").innerHTML = item.Name; - } else { - context.querySelector(".nowPlayingPageTitle").innerHTML = displayName; - } - if (displayName.length > 0 && item.Type != "Audio") { - context.querySelector(".nowPlayingPageTitle").classList.remove("hide"); - } else { - context.querySelector(".nowPlayingPageTitle").classList.add("hide"); - } + if (displayName.length > 0 && item.Type != "Audio") { + context.querySelector(".nowPlayingPageTitle").classList.remove("hide"); + } else { + context.querySelector(".nowPlayingPageTitle").classList.add("hide"); + } - var url = item ? seriesImageUrl(item, { - maxHeight: 300 * 2 - }) || imageUrl(item, { - maxHeight: 300 * 2 - }) : null; + var url = item ? seriesImageUrl(item, { + maxHeight: 300 * 2 + }) || imageUrl(item, { + maxHeight: 300 * 2 + }) : null; - console.debug("updateNowPlayingInfo"); - setImageUrl(context, state, url); - if (item) { - backdrop.setBackdrops([item]); - var apiClient = connectionManager.getApiClient(item.ServerId); - apiClient.getItem(apiClient.getCurrentUserId(), item.Id).then(function (fullItem) { - var userData = fullItem.UserData || {}; - var likes = null == userData.Likes ? "" : userData.Likes; - context.querySelector(".nowPlayingPageUserDataButtonsTitle").innerHTML = ''; - context.querySelector(".nowPlayingPageUserDataButtons").innerHTML = ''; - }); - } else { - backdrop.clear(); - context.querySelector(".nowPlayingPageUserDataButtons").innerHTML = ""; + console.debug("updateNowPlayingInfo"); + setImageUrl(context, state, url); + if (item) { + backdrop.setBackdrops([item]); + var apiClient = connectionManager.getApiClient(item.ServerId); + apiClient.getItem(apiClient.getCurrentUserId(), item.Id).then(function (fullItem) { + var userData = fullItem.UserData || {}; + var likes = null == userData.Likes ? "" : userData.Likes; + context.querySelector(".nowPlayingPageUserDataButtonsTitle").innerHTML = ''; + context.querySelector(".nowPlayingPageUserDataButtons").innerHTML = ''; + }); + } else { + backdrop.clear(); + context.querySelector(".nowPlayingPageUserDataButtons").innerHTML = ""; + } } } From 35a12f6022a8098c26a636b450e7380c9ed045ed Mon Sep 17 00:00:00 2001 From: Samuel Date: Sun, 12 Apr 2020 12:49:50 -0400 Subject: [PATCH 23/30] Update src/components/remotecontrol/remotecontrol.css Fix for smaller screen volume button under bottom bar Co-Authored-By: Fernando --- src/components/remotecontrol/remotecontrol.css | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/remotecontrol/remotecontrol.css b/src/components/remotecontrol/remotecontrol.css index 02970e5211..12e5368691 100644 --- a/src/components/remotecontrol/remotecontrol.css +++ b/src/components/remotecontrol/remotecontrol.css @@ -163,6 +163,7 @@ -webkit-box-pack: end; -webkit-justify-content: flex-end; justify-content: flex-end; + z-index: 0; } @media all and (min-width: 63em) { From dd3250a980c2e6920d190ddd2c33340d02ed1d1f Mon Sep 17 00:00:00 2001 From: ferferga Date: Sun, 12 Apr 2020 20:24:18 +0200 Subject: [PATCH 24/30] Change volume slider depending on layout and add artists back --- src/components/remotecontrol/remotecontrol.js | 17 +++++++++++++++-- src/nowplaying.html | 11 +---------- 2 files changed, 16 insertions(+), 12 deletions(-) diff --git a/src/components/remotecontrol/remotecontrol.js b/src/components/remotecontrol/remotecontrol.js index d25f4e59e0..4e33a1196f 100644 --- a/src/components/remotecontrol/remotecontrol.js +++ b/src/components/remotecontrol/remotecontrol.js @@ -122,13 +122,13 @@ 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(".nowPlayingAlbum").innerHTML = '' + albumName + ''; context.querySelector(".nowPlayingArtist").innerHTML = '' + artistName + ''; context.querySelector(".contextMenuAlbum").innerHTML = 'album ' + globalize.translate("ViewAlbum") + ''; context.querySelector(".contextMenuArtist").innerHTML = 'person ' + globalize.translate("ViewArtist") + ''; } else { artistName = item.Artists; - // context.querySelector(".nowPlayingAlbum").innerHTML = albumName; + context.querySelector(".nowPlayingAlbum").innerHTML = albumName; context.querySelector(".nowPlayingArtist").innerHTML = artistName; } } @@ -677,6 +677,17 @@ define(["browser", "datetime", "backdrop", "libraryBrowser", "listView", "imageL } } + var contextmenuHtml = ''; + var volumecontrolHtml = '
'; + volumecontrolHtml += ''; + volumecontrolHtml += '
'; + volumecontrolHtml += '
'; + 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", setVolumeDelayed); context.querySelector(".nowPlayingVolumeSlider").addEventListener("touchmove", setVolumeDelayed); @@ -698,9 +709,11 @@ define(["browser", "datetime", "backdrop", "libraryBrowser", "listView", "imageL 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 () { diff --git a/src/nowplaying.html b/src/nowplaying.html index 74ce0f92ec..c3364f796d 100644 --- a/src/nowplaying.html +++ b/src/nowplaying.html @@ -76,12 +76,6 @@ repeat - -
- -
@@ -168,7 +162,7 @@
-
+
-
From 6eec2ac19f64d17ee05c59b495b5cc8b0558bd08 Mon Sep 17 00:00:00 2001 From: ferferga Date: Sun, 12 Apr 2020 20:38:31 +0200 Subject: [PATCH 25/30] Fix lint issues and z-index of playback slider --- src/components/remotecontrol/remotecontrol.css | 15 ++++----------- 1 file changed, 4 insertions(+), 11 deletions(-) diff --git a/src/components/remotecontrol/remotecontrol.css b/src/components/remotecontrol/remotecontrol.css index 12e5368691..17003a4ec2 100644 --- a/src/components/remotecontrol/remotecontrol.css +++ b/src/components/remotecontrol/remotecontrol.css @@ -58,6 +58,7 @@ .nowPlayingPositionSliderContainer { margin: 0.2em 1em 0.2em 1em; width: 100%; + z-index: 0; } .nowPlayingInfoButtons { @@ -79,7 +80,7 @@ } .nowPlayingPageImageContainer { - width: 20%; + width: 16%; margin-right: 1em; position: relative; -webkit-flex-shrink: 0; @@ -123,10 +124,11 @@ 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; @@ -142,15 +144,6 @@ font-size: x-large; } -.nowPlayingPageImageContainer { - width: 16%; -} - -.nowPlayingPageImage { - margin: 0 auto; - width: 100%; -} - .nowPlayingSecondaryButtons { display: -webkit-box; display: -webkit-flex; From 9439a306b644dc6c72a44093002b748eb8606f94 Mon Sep 17 00:00:00 2001 From: samuel9554 Date: Sun, 12 Apr 2020 20:15:58 -0400 Subject: [PATCH 26/30] Various visual fix --- src/components/remotecontrol/remotecontrol.css | 17 +++++++++++++++-- src/components/remotecontrol/remotecontrol.js | 12 +++++++++--- src/nowplaying.html | 12 ++++++------ 3 files changed, 30 insertions(+), 11 deletions(-) diff --git a/src/components/remotecontrol/remotecontrol.css b/src/components/remotecontrol/remotecontrol.css index 17003a4ec2..af03c51e0a 100644 --- a/src/components/remotecontrol/remotecontrol.css +++ b/src/components/remotecontrol/remotecontrol.css @@ -90,7 +90,10 @@ .nowPlayingPageImageContainerNoAlbum { width: 100%; position: relative; - background-color: #5ccea9; +} + +.nowPlayingPageImageContainerNoAlbum button { + cursor: default; } .nowPlayingPageImageContainerNoAlbum::after { @@ -368,8 +371,13 @@ border-radius: 0; } + .playlistSectionButton .volumecontrol { + width: 100%; + } + .remoteControlSection { - margin: 4.2em 0 0 0; + margin: 0; + padding: 0 0 4.2em 0; } .nowPlayingButtonsContainer { @@ -554,8 +562,13 @@ border-radius: 0; } + .playlistSectionButton .volumecontrol { + width: 100%; + } + .remoteControlSection { margin: 4.2em 0 0 0; + padding: 0 0 4.2em 0; } .nowPlayingButtonsContainer { diff --git a/src/components/remotecontrol/remotecontrol.js b/src/components/remotecontrol/remotecontrol.js index 4e33a1196f..135713e36a 100644 --- a/src/components/remotecontrol/remotecontrol.js +++ b/src/components/remotecontrol/remotecontrol.js @@ -263,6 +263,12 @@ define(["browser", "datetime", "backdrop", "libraryBrowser", "listView", "imageL context.querySelector(".navigationSection").classList.add("hide"); } + if (-1 != supportedCommands.indexOf("DisplayMessage") && -1 != supportedCommands.indexOf("SendString") && -1 != supportedCommands.indexOf("Select") && !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); @@ -416,9 +422,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"); @@ -677,7 +683,7 @@ define(["browser", "datetime", "backdrop", "libraryBrowser", "listView", "imageL } } - var contextmenuHtml = ''; + var contextmenuHtml = ''; var volumecontrolHtml = '
'; volumecontrolHtml += ''; volumecontrolHtml += '
'; diff --git a/src/nowplaying.html b/src/nowplaying.html index c3364f796d..a1ddcc26a7 100644 --- a/src/nowplaying.html +++ b/src/nowplaying.html @@ -1,4 +1,4 @@ -
+
@@ -10,7 +10,7 @@

-
+
@@ -161,18 +161,18 @@
-
+
-
-
-
+
+
From c19385c9363cd2eee332e3888d778df3cdbb6583 Mon Sep 17 00:00:00 2001 From: samuel9554 Date: Sun, 12 Apr 2020 20:22:34 -0400 Subject: [PATCH 27/30] Fix bug introduce in last commit --- src/components/remotecontrol/remotecontrol.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/remotecontrol/remotecontrol.js b/src/components/remotecontrol/remotecontrol.js index 135713e36a..dce9502d82 100644 --- a/src/components/remotecontrol/remotecontrol.js +++ b/src/components/remotecontrol/remotecontrol.js @@ -263,7 +263,7 @@ define(["browser", "datetime", "backdrop", "libraryBrowser", "listView", "imageL context.querySelector(".navigationSection").classList.add("hide"); } - if (-1 != supportedCommands.indexOf("DisplayMessage") && -1 != supportedCommands.indexOf("SendString") && -1 != supportedCommands.indexOf("Select") && !currentPlayer.isLocalPlayer) { + if ((-1 != supportedCommands.indexOf("DisplayMessage") || -1 != supportedCommands.indexOf("SendString") || -1 != supportedCommands.indexOf("Select")) && !currentPlayer.isLocalPlayer) { context.querySelector(".remoteControlSection").classList.remove("hide"); } else { context.querySelector(".remoteControlSection").classList.add("hide"); From 46a055935b5b141f5e63a8fb24ab14dc196bf9a7 Mon Sep 17 00:00:00 2001 From: samuel9554 Date: Mon, 13 Apr 2020 08:18:09 -0400 Subject: [PATCH 28/30] As suggested by @MrTimscampi defaultCardBackground --- src/components/remotecontrol/remotecontrol.css | 7 +++++++ src/components/remotecontrol/remotecontrol.js | 2 +- 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/src/components/remotecontrol/remotecontrol.css b/src/components/remotecontrol/remotecontrol.css index af03c51e0a..08192cae05 100644 --- a/src/components/remotecontrol/remotecontrol.css +++ b/src/components/remotecontrol/remotecontrol.css @@ -209,6 +209,13 @@ margin: 0; } + .nowPlayingAlbum, + .nowPlayingArtist { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + .nowPlayingInfoContainerMedia { text-align: left !important; width: 80%; diff --git a/src/components/remotecontrol/remotecontrol.js b/src/components/remotecontrol/remotecontrol.js index dce9502d82..a6d8c21dc7 100644 --- a/src/components/remotecontrol/remotecontrol.js +++ b/src/components/remotecontrol/remotecontrol.js @@ -194,7 +194,7 @@ define(["browser", "datetime", "backdrop", "libraryBrowser", "listView", "imageL context.querySelector(".nowPlayingPageImage").classList.remove("nowPlayingPageImageAudio"); } } else { - imgContainer.innerHTML = '
'; + imgContainer.innerHTML = '
'; } } From a1c40bd8a846914c94f4ebdf9a33705eee857bc3 Mon Sep 17 00:00:00 2001 From: samuel9554 Date: Thu, 16 Apr 2020 15:45:32 -0400 Subject: [PATCH 29/30] 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); From b139a23f042ad6fdb73134299fd21ee360434935 Mon Sep 17 00:00:00 2001 From: samuel9554 Date: Thu, 16 Apr 2020 19:14:40 -0400 Subject: [PATCH 30/30] As resquested by @MrTimscampi + theme adjustement --- .../remotecontrol/remotecontrol.css | 22 ++++++++++++------- src/components/remotecontrol/remotecontrol.js | 11 +++++----- src/nowplaying.html | 2 +- src/themes/appletv/theme.css | 3 ++- src/themes/blueradiance/theme.css | 3 ++- src/themes/dark/theme.css | 3 ++- src/themes/light/theme.css | 3 ++- src/themes/purplehaze/theme.css | 3 ++- src/themes/wmc/theme.css | 3 ++- 9 files changed, 33 insertions(+), 20 deletions(-) diff --git a/src/components/remotecontrol/remotecontrol.css b/src/components/remotecontrol/remotecontrol.css index 21342bff73..9cdfcde151 100644 --- a/src/components/remotecontrol/remotecontrol.css +++ b/src/components/remotecontrol/remotecontrol.css @@ -1,3 +1,7 @@ +.nowPlayingPage { + padding: 5em 0 0 0 !important; +} + .nowPlayingInfoContainer { display: -webkit-box; display: -webkit-flex; @@ -168,6 +172,10 @@ } @media all and (min-width: 63em) { + .nowPlayingPage { + padding: 8em 0 0 0 !important; + } + .nowPlayingSecondaryButtons { -webkit-box-flex: 1; -webkit-flex-grow: 1; @@ -180,6 +188,12 @@ .nowPlayingPageUserDataButtonsTitle { display: none !important; } + + .playlistSectionButton, + .nowPlayingPlaylist, + .nowPlayingContextMenu { + background: unset !important; + } } @media all and (min-width: 80em) { @@ -338,8 +352,6 @@ display: inline-block; left: 0; right: 0; - - /* background: #202020; */ z-index: 1000; } @@ -351,8 +363,6 @@ right: 0; padding-left: 7.3%; padding-right: 7.3%; - - /* background-color: #101010; */ } .playlistSectionButton .btnTogglePlaylist { @@ -532,8 +542,6 @@ display: inline-block; left: 0; right: 0; - - /* background: #202020; */ z-index: 1000; } @@ -545,8 +553,6 @@ right: 0; padding-left: 4.3%; padding-right: 4.3%; - - /* background-color: #101010; */ } .playlistSectionButton .btnTogglePlaylist { diff --git a/src/components/remotecontrol/remotecontrol.js b/src/components/remotecontrol/remotecontrol.js index a4f04ef413..8e2a382d1d 100644 --- a/src/components/remotecontrol/remotecontrol.js +++ b/src/components/remotecontrol/remotecontrol.js @@ -243,29 +243,30 @@ 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 ((-1 != supportedCommands.indexOf("DisplayMessage") || -1 != supportedCommands.indexOf("SendString") || -1 != supportedCommands.indexOf("Select")) && !currentPlayer.isLocalPlayer) { + if (isSupportedCommands && !currentPlayer.isLocalPlayer) { context.querySelector(".remoteControlSection").classList.remove("hide"); } else { context.querySelector(".remoteControlSection").classList.add("hide"); diff --git a/src/nowplaying.html b/src/nowplaying.html index 7bfde2d9e9..0f34e5ba32 100644 --- a/src/nowplaying.html +++ b/src/nowplaying.html @@ -1,4 +1,4 @@ -
+
diff --git a/src/themes/appletv/theme.css b/src/themes/appletv/theme.css index 6a91dcf8cf..760038ad72 100644 --- a/src/themes/appletv/theme.css +++ b/src/themes/appletv/theme.css @@ -188,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)); diff --git a/src/themes/blueradiance/theme.css b/src/themes/blueradiance/theme.css index d7c47b1a2c..3e86782f37 100644 --- a/src/themes/blueradiance/theme.css +++ b/src/themes/blueradiance/theme.css @@ -181,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); diff --git a/src/themes/dark/theme.css b/src/themes/dark/theme.css index 291a0b8b55..f9163d82f5 100644 --- a/src/themes/dark/theme.css +++ b/src/themes/dark/theme.css @@ -163,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); diff --git a/src/themes/light/theme.css b/src/themes/light/theme.css index ad9695c6ee..114ef7c3b1 100644 --- a/src/themes/light/theme.css +++ b/src/themes/light/theme.css @@ -185,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); diff --git a/src/themes/purplehaze/theme.css b/src/themes/purplehaze/theme.css index f01c0c6405..82b774a736 100644 --- a/src/themes/purplehaze/theme.css +++ b/src/themes/purplehaze/theme.css @@ -271,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); diff --git a/src/themes/wmc/theme.css b/src/themes/wmc/theme.css index 2cdae4dd2e..e7d4c0371b 100644 --- a/src/themes/wmc/theme.css +++ b/src/themes/wmc/theme.css @@ -174,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);