@ribajs/core - npm Package Compare versions

Comparing version 1.9.0-alpha.1 to 1.9.0-alpha.2

package.json

 {
   "name": "@ribajs/core",
   "description": "Core module of Riba.js",
-  "version": "1.9.0-alpha.1",
+  "version": "1.9.0-alpha.2",
   "author": "Pascal Garber <[e-mail]>",
@@ -41,4 +41,4 @@ "contributors": [
   "devDependencies": {
-    "@babel/cli": "^7.10.4",
-    "@babel/core": "^7.10.4",
+    "@babel/cli": "^7.10.5",
+    "@babel/core": "^7.10.5",
     "@babel/plugin-proposal-class-properties": "^7.10.4",
@@ -48,13 +48,13 @@ "@babel/plugin-proposal-object-rest-spread": "^7.10.4",
     "@babel/plugin-syntax-export-default-from": "^7.10.4",
-    "@babel/plugin-transform-runtime": "^7.10.4",
+    "@babel/plugin-transform-runtime": "^7.10.5",
     "@babel/preset-env": "^7.10.4",
     "@babel/preset-typescript": "^7.10.4",
-    "@babel/runtime": "^7.10.4",
-    "@babel/runtime-corejs3": "^7.10.4",
-    "@ribajs/eslint-config": "1.9.0-alpha.1",
-    "@ribajs/tsconfig": "1.9.0-alpha.1",
+    "@babel/runtime": "^7.10.5",
+    "@babel/runtime-corejs3": "^7.10.5",
+    "@ribajs/eslint-config": "1.9.0-alpha.2",
+    "@ribajs/tsconfig": "1.9.0-alpha.2",
     "@ribajs/types": "1.8.3",
     "@types/core-js": "^2.5.3",
     "@types/jest": "^26.0.4",
-    "@types/node": "^14.0.20",
+    "@types/node": "^14.0.23",
     "babel-jest": "^26.1.0",
@@ -72,4 +72,4 @@ "babel-loader": "^8.1.0",
     "source-map-support": "^0.5.19",
-    "ts-jest": "^26.1.1",
-    "typescript": "^3.9.6",
+    "ts-jest": "^26.1.3",
+    "typescript": "^3.9.7",
     "uglifyjs-webpack-plugin": "^2.2.0",
@@ -88,4 +88,4 @@ "webpack": "^5.0.0-beta.22",
   "dependencies": {
-    "@ribajs/utils": "1.9.0-alpha.1"
+    "@ribajs/utils": "1.9.0-alpha.2"
   }
 }

src/binders/co-attribute.binder.ts

@@ -10,21 +10,18 @@ import { Binder } from "../interfaces";
   routine(el: HTMLElement, value: any) {
+    console.debug("componentAttributeBinder routine this", this);
+    console.debug("componentAttributeBinder routine value", value);
     this.binder.triggerAttributeValue.call(this, el, value);
   },
   bind(el) {
-    const attrName = (this.args[0] as string).trim();
+    // const attrName = (this.args[0] as string).trim();
+    const attrName = this.keypath;
     const eventName = "ask-for-attribute:" + attrName;
-    el.addEventListener(
-      eventName as any,
-      this.binder.onAskForAttributeValue.bind(this, el),
-      false
-    );
+    console.debug("bind eventName", eventName);
+    el.addEventListener(eventName as any, this.binder.onAskForAttributeValue.bind(this, el), false);
   },
 
   unbind(el) {
-    const attrName = (this.args[0] as string).trim();
-    el.removeEventListener(
-      ("ask-for-attribute:" + attrName) as any,
-      this.binder.onAskForAttributeValue.bind(this),
-      false
-    );
+    // const attrName = (this.args[0] as string).trim();
+    const attrName = this.keypath;
+    el.removeEventListener(("ask-for-attribute:" + attrName) as any, this.binder.onAskForAttributeValue.bind(this), false);
   },
@@ -34,8 +31,5 @@
     if (this.getValue) {
-      const attrName = (this.args[0] as string).trim();
-      this.binder.triggerAttributeValue.call(
-        this,
-        el,
-        this.view.models[attrName]
-      );
+      // const attrName = (this.args[0] as string).trim();
+      const attrName = this.keypath;
+      this.binder.triggerAttributeValue.call(this, el, this.view.models[attrName]);
     } else {
@@ -49,2 +43,4 @@ console.warn("[componentAttributeBinder] this.getValue is not defined");
     const eventName = "attribute:" + attrName;
+    console.debug("triggerAttributeValue newValue", value);
+    console.debug("triggerAttributeValue eventName", eventName);
     el.dispatchEvent(
@@ -51,0 +47,0 @@ new CustomEvent(eventName, {

src/component/component.ts

@@ -558,2 +558,3 @@ /* eslint-disable @typescript-eslint/no-unused-vars */
   private askForRibaAttribute(attrName: string) {
+    //TODO Fix if co-* has different keypath as attribute name
     const eventName = "ask-for-attribute:" + attrName;
@@ -577,3 +578,3 @@ // this.debug("Trigger " + eventName);
     const data = (event as CustomEvent).detail;
-    // this.debug("onRibaAttributeChanged", data);
+    this.debug("onRibaAttributeChanged", data);
     const oldValue = this.scope[data.name];
@@ -601,3 +602,3 @@ this.attributeChangedCallback(
     const eventName = "attribute:" + attrName;
-    // this.debug("Listen for " + eventName);
+    this.debug("Listen for " + eventName);
     this.el.addEventListener(
@@ -604,0 +605,0 @@ eventName as any,

src/components/video/video.component.ts

@@ -22,4 +22,6 @@ import { Component } from "../../component/component";
   // custom
-  /** If the user will pass the mp4 source for some reason */
-  mp4Src?: string;
+  /** If the user will pass the video source for some reason */
+  videoSrc?: string;
+  autoplayOnMinBuffer: number;
+  autoplayMediaQuery: string;
 }
@@ -31,5 +33,6 @@
   protected autobind = true;
+  private alreadyStartedPlaying = false;
 
   static get observedAttributes() {
-    return ["mp4-src"];
+    return ["video-src", "autoplay-on-min-buffer", "autoplay-media-query"];
   }
@@ -122,2 +125,6 @@
     currentTime: this.currentTime,
+
+    videoSrc: undefined,
+    autoplayOnMinBuffer: undefined,
+    autoplayMediaQuery: undefined,
     /**
@@ -133,3 +140,2 @@ * @readonly
     togglePlay: this.togglePlay,
-    mp4Src: "",
   };
@@ -180,5 +186,110 @@
     this.scope.paused = this.video.paused;
+
     this.init(VideoComponent.observedAttributes);
   }
 
+  protected afterBind() {
+    super.afterBind();
+
+    //video-src attribute
+    if (this.scope.videoSrc) {
+      let sourceElement = this.video.querySelector("source")[0];
+      if (!sourceElement) {
+        sourceElement = document.createElement("source");
+        this.video.appendChild(sourceElement);
+      }
+      sourceElement.setAttribute("src", this.scope.videoSrc);
+    }
+
+    if (this.scope.autoplayMediaQuery) {
+      //autoplay-media-query attribute
+      const mediaQueryList = window.matchMedia(this.scope.autoplayMediaQuery);
+      mediaQueryList.addEventListener(
+        "change",
+        this.onMediaQueryListEvent.bind(this)
+      );
+      if (mediaQueryList.matches) {
+        this.autoplay();
+      }
+    } else if (this.scope.autoplayOnMinBuffer) {
+      //autoplay-on-min-buffer attribute
+      this.autoplay();
+    }
+  }
+  /**
+   * Loads the media and checks if the autoplay-on-min-buffer is set
+   */
+  public autoplay() {
+    if (this.scope.autoplayOnMinBuffer) {
+      this.video.addEventListener("progress", this.onVideoProgress.bind(this));
+      this.video.addEventListener(
+        "canplaythrough",
+        this.forceAutoplay.bind(this) //trust browser more than ourselves
+      );
+      this.forceLoad();
+    } else {
+      this.forceAutoplay();
+    }
+  }
+
+  public forceLoad() {
+    this.video.setAttribute("preload", "auto");
+    this.video.load();
+  }
+
+  /**
+   * Forces autoplay without checking for the autoplay-on-min-buffer event
+   */
+  public forceAutoplay() {
+    if (!this.alreadyStartedPlaying) {
+      this.alreadyStartedPlaying = true;
+      this.video.muted = true; //video is required to be muted if autoplay video is supposed to autoplay
+      this.forceLoad();
+      this.video.play();
+    }
+  }
+
+  /*********************
+   * Event listener start
+   *********************/
+  private onMediaQueryListEvent(event: MediaQueryListEvent) {
+    if (event.matches) {
+      //if mediaquery matches, play video or start autoplay
+      if (this.alreadyStartedPlaying) {
+        if (!this.wasPaused) {
+          this.play();
+        }
+      } else {
+        this.autoplay();
+      }
+    } else {
+      //if mediaquery stops matching, pause video if not already paused
+      this.wasPaused = this.video.paused;
+      this.pause();
+    }
+  }
+
+  private onVideoProgress() {
+    if (this.alreadyStartedPlaying) return;
+    if (isNaN(this.video.duration)) {
+      console.warn("Video duration is NaN");
+      return;
+    }
+
+    //calculate already buffered amount
+    let bufferedAmount = 0;
+    for (let i = 0; i < this.video.buffered.length; i++) {
+      bufferedAmount +=
+        this.video.buffered.end(i) - this.video.buffered.start(i);
+    }
+
+    //if buffered amount is over given percentage in scope, force autoplay
+    if (bufferedAmount / this.video.duration > this.scope.autoplayOnMinBuffer) {
+      this.forceAutoplay();
+    }
+  }
+  /*********************
+   * Event listener end
+   *********************/
+
   protected async init(observedAttributes: string[]) {
@@ -185,0 +296,0 @@ return super.init(observedAttributes).then((view) => {

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

261347

increased by1.39%

Lines of code

8153

increased by1.2%

Number of medium supply chain risk alerts

0

decreased by-100%

Dependency changes

• + Added@ribajs/utils@1.9.0-alpha.2(transitive)

• - Removed@ribajs/utils@1.9.0-alpha.1(transitive)

• Updated@ribajs/utils@1.9.0-alpha.2