make destroy stop animation loop and remove event listeners

src/controls.js

@@ -16,19 +16,35 @@ export default class MouseControls {
     this.euler = new THREE.Euler();
     this.isUserInteracting = false;
     this.addDraggableStyle();
+    this.onMouseMove = this.onMouseMove.bind(this);
+    this.onMouseDown = this.onMouseDown.bind(this);
+    this.onMouseUp = this.onMouseUp.bind(this);
+    this.onTouchStart = e => this.onMouseDown({clientX: e.touches[0].pageX, clientY: e.touches[0].pageY});
+    this.onTouchMove = e => this.onMouseMove({clientX: e.touches[0].pageX, clientY: e.touches[0].pageY});
+    this.onTouchEnd = e => this.onMouseUp({clientX: e.touches[0].pageX, clientY: e.touches[0].pageY});
+    this.onDeviceMotion = this.onDeviceMotion.bind(this);
     this.bindEvents();
   }
 
   bindEvents() {
-    this.el.addEventListener('mousemove', (e) => this.onMouseMove(e));
-    this.el.addEventListener('mousedown', (e) => this.onMouseDown(e));
-    this.el.addEventListener('mouseup', (e) => this.onMouseUp(e));
-    this.el.addEventListener('touchstart', (e) => this.onMouseDown({clientX: e.touches[0].pageX, clientY: e.touches[0].pageY}));
-    this.el.addEventListener('touchmove', (e) => this.onMouseMove({clientX: e.touches[0].pageX, clientY: e.touches[0].pageY}));
-    this.el.addEventListener('touchend', (e) => this.onMouseUp());
-    window.addEventListener('devicemotion', (e) => this.onDeviceMotion(e));
+    this.el.addEventListener('mousemove', this.onMouseMove);
+    this.el.addEventListener('mousedown', this.onMouseDown);
+    this.el.addEventListener('mouseup', this.onMouseUp);
+    this.el.addEventListener('touchstart', this.onTouchStart);
+    this.el.addEventListener('touchmove', this.onTouchMove);
+    this.el.addEventListener('touchend', this.onTouchEnd);
+    window.addEventListener('devicemotion', this.onDeviceMotion);
   }
 
+  destroy() {
+    this.el.removeEventListener('mousemove', this.onMouseMove);
+    this.el.removeEventListener('mousedown', this.onMouseDown);
+    this.el.removeEventListener('mouseup', this.onMouseUp);
+    this.el.removeEventListener('touchstart', this.onTouchStart);
+    this.el.removeEventListener('touchmove', this.onTouchMove);
+    this.el.removeEventListener('touchend', this.onTouchEnd);
+    window.removeEventListener('devicemotion', this.onDeviceMotion);
+  }
 
   getCurrentSizeStyle() {
     return `height: ${this.el.style.height}; width: ${this.el.style.width};`;

src/renderer.js

@@ -8,9 +8,6 @@ export default class Renderer {
     this.renderer.setSize(this.width, this.height);
     this.renderer.setPixelRatio(Math.floor(window.devicePixelRatio));
     this.el = this.renderer.domElement;
-
-    this.target = this.container ? this.container : document.querySelector(this.containerId);
-    this.target.appendChild(this.el);
   }
 
   setTexture(texture) {

src/three-sixty-viewer.js

@@ -8,7 +8,7 @@ export default class ThreeSixtyViewer {
   constructor(options={}) {
     Object.assign(this, {height: 360, width: 640}, options);
     let {height, width, container, containerId} = this;
-    this.renderer = new Renderer({height, width, container, containerId});
+    this.renderer = new Renderer({height, width});
     this.camera = new THREE.PerspectiveCamera(80, window.innerWidth / window.innerHeight, 0.1, 100);
     this.controls = new Controls(this.camera, this.renderer);
     this.scene = this.createScene();
@@ -17,6 +17,7 @@ export default class ThreeSixtyViewer {
     this.texture = this.createTexture();
     this.renderer.setTexture(this.texture);
     this.scene.getObjectByName('photo').children = [this.renderer.mesh];
+    this.target = this.container ? this.container : document.querySelector(this.containerId);
   }
 
   play() {
@@ -28,8 +29,11 @@ export default class ThreeSixtyViewer {
   }
 
   destroy() {
-    //TODO: unbind events
-    this.video.style.display = '';
+    this.element.style.display = '';
+    cancelAnimationFrame(this.animationFrameId);
+    this.target.removeChild(this.renderer.el);
+    this.controls.destroy();
+    this.element.pause && this.element.pause();
   }
 
   setSize(size) {
@@ -46,7 +50,7 @@ export default class ThreeSixtyViewer {
       video.muted = this.muted || false;
       video.setAttribute('crossorigin', 'anonymous');
       video.setAttribute('webkit-playsinline', '');
-      video.autoplay = this.autoplay || true;
+      video.autoplay = this.autoplay !== undefined ? this.autoplay : true;
       video.addEventListener('error', (err) => this.onError(err));
       return video;
     }
@@ -75,12 +79,16 @@ export default class ThreeSixtyViewer {
   }
 
   render() {
+    this.target.appendChild(this.renderer.el);
+    this.element.style.display = 'none';
+
     let loop = () => {
       this.controls.update();
       this.renderer.render(this.scene, this.camera);
-      requestAnimationFrame(loop);
+      return requestAnimationFrame(loop);
     };
-    loop();
+
+    this.animationFrameId = loop();
   }
 }