feat: use MC media-error-dialog

requires muxinc/media-chrome#1024
luwes · Dec 5, 2024 · 5001fb0 · 5001fb0
1 parent b762184
commit 5001fb0
Show file tree

Hide file tree

Showing 15 changed files with 159 additions and 354 deletions.
diff --git a/examples/vanilla-ts-esm/public/index.html b/examples/vanilla-ts-esm/public/index.html
@@ -29,6 +29,7 @@ <h1><a href="/">Elements</a></h1>
         <li><a href="./mux-video.html" class="video">&lt;mux-video&gt;</a></li>
         <li><a href="./mux-audio.html" class="audio">&lt;mux-audio&gt;</a></li>
         <li><a href="./mux-player.html" class="player">&lt;mux-player&gt;</a></li>
+        <li><a href="./mux-player-error.html" class="player">&lt;mux-player&gt; (error)</a></li>
         <li><a href="./mux-player-audio.html" class="player">&lt;mux-player audio&gt;</a></li>
         <li><a href="./mux-player-cuepoints.html" class="player">&lt;mux-player&gt; (cuePoints)</a></li>
         <li><a href="./mux-player-chapters.html" class="player">&lt;mux-player&gt; (chapters)</a></li>

diff --git a/examples/vanilla-ts-esm/public/mux-player-error.html b/examples/vanilla-ts-esm/public/mux-player-error.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta name="viewport" content="width=device-width" />
+    <title>&lt;mux-player&gt; example</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css">
+    <link rel="stylesheet" href="./styles.css">
+    <script type="module" src="./dist/mux-player.js"></script>
+    <style>
+      mux-player {
+        display: block;
+        width: 100%;
+        margin: 1rem 0 2rem;
+        background-color: #000;
+      }
+
+      mux-player:not([audio]) {
+        aspect-ratio: 16 / 9;
+      }
+    </style>
+  </head>
+  <body>
+    <header>
+      <div class="left-header">
+        <a class="mux-logo" href="https://www.mux.com/player" target="_blank">
+          <picture>
+            <source media="(prefers-color-scheme: dark)" srcset="https://user-images.githubusercontent.com/360826/233653989-11cd8603-c20f-4008-8bf7-dc15b743c52b.svg">
+            <source media="(prefers-color-scheme: light)" srcset="https://user-images.githubusercontent.com/360826/233653583-50dda726-cbe7-4182-a113-059a91ae83e6.svg">
+            <img alt="Mux Logo" src="https://user-images.githubusercontent.com/360826/233653583-50dda726-cbe7-4182-a113-059a91ae83e6.svg">
+          </picture>
+        </a>
+        <h1><a href="/">Elements</a></h1>
+      </div>
+      <div class="right-header">
+        <a class="github-logo" href="https://github.com/muxinc/elements" target="_blank">
+          <img width="32" height="32" src="./images/github-logo.svg" alt="Github logo">
+        </a>
+      </div>
+    </header>
+
+    <!-- Correct playbackid: Sc89iWAyNkhJ3P1rQ02nrEdCFTnfT01CZ2KmaEcxXfB008 -->
+    <mux-player
+      stream-type="on-demand"
+      playback-id="Sc89iWAyNkhJ3P1rQ02nrEdCFTnfT01CZ2KmaEcxXfB00"
+    ></mux-player>
+
+    <button id="load-video-btn">Load new playback id</button>
+    <br>
+    <br>
+
+    <!-- Load new playback id -->
+    <script>
+      const player = document.querySelector('mux-player');
+      const loadVideoBtn = document.getElementById('load-video-btn');
+
+      loadVideoBtn.addEventListener('click', () => {
+        player.playbackId = 'Sc89iWAyNkhJ3P1rQ02nrEdCFTnfT01CZ2KmaEcxXfB008';
+      });
+    </script>
+
+    <a href="../">Browse Elements</a>
+  </body>
+</html>
diff --git a/packages/mux-player/src/dialog.ts b/packages/mux-player/src/dialog.ts
diff --git a/packages/mux-player/src/index.ts b/packages/mux-player/src/index.ts
@@ -1,5 +1,5 @@
 import { globalThis, document } from './polyfills';
-import { MediaController } from 'media-chrome';
+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 'media-chrome/dist/experimental/index.js';
@@ -179,6 +179,34 @@ function getProps(el: MuxPlayerElement, state?: any): MuxTemplateProps {
   return props;
 }
 
+MediaErrorDialog.formatErrorMessage = (error: { code?: number; message?: string }) => {
+  if (error instanceof MediaError) {
+    const { dialog } = getErrorLogs(error, false);
+    return `
+      ${dialog?.title ? `<h3>${dialog.title}</h3>` : ''}
+      ${
+        dialog?.message || dialog?.linkUrl
+          ? `<p>
+        ${dialog?.message}
+        ${
+          dialog?.linkUrl
+            ? `<a
+              href="${dialog.linkUrl}"
+              target="_blank"
+              rel="external noopener"
+              aria-label="${dialog.linkText ?? ''} ${i18n(`(opens in a new window)`)}"
+              >${dialog.linkText ?? dialog.linkUrl}</a
+            >`
+            : ''
+        }
+      </p>`
+          : ''
+      }
+    `;
+  }
+  return error.message ?? '';
+};
+
 function getThemeTemplate(el: MuxPlayerElement) {
   let themeName = el.theme;
 
@@ -234,7 +262,6 @@ export const playerSoftwareVersion = getPlayerVersion();
 export const playerSoftwareName = 'mux-player';
 
 const initialState = {
-  dialog: undefined,
   isDialogOpen: false,
 };
 
@@ -289,10 +316,18 @@ class MuxPlayerElement extends VideoApiElement implements MuxPlayerElement {
   #hotkeys = new AttributeTokenList(this, 'hotkeys');
   #state: Partial<MuxTemplateProps> = {
     ...initialState,
-    onCloseErrorDialog: () => this.#setState({ dialog: undefined, isDialogOpen: false }),
-    onInitFocusDialog: (e) => {
+    onCloseErrorDialog: (event) => {
+      const localName = (event.composedPath()[0] as HTMLElement)?.localName;
+      if (localName !== 'media-error-dialog') return;
+
+      this.#setState({ isDialogOpen: false });
+    },
+    onFocusInErrorDialog: (event) => {
+      const localName = (event.composedPath()[0] as HTMLElement)?.localName;
+      if (localName !== 'media-error-dialog') return;
+
       const isFocusedElementInPlayer = containsComposedNode(this, document.activeElement);
-      if (!isFocusedElementInPlayer) e.preventDefault();
+      if (!isFocusedElementInPlayer) event.preventDefault();
     },
   };
 
@@ -467,7 +502,7 @@ class MuxPlayerElement extends VideoApiElement implements MuxPlayerElement {
         return;
       }
 
-      const { dialog, devlog } = getErrorLogs(error, false);
+      const { devlog } = getErrorLogs(error, false);
 
       if (devlog.message) {
         logger.devlog(devlog);
@@ -478,7 +513,7 @@ class MuxPlayerElement extends VideoApiElement implements MuxPlayerElement {
         logger.error(`${error.name} data:`, error.data);
       }
 
-      this.#setState({ isDialogOpen: true, dialog });
+      this.#setState({ isDialogOpen: true });
     };
 
     // Keep this event listener on mux-player instead of calling onError directly