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

44
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="stopButton mediaButton"><span class="material-icons stop"></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>';
@ -61,12 +63,17 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
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="btnShuffle mediaButton"><span class="material-icons shuffle"></span></button>';
html += '<div class="nowPlayingBarUserDataButtons">';
html += '</div>';
html += '<button is="paper-icon-button-light" class="playPauseButton mediaButton"><span class="material-icons pause"></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>';
@ -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.addEventListener('click', function () {
@ -263,6 +280,10 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
parentContainer.insertAdjacentHTML('afterbegin', getNowPlayingBarHtml());
nowPlayingBarElement = parentContainer.querySelector('.nowPlayingBar');
if (layoutManager.mobile) {
hideButton(nowPlayingBarElement.querySelector('.shuffle'));
}
if (browser.safari && browser.slow) {
// Not handled well here. The wrong elements receive events, bar doesn't update quickly enough, etc.
nowPlayingBarElement.classList.add('noMediaProgress');
@ -316,6 +337,7 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
}
updateRepeatModeDisplay(playState.RepeatMode);
onPlaylistShuffleModeChange();
updatePlayerVolumeState(playState.IsMuted, playState.VolumeLevel);
@ -550,6 +572,7 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
var apiClient = connectionManager.getApiClient(nowPlayingItem.ServerId);
apiClient.getItem(apiClient.getCurrentUserId(), nowPlayingItem.Id).then(function (item) {
var userData = item.UserData || {};
if (!layoutManager.mobile) {
var likes = userData.Likes == null ? '' : userData.Likes;
var contextButton = document.querySelector('.nowPlayingBar').querySelector('.btnToggleContextMenu');
var options = {
@ -557,15 +580,16 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
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 () {
itemContextMenu.show(Object.assign({
item: item,
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 {
@ -592,6 +616,18 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
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() {
if (!isVisibilityAllowed) {
@ -697,6 +733,7 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
events.off(player, 'playbackstart', onPlaybackStart);
events.off(player, 'statechange', onPlaybackStart);
events.off(player, 'repeatmodechange', onRepeatModeChange);
events.off(player, 'shuffleplaylistmodechange', onPlaylistShuffleModeChange);
events.off(player, 'playbackstop', onPlaybackStopped);
events.off(player, 'volumechange', onVolumeChanged);
events.off(player, 'pause', onPlayPauseStateChanged);
@ -745,6 +782,7 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
events.on(player, 'playbackstart', onPlaybackStart);
events.on(player, 'statechange', onPlaybackStart);
events.on(player, 'repeatmodechange', onRepeatModeChange);
events.on(player, 'shuffleplaylistmodechange', onPlaylistShuffleModeChange);
events.on(player, 'playbackstop', onPlaybackStopped);
events.on(player, 'volumechange', onVolumeChanged);
events.on(player, 'pause', onPlayPauseStateChanged);

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

@ -290,7 +290,7 @@
border-radius: 0;
}
.nowPlayingInfoButtons .btnRepeatMobile {
.nowPlayingInfoButtons .btnRepeat {
position: absolute;
left: 0;
margin-left: 0;
@ -298,7 +298,7 @@
font-size: smaller;
}
.nowPlayingInfoButtons .btnShuffleMobile {
.nowPlayingInfoButtons .btnShuffle {
position: absolute;
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';
var showMuteButton = true;
var showVolumeSlider = true;
var shuffleButton;
function showAudioMenu(context, player, button, item) {
var currentIndex = playbackManager.getAudioStreamIndex(player);
@ -296,8 +297,6 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
if (layoutManager.mobile) {
buttonVisible(context.querySelector('.btnRewind'), false);
buttonVisible(context.querySelector('.btnFastForward'), false);
buttonVisible(context.querySelector('.nowPlayingInfoButtons').querySelector('.repeatToggleButton'), true);
buttonVisible(context.querySelector('.nowPlayingInfoButtons').querySelector('.btnShuffleMobile'), true);
} else {
buttonVisible(context.querySelector('.btnRewind'), null != item);
buttonVisible(context.querySelector('.btnFastForward'), null != item);
@ -326,6 +325,7 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
}
updateRepeatModeDisplay(playState.RepeatMode);
onShufflePlaylistModeChange();
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 += '<div class="sliderContainer nowPlayingVolumeSliderContainer"><input is="emby-slider" type="range" step="1" min="0" max="100" value="0" class="nowPlayingVolumeSlider"/></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');
if (!layoutManager.mobile) {
context.querySelector('.nowPlayingSecondaryButtons').innerHTML += volumecontrolHtml;
context.querySelector('.nowPlayingSecondaryButtons').insertAdjacentHTML('beforeend', repeatButtonHtml + shuffleButtonHtml + volumecontrolHtml);
optionsSection.innerHTML += contextmenuHtml;
optionsSection.classList.remove('align-items-center', 'justify-content-center');
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.classList.add('playlistSectionButtonTransparent');
context.querySelector('.btnTogglePlaylist').classList.remove('hide');
context.querySelector('.nowPlayingInfoButtons').insertAdjacentHTML('afterbegin', repeatButtonHtml);
context.querySelector('.nowPlayingInfoButtons').insertAdjacentHTML('beforeend', shuffleButtonHtml);
}
bindEvents(context);

13
src/nowplaying.html
View file

@ -30,11 +30,6 @@
<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}">
<span class="material-icons replay_10"></span>
</button>
@ -59,9 +54,6 @@
<span class="material-icons forward_30"></span>
</button>
<button is="paper-icon-button-light" class="btnShuffleMobile btnShuffle autoSize hide" title="${ButtonShuffle}">
<span class="material-icons shuffle"></span>
</button>
</div>
<div class="nowPlayingSecondaryButtons">
@ -80,11 +72,6 @@
<span class="material-icons fullscreen"></span>
</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>