media-chrome - npm Package Compare versions

Comparing version 4.5.0 to 4.5.1-canary.0

dist/cjs/index.js

@@ -36,2 +36,3 @@ var __create = Object.create;
   MediaChromeRange: () => import_media_chrome_range.default,
+  MediaContainer: () => import_media_container.default,
   MediaControlBar: () => import_media_control_bar.default,
@@ -55,2 +56,3 @@ MediaController: () => import_media_controller.default,
   MediaSeekForwardButton: () => import_media_seek_forward_button.default,
+  MediaTextDisplay: () => import_media_text_display.default,
   MediaTimeDisplay: () => import_media_time_display.default,
@@ -96,1 +98,3 @@ MediaTimeRange: () => import_media_time_range.default,
 var import_media_volume_range = __toESM(require("./media-volume-range.js"), 1);
+var import_media_container = __toESM(require("./media-container.js"), 1);
+var import_media_text_display = __toESM(require("./media-text-display.js"), 1);

dist/cjs/media-chrome-button.js

@@ -51,3 +51,5 @@ var __defProp = Object.defineProperty;
 const Attributes = {
-  TOOLTIP_PLACEMENT: "tooltipplacement"
+  TOOLTIP_PLACEMENT: "tooltipplacement",
+  DISABLED: "disabled",
+  NO_TOOLTIP: "notooltip"
 };
@@ -247,2 +249,4 @@ const template = import_server_safe_globals.document.createElement("template");
       this.enable();
+    } else {
+      this.disable();
     }
@@ -285,2 +289,20 @@ this.setAttribute("role", "button");
   }
+  get mediaController() {
+    return (0, import_element_utils.getStringAttr)(this, import_constants.MediaStateReceiverAttributes.MEDIA_CONTROLLER);
+  }
+  set mediaController(value) {
+    (0, import_element_utils.setStringAttr)(this, import_constants.MediaStateReceiverAttributes.MEDIA_CONTROLLER, value);
+  }
+  get disabled() {
+    return (0, import_element_utils.getBooleanAttr)(this, Attributes.DISABLED);
+  }
+  set disabled(value) {
+    (0, import_element_utils.setBooleanAttr)(this, Attributes.DISABLED, value);
+  }
+  get noTooltip() {
+    return (0, import_element_utils.getBooleanAttr)(this, Attributes.NO_TOOLTIP);
+  }
+  set noTooltip(value) {
+    (0, import_element_utils.setBooleanAttr)(this, Attributes.NO_TOOLTIP, value);
+  }
   /**
@@ -287,0 +309,0 @@ * @abstract

dist/cjs/media-container.js

@@ -52,2 +52,3 @@ var __defProp = Object.defineProperty;
 var import_media_gesture_receiver = require("./media-gesture-receiver.js");
+var import_element_utils = require("./utils/element-utils.js");
 var _pointerDownTimeStamp, _currentMedia, _inactiveTimeout, _autohide, _mutationObserver, _handleMutation, handleMutation_fn, _isResizePending, _handleResize, _handlePointerMove, handlePointerMove_fn, _handlePointerUp, handlePointerUp_fn, _setInactive, setInactive_fn, _setActive, setActive_fn, _scheduleInactive, scheduleInactive_fn;
@@ -428,2 +429,38 @@ const Attributes = {
   }
+  get breakpoints() {
+    return (0, import_element_utils.getStringAttr)(this, Attributes.BREAKPOINTS);
+  }
+  set breakpoints(value) {
+    (0, import_element_utils.setStringAttr)(this, Attributes.BREAKPOINTS, value);
+  }
+  get audio() {
+    return (0, import_element_utils.getBooleanAttr)(this, Attributes.AUDIO);
+  }
+  set audio(value) {
+    (0, import_element_utils.setBooleanAttr)(this, Attributes.AUDIO, value);
+  }
+  get gesturesDisabled() {
+    return (0, import_element_utils.getBooleanAttr)(this, Attributes.GESTURES_DISABLED);
+  }
+  set gesturesDisabled(value) {
+    (0, import_element_utils.setBooleanAttr)(this, Attributes.GESTURES_DISABLED, value);
+  }
+  get keyboardControl() {
+    return (0, import_element_utils.getBooleanAttr)(this, Attributes.KEYBOARD_CONTROL);
+  }
+  set keyboardControl(value) {
+    (0, import_element_utils.setBooleanAttr)(this, Attributes.KEYBOARD_CONTROL, value);
+  }
+  get noAutohide() {
+    return (0, import_element_utils.getBooleanAttr)(this, Attributes.NO_AUTOHIDE);
+  }
+  set noAutohide(value) {
+    (0, import_element_utils.setBooleanAttr)(this, Attributes.NO_AUTOHIDE, value);
+  }
+  get userInteractive() {
+    return (0, import_element_utils.getBooleanAttr)(this, Attributes.USER_INACTIVE);
+  }
+  set userInteractive(value) {
+    (0, import_element_utils.setBooleanAttr)(this, Attributes.USER_INACTIVE, value);
+  }
 }
@@ -430,0 +467,0 @@ _pointerDownTimeStamp = new WeakMap();

dist/cjs/media-controller.js

@@ -160,2 +160,62 @@ var __defProp = Object.defineProperty;
   }
+  get defaultSubtitles() {
+    return (0, import_element_utils.getBooleanAttr)(this, Attributes.DEFAULT_SUBTITLES);
+  }
+  set defaultSubtitles(value) {
+    (0, import_element_utils.setBooleanAttr)(this, Attributes.DEFAULT_SUBTITLES, value);
+  }
+  get defaultStreamType() {
+    return (0, import_element_utils.getStringAttr)(this, Attributes.DEFAULT_STREAM_TYPE);
+  }
+  set defaultStreamType(value) {
+    (0, import_element_utils.setStringAttr)(this, Attributes.DEFAULT_STREAM_TYPE, value);
+  }
+  get defaultDuration() {
+    return (0, import_element_utils.getNumericAttr)(this, Attributes.DEFAULT_DURATION);
+  }
+  set defaultDuration(value) {
+    (0, import_element_utils.setNumericAttr)(this, Attributes.DEFAULT_DURATION, value);
+  }
+  get noHotkeys() {
+    return (0, import_element_utils.getBooleanAttr)(this, Attributes.NO_HOTKEYS);
+  }
+  set noHotkeys(value) {
+    (0, import_element_utils.setBooleanAttr)(this, Attributes.NO_HOTKEYS, value);
+  }
+  get keysUsed() {
+    return (0, import_element_utils.getStringAttr)(this, Attributes.KEYS_USED);
+  }
+  set keysUsed(value) {
+    (0, import_element_utils.setStringAttr)(this, Attributes.KEYS_USED, value);
+  }
+  get liveEdgeOffset() {
+    return (0, import_element_utils.getNumericAttr)(this, Attributes.LIVE_EDGE_OFFSET);
+  }
+  set liveEdgeOffset(value) {
+    (0, import_element_utils.setNumericAttr)(this, Attributes.LIVE_EDGE_OFFSET, value);
+  }
+  get noAutoSeekToLive() {
+    return (0, import_element_utils.getBooleanAttr)(this, Attributes.NO_AUTO_SEEK_TO_LIVE);
+  }
+  set noAutoSeekToLive(value) {
+    (0, import_element_utils.setBooleanAttr)(this, Attributes.NO_AUTO_SEEK_TO_LIVE, value);
+  }
+  get noVolumePref() {
+    return (0, import_element_utils.getBooleanAttr)(this, Attributes.NO_VOLUME_PREF);
+  }
+  set noVolumePref(value) {
+    (0, import_element_utils.setBooleanAttr)(this, Attributes.NO_VOLUME_PREF, value);
+  }
+  get noSubtitlesLangPref() {
+    return (0, import_element_utils.getBooleanAttr)(this, Attributes.NO_SUBTITLES_LANG_PREF);
+  }
+  set noSubtitlesLangPref(value) {
+    (0, import_element_utils.setBooleanAttr)(this, Attributes.NO_SUBTITLES_LANG_PREF, value);
+  }
+  get noDefaultStore() {
+    return (0, import_element_utils.getBooleanAttr)(this, Attributes.NO_DEFAULT_STORE);
+  }
+  set noDefaultStore(value) {
+    (0, import_element_utils.setBooleanAttr)(this, Attributes.NO_DEFAULT_STORE, value);
+  }
   attributeChangedCallback(attrName, oldValue, newValue) {
@@ -334,4 +394,7 @@ var _a, _b, _c, _d, _e, _f;
   get hotkeys() {
-    return __privateGet(this, _hotKeys);
+    return (0, import_element_utils.getStringAttr)(this, Attributes.HOTKEYS);
   }
+  set hotkeys(value) {
+    (0, import_element_utils.setStringAttr)(this, Attributes.HOTKEYS, value);
+  }
   keyboardShortcutHandler(e) {
@@ -338,0 +401,0 @@ var _a, _b, _c, _d, _e;

dist/cjs/media-loading-indicator.js

@@ -48,3 +48,4 @@ var __defProp = Object.defineProperty;
 const Attributes = {
-  LOADING_DELAY: "loadingdelay"
+  LOADING_DELAY: "loadingdelay",
+  NO_AUTOHIDE: "noautohide"
 };
@@ -199,2 +200,14 @@ const DEFAULT_LOADING_DELAY = 500;
   }
+  get mediaController() {
+    return (0, import_element_utils.getStringAttr)(this, import_constants.MediaStateReceiverAttributes.MEDIA_CONTROLLER);
+  }
+  set mediaController(value) {
+    (0, import_element_utils.setStringAttr)(this, import_constants.MediaStateReceiverAttributes.MEDIA_CONTROLLER, value);
+  }
+  get noAutohide() {
+    return (0, import_element_utils.getBooleanAttr)(this, Attributes.NO_AUTOHIDE);
+  }
+  set noAutohide(value) {
+    (0, import_element_utils.setBooleanAttr)(this, Attributes.NO_AUTOHIDE, value);
+  }
 }
@@ -201,0 +214,0 @@ _mediaController = new WeakMap();

dist/cjs/menu/index.js

@@ -25,2 +25,3 @@ var __defProp = Object.defineProperty;
   MediaChromeMenu: () => import_media_chrome_menu.MediaChromeMenu,
+  MediaChromeMenuButton: () => import_media_chrome_menu_button.MediaChromeMenuButton,
   MediaChromeMenuItem: () => import_media_chrome_menu_item.MediaChromeMenuItem,
@@ -49,1 +50,2 @@ MediaPlaybackRateMenu: () => import_media_playback_rate_menu.MediaPlaybackRateMenu,
 var import_media_rendition_menu_button = require("./media-rendition-menu-button.js");
+var import_media_chrome_menu_button = require("./media-chrome-menu-button.js");

dist/cjs/react/index.js

@@ -63,93 +63,153 @@ var __create = Object.create;
 var import_react = __toESM(require("react"), 1);
-var import__ = require("../index.js");
-var import_utils = require("./common/utils.js");
-const MediaGestureReceiver = import_react.default.forwardRef(({ children = [], ...props }, ref) => {
-  return import_react.default.createElement("media-gesture-receiver", { ...(0, import_utils.toNativeProps)(props), ref, suppressHydrationWarning: true }, children);
+var import_ce_la_react = require("ce-la-react");
+var Modules = __toESM(require("../index.js"), 1);
+const MediaGestureReceiver = (0, import_ce_la_react.createComponent)({
+  tagName: "media-gesture-receiver",
+  elementClass: Modules.MediaGestureReceiver,
+  react: import_react.default
 });
-const MediaContainer = import_react.default.forwardRef(({ children = [], ...props }, ref) => {
-  return import_react.default.createElement("media-container", { ...(0, import_utils.toNativeProps)(props), ref, suppressHydrationWarning: true }, children);
+const MediaContainer = (0, import_ce_la_react.createComponent)({
+  tagName: "media-container",
+  elementClass: Modules.MediaContainer,
+  react: import_react.default
 });
-const MediaController = import_react.default.forwardRef(({ children = [], ...props }, ref) => {
-  return import_react.default.createElement("media-controller", { ...(0, import_utils.toNativeProps)(props), ref, suppressHydrationWarning: true }, children);
+const MediaController = (0, import_ce_la_react.createComponent)({
+  tagName: "media-controller",
+  elementClass: Modules.MediaController,
+  react: import_react.default
 });
-const MediaChromeButton = import_react.default.forwardRef(({ children = [], ...props }, ref) => {
-  return import_react.default.createElement("media-chrome-button", { ...(0, import_utils.toNativeProps)(props), ref, suppressHydrationWarning: true }, children);
+const MediaChromeButton = (0, import_ce_la_react.createComponent)({
+  tagName: "media-chrome-button",
+  elementClass: Modules.MediaChromeButton,
+  react: import_react.default
 });
-const MediaAirplayButton = import_react.default.forwardRef(({ children = [], ...props }, ref) => {
-  return import_react.default.createElement("media-airplay-button", { ...(0, import_utils.toNativeProps)(props), ref, suppressHydrationWarning: true }, children);
+const MediaAirplayButton = (0, import_ce_la_react.createComponent)({
+  tagName: "media-airplay-button",
+  elementClass: Modules.MediaAirplayButton,
+  react: import_react.default
 });
-const MediaCaptionsButton = import_react.default.forwardRef(({ children = [], ...props }, ref) => {
-  return import_react.default.createElement("media-captions-button", { ...(0, import_utils.toNativeProps)(props), ref, suppressHydrationWarning: true }, children);
+const MediaCaptionsButton = (0, import_ce_la_react.createComponent)({
+  tagName: "media-captions-button",
+  elementClass: Modules.MediaCaptionsButton,
+  react: import_react.default
 });
-const MediaCastButton = import_react.default.forwardRef(({ children = [], ...props }, ref) => {
-  return import_react.default.createElement("media-cast-button", { ...(0, import_utils.toNativeProps)(props), ref, suppressHydrationWarning: true }, children);
+const MediaCastButton = (0, import_ce_la_react.createComponent)({
+  tagName: "media-cast-button",
+  elementClass: Modules.MediaCastButton,
+  react: import_react.default
 });
-const MediaChromeDialog = import_react.default.forwardRef(({ children = [], ...props }, ref) => {
-  return import_react.default.createElement("media-chrome-dialog", { ...(0, import_utils.toNativeProps)(props), ref, suppressHydrationWarning: true }, children);
+const MediaChromeDialog = (0, import_ce_la_react.createComponent)({
+  tagName: "media-chrome-dialog",
+  elementClass: Modules.MediaChromeDialog,
+  react: import_react.default
 });
-const MediaChromeRange = import_react.default.forwardRef(({ children = [], ...props }, ref) => {
-  return import_react.default.createElement("media-chrome-range", { ...(0, import_utils.toNativeProps)(props), ref, suppressHydrationWarning: true }, children);
+const MediaChromeRange = (0, import_ce_la_react.createComponent)({
+  tagName: "media-chrome-range",
+  elementClass: Modules.MediaChromeRange,
+  react: import_react.default
 });
-const MediaControlBar = import_react.default.forwardRef(({ children = [], ...props }, ref) => {
-  return import_react.default.createElement("media-control-bar", { ...(0, import_utils.toNativeProps)(props), ref, suppressHydrationWarning: true }, children);
+const MediaControlBar = (0, import_ce_la_react.createComponent)({
+  tagName: "media-control-bar",
+  elementClass: Modules.MediaControlBar,
+  react: import_react.default
 });
-const MediaTextDisplay = import_react.default.forwardRef(({ children = [], ...props }, ref) => {
-  return import_react.default.createElement("media-text-display", { ...(0, import_utils.toNativeProps)(props), ref, suppressHydrationWarning: true }, children);
+const MediaTextDisplay = (0, import_ce_la_react.createComponent)({
+  tagName: "media-text-display",
+  elementClass: Modules.MediaTextDisplay,
+  react: import_react.default
 });
-const MediaDurationDisplay = import_react.default.forwardRef(({ children = [], ...props }, ref) => {
-  return import_react.default.createElement("media-duration-display", { ...(0, import_utils.toNativeProps)(props), ref, suppressHydrationWarning: true }, children);
+const MediaDurationDisplay = (0, import_ce_la_react.createComponent)({
+  tagName: "media-duration-display",
+  elementClass: Modules.MediaDurationDisplay,
+  react: import_react.default
 });
-const MediaErrorDialog = import_react.default.forwardRef(({ children = [], ...props }, ref) => {
-  return import_react.default.createElement("media-error-dialog", { ...(0, import_utils.toNativeProps)(props), ref, suppressHydrationWarning: true }, children);
+const MediaErrorDialog = (0, import_ce_la_react.createComponent)({
+  tagName: "media-error-dialog",
+  elementClass: Modules.MediaErrorDialog,
+  react: import_react.default
 });
-const MediaFullscreenButton = import_react.default.forwardRef(({ children = [], ...props }, ref) => {
-  return import_react.default.createElement("media-fullscreen-button", { ...(0, import_utils.toNativeProps)(props), ref, suppressHydrationWarning: true }, children);
+const MediaFullscreenButton = (0, import_ce_la_react.createComponent)({
+  tagName: "media-fullscreen-button",
+  elementClass: Modules.MediaFullscreenButton,
+  react: import_react.default
 });
-const MediaLiveButton = import_react.default.forwardRef(({ children = [], ...props }, ref) => {
-  return import_react.default.createElement("media-live-button", { ...(0, import_utils.toNativeProps)(props), ref, suppressHydrationWarning: true }, children);
+const MediaLiveButton = (0, import_ce_la_react.createComponent)({
+  tagName: "media-live-button",
+  elementClass: Modules.MediaLiveButton,
+  react: import_react.default
 });
-const MediaLoadingIndicator = import_react.default.forwardRef(({ children = [], ...props }, ref) => {
-  return import_react.default.createElement("media-loading-indicator", { ...(0, import_utils.toNativeProps)(props), ref, suppressHydrationWarning: true }, children);
+const MediaLoadingIndicator = (0, import_ce_la_react.createComponent)({
+  tagName: "media-loading-indicator",
+  elementClass: Modules.MediaLoadingIndicator,
+  react: import_react.default
 });
-const MediaMuteButton = import_react.default.forwardRef(({ children = [], ...props }, ref) => {
-  return import_react.default.createElement("media-mute-button", { ...(0, import_utils.toNativeProps)(props), ref, suppressHydrationWarning: true }, children);
+const MediaMuteButton = (0, import_ce_la_react.createComponent)({
+  tagName: "media-mute-button",
+  elementClass: Modules.MediaMuteButton,
+  react: import_react.default
 });
-const MediaPipButton = import_react.default.forwardRef(({ children = [], ...props }, ref) => {
-  return import_react.default.createElement("media-pip-button", { ...(0, import_utils.toNativeProps)(props), ref, suppressHydrationWarning: true }, children);
+const MediaPipButton = (0, import_ce_la_react.createComponent)({
+  tagName: "media-pip-button",
+  elementClass: Modules.MediaPipButton,
+  react: import_react.default
 });
-const MediaPlaybackRateButton = import_react.default.forwardRef(({ children = [], ...props }, ref) => {
-  return import_react.default.createElement("media-playback-rate-button", { ...(0, import_utils.toNativeProps)(props), ref, suppressHydrationWarning: true }, children);
+const MediaPlaybackRateButton = (0, import_ce_la_react.createComponent)({
+  tagName: "media-playback-rate-button",
+  elementClass: Modules.MediaPlaybackRateButton,
+  react: import_react.default
 });
-const MediaPlayButton = import_react.default.forwardRef(({ children = [], ...props }, ref) => {
-  return import_react.default.createElement("media-play-button", { ...(0, import_utils.toNativeProps)(props), ref, suppressHydrationWarning: true }, children);
+const MediaPlayButton = (0, import_ce_la_react.createComponent)({
+  tagName: "media-play-button",
+  elementClass: Modules.MediaPlayButton,
+  react: import_react.default
 });
-const MediaPosterImage = import_react.default.forwardRef(({ children = [], ...props }, ref) => {
-  return import_react.default.createElement("media-poster-image", { ...(0, import_utils.toNativeProps)(props), ref, suppressHydrationWarning: true }, children);
+const MediaPosterImage = (0, import_ce_la_react.createComponent)({
+  tagName: "media-poster-image",
+  elementClass: Modules.MediaPosterImage,
+  react: import_react.default
 });
-const MediaPreviewChapterDisplay = import_react.default.forwardRef(({ children = [], ...props }, ref) => {
-  return import_react.default.createElement("media-preview-chapter-display", { ...(0, import_utils.toNativeProps)(props), ref, suppressHydrationWarning: true }, children);
+const MediaPreviewChapterDisplay = (0, import_ce_la_react.createComponent)({
+  tagName: "media-preview-chapter-display",
+  elementClass: Modules.MediaPreviewChapterDisplay,
+  react: import_react.default
 });
-const MediaPreviewThumbnail = import_react.default.forwardRef(({ children = [], ...props }, ref) => {
-  return import_react.default.createElement("media-preview-thumbnail", { ...(0, import_utils.toNativeProps)(props), ref, suppressHydrationWarning: true }, children);
+const MediaPreviewThumbnail = (0, import_ce_la_react.createComponent)({
+  tagName: "media-preview-thumbnail",
+  elementClass: Modules.MediaPreviewThumbnail,
+  react: import_react.default
 });
-const MediaPreviewTimeDisplay = import_react.default.forwardRef(({ children = [], ...props }, ref) => {
-  return import_react.default.createElement("media-preview-time-display", { ...(0, import_utils.toNativeProps)(props), ref, suppressHydrationWarning: true }, children);
+const MediaPreviewTimeDisplay = (0, import_ce_la_react.createComponent)({
+  tagName: "media-preview-time-display",
+  elementClass: Modules.MediaPreviewTimeDisplay,
+  react: import_react.default
 });
-const MediaSeekBackwardButton = import_react.default.forwardRef(({ children = [], ...props }, ref) => {
-  return import_react.default.createElement("media-seek-backward-button", { ...(0, import_utils.toNativeProps)(props), ref, suppressHydrationWarning: true }, children);
+const MediaSeekBackwardButton = (0, import_ce_la_react.createComponent)({
+  tagName: "media-seek-backward-button",
+  elementClass: Modules.MediaSeekBackwardButton,
+  react: import_react.default
 });
-const MediaSeekForwardButton = import_react.default.forwardRef(({ children = [], ...props }, ref) => {
-  return import_react.default.createElement("media-seek-forward-button", { ...(0, import_utils.toNativeProps)(props), ref, suppressHydrationWarning: true }, children);
+const MediaSeekForwardButton = (0, import_ce_la_react.createComponent)({
+  tagName: "media-seek-forward-button",
+  elementClass: Modules.MediaSeekForwardButton,
+  react: import_react.default
 });
-const MediaTimeDisplay = import_react.default.forwardRef(({ children = [], ...props }, ref) => {
-  return import_react.default.createElement("media-time-display", { ...(0, import_utils.toNativeProps)(props), ref, suppressHydrationWarning: true }, children);
+const MediaTimeDisplay = (0, import_ce_la_react.createComponent)({
+  tagName: "media-time-display",
+  elementClass: Modules.MediaTimeDisplay,
+  react: import_react.default
 });
-const MediaTimeRange = import_react.default.forwardRef(({ children = [], ...props }, ref) => {
-  return import_react.default.createElement("media-time-range", { ...(0, import_utils.toNativeProps)(props), ref, suppressHydrationWarning: true }, children);
+const MediaTimeRange = (0, import_ce_la_react.createComponent)({
+  tagName: "media-time-range",
+  elementClass: Modules.MediaTimeRange,
+  react: import_react.default
 });
-const MediaTooltip = import_react.default.forwardRef(({ children = [], ...props }, ref) => {
-  return import_react.default.createElement("media-tooltip", { ...(0, import_utils.toNativeProps)(props), ref, suppressHydrationWarning: true }, children);
+const MediaTooltip = (0, import_ce_la_react.createComponent)({
+  tagName: "media-tooltip",
+  elementClass: Modules.MediaTooltip,
+  react: import_react.default
 });
-const MediaVolumeRange = import_react.default.forwardRef(({ children = [], ...props }, ref) => {
-  return import_react.default.createElement("media-volume-range", { ...(0, import_utils.toNativeProps)(props), ref, suppressHydrationWarning: true }, children);
+const MediaVolumeRange = (0, import_ce_la_react.createComponent)({
+  tagName: "media-volume-range",
+  elementClass: Modules.MediaVolumeRange,
+  react: import_react.default
 });

dist/cjs/react/media-theme.js

@@ -34,6 +34,8 @@ var __create = Object.create;
 var import_react = __toESM(require("react"), 1);
-var import_media_theme_element = require("../media-theme-element.js");
-var import_utils = require("./common/utils.js");
-const MediaTheme = import_react.default.forwardRef(({ children = [], ...props }, ref) => {
-  return import_react.default.createElement("media-theme", { ...(0, import_utils.toNativeProps)(props), ref, suppressHydrationWarning: true }, children);
+var import_ce_la_react = require("ce-la-react");
+var Modules = __toESM(require("../media-theme-element.js"), 1);
+const MediaTheme = (0, import_ce_la_react.createComponent)({
+  tagName: "media-theme",
+  elementClass: Modules.MediaTheme,
+  react: import_react.default
 });

dist/cjs/react/menu/index.js

@@ -47,45 +47,73 @@ var __create = Object.create;
 var import_react = __toESM(require("react"), 1);
-var import_menu = require("../../menu/index.js");
-var import_utils = require("../common/utils.js");
-const MediaChromeMenu = import_react.default.forwardRef(({ children = [], ...props }, ref) => {
-  return import_react.default.createElement("media-chrome-menu", { ...(0, import_utils.toNativeProps)(props), ref, suppressHydrationWarning: true }, children);
+var import_ce_la_react = require("ce-la-react");
+var Modules = __toESM(require("../../menu/index.js"), 1);
+const MediaChromeMenu = (0, import_ce_la_react.createComponent)({
+  tagName: "media-chrome-menu",
+  elementClass: Modules.MediaChromeMenu,
+  react: import_react.default
 });
-const MediaChromeMenuItem = import_react.default.forwardRef(({ children = [], ...props }, ref) => {
-  return import_react.default.createElement("media-chrome-menu-item", { ...(0, import_utils.toNativeProps)(props), ref, suppressHydrationWarning: true }, children);
+const MediaChromeMenuItem = (0, import_ce_la_react.createComponent)({
+  tagName: "media-chrome-menu-item",
+  elementClass: Modules.MediaChromeMenuItem,
+  react: import_react.default
 });
-const MediaSettingsMenu = import_react.default.forwardRef(({ children = [], ...props }, ref) => {
-  return import_react.default.createElement("media-settings-menu", { ...(0, import_utils.toNativeProps)(props), ref, suppressHydrationWarning: true }, children);
+const MediaSettingsMenu = (0, import_ce_la_react.createComponent)({
+  tagName: "media-settings-menu",
+  elementClass: Modules.MediaSettingsMenu,
+  react: import_react.default
 });
-const MediaSettingsMenuItem = import_react.default.forwardRef(({ children = [], ...props }, ref) => {
-  return import_react.default.createElement("media-settings-menu-item", { ...(0, import_utils.toNativeProps)(props), ref, suppressHydrationWarning: true }, children);
+const MediaSettingsMenuItem = (0, import_ce_la_react.createComponent)({
+  tagName: "media-settings-menu-item",
+  elementClass: Modules.MediaSettingsMenuItem,
+  react: import_react.default
 });
-const MediaChromeMenuButton = import_react.default.forwardRef(({ children = [], ...props }, ref) => {
-  return import_react.default.createElement("media-chrome-menu-button", { ...(0, import_utils.toNativeProps)(props), ref, suppressHydrationWarning: true }, children);
+const MediaChromeMenuButton = (0, import_ce_la_react.createComponent)({
+  tagName: "media-chrome-menu-button",
+  elementClass: Modules.MediaChromeMenuButton,
+  react: import_react.default
 });
-const MediaSettingsMenuButton = import_react.default.forwardRef(({ children = [], ...props }, ref) => {
-  return import_react.default.createElement("media-settings-menu-button", { ...(0, import_utils.toNativeProps)(props), ref, suppressHydrationWarning: true }, children);
+const MediaSettingsMenuButton = (0, import_ce_la_react.createComponent)({
+  tagName: "media-settings-menu-button",
+  elementClass: Modules.MediaSettingsMenuButton,
+  react: import_react.default
 });
-const MediaAudioTrackMenu = import_react.default.forwardRef(({ children = [], ...props }, ref) => {
-  return import_react.default.createElement("media-audio-track-menu", { ...(0, import_utils.toNativeProps)(props), ref, suppressHydrationWarning: true }, children);
+const MediaAudioTrackMenu = (0, import_ce_la_react.createComponent)({
+  tagName: "media-audio-track-menu",
+  elementClass: Modules.MediaAudioTrackMenu,
+  react: import_react.default
 });
-const MediaAudioTrackMenuButton = import_react.default.forwardRef(({ children = [], ...props }, ref) => {
-  return import_react.default.createElement("media-audio-track-menu-button", { ...(0, import_utils.toNativeProps)(props), ref, suppressHydrationWarning: true }, children);
+const MediaAudioTrackMenuButton = (0, import_ce_la_react.createComponent)({
+  tagName: "media-audio-track-menu-button",
+  elementClass: Modules.MediaAudioTrackMenuButton,
+  react: import_react.default
 });
-const MediaCaptionsMenu = import_react.default.forwardRef(({ children = [], ...props }, ref) => {
-  return import_react.default.createElement("media-captions-menu", { ...(0, import_utils.toNativeProps)(props), ref, suppressHydrationWarning: true }, children);
+const MediaCaptionsMenu = (0, import_ce_la_react.createComponent)({
+  tagName: "media-captions-menu",
+  elementClass: Modules.MediaCaptionsMenu,
+  react: import_react.default
 });
-const MediaCaptionsMenuButton = import_react.default.forwardRef(({ children = [], ...props }, ref) => {
-  return import_react.default.createElement("media-captions-menu-button", { ...(0, import_utils.toNativeProps)(props), ref, suppressHydrationWarning: true }, children);
+const MediaCaptionsMenuButton = (0, import_ce_la_react.createComponent)({
+  tagName: "media-captions-menu-button",
+  elementClass: Modules.MediaCaptionsMenuButton,
+  react: import_react.default
 });
-const MediaPlaybackRateMenu = import_react.default.forwardRef(({ children = [], ...props }, ref) => {
-  return import_react.default.createElement("media-playback-rate-menu", { ...(0, import_utils.toNativeProps)(props), ref, suppressHydrationWarning: true }, children);
+const MediaPlaybackRateMenu = (0, import_ce_la_react.createComponent)({
+  tagName: "media-playback-rate-menu",
+  elementClass: Modules.MediaPlaybackRateMenu,
+  react: import_react.default
 });
-const MediaPlaybackRateMenuButton = import_react.default.forwardRef(({ children = [], ...props }, ref) => {
-  return import_react.default.createElement("media-playback-rate-menu-button", { ...(0, import_utils.toNativeProps)(props), ref, suppressHydrationWarning: true }, children);
+const MediaPlaybackRateMenuButton = (0, import_ce_la_react.createComponent)({
+  tagName: "media-playback-rate-menu-button",
+  elementClass: Modules.MediaPlaybackRateMenuButton,
+  react: import_react.default
 });
-const MediaRenditionMenu = import_react.default.forwardRef(({ children = [], ...props }, ref) => {
-  return import_react.default.createElement("media-rendition-menu", { ...(0, import_utils.toNativeProps)(props), ref, suppressHydrationWarning: true }, children);
+const MediaRenditionMenu = (0, import_ce_la_react.createComponent)({
+  tagName: "media-rendition-menu",
+  elementClass: Modules.MediaRenditionMenu,
+  react: import_react.default
 });
-const MediaRenditionMenuButton = import_react.default.forwardRef(({ children = [], ...props }, ref) => {
-  return import_react.default.createElement("media-rendition-menu-button", { ...(0, import_utils.toNativeProps)(props), ref, suppressHydrationWarning: true }, children);
+const MediaRenditionMenuButton = (0, import_ce_la_react.createComponent)({
+  tagName: "media-rendition-menu-button",
+  elementClass: Modules.MediaRenditionMenuButton,
+  react: import_react.default
 });

dist/index.d.ts

@@ -32,2 +32,4 @@ export * as constants from './constants.js';
 import MediaVolumeRange from './media-volume-range.js';
-export { MediaAirplayButton, MediaCaptionsButton, MediaCastButton, MediaChromeButton, MediaChromeDialog, MediaChromeRange, MediaControlBar, MediaController, MediaDurationDisplay, MediaErrorDialog, MediaFullscreenButton, MediaGestureReceiver, MediaLiveButton, MediaLoadingIndicator, MediaMuteButton, MediaPipButton, MediaPlaybackRateButton, MediaPlayButton, MediaPosterImage, MediaPreviewChapterDisplay, MediaPreviewThumbnail, MediaPreviewTimeDisplay, MediaSeekBackwardButton, MediaSeekForwardButton, MediaTimeDisplay, MediaTimeRange, MediaTooltip, MediaVolumeRange, };
+import MediaContainer from './media-container.js';
+import MediaTextDisplay from './media-text-display.js';
+export { MediaAirplayButton, MediaCaptionsButton, MediaCastButton, MediaChromeButton, MediaChromeDialog, MediaChromeRange, MediaControlBar, MediaController, MediaDurationDisplay, MediaErrorDialog, MediaFullscreenButton, MediaGestureReceiver, MediaLiveButton, MediaLoadingIndicator, MediaMuteButton, MediaPipButton, MediaPlaybackRateButton, MediaPlayButton, MediaPosterImage, MediaPreviewChapterDisplay, MediaPreviewThumbnail, MediaPreviewTimeDisplay, MediaSeekBackwardButton, MediaSeekForwardButton, MediaTimeDisplay, MediaTimeRange, MediaTooltip, MediaVolumeRange, MediaContainer, MediaTextDisplay, };

dist/index.js

@@ -32,2 +32,4 @@ import * as constants from "./constants.js";
 import MediaVolumeRange from "./media-volume-range.js";
+import MediaContainer from "./media-container.js";
+import MediaTextDisplay from "./media-text-display.js";
 export {
@@ -40,2 +42,3 @@ MediaAirplayButton,
   MediaChromeRange,
+  MediaContainer,
   MediaControlBar,
@@ -59,2 +62,3 @@ MediaController,
   MediaSeekForwardButton,
+  MediaTextDisplay,
   MediaTimeDisplay,
@@ -61,0 +65,0 @@ MediaTimeRange,

dist/media-chrome-button.d.ts

@@ -56,2 +56,8 @@ import MediaTooltip, { TooltipPlacement } from './media-tooltip.js';
     set tooltipPlacement(value: TooltipPlacement | undefined);
+    get mediaController(): string | undefined;
+    set mediaController(value: string | undefined);
+    get disabled(): boolean | undefined;
+    set disabled(value: boolean | undefined);
+    get noTooltip(): boolean | undefined;
+    set noTooltip(value: boolean | undefined);
     /**
@@ -58,0 +64,0 @@ * @abstract

dist/media-chrome-button.js

@@ -26,4 +26,6 @@ var __accessCheck = (obj, member, msg) => {
 import {
+  getBooleanAttr,
   getOrInsertCSSRule,
   getStringAttr,
+  setBooleanAttr,
   setStringAttr
@@ -33,3 +35,5 @@ } from "./utils/element-utils.js";
 const Attributes = {
-  TOOLTIP_PLACEMENT: "tooltipplacement"
+  TOOLTIP_PLACEMENT: "tooltipplacement",
+  DISABLED: "disabled",
+  NO_TOOLTIP: "notooltip"
 };
@@ -229,2 +233,4 @@ const template = document.createElement("template");
       this.enable();
+    } else {
+      this.disable();
     }
@@ -267,2 +273,20 @@ this.setAttribute("role", "button");
   }
+  get mediaController() {
+    return getStringAttr(this, MediaStateReceiverAttributes.MEDIA_CONTROLLER);
+  }
+  set mediaController(value) {
+    setStringAttr(this, MediaStateReceiverAttributes.MEDIA_CONTROLLER, value);
+  }
+  get disabled() {
+    return getBooleanAttr(this, Attributes.DISABLED);
+  }
+  set disabled(value) {
+    setBooleanAttr(this, Attributes.DISABLED, value);
+  }
+  get noTooltip() {
+    return getBooleanAttr(this, Attributes.NO_TOOLTIP);
+  }
+  set noTooltip(value) {
+    setBooleanAttr(this, Attributes.NO_TOOLTIP, value);
+  }
   /**
@@ -269,0 +293,0 @@ * @abstract

dist/media-container.d.ts

@@ -46,4 +46,16 @@ import { globalThis } from './utils/server-safe-globals.js';
     get autohide(): string;
+    get breakpoints(): string | undefined;
+    set breakpoints(value: string | undefined);
+    get audio(): boolean | undefined;
+    set audio(value: boolean | undefined);
+    get gesturesDisabled(): boolean | undefined;
+    set gesturesDisabled(value: boolean | undefined);
+    get keyboardControl(): boolean | undefined;
+    set keyboardControl(value: boolean | undefined);
+    get noAutohide(): boolean | undefined;
+    set noAutohide(value: boolean | undefined);
+    get userInteractive(): boolean | undefined;
+    set userInteractive(value: boolean | undefined);
 }
 export { MediaContainer };
 export default MediaContainer;

dist/media-container.js

@@ -29,2 +29,8 @@ var __accessCheck = (obj, member, msg) => {
 import "./media-gesture-receiver.js";
+import {
+  getBooleanAttr,
+  getStringAttr,
+  setBooleanAttr,
+  setStringAttr
+} from "./utils/element-utils.js";
 const Attributes = {
@@ -404,2 +410,38 @@ AUDIO: "audio",
   }
+  get breakpoints() {
+    return getStringAttr(this, Attributes.BREAKPOINTS);
+  }
+  set breakpoints(value) {
+    setStringAttr(this, Attributes.BREAKPOINTS, value);
+  }
+  get audio() {
+    return getBooleanAttr(this, Attributes.AUDIO);
+  }
+  set audio(value) {
+    setBooleanAttr(this, Attributes.AUDIO, value);
+  }
+  get gesturesDisabled() {
+    return getBooleanAttr(this, Attributes.GESTURES_DISABLED);
+  }
+  set gesturesDisabled(value) {
+    setBooleanAttr(this, Attributes.GESTURES_DISABLED, value);
+  }
+  get keyboardControl() {
+    return getBooleanAttr(this, Attributes.KEYBOARD_CONTROL);
+  }
+  set keyboardControl(value) {
+    setBooleanAttr(this, Attributes.KEYBOARD_CONTROL, value);
+  }
+  get noAutohide() {
+    return getBooleanAttr(this, Attributes.NO_AUTOHIDE);
+  }
+  set noAutohide(value) {
+    setBooleanAttr(this, Attributes.NO_AUTOHIDE, value);
+  }
+  get userInteractive() {
+    return getBooleanAttr(this, Attributes.USER_INACTIVE);
+  }
+  set userInteractive(value) {
+    setBooleanAttr(this, Attributes.USER_INACTIVE, value);
+  }
 }
@@ -406,0 +448,0 @@ _pointerDownTimeStamp = new WeakMap();

dist/media-controller.d.ts

 import { MediaContainer } from './media-container.js';
-import { AttributeTokenList } from './utils/attribute-token-list.js';
 import { MediaStore } from './media-store/media-store.js';
@@ -47,2 +46,22 @@ export declare const Attributes: {
     set fullscreenElement(element: HTMLElement);
+    get defaultSubtitles(): boolean | undefined;
+    set defaultSubtitles(value: boolean);
+    get defaultStreamType(): string | undefined;
+    set defaultStreamType(value: string | undefined);
+    get defaultDuration(): number | undefined;
+    set defaultDuration(value: number | undefined);
+    get noHotkeys(): boolean | undefined;
+    set noHotkeys(value: boolean | undefined);
+    get keysUsed(): string | undefined;
+    set keysUsed(value: string | undefined);
+    get liveEdgeOffset(): number | undefined;
+    set liveEdgeOffset(value: number | undefined);
+    get noAutoSeekToLive(): boolean | undefined;
+    set noAutoSeekToLive(value: boolean | undefined);
+    get noVolumePref(): boolean | undefined;
+    set noVolumePref(value: boolean | undefined);
+    get noSubtitlesLangPref(): boolean | undefined;
+    set noSubtitlesLangPref(value: boolean | undefined);
+    get noDefaultStore(): boolean | undefined;
+    set noDefaultStore(value: boolean | undefined);
     attributeChangedCallback(attrName: string, oldValue: string | null, newValue: string | null): void;
@@ -68,3 +87,4 @@ connectedCallback(): void;
     disableHotkeys(): void;
-    get hotkeys(): AttributeTokenList;
+    get hotkeys(): string | undefined;
+    set hotkeys(value: string | undefined);
     keyboardShortcutHandler(e: KeyboardEvent): void;
@@ -71,0 +91,0 @@ }

dist/media-controller.js

@@ -41,2 +41,5 @@ var __accessCheck = (obj, member, msg) => {
 import {
+  getBooleanAttr,
+  getNumericAttr,
+  getStringAttr,
   setBooleanAttr,
@@ -151,2 +154,62 @@ setNumericAttr,
   }
+  get defaultSubtitles() {
+    return getBooleanAttr(this, Attributes.DEFAULT_SUBTITLES);
+  }
+  set defaultSubtitles(value) {
+    setBooleanAttr(this, Attributes.DEFAULT_SUBTITLES, value);
+  }
+  get defaultStreamType() {
+    return getStringAttr(this, Attributes.DEFAULT_STREAM_TYPE);
+  }
+  set defaultStreamType(value) {
+    setStringAttr(this, Attributes.DEFAULT_STREAM_TYPE, value);
+  }
+  get defaultDuration() {
+    return getNumericAttr(this, Attributes.DEFAULT_DURATION);
+  }
+  set defaultDuration(value) {
+    setNumericAttr(this, Attributes.DEFAULT_DURATION, value);
+  }
+  get noHotkeys() {
+    return getBooleanAttr(this, Attributes.NO_HOTKEYS);
+  }
+  set noHotkeys(value) {
+    setBooleanAttr(this, Attributes.NO_HOTKEYS, value);
+  }
+  get keysUsed() {
+    return getStringAttr(this, Attributes.KEYS_USED);
+  }
+  set keysUsed(value) {
+    setStringAttr(this, Attributes.KEYS_USED, value);
+  }
+  get liveEdgeOffset() {
+    return getNumericAttr(this, Attributes.LIVE_EDGE_OFFSET);
+  }
+  set liveEdgeOffset(value) {
+    setNumericAttr(this, Attributes.LIVE_EDGE_OFFSET, value);
+  }
+  get noAutoSeekToLive() {
+    return getBooleanAttr(this, Attributes.NO_AUTO_SEEK_TO_LIVE);
+  }
+  set noAutoSeekToLive(value) {
+    setBooleanAttr(this, Attributes.NO_AUTO_SEEK_TO_LIVE, value);
+  }
+  get noVolumePref() {
+    return getBooleanAttr(this, Attributes.NO_VOLUME_PREF);
+  }
+  set noVolumePref(value) {
+    setBooleanAttr(this, Attributes.NO_VOLUME_PREF, value);
+  }
+  get noSubtitlesLangPref() {
+    return getBooleanAttr(this, Attributes.NO_SUBTITLES_LANG_PREF);
+  }
+  set noSubtitlesLangPref(value) {
+    setBooleanAttr(this, Attributes.NO_SUBTITLES_LANG_PREF, value);
+  }
+  get noDefaultStore() {
+    return getBooleanAttr(this, Attributes.NO_DEFAULT_STORE);
+  }
+  set noDefaultStore(value) {
+    setBooleanAttr(this, Attributes.NO_DEFAULT_STORE, value);
+  }
   attributeChangedCallback(attrName, oldValue, newValue) {
@@ -325,4 +388,7 @@ var _a, _b, _c, _d, _e, _f;
   get hotkeys() {
-    return __privateGet(this, _hotKeys);
+    return getStringAttr(this, Attributes.HOTKEYS);
   }
+  set hotkeys(value) {
+    setStringAttr(this, Attributes.HOTKEYS, value);
+  }
   keyboardShortcutHandler(e) {
@@ -329,0 +395,0 @@ var _a, _b, _c, _d, _e;

dist/media-loading-indicator.d.ts

 import { globalThis } from './utils/server-safe-globals.js';
 export declare const Attributes: {
     LOADING_DELAY: string;
+    NO_AUTOHIDE: string;
 };
@@ -46,3 +47,7 @@ /**
     set mediaLoading(value: boolean);
+    get mediaController(): string | undefined;
+    set mediaController(value: string | undefined);
+    get noAutohide(): boolean | undefined;
+    set noAutohide(value: boolean | undefined);
 }
 export default MediaLoadingIndicator;

dist/media-loading-indicator.js

@@ -29,6 +29,9 @@ var __accessCheck = (obj, member, msg) => {
   setBooleanAttr,
-  getOrInsertCSSRule
+  getOrInsertCSSRule,
+  setStringAttr,
+  getStringAttr
 } from "./utils/element-utils.js";
 const Attributes = {
-  LOADING_DELAY: "loadingdelay"
+  LOADING_DELAY: "loadingdelay",
+  NO_AUTOHIDE: "noautohide"
 };
@@ -183,2 +186,14 @@ const DEFAULT_LOADING_DELAY = 500;
   }
+  get mediaController() {
+    return getStringAttr(this, MediaStateReceiverAttributes.MEDIA_CONTROLLER);
+  }
+  set mediaController(value) {
+    setStringAttr(this, MediaStateReceiverAttributes.MEDIA_CONTROLLER, value);
+  }
+  get noAutohide() {
+    return getBooleanAttr(this, Attributes.NO_AUTOHIDE);
+  }
+  set noAutohide(value) {
+    setBooleanAttr(this, Attributes.NO_AUTOHIDE, value);
+  }
 }
@@ -185,0 +200,0 @@ _mediaController = new WeakMap();

dist/menu/index.d.ts

@@ -14,1 +14,2 @@ export { MediaChromeMenu } from './media-chrome-menu.js';
 export { MediaRenditionMenuButton } from './media-rendition-menu-button.js';
+export { MediaChromeMenuButton } from './media-chrome-menu-button.js';

dist/menu/index.js

@@ -14,2 +14,3 @@ import { MediaChromeMenu } from "./media-chrome-menu.js";
 import { MediaRenditionMenuButton } from "./media-rendition-menu-button.js";
+import { MediaChromeMenuButton } from "./media-chrome-menu-button.js";
 export {
@@ -21,2 +22,3 @@ MediaAudioTrackMenu,
   MediaChromeMenu,
+  MediaChromeMenuButton,
   MediaChromeMenuItem,
@@ -23,0 +25,0 @@ MediaPlaybackRateMenu,

dist/react/index.js

 import React from "react";
-import "../index.js";
-import { toNativeProps } from "./common/utils.js";
+import { createComponent } from 'ce-la-react';
+import * as Modules from "../index.js"
 
-/** @type { import("react").HTMLElement } */
-const MediaGestureReceiver = React.forwardRef(({ children = [], ...props }, ref) => {
-  return React.createElement('media-gesture-receiver', { ...toNativeProps(props), ref, suppressHydrationWarning: true }, children);
+export const MediaGestureReceiver = createComponent({
+  tagName: "media-gesture-receiver",
+  elementClass: Modules.MediaGestureReceiver,
+  react: React,
 });
 
-export { MediaGestureReceiver };
-
-/** @type { import("react").HTMLElement } */
-const MediaContainer = React.forwardRef(({ children = [], ...props }, ref) => {
-  return React.createElement('media-container', { ...toNativeProps(props), ref, suppressHydrationWarning: true }, children);
+export const MediaContainer = createComponent({
+  tagName: "media-container",
+  elementClass: Modules.MediaContainer,
+  react: React,
 });
 
-export { MediaContainer };
-
-/** @type { import("react").HTMLElement } */
-const MediaController = React.forwardRef(({ children = [], ...props }, ref) => {
-  return React.createElement('media-controller', { ...toNativeProps(props), ref, suppressHydrationWarning: true }, children);
+export const MediaController = createComponent({
+  tagName: "media-controller",
+  elementClass: Modules.MediaController,
+  react: React,
 });
 
-export { MediaController };
-
-/** @type { import("react").HTMLElement } */
-const MediaChromeButton = React.forwardRef(({ children = [], ...props }, ref) => {
-  return React.createElement('media-chrome-button', { ...toNativeProps(props), ref, suppressHydrationWarning: true }, children);
+export const MediaChromeButton = createComponent({
+  tagName: "media-chrome-button",
+  elementClass: Modules.MediaChromeButton,
+  react: React,
 });
 
-export { MediaChromeButton };
-
-/** @type { import("react").HTMLElement } */
-const MediaAirplayButton = React.forwardRef(({ children = [], ...props }, ref) => {
-  return React.createElement('media-airplay-button', { ...toNativeProps(props), ref, suppressHydrationWarning: true }, children);
+export const MediaAirplayButton = createComponent({
+  tagName: "media-airplay-button",
+  elementClass: Modules.MediaAirplayButton,
+  react: React,
 });
 
-export { MediaAirplayButton };
-
-/** @type { import("react").HTMLElement } */
-const MediaCaptionsButton = React.forwardRef(({ children = [], ...props }, ref) => {
-  return React.createElement('media-captions-button', { ...toNativeProps(props), ref, suppressHydrationWarning: true }, children);
+export const MediaCaptionsButton = createComponent({
+  tagName: "media-captions-button",
+  elementClass: Modules.MediaCaptionsButton,
+  react: React,
 });
 
-export { MediaCaptionsButton };
-
-/** @type { import("react").HTMLElement } */
-const MediaCastButton = React.forwardRef(({ children = [], ...props }, ref) => {
-  return React.createElement('media-cast-button', { ...toNativeProps(props), ref, suppressHydrationWarning: true }, children);
+export const MediaCastButton = createComponent({
+  tagName: "media-cast-button",
+  elementClass: Modules.MediaCastButton,
+  react: React,
 });
 
-export { MediaCastButton };
-
-/** @type { import("react").HTMLElement } */
-const MediaChromeDialog = React.forwardRef(({ children = [], ...props }, ref) => {
-  return React.createElement('media-chrome-dialog', { ...toNativeProps(props), ref, suppressHydrationWarning: true }, children);
+export const MediaChromeDialog = createComponent({
+  tagName: "media-chrome-dialog",
+  elementClass: Modules.MediaChromeDialog,
+  react: React,
 });
 
-export { MediaChromeDialog };
-
-/** @type { import("react").HTMLElement } */
-const MediaChromeRange = React.forwardRef(({ children = [], ...props }, ref) => {
-  return React.createElement('media-chrome-range', { ...toNativeProps(props), ref, suppressHydrationWarning: true }, children);
+export const MediaChromeRange = createComponent({
+  tagName: "media-chrome-range",
+  elementClass: Modules.MediaChromeRange,
+  react: React,
 });
 
-export { MediaChromeRange };
-
-/** @type { import("react").HTMLElement } */
-const MediaControlBar = React.forwardRef(({ children = [], ...props }, ref) => {
-  return React.createElement('media-control-bar', { ...toNativeProps(props), ref, suppressHydrationWarning: true }, children);
+export const MediaControlBar = createComponent({
+  tagName: "media-control-bar",
+  elementClass: Modules.MediaControlBar,
+  react: React,
 });
 
-export { MediaControlBar };
-
-/** @type { import("react").HTMLElement } */
-const MediaTextDisplay = React.forwardRef(({ children = [], ...props }, ref) => {
-  return React.createElement('media-text-display', { ...toNativeProps(props), ref, suppressHydrationWarning: true }, children);
+export const MediaTextDisplay = createComponent({
+  tagName: "media-text-display",
+  elementClass: Modules.MediaTextDisplay,
+  react: React,
 });
 
-export { MediaTextDisplay };
-
-/** @type { import("react").HTMLElement } */
-const MediaDurationDisplay = React.forwardRef(({ children = [], ...props }, ref) => {
-  return React.createElement('media-duration-display', { ...toNativeProps(props), ref, suppressHydrationWarning: true }, children);
+export const MediaDurationDisplay = createComponent({
+  tagName: "media-duration-display",
+  elementClass: Modules.MediaDurationDisplay,
+  react: React,
 });
 
-export { MediaDurationDisplay };
-
-/** @type { import("react").HTMLElement } */
-const MediaErrorDialog = React.forwardRef(({ children = [], ...props }, ref) => {
-  return React.createElement('media-error-dialog', { ...toNativeProps(props), ref, suppressHydrationWarning: true }, children);
+export const MediaErrorDialog = createComponent({
+  tagName: "media-error-dialog",
+  elementClass: Modules.MediaErrorDialog,
+  react: React,
 });
 
-export { MediaErrorDialog };
-
-/** @type { import("react").HTMLElement } */
-const MediaFullscreenButton = React.forwardRef(({ children = [], ...props }, ref) => {
-  return React.createElement('media-fullscreen-button', { ...toNativeProps(props), ref, suppressHydrationWarning: true }, children);
+export const MediaFullscreenButton = createComponent({
+  tagName: "media-fullscreen-button",
+  elementClass: Modules.MediaFullscreenButton,
+  react: React,
 });
 
-export { MediaFullscreenButton };
-
-/** @type { import("react").HTMLElement } */
-const MediaLiveButton = React.forwardRef(({ children = [], ...props }, ref) => {
-  return React.createElement('media-live-button', { ...toNativeProps(props), ref, suppressHydrationWarning: true }, children);
+export const MediaLiveButton = createComponent({
+  tagName: "media-live-button",
+  elementClass: Modules.MediaLiveButton,
+  react: React,
 });
 
-export { MediaLiveButton };
-
-/** @type { import("react").HTMLElement } */
-const MediaLoadingIndicator = React.forwardRef(({ children = [], ...props }, ref) => {
-  return React.createElement('media-loading-indicator', { ...toNativeProps(props), ref, suppressHydrationWarning: true }, children);
+export const MediaLoadingIndicator = createComponent({
+  tagName: "media-loading-indicator",
+  elementClass: Modules.MediaLoadingIndicator,
+  react: React,
 });
 
-export { MediaLoadingIndicator };
-
-/** @type { import("react").HTMLElement } */
-const MediaMuteButton = React.forwardRef(({ children = [], ...props }, ref) => {
-  return React.createElement('media-mute-button', { ...toNativeProps(props), ref, suppressHydrationWarning: true }, children);
+export const MediaMuteButton = createComponent({
+  tagName: "media-mute-button",
+  elementClass: Modules.MediaMuteButton,
+  react: React,
 });
 
-export { MediaMuteButton };
-
-/** @type { import("react").HTMLElement } */
-const MediaPipButton = React.forwardRef(({ children = [], ...props }, ref) => {
-  return React.createElement('media-pip-button', { ...toNativeProps(props), ref, suppressHydrationWarning: true }, children);
+export const MediaPipButton = createComponent({
+  tagName: "media-pip-button",
+  elementClass: Modules.MediaPipButton,
+  react: React,
 });
 
-export { MediaPipButton };
-
-/** @type { import("react").HTMLElement } */
-const MediaPlaybackRateButton = React.forwardRef(({ children = [], ...props }, ref) => {
-  return React.createElement('media-playback-rate-button', { ...toNativeProps(props), ref, suppressHydrationWarning: true }, children);
+export const MediaPlaybackRateButton = createComponent({
+  tagName: "media-playback-rate-button",
+  elementClass: Modules.MediaPlaybackRateButton,
+  react: React,
 });
 
-export { MediaPlaybackRateButton };
-
-/** @type { import("react").HTMLElement } */
-const MediaPlayButton = React.forwardRef(({ children = [], ...props }, ref) => {
-  return React.createElement('media-play-button', { ...toNativeProps(props), ref, suppressHydrationWarning: true }, children);
+export const MediaPlayButton = createComponent({
+  tagName: "media-play-button",
+  elementClass: Modules.MediaPlayButton,
+  react: React,
 });
 
-export { MediaPlayButton };
-
-/** @type { import("react").HTMLElement } */
-const MediaPosterImage = React.forwardRef(({ children = [], ...props }, ref) => {
-  return React.createElement('media-poster-image', { ...toNativeProps(props), ref, suppressHydrationWarning: true }, children);
+export const MediaPosterImage = createComponent({
+  tagName: "media-poster-image",
+  elementClass: Modules.MediaPosterImage,
+  react: React,
 });
 
-export { MediaPosterImage };
-
-/** @type { import("react").HTMLElement } */
-const MediaPreviewChapterDisplay = React.forwardRef(({ children = [], ...props }, ref) => {
-  return React.createElement('media-preview-chapter-display', { ...toNativeProps(props), ref, suppressHydrationWarning: true }, children);
+export const MediaPreviewChapterDisplay = createComponent({
+  tagName: "media-preview-chapter-display",
+  elementClass: Modules.MediaPreviewChapterDisplay,
+  react: React,
 });
 
-export { MediaPreviewChapterDisplay };
-
-/** @type { import("react").HTMLElement } */
-const MediaPreviewThumbnail = React.forwardRef(({ children = [], ...props }, ref) => {
-  return React.createElement('media-preview-thumbnail', { ...toNativeProps(props), ref, suppressHydrationWarning: true }, children);
+export const MediaPreviewThumbnail = createComponent({
+  tagName: "media-preview-thumbnail",
+  elementClass: Modules.MediaPreviewThumbnail,
+  react: React,
 });
 
-export { MediaPreviewThumbnail };
-
-/** @type { import("react").HTMLElement } */
-const MediaPreviewTimeDisplay = React.forwardRef(({ children = [], ...props }, ref) => {
-  return React.createElement('media-preview-time-display', { ...toNativeProps(props), ref, suppressHydrationWarning: true }, children);
+export const MediaPreviewTimeDisplay = createComponent({
+  tagName: "media-preview-time-display",
+  elementClass: Modules.MediaPreviewTimeDisplay,
+  react: React,
 });
 
-export { MediaPreviewTimeDisplay };
-
-/** @type { import("react").HTMLElement } */
-const MediaSeekBackwardButton = React.forwardRef(({ children = [], ...props }, ref) => {
-  return React.createElement('media-seek-backward-button', { ...toNativeProps(props), ref, suppressHydrationWarning: true }, children);
+export const MediaSeekBackwardButton = createComponent({
+  tagName: "media-seek-backward-button",
+  elementClass: Modules.MediaSeekBackwardButton,
+  react: React,
 });
 
-export { MediaSeekBackwardButton };
-
-/** @type { import("react").HTMLElement } */
-const MediaSeekForwardButton = React.forwardRef(({ children = [], ...props }, ref) => {
-  return React.createElement('media-seek-forward-button', { ...toNativeProps(props), ref, suppressHydrationWarning: true }, children);
+export const MediaSeekForwardButton = createComponent({
+  tagName: "media-seek-forward-button",
+  elementClass: Modules.MediaSeekForwardButton,
+  react: React,
 });
 
-export { MediaSeekForwardButton };
-
-/** @type { import("react").HTMLElement } */
-const MediaTimeDisplay = React.forwardRef(({ children = [], ...props }, ref) => {
-  return React.createElement('media-time-display', { ...toNativeProps(props), ref, suppressHydrationWarning: true }, children);
+export const MediaTimeDisplay = createComponent({
+  tagName: "media-time-display",
+  elementClass: Modules.MediaTimeDisplay,
+  react: React,
 });
 
-export { MediaTimeDisplay };
-
-/** @type { import("react").HTMLElement } */
-const MediaTimeRange = React.forwardRef(({ children = [], ...props }, ref) => {
-  return React.createElement('media-time-range', { ...toNativeProps(props), ref, suppressHydrationWarning: true }, children);
+export const MediaTimeRange = createComponent({
+  tagName: "media-time-range",
+  elementClass: Modules.MediaTimeRange,
+  react: React,
 });
 
-export { MediaTimeRange };
-
-/** @type { import("react").HTMLElement } */
-const MediaTooltip = React.forwardRef(({ children = [], ...props }, ref) => {
-  return React.createElement('media-tooltip', { ...toNativeProps(props), ref, suppressHydrationWarning: true }, children);
+export const MediaTooltip = createComponent({
+  tagName: "media-tooltip",
+  elementClass: Modules.MediaTooltip,
+  react: React,
 });
 
-export { MediaTooltip };
-
-/** @type { import("react").HTMLElement } */
-const MediaVolumeRange = React.forwardRef(({ children = [], ...props }, ref) => {
-  return React.createElement('media-volume-range', { ...toNativeProps(props), ref, suppressHydrationWarning: true }, children);
-});
-
-export { MediaVolumeRange };
+export const MediaVolumeRange = createComponent({
+  tagName: "media-volume-range",
+  elementClass: Modules.MediaVolumeRange,
+  react: React,
+});

dist/react/media-theme.js

 import React from "react";
-import "../media-theme-element.js";
-import { toNativeProps } from "./common/utils.js";
+import { createComponent } from 'ce-la-react';
+import * as Modules from "../media-theme-element.js"
 
-/** @type { import("react").HTMLElement } */
-const MediaTheme = React.forwardRef(({ children = [], ...props }, ref) => {
-  return React.createElement('media-theme', { ...toNativeProps(props), ref, suppressHydrationWarning: true }, children);
-});
-
-export { MediaTheme };
+export const MediaTheme = createComponent({
+  tagName: "media-theme",
+  elementClass: Modules.MediaTheme,
+  react: React,
+});

dist/react/menu/index.js

 import React from "react";
-import "../../menu/index.js";
-import { toNativeProps } from "../common/utils.js";
+import { createComponent } from 'ce-la-react';
+import * as Modules from "../../menu/index.js"
 
-/** @type { import("react").HTMLElement } */
-const MediaChromeMenu = React.forwardRef(({ children = [], ...props }, ref) => {
-  return React.createElement('media-chrome-menu', { ...toNativeProps(props), ref, suppressHydrationWarning: true }, children);
+export const MediaChromeMenu = createComponent({
+  tagName: "media-chrome-menu",
+  elementClass: Modules.MediaChromeMenu,
+  react: React,
 });
 
-export { MediaChromeMenu };
-
-/** @type { import("react").HTMLElement } */
-const MediaChromeMenuItem = React.forwardRef(({ children = [], ...props }, ref) => {
-  return React.createElement('media-chrome-menu-item', { ...toNativeProps(props), ref, suppressHydrationWarning: true }, children);
+export const MediaChromeMenuItem = createComponent({
+  tagName: "media-chrome-menu-item",
+  elementClass: Modules.MediaChromeMenuItem,
+  react: React,
 });
 
-export { MediaChromeMenuItem };
-
-/** @type { import("react").HTMLElement } */
-const MediaSettingsMenu = React.forwardRef(({ children = [], ...props }, ref) => {
-  return React.createElement('media-settings-menu', { ...toNativeProps(props), ref, suppressHydrationWarning: true }, children);
+export const MediaSettingsMenu = createComponent({
+  tagName: "media-settings-menu",
+  elementClass: Modules.MediaSettingsMenu,
+  react: React,
 });
 
-export { MediaSettingsMenu };
-
-/** @type { import("react").HTMLElement } */
-const MediaSettingsMenuItem = React.forwardRef(({ children = [], ...props }, ref) => {
-  return React.createElement('media-settings-menu-item', { ...toNativeProps(props), ref, suppressHydrationWarning: true }, children);
+export const MediaSettingsMenuItem = createComponent({
+  tagName: "media-settings-menu-item",
+  elementClass: Modules.MediaSettingsMenuItem,
+  react: React,
 });
 
-export { MediaSettingsMenuItem };
-
-/** @type { import("react").HTMLElement } */
-const MediaChromeMenuButton = React.forwardRef(({ children = [], ...props }, ref) => {
-  return React.createElement('media-chrome-menu-button', { ...toNativeProps(props), ref, suppressHydrationWarning: true }, children);
+export const MediaChromeMenuButton = createComponent({
+  tagName: "media-chrome-menu-button",
+  elementClass: Modules.MediaChromeMenuButton,
+  react: React,
 });
 
-export { MediaChromeMenuButton };
-
-/** @type { import("react").HTMLElement } */
-const MediaSettingsMenuButton = React.forwardRef(({ children = [], ...props }, ref) => {
-  return React.createElement('media-settings-menu-button', { ...toNativeProps(props), ref, suppressHydrationWarning: true }, children);
+export const MediaSettingsMenuButton = createComponent({
+  tagName: "media-settings-menu-button",
+  elementClass: Modules.MediaSettingsMenuButton,
+  react: React,
 });
 
-export { MediaSettingsMenuButton };
-
-/** @type { import("react").HTMLElement } */
-const MediaAudioTrackMenu = React.forwardRef(({ children = [], ...props }, ref) => {
-  return React.createElement('media-audio-track-menu', { ...toNativeProps(props), ref, suppressHydrationWarning: true }, children);
+export const MediaAudioTrackMenu = createComponent({
+  tagName: "media-audio-track-menu",
+  elementClass: Modules.MediaAudioTrackMenu,
+  react: React,
 });
 
-export { MediaAudioTrackMenu };
-
-/** @type { import("react").HTMLElement } */
-const MediaAudioTrackMenuButton = React.forwardRef(({ children = [], ...props }, ref) => {
-  return React.createElement('media-audio-track-menu-button', { ...toNativeProps(props), ref, suppressHydrationWarning: true }, children);
+export const MediaAudioTrackMenuButton = createComponent({
+  tagName: "media-audio-track-menu-button",
+  elementClass: Modules.MediaAudioTrackMenuButton,
+  react: React,
 });
 
-export { MediaAudioTrackMenuButton };
-
-/** @type { import("react").HTMLElement } */
-const MediaCaptionsMenu = React.forwardRef(({ children = [], ...props }, ref) => {
-  return React.createElement('media-captions-menu', { ...toNativeProps(props), ref, suppressHydrationWarning: true }, children);
+export const MediaCaptionsMenu = createComponent({
+  tagName: "media-captions-menu",
+  elementClass: Modules.MediaCaptionsMenu,
+  react: React,
 });
 
-export { MediaCaptionsMenu };
-
-/** @type { import("react").HTMLElement } */
-const MediaCaptionsMenuButton = React.forwardRef(({ children = [], ...props }, ref) => {
-  return React.createElement('media-captions-menu-button', { ...toNativeProps(props), ref, suppressHydrationWarning: true }, children);
+export const MediaCaptionsMenuButton = createComponent({
+  tagName: "media-captions-menu-button",
+  elementClass: Modules.MediaCaptionsMenuButton,
+  react: React,
 });
 
-export { MediaCaptionsMenuButton };
-
-/** @type { import("react").HTMLElement } */
-const MediaPlaybackRateMenu = React.forwardRef(({ children = [], ...props }, ref) => {
-  return React.createElement('media-playback-rate-menu', { ...toNativeProps(props), ref, suppressHydrationWarning: true }, children);
+export const MediaPlaybackRateMenu = createComponent({
+  tagName: "media-playback-rate-menu",
+  elementClass: Modules.MediaPlaybackRateMenu,
+  react: React,
 });
 
-export { MediaPlaybackRateMenu };
-
-/** @type { import("react").HTMLElement } */
-const MediaPlaybackRateMenuButton = React.forwardRef(({ children = [], ...props }, ref) => {
-  return React.createElement('media-playback-rate-menu-button', { ...toNativeProps(props), ref, suppressHydrationWarning: true }, children);
+export const MediaPlaybackRateMenuButton = createComponent({
+  tagName: "media-playback-rate-menu-button",
+  elementClass: Modules.MediaPlaybackRateMenuButton,
+  react: React,
 });
 
-export { MediaPlaybackRateMenuButton };
-
-/** @type { import("react").HTMLElement } */
-const MediaRenditionMenu = React.forwardRef(({ children = [], ...props }, ref) => {
-  return React.createElement('media-rendition-menu', { ...toNativeProps(props), ref, suppressHydrationWarning: true }, children);
+export const MediaRenditionMenu = createComponent({
+  tagName: "media-rendition-menu",
+  elementClass: Modules.MediaRenditionMenu,
+  react: React,
 });
 
-export { MediaRenditionMenu };
-
-/** @type { import("react").HTMLElement } */
-const MediaRenditionMenuButton = React.forwardRef(({ children = [], ...props }, ref) => {
-  return React.createElement('media-rendition-menu-button', { ...toNativeProps(props), ref, suppressHydrationWarning: true }, children);
-});
-
-export { MediaRenditionMenuButton };
+export const MediaRenditionMenuButton = createComponent({
+  tagName: "media-rendition-menu-button",
+  elementClass: Modules.MediaRenditionMenuButton,
+  react: React,
+});

package.json

 {
   "name": "media-chrome",
-  "version": "4.5.0",
+  "version": "4.5.1-canary.0",
   "description": "Custom elements (web components) for making audio and video player controls that look great in your website or app.",
@@ -187,3 +187,6 @@ "author": "@muxinc",
     "controls"
-  ]
+  ],
+  "dependencies": {
+    "ce-la-react": "^0.1.3"
+  }
 }

src/js/index.ts

@@ -35,2 +35,4 @@ export * as constants from './constants.js';
 import MediaVolumeRange from './media-volume-range.js';
+import MediaContainer from './media-container.js';
+import MediaTextDisplay from './media-text-display.js';
 
@@ -66,2 +68,4 @@ export {
   MediaVolumeRange,
+  MediaContainer,
+  MediaTextDisplay,
 };

src/js/media-chrome-button.ts

 import { MediaStateReceiverAttributes } from './constants.js';
 import MediaTooltip, { TooltipPlacement } from './media-tooltip.js';
 import {
+  getBooleanAttr,
   getOrInsertCSSRule,
   getStringAttr,
+  setBooleanAttr,
   setStringAttr,
@@ -12,2 +14,4 @@ } from './utils/element-utils.js';
   TOOLTIP_PLACEMENT: 'tooltipplacement',
+  DISABLED: 'disabled',
+  NO_TOOLTIP: 'notooltip',
 };
@@ -76,3 +80,5 @@
   media-tooltip {
-    ${/** Make sure unpositioned tooltip doesn't cause page overflow (scroll). */ ''}
+    ${
+      /** Make sure unpositioned tooltip doesn't cause page overflow (scroll). */ ''
+    }
     max-width: 0;
@@ -200,3 +206,3 @@ overflow-x: clip;
     this.tooltipEl?.updateXOffset?.();
-  }
+  };
 
@@ -280,2 +286,4 @@ // NOTE: There are definitely some "false positive" cases with multi-key pressing,
       this.enable();
+    } else {
+      this.disable();
     }
@@ -338,2 +346,26 @@
 
+  get mediaController(): string | undefined {
+    return getStringAttr(this, MediaStateReceiverAttributes.MEDIA_CONTROLLER);
+  }
+
+  set mediaController(value: string | undefined) {
+    setStringAttr(this, MediaStateReceiverAttributes.MEDIA_CONTROLLER, value);
+  }
+
+  get disabled(): boolean | undefined {
+    return getBooleanAttr(this, Attributes.DISABLED);
+  }
+
+  set disabled(value: boolean | undefined) {
+    setBooleanAttr(this, Attributes.DISABLED, value);
+  }
+
+  get noTooltip(): boolean | undefined {
+    return getBooleanAttr(this, Attributes.NO_TOOLTIP);
+  }
+
+  set noTooltip(value: boolean | undefined) {
+    setBooleanAttr(this, Attributes.NO_TOOLTIP, value);
+  }
+
   /**
@@ -340,0 +372,0 @@ * @abstract

src/js/media-container.ts

@@ -16,2 +16,8 @@ /*
 import './media-gesture-receiver.js';
+import {
+  getBooleanAttr,
+  getStringAttr,
+  setBooleanAttr,
+  setStringAttr,
+} from './utils/element-utils.js';
 
@@ -642,2 +648,50 @@ export const Attributes = {
   }
+
+  get breakpoints(): string | undefined {
+    return getStringAttr(this, Attributes.BREAKPOINTS);
+  }
+
+  set breakpoints(value: string | undefined) {
+    setStringAttr(this, Attributes.BREAKPOINTS, value);
+  }
+
+  get audio(): boolean | undefined {
+    return getBooleanAttr(this, Attributes.AUDIO);
+  }
+
+  set audio(value: boolean | undefined) {
+    setBooleanAttr(this, Attributes.AUDIO, value);
+  }
+
+  get gesturesDisabled(): boolean | undefined {
+    return getBooleanAttr(this, Attributes.GESTURES_DISABLED);
+  }
+
+  set gesturesDisabled(value: boolean | undefined) {
+    setBooleanAttr(this, Attributes.GESTURES_DISABLED, value);
+  }
+
+  get keyboardControl(): boolean | undefined {
+    return getBooleanAttr(this, Attributes.KEYBOARD_CONTROL);
+  }
+
+  set keyboardControl(value: boolean | undefined) {
+    setBooleanAttr(this, Attributes.KEYBOARD_CONTROL, value);
+  }
+
+  get noAutohide(): boolean | undefined {
+    return getBooleanAttr(this, Attributes.NO_AUTOHIDE);
+  }
+
+  set noAutohide(value: boolean | undefined) {
+    setBooleanAttr(this, Attributes.NO_AUTOHIDE, value);
+  }
+
+  get userInteractive(): boolean | undefined {
+    return getBooleanAttr(this, Attributes.USER_INACTIVE);
+  }
+
+  set userInteractive(value: boolean | undefined) {
+    setBooleanAttr(this, Attributes.USER_INACTIVE, value);
+  }
 }
@@ -644,0 +698,0 @@

src/js/media-controller.ts

@@ -27,2 +27,5 @@ /*
 import {
+  getBooleanAttr,
+  getNumericAttr,
+  getStringAttr,
   setBooleanAttr,
@@ -194,2 +197,82 @@ setNumericAttr,
 
+  get defaultSubtitles(): boolean | undefined {
+    return getBooleanAttr(this, Attributes.DEFAULT_SUBTITLES);
+  }
+
+  set defaultSubtitles(value: boolean) {
+    setBooleanAttr(this, Attributes.DEFAULT_SUBTITLES, value);
+  }
+
+  get defaultStreamType(): string | undefined {
+    return getStringAttr(this, Attributes.DEFAULT_STREAM_TYPE);
+  }
+
+  set defaultStreamType(value: string | undefined) {
+    setStringAttr(this, Attributes.DEFAULT_STREAM_TYPE, value);
+  }
+
+  get defaultDuration(): number | undefined {
+    return getNumericAttr(this, Attributes.DEFAULT_DURATION);
+  }
+
+  set defaultDuration(value: number | undefined) {
+    setNumericAttr(this, Attributes.DEFAULT_DURATION, value);
+  }
+
+  get noHotkeys(): boolean | undefined {
+    return getBooleanAttr(this, Attributes.NO_HOTKEYS);
+  }
+
+  set noHotkeys(value: boolean | undefined) {
+    setBooleanAttr(this, Attributes.NO_HOTKEYS, value);
+  }
+
+  get keysUsed(): string | undefined {
+    return getStringAttr(this, Attributes.KEYS_USED);
+  }
+
+  set keysUsed(value: string | undefined) {
+    setStringAttr(this, Attributes.KEYS_USED, value);
+  }
+
+  get liveEdgeOffset(): number | undefined {
+    return getNumericAttr(this, Attributes.LIVE_EDGE_OFFSET);
+  }
+
+  set liveEdgeOffset(value: number | undefined) {
+    setNumericAttr(this, Attributes.LIVE_EDGE_OFFSET, value);
+  }
+
+  get noAutoSeekToLive(): boolean | undefined {
+    return getBooleanAttr(this, Attributes.NO_AUTO_SEEK_TO_LIVE);
+  }
+
+  set noAutoSeekToLive(value: boolean | undefined) {
+    setBooleanAttr(this, Attributes.NO_AUTO_SEEK_TO_LIVE, value);
+  }
+
+  get noVolumePref(): boolean | undefined {
+    return getBooleanAttr(this, Attributes.NO_VOLUME_PREF);
+  }
+
+  set noVolumePref(value: boolean | undefined) {
+    setBooleanAttr(this, Attributes.NO_VOLUME_PREF, value);
+  }
+
+  get noSubtitlesLangPref(): boolean | undefined {
+    return getBooleanAttr(this, Attributes.NO_SUBTITLES_LANG_PREF);
+  }
+
+  set noSubtitlesLangPref(value: boolean | undefined) {
+    setBooleanAttr(this, Attributes.NO_SUBTITLES_LANG_PREF, value);
+  }
+
+  get noDefaultStore(): boolean | undefined {
+    return getBooleanAttr(this, Attributes.NO_DEFAULT_STORE);
+  }
+
+  set noDefaultStore(value: boolean | undefined) {
+    setBooleanAttr(this, Attributes.NO_DEFAULT_STORE, value);
+  }
+
   attributeChangedCallback(
@@ -450,6 +533,10 @@ attrName: string,
 
-  get hotkeys() {
-    return this.#hotKeys;
+  get hotkeys(): string | undefined {
+    return getStringAttr(this, Attributes.HOTKEYS);
   }
 
+  set hotkeys(value: string | undefined) {
+    setStringAttr(this, Attributes.HOTKEYS, value);
+  }
+
   keyboardShortcutHandler(e: KeyboardEvent) {
@@ -456,0 +543,0 @@ // TODO: e.target might need to be replaced w/ e.composedPath to account for shadow DOM.

src/js/media-loading-indicator.ts

@@ -11,2 +11,4 @@ import {
   getOrInsertCSSRule,
+  setStringAttr,
+  getStringAttr,
 } from './utils/element-utils.js';
@@ -16,2 +18,3 @@ import MediaController from './media-controller.js';
   LOADING_DELAY: 'loadingdelay',
+  NO_AUTOHIDE: 'noautohide',
 };
@@ -212,2 +215,18 @@
   }
+
+  get mediaController(): string | undefined {
+    return getStringAttr(this, MediaStateReceiverAttributes.MEDIA_CONTROLLER);
+  }
+
+  set mediaController(value: string | undefined) {
+    setStringAttr(this, MediaStateReceiverAttributes.MEDIA_CONTROLLER, value);
+  }
+
+  get noAutohide(): boolean | undefined {
+    return getBooleanAttr(this, Attributes.NO_AUTOHIDE);
+  }
+
+  set noAutohide(value: boolean | undefined) {
+    setBooleanAttr(this, Attributes.NO_AUTOHIDE, value);
+  }
 }
@@ -214,0 +233,0 @@

src/js/menu/index.ts

@@ -14,1 +14,2 @@ export { MediaChromeMenu } from './media-chrome-menu.js';
 export { MediaRenditionMenuButton } from './media-rendition-menu-button.js';
+export { MediaChromeMenuButton } from './media-chrome-menu-button.js';

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

4389089

1.1%

Lines of code

76779

1.63%

Worsened metrics

Dependency count

1

Infinity%

Number of package files

345

-0.86%

Number of low quality alerts

1

Infinity%

Dependency changes

• + Added

  ce-la-react@^0.1.3

• + Added

  ce-la-react@0.1.3
  (transitive)

• + Added

  react@19.0.0
  (transitive)