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

Merge pull request #1088 from MrTimscampi/media-session

Browse source 
Update and cleanup MediaSessions
This commit is contained in:
Vasily 2020-05-07 14:37:19 +03:00 • committed by GitHub
commit d718f7cacb
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 66 additions and 115 deletions
Download patch file Download diff file Expand all files Collapse all files

1
package.json
View file

@ -91,6 +91,7 @@
"src/components/autoFocuser.js", "src/components/autoFocuser.js",
"src/components/cardbuilder/cardBuilder.js", "src/components/cardbuilder/cardBuilder.js",
"src/components/filedownloader.js", "src/components/filedownloader.js",
"src/components/playback/mediasession.js",
"src/components/images/imageLoader.js", "src/components/images/imageLoader.js",
"src/components/lazyloader/lazyloader-intersectionobserver.js", "src/components/lazyloader/lazyloader-intersectionobserver.js",
"src/components/sanatizefilename.js", "src/components/sanatizefilename.js",

175
src/components/playback/mediasession.js
View file

@ -1,45 +1,28 @@
define(['playbackManager', 'nowPlayingHelper', 'events', 'connectionManager'], function (playbackManager, nowPlayingHelper, events, connectionManager) { import playbackManager from 'playbackManager';
'use strict'; import nowPlayingHelper from 'nowPlayingHelper';
import events from 'events';
// no support for mediaSession import connectionManager from 'connectionManager';
if (!navigator.mediaSession && !window.NativeShell) { /* eslint-disable indent */
return;
}
// Reports media playback to the device for lock screen control // Reports media playback to the device for lock screen control
var currentPlayer; let currentPlayer;
var lastUpdateTime = 0;
function seriesImageUrl(item, options) { function seriesImageUrl(item, options = {}) {
options.type = options.type || 'Primary';
if (item.Type !== 'Episode') { if (item.Type !== 'Episode') {
return null; return null;
} } else if (options.type === 'Primary' && item.SeriesPrimaryImageTag) {
options.tag = item.SeriesPrimaryImageTag;
options = options || {};
options.type = options.type || 'Primary';
if (options.type === 'Primary') {
if (item.SeriesPrimaryImageTag) {
options.tag = item.SeriesPrimaryImageTag;
return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.SeriesId, options);
}
}
if (options.type === 'Thumb') {
return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.SeriesId, options);
} else if (options.type === 'Thumb') {
if (item.SeriesThumbImageTag) { if (item.SeriesThumbImageTag) {
options.tag = item.SeriesThumbImageTag; options.tag = item.SeriesThumbImageTag;
return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.SeriesId, options); return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.SeriesId, options);
} } else if (item.ParentThumbImageTag) {
if (item.ParentThumbImageTag) {
options.tag = item.ParentThumbImageTag; options.tag = item.ParentThumbImageTag;
return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.ParentThumbItemId, options); return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.ParentThumbItemId, options);
@ -49,122 +32,101 @@ define(['playbackManager', 'nowPlayingHelper', 'events', 'connectionManager'], f
return null; return null;
} }
function imageUrl(item, options) { function imageUrl(item, options = {}) {
options = options || {};
options.type = options.type || 'Primary'; options.type = options.type || 'Primary';
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.Id, options);
} } else if (item.AlbumId && item.AlbumPrimaryImageTag) {
if (item.AlbumId && item.AlbumPrimaryImageTag) {
options.tag = item.AlbumPrimaryImageTag; options.tag = item.AlbumPrimaryImageTag;
return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.AlbumId, options); return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.AlbumId, options);
} }
return null; return null;
} }
function pushImageUrl(item, imageOptions, list) { function getImageUrl(item, imageOptions = {}) {
var url = seriesImageUrl(item, imageOptions) || imageUrl(item, imageOptions); const url = seriesImageUrl(item, imageOptions) || imageUrl(item, imageOptions);
if (url) { if (url) {
var height = imageOptions.height || imageOptions.maxHeight; const height = imageOptions.height || imageOptions.maxHeight;
list.push({ return {
src: url, src: url,
sizes: height + 'x' + height sizes: height + 'x' + height
}); };
} else {
return null;
} }
} }
function getImageUrls(item) { function getImageUrls(item, imageSizes = [96, 128, 192, 256, 384, 512]) {
const list = [];
var list = []; imageSizes.forEach((size) => {
const url = getImageUrl(item, {height: size});
pushImageUrl(item, {height: 96}, list); if (url !== null) {
pushImageUrl(item, {height: 128}, list); list.push(url);
pushImageUrl(item, {height: 192}, list); }
pushImageUrl(item, {height: 256}, list); });
pushImageUrl(item, {height: 384}, list);
pushImageUrl(item, {height: 512}, list);
return list; return list;
} }
function updatePlayerState(player, state, eventName) { function updatePlayerState(player, state, eventName) {
// Don't go crazy reporting position changes // Don't go crazy reporting position changes
if (eventName == 'timeupdate') { if (eventName === 'timeupdate') {
// Only report if this item hasn't been reported yet, or if there's an actual playback change. // Only report if this item hasn't been reported yet, or if there's an actual playback change.
// Don't report on simple time updates // Don't report on simple time updates
return; return;
} }
var item = state.NowPlayingItem; const item = state.NowPlayingItem;
if (!item) { if (!item) {
hideMediaControls(); hideMediaControls();
return; return;
} }
if (eventName == 'init') { // transform "init" event into "timeupdate" to restraint update rate if (eventName === 'init') { // transform "init" event into "timeupdate" to restraint update rate
eventName = 'timeupdate'; eventName = 'timeupdate';
} }
var isVideo = item.MediaType === 'Video'; const isVideo = item.MediaType === 'Video';
var isLocalPlayer = player.isLocalPlayer || false; const isLocalPlayer = player.isLocalPlayer || false;
// Local players do their own notifications // Local players do their own notifications
if (isLocalPlayer && isVideo) { if (isLocalPlayer && isVideo) {
return; return;
} }
var playState = state.PlayState || {}; const playState = state.PlayState || {};
var parts = nowPlayingHelper.getNowPlayingNames(item); const parts = nowPlayingHelper.getNowPlayingNames(item);
var artist = parts[parts.length - 1].text; const artist = parts[parts.length - 1].text;
var title = parts.length === 1 ? '' : parts[0].text; const title = parts.length === 1 ? '' : parts[0].text;
var albumArtist;
if (item.AlbumArtists && item.AlbumArtists[0]) { const album = item.Album || '';
albumArtist = item.AlbumArtists[0].Name; const itemId = item.Id;
}
var album = item.Album || '';
var itemId = item.Id;
// Convert to ms // Convert to ms
var duration = parseInt(item.RunTimeTicks ? (item.RunTimeTicks / 10000) : 0); const duration = parseInt(item.RunTimeTicks ? (item.RunTimeTicks / 10000) : 0);
var currentTime = parseInt(playState.PositionTicks ? (playState.PositionTicks / 10000) : 0); const currentTime = parseInt(playState.PositionTicks ? (playState.PositionTicks / 10000) : 0);
var isPaused = playState.IsPaused || false; const isPaused = playState.IsPaused || false;
var canSeek = playState.CanSeek || false; const canSeek = playState.CanSeek || false;
if (navigator.mediaSession) { if ('mediaSession' in navigator) {
navigator.mediaSession.metadata = new MediaMetadata({ navigator.mediaSession.metadata = new MediaMetadata({
title: title, title: title,
artist: artist, artist: artist,
album: album, album: album,
artwork: getImageUrls(item), artwork: getImageUrls(item)
albumArtist: albumArtist,
currentTime: currentTime,
duration: duration,
paused: isPaused,
itemId: itemId,
mediaType: item.MediaType
}); });
} else { } else {
var imageUrl = []; let itemImageUrl = seriesImageUrl(item, { maxHeight: 3000 }) || imageUrl(item, { maxHeight: 3000 });
pushImageUrl(item, {maxHeight: 400}, imageUrl);
if (imageUrl.length) {
imageUrl = imageUrl[0].src;
} else {
imageUrl = null;
}
window.NativeShell.updateMediaSession({ window.NativeShell.updateMediaSession({
action: eventName, action: eventName,
@ -175,7 +137,7 @@ define(['playbackManager', 'nowPlayingHelper', 'events', 'connectionManager'], f
album: album, album: album,
duration: duration, duration: duration,
position: currentTime, position: currentTime,
imageUrl: imageUrl, imageUrl: itemImageUrl,
canSeek: canSeek, canSeek: canSeek,
isPaused: isPaused isPaused: isPaused
}); });
@ -183,37 +145,25 @@ define(['playbackManager', 'nowPlayingHelper', 'events', 'connectionManager'], f
} }
function onGeneralEvent(e) { function onGeneralEvent(e) {
const state = playbackManager.getPlayerState(this);
var player = this; updatePlayerState(this, state, e.type);
var state = playbackManager.getPlayerState(player);
updatePlayerState(player, state, e.type);
} }
function onStateChanged(e, state) { function onStateChanged(e, state) {
updatePlayerState(this, state, 'statechange');
var player = this;
updatePlayerState(player, state, 'statechange');
} }
function onPlaybackStart(e, state) { function onPlaybackStart(e, state) {
updatePlayerState(this, state, e.type);
var player = this;
updatePlayerState(player, state, e.type);
} }
function onPlaybackStopped(e, state) { function onPlaybackStopped() {
var player = this;
hideMediaControls(); hideMediaControls();
} }
function releaseCurrentPlayer() { function releaseCurrentPlayer() {
if (currentPlayer) { if (currentPlayer) {
events.off(currentPlayer, 'playbackstart', onPlaybackStart); events.off(currentPlayer, 'playbackstart', onPlaybackStart);
events.off(currentPlayer, 'playbackstop', onPlaybackStopped); events.off(currentPlayer, 'playbackstop', onPlaybackStopped);
events.off(currentPlayer, 'unpause', onGeneralEvent); events.off(currentPlayer, 'unpause', onGeneralEvent);
@ -228,9 +178,7 @@ define(['playbackManager', 'nowPlayingHelper', 'events', 'connectionManager'], f
} }
function hideMediaControls() { function hideMediaControls() {
lastUpdateTime = 0; if ('mediaSession' in navigator) {
if (navigator.mediaSession) {
navigator.mediaSession.metadata = null; navigator.mediaSession.metadata = null;
} else { } else {
window.NativeShell.hideMediaSession(); window.NativeShell.hideMediaSession();
@ -238,7 +186,6 @@ define(['playbackManager', 'nowPlayingHelper', 'events', 'connectionManager'], f
} }
function bindToPlayer(player) { function bindToPlayer(player) {
releaseCurrentPlayer(); releaseCurrentPlayer();
if (!player) { if (!player) {
@ -247,7 +194,7 @@ define(['playbackManager', 'nowPlayingHelper', 'events', 'connectionManager'], f
currentPlayer = player; currentPlayer = player;
var state = playbackManager.getPlayerState(player); const state = playbackManager.getPlayerState(player);
updatePlayerState(player, state, 'init'); updatePlayerState(player, state, 'init');
events.on(currentPlayer, 'playbackstart', onPlaybackStart); events.on(currentPlayer, 'playbackstart', onPlaybackStart);
@ -261,8 +208,8 @@ define(['playbackManager', 'nowPlayingHelper', 'events', 'connectionManager'], f
function execute(name) { function execute(name) {
playbackManager[name](currentPlayer); playbackManager[name](currentPlayer);
} }
if (navigator.mediaSession) {
if ('mediaSession' in navigator) {
navigator.mediaSession.setActionHandler('previoustrack', function () { navigator.mediaSession.setActionHandler('previoustrack', function () {
execute('previousTrack'); execute('previousTrack');
}); });
@ -289,9 +236,9 @@ define(['playbackManager', 'nowPlayingHelper', 'events', 'connectionManager'], f
} }
events.on(playbackManager, 'playerchange', function () { events.on(playbackManager, 'playerchange', function () {
bindToPlayer(playbackManager.getCurrentPlayer()); bindToPlayer(playbackManager.getCurrentPlayer());
}); });
bindToPlayer(playbackManager.getCurrentPlayer()); bindToPlayer(playbackManager.getCurrentPlayer());
});
/* eslint-enable indent */

5
src/scripts/site.js
View file

@ -561,7 +561,10 @@ var AppInfo = {};
require(['components/playback/volumeosd']); require(['components/playback/volumeosd']);
} }
require(['mediaSession', 'serverNotifications']); if (navigator.mediaSession || window.NativeShell) {
require(['mediaSession']);
}
require(['serverNotifications']);
require(['date-fns', 'date-fns/locale']); require(['date-fns', 'date-fns/locale']);
if (!browser.tv && !browser.xboxOne) { if (!browser.tv && !browser.xboxOne) {