From 579566daa39476592ddfb1bdbcd3ceae736e725b Mon Sep 17 00:00:00 2001
From: lianbenjamin <79077248+lianbenjamin@users.noreply.github.com>
Date: Wed, 17 Apr 2024 13:32:01 +0300
Subject: [PATCH] feat(FEC-13871): set the entry name to navigator media
 metadata (#765)

### Description of the Changes

when playing a media on a mobile device and exiting the browser- the
request is for the mobile device to show the entry name of the media
that is played and the thumbnail as the background, in the native device
player.

- using `MediaMetadata` object to pass to the `navigator.mediaSession`
- configuring the navigator `mediaSession` in `setMedia` to cover
playlist and setMedia use-cases
- in case there is not entry name or poster, resetting to empty string
so it will not show the previews information

#### Resolves FEC-13871
---
 src/kaltura-player.ts | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/src/kaltura-player.ts b/src/kaltura-player.ts
index edcfbe495..0743787ff 100644
--- a/src/kaltura-player.ts
+++ b/src/kaltura-player.ts
@@ -206,6 +206,7 @@ export class KalturaPlayer extends FakeEventTarget {
       playerConfig.playback = playback;
     }
     this.configure({ ...playerConfig, sources });
+    this._configureInformationForDevice(mediaConfig);
   }
 
   public async loadPlaylist(playlistInfo: ProviderPlaylistInfoObject, playlistConfig: PlaylistConfigObject): Promise<ProviderPlaylistObject> {
@@ -823,6 +824,29 @@ export class KalturaPlayer extends FakeEventTarget {
     return this._localPlayer.Error;
   }
 
+  private _configureInformationForDevice(mediaConfig: KPMediaConfig): void {
+    // here we can provide information about the media, to a device that is playing it
+    // set the media metadata title to the name of the entry, if exists
+    // set the media thumbnail to appear as the background of a native device's player, if exists
+    const getMediaThumbnail = (poster: any): string => {
+      if (typeof poster === 'string') {
+        return poster;
+      }
+      if (Array.isArray(poster) && poster.length > 0) {
+        return poster[0];
+      }
+      return '';
+    };
+
+    if (navigator.mediaSession) {
+      const mediaThumbnail = getMediaThumbnail(mediaConfig.sources.poster);
+      navigator.mediaSession.metadata = new MediaMetadata({
+        title: mediaConfig.sources.metadata?.name || '',
+        artwork: mediaThumbnail ? [{ src: mediaThumbnail }] : []
+      });
+    }
+  }
+
   private _addBindings(): void {
     this._eventManager.listen(this, CoreEventType.CHANGE_SOURCE_STARTED, () => this._onChangeSourceStarted());
     this._eventManager.listen(this, CoreEventType.CHANGE_SOURCE_ENDED, () => this._onChangeSourceEnded());