feat: add error dialog (#143)

muxinc · Dec 9, 2024 · 2edd3fe · 2edd3fe
1 parent c24c6e7
commit 2edd3fe
Show file tree

Hide file tree

Showing 14 changed files with 38 additions and 31 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -58,7 +58,7 @@
     "dev": "chokidar --debounce 50 './themes/*/!(dist|.turbo)' -c 'turbo build --force --filter=./$(dirname {path}) && touch ./site/$(dirname {path}).md'"
   },
   "dependencies": {
-    "media-chrome": "^4.2.2"
+    "media-chrome": "~4.3.0"
   },
   "devDependencies": {
     "@player.style/demuxed-2022": "0.0.12",

diff --git a/site/package.json b/site/package.json
@@ -11,7 +11,7 @@
   "dependencies": {
     "@mdx-js/loader": "^3.0.1",
     "@mdx-js/react": "^3.0.1",
-    "@mux/mux-video": "0.21.0-canary.0-4375d6f",
+    "@mux/mux-video": "0.22.0-canary.0-2fbb2c1",
     "@mux/mux-video-react": "^0.11.3",
     "@next/mdx": "^14.2.12",
     "@radix-ui/react-popover": "^1.1.1",

diff --git a/themes/demuxed-2022/template.html b/themes/demuxed-2022/template.html
@@ -239,6 +239,7 @@
 >
   <slot name="media" slot="media"></slot>
   <slot name="poster" slot="poster"></slot>
+  <media-error-dialog slot="dialog"></media-error-dialog>
   <div class="demuxed-gradient-bottom"></div>
   <div slot="top-chrome">
     <media-cast-button class="small-button">

diff --git a/themes/halloween/template.html b/themes/halloween/template.html
@@ -154,7 +154,6 @@
 
   .media-volume-wrapper {
     position: relative;
-    z-index: 2;
     width: 1em;
   }
 
@@ -251,6 +250,7 @@
 >
   <slot name="media" slot="media"></slot>
   <slot name="poster" slot="poster"></slot>
+  <media-error-dialog slot="dialog"></media-error-dialog>
 
   <div slot="centered-chrome">
     <media-play-button mediapaused>

diff --git a/themes/instaplay/template.html b/themes/instaplay/template.html
@@ -125,6 +125,7 @@
 >
   <slot name="media" slot="media"></slot>
   <slot name="poster" slot="poster"></slot>
+  <media-error-dialog slot="dialog"></media-error-dialog>
 
   <media-play-button slot="centered-chrome">
     <svg slot="play" aria-hidden="true" viewBox="0 0 24 24" fill="currentColor">

diff --git a/themes/microvideo/template.html b/themes/microvideo/template.html
@@ -424,6 +424,7 @@
   <slot name="media" slot="media"></slot>
   <slot name="poster" slot="poster"></slot>
   <media-loading-indicator slot="centered-chrome" noautohide></media-loading-indicator>
+  <media-error-dialog slot="dialog"></media-error-dialog>
 
   <template if="streamtype == 'on-demand'">
 

diff --git a/themes/minimal/template.html b/themes/minimal/template.html
@@ -263,6 +263,7 @@
   <slot name="media" slot="media"></slot>
   <slot name="poster" slot="poster"></slot>
   <media-loading-indicator slot="centered-chrome" noautohide></media-loading-indicator>
+  <media-error-dialog slot="dialog"></media-error-dialog>
 
   <template if="title">
     <div slot="top-chrome">

diff --git a/themes/notflix/template.html b/themes/notflix/template.html
@@ -99,7 +99,6 @@
 
   .media-volume-wrapper {
     position: relative;
-    z-index: 2;
   }
 
   .media-volume-range-wrapper {
@@ -189,6 +188,7 @@
   <slot name="media" slot="media"></slot>
   <slot name="poster" slot="poster"></slot>
   <media-loading-indicator slot="centered-chrome" noautohide></media-loading-indicator>
+  <media-error-dialog slot="dialog"></media-error-dialog>
 
   <div class="time-bar">
     <media-time-range></media-time-range>

diff --git a/themes/reelplay/template.html b/themes/reelplay/template.html
@@ -306,6 +306,8 @@
   nohotkeys="{{nohotkeys}}"
   defaultstreamtype="on-demand"
 >
+  <media-error-dialog slot="dialog"></media-error-dialog>
+
   <div slot="top-chrome">
     <div class="top-bar">
       <span>ReelPlay: Welcome!</span>

diff --git a/themes/sutro/template.html b/themes/sutro/template.html
@@ -78,6 +78,7 @@
 >
   <slot name="media" slot="media"></slot>
   <slot name="poster" slot="poster"></slot>
+  <media-error-dialog slot="dialog"></media-error-dialog>
 
   <!-- Controls Gradient -->
   <style>
@@ -318,7 +319,6 @@
     <style>
       media-mute-button {
         position: relative;
-        z-index: 1;
       }
 
       media-mute-button .muted-path {
@@ -514,7 +514,6 @@
     <style>
       media-time-display {
         position: relative;
-        z-index: 1;
         padding: calc(0.5 * var(--base));
         font-size: calc(0.7 * var(--base));
         border-radius: calc(0.5 * var(--base));

diff --git a/themes/vimeonova/template.html b/themes/vimeonova/template.html
@@ -161,7 +161,6 @@
     --media-box-margin: 0;
     --media-preview-time-background: rgb(var(--vimeonova-black) / 1);
     padding-inline: 10px;
-    z-index: 1;
   }
 
   media-time-range.small {
@@ -354,6 +353,7 @@
 >
   <slot name="media" slot="media"></slot>
   <slot name="poster" slot="poster"></slot>
+  <media-error-dialog slot="dialog"></media-error-dialog>
 
   <div slot="top-chrome" class="header">
     <template if="mediatitle">

diff --git a/themes/x-mas/template.html b/themes/x-mas/template.html
@@ -281,6 +281,7 @@
 >
   <slot name="media" slot="media"></slot>
   <slot name="poster" slot="poster"></slot>
+  <media-error-dialog slot="dialog"></media-error-dialog>
   <div class="gradient-bottom"></div>
   <div slot="top-chrome">
     <svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" viewBox="0 0 310 169">

diff --git a/themes/yt/template.html b/themes/yt/template.html
@@ -68,6 +68,7 @@
 >
   <slot name="media" slot="media"></slot>
   <slot name="poster" slot="poster"></slot>
+  <media-error-dialog slot="dialog"></media-error-dialog>
 
   <!-- Gradient -->
   <style>