mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
Merge pull request #1088 from MrTimscampi/media-session
Update and cleanup MediaSessions
This commit is contained in:
Vasily
GitHub
commit
d718f7cacb
3 changed files with 66 additions and 115 deletions
|
|
@ -91,6 +91,7 @@
|
|||
"src/components/autoFocuser.js",
|
||||
"src/components/cardbuilder/cardBuilder.js",
|
||||
"src/components/filedownloader.js",
|
||||
"src/components/playback/mediasession.js",
|
||||
"src/components/images/imageLoader.js",
|
||||
"src/components/lazyloader/lazyloader-intersectionobserver.js",
|
||||
"src/components/sanatizefilename.js",
|
||||
|
|
|
|||
|
|
@ -1,45 +1,28 @@
|
|||
define(['playbackManager', 'nowPlayingHelper', 'events', 'connectionManager'], function (playbackManager, nowPlayingHelper, events, connectionManager) {
|
||||
'use strict';
|
||||
|
||||
// no support for mediaSession
|
||||
if (!navigator.mediaSession && !window.NativeShell) {
|
||||
return;
|
||||
}
|
||||
import playbackManager from 'playbackManager';
|
||||
import nowPlayingHelper from 'nowPlayingHelper';
|
||||
import events from 'events';
|
||||
import connectionManager from 'connectionManager';
|
||||
/* eslint-disable indent */
|
||||
|
||||
// Reports media playback to the device for lock screen control
|
||||
|
||||
var currentPlayer;
|
||||
var lastUpdateTime = 0;
|
||||
let currentPlayer;
|
||||
|
||||
function seriesImageUrl(item, options) {
|
||||
function seriesImageUrl(item, options = {}) {
|
||||
options.type = options.type || 'Primary';
|
||||
|
||||
if (item.Type !== 'Episode') {
|
||||
return null;
|
||||
}
|
||||
|
||||
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') {
|
||||
} else if (options.type === 'Primary' && item.SeriesPrimaryImageTag) {
|
||||
options.tag = item.SeriesPrimaryImageTag;
|
||||
|
||||
return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.SeriesId, options);
|
||||
} else if (options.type === 'Thumb') {
|
||||
if (item.SeriesThumbImageTag) {
|
||||
|
||||
options.tag = item.SeriesThumbImageTag;
|
||||
|
||||
return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.SeriesId, options);
|
||||
}
|
||||
if (item.ParentThumbImageTag) {
|
||||
|
||||
} else if (item.ParentThumbImageTag) {
|
||||
options.tag = item.ParentThumbImageTag;
|
||||
|
||||
return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.ParentThumbItemId, options);
|
||||
|
|
@ -49,122 +32,101 @@ define(['playbackManager', 'nowPlayingHelper', 'events', 'connectionManager'], f
|
|||
return null;
|
||||
}
|
||||
|
||||
function imageUrl(item, options) {
|
||||
|
||||
options = options || {};
|
||||
function imageUrl(item, options = {}) {
|
||||
options.type = options.type || 'Primary';
|
||||
|
||||
if (item.ImageTags && item.ImageTags[options.type]) {
|
||||
|
||||
options.tag = item.ImageTags[options.type];
|
||||
|
||||
return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.Id, options);
|
||||
}
|
||||
|
||||
if (item.AlbumId && item.AlbumPrimaryImageTag) {
|
||||
|
||||
} else if (item.AlbumId && item.AlbumPrimaryImageTag) {
|
||||
options.tag = item.AlbumPrimaryImageTag;
|
||||
|
||||
return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.AlbumId, options);
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
function pushImageUrl(item, imageOptions, list) {
|
||||
var url = seriesImageUrl(item, imageOptions) || imageUrl(item, imageOptions);
|
||||
function getImageUrl(item, imageOptions = {}) {
|
||||
const url = seriesImageUrl(item, imageOptions) || imageUrl(item, imageOptions);
|
||||
|
||||
if (url) {
|
||||
var height = imageOptions.height || imageOptions.maxHeight;
|
||||
const height = imageOptions.height || imageOptions.maxHeight;
|
||||
|
||||
list.push({
|
||||
return {
|
||||
src: url,
|
||||
sizes: height + 'x' + height
|
||||
});
|
||||
};
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
function getImageUrls(item) {
|
||||
function getImageUrls(item, imageSizes = [96, 128, 192, 256, 384, 512]) {
|
||||
const list = [];
|
||||
|
||||
var list = [];
|
||||
|
||||
pushImageUrl(item, {height: 96}, list);
|
||||
pushImageUrl(item, {height: 128}, list);
|
||||
pushImageUrl(item, {height: 192}, list);
|
||||
pushImageUrl(item, {height: 256}, list);
|
||||
pushImageUrl(item, {height: 384}, list);
|
||||
pushImageUrl(item, {height: 512}, list);
|
||||
imageSizes.forEach((size) => {
|
||||
const url = getImageUrl(item, {height: size});
|
||||
if (url !== null) {
|
||||
list.push(url);
|
||||
}
|
||||
});
|
||||
|
||||
return list;
|
||||
}
|
||||
|
||||
function updatePlayerState(player, state, eventName) {
|
||||
// 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.
|
||||
// Don't report on simple time updates
|
||||
return;
|
||||
}
|
||||
|
||||
var item = state.NowPlayingItem;
|
||||
const item = state.NowPlayingItem;
|
||||
|
||||
if (!item) {
|
||||
hideMediaControls();
|
||||
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';
|
||||
}
|
||||
|
||||
var isVideo = item.MediaType === 'Video';
|
||||
var isLocalPlayer = player.isLocalPlayer || false;
|
||||
const isVideo = item.MediaType === 'Video';
|
||||
const isLocalPlayer = player.isLocalPlayer || false;
|
||||
|
||||
// Local players do their own notifications
|
||||
if (isLocalPlayer && isVideo) {
|
||||
return;
|
||||
}
|
||||
|
||||
var playState = state.PlayState || {};
|
||||
var parts = nowPlayingHelper.getNowPlayingNames(item);
|
||||
var artist = parts[parts.length - 1].text;
|
||||
var title = parts.length === 1 ? '' : parts[0].text;
|
||||
var albumArtist;
|
||||
const playState = state.PlayState || {};
|
||||
const parts = nowPlayingHelper.getNowPlayingNames(item);
|
||||
const artist = parts[parts.length - 1].text;
|
||||
const title = parts.length === 1 ? '' : parts[0].text;
|
||||
|
||||
if (item.AlbumArtists && item.AlbumArtists[0]) {
|
||||
albumArtist = item.AlbumArtists[0].Name;
|
||||
}
|
||||
|
||||
var album = item.Album || '';
|
||||
var itemId = item.Id;
|
||||
const album = item.Album || '';
|
||||
const itemId = item.Id;
|
||||
|
||||
// Convert to ms
|
||||
var duration = parseInt(item.RunTimeTicks ? (item.RunTimeTicks / 10000) : 0);
|
||||
var currentTime = parseInt(playState.PositionTicks ? (playState.PositionTicks / 10000) : 0);
|
||||
const duration = parseInt(item.RunTimeTicks ? (item.RunTimeTicks / 10000) : 0);
|
||||
const currentTime = parseInt(playState.PositionTicks ? (playState.PositionTicks / 10000) : 0);
|
||||
|
||||
var isPaused = playState.IsPaused || false;
|
||||
var canSeek = playState.CanSeek || false;
|
||||
const isPaused = playState.IsPaused || false;
|
||||
const canSeek = playState.CanSeek || false;
|
||||
|
||||
if (navigator.mediaSession) {
|
||||
if ('mediaSession' in navigator) {
|
||||
navigator.mediaSession.metadata = new MediaMetadata({
|
||||
title: title,
|
||||
artist: artist,
|
||||
album: album,
|
||||
artwork: getImageUrls(item),
|
||||
albumArtist: albumArtist,
|
||||
currentTime: currentTime,
|
||||
duration: duration,
|
||||
paused: isPaused,
|
||||
itemId: itemId,
|
||||
mediaType: item.MediaType
|
||||
artwork: getImageUrls(item)
|
||||
});
|
||||
} else {
|
||||
var imageUrl = [];
|
||||
pushImageUrl(item, {maxHeight: 400}, imageUrl);
|
||||
|
||||
if (imageUrl.length) {
|
||||
imageUrl = imageUrl[0].src;
|
||||
} else {
|
||||
imageUrl = null;
|
||||
}
|
||||
let itemImageUrl = seriesImageUrl(item, { maxHeight: 3000 }) || imageUrl(item, { maxHeight: 3000 });
|
||||
|
||||
window.NativeShell.updateMediaSession({
|
||||
action: eventName,
|
||||
|
|
@ -175,7 +137,7 @@ define(['playbackManager', 'nowPlayingHelper', 'events', 'connectionManager'], f
|
|||
album: album,
|
||||
duration: duration,
|
||||
position: currentTime,
|
||||
imageUrl: imageUrl,
|
||||
imageUrl: itemImageUrl,
|
||||
canSeek: canSeek,
|
||||
isPaused: isPaused
|
||||
});
|
||||
|
|
@ -183,37 +145,25 @@ define(['playbackManager', 'nowPlayingHelper', 'events', 'connectionManager'], f
|
|||
}
|
||||
|
||||
function onGeneralEvent(e) {
|
||||
const state = playbackManager.getPlayerState(this);
|
||||
|
||||
var player = this;
|
||||
var state = playbackManager.getPlayerState(player);
|
||||
|
||||
updatePlayerState(player, state, e.type);
|
||||
updatePlayerState(this, state, e.type);
|
||||
}
|
||||
|
||||
function onStateChanged(e, state) {
|
||||
|
||||
var player = this;
|
||||
updatePlayerState(player, state, 'statechange');
|
||||
updatePlayerState(this, state, 'statechange');
|
||||
}
|
||||
|
||||
function onPlaybackStart(e, state) {
|
||||
|
||||
var player = this;
|
||||
|
||||
updatePlayerState(player, state, e.type);
|
||||
updatePlayerState(this, state, e.type);
|
||||
}
|
||||
|
||||
function onPlaybackStopped(e, state) {
|
||||
|
||||
var player = this;
|
||||
|
||||
function onPlaybackStopped() {
|
||||
hideMediaControls();
|
||||
}
|
||||
|
||||
function releaseCurrentPlayer() {
|
||||
|
||||
if (currentPlayer) {
|
||||
|
||||
events.off(currentPlayer, 'playbackstart', onPlaybackStart);
|
||||
events.off(currentPlayer, 'playbackstop', onPlaybackStopped);
|
||||
events.off(currentPlayer, 'unpause', onGeneralEvent);
|
||||
|
|
@ -228,9 +178,7 @@ define(['playbackManager', 'nowPlayingHelper', 'events', 'connectionManager'], f
|
|||
}
|
||||
|
||||
function hideMediaControls() {
|
||||
lastUpdateTime = 0;
|
||||
|
||||
if (navigator.mediaSession) {
|
||||
if ('mediaSession' in navigator) {
|
||||
navigator.mediaSession.metadata = null;
|
||||
} else {
|
||||
window.NativeShell.hideMediaSession();
|
||||
|
|
@ -238,7 +186,6 @@ define(['playbackManager', 'nowPlayingHelper', 'events', 'connectionManager'], f
|
|||
}
|
||||
|
||||
function bindToPlayer(player) {
|
||||
|
||||
releaseCurrentPlayer();
|
||||
|
||||
if (!player) {
|
||||
|
|
@ -247,7 +194,7 @@ define(['playbackManager', 'nowPlayingHelper', 'events', 'connectionManager'], f
|
|||
|
||||
currentPlayer = player;
|
||||
|
||||
var state = playbackManager.getPlayerState(player);
|
||||
const state = playbackManager.getPlayerState(player);
|
||||
updatePlayerState(player, state, 'init');
|
||||
|
||||
events.on(currentPlayer, 'playbackstart', onPlaybackStart);
|
||||
|
|
@ -261,8 +208,8 @@ define(['playbackManager', 'nowPlayingHelper', 'events', 'connectionManager'], f
|
|||
function execute(name) {
|
||||
playbackManager[name](currentPlayer);
|
||||
}
|
||||
if (navigator.mediaSession) {
|
||||
|
||||
if ('mediaSession' in navigator) {
|
||||
navigator.mediaSession.setActionHandler('previoustrack', function () {
|
||||
execute('previousTrack');
|
||||
});
|
||||
|
|
@ -289,9 +236,9 @@ define(['playbackManager', 'nowPlayingHelper', 'events', 'connectionManager'], f
|
|||
}
|
||||
|
||||
events.on(playbackManager, 'playerchange', function () {
|
||||
|
||||
bindToPlayer(playbackManager.getCurrentPlayer());
|
||||
});
|
||||
|
||||
bindToPlayer(playbackManager.getCurrentPlayer());
|
||||
});
|
||||
|
||||
/* eslint-enable indent */
|
||||
|
|
|
|||
|
|
@ -561,7 +561,10 @@ var AppInfo = {};
|
|||
require(['components/playback/volumeosd']);
|
||||
}
|
||||
|
||||
require(['mediaSession', 'serverNotifications']);
|
||||
if (navigator.mediaSession || window.NativeShell) {
|
||||
require(['mediaSession']);
|
||||
}
|
||||
require(['serverNotifications']);
|
||||
require(['date-fns', 'date-fns/locale']);
|
||||
|
||||
if (!browser.tv && !browser.xboxOne) {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue