feat!: make menu separate import

docs/src/layouts/MainLayout.astro

@@ -144,6 +144,7 @@ const githubEditUrl = `${CONFIG.GITHUB_EDIT_URL}/${currentFile}`;
     </style>
     <script>
       import 'media-chrome';
+      import 'media-chrome/dist/menu/index';
       import 'media-chrome/dist/media-theme-element';
       import 'media-chrome/dist/experimental/index';
     </script>

examples/vanilla/advanced.html

@@ -5,6 +5,7 @@
     <title>Media Chrome Advanced Video Usage Example</title>
     <script type="module" src="https://cdn.jsdelivr.net/npm/[email protected]/+esm"></script>
     <script type="module" src="../../dist/index.js"></script>
+    <script type="module" src="../../dist/menu/index.js"></script>
     <style>
       /* Hide custom elements that are not defined yet */
       :not(:defined) {

examples/vanilla/basic.html

@@ -5,6 +5,11 @@
     <title>Media Chrome Basic Audio and Video Usage Example</title>
     <script type="module" src="../../dist/index.js"></script>
     <style>
+      /* Hide custom elements that are not defined yet */
+      :not(:defined) {
+        display: none;
+      }
+
       /** add styles to prevent CLS (Cumulative Layout Shift) */
       media-controller:not([audio]) {
         display: block;         /* expands the container if preload=none */

examples/vanilla/control-elements/media-audio-track-menu.html

@@ -5,6 +5,7 @@
     <title>Media Chrome Audio Track Menu</title>
     <script type="module" src="https://cdn.jsdelivr.net/npm/@mux/mux-video@canary/+esm"></script>
     <script type="module" src="../../../dist/index.js"></script>
+    <script type="module" src="../../../dist/menu/index.js"></script>
     <style>
       /** add styles to prevent CLS (Cumulative Layout Shift) */
       media-controller:not([audio]) {

examples/vanilla/control-elements/media-captions-menu.html

@@ -4,6 +4,7 @@
     <meta name="viewport" content="width=device-width">
     <title>Media Chrome Captions Menu</title>
     <script type="module" src="../../../dist/index.js"></script>
+    <script type="module" src="../../../dist/menu/index.js"></script>
     <style>
       .examples {
         margin-top: 20px;

examples/vanilla/control-elements/media-playback-rate-menu.html

@@ -4,6 +4,7 @@
     <meta name="viewport" content="width=device-width">
     <title>Media Chrome Playback Rate Menu</title>
     <script type="module" src="../../../dist/index.js"></script>
+    <script type="module" src="../../../dist/menu/index.js"></script>
     <style>
       /* Hide custom elements that are not defined yet */
       :not(:defined) {

examples/vanilla/control-elements/media-rendition-menu.html

@@ -5,6 +5,7 @@
     <title>Media Chrome Rendition Menu</title>
     <script type="module" src="https://cdn.jsdelivr.net/npm/@mux/mux-video/+esm"></script>
     <script type="module" src="../../../dist/index.js"></script>
+    <script type="module" src="../../../dist/menu/index.js"></script>
     <style>
       /** add styles to prevent CLS (Cumulative Layout Shift) */
       media-controller:not([audio]) {

examples/vanilla/control-elements/media-settings-menu.html

@@ -5,6 +5,7 @@
     <title>Media Settings Menu</title>
     <script type="module" src="https://cdn.jsdelivr.net/npm/@mux/mux-video/+esm"></script>
     <script type="module" src="../../../dist/index.js"></script>
+    <script type="module" src="../../../dist/menu/index.js"></script>
     <style>
       /* Hide custom elements that are not defined yet */
       :not(:defined) {

examples/vanilla/tooltips.html

@@ -4,6 +4,7 @@
     <meta name="viewport" content="width=device-width" />
     <title>Media Chrome Tooltips</title>
     <script type="module" src="../../dist/index.js"></script>
+    <script type="module" src="../../dist/menu/index.js"></script>
     <style>
       body {
         background: #eee;

src/js/index.ts

@@ -6,16 +6,10 @@ export * as timeUtils from './utils/time.js';
 // when calling `associateElement(this)` in connectedCallback.
 import MediaController from './media-controller.js';
 import MediaAirplayButton from './media-airplay-button.js';
-import MediaAudioTrackMenu from './media-audio-track-menu.js';
-import MediaAudioTrackMenuButton from './media-audio-track-menu-button.js';
 import MediaCaptionsButton from './media-captions-button.js';
-import MediaCaptionsMenu from './media-captions-menu.js';
-import MediaCaptionsMenuButton from './media-captions-menu-button.js';
 import MediaCastButton from './media-cast-button.js';
 import MediaChromeButton from './media-chrome-button.js';
 import MediaChromeDialog from './media-chrome-dialog.js';
-import MediaChromeMenu from './media-chrome-menu.js';
-import MediaChromeMenuItem from './media-chrome-menu-item.js';
 import MediaChromeRange from './media-chrome-range.js';
 import MediaControlBar from './media-control-bar.js';
 import MediaDurationDisplay from './media-duration-display.js';
@@ -26,37 +20,24 @@ import MediaLoadingIndicator from './media-loading-indicator.js';
 import MediaMuteButton from './media-mute-button.js';
 import MediaPipButton from './media-pip-button.js';
 import MediaPlaybackRateButton from './media-playback-rate-button.js';
-import MediaPlaybackRateMenu from './media-playback-rate-menu.js';
-import MediaPlaybackRateMenuButton from './media-playback-rate-menu-button.js';
 import MediaPlayButton from './media-play-button.js';
 import MediaPosterImage from './media-poster-image.js';
 import MediaPreviewChapterDisplay from './media-preview-chapter-display.js';
 import MediaPreviewThumbnail from './media-preview-thumbnail.js';
 import MediaPreviewTimeDisplay from './media-preview-time-display.js';
-import MediaRenditionMenu from './media-rendition-menu.js';
-import MediaRenditionMenuButton from './media-rendition-menu-button.js';
 import MediaSeekBackwardButton from './media-seek-backward-button.js';
 import MediaSeekForwardButton from './media-seek-forward-button.js';
-import MediaSettingsMenu from './media-settings-menu.js';
-import MediaSettingsMenuButton from './media-settings-menu-button.js';
-import MediaSettingsMenuItem from './media-settings-menu-item.js';
 import MediaTimeDisplay from './media-time-display.js';
 import MediaTimeRange from './media-time-range.js';
 import MediaTooltip from './media-tooltip.js';
 import MediaVolumeRange from './media-volume-range.js';
 
 export {
   MediaAirplayButton,
-  MediaAudioTrackMenu,
-  MediaAudioTrackMenuButton,
   MediaCaptionsButton,
-  MediaCaptionsMenu,
-  MediaCaptionsMenuButton,
   MediaCastButton,
   MediaChromeButton,
   MediaChromeDialog,
-  MediaChromeMenu,
-  MediaChromeMenuItem,
   MediaChromeRange,
   MediaControlBar,
   MediaController,
@@ -68,20 +49,13 @@ export {
   MediaMuteButton,
   MediaPipButton,
   MediaPlaybackRateButton,
-  MediaPlaybackRateMenu,
-  MediaPlaybackRateMenuButton,
   MediaPlayButton,
   MediaPosterImage,
   MediaPreviewChapterDisplay,
   MediaPreviewThumbnail,
   MediaPreviewTimeDisplay,
-  MediaRenditionMenu,
-  MediaRenditionMenuButton,
   MediaSeekBackwardButton,
   MediaSeekForwardButton,
-  MediaSettingsMenu,
-  MediaSettingsMenuButton,
-  MediaSettingsMenuItem,
   MediaTimeDisplay,
   MediaTimeRange,
   MediaTooltip,

src/js/menu/index.ts

@@ -0,0 +1,13 @@
+export { MediaChromeMenu } from './media-chrome-menu.js';
+export { MediaChromeMenuItem } from './media-chrome-menu-item.js';
+export { MediaSettingsMenu } from './media-settings-menu.js';
+export { MediaSettingsMenuItem } from './media-settings-menu-item.js';
+export { MediaSettingsMenuButton } from './media-settings-menu-button.js';
+export { MediaAudioTrackMenu } from './media-audio-track-menu.js';
+export { MediaAudioTrackMenuButton } from './media-audio-track-menu-button.js';
+export { MediaCaptionsMenu } from './media-captions-menu.js';
+export { MediaCaptionsMenuButton } from './media-captions-menu-button.js';
+export { MediaPlaybackRateMenu } from './media-playback-rate-menu.js';
+export { MediaPlaybackRateMenuButton } from './media-playback-rate-menu-button.js';
+export { MediaRenditionMenu } from './media-rendition-menu.js';
+export { MediaRenditionMenuButton } from './media-rendition-menu-button.js';

src/js/media-audio-track-menu-button.ts → src/js/menu/media-audio-track-menu-button.ts

@@ -1,12 +1,12 @@
-import { MediaUIAttributes } from './constants.js';
+import { MediaUIAttributes } from '../constants.js';
 import { MediaChromeMenuButton } from './media-chrome-menu-button.js';
-import { globalThis, document } from './utils/server-safe-globals.js';
-import { nouns, tooltipLabels } from './labels/labels.js';
+import { globalThis, document } from '../utils/server-safe-globals.js';
+import { nouns, tooltipLabels } from '../labels/labels.js';
 import {
   getStringAttr,
   setStringAttr,
   getMediaController,
-} from './utils/element-utils.js';
+} from '../utils/element-utils.js';
 
 const audioTrackIcon = /*html*/ `<svg aria-hidden="true" viewBox="0 0 24 24">
   <path d="M11 17H9.5V7H11v10Zm-3-3H6.5v-4H8v4Zm6-5h-1.5v6H14V9Zm3 7h-1.5V8H17v8Z"/>

src/js/media-audio-track-menu.ts → src/js/menu/media-audio-track-menu.ts

@@ -1,6 +1,6 @@
-import { globalThis } from './utils/server-safe-globals.js';
-import { MediaUIAttributes, MediaUIEvents } from './constants.js';
-import { parseAudioTrackList } from './utils/utils.js';
+import { globalThis } from '../utils/server-safe-globals.js';
+import { MediaUIAttributes, MediaUIEvents } from '../constants.js';
+import { parseAudioTrackList } from '../utils/utils.js';
 import {
   MediaChromeMenu,
   createMenuItem,
@@ -10,8 +10,8 @@ import {
   getStringAttr,
   setStringAttr,
   getMediaController,
-} from './utils/element-utils.js';
-import { TextTrackLike } from './utils/TextTrackLike.js';
+} from '../utils/element-utils.js';
+import { TextTrackLike } from '../utils/TextTrackLike.js';
 
 /**
  * @extends {MediaChromeMenu}

src/js/media-captions-menu-button.ts → src/js/menu/media-captions-menu-button.ts

@@ -1,14 +1,14 @@
-import { globalThis, document } from './utils/server-safe-globals.js';
-import { MediaUIAttributes } from './constants.js';
-import { nouns, tooltipLabels } from './labels/labels.js';
+import { globalThis, document } from '../utils/server-safe-globals.js';
+import { MediaUIAttributes } from '../constants.js';
+import { nouns, tooltipLabels } from '../labels/labels.js';
 import { MediaChromeMenuButton } from './media-chrome-menu-button.js';
-import { getMediaController } from './utils/element-utils.js';
+import { getMediaController } from '../utils/element-utils.js';
 import {
   areSubsOn,
   parseTextTracksStr,
   stringifyTextTrackList,
-} from './utils/captions.js';
-import { TextTrackLike } from './utils/TextTrackLike.js';
+} from '../utils/captions.js';
+import { TextTrackLike } from '../utils/TextTrackLike.js';
 
 const ccIconOn = `<svg aria-hidden="true" viewBox="0 0 26 24">
   <path d="M22.83 5.68a2.58 2.58 0 0 0-2.3-2.5c-3.62-.24-11.44-.24-15.06 0a2.58 2.58 0 0 0-2.3 2.5c-.23 4.21-.23 8.43 0 12.64a2.58 2.58 0 0 0 2.3 2.5c3.62.24 11.44.24 15.06 0a2.58 2.58 0 0 0 2.3-2.5c.23-4.21.23-8.43 0-12.64Zm-11.39 9.45a3.07 3.07 0 0 1-1.91.57 3.06 3.06 0 0 1-2.34-1 3.75 3.75 0 0 1-.92-2.67 3.92 3.92 0 0 1 .92-2.77 3.18 3.18 0 0 1 2.43-1 2.94 2.94 0 0 1 2.13.78c.364.359.62.813.74 1.31l-1.43.35a1.49 1.49 0 0 0-1.51-1.17 1.61 1.61 0 0 0-1.29.58 2.79 2.79 0 0 0-.5 1.89 3 3 0 0 0 .49 1.93 1.61 1.61 0 0 0 1.27.58 1.48 1.48 0 0 0 1-.37 2.1 2.1 0 0 0 .59-1.14l1.4.44a3.23 3.23 0 0 1-1.07 1.69Zm7.22 0a3.07 3.07 0 0 1-1.91.57 3.06 3.06 0 0 1-2.34-1 3.75 3.75 0 0 1-.92-2.67 3.88 3.88 0 0 1 .93-2.77 3.14 3.14 0 0 1 2.42-1 3 3 0 0 1 2.16.82 2.8 2.8 0 0 1 .73 1.31l-1.43.35a1.49 1.49 0 0 0-1.51-1.21 1.61 1.61 0 0 0-1.29.58A2.79 2.79 0 0 0 15 12a3 3 0 0 0 .49 1.93 1.61 1.61 0 0 0 1.27.58 1.44 1.44 0 0 0 1-.37 2.1 2.1 0 0 0 .6-1.15l1.4.44a3.17 3.17 0 0 1-1.1 1.7Z"/>

src/js/media-captions-menu.ts → src/js/menu/media-captions-menu.ts

@@ -1,6 +1,6 @@
-import { globalThis, document } from './utils/server-safe-globals.js';
-import { MediaUIAttributes, MediaUIEvents } from './constants.js';
-import { getMediaController } from './utils/element-utils.js';
+import { globalThis, document } from '../utils/server-safe-globals.js';
+import { MediaUIAttributes, MediaUIEvents } from '../constants.js';
+import { getMediaController } from '../utils/element-utils.js';
 import {
   MediaChromeMenu,
   createMenuItem,
@@ -10,8 +10,8 @@ import {
   parseTextTracksStr,
   stringifyTextTrackList,
   formatTextTrackObj,
-} from './utils/captions.js';
-import { TextTrackLike } from './utils/TextTrackLike.js';
+} from '../utils/captions.js';
+import { TextTrackLike } from '../utils/TextTrackLike.js';
 
 const ccIcon = /*html*/ `
   <svg aria-hidden="true" viewBox="0 0 26 24" part="captions-indicator indicator">

src/js/media-chrome-menu-button.ts → src/js/menu/media-chrome-menu-button.ts

@@ -1,7 +1,7 @@
-import { MediaChromeButton } from './media-chrome-button.js';
-import { globalThis } from './utils/server-safe-globals.js';
-import { InvokeEvent } from './utils/events.js';
-import { getDocumentOrShadowRoot } from './utils/element-utils.js';
+import { MediaChromeButton } from '../media-chrome-button.js';
+import { globalThis } from '../utils/server-safe-globals.js';
+import { InvokeEvent } from '../utils/events.js';
+import { getDocumentOrShadowRoot } from '../utils/element-utils.js';
 
 /**
  * @attr {string} invoketarget - The id of the element to invoke when clicked.

src/js/media-chrome-menu-item.ts → src/js/menu/media-chrome-menu-item.ts

@@ -1,9 +1,9 @@
-import { globalThis, document } from './utils/server-safe-globals.js';
-import { InvokeEvent } from './utils/events.js';
+import { globalThis, document } from '../utils/server-safe-globals.js';
+import { InvokeEvent } from '../utils/events.js';
 import {
   getDocumentOrShadowRoot,
   containsComposedNode,
-} from './utils/element-utils.js';
+} from '../utils/element-utils.js';
 import type MediaChromeMenu from './media-chrome-menu.js';
 
 const template: HTMLTemplateElement = document.createElement('template');

src/js/media-chrome-menu.ts → src/js/menu/media-chrome-menu.ts

@@ -1,8 +1,8 @@
-import { MediaStateReceiverAttributes } from './constants.js';
-import { globalThis, document } from './utils/server-safe-globals.js';
-import { computePosition } from './utils/anchor-utils.js';
-import { observeResize, unobserveResize } from './utils/resize-observer.js';
-import { ToggleEvent, InvokeEvent } from './utils/events.js';
+import { MediaStateReceiverAttributes } from '../constants.js';
+import { globalThis, document } from '../utils/server-safe-globals.js';
+import { computePosition } from '../utils/anchor-utils.js';
+import { observeResize, unobserveResize } from '../utils/resize-observer.js';
+import { ToggleEvent, InvokeEvent } from '../utils/events.js';
 import {
   getActiveElement,
   containsComposedNode,
@@ -11,9 +11,9 @@ import {
   getMediaController,
   getAttributeMediaController,
   getDocumentOrShadowRoot,
-} from './utils/element-utils.js';
+} from '../utils/element-utils.js';
 import MediaChromeMenuItem from './media-chrome-menu-item.js';
-import MediaController from './media-controller.js';
+import MediaController from '../media-controller.js';
 
 export function createMenuItem({
   type,

src/js/media-playback-rate-menu-button.ts → src/js/menu/media-playback-rate-menu-button.ts

@@ -1,13 +1,13 @@
-import { globalThis, document } from './utils/server-safe-globals.js';
-import { MediaUIAttributes } from './constants.js';
-import { nouns, tooltipLabels } from './labels/labels.js';
+import { globalThis, document } from '../utils/server-safe-globals.js';
+import { MediaUIAttributes } from '../constants.js';
+import { nouns, tooltipLabels } from '../labels/labels.js';
 import { MediaChromeMenuButton } from './media-chrome-menu-button.js';
-import { AttributeTokenList } from './utils/attribute-token-list.js';
+import { AttributeTokenList } from '../utils/attribute-token-list.js';
 import {
   getNumericAttr,
   setNumericAttr,
   getMediaController,
-} from './utils/element-utils.js';
+} from '../utils/element-utils.js';
 
 export const Attributes = {
   RATES: 'rates',

src/js/media-playback-rate-menu.ts → src/js/menu/media-playback-rate-menu.ts

@@ -1,12 +1,12 @@
-import { globalThis } from './utils/server-safe-globals.js';
-import { MediaUIAttributes, MediaUIEvents } from './constants.js';
-import { AttributeTokenList } from './utils/attribute-token-list.js';
+import { globalThis } from '../utils/server-safe-globals.js';
+import { MediaUIAttributes, MediaUIEvents } from '../constants.js';
+import { AttributeTokenList } from '../utils/attribute-token-list.js';
 import {
   getNumericAttr,
   setNumericAttr,
   getMediaController,
-} from './utils/element-utils.js';
-import { DEFAULT_RATES, DEFAULT_RATE } from './media-playback-rate-button.js';
+} from '../utils/element-utils.js';
+import { DEFAULT_RATES, DEFAULT_RATE } from '../media-playback-rate-button.js';
 import {
   MediaChromeMenu,
   createMenuItem,

src/js/media-rendition-menu-button.ts → src/js/menu/media-rendition-menu-button.ts

@@ -1,12 +1,12 @@
-import { MediaUIAttributes } from './constants.js';
+import { MediaUIAttributes } from '../constants.js';
 import { MediaChromeMenuButton } from './media-chrome-menu-button.js';
-import { globalThis, document } from './utils/server-safe-globals.js';
-import { nouns, tooltipLabels } from './labels/labels.js';
+import { globalThis, document } from '../utils/server-safe-globals.js';
+import { nouns, tooltipLabels } from '../labels/labels.js';
 import {
   getStringAttr,
   setStringAttr,
   getMediaController,
-} from './utils/element-utils.js';
+} from '../utils/element-utils.js';
 
 const renditionIcon = /*html*/ `<svg aria-hidden="true" viewBox="0 0 24 24">
   <path d="M13.5 2.5h2v6h-2v-2h-11v-2h11v-2Zm4 2h4v2h-4v-2Zm-12 4h2v6h-2v-2h-3v-2h3v-2Zm4 2h12v2h-12v-2Zm1 4h2v6h-2v-2h-8v-2h8v-2Zm4 2h7v2h-7v-2Z" />

src/js/media-rendition-menu.ts → src/js/menu/media-rendition-menu.ts

@@ -1,17 +1,17 @@
-import { globalThis } from './utils/server-safe-globals.js';
-import { MediaUIAttributes, MediaUIEvents } from './constants.js';
+import { globalThis } from '../utils/server-safe-globals.js';
+import { MediaUIAttributes, MediaUIEvents } from '../constants.js';
 import {
   getMediaController,
   getStringAttr,
   setStringAttr,
-} from './utils/element-utils.js';
-import { parseRenditionList } from './utils/utils.js';
+} from '../utils/element-utils.js';
+import { parseRenditionList } from '../utils/utils.js';
 import {
   MediaChromeMenu,
   createMenuItem,
   createIndicator,
 } from './media-chrome-menu.js';
-import { Rendition } from './media-store/state-mediator.js';
+import { Rendition } from '../media-store/state-mediator.js';
 
 /**
  * @extends {MediaChromeMenu}

src/js/media-settings-menu-button.ts → src/js/menu/media-settings-menu-button.ts

@@ -1,7 +1,7 @@
 import { MediaChromeMenuButton } from './media-chrome-menu-button.js';
-import { globalThis, document } from './utils/server-safe-globals.js';
-import { getMediaController } from './utils/element-utils.js';
-import { nouns, tooltipLabels } from './labels/labels.js';
+import { globalThis, document } from '../utils/server-safe-globals.js';
+import { getMediaController } from '../utils/element-utils.js';
+import { nouns, tooltipLabels } from '../labels/labels.js';
 
 const slotTemplate: HTMLTemplateElement = document.createElement('template');
 slotTemplate.innerHTML = /*html*/ `

src/js/media-settings-menu-item.ts → src/js/menu/media-settings-menu-item.ts

@@ -1,4 +1,4 @@
-import { globalThis, document } from './utils/server-safe-globals.js';
+import { globalThis, document } from '../utils/server-safe-globals.js';
 import { MediaChromeMenuItem } from './media-chrome-menu-item.js';
 
 const template: HTMLTemplateElement = document.createElement('template');

src/js/media-settings-menu.ts → src/js/menu/media-settings-menu.ts

@@ -1,6 +1,6 @@
-import { globalThis, document } from './utils/server-safe-globals.js';
+import { globalThis, document } from '../utils/server-safe-globals.js';
 import { MediaChromeMenu } from './media-chrome-menu.js';
-import { getMediaController } from './utils/element-utils.js';
+import { getMediaController } from '../utils/element-utils.js';
 
 const template: HTMLTemplateElement = document.createElement('template');
 // prettier-ignore