mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

Finish work on shuffle mode

Browse source
This commit is contained in:
ferferga 2020-06-18 08:39:23 +02:00
parent 2ab476f073
commit 2a74d53c35
4 changed files with 64 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

72
src/components/nowPlayingBar/nowPlayingBar.js
View file

@ -47,7 +47,9 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
html += '<button is="paper-icon-button-light" class="playPauseButton mediaButton"><span class="material-icons pause"></span></button>'; html += '<button is="paper-icon-button-light" class="playPauseButton mediaButton"><span class="material-icons pause"></span></button>';
html += '<button is="paper-icon-button-light" class="stopButton mediaButton"><span class="material-icons stop"></span></button>'; html += '<button is="paper-icon-button-light" class="stopButton mediaButton"><span class="material-icons stop"></span></button>';
html += '<button is="paper-icon-button-light" class="nextTrackButton mediaButton"><span class="material-icons skip_next"></span></button>'; if (!layoutManager.mobile) {
html += '<button is="paper-icon-button-light" class="nextTrackButton mediaButton"><span class="material-icons skip_next"></span></button>';
}
html += '<div class="nowPlayingBarCurrentTime"></div>'; html += '<div class="nowPlayingBarCurrentTime"></div>';
html += '</div>'; html += '</div>';
@ -61,12 +63,17 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
html += '</div>'; html += '</div>';
html += '<button is="paper-icon-button-light" class="toggleRepeatButton mediaButton"><span class="material-icons repeat"></span></button>'; html += '<button is="paper-icon-button-light" class="toggleRepeatButton mediaButton"><span class="material-icons repeat"></span></button>';
html += '<button is="paper-icon-button-light" class="btnShuffle mediaButton"><span class="material-icons shuffle"></span></button>';
html += '<div class="nowPlayingBarUserDataButtons">'; html += '<div class="nowPlayingBarUserDataButtons">';
html += '</div>'; html += '</div>';
html += '<button is="paper-icon-button-light" class="playPauseButton mediaButton"><span class="material-icons pause"></span></button>'; html += '<button is="paper-icon-button-light" class="playPauseButton mediaButton"><span class="material-icons pause"></span></button>';
html += '<button is="paper-icon-button-light" class="btnToggleContextMenu"><span class="material-icons more_vert"></span></button>'; if (layoutManager.mobile) {
html += '<button is="paper-icon-button-light" class="nextTrackButton mediaButton"><span class="material-icons skip_next"></span></button>';
} else {
html += '<button is="paper-icon-button-light" class="btnToggleContextMenu"><span class="material-icons more_vert"></span></button>';
}
html += '</div>'; html += '</div>';
html += '</div>'; html += '</div>';
@ -163,6 +170,16 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
} }
}); });
elem.querySelector('.btnShuffle').addEventListener('click', function () {
if (currentPlayer) {
if (playbackManager.getPlaylistShuffleMode(currentPlayer) === 'Sorted') {
playbackManager.setPlaylistShuffleMode('Shuffle', currentPlayer);
} else {
playbackManager.setPlaylistShuffleMode('Sorted', currentPlayer);
}
}
});
toggleRepeatButton = elem.querySelector('.toggleRepeatButton'); toggleRepeatButton = elem.querySelector('.toggleRepeatButton');
toggleRepeatButton.addEventListener('click', function () { toggleRepeatButton.addEventListener('click', function () {
@ -263,6 +280,10 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
parentContainer.insertAdjacentHTML('afterbegin', getNowPlayingBarHtml()); parentContainer.insertAdjacentHTML('afterbegin', getNowPlayingBarHtml());
nowPlayingBarElement = parentContainer.querySelector('.nowPlayingBar'); nowPlayingBarElement = parentContainer.querySelector('.nowPlayingBar');
if (layoutManager.mobile) {
hideButton(nowPlayingBarElement.querySelector('.shuffle'));
}
if (browser.safari && browser.slow) { if (browser.safari && browser.slow) {
// Not handled well here. The wrong elements receive events, bar doesn't update quickly enough, etc. // Not handled well here. The wrong elements receive events, bar doesn't update quickly enough, etc.
nowPlayingBarElement.classList.add('noMediaProgress'); nowPlayingBarElement.classList.add('noMediaProgress');
@ -316,6 +337,7 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
} }
updateRepeatModeDisplay(playState.RepeatMode); updateRepeatModeDisplay(playState.RepeatMode);
onPlaylistShuffleModeChange();
updatePlayerVolumeState(playState.IsMuted, playState.VolumeLevel); updatePlayerVolumeState(playState.IsMuted, playState.VolumeLevel);
@ -550,22 +572,24 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
var apiClient = connectionManager.getApiClient(nowPlayingItem.ServerId); var apiClient = connectionManager.getApiClient(nowPlayingItem.ServerId);
apiClient.getItem(apiClient.getCurrentUserId(), nowPlayingItem.Id).then(function (item) { apiClient.getItem(apiClient.getCurrentUserId(), nowPlayingItem.Id).then(function (item) {
var userData = item.UserData || {}; var userData = item.UserData || {};
var likes = userData.Likes == null ? '' : userData.Likes; if (!layoutManager.mobile) {
var contextButton = document.querySelector('.nowPlayingBar').querySelector('.btnToggleContextMenu'); var likes = userData.Likes == null ? '' : userData.Likes;
var options = { var contextButton = document.querySelector('.nowPlayingBar').querySelector('.btnToggleContextMenu');
play: false, var options = {
queue: false, play: false,
positionTo: contextButton queue: false,
}; positionTo: contextButton
nowPlayingUserData.innerHTML = '<button is="emby-ratingbutton" type="button" class="listItemButton mediaButton paper-icon-button-light" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-itemtype="' + item.Type + '" data-likes="' + likes + '" data-isfavorite="' + (userData.IsFavorite) + '"><span class="material-icons favorite"></span></button>'; };
apiClient.getCurrentUser().then(function(user) { apiClient.getCurrentUser().then(function (user) {
contextButton.addEventListener('click', function () { contextButton.addEventListener('click', function () {
itemContextMenu.show(Object.assign({ itemContextMenu.show(Object.assign({
item: item, item: item,
user: user user: user
}, options )); }, options));
});
}); });
}); }
nowPlayingUserData.innerHTML = '<button is="emby-ratingbutton" type="button" class="listItemButton mediaButton paper-icon-button-light" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-itemtype="' + item.Type + '" data-likes="' + likes + '" data-isfavorite="' + (userData.IsFavorite) + '"><span class="material-icons favorite"></span></button>';
}); });
} }
} else { } else {
@ -592,6 +616,18 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
updateRepeatModeDisplay(playbackManager.getRepeatMode(player)); updateRepeatModeDisplay(playbackManager.getRepeatMode(player));
} }
function onPlaylistShuffleModeChange() {
let shuffleMode = playbackManager.getPlaylistShuffleMode(this);
let context = nowPlayingBarElement;
let toggleShuffleButton = context.querySelector('.btnShuffle');
if ('Sorted' === shuffleMode) {
toggleShuffleButton.classList.remove('shuffleButton-active');
} else if ('Shuffle' === shuffleMode) {
toggleShuffleButton.classList.add('shuffleButton-active');
}
}
function showNowPlayingBar() { function showNowPlayingBar() {
if (!isVisibilityAllowed) { if (!isVisibilityAllowed) {
@ -697,6 +733,7 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
events.off(player, 'playbackstart', onPlaybackStart); events.off(player, 'playbackstart', onPlaybackStart);
events.off(player, 'statechange', onPlaybackStart); events.off(player, 'statechange', onPlaybackStart);
events.off(player, 'repeatmodechange', onRepeatModeChange); events.off(player, 'repeatmodechange', onRepeatModeChange);
events.off(player, 'shuffleplaylistmodechange', onPlaylistShuffleModeChange);
events.off(player, 'playbackstop', onPlaybackStopped); events.off(player, 'playbackstop', onPlaybackStopped);
events.off(player, 'volumechange', onVolumeChanged); events.off(player, 'volumechange', onVolumeChanged);
events.off(player, 'pause', onPlayPauseStateChanged); events.off(player, 'pause', onPlayPauseStateChanged);
@ -745,6 +782,7 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
events.on(player, 'playbackstart', onPlaybackStart); events.on(player, 'playbackstart', onPlaybackStart);
events.on(player, 'statechange', onPlaybackStart); events.on(player, 'statechange', onPlaybackStart);
events.on(player, 'repeatmodechange', onRepeatModeChange); events.on(player, 'repeatmodechange', onRepeatModeChange);
events.on(player, 'shuffleplaylistmodechange', onPlaylistShuffleModeChange);
events.on(player, 'playbackstop', onPlaybackStopped); events.on(player, 'playbackstop', onPlaybackStopped);
events.on(player, 'volumechange', onVolumeChanged); events.on(player, 'volumechange', onVolumeChanged);
events.on(player, 'pause', onPlayPauseStateChanged); events.on(player, 'pause', onPlayPauseStateChanged);

4
src/components/remotecontrol/remotecontrol.css
View file

@ -290,7 +290,7 @@
border-radius: 0; border-radius: 0;
} }
.nowPlayingInfoButtons .btnRepeatMobile { .nowPlayingInfoButtons .btnRepeat {
position: absolute; position: absolute;
left: 0; left: 0;
margin-left: 0; margin-left: 0;
@ -298,7 +298,7 @@
font-size: smaller; font-size: smaller;
} }
.nowPlayingInfoButtons .btnShuffleMobile { .nowPlayingInfoButtons .btnShuffle {
position: absolute; position: absolute;
right: 0; right: 0;
margin-right: 0; margin-right: 0;

10
src/components/remotecontrol/remotecontrol.js
View file

@ -2,6 +2,7 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
'use strict'; 'use strict';
var showMuteButton = true; var showMuteButton = true;
var showVolumeSlider = true; var showVolumeSlider = true;
var shuffleButton;
function showAudioMenu(context, player, button, item) { function showAudioMenu(context, player, button, item) {
var currentIndex = playbackManager.getAudioStreamIndex(player); var currentIndex = playbackManager.getAudioStreamIndex(player);
@ -296,8 +297,6 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
if (layoutManager.mobile) { if (layoutManager.mobile) {
buttonVisible(context.querySelector('.btnRewind'), false); buttonVisible(context.querySelector('.btnRewind'), false);
buttonVisible(context.querySelector('.btnFastForward'), false); buttonVisible(context.querySelector('.btnFastForward'), false);
buttonVisible(context.querySelector('.nowPlayingInfoButtons').querySelector('.repeatToggleButton'), true);
buttonVisible(context.querySelector('.nowPlayingInfoButtons').querySelector('.btnShuffleMobile'), true);
} else { } else {
buttonVisible(context.querySelector('.btnRewind'), null != item); buttonVisible(context.querySelector('.btnRewind'), null != item);
buttonVisible(context.querySelector('.btnFastForward'), null != item); buttonVisible(context.querySelector('.btnFastForward'), null != item);
@ -326,6 +325,7 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
} }
updateRepeatModeDisplay(playState.RepeatMode); updateRepeatModeDisplay(playState.RepeatMode);
onShufflePlaylistModeChange();
updateNowPlayingInfo(context, state); updateNowPlayingInfo(context, state);
} }
@ -826,9 +826,11 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
volumecontrolHtml += `<button is="paper-icon-button-light" class="buttonMute autoSize" title=${globalize.translate('Mute')}><span class="xlargePaperIconButton material-icons volume_up"></span></button>`; volumecontrolHtml += `<button is="paper-icon-button-light" class="buttonMute autoSize" title=${globalize.translate('Mute')}><span class="xlargePaperIconButton material-icons volume_up"></span></button>`;
volumecontrolHtml += '<div class="sliderContainer nowPlayingVolumeSliderContainer"><input is="emby-slider" type="range" step="1" min="0" max="100" value="0" class="nowPlayingVolumeSlider"/></div>'; volumecontrolHtml += '<div class="sliderContainer nowPlayingVolumeSliderContainer"><input is="emby-slider" type="range" step="1" min="0" max="100" value="0" class="nowPlayingVolumeSlider"/></div>';
volumecontrolHtml += '</div>'; volumecontrolHtml += '</div>';
let shuffleButtonHtml = `<button is="paper-icon-button-light" class="btnShuffle autoSize" title="${globalize.translate('ButtonShuffle')}"><span class="material-icons shuffle"></span></button>`;
let repeatButtonHtml = `<button is="paper-icon-button-light" class="btnCommand btnRepeat repeatToggleButton autoSize" title="${globalize.translate('ButtonRepeat')}" data-command="SetRepeatMode"><span class="material-icons repeat"></span></button>`;
let optionsSection = context.querySelector('.playlistSectionButton'); let optionsSection = context.querySelector('.playlistSectionButton');
if (!layoutManager.mobile) { if (!layoutManager.mobile) {
context.querySelector('.nowPlayingSecondaryButtons').innerHTML += volumecontrolHtml; context.querySelector('.nowPlayingSecondaryButtons').insertAdjacentHTML('beforeend', repeatButtonHtml + shuffleButtonHtml + volumecontrolHtml);
optionsSection.innerHTML += contextmenuHtml; optionsSection.innerHTML += contextmenuHtml;
optionsSection.classList.remove('align-items-center', 'justify-content-center'); optionsSection.classList.remove('align-items-center', 'justify-content-center');
optionsSection.classList.add('align-items-right', 'justify-content-flex-end'); optionsSection.classList.add('align-items-right', 'justify-content-flex-end');
@ -837,6 +839,8 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
optionsSection.innerHTML += volumecontrolHtml + contextmenuHtml; optionsSection.innerHTML += volumecontrolHtml + contextmenuHtml;
optionsSection.classList.add('playlistSectionButtonTransparent'); optionsSection.classList.add('playlistSectionButtonTransparent');
context.querySelector('.btnTogglePlaylist').classList.remove('hide'); context.querySelector('.btnTogglePlaylist').classList.remove('hide');
context.querySelector('.nowPlayingInfoButtons').insertAdjacentHTML('afterbegin', repeatButtonHtml);
context.querySelector('.nowPlayingInfoButtons').insertAdjacentHTML('beforeend', shuffleButtonHtml);
} }
bindEvents(context); bindEvents(context);

13
src/nowplaying.html
View file

@ -29,11 +29,6 @@
<div class="nowPlayingButtonsContainer focuscontainer-x"> <div class="nowPlayingButtonsContainer focuscontainer-x">
<div class="nowPlayingInfoButtons"> <div class="nowPlayingInfoButtons">
<button is="paper-icon-button-light" class="btnRepeatMobile btnCommand repeatToggleButton autoSize hide" title="${ButtonRepeat}"
data-command="SetRepeatMode">
<span class="material-icons repeat"></span>
</button>
<button is="paper-icon-button-light" class="btnRewind btnNowPlayingRewind btnPlayStateCommand autoSize" title="${Rewind}"> <button is="paper-icon-button-light" class="btnRewind btnNowPlayingRewind btnPlayStateCommand autoSize" title="${Rewind}">
<span class="material-icons replay_10"></span> <span class="material-icons replay_10"></span>
@ -59,9 +54,6 @@
<span class="material-icons forward_30"></span> <span class="material-icons forward_30"></span>
</button> </button>
<button is="paper-icon-button-light" class="btnShuffleMobile btnShuffle autoSize hide" title="${ButtonShuffle}">
<span class="material-icons shuffle"></span>
</button>
</div> </div>
<div class="nowPlayingSecondaryButtons"> <div class="nowPlayingSecondaryButtons">
@ -80,11 +72,6 @@
<span class="material-icons fullscreen"></span> <span class="material-icons fullscreen"></span>
</button> </button>
<button is="paper-icon-button-light" class="btnCommand repeatToggleButton autoSize" title="${ButtonRepeat}"
data-command="SetRepeatMode">
<span class="material-icons repeat"></span>
</button>
</div> </div>
</div> </div>
</div> </div>