add mobile pinch support

index.html

@@ -71,7 +71,8 @@
         });
 
         player.on("VRModeOn", function(){
-            player.controlBar.fullscreenToggle.trigger("tap");
+            if(!player.isFullscreen())
+                player.controlBar.fullscreenToggle.trigger("tap");
         });
     }(window, window.videojs));
 </script>

index_3d.html

@@ -76,7 +76,8 @@
         });
 
         player.on("VRModeOn", function(){
-            player.controlBar.fullscreenToggle.trigger("tap");
+            if(!player.isFullscreen())
+                player.controlBar.fullscreenToggle.trigger("tap");
         });
     }(window, window.videojs));
 </script>

index_v4.html

@@ -70,7 +70,8 @@
         });
 
         player.on("VRModeOn", function(){
-            player.controlBar.fullscreenToggle.trigger("tap");
+            if(!player.isFullscreen())
+                player.controlBar.fullscreenToggle.trigger("tap");
         });
     }(window, window.videojs));
 </script>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "videojs-panorama",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "a plugin for videojs run a full 360 degree panorama video. ",
   "keywords": [
     "videojs",

src/scripts/lib/BaseCanvas.js

@@ -10,6 +10,7 @@
 
 import Detector from '../lib/Detector';
 import MobileBuffering from '../lib/MobileBuffering';
+import Util from '../lib/Util';
 
 const HAVE_CURRENT_DATA = 2;
 
@@ -71,11 +72,11 @@ var BaseCanvas = function (baseComponent, THREE, settings = {}) {
 
         attachControlEvents: function(){
             this.on('mousemove', this.handleMouseMove.bind(this));
-            this.on('touchmove', this.handleMouseMove.bind(this));
+            this.on('touchmove', this.handleTouchMove.bind(this));
             this.on('mousedown', this.handleMouseDown.bind(this));
-            this.on('touchstart',this.handleMouseDown.bind(this));
+            this.on('touchstart',this.handleTouchStart.bind(this));
             this.on('mouseup', this.handleMouseUp.bind(this));
-            this.on('touchend', this.handleMouseUp.bind(this));
+            this.on('touchend', this.handleTouchEnd.bind(this));
             if(this.settings.scrollable){
                 this.on('mousewheel', this.handleMouseWheel.bind(this));
                 this.on('MozMousePixelScroll', this.handleMouseWheel.bind(this));
@@ -114,6 +115,19 @@ var BaseCanvas = function (baseComponent, THREE, settings = {}) {
             this.onPointerDownLat = this.lat;
         },
 
+        handleTouchStart: function(event){
+            if(event.touches.length > 1){
+                this.isUserPinch = true;
+                this.multiTouchDistance = Util.getTouchesDistance(event.touches);
+            }
+            this.handleMouseDown(event);
+        },
+
+        handleTouchEnd: function(event){
+            this.isUserPinch = false;
+            this.handleMouseUp(event);
+        },
+
         handleMouseMove: function(event){
             var clientX = event.clientX || event.touches && event.touches[0].clientX;
             var clientY = event.clientY || event.touches && event.touches[0].clientY;
@@ -131,6 +145,13 @@ var BaseCanvas = function (baseComponent, THREE, settings = {}) {
             }
         },
 
+        handleTouchMove: function(event){
+            //handle single touch event,
+            if(!this.isUserPinch || event.touches.length <= 1){
+                this.handleMouseMove(event);
+            }
+        },
+
         handleMobileOrientation: function (event) {
             if(typeof event.rotationRate === "undefined") return;
             var x = event.rotationRate.alpha;

src/scripts/lib/Canvas.js

@@ -129,6 +129,16 @@ var Canvas = function (baseComponent, THREE, settings = {}) {
             }
         },
 
+        handleTouchMove: function (event) {
+            parent.handleTouchMove.call(this, event);
+            if(this.isUserPinch){
+                let currentDistance = Util.getTouchesDistance(event.touches);
+                event.wheelDeltaY =  (currentDistance - this.multiTouchDistance) * 2;
+                this.handleMouseWheel.call(this, event);
+                this.multiTouchDistance = currentDistance;
+            }
+        },
+
         render: function(){
             parent.render.call(this);
             this.camera.target.x = 500 * Math.sin( this.phi ) * Math.cos( this.theta );

src/scripts/lib/Util.js

@@ -121,12 +121,19 @@ function deepCopy(obj) {
     return to;
 }
 
+function getTouchesDistance(touches){
+    return Math.sqrt(
+        (touches[0].clientX-touches[1].clientX) * (touches[0].clientX-touches[1].clientX) +
+        (touches[0].clientY-touches[1].clientY) * (touches[0].clientY-touches[1].clientY));
+}
+
 export default {
     whichTransitionEvent: whichTransitionEvent,
     mobileAndTabletcheck: mobileAndTabletcheck,
     isIos: isIos,
     isRealIphone: isRealIphone,
     fovToProjection: fovToProjection,
     extend: extend,
-    deepCopy: deepCopy
+    deepCopy: deepCopy,
+    getTouchesDistance: getTouchesDistance
 };