Refactor media session to playback subscriber

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