mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
update now playing playlist
This commit is contained in:
parent
bb816420e7
commit
6820da0e4f
5 changed files with 145 additions and 38 deletions
|
@ -142,6 +142,20 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
|
|||
return html;
|
||||
}
|
||||
|
||||
function getRightButtonsHtml(options) {
|
||||
|
||||
var html = '';
|
||||
|
||||
for (var i = 0, length = options.rightButtons.length; i < length; i++) {
|
||||
|
||||
var button = options.rightButtons[i];
|
||||
|
||||
html += '<button is="paper-icon-button-light" class="listItemButton itemAction autoSize" data-action="custom" data-customaction="' + button.id + '" title="' + button.title + '"><i class="md-icon">' + button.icon + '</i></button>';
|
||||
}
|
||||
|
||||
return html;
|
||||
}
|
||||
|
||||
function getListViewHtml(options) {
|
||||
|
||||
var items = options.items;
|
||||
|
@ -406,9 +420,8 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
|
|||
html += '<button is="paper-icon-button-light" class="listItemButton itemAction autoSize" data-action="menu"><i class="md-icon">' + moreIcon + '</i></button>';
|
||||
}
|
||||
|
||||
if (options.recordButton) {
|
||||
|
||||
html += '<button is="paper-icon-button-light" class="listItemButton itemAction autoSize" data-action="programdialog">' + indicators.getTimerIndicator(item) + '</button>';
|
||||
if (options.rightButtons) {
|
||||
html += getRightButtonsHtml(options);
|
||||
}
|
||||
|
||||
if (options.enableUserDataButtons !== false) {
|
||||
|
|
|
@ -2215,7 +2215,12 @@ define(['events', 'datetime', 'appSettings', 'pluginManager', 'userSettings', 'g
|
|||
}
|
||||
}
|
||||
|
||||
self.setCurrentPlaylistIndex = function (i) {
|
||||
self.setCurrentPlaylistIndex = function (i, player) {
|
||||
|
||||
player = player || currentPlayer;
|
||||
if (player && !enableLocalPlaylistManagement(player)) {
|
||||
return player.setCurrentPlaylistIndex(i);
|
||||
}
|
||||
|
||||
var newItem = playlist[i];
|
||||
|
||||
|
@ -2228,7 +2233,43 @@ define(['events', 'datetime', 'appSettings', 'pluginManager', 'userSettings', 'g
|
|||
});
|
||||
};
|
||||
|
||||
self.getCurrentPlaylistIndex = function (i) {
|
||||
self.removeFromPlaylist = function (index, player) {
|
||||
|
||||
if (index < 0) {
|
||||
throw new Error('Invalid playlist index');
|
||||
}
|
||||
|
||||
player = player || currentPlayer;
|
||||
if (player && !enableLocalPlaylistManagement(player)) {
|
||||
return player.removeFromPlaylist(i);
|
||||
}
|
||||
|
||||
if (playlist.length <= 1) {
|
||||
return self.stop();
|
||||
}
|
||||
|
||||
var isCurrentIndex = self.getCurrentPlaylistIndex(player) === index;
|
||||
|
||||
playlist.splice(index, 1);
|
||||
|
||||
events.trigger(player, 'playlistitemremove', [
|
||||
{
|
||||
index: index
|
||||
}]);
|
||||
|
||||
if (isCurrentIndex) {
|
||||
return self.setCurrentPlaylistIndex(Math.min(index, playlist.length - 1), player);
|
||||
}
|
||||
|
||||
return Promise.resolve();
|
||||
};
|
||||
|
||||
self.getCurrentPlaylistIndex = function (i, player) {
|
||||
|
||||
player = player || currentPlayer;
|
||||
if (player && !enableLocalPlaylistManagement(player)) {
|
||||
return player.getCurrentPlaylistIndex();
|
||||
}
|
||||
|
||||
return currentPlaylistIndex;
|
||||
};
|
||||
|
@ -2241,7 +2282,7 @@ define(['events', 'datetime', 'appSettings', 'pluginManager', 'userSettings', 'g
|
|||
}
|
||||
|
||||
repeatMode = value;
|
||||
events.trigger(self, 'repeatmodechange');
|
||||
events.trigger(player, 'repeatmodechange');
|
||||
};
|
||||
|
||||
self.getRepeatMode = function (player) {
|
||||
|
|
|
@ -330,6 +330,20 @@ define(['playbackManager', 'inputManager', 'connectionManager', 'embyRouter', 'g
|
|||
else if (action === 'addtoplaylist') {
|
||||
getItem(target).then(addToPlaylist);
|
||||
}
|
||||
|
||||
else if (action === 'custom') {
|
||||
|
||||
var customAction = target.getAttribute('data-customaction');
|
||||
|
||||
card.dispatchEvent(new CustomEvent('action-' + customAction, {
|
||||
detail: {
|
||||
item: getItem(target),
|
||||
index: parseInt(card.getAttribute('data-index') || '-1')
|
||||
},
|
||||
cancelable: false,
|
||||
bubbles: true
|
||||
}));
|
||||
}
|
||||
}
|
||||
|
||||
function addToPlaylist(item) {
|
||||
|
|
|
@ -262,13 +262,11 @@
|
|||
|
||||
var self = this;
|
||||
var playlistNeedsRefresh = true;
|
||||
var isEnabled;
|
||||
|
||||
function toggleRepeat(player) {
|
||||
|
||||
if (player && lastPlayerState) {
|
||||
var state = lastPlayerState;
|
||||
switch ((state.PlayState || {}).RepeatMode) {
|
||||
if (player) {
|
||||
switch (playbackManager.getRepeatMode(player)) {
|
||||
case 'RepeatNone':
|
||||
playbackManager.setRepeatMode('RepeatAll', player);
|
||||
break;
|
||||
|
@ -329,21 +327,26 @@
|
|||
context.classList.add('hideVideoButtons');
|
||||
}
|
||||
|
||||
updateRepeatModeDisplay(playState.RepeatMode);
|
||||
updateNowPlayingInfo(context, state);
|
||||
}
|
||||
|
||||
function updateRepeatModeDisplay(repeatMode) {
|
||||
|
||||
var context = dlg;
|
||||
var toggleRepeatButton = context.querySelector('.repeatToggleButton');
|
||||
|
||||
if (playState.RepeatMode == 'RepeatAll') {
|
||||
if (repeatMode == 'RepeatAll') {
|
||||
toggleRepeatButton.innerHTML = "<i class='md-icon'>repeat</i>";
|
||||
toggleRepeatButton.classList.add('nowPlayingPageRepeatActive');
|
||||
}
|
||||
else if (playState.RepeatMode == 'RepeatOne') {
|
||||
else if (repeatMode == 'RepeatOne') {
|
||||
toggleRepeatButton.innerHTML = "<i class='md-icon'>repeat_one</i>";
|
||||
toggleRepeatButton.classList.add('nowPlayingPageRepeatActive');
|
||||
} else {
|
||||
toggleRepeatButton.innerHTML = "<i class='md-icon'>repeat</i>";
|
||||
toggleRepeatButton.classList.remove('nowPlayingPageRepeatActive');
|
||||
}
|
||||
|
||||
updateNowPlayingInfo(context, state);
|
||||
}
|
||||
|
||||
function updatePlayerVolumeState(context, isMuted, volumeLevel) {
|
||||
|
@ -478,7 +481,13 @@
|
|||
items: items,
|
||||
smallIcon: true,
|
||||
action: 'setplaylistindex',
|
||||
enableUserDataButtons: false
|
||||
enableUserDataButtons: false,
|
||||
rightButtons: [
|
||||
{
|
||||
icon: '',
|
||||
title: globalize.translate('ButtonRemove'),
|
||||
id: 'remove'
|
||||
}]
|
||||
});
|
||||
|
||||
playlistNeedsRefresh = false;
|
||||
|
@ -514,6 +523,23 @@
|
|||
loadPlaylist(dlg, player);
|
||||
}
|
||||
|
||||
function onRepeatModeChange(e) {
|
||||
|
||||
var player = this;
|
||||
|
||||
updateRepeatModeDisplay(playbackManager.getRepeatMode(player));
|
||||
}
|
||||
|
||||
function onPlaylistUpdate(e) {
|
||||
|
||||
var player = this;
|
||||
|
||||
playbackManager.getPlayerState(player).then(function (state) {
|
||||
|
||||
onStateChanged.call(player, { type: 'init' }, state);
|
||||
});
|
||||
}
|
||||
|
||||
function onPlaybackStopped(e, state) {
|
||||
|
||||
console.log('remotecontrol event: ' + e.type);
|
||||
|
@ -568,7 +594,8 @@
|
|||
|
||||
events.off(player, 'playbackstart', onPlaybackStart);
|
||||
events.off(player, 'statechange', onPlaybackStart);
|
||||
events.off(player, 'repeatmodechange', onPlaybackStart);
|
||||
events.off(player, 'repeatmodechange', onRepeatModeChange);
|
||||
events.off(player, 'playlistitemremove', onPlaylistUpdate);
|
||||
events.off(player, 'playbackstop', onPlaybackStopped);
|
||||
events.off(player, 'volumechange', onVolumeChanged);
|
||||
events.off(player, 'pause', onPlayPauseStateChanged);
|
||||
|
@ -596,9 +623,8 @@
|
|||
|
||||
events.on(player, 'playbackstart', onPlaybackStart);
|
||||
events.on(player, 'statechange', onPlaybackStart);
|
||||
// TODO: Replace this with smaller changes on repeatmodechange.
|
||||
// For now go cheap and just refresh the entire component
|
||||
events.on(player, 'repeatmodechange', onPlaybackStart);
|
||||
events.on(player, 'repeatmodechange', onRepeatModeChange);
|
||||
events.on(player, 'playlistitemremove', onPlaylistUpdate);
|
||||
events.on(player, 'playbackstop', onPlaybackStopped);
|
||||
events.on(player, 'volumechange', onVolumeChanged);
|
||||
events.on(player, 'pause', onPlayPauseStateChanged);
|
||||
|
@ -740,6 +766,10 @@
|
|||
|
||||
playbackManager.toggleMute(currentPlayer);
|
||||
});
|
||||
context.querySelector('.playlist').addEventListener('action-remove', function (e) {
|
||||
|
||||
playbackManager.removeFromPlaylist(e.detail.index, currentPlayer);
|
||||
});
|
||||
}
|
||||
|
||||
function onPlayerChange() {
|
||||
|
|
|
@ -188,9 +188,8 @@
|
|||
toggleRepeatButton.addEventListener('click', function () {
|
||||
|
||||
if (currentPlayer) {
|
||||
var state = lastPlayerState || {};
|
||||
|
||||
switch ((state.PlayState || {}).RepeatMode) {
|
||||
switch (playbackManager.getRepeatMode(currentPlayer)) {
|
||||
case 'RepeatAll':
|
||||
playbackManager.setRepeatMode('RepeatOne', currentPlayer);
|
||||
break;
|
||||
|
@ -344,17 +343,7 @@
|
|||
toggleRepeatButton.classList.remove('hide');
|
||||
}
|
||||
|
||||
if (playState.RepeatMode == 'RepeatAll') {
|
||||
toggleRepeatButtonIcon.innerHTML = "repeat";
|
||||
toggleRepeatButton.classList.add('repeatActive');
|
||||
}
|
||||
else if (playState.RepeatMode == 'RepeatOne') {
|
||||
toggleRepeatButtonIcon.innerHTML = "repeat_one";
|
||||
toggleRepeatButton.classList.add('repeatActive');
|
||||
} else {
|
||||
toggleRepeatButtonIcon.innerHTML = "repeat";
|
||||
toggleRepeatButton.classList.remove('repeatActive');
|
||||
}
|
||||
updateRepeatModeDisplay(playState.RepeatMode);
|
||||
|
||||
updatePlayerVolumeState(playState.IsMuted, playState.VolumeLevel);
|
||||
|
||||
|
@ -368,6 +357,21 @@
|
|||
updateNowPlayingInfo(state);
|
||||
}
|
||||
|
||||
function updateRepeatModeDisplay(repeatMode) {
|
||||
|
||||
if (repeatMode == 'RepeatAll') {
|
||||
toggleRepeatButtonIcon.innerHTML = "repeat";
|
||||
toggleRepeatButton.classList.add('repeatActive');
|
||||
}
|
||||
else if (repeatMode == 'RepeatOne') {
|
||||
toggleRepeatButtonIcon.innerHTML = "repeat_one";
|
||||
toggleRepeatButton.classList.add('repeatActive');
|
||||
} else {
|
||||
toggleRepeatButtonIcon.innerHTML = "repeat";
|
||||
toggleRepeatButton.classList.remove('repeatActive');
|
||||
}
|
||||
}
|
||||
|
||||
function updateTimeDisplay(positionTicks, runtimeTicks) {
|
||||
|
||||
// See bindEvents for why this is necessary
|
||||
|
@ -576,6 +580,13 @@
|
|||
onStateChanged.call(player, e, state);
|
||||
}
|
||||
|
||||
function onRepeatModeChange(e) {
|
||||
|
||||
var player = this;
|
||||
|
||||
updateRepeatModeDisplay(playbackManager.getRepeatMode(player));
|
||||
}
|
||||
|
||||
function showNowPlayingBar() {
|
||||
|
||||
getNowPlayingBar().then(slideUp);
|
||||
|
@ -681,7 +692,7 @@
|
|||
if (player) {
|
||||
events.off(player, 'playbackstart', onPlaybackStart);
|
||||
events.off(player, 'statechange', onPlaybackStart);
|
||||
events.off(player, 'repeatmodechange', onPlaybackStart);
|
||||
events.off(player, 'repeatmodechange', onRepeatModeChange);
|
||||
events.off(player, 'playbackstop', onPlaybackStopped);
|
||||
events.off(player, 'volumechange', onVolumeChanged);
|
||||
events.off(player, 'pause', onPlayPauseStateChanged);
|
||||
|
@ -725,9 +736,7 @@
|
|||
|
||||
events.on(player, 'playbackstart', onPlaybackStart);
|
||||
events.on(player, 'statechange', onPlaybackStart);
|
||||
// TODO: Replace this with smaller changes on repeatmodechange.
|
||||
// For now go cheap and just refresh the entire component
|
||||
events.on(player, 'repeatmodechange', onPlaybackStart);
|
||||
events.on(player, 'repeatmodechange', onRepeatModeChange);
|
||||
events.on(player, 'playbackstop', onPlaybackStopped);
|
||||
events.on(player, 'volumechange', onVolumeChanged);
|
||||
events.on(player, 'pause', onPlayPauseStateChanged);
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue