super-media-element - npm Package Compare versions

Comparing version 1.0.0 to 1.1.0

package.json

 {
   "name": "super-media-element",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Helps you create a custom element w/ a HTMLMediaElement API.",
@@ -36,4 +36,3 @@ "type": "module",
       "es6": true,
-      "node": true,
-      "mocha": true
+      "node": true
     },
@@ -40,0 +39,0 @@ "extends": [

README.md

@@ -16,9 +16,6 @@ # Super Media Element
     super();
-
-    this.loadComplete = new Promise((resolve) => {
-      this.loadResolve = resolve;
-    });
+    this.loadStart();
   }
 
-  async attributeChangedCallback(attrName, oldValue, newValue) {
+  attributeChangedCallback(attrName, oldValue, newValue) {
     // This is required to come before the await for resolving loadComplete.
@@ -34,16 +31,9 @@ if (attrName === 'src' && newValue) {
   async load() {
-    if (this.hasLoaded) {
-      this.loadComplete = new Promise((resolve) => {
-        this.loadResolve = resolve;
-      });
-    }
-    this.hasLoaded = true;
+    // Kick off load & wait 1 tick to allow other attributes to be set.
+    await this.loadStart();
 
-    // Wait 1 tick to allow other attributes to be set.
-    await Promise.resolve();
-
     // code to load a video element from a script
-    // example: https://github.com/luwes/jwplayer-video-element/blob/main/src/jwplayer-video-element.js#L49-L69
+    // example: https://github.com/luwes/jwplayer-video-element/blob/main/jwplayer-video-element.js#L55-L75
 
-    this.loadResolve();
+    await this.loadEnd();
   }
@@ -54,11 +44,2 @@
   }
-
-  get src() {
-    return this.getAttribute('src');
-  }
-
-  set src(val) {
-    if (this.src == val) return;
-    this.setAttribute('src', val);
-  }
 }
@@ -77,9 +58,11 @@
 - [Media Chrome](https://github.com/muxinc/media-chrome) Your media player's dancing suit. 🕺
+- [`<youtube-video>`](https://github.com/muxinc/youtube-video-element) A custom element for the YouTube player.
+- [`<vimeo-video>`](https://github.com/luwes/vimeo-video-element) A custom element for the Vimeo player.
+- [`<jwplayer-video>`](https://github.com/luwes/jwplayer-video-element) A custom element for the JW player.
+- [`<wistia-video>`](https://github.com/luwes/wistia-video-element) A custom element for the Wistia player.
+- [`<cloudflare-video>`](https://github.com/luwes/cloudflare-video-element) A custom element for the Cloudflare player.
+- [`<videojs-video>`](https://github.com/luwes/videojs-video-element) A custom element for Video.js.
+- [`<hls-video>`](https://github.com/muxinc/hls-video-element) A custom element for playing HTTP Live Streaming (HLS) videos.
+- [`castable-video`](https://github.com/muxinc/castable-video) Cast your video element to the big screen with ease!
+- [`<mux-player>`](https://github.com/muxinc/elements/tree/main/packages/mux-player) The official Mux-flavored video player custom element.
 - [`<mux-video>`](https://github.com/muxinc/elements/tree/main/packages/mux-video) A Mux-flavored HTML5 video element w/ hls.js and Mux data builtin.
-- [`<youtube-video>`](https://github.com/muxinc/youtube-video-element) A web component for the YouTube player.
-- [`<wistia-video>`](https://github.com/luwes/wistia-video-element) A web component for the Wistia player.
-- [`<jwplayer-video>`](https://github.com/luwes/jwplayer-video-element) A web component for the JW player.
-- [`<hls-video>`](https://github.com/muxinc/hls-video-element) A web component for playing HTTP Live Streaming (HLS) videos.
-- [`<videojs-video>`](https://github.com/luwes/videojs-video-element) A web component for Video.js.
-- [`castable-video`](https://github.com/muxinc/castable-video) Cast your video element to the big screen with ease!
-- [`<mux-player>`](https://github.com/muxinc/elements/tree/main/packages/mux-player) The official Mux-flavored video player web component.

super-media-element.js

@@ -110,2 +110,4 @@ /**
 
+      const observedAttributes = this.observedAttributes;
+
       // Passthrough native el functions from the custom el to the native el
@@ -136,2 +138,9 @@ nativeElProps.forEach((prop) => {
               this.#init();
+
+              let attr = prop.toLowerCase();
+              if (observedAttributes.includes(attr)) {
+                const val = this.getAttribute(attr);
+                return val === null ? false : val === '' ? true : val;
+              }
+
               return this.get?.(prop) ?? this.nativeEl?.[prop] ?? this.#standinEl[prop];
@@ -145,7 +154,21 @@ },
               this.#init();
-              if (this.loadComplete && !this.isLoaded) await this.loadComplete;
+
               if (this.set) {
+                if (this.loadComplete && !this.isLoaded) await this.loadComplete;
+
                 this.set(prop, val);
                 return;
               }
+
+              let attr = prop.toLowerCase();
+              if (observedAttributes.includes(attr)) {
+                if (val === true || val === false || val == null) {
+                  this.toggleAttribute(attr, Boolean(val));
+                } else {
+                  this.setAttribute(attr, val);
+                }
+                return;
+              }
+
+              if (this.loadComplete && !this.isLoaded) await this.loadComplete;
               this.nativeEl[prop] = val;
@@ -162,2 +185,3 @@ };
     #loadComplete;
+    #hasLoaded = false;
     #isLoaded = false;
@@ -181,2 +205,19 @@ #nativeEl;
 
+    async loadStart() {
+      // The first time we use the Promise created in the constructor.
+      if (!this.loadComplete || this.#hasLoaded) {
+        this.loadComplete = new PublicPromise();
+      }
+      this.#hasLoaded = true;
+    }
+
+    loadEnd() {
+      this.loadComplete.resolve();
+      return this.loadComplete;
+    }
+
+    get loadComplete() {
+      return this.#loadComplete;
+    }
+
     set loadComplete(promise) {
@@ -190,6 +231,2 @@ this.#isLoaded = false;
 
-    get loadComplete() {
-      return this.#loadComplete;
-    }
-
     get isLoaded() {
@@ -207,2 +244,18 @@ return this.#isLoaded;
 
+    get defaultMuted() {
+      return this.hasAttribute('muted');
+    }
+
+    set defaultMuted(val) {
+      this.toggleAttribute('muted', Boolean(val));
+    }
+
+    get src() {
+      return this.getAttribute('src');
+    }
+
+    set src(val) {
+      this.setAttribute('src', `${val}`);
+    }
+
     async #init() {
@@ -331,2 +384,19 @@ if (this.#isInit) return;
 
+/**
+ * A utility to create Promises with convenient public resolve and reject methods.
+ * @return {Promise}
+ */
+class PublicPromise extends Promise {
+  constructor(executor = () => {}) {
+    let res, rej;
+    super((resolve, reject) => {
+      executor(resolve, reject);
+      res = resolve;
+      rej = reject;
+    });
+    this.resolve = res;
+    this.reject = rej;
+  }
+}
+
 export const SuperVideoElement = SuperMediaMixin(HTMLElement, { tag: 'video' });
@@ -333,0 +403,0 @@ if (!globalThis.customElements.get('super-video')) {

No alert changes

Improved metrics

Total package byte prevSize

16408

increased by10.83%

Lines of code

362

increased by18.3%

Worsened metrics

Number of lines in readme file

65

decreased by-20.73%

No dependency changes