1
0
Fork 0
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:
Luke Pulverenti 2017-01-09 15:27:39 -05:00
parent 23c8b56c44
commit d3f216a01e
5 changed files with 103 additions and 73 deletions

View file

@ -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));

View file

@ -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) {

View file

@ -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) {

View file

@ -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 = '&#xE04F;';
showMuteButton = false;
} else { } else {
muteButton.querySelector('i').innerHTML = '&#xE050;';
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);
} }

View file

@ -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') {