docs: add airplay button and unavailable CSS

luwes · Jun 7, 2024 · e98d4ec · e98d4ec
1 parent 2856ac4
commit e98d4ec
Showing 1 changed file with 16 additions and 2 deletions.
diff --git a/docs/src/layouts/MediaElementLayout.astro b/docs/src/layouts/MediaElementLayout.astro
@@ -22,14 +22,27 @@ headings.push({ depth: 2, slug: 'installing', text: 'Installing' });
   <SandpackContainer
     stacked
     reversed
-    editorHeight={435}
+    editorHeight={455}
     previewAspectRatio={frontmatter.previewAspectRatio ?? frontmatter.aspectRatio}
     dependencies={frontmatter.dependencies}
     hiddenCss={`
       media-controller:not([audio]),
       ${frontmatter.tagName} {
         aspect-ratio: ${frontmatter.aspectRatio ?? '16 / 9'};
-      }`
+      }
+
+      media-controller:not([mediasubtitleslist]) media-captions-selectmenu,
+      media-captions-button:not([mediasubtitleslist]),
+      media-rendition-selectmenu[mediarenditionunavailable],
+      media-audio-track-selectmenu[mediaaudiotrackunavailable],
+      media-volume-range[mediavolumeunavailable],
+      media-airplay-button[mediaairplayunavailable],
+      media-fullscreen-button[mediafullscreenunavailable],
+      media-cast-button[mediacastunavailable],
+      media-pip-button[mediapipunavailable] {
+        display: none;
+      }
+      `
     }
     html={frontmatter.html ?? `<media-controller>
   <${frontmatter.tagName}
@@ -48,6 +61,7 @@ headings.push({ depth: 2, slug: 'installing', text: 'Installing' });
     <media-time-range></media-time-range>
     <media-time-display showduration remaining></media-time-display>
     <media-playback-rate-button></media-playback-rate-button>
+    <media-airplay-button></media-airplay-button>
     <media-fullscreen-button></media-fullscreen-button>
   </media-control-bar>
 </media-controller>`}