Merge pull request #6271 from thornbill/media-session-subscriber

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,60 @@
+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,180 @@
+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 { getNowPlayingNames } 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 [ line1, line2 ] = getNowPlayingNames(item, false) || [];
+        // The artist will be the second line if present or the first line otherwise
+        const artist = (line2 || line1)?.text;
+        // The title will be the first line if there are two lines
+        const title = (line2 && line1)?.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),