feat: add checkmark icon to listboxes

muxinc · Jul 27, 2023 · 861a9bc · 861a9bc
1 parent 7253a3a
commit 861a9bc
Show file tree

Hide file tree

Showing 16 changed files with 444 additions and 297 deletions.
diff --git a/examples/vanilla/control-elements/media-captions-listbox.html b/examples/vanilla/control-elements/media-captions-listbox.html
@@ -38,7 +38,6 @@ <h1>Captions Listbox</h1>
       <media-seek-backward-button seekoffset="15"></media-seek-backward-button>
       <media-seek-forward-button seekoffset="15"></media-seek-forward-button>
       <media-mute-button></media-mute-button>
-      <media-volume-range></media-volume-range>
       <media-time-range></media-time-range>
       <media-time-display showduration remaining></media-time-display>
       <media-captions-button></media-captions-button>

diff --git a/examples/vanilla/control-elements/media-playback-rate-listbox.html b/examples/vanilla/control-elements/media-playback-rate-listbox.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta name="viewport" content="width=device-width">
+  <title>Media Chrome Playback Rate Listbox</title>
+  <script type="module" src="../../../dist/index.js"></script>
+  <script type="module" src="../../../../dist/experimental/media-playback-rate-listbox.js"></script>
+  <style>
+    /** add styles to prevent CLS (Cumulative Layout Shift) */
+    media-controller:not([audio]) {
+      display: block;         /* expands the container if preload=none */
+      max-width: 540px;       /* allows the container to shrink if small */
+      aspect-ratio: 16 / 9;   /* set container aspect ratio if preload=none */
+    }
+
+    video {
+      width: 100%;      /* prevents video to expand beyond its container */
+    }
+
+    .examples {
+      margin-top: 20px;
+    }
+  </style>
+</head>
+<body>
+  <h1>Playback Rate Listbox</h1>
+
+  <media-controller id="mc">
+    <video
+      id="video"
+      slot="media"
+      src="https://stream.mux.com/O6LdRc0112FEJXH00bGsN9Q31yu5EIVHTgjTKRkKtEq1k/high.mp4"
+      poster="https://image.mux.com/O6LdRc0112FEJXH00bGsN9Q31yu5EIVHTgjTKRkKtEq1k/thumbnail.webp"
+      preload="metadata"
+      muted
+      crossorigin
+    ></video>
+    <media-control-bar>
+      <media-play-button></media-play-button>
+      <media-time-display showduration></media-time-display>
+      <media-time-range></media-time-range>
+      <media-mute-button></media-mute-button>
+      <media-pip-button></media-pip-button>
+      <media-fullscreen-button></media-fullscreen-button>
+    </media-control-bar>
+  </media-controller>
+  <br>
+
+  <media-playback-rate-listbox mediacontroller="mc"></media-playback-rate-listbox>
+
+
+  <div class="examples">
+    <a href="../">View more examples</a>
+  </div>
+</body>
+</html>
diff --git a/examples/vanilla/control-elements/media-playback-rate-selectmenu.html b/examples/vanilla/control-elements/media-playback-rate-selectmenu.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta name="viewport" content="width=device-width">
+  <title>Media Chrome Playback Rate Selectmenu</title>
+  <script type="module" src="../../../dist/index.js"></script>
+  <script type="module" src="../../../../dist/experimental/media-playback-rate-selectmenu.js"></script>
+  <style>
+    /** add styles to prevent CLS (Cumulative Layout Shift) */
+    media-controller:not([audio]) {
+      display: block;         /* expands the container if preload=none */
+      max-width: 540px;       /* allows the container to shrink if small */
+      aspect-ratio: 16 / 9;   /* set container aspect ratio if preload=none */
+    }
+
+    video {
+      width: 100%;      /* prevents video to expand beyond its container */
+    }
+
+    .examples {
+      margin-top: 20px;
+    }
+  </style>
+</head>
+<body>
+  <h1>Playback Rate Selectmenu</h1>
+
+  <media-controller id="mc">
+    <video
+      id="video"
+      slot="media"
+      src="https://stream.mux.com/O6LdRc0112FEJXH00bGsN9Q31yu5EIVHTgjTKRkKtEq1k/high.mp4"
+      poster="https://image.mux.com/O6LdRc0112FEJXH00bGsN9Q31yu5EIVHTgjTKRkKtEq1k/thumbnail.webp"
+      preload="metadata"
+      muted
+      crossorigin
+    ></video>
+    <media-control-bar>
+      <media-play-button></media-play-button>
+      <media-time-display showduration></media-time-display>
+      <media-time-range></media-time-range>
+      <media-mute-button></media-mute-button>
+      <media-playback-rate-selectmenu></media-playback-rate-selectmenu>
+      <media-pip-button></media-pip-button>
+      <media-fullscreen-button></media-fullscreen-button>
+    </media-control-bar>
+  </media-controller>
+
+  <div class="examples">
+    <a href="../">View more examples</a>
+  </div>
+</body>
+</html>
diff --git a/examples/vanilla/control-elements/media-rendition-listbox.html b/examples/vanilla/control-elements/media-rendition-listbox.html
@@ -53,7 +53,14 @@ <h1>Rendition Listbox</h1>
     Quality: <span id="renditionactive">N/A</span>
   </p>
 
-  <script>
+  <script type="module">
+    const RenditionListbox = await customElements.whenDefined('media-rendition-listbox');
+
+    RenditionListbox.formatOptionText = (text) => {
+      console.log(text);
+      return text.replace('720p', '720p (HD)');
+    }
+
     video.addEventListener('resize', () => {
       renditionactive.textContent = `${Math.min(video.videoWidth, video.videoHeight)}p`;
     });

diff --git a/examples/vanilla/index.html b/examples/vanilla/index.html
@@ -70,6 +70,8 @@ <h3>Experimental</h3>
       <li><a href="control-elements/media-chrome-listbox.html">Listbox</a></li>
       <li><a href="control-elements/media-captions-listbox.html">Captions listbox</a></li>
       <li><a href="control-elements/media-captions-selectmenu.html">Captions selectmenu</a></li>
+      <li><a href="control-elements/media-playback-rate-listbox.html">Playback rate listbox</a></li>
+      <li><a href="control-elements/media-playback-rate-selectmenu.html">Playback rate selectmenu</a></li>
       <li><a href="control-elements/media-rendition-listbox.html">Rendition listbox</a></li>
       <li><a href="control-elements/media-rendition-selectmenu.html">Rendition selectmenu</a></li>
     </ul>

diff --git a/src/js/experimental/index.js b/src/js/experimental/index.js
@@ -0,0 +1,9 @@
+export { MediaChromeListbox } from './media-chrome-listbox.js';
+export { MediaChromeOption } from './media-chrome-option.js';
+export { MediaChromeSelectMenu } from './media-chrome-selectmenu.js';
+export { MediaCaptionsListbox } from './media-captions-listbox.js';
+export { MediaCaptionsSelectMenu } from './media-captions-selectmenu.js';
+export { MediaPlaybackRateListbox } from './media-playback-rate-listbox.js';
+export { MediaPlaybackRateSelectMenu } from './media-playback-rate-selectmenu.js';
+export { MediaRenditionListbox } from './media-rendition-listbox.js';
+export { MediaRenditionSelectMenu } from './media-rendition-selectmenu.js';