kaleidoscopejs - npm Package Compare versions

Comparing version 1.0.1 to 1.0.2

package.json

 {
   "name": "kaleidoscopejs",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "360º video/image viewer",
@@ -62,2 +62,3 @@ "main": "dist/kaleidoscope.min.js",
     "karma-rollup-plugin": "^0.2.0",
+    "karma-sinon": "^1.0.5",
     "mocha": "^2.5.3",
@@ -64,0 +65,0 @@ "rollup": "^0.33.0",

README.md

@@ -68,2 +68,6 @@ <img src="kaleidoscope.gif" height="150" width="100%"/>
 
+`options.onDragStart` callback called when user interaction starts.
+
+`options.onDragStop` callback called when user interaction ends.
+
 `viewer.render()` renders the canvas in the defined `containerId` or `container`.
@@ -103,2 +107,8 @@
 
+`options.verticalPanning` disables vertical panning. Defaults to `false`.
+
+`options.onDragStart` callback called when user interaction starts.
+
+`options.onDragStop` callback called when user interaction ends.
+
 `options.onError` callback to when something goes wrong.
@@ -105,0 +115,0 @@

src/audio.js

@@ -31,3 +31,3 @@ import ThreeSixtyViewer from './three-sixty-viewer';
     video.setAttribute('crossorigin', 'anonymous');
-    video.addEventListener('error', (err) => this.onError(err));
+    video.addEventListener('error', this.onError);
     video.load();
@@ -58,11 +58,11 @@ return video;
     let loop = () => {
-      this.controls.update();
-      this.renderer.render(this.scene, this.camera);
+      let cameraUpdated = this.controls.update();
+      this.renderer.render(this.scene, this.camera, this.needsUpdate || cameraUpdated);
       if (this.element.readyState === 4) {
         this.element.currentTime = this.driver.currentTime;
       }
-      return requestAnimationFrame(loop);
+      this.animationFrameId = requestAnimationFrame(loop);
     };
-    this.animationFrameId = loop();
+    loop();
   }
 }

src/canvas.js

@@ -36,9 +36,9 @@ import ThreeSixtyViewer from './three-sixty-viewer';
       this.context.drawImage(this.video, 0, 0, this.width, this.height);
-      this.controls.update();
-      this.renderer.render(this.scene, this.camera);
+      let cameraUpdated = this.controls.update();
+      this.renderer.render(this.scene, this.camera, this.needsUpdate || cameraUpdated);
       this.renderer.mesh.material.map.needsUpdate = true
-      return requestAnimationFrame(loop);
+      this.animationFrameId = requestAnimationFrame(loop);
     };
-    this.animationFrameId = loop();
+    loop();
   }
 }

src/controls.js

@@ -156,2 +156,3 @@ import THREE from 'threejs360';
     this.momentum = false;
+    this.onDragStart && this.onDragStart();
   }
@@ -169,2 +170,3 @@
   onMouseUp() {
+    this.isUserInteracting && this.onDragStop && this.onDragStop();
     this.addDraggableStyle();
@@ -176,7 +178,12 @@ this.isUserInteracting = false;
   update() {
-    this.inertia();
+    if ((this.phi === this.previousPhi) && (this.theta === this.previousTheta))
+      return false;
+    this.previousPhi = this.phi;
+    this.previousTheta = this.theta;
     this.euler.set(this.phi, this.theta, 0, 'YXZ');
     this.orientation.setFromEuler(this.euler);
     this.camera.quaternion.copy(this.orientation);
+    this.inertia();
+    return true;
   }
 }

src/renderer.js

@@ -25,12 +25,19 @@ import THREE from 'threejs360';
   createMesh() {
-    let material = new THREE.MeshBasicMaterial({map: this.texture});
-    let geometry = new THREE.SphereGeometry(1, 50, 50);
-    geometry.scale(-1, 1, 1);
-    let mesh = new THREE.Mesh(geometry, material);
+    this.material = new THREE.MeshBasicMaterial({map: this.texture});
+    this.geometry = new THREE.SphereGeometry(1, 50, 50);
+    this.geometry.scale(-1, 1, 1);
+    let mesh = new THREE.Mesh(this.geometry, this.material);
     return mesh;
   }
 
-  render(scene, camera) {
+  destroy() {
+    this.geometry.dispose();
+    this.material.dispose();
+    this.renderer.dispose();
+  }
+
+  render(scene, camera, needsUpdate) {
+    if (!needsUpdate) return;
     this.renderer.render(scene, camera);
   }
 }

src/three-sixty-viewer.js

@@ -10,9 +10,32 @@ import Renderer from './renderer'
     Object.assign(this, {height: 360, width: 640, initialYaw: 90, verticalPanning: true}, options);
-    let {height, width, container, containerId, initialYaw, verticalPanning} = this;
+    let {
+        height,
+        width,
+        container,
+        containerId,
+        initialYaw,
+        verticalPanning,
+        onDragStart,
+        onDragStop,
+    } = this;
     this.renderer = new Renderer({height, width});
     this.camera = new THREE.PerspectiveCamera(80, window.innerWidth / window.innerHeight, 0.1, 100);
-    this.controls = new Controls({camera: this.camera, renderer: this.renderer, initialYaw, verticalPanning});
+    this.controls = new Controls({
+        camera: this.camera,
+        renderer: this.renderer,
+        initialYaw,
+        verticalPanning,
+        onDragStart,
+        onDragStop,
+    });
+    this.update = this.update.bind(this);
+    this.stop = this.stop.bind(this);
+    this.onError = this.onError.bind(this);
+    this.needsUpdate = false;
     this.scene = this.createScene();
     this.scene.add(this.camera);
     this.element = this.getElement();
+    this.element.addEventListener('timeupdate', this.update);
+    this.element.addEventListener('pause', this.stop);
+    this.element.addEventListener('ended', this.stop);
     this.texture = this.createTexture();
@@ -36,8 +59,17 @@ this.renderer.setTexture(this.texture);
 
+  update() {
+    this.needsUpdate = true;
+  }
+
+  stop() {
+    this.needsUpdate = false;
+  }
+
   destroy() {
     this.element.style.display = '';
     cancelAnimationFrame(this.animationFrameId);
+    this.element.pause && this.element.pause();
     this.target.removeChild(this.renderer.el);
     this.controls.destroy();
-    this.element.pause && this.element.pause();
+    this.renderer.destroy();
   }
@@ -53,9 +85,10 @@
     let video = document.createElement('video');
-    video.src = this.source;
     video.loop = this.loop || false;
     video.muted = this.muted || false;
     video.setAttribute('crossorigin', 'anonymous');
-    video.setAttribute('webkit-playsinline', '');
+    video.setAttribute('webkit-playsinline', 'true');
+    video.setAttribute('playsinline', 'true');
+    video.setAttribute('src', this.source);
     video.autoplay = this.autoplay !== undefined ? this.autoplay : true;
-    video.addEventListener('error', (err) => this.onError(err));
+    video.addEventListener('error', this.onError);
     return video;
@@ -91,10 +124,10 @@ }
     let loop = () => {
-      this.controls.update();
-      this.renderer.render(this.scene, this.camera);
-      return requestAnimationFrame(loop);
+      let cameraUpdated = this.controls.update();
+      this.renderer.render(this.scene, this.camera, this.needsUpdate || cameraUpdated);
+      this.animationFrameId = requestAnimationFrame(loop);
     };
 
-    this.animationFrameId = loop();
+    loop();
   }
 }
 

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

1016551

increased by3.04%

Number of package files

22

increased by15.79%

Lines of code

6514

increased by14.34%

Number of lines in readme file

133

increased by8.13%

Worsened metrics

Dev dependency count

26

increased by4%

No dependency changes