super-media-element - npm Package Compare versions

Comparing version 1.2.5 to 1.3.0

package.json

 {
   "name": "super-media-element",
-  "version": "1.2.5",
+  "version": "1.3.0",
   "description": "Helps you create a custom element w/ a HTMLMediaElement API.",
@@ -5,0 +5,0 @@ "type": "module",

super-media-element.d.ts

 
-type Constructor = new (...args: any[]) => {};
+export const Events: string[];
 
-export function SuperMediaMixin<TBase extends Constructor>(Base: TBase): any;
+export const template: HTMLTemplateElement;
 
@@ -25,1 +25,14 @@ export class SuperAudioElement extends HTMLAudioElement implements HTMLAudioElement {
 }
+
+type SuperMediaElementConstructor<K> = {
+  readonly observedAttributes: string[];
+  Events: string[];
+  template: HTMLTemplateElement;
+  new(): K
+};
+
+export function SuperMediaMixin(Base: any, options: { tag: 'video', is: string }):
+  SuperMediaElementConstructor<SuperVideoElement>;
+
+export function SuperMediaMixin(Base: any, options: { tag: 'audio', is: string }):
+  SuperMediaElementConstructor<SuperAudioElement>;

super-media-element.js

@@ -13,3 +13,3 @@ /**
 // generic events making it impossible to pick these specific to HTMLMediaElement.
-const Events = [
+export const Events = [
   'abort',
@@ -42,26 +42,26 @@ 'canplay',
   'leavepictureinpicture',
+  'webkitbeginfullscreen',
+  'webkitendfullscreen',
+  'webkitpresentationmodechanged',
 ];
 
-const styles = `
-  :host {
-    display: inline-block;
-    line-height: 0;
-  }
+export const template = globalThis.document?.createElement('template');
 
-  video,
-  audio {
-    max-width: 100%;
-    max-height: 100%;
-    min-width: 100%;
-    min-height: 100%;
-  }
-`;
+if (template) {
+  template.innerHTML = /*html*/`
+    <style>
+      :host {
+        display: inline-block;
+        line-height: 0;
+      }
 
-const template = globalThis.document?.createElement('template');
-if (template) {
-  template.innerHTML = `
-  <style>
-    ${styles}
-  </style>
-  <slot></slot>
+      video,
+      audio {
+        max-width: 100%;
+        max-height: 100%;
+        min-width: 100%;
+        min-height: 100%;
+      }
+    </style>
+    <slot></slot>
   `;
@@ -75,4 +75,4 @@ }
 
-  const nativeElTest = document.createElement(tag, { is });
-  const nativeElProps = getNativeElProps(nativeElTest);
+  const nativeElTest = globalThis.document?.createElement(tag, { is });
+  const nativeElProps = nativeElTest ? getNativeElProps(nativeElTest) : [];
 
@@ -89,6 +89,6 @@ return class SuperMedia extends superclass {
       // Include any attributes from the custom built-in.
-      const natAttrs = Object.getPrototypeOf(nativeElTest).observedAttributes;
+      const natAttrs = nativeElTest?.constructor?.observedAttributes ?? [];
 
       return [
-        ...(natAttrs ?? []),
+        ...natAttrs,
         'autopictureinpicture',
@@ -256,3 +256,3 @@ 'disablepictureinpicture',
     get preload() {
-      return this.getAttribute('preload') ?? 'metadata';
+      return this.getAttribute('preload') ?? this.nativeEl?.preload;
     }
@@ -301,3 +301,3 @@
       // This makes it possible to add event listeners before the element is upgraded.
-      for (let type of Events) {
+      for (let type of this.constructor.Events) {
         this.shadowRoot.addEventListener?.(type, (evt) => {
@@ -348,10 +348,11 @@ if (evt.target !== this.nativeEl) return;
       if (!this.nativeEl) {
-        // Neither Chrome or Firefox support setting the muted attribute
-        // after using document.createElement.
-        // Get around this by setting the muted property manually.
         const nativeEl = document.createElement(tag, { is });
-        nativeEl.muted = this.hasAttribute('muted');
-
+        nativeEl.part = tag;
         this.shadowRoot.append(nativeEl);
       }
+
+      // Neither Chrome or Firefox support setting the muted attribute
+      // after using document.createElement.
+      // Get around this by setting the muted property manually.
+      this.nativeEl.muted = this.hasAttribute('muted');
     }
@@ -358,0 +359,0 @@

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

18345

increased by3.21%

Lines of code

401

increased by2.82%

No dependency changes