feat: add fullscreen API on player element

this is needed for iOS. fix #643

Author: luwes

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

@@ -56,6 +56,26 @@ <h2>On-demand</h2>
       });
     </script>
 
+    <button id="request-fullscreen">
+      Request Fullscreen
+    </button>
+    <script>
+      document.getElementById('request-fullscreen').addEventListener('click', () => {
+        const player = document.querySelector('mux-player');
+        player.requestFullscreen();
+      });
+    </script>
+
+    <button id="exit-fullscreen">
+      Exit Fullscreen
+    </button>
+    <script>
+      document.getElementById('exit-fullscreen').addEventListener('click', () => {
+        const player = document.querySelector('mux-player');
+        player.exitFullscreen();
+      });
+    </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 { 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,24 @@ class MuxPlayerElement extends VideoApiElement implements MuxPlayerElement {
     this.#render({ [toPropName(attrName)]: newValue });
   }
 
+  async requestFullscreen(_options?: FullscreenOptions) {
+    this.mediaController?.dispatchEvent(
+      new globalThis.CustomEvent(MediaUIEvents.MEDIA_ENTER_FULLSCREEN_REQUEST, {
+        composed: true,
+        bubbles: true,
+      })
+    );
+  }
+
+  async exitFullscreen() {
+    this.mediaController?.dispatchEvent(
+      new globalThis.CustomEvent(MediaUIEvents.MEDIA_EXIT_FULLSCREEN_REQUEST, {
+        composed: true,
+        bubbles: true,
+      })
+    );
+  }
+
   get preferCmcd() {
     return (this.getAttribute(MuxVideoAttributes.PREFER_CMCD) as ValueOf<CmcdTypes>) ?? undefined;
   }