Video player ui disappears in 360 video (#346)

box · Aug 29, 2017 · 53fa9f5 · 53fa9f5
1 parent 1bfa954
commit 53fa9f5
Show file tree

Hide file tree

Showing 3 changed files with 82 additions and 1 deletion.
diff --git a/src/lib/viewers/box3d/video360/Video360Viewer.js b/src/lib/viewers/box3d/video360/Video360Viewer.js
@@ -56,6 +56,7 @@ class Video360Viewer extends DashViewer {
     /** @inheritdoc */
     destroy() {
         super.destroy();
+
         if (this.skybox) {
             this.skybox.setAttribute('skyboxTexture', null);
             this.skybox = null;
@@ -126,6 +127,21 @@ class Video360Viewer extends DashViewer {
     createControls() {
         this.controls = new Video360Controls(this.mediaContainerEl);
         this.controls.on(EVENT_TOGGLE_VR, this.handleToggleVr);
+
+        // Add listeners to hide and show controls
+        if (!this.renderer || !this.renderer.getBox3D()) {
+            return;
+        }
+
+        const canvas = this.renderer.getBox3D().canvas;
+        if (!canvas) {
+            return;
+        }
+
+        canvas.addEventListener('mousemove', this.mousemoveHandler);
+        if (this.hasTouch) {
+            canvas.addEventListener('touchstart', this.pointerHandler);
+        }
     }
 
     /**
@@ -137,6 +153,19 @@ class Video360Viewer extends DashViewer {
     destroyControls() {
         this.controls.removeListener(EVENT_TOGGLE_VR, this.handleToggleVr);
         this.controls.destroy();
+
+        // Remove listeners to hide and show controls
+        if (!this.renderer || !this.renderer.getBox3D()) {
+            return;
+        }
+
+        const canvas = this.renderer.getBox3D().canvas;
+        if (!canvas) {
+            return;
+        }
+
+        canvas.removeEventListener('mousemove', this.mousemoveHandler);
+        canvas.removeEventListener('touchstart', this.pointerHandler);
     }
 
     /**

diff --git a/src/lib/viewers/box3d/video360/__tests__/Video360Viewer-test.js b/src/lib/viewers/box3d/video360/__tests__/Video360Viewer-test.js
@@ -267,6 +267,15 @@ describe('lib/viewers/box3d/video360/Video360Viewer', () => {
             onStub = sandbox.stub(Video360Controls.prototype, 'on');
             sandbox.stub(Video360Controls.prototype, 'addUi');
             sandbox.stub(Video360Controls.prototype, 'attachEventHandlers');
+            viewer.renderer = {
+                addListener: sandbox.stub(),
+                removeListener: sandbox.stub(),
+                destroy: sandbox.stub(),
+                getBox3D: sandbox.stub().returns({
+                    canvas: document.createElement('canvas'),
+                    off: sandbox.stub()
+                })
+            };
         });
 
         afterEach(() => {
@@ -282,17 +291,45 @@ describe('lib/viewers/box3d/video360/Video360Viewer', () => {
             viewer.createControls();
             expect(onStub).to.be.calledWith(EVENT_TOGGLE_VR, viewer.handleToggleVr);
         });
+
+        it('should bind mousemove listener to display video player UI', () => {
+            const addStub = sandbox.stub(viewer.renderer.getBox3D().canvas, 'addEventListener');
+            viewer.createControls();
+
+            expect(addStub).to.be.calledWith('mousemove');
+        });
+
+        it('should bind touchstart listener to display video player UI, if touch enabled', () => {
+            const addStub = sandbox.stub(viewer.renderer.getBox3D().canvas, 'addEventListener');
+            viewer.hasTouch = true;
+            viewer.createControls();
+
+            expect(addStub).to.be.calledWith('touchstart');
+        });
     });
 
     describe('destroyControls()', () => {
         let controls;
+        let canvas;
         beforeEach(() => {
             controls = {
                 removeListener: sandbox.stub(),
                 destroy: sandbox.stub()
             };
             viewer.controls = controls;
             viewer.destroyControls();
+            canvas = {
+                removeEventListener: sandbox.stub()
+            };
+            viewer.renderer = {
+                addListener: sandbox.stub(),
+                removeListener: sandbox.stub(),
+                destroy: sandbox.stub(),
+                getBox3D: sandbox.stub().returns({
+                    canvas,
+                    off: sandbox.stub()
+                })
+            };
         });
 
         afterEach(() => {
@@ -306,6 +343,21 @@ describe('lib/viewers/box3d/video360/Video360Viewer', () => {
         it('should invoke .controls.destroy()', () => {
             expect(controls.destroy).to.be.called;
         });
+
+
+        it('should bind mousemove listener to display video player UI', () => {
+            viewer.destroyControls();
+
+            expect(canvas.removeEventListener).to.be.calledWith('mousemove');
+        });
+
+        it('should bind touchstart listener to display video player UI, if touch enabled', () => {
+            viewer.hasTouch = true;
+            viewer.destroyControls();
+
+            expect(canvas.removeEventListener).to.be.calledWith('touchstart');
+        });
+
     });
 
     describe('resize()', () => {

diff --git a/src/lib/viewers/media/VideoBaseViewer.js b/src/lib/viewers/media/VideoBaseViewer.js
@@ -142,7 +142,7 @@ class VideoBaseViewer extends MediaBaseViewer {
 
     /**
      * Adds event listeners to the media element.
-     * Makes changes to the meida controls.
+     * Makes changes to the media controls.
      *
      * @override
      * @return {void}