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 #6271 from thornbill/media-session-subscriber

Browse source 
Refactor media session to playback subscriber
This commit is contained in:
Bill Thornton 2025-01-11 16:26:27 -05:00 • committed by GitHub
commit 1362284d9a
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
12 changed files with 271 additions and 383 deletions
Download patch file Download diff file Expand all files Collapse all files

62
src/components/nowPlayingBar/nowPlayingBar.js
View file

@ -17,6 +17,7 @@ import appFooter from '../appFooter/appFooter';
import itemShortcuts from '../shortcuts';
import './nowPlayingBar.scss';
import '../../elements/emby-slider/emby-slider';
import { getImageUrl } from 'apps/stable/features/playback/utils/image';
let currentPlayer;
let currentPlayerSupportedCommands = [];
@ -470,61 +471,6 @@ function setLyricButtonActiveStatus() {
lyricButton.classList.toggle('buttonActive', isLyricPageActive);
}
function seriesImageUrl(item, options) {
if (!item) {
throw new Error('item cannot be null!');
}
if (item.Type !== 'Episode') {
return null;
}
options = options || {};
options.type = options.type || 'Primary';
if (options.type === 'Primary' && item.SeriesPrimaryImageTag) {
options.tag = item.SeriesPrimaryImageTag;
return ServerConnections.getApiClient(item.ServerId).getScaledImageUrl(item.SeriesId, options);
}
if (options.type === 'Thumb') {
if (item.SeriesThumbImageTag) {
options.tag = item.SeriesThumbImageTag;
return ServerConnections.getApiClient(item.ServerId).getScaledImageUrl(item.SeriesId, options);
}
if (item.ParentThumbImageTag) {
options.tag = item.ParentThumbImageTag;
return ServerConnections.getApiClient(item.ServerId).getScaledImageUrl(item.ParentThumbItemId, options);
}
}
return null;
}
function imageUrl(item, options) {
if (!item) {
throw new Error('item cannot be null!');
}
options = options || {};
options.type = options.type || 'Primary';
if (item.ImageTags?.[options.type]) {
options.tag = item.ImageTags[options.type];
return ServerConnections.getApiClient(item.ServerId).getScaledImageUrl(item.PrimaryImageItemId || item.Id, options);
}
if (item.AlbumId && item.AlbumPrimaryImageTag) {
options.tag = item.AlbumPrimaryImageTag;
return ServerConnections.getApiClient(item.ServerId).getScaledImageUrl(item.AlbumId, options);
}
return null;
}
function updateNowPlayingInfo(state) {
const nowPlayingItem = state.NowPlayingItem;
@ -554,11 +500,9 @@ function updateNowPlayingInfo(state) {
const imgHeight = 70;
const url = nowPlayingItem ? (seriesImageUrl(nowPlayingItem, {
const url = nowPlayingItem ? getImageUrl(nowPlayingItem, {
height: imgHeight
}) || imageUrl(nowPlayingItem, {
height: imgHeight
})) : null;
}) : null;
if (url !== nowPlayingImageUrl) {
if (url) {

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

@ -1,259 +0,0 @@
import { playbackManager } from '../playback/playbackmanager';
import nowPlayingHelper from '../playback/nowplayinghelper';
import Events from '../../utils/events.ts';
import ServerConnections from '../ServerConnections';
import shell from '../../scripts/shell';
// Reports media playback to the device for lock screen control
let currentPlayer;
function seriesImageUrl(item, options = {}) {
options.type = options.type || 'Primary';
if (item.Type !== 'Episode') {
return null;
} else if (options.type === 'Primary' && item.SeriesPrimaryImageTag) {
options.tag = item.SeriesPrimaryImageTag;
return ServerConnections.getApiClient(item.ServerId).getScaledImageUrl(item.SeriesId, options);
} else if (options.type === 'Thumb') {
if (item.SeriesThumbImageTag) {
options.tag = item.SeriesThumbImageTag;
return ServerConnections.getApiClient(item.ServerId).getScaledImageUrl(item.SeriesId, options);
} else if (item.ParentThumbImageTag) {
options.tag = item.ParentThumbImageTag;
return ServerConnections.getApiClient(item.ServerId).getScaledImageUrl(item.ParentThumbItemId, options);
}
}
return null;
}
function imageUrl(item, options = {}) {
options.type = options.type || 'Primary';
if (item.ImageTags?.[options.type]) {
options.tag = item.ImageTags[options.type];
return ServerConnections.getApiClient(item.ServerId).getScaledImageUrl(item.Id, options);
} else if (item.AlbumId && item.AlbumPrimaryImageTag) {
options.tag = item.AlbumPrimaryImageTag;
return ServerConnections.getApiClient(item.ServerId).getScaledImageUrl(item.AlbumId, options);
}
return null;
}
function getImageUrl(item, imageOptions = {}) {
const url = seriesImageUrl(item, imageOptions) || imageUrl(item, imageOptions);
if (url) {
const height = imageOptions.height || imageOptions.maxHeight;
return {
src: url,
sizes: height + 'x' + height
};
} else {
return null;
}
}
function getImageUrls(item, imageSizes = [96, 128, 192, 256, 384, 512]) {
const 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') {
// 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;
}
const item = state.NowPlayingItem;
if (!item) {
hideMediaControls();
return;
}
if (eventName === 'init') { // transform "init" event into "timeupdate" to restraint update rate
eventName = 'timeupdate';
}
const isVideo = item.MediaType === 'Video';
const isLocalPlayer = player.isLocalPlayer || false;
// Local players do their own notifications
if (isLocalPlayer && isVideo) {
return;
}
const playState = state.PlayState || {};
const parts = nowPlayingHelper.getNowPlayingNames(item);
const artist = parts[parts.length - 1].text;
const title = parts.length === 1 ? '' : parts[0].text;
const album = item.Album || '';
const itemId = item.Id;
// Convert to ms
const duration = parseInt(item.RunTimeTicks ? (item.RunTimeTicks / 10000) : 0, 10);
const currentTime = parseInt(playState.PositionTicks ? (playState.PositionTicks / 10000) : 0, 10);
const isPaused = playState.IsPaused || false;
const canSeek = playState.CanSeek || false;
if ('mediaSession' in navigator) {
/* eslint-disable-next-line compat/compat */
navigator.mediaSession.metadata = new MediaMetadata({
title: title,
artist: artist,
album: album,
artwork: getImageUrls(item)
});
} else {
const itemImageUrl = seriesImageUrl(item, { maxHeight: 3000 }) || imageUrl(item, { maxHeight: 3000 });
shell.updateMediaSession({
action: eventName,
isLocalPlayer: isLocalPlayer,
itemId: itemId,
title: title,
artist: artist,
album: album,
duration: duration,
position: currentTime,
imageUrl: itemImageUrl,
canSeek: canSeek,
isPaused: isPaused
});
}
}
function onGeneralEvent(e) {
const state = playbackManager.getPlayerState(this);
updatePlayerState(this, state, e.type);
}
function onStateChanged(e, state) {
updatePlayerState(this, state, 'statechange');
}
function onPlaybackStart(e, state) {
updatePlayerState(this, state, e.type);
}
function onPlaybackStopped() {
hideMediaControls();
}
function releaseCurrentPlayer() {
if (currentPlayer) {
Events.off(currentPlayer, 'playbackstart', onPlaybackStart);
Events.off(currentPlayer, 'playbackstop', onPlaybackStopped);
Events.off(currentPlayer, 'unpause', onGeneralEvent);
Events.off(currentPlayer, 'pause', onGeneralEvent);
Events.off(currentPlayer, 'statechange', onStateChanged);
Events.off(currentPlayer, 'timeupdate', onGeneralEvent);
currentPlayer = null;
hideMediaControls();
}
}
function hideMediaControls() {
if ('mediaSession' in navigator) {
/* eslint-disable-next-line compat/compat */
navigator.mediaSession.metadata = null;
} else {
shell.hideMediaSession();
}
}
function bindToPlayer(player) {
releaseCurrentPlayer();
if (!player) {
return;
}
currentPlayer = player;
const state = playbackManager.getPlayerState(player);
updatePlayerState(player, state, 'init');
Events.on(currentPlayer, 'playbackstart', onPlaybackStart);
Events.on(currentPlayer, 'playbackstop', onPlaybackStopped);
Events.on(currentPlayer, 'unpause', onGeneralEvent);
Events.on(currentPlayer, 'pause', onGeneralEvent);
Events.on(currentPlayer, 'statechange', onStateChanged);
Events.on(currentPlayer, 'timeupdate', onGeneralEvent);
}
function execute(name) {
playbackManager[name](currentPlayer);
}
if ('mediaSession' in navigator) {
/* eslint-disable-next-line compat/compat */
navigator.mediaSession.setActionHandler('previoustrack', function () {
execute('previousTrack');
});
/* eslint-disable-next-line compat/compat */
navigator.mediaSession.setActionHandler('nexttrack', function () {
execute('nextTrack');
});
/* eslint-disable-next-line compat/compat */
navigator.mediaSession.setActionHandler('play', function () {
execute('unpause');
});
/* eslint-disable-next-line compat/compat */
navigator.mediaSession.setActionHandler('pause', function () {
execute('pause');
});
/* eslint-disable-next-line compat/compat */
navigator.mediaSession.setActionHandler('seekbackward', function () {
execute('rewind');
});
/* eslint-disable-next-line compat/compat */
navigator.mediaSession.setActionHandler('seekforward', function () {
execute('fastForward');
});
/* eslint-disable-next-line compat/compat */
navigator.mediaSession.setActionHandler('seekto', function (object) {
const item = playbackManager.getPlayerState(currentPlayer).NowPlayingItem;
// Convert to ms
const duration = parseInt(item.RunTimeTicks ? (item.RunTimeTicks / 10000) : 0, 10);
const wantedTime = object.seekTime * 1000;
playbackManager.seekPercent(wantedTime / duration * 100, currentPlayer);
});
}
Events.on(playbackManager, 'playerchange', function () {
bindToPlayer(playbackManager.getCurrentPlayer());
});
bindToPlayer(playbackManager.getCurrentPlayer());

6
src/components/playback/playbackmanager.js
View file

@ -21,8 +21,9 @@ import { includesAny } from '../../utils/container.ts';
import { getItems } from '../../utils/jellyfin-apiclient/getItems.ts';
import { getItemBackdropImageUrl } from '../../utils/jellyfin-apiclient/backdropImage';
import { bindMediaSegmentManager } from 'apps/stable/features/playback/utils/mediaSegmentManager';
import { PlayerEvent } from 'apps/stable/features/playback/constants/playerEvent';
import { bindMediaSegmentManager } from 'apps/stable/features/playback/utils/mediaSegmentManager';
import { bindMediaSessionSubscriber } from 'apps/stable/features/playback/utils/mediaSessionSubscriber';
import { MediaError } from 'types/mediaError';
import { getMediaError } from 'utils/mediaError';
import { toApi } from 'utils/jellyfin-apiclient/compat';
@ -3663,7 +3664,6 @@ export class PlaybackManager {
});
}
bindMediaSegmentManager(self);
if (!browser.tv && !browser.xboxOne && !browser.ps4) {
this._skipSegment = bindSkipSegment(self);
}
@ -4230,6 +4230,8 @@ export class PlaybackManager {
}
export const playbackManager = new PlaybackManager();
bindMediaSegmentManager(playbackManager);
bindMediaSessionSubscriber(playbackManager);
window.addEventListener('beforeunload', function () {
try {

49
src/components/remotecontrol/remotecontrol.js
View file

@ -22,6 +22,7 @@ import ServerConnections from '../ServerConnections';
import toast from '../toast/toast';
import { appRouter } from '../router/appRouter';
import { getDefaultBackgroundClass } from '../cardbuilder/cardBuilderUtils';
import { getImageUrl } from 'apps/stable/features/playback/utils/image';
let showMuteButton = true;
let showVolumeSlider = true;
@ -91,50 +92,6 @@ function getNowPlayingNameHtml(nowPlayingItem, includeNonNameInfo) {
}).join('<br/>');
}
function seriesImageUrl(item, options) {
if (item.Type !== 'Episode') {
return null;
}
options = options || {};
options.type = options.type || 'Primary';
if (options.type === 'Primary' && item.SeriesPrimaryImageTag) {
options.tag = item.SeriesPrimaryImageTag;
return ServerConnections.getApiClient(item.ServerId).getScaledImageUrl(item.SeriesId, options);
}
if (options.type === 'Thumb') {
if (item.SeriesThumbImageTag) {
options.tag = item.SeriesThumbImageTag;
return ServerConnections.getApiClient(item.ServerId).getScaledImageUrl(item.SeriesId, options);
}
if (item.ParentThumbImageTag) {
options.tag = item.ParentThumbImageTag;
return ServerConnections.getApiClient(item.ServerId).getScaledImageUrl(item.ParentThumbItemId, options);
}
}
return null;
}
function imageUrl(item, options) {
options = options || {};
options.type = options.type || 'Primary';
if (item.ImageTags?.[options.type]) {
options.tag = item.ImageTags[options.type];
return ServerConnections.getApiClient(item.ServerId).getScaledImageUrl(item.PrimaryImageItemId || item.Id, options);
}
if (item.AlbumId && item.AlbumPrimaryImageTag) {
options.tag = item.AlbumPrimaryImageTag;
return ServerConnections.getApiClient(item.ServerId).getScaledImageUrl(item.AlbumId, options);
}
return null;
}
function updateNowPlayingInfo(context, state, serverId) {
const item = state.NowPlayingItem;
const displayName = item ? getNowPlayingNameHtml(item).replace('<br/>', ' - ') : '';
@ -193,9 +150,7 @@ function updateNowPlayingInfo(context, state, serverId) {
context.querySelector('.nowPlayingPageTitle').classList.add('hide');
}
const url = seriesImageUrl(item, {
maxHeight: 300
}) || imageUrl(item, {
const url = getImageUrl(item, {
maxHeight: 300
});