';
- } else {
- html += '
';
- }
-
- var indicatorsHtml = '';
- indicatorsHtml += indicators.getPlayedIndicatorHtml(item);
-
- if (indicatorsHtml) {
- html += '
' + indicatorsHtml + '
';
- }
-
- if (playOnImageClick) {
- html += '
';
- }
-
- var progressHtml = indicators.getProgressBarHtml(item, {
- containerClass: 'listItemProgressBar'
- });
-
- if (progressHtml) {
- html += progressHtml;
- }
- html += '
';
+ imgUrl = imgData.url;
+ blurhash = imgData.blurhash;
}
+ let imageClass = isLargeStyle ? 'listItemImage listItemImage-large' : 'listItemImage';
+
+ if (isLargeStyle && layoutManager.tv) {
+ imageClass += ' listItemImage-large-tv';
+ }
+
+ var playOnImageClick = options.imagePlayButton && !layoutManager.tv;
+
+ if (!clickEntireItem) {
+ imageClass += ' itemAction';
+ }
+
+ var imageAction = playOnImageClick ? 'resume' : action;
+
+ let blurhashAttrib = '';
+ if (blurhash && blurhash.length > 0) {
+ blurhashAttrib = 'data-blurhash="' + blurhash + '"';
+ }
+
+ if (imgUrl) {
+ html += '
';
+ } else {
+ html += '
' + cardBuilder.getDefaultText(item, options);
+ }
+
+ var indicatorsHtml = '';
+ indicatorsHtml += indicators.getPlayedIndicatorHtml(item);
+
+ if (indicatorsHtml) {
+ html += '
' + indicatorsHtml + '
';
+ }
+
+ if (playOnImageClick) {
+ html += '
';
+ }
+
+ var progressHtml = indicators.getProgressBarHtml(item, {
+ containerClass: 'listItemProgressBar'
+ });
+
+ if (progressHtml) {
+ html += progressHtml;
+ }
+ html += '
';
}
if (options.showIndexNumberLeft) {
diff --git a/src/components/nowPlayingBar/nowPlayingBar.css b/src/components/nowPlayingBar/nowPlayingBar.css
index a2d5b4479c..c22429eedc 100644
--- a/src/components/nowPlayingBar/nowPlayingBar.css
+++ b/src/components/nowPlayingBar/nowPlayingBar.css
@@ -133,10 +133,7 @@
.toggleRepeatButton {
display: none !important;
}
-}
-
-@media all and (max-width: 66em) {
- .btnShuffle {
+ .nowPlayingBar .btnShuffleQueue {
display: none !important;
}
}
@@ -152,18 +149,21 @@
}
}
+.layout-mobile .nowPlayingBarRight button:not(.playPauseButton, .nextTrackButton) {
+ display: none;
+}
+
+.layout-mobile .nowPlayingBarRight input,
+.layout-mobile .nowPlayingBarRight div {
+ display: none;
+}
+
@media all and (max-width: 56em) {
.nowPlayingBarCenter {
display: none !important;
}
}
-@media all and (min-width: 56em) {
- .nowPlayingBarRight .playPauseButton {
- display: none;
- }
-}
-
@media all and (max-width: 60em) {
.nowPlayingBarRight .nowPlayingBarVolumeSliderContainer {
display: none !important;
diff --git a/src/components/nowPlayingBar/nowPlayingBar.js b/src/components/nowPlayingBar/nowPlayingBar.js
index 07cdaac4fe..f0b585e9d0 100644
--- a/src/components/nowPlayingBar/nowPlayingBar.js
+++ b/src/components/nowPlayingBar/nowPlayingBar.js
@@ -63,7 +63,7 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
html += '
';
html += '
';
- html += '
';
+ html += '
';
html += '
';
html += '
';
@@ -179,7 +179,7 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
}
});
- elem.querySelector('.btnShuffle').addEventListener('click', function () {
+ elem.querySelector('.btnShuffleQueue').addEventListener('click', function () {
if (currentPlayer) {
if (playbackManager.getQueueShuffleMode(currentPlayer) === 'Sorted') {
playbackManager.setQueueShuffleMode('Shuffle', currentPlayer);
@@ -290,7 +290,8 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
nowPlayingBarElement = parentContainer.querySelector('.nowPlayingBar');
if (layoutManager.mobile) {
- hideButton(nowPlayingBarElement.querySelector('.shuffle'));
+ hideButton(nowPlayingBarElement.querySelector('.btnShuffleQueue'));
+ hideButton(nowPlayingBarElement.querySelector('.nowPlayingBarCenter'));
}
if (browser.safari && browser.slow) {
@@ -634,12 +635,12 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
function onQueueShuffleModeChange() {
let shuffleMode = playbackManager.getQueueShuffleMode(this);
let context = nowPlayingBarElement;
- let toggleShuffleButton = context.querySelector('.btnShuffle');
+ let toggleShuffleButton = context.querySelector('.btnShuffleQueue');
- if ('Sorted' === shuffleMode) {
- toggleShuffleButton.classList.remove('shuffleButton-active');
- } else if ('Shuffle' === shuffleMode) {
- toggleShuffleButton.classList.add('shuffleButton-active');
+ if (shuffleMode === 'Sorted') {
+ toggleShuffleButton.classList.remove('shuffleQueue-active');
+ } else if (shuffleMode === 'Shuffle') {
+ toggleShuffleButton.classList.add('shuffleQueue-active');
}
}
diff --git a/src/components/remotecontrol/remotecontrol.css b/src/components/remotecontrol/remotecontrol.css
index 6dbd3b7160..3fd0ab0971 100644
--- a/src/components/remotecontrol/remotecontrol.css
+++ b/src/components/remotecontrol/remotecontrol.css
@@ -175,10 +175,6 @@
background: rgba(0, 0, 0, 0) !important;
}
-.layout-mobile .btnShuffle {
- display: unset !important;
-}
-
.layout-mobile .playlistSection .playlist,
.layout-mobile .playlistSection .contextMenu {
position: absolute;
@@ -202,62 +198,82 @@
padding-right: 7.3%;
}
-.playlistSectionButton:not(>.layout-mobile) {
- background: unset !important;
+.layout-desktop .playlistSectionButton,
+.layout-tv .playlistSectionButton {
+ background: none;
}
-.nowPlayingPlaylist:not(>.layout-mobile) {
- background: unset !important;
+.layout-desktop .nowPlayingPlaylist,
+.layout-tv .nowPlayingPlaylist {
+ background: none;
}
.layout-mobile .playlistSectionButton .btnTogglePlaylist {
font-size: larger;
margin: 0;
- padding-left: 0;
}
.layout-mobile .playlistSectionButton .btnSavePlaylist {
margin: 0;
padding-right: 0;
- -webkit-box-flex: 1;
- -webkit-flex-grow: 1;
- flex-grow: 1;
- -webkit-box-pack: end;
- -webkit-justify-content: flex-end;
- justify-content: flex-end;
+ border-radius: 0;
+}
+
+.layout-mobile .playlistSectionButton .volumecontrol {
+ margin: 0;
+ padding-right: 0;
border-radius: 0;
}
.layout-mobile .playlistSectionButton .btnToggleContextMenu {
font-size: larger;
margin: 0;
- padding-right: 0;
+}
+
+.layout-mobile .nowPlayingSecondaryButtons .btnShuffleQueue {
+ display: none;
+}
+
+.layout-mobile .nowPlayingSecondaryButtons .volumecontrol {
+ display: none;
+}
+
+.layout-mobile .nowPlayingSecondaryButtons .btnRepeat {
+ display: none;
+}
+
+.layout-desktop .nowPlayingInfoButtons .btnRepeat,
+.layout-tv .nowPlayingInfoButtons .btnRepeat {
+ display: none;
+}
+
+.layout-desktop .nowPlayingInfoButtons .btnShuffleQueue,
+.layout-tv .nowPlayingInfoButtons .btnShuffleQueue{
+ display: none;
+}
+
+.layout-desktop .playlistSectionButton .volumecontrol,
+.layout-tv .playlistSectionButton .volumecontrol {
+ display: none;
+}
+
+.nowPlayingSecondaryButtons {
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
flex-grow: 1;
-webkit-box-pack: end;
-webkit-justify-content: flex-end;
justify-content: flex-end;
- border-radius: 0;
+}
+
+.nowPlayingInfoControls .nowPlayingPageUserDataButtonsTitle {
+ display: none;
}
@media all and (min-width: 63em) {
.nowPlayingPage {
padding: 8em 0 0 0 !important;
}
-
- .nowPlayingSecondaryButtons {
- -webkit-box-flex: 1;
- -webkit-flex-grow: 1;
- flex-grow: 1;
- -webkit-box-pack: end;
- -webkit-justify-content: flex-end;
- justify-content: flex-end;
- }
-
- .nowPlayingPageUserDataButtonsTitle {
- display: none !important;
- }
}
@media all and (min-width: 80em) {
@@ -275,6 +291,10 @@
flex-direction: column;
}
+ .nowPlayingInfoControls .nowPlayingPageUserDataButtonsTitle {
+ display: unset;
+ }
+
.nowPlayingInfoContainer {
-webkit-box-orient: vertical !important;
-webkit-box-direction: normal !important;
@@ -362,7 +382,7 @@
font-size: smaller;
}
- .nowPlayingInfoButtons .btnShuffle {
+ .nowPlayingInfoButtons .btnShuffleQueue {
position: absolute;
right: 0;
margin-right: 0;
@@ -447,6 +467,10 @@
background-image: url(../../assets/img/equalizer.gif) !important;
}
+.playlistIndexIndicatorImage > * {
+ display: none;
+}
+
.hideVideoButtons .videoButton {
display: none;
}
@@ -456,7 +480,6 @@
}
@media all and (max-width: 63em) {
- .nowPlayingSecondaryButtons .nowPlayingPageUserDataButtons,
.nowPlayingSecondaryButtons .repeatToggleButton,
.nowPlayingInfoButtons .playlist .listItemMediaInfo,
.nowPlayingInfoButtons .btnStop {
diff --git a/src/components/remotecontrol/remotecontrol.js b/src/components/remotecontrol/remotecontrol.js
index 784e7ff5b1..18a8f2005c 100644
--- a/src/components/remotecontrol/remotecontrol.js
+++ b/src/components/remotecontrol/remotecontrol.js
@@ -511,11 +511,11 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
function onShuffleQueueModeChange() {
let shuffleMode = playbackManager.getQueueShuffleMode(this);
let context = dlg;
- let shuffleButton = context.querySelector('.btnShuffle');
+ let shuffleButton = context.querySelector('.btnShuffleQueue');
if ('Sorted' === shuffleMode) {
- shuffleButton.classList.remove('shuffleButton-active');
+ shuffleButton.classList.remove('shuffleQueue-active');
} else if ('Shuffle' === shuffleMode) {
- shuffleButton.classList.add('shuffleButton-active');
+ shuffleButton.classList.add('shuffleQueue-active');
}
onPlaylistUpdate();
}
@@ -703,7 +703,7 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
playbackManager.fastForward(currentPlayer);
}
});
- context.querySelector('.btnShuffle').addEventListener('click', function () {
+ context.querySelector('.btnShuffleQueue').addEventListener('click', function () {
if (currentPlayer) {
if (playbackManager.getQueueShuffleMode(currentPlayer) === 'Sorted') {
playbackManager.setQueueShuffleMode('Shuffle', currentPlayer);
@@ -841,27 +841,23 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
}
function init(ownerView, context) {
- let contextmenuHtml = ``;
let volumecontrolHtml = '
';
volumecontrolHtml += `
`;
volumecontrolHtml += '
';
volumecontrolHtml += '
';
- let shuffleButtonHtml = `
`;
- let repeatButtonHtml = `
`;
let optionsSection = context.querySelector('.playlistSectionButton');
if (!layoutManager.mobile) {
- context.querySelector('.nowPlayingSecondaryButtons').insertAdjacentHTML('beforeend', repeatButtonHtml + shuffleButtonHtml + volumecontrolHtml);
- optionsSection.innerHTML += contextmenuHtml;
+ context.querySelector('.nowPlayingSecondaryButtons').insertAdjacentHTML('beforeend', volumecontrolHtml);
optionsSection.classList.remove('align-items-center', 'justify-content-center');
optionsSection.classList.add('align-items-right', 'justify-content-flex-end');
context.querySelector('.playlist').classList.remove('hide');
context.querySelector('.btnSavePlaylist').classList.remove('hide');
} else {
- optionsSection.innerHTML += volumecontrolHtml + contextmenuHtml;
+ optionsSection.querySelector('.btnTogglePlaylist').insertAdjacentHTML('afterend', volumecontrolHtml);
optionsSection.classList.add('playlistSectionButtonTransparent');
context.querySelector('.btnTogglePlaylist').classList.remove('hide');
- context.querySelector('.nowPlayingInfoButtons').insertAdjacentHTML('afterbegin', repeatButtonHtml);
- context.querySelector('.nowPlayingInfoButtons').insertAdjacentHTML('beforeend', shuffleButtonHtml);
+ context.querySelector('.playlistSectionButton').classList.remove('justify-content-center');
+ context.querySelector('.playlistSectionButton').classList.add('justify-content-space-between');
}
bindEvents(context);
diff --git a/src/nowplaying.html b/src/nowplaying.html
index 0c76882466..e429647076 100644
--- a/src/nowplaying.html
+++ b/src/nowplaying.html
@@ -29,6 +29,11 @@