add viewable zoom support.

.npmignore

@@ -1,3 +1,6 @@
 # Intentionally left blank, so that npm does not ignore anything by default,
 # but relies on the package.json "files" array to explicitly define what ends
 # up in the package.
+assets
+scripts
+test

README.md

@@ -16,7 +16,7 @@ npm install --save videojs-panorama
 
 or
 
-#### [DOWNLOAD HERE](https://github.com/yanwsh/videojs-panorama/releases/download/0.0.3/videojs-panorama-0.0.3.zip)
+#### [DOWNLOAD HERE](https://github.com/yanwsh/videojs-panorama/releases/download/0.0.5/videojs-panorama-0.0.5.zip)
 
 ## Integration with video.js 4 and 5
 
@@ -76,6 +76,43 @@ callback function fired when panorama video is ready.
 ### showNotice
 A notice label show on the beginning of the video to notice user to drag the player to see whole video. If showNotice set to false, notice label will not be shown. `Defaults to true`
 
+### NoticeMessage
+Customize your own notice message. 
+
+### autoHideNotice
+How long the notice message should be shown. `Defaults to 3000`, indicate it will hide after 3000ms.
+
+### initLat
+initial lat for camera angle, `Defaults value is 0`, range between -90 to 90.
+
+### initLon
+initial lot for camera angle, `Defaults value is -180`, don't have range. 
+
+### backToVerticalCenter
+automatically back to vertical center when user inactive the video frame. `Defaults value depends on running platform, true on desktop, false on mobile`.
+
+### returnStepLat
+If backToVerticalCenter is set to true, you can customize the return back speed. `Defaults value is 0.5`. The larger the faster.
+
+### backToHorizonCenter
+automatically back to horizontal center when user inactive the video frame. Default value the same as `backToVerticalCenter`.
+
+### returnStepLon
+If backToHorizonCenter is set to true, you can customize the return back speed. `Defaults value is 2`.
+
+### clickToToggle
+click to toggle the video. If video is playing, it will be paused. If video is paused, it will be played. `Defaults to true`.
+
+It's possible to customize the viewable zoom
+### minLat
+minimum Lat value for camera angle. `Defaults value is -90`.
+
+### maxLat
+max Lat value for camera angle. `Defaults value is 90`.
+
+## browser support
+IE 11, Edge 12, 13, chrome, firefox, safari, iphone ios 9, ipad ios 9, android 4.4 and above.
+
 ## License
 
 Apache-2.0. Copyright (c) yanwsh@gmail.com

index.html

@@ -42,6 +42,11 @@
 <script src="bower_components/three.js/three.js"></script>
 <script src="/dist/videojs-panorama.v5.js"></script>
 <script>
+    function isMobile() {
+        var check = false;
+        (function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))check = true})(navigator.userAgent||navigator.vendor||window.opera);
+        return check;
+    }
     (function(window, videojs) {
         var player = window.player = videojs('videojs-panorama-player', {}, function () {
         });
@@ -50,6 +55,8 @@
         var height = videoElement.offsetHeight;
         player.width(width), player.height(height);
         player.panorama({
+            clickToToggle: true,
+            NoticeMessage: (isMobile())? "please drag and drop the video" : "please use your mouse drag and drop the video",
             callback: function () {
                 player.play();
             }

src/scripts/lib/Canvas.js

@@ -11,6 +11,7 @@ var Canvas = function (baseComponent, settings = {}) {
 
             this.width = player.el().offsetWidth, this.height = player.el().offsetHeight;
             this.lon = options.initLon, this.lat = options.initLat, this.phi = 0, this.theta = 0;
+            this.clickToToggle = options.clickToToggle;
             this.mouseDown = false;
             this.isUserInteracting = false;
             this.player = player;
@@ -81,12 +82,13 @@ var Canvas = function (baseComponent, settings = {}) {
 
         handleMouseUp: function(event){
             this.mouseDown = false;
-            var clientX = event.clientX || event.changedTouches[0].clientX;
-            var clientY = event.clientY || event.changedTouches[0].clientY;
-            var diffX = Math.abs(clientX - this.onPointerDownPointerX);
-            var diffY = Math.abs(clientY - this.onPointerDownPointerY);
-            if(diffX < 0.1 && diffY < 0.1){
-                this.player.paused() ? this.player.play() : this.player.pause();
+            if(this.clickToToggle){
+                var clientX = event.clientX || event.changedTouches[0].clientX;
+                var clientY = event.clientY || event.changedTouches[0].clientY;
+                var diffX = Math.abs(clientX - this.onPointerDownPointerX);
+                var diffY = Math.abs(clientY - this.onPointerDownPointerY);
+                if(diffX < 0.1 && diffY < 0.1)
+                    this.player.paused() ? this.player.play() : this.player.pause();
             }
         },
 
@@ -115,6 +117,8 @@ var Canvas = function (baseComponent, settings = {}) {
                 this.lon = (x / this.width) * 430 - 225;
                 this.lat = (y / this.height) * -180 + 90;
             }
+            this.lat = Math.min(this.options_.maxLat, this.lat);
+            this.lat = Math.max(this.options_.minLat, this.lat);
         },
 
         handleMouseWheel: function(event){

src/scripts/plugin.js

@@ -14,16 +14,23 @@ const defaults = {
     showNotice: true,
     NoticeMessage: "Please use your mouse drag and drop the video.",
     autoHideNotice: 3000,
-    //A float value back to center when mouse out the canvas. The higher, the faster.
-    returnStepLat: 0.5,
-    returnStepLon: 2,
+    //limit the video size when user scroll.
     scrollable: true,
     maxFov: 105,
     minFov: 51,
+    //initial position for the video
     initLat: 0,
     initLon: -180,
+    //A float value back to center when mouse out the canvas. The higher, the faster.
+    returnStepLat: 0.5,
+    returnStepLon: 2,
     backToVerticalCenter: !runOnMobile,
-    backToHorizonCenter: !runOnMobile
+    backToHorizonCenter: !runOnMobile,
+    clickToToggle: false,
+
+    //limit viewable zoom
+    minLat: -90,
+    maxLat: 90
 };
 
 /**
@@ -48,7 +55,6 @@ const onPlayerReady = (player, options, settings) => {
         });
         var videoElement = settings.getTech(player);
         makeVideoPlayableInline(videoElement);
-        options.NoticeMessage = "Please drag and drop the video.";
     }
     if(options.showNotice){
         player.on("play", function(){