Refactor media session to playback subscriber

src/apps/stable/features/playback/constants/playerEvent.ts

@@ -17,6 +17,7 @@ export enum PlayerEvent {
     PromptSkip = 'promptskip',
     RepeatModeChange = 'repeatmodechange',
     ShuffleModeChange = 'shufflequeuemodechange',
+    StateChange = 'statechange',
     Stopped = 'stopped',
     TimeUpdate = 'timeupdate',
     Unpause = 'unpause',

src/apps/stable/features/playback/utils/image.ts

@@ -0,0 +1,59 @@
+import { BaseItemKind } from '@jellyfin/sdk/lib/generated-client/models/base-item-kind';
+import { ImageType } from '@jellyfin/sdk/lib/generated-client/models/image-type';
+
+import ServerConnections from 'components/ServerConnections';
+import type { ItemDto } from 'types/base/models/item-dto';
+
+interface ImageOptions {
+    height?: number
+    maxHeight?: number
+    tag?: string
+    type?: ImageType
+}
+
+function getSeriesImageUrl(item: ItemDto, options: ImageOptions = {}) {
+    if (!item.ServerId) return null;
+
+    if (item.SeriesId && options.type === ImageType.Primary && item.SeriesPrimaryImageTag) {
+        options.tag = item.SeriesPrimaryImageTag;
+
+        return ServerConnections.getApiClient(item.ServerId).getScaledImageUrl(item.SeriesId, options);
+    }
+
+    if (options.type === ImageType.Thumb) {
+        if (item.SeriesId && item.SeriesThumbImageTag) {
+            options.tag = item.SeriesThumbImageTag;
+
+            return ServerConnections.getApiClient(item.ServerId).getScaledImageUrl(item.SeriesId, options);
+        }
+        if (item.ParentThumbItemId && item.ParentThumbImageTag) {
+            options.tag = item.ParentThumbImageTag;
+
+            return ServerConnections.getApiClient(item.ServerId).getScaledImageUrl(item.ParentThumbItemId, options);
+        }
+    }
+
+    return null;
+}
+
+export function getImageUrl(item: ItemDto, options: ImageOptions = {}) {
+    if (!item.ServerId) return null;
+
+    options.type = options.type || ImageType.Primary;
+
+    if (item.Type === BaseItemKind.Episode) return getSeriesImageUrl(item, options);
+
+    const itemId = item.PrimaryImageItemId || item.Id;
+
+    if (itemId && item.ImageTags?.[options.type]) {
+        options.tag = item.ImageTags[options.type];
+        return ServerConnections.getApiClient(item.ServerId).getScaledImageUrl(itemId, options);
+    }
+
+    if (item.AlbumId && item.AlbumPrimaryImageTag) {
+        options.tag = item.AlbumPrimaryImageTag;
+        return ServerConnections.getApiClient(item.ServerId).getScaledImageUrl(item.AlbumId, options);
+    }
+
+    return null;
+}

src/apps/stable/features/playback/utils/mediaSessionSubscriber.ts

@@ -0,0 +1,178 @@
+import { MediaType } from '@jellyfin/sdk/lib/generated-client/models/media-type';
+
+import { getImageUrl } from 'apps/stable/features/playback/utils/image';
+import { PlaybackSubscriber } from 'apps/stable/features/playback/utils/playbackSubscriber';
+import nowplayinghelper from 'components/playback/nowplayinghelper';
+import type { PlaybackManager } from 'components/playback/playbackmanager';
+import { MILLISECONDS_PER_SECOND, TICKS_PER_MILLISECOND } from 'constants/time';
+import browser from 'scripts/browser';
+import shell from 'scripts/shell';
+import type { ItemDto } from 'types/base/models/item-dto';
+import type { PlayerState } from 'types/playbackStopInfo';
+import type { Event } from 'utils/events';
+
+/** The default image resolutions to provide to the media session */
+const DEFAULT_IMAGE_SIZES = [96, 128, 192, 256, 384, 512];
+
+const hasNavigatorSession = 'mediaSession' in navigator;
+const hasNativeShell = !!window.NativeShell;
+
+const getArtwork = (item: ItemDto): MediaImage[] => {
+    const artwork: MediaImage[] = [];
+
+    DEFAULT_IMAGE_SIZES.forEach(height => {
+        const src = getImageUrl(item, { height });
+        if (src) {
+            artwork.push({
+                src,
+                sizes: `${height}x${height}`
+            });
+        }
+    });
+
+    return artwork;
+};
+
+const resetMediaSession = () => {
+    if (hasNavigatorSession) {
+        navigator.mediaSession.metadata = null;
+    } else if (hasNativeShell) {
+        shell.hideMediaSession();
+    }
+};
+
+/** A PlaybackSubscriber that manages MediaSession state and events. */
+class MediaSessionSubscriber extends PlaybackSubscriber {
+    constructor(playbackManager: PlaybackManager) {
+        super(playbackManager);
+
+        resetMediaSession();
+        if (hasNavigatorSession) this.bindNavigatorSession();
+    }
+
+    private bindNavigatorSession() {
+        /* eslint-disable compat/compat */
+        navigator.mediaSession.setActionHandler('pause', this.onMediaSessionAction.bind(this));
+        navigator.mediaSession.setActionHandler('play', this.onMediaSessionAction.bind(this));
+        navigator.mediaSession.setActionHandler('stop', this.onMediaSessionAction.bind(this));
+        navigator.mediaSession.setActionHandler('previoustrack', this.onMediaSessionAction.bind(this));
+        navigator.mediaSession.setActionHandler('nexttrack', this.onMediaSessionAction.bind(this));
+        navigator.mediaSession.setActionHandler('seekto', this.onMediaSessionAction.bind(this));
+        // iOS will only show next/prev track controls or seek controls
+        if (!browser.iOS) {
+            navigator.mediaSession.setActionHandler('seekbackward', this.onMediaSessionAction.bind(this));
+            navigator.mediaSession.setActionHandler('seekforward', this.onMediaSessionAction.bind(this));
+        }
+        /* eslint-enable compat/compat */
+    }
+
+    private onMediaSessionAction(details: MediaSessionActionDetails) {
+        switch (details.action) {
+            case 'pause':
+                return this.playbackManager.pause(this.player);
+            case 'play':
+                return this.playbackManager.unpause(this.player);
+            case 'stop':
+                return this.playbackManager.stop(this.player);
+            case 'seekbackward':
+                return this.playbackManager.rewind(this.player);
+            case 'seekforward':
+                return this.playbackManager.fastForward(this.player);
+            case 'seekto':
+                return this.playbackManager.seekMs((details.seekTime || 0) * MILLISECONDS_PER_SECOND, this.player);
+            case 'previoustrack':
+                return this.playbackManager.previousTrack(this.player);
+            case 'nexttrack':
+                return this.playbackManager.nextTrack(this.player);
+            default:
+                console.info('[MediaSessionSubscriber] Unhandled media session action', details);
+        }
+    }
+
+    private onMediaSessionUpdate(
+        { type: action }: Event,
+        state: PlayerState = this.playbackManager.getPlayerState(this.player)
+    ) {
+        const item = state.NowPlayingItem;
+
+        if (!item) {
+            console.debug('[MediaSessionSubscriber] no now playing item; resetting media session', state);
+            return resetMediaSession();
+        }
+
+        const isVideo = item.MediaType === MediaType.Video;
+        const isLocalPlayer = !!this.player?.isLocalPlayer;
+
+        // Local players do their own notifications
+        if (isLocalPlayer && isVideo) {
+            console.debug('[MediaSessionSubscriber] ignoring local player update');
+            return;
+        }
+
+        const album = item.Album || undefined;
+        const names = nowplayinghelper.getNowPlayingNames(item);
+        const artist = names[names.length - 1].text;
+        const title = names.length === 1 ? undefined : names[0].text;
+
+        if (hasNavigatorSession) {
+            if (
+                !navigator.mediaSession.metadata
+                || navigator.mediaSession.metadata.album !== album
+                || navigator.mediaSession.metadata.artist !== artist
+                || navigator.mediaSession.metadata.title !== title
+            ) {
+                navigator.mediaSession.metadata = new MediaMetadata({
+                    title,
+                    artist,
+                    album,
+                    artwork: getArtwork(item)
+                });
+            }
+        } else {
+            shell.updateMediaSession({
+                action,
+                isLocalPlayer,
+                itemId: item.Id,
+                title,
+                artist,
+                album,
+                duration: item.RunTimeTicks ? Math.round(item.RunTimeTicks / TICKS_PER_MILLISECOND) : 0,
+                position: state.PlayState.PositionTicks ? Math.round(state.PlayState.PositionTicks / TICKS_PER_MILLISECOND) : 0,
+                imageUrl: getImageUrl(item, { maxHeight: 3_000 }),
+                canSeek: !!state.PlayState.CanSeek,
+                isPaused: !!state.PlayState.IsPaused
+            });
+        }
+    }
+
+    onPlayerChange() {
+        this.onMediaSessionUpdate({ type: 'timeupdate' });
+    }
+
+    onPlayerPause(e: Event) {
+        this.onMediaSessionUpdate(e);
+    }
+
+    onPlayerPlaybackStart(e: Event, state: PlayerState) {
+        this.onMediaSessionUpdate(e, state);
+    }
+
+    onPlayerPlaybackStop() {
+        resetMediaSession();
+    }
+
+    onPlayerStateChange(e: Event, state: PlayerState) {
+        this.onMediaSessionUpdate(e, state);
+    }
+
+    onPlayerUnpause(e: Event) {
+        this.onMediaSessionUpdate(e);
+    }
+}
+
+/** Bind a new MediaSessionSubscriber to the specified PlaybackManager */
+export const bindMediaSessionSubscriber = (playbackManager: PlaybackManager) => {
+    if (hasNativeShell || hasNavigatorSession) {
+        return new MediaSessionSubscriber(playbackManager);
+    }
+};

src/apps/stable/features/playback/utils/playbackSubscriber.ts

@@ -1,24 +1,23 @@
 import type { BaseItemDto } from '@jellyfin/sdk/lib/generated-client/models/base-item-dto';
+import type { MediaSegmentDto } from '@jellyfin/sdk/lib/generated-client/models/media-segment-dto';
 import type { MediaSourceInfo } from '@jellyfin/sdk/lib/generated-client/models/media-source-info';
 
+import { PlaybackManagerEvent } from 'apps/stable/features/playback/constants/playbackManagerEvent';
+import { PlayerEvent } from 'apps/stable/features/playback/constants/playerEvent';
+import type { ManagedPlayerStopInfo, MovedItem, PlayerError, PlayerErrorCode, PlayerStopInfo, RemovedItems } from 'apps/stable/features/playback/types/callbacks';
 import type { PlaybackManager } from 'components/playback/playbackmanager';
 import type { MediaError } from 'types/mediaError';
 import type { PlayTarget } from 'types/playTarget';
 import type { PlaybackStopInfo, PlayerState } from 'types/playbackStopInfo';
-import type { Plugin } from 'types/plugin';
+import type { PlayerPlugin } from 'types/plugin';
 import Events, { type Event } from 'utils/events';
 
-import { PlaybackManagerEvent } from '../constants/playbackManagerEvent';
-import { PlayerEvent } from '../constants/playerEvent';
-import type { ManagedPlayerStopInfo, MovedItem, PlayerError, PlayerErrorCode, PlayerStopInfo, RemovedItems } from '../types/callbacks';
-import type { MediaSegmentDto } from '@jellyfin/sdk/lib/generated-client/models/media-segment-dto';
-
 export interface PlaybackSubscriber {
     onPlaybackCancelled?(e: Event): void
     onPlaybackError?(e: Event, errorType: MediaError): void
-    onPlaybackStart?(e: Event, player: Plugin, state: PlayerState): void
+    onPlaybackStart?(e: Event, player: PlayerPlugin, state: PlayerState): void
     onPlaybackStop?(e: Event, info: PlaybackStopInfo): void
-    onPlayerChange?(e: Event, player: Plugin, target: PlayTarget, previousPlayer: Plugin): void
+    onPlayerChange?(e: Event, player: PlayerPlugin, target: PlayTarget, previousPlayer: PlayerPlugin): void
     onPromptSkip?(e: Event, mediaSegment: MediaSegmentDto): void
     onPlayerError?(e: Event, error: PlayerError): void
     onPlayerFullscreenChange?(e: Event): void
@@ -34,6 +33,7 @@ export interface PlaybackSubscriber {
     onPlayerRepeatModeChange?(e: Event): void
     onPlayerShuffleModeChange?(e: Event): void
     onPlayerStopped?(e: Event, info?: PlayerStopInfo | PlayerErrorCode): void
+    onPlayerStateChange?(e: Event, state: PlayerState): void
     onPlayerTimeUpdate?(e: Event): void
     onPlayerUnpause?(e: Event): void
     onPlayerVolumeChange?(e: Event): void
@@ -41,7 +41,7 @@ export interface PlaybackSubscriber {
 }
 
 export abstract class PlaybackSubscriber {
-    protected player: Plugin | undefined;
+    protected player: PlayerPlugin | undefined;
 
     private readonly playbackManagerEvents = {
         [PlaybackManagerEvent.PlaybackCancelled]: this.onPlaybackCancelled?.bind(this),
@@ -67,6 +67,7 @@ export abstract class PlaybackSubscriber {
         [PlayerEvent.PromptSkip]: this.onPromptSkip?.bind(this),
         [PlayerEvent.RepeatModeChange]: this.onPlayerRepeatModeChange?.bind(this),
         [PlayerEvent.ShuffleModeChange]: this.onPlayerShuffleModeChange?.bind(this),
+        [PlayerEvent.StateChange]: this.onPlayerStateChange?.bind(this),
         [PlayerEvent.Stopped]: this.onPlayerStopped?.bind(this),
         [PlayerEvent.TimeUpdate]: this.onPlayerTimeUpdate?.bind(this),
         [PlayerEvent.Unpause]: this.onPlayerUnpause?.bind(this),

src/components/nowPlayingBar/nowPlayingBar.js

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

src/components/playback/mediasession.js

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

src/components/playback/playbackmanager.js

@@ -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';
@@ -3686,7 +3687,6 @@ export class PlaybackManager {
             });
         }
 
-        bindMediaSegmentManager(self);
         if (!browser.tv && !browser.xboxOne && !browser.ps4) {
             this._skipSegment = bindSkipSegment(self);
         }
@@ -4253,6 +4253,8 @@ export class PlaybackManager {
 }
 
 export const playbackManager = new PlaybackManager();
+bindMediaSegmentManager(playbackManager);
+bindMediaSessionSubscriber(playbackManager);
 
 window.addEventListener('beforeunload', function () {
     try {

src/components/remotecontrol/remotecontrol.js

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

src/constants/time.ts

@@ -1,8 +1,11 @@
+/** The number of milliseconds per second */
+export const MILLISECONDS_PER_SECOND = 1_000;
+
 /** The number of ticks per millisecond */
 export const TICKS_PER_MILLISECOND = 10_000;
 
 /** The number of ticks per second */
-export const TICKS_PER_SECOND = 1_000 * TICKS_PER_MILLISECOND;
+export const TICKS_PER_SECOND = MILLISECONDS_PER_SECOND * TICKS_PER_MILLISECOND;
 
 /** The number of ticks per minute */
 export const TICKS_PER_MINUTE = 60 * TICKS_PER_SECOND;

src/index.jsx

@@ -184,11 +184,6 @@ function loadPlatformFeatures() {
         import('./components/playback/volumeosd');
     }
 
-    /* eslint-disable-next-line compat/compat */
-    if (navigator.mediaSession || window.NativeShell) {
-        import('./components/playback/mediasession');
-    }
-
     if (!browser.tv && !browser.xboxOne) {
         import('./components/playback/playbackorientation');
         registerServiceWorker();

src/types/playbackStopInfo.ts

@@ -6,6 +6,8 @@ import type {
     PlayerStateInfo
 } from '@jellyfin/sdk/lib/generated-client';
 
+import type { ItemDto } from 'types/base/models/item-dto';
+
 export interface BufferedRange {
     start?: number;
     end?: number;
@@ -31,7 +33,7 @@ export interface MediaSource extends MediaSourceInfo {
 
 export interface PlayerState {
     PlayState: PlayState;
-    NowPlayingItem: BaseItemDto | null;
+    NowPlayingItem: ItemDto | null;
     NextItem: BaseItemDto | null;
     NextMediaType: MediaType | null;
     MediaSource: MediaSource | null;

src/types/plugin.ts

@@ -11,3 +11,7 @@ export interface Plugin {
     type: PluginType | string
     priority?: number
 }
+
+export interface PlayerPlugin extends Plugin {
+    isLocalPlayer?: boolean
+}