Merge e2a3020 into 6c0ee9a

demo/common/css/demo.css

@@ -16,6 +16,7 @@ header h1 {
   margin: 30px 0;
   text-align: center;
   font-size: 60px;
+  word-break: break-word;
 }
 h1, h2, h3, h4, h5, h6 {
   font-family: 'Zilla Slab', serif;
@@ -193,4 +194,29 @@ p.info img {
   min-width: 300px;
   margin: auto; 
   z-index: 10;
-}
+}
+
+.play-container {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  margin: auto;
+  background: rgba(0, 0, 0, 0.2);
+}
+.play-container .play {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  margin: auto;
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  box-sizing: border-box;
+  background: url(../img/play.svg) no-repeat;
+  border: 0;
+  background-size: 100% 100%;
+}

demo/common/js/PanoControls.js

@@ -102,19 +102,27 @@ var PanoControls = (function() {
 	}
 
 	function _initControlHTML(target) {
-		var svg = '<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">\
+		var fullscreenSvg = '<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">\
 		<g>\
 			<path d="M30,5 L5,5 L5,30" fill="transparent" stroke="#fff" stroke-width="8" stroke-linejoin="round" stroke-linecap="round"/>\
 			<path d="M70,5 L95,5 L95,30" fill="transparent" stroke="#fff" stroke-width="8" stroke-linejoin="round" stroke-linecap="round"/>\
 			<path d="M30,95 L5,95 L5,65" fill="transparent" stroke="#fff" stroke-width="8" stroke-linejoin="round" stroke-linecap="round"/>\
 			<path d="M70,95 L95,95 L95,65" fill="transparent" stroke="#fff" stroke-width="8" stroke-linejoin="round" stroke-linecap="round"/>\
 		</g>\
 		</svg>';
+		var cancelFullscreenSvg = '<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">\
+		<g>\
+			<path d="M30,5 L30,30 L5,30" fill="transparent" stroke="#fff" stroke-width="8" stroke-linejoin="round" stroke-linecap="round"/>\
+			<path d="M70,5 L70,30 L95,30" fill="transparent" stroke="#fff" stroke-width="8" stroke-linejoin="round" stroke-linecap="round"/>\
+			<path d="M30,95 L30,65 L5,65" fill="transparent" stroke="#fff" stroke-width="8" stroke-linejoin="round" stroke-linecap="round"/>\
+			<path d="M70,95 L70,65 L95,65" fill="transparent" stroke="#fff" stroke-width="8" stroke-linejoin="round" stroke-linecap="round"/>\
+		</g>\
+		</svg>';
 		var controls = '\
 			<div class="image360_loading"><div class="image360_loadingBar"></div></div>\
 			<div class="panoviewer-control">\
-				<button class="enterfs">' + svg + '</button>\
-				<button class="exitfs">' + svg + '</button>\
+				<button class="enterfs">' + fullscreenSvg + '</button>\
+				<button class="exitfs">' + cancelFullscreenSvg + '</button>\
 				<div class="camera"></div>\
 			</div>';
 

demo/examples/panoviewer/etc/partial_panorama.html

@@ -27,16 +27,18 @@
         box-sizing: border-box;
         border: 3px solid #aaa;
         border-bottom: 0;
-        overflow: hidden;
+        /* overflow: hidden; */
     }
     .icon .d180:before {
         position: absolute;
         content: "";
-        width: 60px;
-        height: 56px;
+        width: 50px;
+        height: 50px;
         box-sizing: border-box;
-        border: 3px solid #e55;
+        border-left: 3px solid #e55;
+        border-bottom: 3px solid #e55;
         background:  #f88;
+        border-radius:  0 100% 0 / 0 100% 0 0;
         transform-origin: 0% 100%;
         left: 50%;
         bottom: 0;

demo/examples/panoviewer/etc/responsive.html

@@ -115,10 +115,10 @@
                 transform: rotate(0deg);
             }
         }
-        .viewer.container219:before {
+        .viewer.container219:after {
             padding-top: 45%;
         }
-        .viewer.cube:before {
+        .viewer.cube:after {
             padding-top: 100%;
         }
         .buttons button {

demo/examples/panoviewer/etc/videojs.html

@@ -92,6 +92,10 @@
             width: 100%;
             height: 100%;
         }
+        .viewer video {
+            /* z-index: -1; */
+        }
+
     </style>
 </head>
 
@@ -116,8 +120,9 @@ <h2>You can use video.js with view360.</h2>
     </p>
 </div>
 <div class="viewer">
-    <video id="video" class="video-js vjs-default-skin vjs-big-play-centered" crossorigin="anonymous" controls loop>
+    <video id="video" class="video-js  vjs-fluid vjs-default-skin vjs-big-play-centered vjs-controls-enabled" crossorigin="anonymous" playsinline="playsinline" controls loop>
         <source src="./img/seven.mp4" type="video/mp4" />
+        <source src="./img/seven.webm" type="video/webm">
         <p class="vjs-no-js">
             To view this video please enable JavaScript, and consider upgrading to a web browser that
             <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
@@ -132,7 +137,7 @@ <h2>You can use video.js with view360.</h2>
     var videoContainer = document.querySelector("#video");
     var view360Container = document.createElement("div");
 
-    view360Container.className = "container";
+    view360Container.className = "container2";
     videoContainer.insertBefore(view360Container, videoContainer.firstChild);
     video.style.display = "none";
 
@@ -157,16 +162,18 @@ <h2>You can use video.js with view360.</h2>
         var videoContainer = document.querySelector("#video");
         var view360Container = document.createElement('div');
 
-        view360Container.className = "container";
+        view360Container.className = "container2";
         videoContainer.insertBefore(view360Container, videoContainer.firstChild);
-        video.style.display = "none";
+        // video.style.display = "none";
+
         var panoViewer = new eg.view360.PanoViewer(view360Container,
             {
                 video: video,
                 projectionType: "equirectangular",
                 useZoom: false,
             }
         );
+        window.panoViewer
         window.addEventListener("resize", function() {
             panoViewer.updateViewportDimensions();
         });

demo/examples/panoviewer/projection-type/equirectangular_video.html

@@ -30,10 +30,13 @@ <h2>Loads video by video tag</h2>
     </div>
 
     <div class="viewer">
-        <video id="pano_video" controls loop preload="auto" crossorigin="anonymous" autoplay muted>
+        <video id="pano_video" playsinline="playsinline" controls loop preload="auto" crossorigin="anonymous">
             <source src="../../img/equi.mp4" type="video/mp4" />
         </video>
         <div class="container"></div>
+        <div class="play-container">
+            <button class="play"></button>
+        </div>
     </div>
     <div class="source">
         <pre>
@@ -56,6 +59,12 @@ <h2>Loads video by video tag</h2>
     var panoViewer = new PanoViewer(container, {
         video: videoEl
     });
+    document.querySelector(".play-container .play").addEventListener("click", function () {
+        videoEl.play();
+    });
+    videoEl.addEventListener("play", function () {
+        document.querySelector(".play-container").style.display = "none";
+    })
 </script>
 
 </body>

demo/examples/panoviewer/projection-type/equirectangular_video_url.html

@@ -36,6 +36,9 @@ <h2>Loads video by URL</h2>
 
     <div class="viewer">
         <div class="container"></div>
+        <div class="play-container">
+            <button class="play"></button>
+        </div>
     </div>
 
     <div class="source">
@@ -46,6 +49,7 @@ <h2>Loads video by URL</h2>
 
 panoviewer.on("ready", function(e) {
     var video = panoViewer.getVideo();
+
     video.muted = true;
     video.play();
 });
@@ -62,8 +66,15 @@ <h2>Loads video by URL</h2>
 
     panoViewer.on("ready", function(e) {
         var video = panoViewer.getVideo();
-        video.muted = true; // https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
-        video.play();
+        document.querySelector(".play-container .play").addEventListener("click", function () {
+            video.play();
+        });
+        video.addEventListener("play", function () {
+            document.querySelector(".play-container").style.display = "none";
+        })
+        video.muted = true;
+        // https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
+        // video.play();
     });
     PanoControls.init(container, panoViewer);
     PanoControls.showLoading();

package.json

@@ -17,7 +17,7 @@
 		"jsdoc": "rm -rf ./doc && jsdoc -c jsdoc.json",
 		"coverage": "karma start --coverage",
 		"coverage:nogl": "karma start --coverage --nogl",
-		"demo:start": "npm run demo:prebuild-latest && npm run demo:updateVersion && jekyll serve -s demo",
+		"demo:start": "npm run demo:prebuild-latest && npm run demo:updateVersion && jekyll serve --host 10.66.96.113 -s demo",
 		"demo:build": "npm run demo:updateVersion && jekyll build -s demo",
 		"demo:prebuild-version": "cpx 'dist/**/*' demo/release/$npm_package_version/dist --clean && cpx 'doc/**/*' demo/release/$npm_package_version/doc --clean",
 		"demo:prebuild-latest": "cpx 'dist/**/*' demo/release/latest/dist --clean && cpx 'doc/**/*' demo/release/latest/doc --clean",