media-chrome - npm Package Compare versions

Comparing version 4.1.1-canary.3 to 4.1.1-canary.4

dist/cjs/constants.js

@@ -75,2 +75,4 @@ var __defProp = Object.defineProperty;
   MEDIA_AUDIO_TRACK_UNAVAILABLE: "mediaAudioTrackUnavailable",
+  MEDIA_WIDTH: "mediaWidth",
+  MEDIA_HEIGHT: "mediaHeight",
   MEDIA_PAUSED: "mediaPaused",
@@ -77,0 +79,0 @@ MEDIA_HAS_PLAYED: "mediaHasPlayed",

dist/cjs/media-container.js

@@ -360,3 +360,5 @@ var __defProp = Object.defineProperty;
         import_constants.MediaUIAttributes.MEDIA_AUDIO_TRACK_LIST,
-        import_constants.MediaUIAttributes.MEDIA_CHAPTERS_CUES
+        import_constants.MediaUIAttributes.MEDIA_CHAPTERS_CUES,
+        import_constants.MediaUIAttributes.MEDIA_WIDTH,
+        import_constants.MediaUIAttributes.MEDIA_HEIGHT
       ].includes(name)
@@ -363,0 +365,0 @@ );

dist/cjs/media-store/state-mediator.js

@@ -56,2 +56,18 @@ var __defProp = Object.defineProperty;
 const stateMediator = {
+  mediaWidth: {
+    get(stateOwners) {
+      var _a;
+      const { media } = stateOwners;
+      return (_a = media == null ? void 0 : media.videoWidth) != null ? _a : 0;
+    },
+    mediaEvents: ["resize"]
+  },
+  mediaHeight: {
+    get(stateOwners) {
+      var _a;
+      const { media } = stateOwners;
+      return (_a = media == null ? void 0 : media.videoHeight) != null ? _a : 0;
+    },
+    mediaEvents: ["resize"]
+  },
   mediaPaused: {
@@ -58,0 +74,0 @@ get(stateOwners) {

dist/cjs/menu/media-chrome-menu-item.js

@@ -199,3 +199,4 @@ var __defProp = Object.defineProperty;
       );
-      const description = (_b = (_a = this.submenuElement.checkedItems) == null ? void 0 : _a[0]) == null ? void 0 : _b.text;
+      const checkedItem = (_a = this.submenuElement.checkedItems) == null ? void 0 : _a[0];
+      const description = (_b = checkedItem == null ? void 0 : checkedItem.dataset.description) != null ? _b : checkedItem == null ? void 0 : checkedItem.text;
       const span = import_server_safe_globals.document.createElement("span");
@@ -202,0 +203,0 @@ span.textContent = description != null ? description : "";

dist/cjs/menu/media-rendition-menu-button.js

@@ -50,3 +50,4 @@ var __defProp = Object.defineProperty;
       import_constants.MediaUIAttributes.MEDIA_RENDITION_SELECTED,
-      import_constants.MediaUIAttributes.MEDIA_RENDITION_UNAVAILABLE
+      import_constants.MediaUIAttributes.MEDIA_RENDITION_UNAVAILABLE,
+      import_constants.MediaUIAttributes.MEDIA_HEIGHT
     ];
@@ -78,2 +79,8 @@ }
   }
+  get mediaHeight() {
+    return (0, import_element_utils.getNumericAttr)(this, import_constants.MediaUIAttributes.MEDIA_HEIGHT);
+  }
+  set mediaHeight(height) {
+    (0, import_element_utils.setNumericAttr)(this, import_constants.MediaUIAttributes.MEDIA_HEIGHT, height);
+  }
 }
@@ -80,0 +87,0 @@ if (!import_server_safe_globals.globalThis.customElements.get("media-rendition-menu-button")) {

dist/cjs/menu/media-rendition-menu.js

@@ -58,3 +58,3 @@ var __defProp = Object.defineProperty;
     __privateAdd(this, _renditionList, []);
-    __privateAdd(this, _prevState, void 0);
+    __privateAdd(this, _prevState, {});
   }
@@ -66,3 +66,4 @@ static get observedAttributes() {
       import_constants.MediaUIAttributes.MEDIA_RENDITION_SELECTED,
-      import_constants.MediaUIAttributes.MEDIA_RENDITION_UNAVAILABLE
+      import_constants.MediaUIAttributes.MEDIA_RENDITION_UNAVAILABLE,
+      import_constants.MediaUIAttributes.MEDIA_HEIGHT
     ];
@@ -77,2 +78,4 @@ }
       __privateMethod(this, _render, render_fn).call(this);
+    } else if (attrName === import_constants.MediaUIAttributes.MEDIA_HEIGHT && oldValue !== newValue) {
+      __privateMethod(this, _render, render_fn).call(this);
     }
@@ -114,2 +117,8 @@ }
   }
+  get mediaHeight() {
+    return (0, import_element_utils.getNumericAttr)(this, import_constants.MediaUIAttributes.MEDIA_HEIGHT);
+  }
+  set mediaHeight(height) {
+    (0, import_element_utils.setNumericAttr)(this, import_constants.MediaUIAttributes.MEDIA_HEIGHT, height);
+  }
 }
@@ -120,8 +129,12 @@ _renditionList = new WeakMap();
 render_fn = function() {
-  if (__privateGet(this, _prevState) === JSON.stringify(this.mediaRenditionList))
+  if (__privateGet(this, _prevState).mediaRenditionList === JSON.stringify(this.mediaRenditionList) && __privateGet(this, _prevState).mediaHeight === this.mediaHeight)
     return;
-  __privateSet(this, _prevState, JSON.stringify(this.mediaRenditionList));
+  __privateGet(this, _prevState).mediaRenditionList = JSON.stringify(this.mediaRenditionList);
+  __privateGet(this, _prevState).mediaHeight = this.mediaHeight;
   const renditionList = this.mediaRenditionList.sort(
     (a, b) => b.height - a.height
   );
+  for (const rendition of renditionList) {
+    rendition.selected = rendition.id === this.mediaRenditionSelected;
+  }
   this.defaultSlot.textContent = "";
@@ -149,2 +162,4 @@ const isAuto = !this.mediaRenditionSelected;
   });
+  const autoDescription = this.mediaHeight > 0 ? `Auto (${this.mediaHeight}p)` : "Auto";
+  item.dataset.description = autoDescription;
   item.prepend((0, import_media_chrome_menu.createIndicator)(this, "checked-indicator"));
@@ -151,0 +166,0 @@ this.defaultSlot.append(item);

dist/cjs/menu/media-settings-menu.js

@@ -36,3 +36,3 @@ var __defProp = Object.defineProperty;
         var(--media-secondary-color, rgb(20 20 30 / .8)))));
-      min-width: var(--media-settings-menu-min-width, 160px);
+      min-width: var(--media-settings-menu-min-width, 170px);
       border-radius: 2px 2px 0 0;
@@ -39,0 +39,0 @@ overflow: hidden;

dist/constants.d.ts

@@ -41,2 +41,4 @@ export declare const MediaUIEvents: {
     readonly MEDIA_AUDIO_TRACK_UNAVAILABLE: "mediaAudioTrackUnavailable";
+    readonly MEDIA_WIDTH: "mediaWidth";
+    readonly MEDIA_HEIGHT: "mediaHeight";
     readonly MEDIA_PAUSED: "mediaPaused";
@@ -43,0 +45,0 @@ readonly MEDIA_HAS_PLAYED: "mediaHasPlayed";

dist/constants.js

@@ -39,2 +39,4 @@ const MediaUIEvents = {
   MEDIA_AUDIO_TRACK_UNAVAILABLE: "mediaAudioTrackUnavailable",
+  MEDIA_WIDTH: "mediaWidth",
+  MEDIA_HEIGHT: "mediaHeight",
   MEDIA_PAUSED: "mediaPaused",
@@ -41,0 +43,0 @@ MEDIA_HAS_PLAYED: "mediaHasPlayed",

dist/media-container.js

@@ -336,3 +336,5 @@ var __accessCheck = (obj, member, msg) => {
         MediaUIAttributes.MEDIA_AUDIO_TRACK_LIST,
-        MediaUIAttributes.MEDIA_CHAPTERS_CUES
+        MediaUIAttributes.MEDIA_CHAPTERS_CUES,
+        MediaUIAttributes.MEDIA_WIDTH,
+        MediaUIAttributes.MEDIA_HEIGHT
       ].includes(name)
@@ -339,0 +341,0 @@ );

dist/media-store/state-mediator.d.ts

@@ -152,2 +152,4 @@ import { AvailabilityStates, StreamTypes } from '../constants.js';
 export type StateMediator = {
+    mediaWidth: ReadonlyFacadeProp<number>;
+    mediaHeight: ReadonlyFacadeProp<number>;
     mediaPaused: FacadeProp<HTMLMediaElement['paused']>;
@@ -154,0 +156,0 @@ mediaHasPlayed: ReadonlyFacadeProp<boolean>;

dist/media-store/state-mediator.js

@@ -48,2 +48,18 @@ import { document, globalThis } from "../utils/server-safe-globals.js";
 const stateMediator = {
+  mediaWidth: {
+    get(stateOwners) {
+      var _a;
+      const { media } = stateOwners;
+      return (_a = media == null ? void 0 : media.videoWidth) != null ? _a : 0;
+    },
+    mediaEvents: ["resize"]
+  },
+  mediaHeight: {
+    get(stateOwners) {
+      var _a;
+      const { media } = stateOwners;
+      return (_a = media == null ? void 0 : media.videoHeight) != null ? _a : 0;
+    },
+    mediaEvents: ["resize"]
+  },
   mediaPaused: {
@@ -50,0 +66,0 @@ get(stateOwners) {

dist/menu/media-chrome-menu-item.js

@@ -178,3 +178,4 @@ var __accessCheck = (obj, member, msg) => {
       );
-      const description = (_b = (_a = this.submenuElement.checkedItems) == null ? void 0 : _a[0]) == null ? void 0 : _b.text;
+      const checkedItem = (_a = this.submenuElement.checkedItems) == null ? void 0 : _a[0];
+      const description = (_b = checkedItem == null ? void 0 : checkedItem.dataset.description) != null ? _b : checkedItem == null ? void 0 : checkedItem.text;
       const span = document.createElement("span");
@@ -181,0 +182,0 @@ span.textContent = description != null ? description : "";

dist/menu/media-rendition-menu-button.d.ts

@@ -21,4 +21,6 @@ import { MediaChromeMenuButton } from './media-chrome-menu-button.js';
     set mediaRenditionSelected(id: string);
+    get mediaHeight(): number;
+    set mediaHeight(height: number);
 }
 export { MediaRenditionMenuButton };
 export default MediaRenditionMenuButton;

dist/menu/media-rendition-menu-button.js

@@ -8,3 +8,5 @@ import { MediaUIAttributes } from "../constants.js";
   setStringAttr,
-  getMediaController
+  getMediaController,
+  getNumericAttr,
+  setNumericAttr
 } from "../utils/element-utils.js";
@@ -32,3 +34,4 @@ const renditionIcon = (
       MediaUIAttributes.MEDIA_RENDITION_SELECTED,
-      MediaUIAttributes.MEDIA_RENDITION_UNAVAILABLE
+      MediaUIAttributes.MEDIA_RENDITION_UNAVAILABLE,
+      MediaUIAttributes.MEDIA_HEIGHT
     ];
@@ -60,2 +63,8 @@ }
   }
+  get mediaHeight() {
+    return getNumericAttr(this, MediaUIAttributes.MEDIA_HEIGHT);
+  }
+  set mediaHeight(height) {
+    setNumericAttr(this, MediaUIAttributes.MEDIA_HEIGHT, height);
+  }
 }
@@ -62,0 +71,0 @@ if (!globalThis.customElements.get("media-rendition-menu-button")) {

dist/menu/media-rendition-menu.d.ts

@@ -30,4 +30,6 @@ import { MediaChromeMenu } from './media-chrome-menu.js';
     set mediaRenditionSelected(id: string);
+    get mediaHeight(): number;
+    set mediaHeight(height: number);
 }
 export { MediaRenditionMenu };
 export default MediaRenditionMenu;

dist/menu/media-rendition-menu.js

@@ -29,3 +29,5 @@ var __accessCheck = (obj, member, msg) => {
   getStringAttr,
-  setStringAttr
+  setStringAttr,
+  getNumericAttr,
+  setNumericAttr
 } from "../utils/element-utils.js";
@@ -44,3 +46,3 @@ import { parseRenditionList } from "../utils/utils.js";
     __privateAdd(this, _renditionList, []);
-    __privateAdd(this, _prevState, void 0);
+    __privateAdd(this, _prevState, {});
   }
@@ -52,3 +54,4 @@ static get observedAttributes() {
       MediaUIAttributes.MEDIA_RENDITION_SELECTED,
-      MediaUIAttributes.MEDIA_RENDITION_UNAVAILABLE
+      MediaUIAttributes.MEDIA_RENDITION_UNAVAILABLE,
+      MediaUIAttributes.MEDIA_HEIGHT
     ];
@@ -63,2 +66,4 @@ }
       __privateMethod(this, _render, render_fn).call(this);
+    } else if (attrName === MediaUIAttributes.MEDIA_HEIGHT && oldValue !== newValue) {
+      __privateMethod(this, _render, render_fn).call(this);
     }
@@ -100,2 +105,8 @@ }
   }
+  get mediaHeight() {
+    return getNumericAttr(this, MediaUIAttributes.MEDIA_HEIGHT);
+  }
+  set mediaHeight(height) {
+    setNumericAttr(this, MediaUIAttributes.MEDIA_HEIGHT, height);
+  }
 }
@@ -106,8 +117,12 @@ _renditionList = new WeakMap();
 render_fn = function() {
-  if (__privateGet(this, _prevState) === JSON.stringify(this.mediaRenditionList))
+  if (__privateGet(this, _prevState).mediaRenditionList === JSON.stringify(this.mediaRenditionList) && __privateGet(this, _prevState).mediaHeight === this.mediaHeight)
     return;
-  __privateSet(this, _prevState, JSON.stringify(this.mediaRenditionList));
+  __privateGet(this, _prevState).mediaRenditionList = JSON.stringify(this.mediaRenditionList);
+  __privateGet(this, _prevState).mediaHeight = this.mediaHeight;
   const renditionList = this.mediaRenditionList.sort(
     (a, b) => b.height - a.height
   );
+  for (const rendition of renditionList) {
+    rendition.selected = rendition.id === this.mediaRenditionSelected;
+  }
   this.defaultSlot.textContent = "";
@@ -135,2 +150,4 @@ const isAuto = !this.mediaRenditionSelected;
   });
+  const autoDescription = this.mediaHeight > 0 ? `Auto (${this.mediaHeight}p)` : "Auto";
+  item.dataset.description = autoDescription;
   item.prepend(createIndicator(this, "checked-indicator"));
@@ -137,0 +154,0 @@ this.defaultSlot.append(item);

dist/menu/media-settings-menu.js

@@ -13,3 +13,3 @@ import { globalThis, document } from "../utils/server-safe-globals.js";
         var(--media-secondary-color, rgb(20 20 30 / .8)))));
-      min-width: var(--media-settings-menu-min-width, 160px);
+      min-width: var(--media-settings-menu-min-width, 170px);
       border-radius: 2px 2px 0 0;
@@ -16,0 +16,0 @@ overflow: hidden;

dist/react/media-store.d.ts

@@ -66,2 +66,4 @@ import type { Context, ReactNode } from 'react';
     readonly MEDIA_AUDIO_TRACK_UNAVAILABLE: "mediaAudioTrackUnavailable";
+    readonly MEDIA_WIDTH: "mediaWidth";
+    readonly MEDIA_HEIGHT: "mediaHeight";
     readonly MEDIA_PAUSED: "mediaPaused";
@@ -68,0 +70,0 @@ readonly MEDIA_HAS_PLAYED: "mediaHasPlayed";

package.json

 {
   "name": "media-chrome",
-  "version": "4.1.1-canary.3",
+  "version": "4.1.1-canary.4",
   "description": "Custom elements (web components) for making audio and video player controls that look great in your website or app.",
@@ -5,0 +5,0 @@ "author": "@muxinc",

src/js/constants.ts

@@ -45,2 +45,4 @@ export const MediaUIEvents = {
   MEDIA_AUDIO_TRACK_UNAVAILABLE: 'mediaAudioTrackUnavailable',
+  MEDIA_WIDTH: 'mediaWidth',
+  MEDIA_HEIGHT: 'mediaHeight',
   MEDIA_PAUSED: 'mediaPaused',
@@ -47,0 +49,0 @@ MEDIA_HAS_PLAYED: 'mediaHasPlayed',

src/js/media-container.ts

@@ -299,2 +299,4 @@ /*
               MediaUIAttributes.MEDIA_CHAPTERS_CUES,
+              MediaUIAttributes.MEDIA_WIDTH,
+              MediaUIAttributes.MEDIA_HEIGHT,
             ].includes(name as any)
@@ -301,0 +303,0 @@ )

src/js/media-store/state-mediator.ts

@@ -196,2 +196,4 @@ import { document, globalThis } from '../utils/server-safe-globals.js';
 export type StateMediator = {
+  mediaWidth: ReadonlyFacadeProp<number>;
+  mediaHeight: ReadonlyFacadeProp<number>;
   mediaPaused: FacadeProp<HTMLMediaElement['paused']>;
@@ -285,2 +287,16 @@ mediaHasPlayed: ReadonlyFacadeProp<boolean>;
 export const stateMediator: StateMediator = {
+  mediaWidth: {
+    get(stateOwners) {
+      const { media } = stateOwners;
+      return media?.videoWidth ?? 0;
+    },
+    mediaEvents: ['resize'],
+  },
+  mediaHeight: {
+    get(stateOwners) {
+      const { media } = stateOwners;
+      return media?.videoHeight ?? 0;
+    },
+    mediaEvents: ['resize'],
+  },
   mediaPaused: {
@@ -287,0 +303,0 @@ get(stateOwners) {

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

@@ -401,3 +401,4 @@ import { globalThis, document } from '../utils/server-safe-globals.js';
     );
-    const description = this.submenuElement.checkedItems?.[0]?.text;
+    const checkedItem = this.submenuElement.checkedItems?.[0];
+    const description = checkedItem?.dataset.description ?? checkedItem?.text;
 
@@ -404,0 +405,0 @@ const span = document.createElement('span');

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

@@ -9,2 +9,4 @@ import { MediaUIAttributes } from '../constants.js';
   getMediaController,
+  getNumericAttr,
+  setNumericAttr,
 } from '../utils/element-utils.js';
@@ -38,2 +40,3 @@
       MediaUIAttributes.MEDIA_RENDITION_UNAVAILABLE,
+      MediaUIAttributes.MEDIA_HEIGHT,
     ];
@@ -69,2 +72,10 @@ }
   }
+
+  get mediaHeight(): number {
+    return getNumericAttr(this, MediaUIAttributes.MEDIA_HEIGHT);
+  }
+
+  set mediaHeight(height: number) {
+    setNumericAttr(this, MediaUIAttributes.MEDIA_HEIGHT, height);
+  }
 }
@@ -71,0 +82,0 @@

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

@@ -7,2 +7,4 @@ import { globalThis } from '../utils/server-safe-globals.js';
   setStringAttr,
+  getNumericAttr,
+  setNumericAttr,
 } from '../utils/element-utils.js';
@@ -34,2 +36,3 @@ import { parseRenditionList } from '../utils/utils.js';
       MediaUIAttributes.MEDIA_RENDITION_UNAVAILABLE,
+      MediaUIAttributes.MEDIA_HEIGHT,
     ];
@@ -39,3 +42,3 @@ }
   #renditionList: Rendition[] = [];
-  #prevState;
+  #prevState: Record<string, any> = {};
 
@@ -60,2 +63,7 @@ attributeChangedCallback(
       this.#render();
+    } else if (
+      attrName === MediaUIAttributes.MEDIA_HEIGHT &&
+      oldValue !== newValue
+    ) {
+      this.#render();
     }
@@ -104,6 +112,19 @@ }
 
+  get mediaHeight(): number {
+    return getNumericAttr(this, MediaUIAttributes.MEDIA_HEIGHT);
+  }
+
+  set mediaHeight(height: number) {
+    setNumericAttr(this, MediaUIAttributes.MEDIA_HEIGHT, height);
+  }
+
   #render(): void {
-    if (this.#prevState === JSON.stringify(this.mediaRenditionList)) return;
-    this.#prevState = JSON.stringify(this.mediaRenditionList);
+    if (
+      this.#prevState.mediaRenditionList === JSON.stringify(this.mediaRenditionList) &&
+      this.#prevState.mediaHeight === this.mediaHeight
+    ) return;
 
+    this.#prevState.mediaRenditionList = JSON.stringify(this.mediaRenditionList);
+    this.#prevState.mediaHeight = this.mediaHeight;
+
     const renditionList = this.mediaRenditionList.sort(
@@ -113,2 +134,9 @@ (a: any, b: any) => b.height - a.height
 
+    for (const rendition of renditionList) {
+      // `selected` is not serialized in the rendition list because
+      // each selection would cause a re-render of the menu.
+      // @ts-ignore
+      rendition.selected = rendition.id === this.mediaRenditionSelected;
+    }
+
     this.defaultSlot.textContent = '';
@@ -140,2 +168,6 @@
     });
+
+    const autoDescription = this.mediaHeight > 0 ? `Auto (${this.mediaHeight}p)` : 'Auto';
+    item.dataset.description = autoDescription;
+
     item.prepend(createIndicator(this, 'checked-indicator'));
@@ -142,0 +174,0 @@ this.defaultSlot.append(item);

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

@@ -14,3 +14,3 @@ import { globalThis, document } from '../utils/server-safe-globals.js';
         var(--media-secondary-color, rgb(20 20 30 / .8)))));
-      min-width: var(--media-settings-menu-min-width, 160px);
+      min-width: var(--media-settings-menu-min-width, 170px);
       border-radius: 2px 2px 0 0;
@@ -17,0 +17,0 @@ overflow: hidden;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

4240838

increased by0.28%

Lines of code

73850

increased by0.24%

No dependency changes