feat: add fullscreen API on player element (#1107)

this is needed for iOS. fix #643

Author: luwes

examples/vanilla-ts-esm/public/mux-player.html

@@ -56,6 +56,28 @@ <h2>On-demand</h2>
       });
     </script>
 
+    <button id="request-fullscreen">
+      Request Fullscreen
+    </button>
+    <script>
+      document.getElementById('request-fullscreen').addEventListener('click', async () => {
+        const player = document.querySelector('mux-player');
+        await player.requestFullscreen();
+        console.log('Entered fullscreen');
+      });
+    </script>
+
+    <button id="exit-fullscreen">
+      Exit Fullscreen
+    </button>
+    <script>
+      document.getElementById('exit-fullscreen').addEventListener('click', async () => {
+        const player = document.querySelector('mux-player');
+        await player.exitFullscreen();
+        console.log('Exited fullscreen');
+      });
+    </script>
+
     <h2>Live</h2>
 
     <mux-player

packages/mux-player/src/index.ts

@@ -1,7 +1,7 @@
 import { globalThis, document } from './polyfills';
 import { MediaController, MediaErrorDialog } from 'media-chrome';
 import { Attributes as MediaControllerAttributes } from 'media-chrome/dist/media-container.js';
-import { MediaUIAttributes } from 'media-chrome/dist/constants.js';
+import { MediaStateChangeEvents, MediaUIAttributes, MediaUIEvents } from 'media-chrome/dist/constants.js';
 import 'media-chrome/dist/experimental/index.js';
 import { MediaThemeElement } from 'media-chrome/dist/media-theme-element.js';
 import MuxVideoElement, { MediaError, Attributes as MuxVideoAttributes } from '@mux/mux-video';
@@ -809,6 +809,40 @@ class MuxPlayerElement extends VideoApiElement implements MuxPlayerElement {
     this.#render({ [toPropName(attrName)]: newValue });
   }
 
+  async requestFullscreen(_options?: FullscreenOptions) {
+    if (!this.mediaController || this.mediaController.hasAttribute(MediaUIAttributes.MEDIA_IS_FULLSCREEN)) {
+      return;
+    }
+    this.mediaController?.dispatchEvent(
+      new globalThis.CustomEvent(MediaUIEvents.MEDIA_ENTER_FULLSCREEN_REQUEST, {
+        composed: true,
+        bubbles: true,
+      })
+    );
+    return new Promise<void>((resolve, _reject) => {
+      this.mediaController?.addEventListener(MediaStateChangeEvents.MEDIA_IS_FULLSCREEN, () => resolve(), {
+        once: true,
+      });
+    });
+  }
+
+  async exitFullscreen() {
+    if (!this.mediaController || !this.mediaController.hasAttribute(MediaUIAttributes.MEDIA_IS_FULLSCREEN)) {
+      return;
+    }
+    this.mediaController?.dispatchEvent(
+      new globalThis.CustomEvent(MediaUIEvents.MEDIA_EXIT_FULLSCREEN_REQUEST, {
+        composed: true,
+        bubbles: true,
+      })
+    );
+    return new Promise<void>((resolve, _reject) => {
+      this.mediaController?.addEventListener(MediaStateChangeEvents.MEDIA_IS_FULLSCREEN, () => resolve(), {
+        once: true,
+      });
+    });
+  }
+
   get preferCmcd() {
     return (this.getAttribute(MuxVideoAttributes.PREFER_CMCD) as ValueOf<CmcdTypes>) ?? undefined;
   }