diff --git a/src/components/remotecontrol/remotecontrol.css b/src/components/remotecontrol/remotecontrol.css
index 073c925339..115fc2c24a 100644
--- a/src/components/remotecontrol/remotecontrol.css
+++ b/src/components/remotecontrol/remotecontrol.css
@@ -364,6 +364,9 @@
padding-left: 7.3%;
padding-right: 7.3%;
}
+ .playlistSectionButtonTransparent {
+ background: rgba(0, 0, 0, 0) !important;
+ }
.playlistSectionButton .btnTogglePlaylist {
font-size: larger;
diff --git a/src/components/remotecontrol/remotecontrol.js b/src/components/remotecontrol/remotecontrol.js
index 089915a834..f5de415a36 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', '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) {
+define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageLoader', 'playbackManager', 'nowPlayingHelper', 'events', 'connectionManager', 'apphost', 'globalize', 'layoutManager', 'userSettings', 'cardBuilder', 'itemContextMenu', 'cardStyle', 'emby-itemscontainer', 'css!./remotecontrol.css', 'emby-ratingbutton'], function (browser, datetime, backdrop, libraryBrowser, listView, imageLoader, playbackManager, nowPlayingHelper, events, connectionManager, appHost, globalize, layoutManager, userSettings, cardBuilder, itemContextMenu) {
'use strict';
function showAudioMenu(context, player, button, item) {
@@ -119,18 +119,21 @@ 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) {
- artistName = item.ArtistItems[0].Name;
- context.querySelector('.nowPlayingAlbum').innerHTML = '${albumName}`;
- context.querySelector('.nowPlayingArtist').innerHTML = '${artistName}`;
- context.querySelector('.contextMenuAlbum').innerHTML = ' ` + globalize.translate('ViewAlbum') + '';
+ var artistsSeries = '';
+ for (let artist of item.ArtistItems) {
+ let artistName = artist.Name;
+ let artistId = artist.Id;
+ artistsSeries += `${artistName}`;
+ if (artist !== item.ArtistItems.slice(-1)[0]) {
+ artistsSeries += ', ';
+ }
+ }
+ context.querySelector('.nowPlayingArtist').innerHTML = artistsSeries;
context.querySelector('.contextMenuArtist').innerHTML = ' ` + globalize.translate('ViewArtist') + '';
- } else {
- artistName = item.Artists;
- context.querySelector('.nowPlayingAlbum').innerHTML = albumName;
- context.querySelector('.nowPlayingArtist').innerHTML = artistName;
}
+ context.querySelector('.nowPlayingAlbum').innerHTML = '${albumName}`;
+ context.querySelector('.contextMenuAlbum').innerHTML = ' ` + globalize.translate('ViewAlbum') + '';
}
context.querySelector('.nowPlayingSongName').innerHTML = songName;
} else if (item.Type == 'Episode') {
@@ -703,10 +706,16 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
context.querySelector('.btnSavePlaylist').classList.remove('hide');
context.querySelector('.contextMenu').classList.add('hide');
context.querySelector('.volumecontrol').classList.add('hide');
+ if (layoutManager.mobile) {
+ context.querySelector('.playlistSectionButton').classList.remove('playlistSectionButtonTransparent');
+ }
} else {
context.querySelector('.playlist').classList.add('hide');
context.querySelector('.btnSavePlaylist').classList.add('hide');
context.querySelector('.volumecontrol').classList.remove('hide');
+ if (layoutManager.mobile) {
+ context.querySelector('.playlistSectionButton').classList.add('playlistSectionButtonTransparent');
+ }
}
});
context.querySelector('.btnToggleContextMenu').addEventListener('click', function () {
@@ -774,6 +783,7 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
context.querySelector('.playlistSectionButton').innerHTML += contextmenuHtml;
} else {
context.querySelector('.playlistSectionButton').innerHTML += volumecontrolHtml + contextmenuHtml;
+ context.querySelector('.playlistSectionButton').classList.add('playlistSectionButtonTransparent');
}
bindEvents(context);