mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
update now playing bar
This commit is contained in:
parent
23c8b56c44
commit
d3f216a01e
5 changed files with 103 additions and 73 deletions
|
@ -974,6 +974,18 @@
|
||||||
return Promise.resolve(self.getPlayerStateInternal());
|
return Promise.resolve(self.getPlayerStateInternal());
|
||||||
};
|
};
|
||||||
|
|
||||||
|
function normalizePrimaryImage(state) {
|
||||||
|
|
||||||
|
if (state && state.NowPlayingItem) {
|
||||||
|
if (!state.NowPlayingItem.ImageTags || !state.NowPlayingItem.ImageTags.Primary) {
|
||||||
|
if (state.NowPlayingItem.PrimaryImageTag) {
|
||||||
|
state.NowPlayingItem.ImageTags = state.NowPlayingItem.ImageTags || {};
|
||||||
|
state.NowPlayingItem.ImageTags.Primary = state.NowPlayingItem.PrimaryImageTag;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
self.lastPlayerData = {};
|
self.lastPlayerData = {};
|
||||||
|
|
||||||
self.getPlayerStateInternal = function (data) {
|
self.getPlayerStateInternal = function (data) {
|
||||||
|
@ -986,14 +998,7 @@
|
||||||
data = data || self.lastPlayerData;
|
data = data || self.lastPlayerData;
|
||||||
self.lastPlayerData = data;
|
self.lastPlayerData = data;
|
||||||
|
|
||||||
if (data && data.NowPlayingItem) {
|
normalizePrimaryImage(data);
|
||||||
if (!data.NowPlayingItem.ImageTags || !data.NowPlayingItem.ImageTags.Primary) {
|
|
||||||
if (data.NowPlayingItem.PrimaryImageTag) {
|
|
||||||
data.NowPlayingItem.ImageTags = data.NowPlayingItem.ImageTags || {};
|
|
||||||
data.NowPlayingItem.ImageTags.Primary = data.NowPlayingItem.PrimaryImageTag;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
//console.log(JSON.stringify(data));
|
//console.log(JSON.stringify(data));
|
||||||
|
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
define(['playbackManager', 'events', 'serverNotifications'], function (playbackManager, events, serverNotifications) {
|
define(['playbackManager', 'events', 'serverNotifications', 'connectionManager'], function (playbackManager, events, serverNotifications, connectionManager) {
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
function getActivePlayerId() {
|
function getActivePlayerId() {
|
||||||
|
@ -6,7 +6,7 @@
|
||||||
return info ? info.id : null;
|
return info ? info.id : null;
|
||||||
}
|
}
|
||||||
|
|
||||||
function sendPlayCommand(options, playType) {
|
function sendPlayCommand(apiClient, options, playType) {
|
||||||
|
|
||||||
var sessionId = getActivePlayerId();
|
var sessionId = getActivePlayerId();
|
||||||
|
|
||||||
|
@ -24,14 +24,14 @@
|
||||||
remoteOptions.startPositionTicks = options.startPositionTicks;
|
remoteOptions.startPositionTicks = options.startPositionTicks;
|
||||||
}
|
}
|
||||||
|
|
||||||
return ApiClient.sendPlayCommand(sessionId, remoteOptions);
|
return apiClient.sendPlayCommand(sessionId, remoteOptions);
|
||||||
}
|
}
|
||||||
|
|
||||||
function sendPlayStateCommand(command, options) {
|
function sendPlayStateCommand(apiClient, command, options) {
|
||||||
|
|
||||||
var sessionId = getActivePlayerId();
|
var sessionId = getActivePlayerId();
|
||||||
|
|
||||||
ApiClient.sendPlayStateCommand(sessionId, command, options);
|
apiClient.sendPlayStateCommand(sessionId, command, options);
|
||||||
}
|
}
|
||||||
|
|
||||||
return function () {
|
return function () {
|
||||||
|
@ -43,6 +43,17 @@
|
||||||
self.isLocalPlayer = false;
|
self.isLocalPlayer = false;
|
||||||
self.id = 'remoteplayer';
|
self.id = 'remoteplayer';
|
||||||
|
|
||||||
|
var currentServerId;
|
||||||
|
|
||||||
|
function getCurrentApiClient() {
|
||||||
|
|
||||||
|
if (currentServerId) {
|
||||||
|
return connectionManager.getApiClient(currentServerId);
|
||||||
|
}
|
||||||
|
|
||||||
|
return connectionManager.currentApiClient();
|
||||||
|
}
|
||||||
|
|
||||||
function sendCommandByName(name, options) {
|
function sendCommandByName(name, options) {
|
||||||
|
|
||||||
var command = {
|
var command = {
|
||||||
|
@ -60,7 +71,8 @@
|
||||||
|
|
||||||
var sessionId = getActivePlayerId();
|
var sessionId = getActivePlayerId();
|
||||||
|
|
||||||
ApiClient.sendCommand(sessionId, command);
|
var apiClient = getCurrentApiClient();
|
||||||
|
apiClient.sendCommand(sessionId, command);
|
||||||
};
|
};
|
||||||
|
|
||||||
self.play = function (options) {
|
self.play = function (options) {
|
||||||
|
@ -74,27 +86,27 @@
|
||||||
playOptions.startPositionTicks = options.startPositionTicks;
|
playOptions.startPositionTicks = options.startPositionTicks;
|
||||||
}
|
}
|
||||||
|
|
||||||
return sendPlayCommand(playOptions, 'PlayNow');
|
return sendPlayCommand(getCurrentApiClient(), playOptions, 'PlayNow');
|
||||||
};
|
};
|
||||||
|
|
||||||
self.shuffle = function (item) {
|
self.shuffle = function (item) {
|
||||||
|
|
||||||
sendPlayCommand({ ids: [item.Id] }, 'PlayShuffle');
|
sendPlayCommand(getCurrentApiClient(), { ids: [item.Id] }, 'PlayShuffle');
|
||||||
};
|
};
|
||||||
|
|
||||||
self.instantMix = function (item) {
|
self.instantMix = function (item) {
|
||||||
|
|
||||||
sendPlayCommand({ ids: [item.Id] }, 'PlayInstantMix');
|
sendPlayCommand(getCurrentApiClient(), { ids: [item.Id] }, 'PlayInstantMix');
|
||||||
};
|
};
|
||||||
|
|
||||||
self.queue = function (options) {
|
self.queue = function (options) {
|
||||||
|
|
||||||
sendPlayCommand(options, 'PlayNext');
|
sendPlayCommand(getCurrentApiClient(), options, 'PlayNext');
|
||||||
};
|
};
|
||||||
|
|
||||||
self.queueNext = function (options) {
|
self.queueNext = function (options) {
|
||||||
|
|
||||||
sendPlayCommand(options, 'PlayLast');
|
sendPlayCommand(getCurrentApiClient(), options, 'PlayLast');
|
||||||
};
|
};
|
||||||
|
|
||||||
self.canPlayMediaType = function (mediaType) {
|
self.canPlayMediaType = function (mediaType) {
|
||||||
|
@ -108,19 +120,19 @@
|
||||||
};
|
};
|
||||||
|
|
||||||
self.stop = function () {
|
self.stop = function () {
|
||||||
sendPlayStateCommand('stop');
|
sendPlayStateCommand(getCurrentApiClient(), 'stop');
|
||||||
};
|
};
|
||||||
|
|
||||||
self.nextTrack = function () {
|
self.nextTrack = function () {
|
||||||
sendPlayStateCommand('nextTrack');
|
sendPlayStateCommand(getCurrentApiClient(), 'nextTrack');
|
||||||
};
|
};
|
||||||
|
|
||||||
self.previousTrack = function () {
|
self.previousTrack = function () {
|
||||||
sendPlayStateCommand('previousTrack');
|
sendPlayStateCommand(getCurrentApiClient(), 'previousTrack');
|
||||||
};
|
};
|
||||||
|
|
||||||
self.seek = function (positionTicks) {
|
self.seek = function (positionTicks) {
|
||||||
sendPlayStateCommand('seek',
|
sendPlayStateCommand(getCurrentApiClient(), 'seek',
|
||||||
{
|
{
|
||||||
SeekPositionTicks: positionTicks
|
SeekPositionTicks: positionTicks
|
||||||
});
|
});
|
||||||
|
@ -138,18 +150,29 @@
|
||||||
};
|
};
|
||||||
|
|
||||||
self.duration = function () {
|
self.duration = function () {
|
||||||
|
var state = self.lastPlayerData || {};
|
||||||
|
state = state.NowPlayingItem || {};
|
||||||
|
return state.RunTimeTicks;
|
||||||
};
|
};
|
||||||
|
|
||||||
self.paused = function () {
|
self.paused = function () {
|
||||||
|
var state = self.lastPlayerData || {};
|
||||||
|
state = state.PlayState || {};
|
||||||
|
return state.IsPaused;
|
||||||
|
};
|
||||||
|
|
||||||
|
self.getVolume = function () {
|
||||||
|
var state = self.lastPlayerData || {};
|
||||||
|
state = state.PlayState || {};
|
||||||
|
return state.VolumeLevel;
|
||||||
};
|
};
|
||||||
|
|
||||||
self.pause = function () {
|
self.pause = function () {
|
||||||
sendPlayStateCommand('Pause');
|
sendPlayStateCommand(getCurrentApiClient(), 'Pause');
|
||||||
};
|
};
|
||||||
|
|
||||||
self.unpause = function () {
|
self.unpause = function () {
|
||||||
sendPlayStateCommand('Unpause');
|
sendPlayStateCommand(getCurrentApiClient(), 'Unpause');
|
||||||
};
|
};
|
||||||
|
|
||||||
self.setMute = function (isMuted) {
|
self.setMute = function (isMuted) {
|
||||||
|
@ -262,7 +285,7 @@
|
||||||
|
|
||||||
self.getPlayerState = function () {
|
self.getPlayerState = function () {
|
||||||
|
|
||||||
var apiClient = window.ApiClient;
|
var apiClient = getCurrentApiClient();
|
||||||
|
|
||||||
if (apiClient) {
|
if (apiClient) {
|
||||||
return apiClient.getSessions().then(function (sessions) {
|
return apiClient.getSessions().then(function (sessions) {
|
||||||
|
@ -290,11 +313,13 @@
|
||||||
|
|
||||||
function onPollIntervalFired() {
|
function onPollIntervalFired() {
|
||||||
|
|
||||||
if (!ApiClient.isWebSocketOpen()) {
|
var apiClient = getCurrentApiClient();
|
||||||
var apiClient = window.ApiClient;
|
if (!apiClient.isWebSocketOpen()) {
|
||||||
|
|
||||||
if (apiClient) {
|
if (apiClient) {
|
||||||
apiClient.getSessions().then(processUpdatedSessions);
|
apiClient.getSessions().then(function (sessions) {
|
||||||
|
processUpdatedSessions(sessions, apiClient);
|
||||||
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -303,9 +328,10 @@
|
||||||
|
|
||||||
self.isUpdating = true;
|
self.isUpdating = true;
|
||||||
|
|
||||||
if (ApiClient.isWebSocketOpen()) {
|
var apiClient = getCurrentApiClient();
|
||||||
|
if (apiClient.isWebSocketOpen()) {
|
||||||
|
|
||||||
ApiClient.sendWebSocketMessage("SessionsStart", "100,800");
|
apiClient.sendWebSocketMessage("SessionsStart", "100,800");
|
||||||
}
|
}
|
||||||
if (pollInterval) {
|
if (pollInterval) {
|
||||||
clearInterval(pollInterval);
|
clearInterval(pollInterval);
|
||||||
|
@ -318,9 +344,10 @@
|
||||||
|
|
||||||
self.isUpdating = true;
|
self.isUpdating = true;
|
||||||
|
|
||||||
if (ApiClient.isWebSocketOpen()) {
|
var apiClient = getCurrentApiClient();
|
||||||
|
if (apiClient.isWebSocketOpen()) {
|
||||||
|
|
||||||
ApiClient.sendWebSocketMessage("SessionsStop");
|
apiClient.sendWebSocketMessage("SessionsStop");
|
||||||
}
|
}
|
||||||
if (pollInterval) {
|
if (pollInterval) {
|
||||||
clearInterval(pollInterval);
|
clearInterval(pollInterval);
|
||||||
|
@ -354,7 +381,7 @@
|
||||||
|
|
||||||
self.getTargets = function () {
|
self.getTargets = function () {
|
||||||
|
|
||||||
var apiClient = window.ApiClient;
|
var apiClient = getCurrentApiClient();
|
||||||
|
|
||||||
var sessionQuery = {
|
var sessionQuery = {
|
||||||
ControllableByUserId: apiClient.getCurrentUserId()
|
ControllableByUserId: apiClient.getCurrentUserId()
|
||||||
|
@ -396,9 +423,27 @@
|
||||||
return session;
|
return session;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function normalizePrimaryImage(state) {
|
||||||
|
|
||||||
|
if (state && state.NowPlayingItem) {
|
||||||
|
if (!state.NowPlayingItem.ImageTags || !state.NowPlayingItem.ImageTags.Primary) {
|
||||||
|
if (state.NowPlayingItem.PrimaryImageTag) {
|
||||||
|
state.NowPlayingItem.ImageTags = state.NowPlayingItem.ImageTags || {};
|
||||||
|
state.NowPlayingItem.ImageTags.Primary = state.NowPlayingItem.PrimaryImageTag;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
function firePlaybackEvent(name, session) {
|
function firePlaybackEvent(name, session) {
|
||||||
|
|
||||||
events.trigger(self, name, [getPlayerState(session)]);
|
var state = getPlayerState(session);
|
||||||
|
|
||||||
|
normalizePrimaryImage(state);
|
||||||
|
|
||||||
|
self.lastPlayerData = state;
|
||||||
|
|
||||||
|
events.trigger(self, name, [state]);
|
||||||
}
|
}
|
||||||
|
|
||||||
function onWebSocketConnectionChange() {
|
function onWebSocketConnectionChange() {
|
||||||
|
@ -409,10 +454,17 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function processUpdatedSessions(sessions) {
|
function processUpdatedSessions(sessions, apiClient) {
|
||||||
|
|
||||||
|
var serverId = apiClient.serverId();
|
||||||
|
|
||||||
|
sessions.map(function (s) {
|
||||||
|
if (s.NowPlayingItem) {
|
||||||
|
s.NowPlayingItem.ServerId = serverId;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
var currentTargetId = getActivePlayerId();
|
var currentTargetId = getActivePlayerId();
|
||||||
|
|
||||||
// Update existing data
|
// Update existing data
|
||||||
//updateSessionInfo(popup, msg.Data);
|
//updateSessionInfo(popup, msg.Data);
|
||||||
var session = sessions.filter(function (s) {
|
var session = sessions.filter(function (s) {
|
||||||
|
@ -427,7 +479,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
events.on(serverNotifications, 'Sessions', function (e, apiClient, data) {
|
events.on(serverNotifications, 'Sessions', function (e, apiClient, data) {
|
||||||
processUpdatedSessions(data);
|
processUpdatedSessions(data, apiClient);
|
||||||
});
|
});
|
||||||
|
|
||||||
events.on(serverNotifications, 'SessionEnded', function (e, apiClient, data) {
|
events.on(serverNotifications, 'SessionEnded', function (e, apiClient, data) {
|
||||||
|
|
|
@ -154,7 +154,7 @@
|
||||||
if (item.ImageTags && item.ImageTags[options.type]) {
|
if (item.ImageTags && item.ImageTags[options.type]) {
|
||||||
|
|
||||||
options.tag = item.ImageTags[options.type];
|
options.tag = item.ImageTags[options.type];
|
||||||
return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.Id, options);
|
return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.PrimaryImageItemId || item.Id, options);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (item.AlbumId && item.AlbumPrimaryImageTag) {
|
if (item.AlbumId && item.AlbumPrimaryImageTag) {
|
||||||
|
|
|
@ -8,7 +8,6 @@
|
||||||
var nowPlayingImageElement;
|
var nowPlayingImageElement;
|
||||||
var nowPlayingTextElement;
|
var nowPlayingTextElement;
|
||||||
var nowPlayingUserData;
|
var nowPlayingUserData;
|
||||||
var unmuteButton;
|
|
||||||
var muteButton;
|
var muteButton;
|
||||||
var volumeSlider;
|
var volumeSlider;
|
||||||
var volumeSliderContainer;
|
var volumeSliderContainer;
|
||||||
|
@ -54,7 +53,6 @@
|
||||||
html += '<div class="nowPlayingBarRight">';
|
html += '<div class="nowPlayingBarRight">';
|
||||||
|
|
||||||
html += '<button is="paper-icon-button-light" class="muteButton mediaButton autoSize"><i class="md-icon">volume_up</i></button>';
|
html += '<button is="paper-icon-button-light" class="muteButton mediaButton autoSize"><i class="md-icon">volume_up</i></button>';
|
||||||
html += '<button is="paper-icon-button-light" class="unmuteButton mediaButton autoSize"><i class="md-icon">volume_off</i></button>';
|
|
||||||
|
|
||||||
html += '<div class="sliderContainer nowPlayingBarVolumeSliderContainer hide" style="width:100px;vertical-align:middle;display:inline-flex;">';
|
html += '<div class="sliderContainer nowPlayingBarVolumeSliderContainer hide" style="width:100px;vertical-align:middle;display:inline-flex;">';
|
||||||
html += '<input type="range" is="emby-slider" pin step="1" min="0" max="100" value="0" class="nowPlayingBarVolumeSlider"/>';
|
html += '<input type="range" is="emby-slider" pin step="1" min="0" max="100" value="0" class="nowPlayingBarVolumeSlider"/>';
|
||||||
|
@ -146,20 +144,11 @@
|
||||||
nowPlayingTextElement = elem.querySelector('.nowPlayingBarText');
|
nowPlayingTextElement = elem.querySelector('.nowPlayingBarText');
|
||||||
nowPlayingUserData = elem.querySelector('.nowPlayingBarUserDataButtons');
|
nowPlayingUserData = elem.querySelector('.nowPlayingBarUserDataButtons');
|
||||||
|
|
||||||
unmuteButton = elem.querySelector('.unmuteButton');
|
|
||||||
unmuteButton.addEventListener('click', function () {
|
|
||||||
|
|
||||||
if (currentPlayer) {
|
|
||||||
currentPlayer.setMute(false);
|
|
||||||
}
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
muteButton = elem.querySelector('.muteButton');
|
muteButton = elem.querySelector('.muteButton');
|
||||||
muteButton.addEventListener('click', function () {
|
muteButton.addEventListener('click', function () {
|
||||||
|
|
||||||
if (currentPlayer) {
|
if (currentPlayer) {
|
||||||
currentPlayer.setMute(true);
|
playbackManager.toggleMute(currentPlayer);
|
||||||
}
|
}
|
||||||
|
|
||||||
});
|
});
|
||||||
|
@ -419,23 +408,16 @@
|
||||||
var supportedCommands = currentPlayerSupportedCommands;
|
var supportedCommands = currentPlayerSupportedCommands;
|
||||||
|
|
||||||
var showMuteButton = true;
|
var showMuteButton = true;
|
||||||
var showUnmuteButton = true;
|
|
||||||
var showVolumeSlider = true;
|
var showVolumeSlider = true;
|
||||||
|
|
||||||
if (supportedCommands.indexOf('Mute') == -1) {
|
if (supportedCommands.indexOf('ToggleMute') == -1) {
|
||||||
showMuteButton = false;
|
showMuteButton = false;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (supportedCommands.indexOf('Unmute') == -1) {
|
|
||||||
showUnmuteButton = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (isMuted) {
|
if (isMuted) {
|
||||||
|
muteButton.querySelector('i').innerHTML = '';
|
||||||
showMuteButton = false;
|
|
||||||
} else {
|
} else {
|
||||||
|
muteButton.querySelector('i').innerHTML = '';
|
||||||
showUnmuteButton = false;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
if (supportedCommands.indexOf('SetVolume') == -1) {
|
if (supportedCommands.indexOf('SetVolume') == -1) {
|
||||||
|
@ -444,7 +426,6 @@
|
||||||
|
|
||||||
if (currentPlayer.isLocalPlayer && appHost.supports('physicalvolumecontrol')) {
|
if (currentPlayer.isLocalPlayer && appHost.supports('physicalvolumecontrol')) {
|
||||||
showMuteButton = false;
|
showMuteButton = false;
|
||||||
showUnmuteButton = false;
|
|
||||||
showVolumeSlider = false;
|
showVolumeSlider = false;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -454,12 +435,6 @@
|
||||||
hideButton(muteButton);
|
hideButton(muteButton);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (showUnmuteButton) {
|
|
||||||
showButton(unmuteButton);
|
|
||||||
} else {
|
|
||||||
hideButton(unmuteButton);
|
|
||||||
}
|
|
||||||
|
|
||||||
// See bindEvents for why this is necessary
|
// See bindEvents for why this is necessary
|
||||||
if (volumeSlider) {
|
if (volumeSlider) {
|
||||||
|
|
||||||
|
@ -542,7 +517,7 @@
|
||||||
if (item.ImageTags && item.ImageTags[options.type]) {
|
if (item.ImageTags && item.ImageTags[options.type]) {
|
||||||
|
|
||||||
options.tag = item.ImageTags[options.type];
|
options.tag = item.ImageTags[options.type];
|
||||||
return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.Id, options);
|
return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.PrimaryImageItemId || item.Id, options);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (item.AlbumId && item.AlbumPrimaryImageTag) {
|
if (item.AlbumId && item.AlbumPrimaryImageTag) {
|
||||||
|
@ -688,8 +663,6 @@
|
||||||
lastUpdateTime = now;
|
lastUpdateTime = now;
|
||||||
|
|
||||||
var player = this;
|
var player = this;
|
||||||
var state = lastPlayerState;
|
|
||||||
var nowPlayingItem = state.NowPlayingItem || {};
|
|
||||||
currentRuntimeTicks = playbackManager.duration(player);
|
currentRuntimeTicks = playbackManager.duration(player);
|
||||||
updateTimeDisplay(playbackManager.currentTime(player), currentRuntimeTicks);
|
updateTimeDisplay(playbackManager.currentTime(player), currentRuntimeTicks);
|
||||||
}
|
}
|
||||||
|
|
|
@ -47,7 +47,7 @@
|
||||||
if (item.ImageTags && item.ImageTags[options.type]) {
|
if (item.ImageTags && item.ImageTags[options.type]) {
|
||||||
|
|
||||||
options.tag = item.ImageTags[options.type];
|
options.tag = item.ImageTags[options.type];
|
||||||
return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.Id, options);
|
return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.PrimaryImageItemId || item.Id, options);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (options.type === 'Primary') {
|
if (options.type === 'Primary') {
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue