Fixed lightbox on mobile devices and fixed the spinner.

Dumped spinner icon in favor of a pure CSS solution.
moay · Sep 3, 2015 · 1902ac3 · 1902ac3
1 parent 6c52783
commit 1902ac3
Show file tree

Hide file tree

Showing 6 changed files with 71 additions and 45 deletions.
diff --git a/dist/afterglow.min.js b/dist/afterglow.min.js
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "afterglow",
   "description": "An easy to integrate HTML5 video player with lightbox support.",
-  "version": "0.0.31",
+  "version": "0.0.32",
   "license": "MIT",
   "repository": {
     "type": "git",

diff --git a/sandbox/index.html b/sandbox/index.html
@@ -16,10 +16,10 @@
 	<script type="text/javascript" src="../src/dollardom/dollardom.min.js"></script>
 	<script type="text/javascript" src="../src/videojs/video.min.js"></script>
 	<!-- <script type="text/javascript" src="../src/videojs/plugins/vjs.vimeo.js"></script> -->
-	<!-- <script type="text/javascript" src="../src/videojs/components/TopControlBar.js"></script> -->
-	<!-- <script type="text/javascript" src="../src/videojs/components/LightboxCloseButton.js"></script> -->
-	<!-- <script type="text/javascript" src="../src/videojs/plugins/Youtube.js"></script> -->
-	<!-- <script type="text/javascript" src="../src/videojs/plugins/videojs.hotkeys.js"></script> -->
+	<script type="text/javascript" src="../src/videojs/components/TopControlBar.js"></script>
+	<script type="text/javascript" src="../src/videojs/components/LightboxCloseButton.js"></script>
+	<script type="text/javascript" src="../src/videojs/plugins/Youtube.js"></script>
+	<script type="text/javascript" src="../src/videojs/plugins/videojs.hotkeys.js"></script>
 	<script type="text/javascript" src="../src/afterglow.js"></script>
 
 	<style>
@@ -33,14 +33,38 @@
 </head>
 <body>
 	<h1>This is just a sandbox for development.</h1>
+<!-- YOUTUBE TEST -->
+	<h2>Youtube video</h2>
+	<video id="video1" class="afterglow" width="1920" height="1080" data-youtube-id="HgbHx4CY300" data-autoresize="fit" preload="none"></video>
 
 	<!-- LOCAL TEST -->
 	<h2>Local video with poster</h2>
-	<video id="video2" class="afterglow" width="640" height="360" poster="http://afterglowplayer.com/sandbox/video/Snapshots/afterglow_local.jpg" data-autoresize="fit" preload="none">
+	<video id="video2" class="afterglow" width="1920" height="1080" poster="http://afterglowplayer.com/sandbox/video/Snapshots/afterglow_local.jpg" data-autoresize="fit" preload="none">
 		<source src="http://afterglowplayer.com/sandbox/video/MP4/afterglow_local.mp4" type="video/mp4" />
 		<source src="http://afterglowplayer.com/sandbox/video/WEBM/afterglow_local.webm" type="video/webm" />
 	</video>
 
+	<!-- LOCAL TEST -->
+	<h2>Local video with poster, captions and subtitles</h2>
+	<video id="video-subtitles" class="afterglow" width="640" height="360" poster="http://afterglowplayer.com/sandbox/video/Snapshots/afterglow_local.jpg" data-autoresize="fit" preload="none">
+		<source src="http://afterglowplayer.com/sandbox/video/MP4/afterglow_local.mp4" type="video/mp4" />
+		<source src="http://afterglowplayer.com/sandbox/video/WEBM/afterglow_local.webm" type="video/webm" />
+		<track kind="subtitle" src="/sandbox/text/subtitles-demo.vtt" srclang="en" label="English"></track>
+	</video>
+
+	<!-- LIGHTBOX TEST -->
+	<!-- LOCAL TEST -->
+	<h2>Local video with poster opened in lightbox</h2>
+	<a href="#video3" class="afterglow">Open the lightbox</a>
+	<video id="video3" width="640" height="360" poster="http://afterglowplayer.com/sandbox/video/Snapshots/afterglow_local.jpg" data-autoresize="fit" preload="none">
+		<source src="http://afterglowplayer.com/sandbox/video/MP4/afterglow_local.mp4" type="video/mp4" />
+		<source src="http://afterglowplayer.com/sandbox/video/WEBM/afterglow_local.webm" type="video/webm" />
+	</video>
+	<!-- LOCAL TEST -->
+	<h2>Youtube opened in lightbox</h2>
+	<a href="#video4" class="afterglow">Open the lightbox</a>
+	<video id="video4" width="1920" height="1080" data-youtube-id="HgbHx4CY300" data-autoresize="fit" preload="none"></video>
+
 
 </body>
 </html>
diff --git a/src/afterglow.js b/src/afterglow.js
@@ -384,6 +384,12 @@ afterglow = {
 				afterglow.getPlayer(playerid).posterImage.hide();
 			}
 			afterglow.getPlayer(playerid).play();
+
+			// Mobile device, so autoplay didn't work
+			if(afterglow.getPlayer(playerid).paused()){
+				afterglow.getPlayer(playerid).posterImage.show();
+				afterglow.getPlayer(playerid).bigPlayButton.show();
+			}
 		});
 
 		// Add the closing button

diff --git a/src/lightbox/afterglow-lightbox.less b/src/lightbox/afterglow-lightbox.less
@@ -34,10 +34,7 @@
 			top:0 !important;
 			left:0 !important;
 		}
-
-		.vjs-paused .vjs-big-play-button {
-			display:none;
-		}
+
 		.vjs-paused.vjs-ended .vjs-big-play-button {
 			display:block;
 		}

diff --git a/src/videojs/skin/afterglow/vjs-afterglow.less b/src/videojs/skin/afterglow/vjs-afterglow.less
@@ -24,7 +24,6 @@
 @volume-high-icon: "\e605";
 @fullscreen-enter-icon: "\e608";
 @fullscreen-exit-icon: "\e609";
-@spinner-icon: "\e604";
 @subtitles-icon: "\e60d";
 @captions-icon: "\e600";
 @lightboxclose-icon: "\e601";
@@ -949,34 +948,22 @@
 	*/
 
 	.vjs-loading-spinner {
-		/* Should be hidden by afterglow *///
-		display: none;
-
 		position: absolute;
 		top: 50%;
 		left: 50%;
+		width: 32px;
+		height: 32px;
+		margin-left: -16px;
+		margin-top: -16px;
+		clear:both;
+		border: 3px rgba(255,255,255,0.1) solid;
+		border-top: 3px rgba(255,255,255,.95) solid;
+		border-radius: 50%;
+		-webkit-animation: spCircRot 1.6s infinite linear;
+		animation: spCircRot 1.6s infinite linear;
 
-		font-family: 'afterglow-icon';
-		font-size: 20px;
-		line-height: 20px;
-
-		width: 30px;
-		height: 30px;
-
-		margin-left: -15px;
-		margin-top: -15px;
-
-		opacity: 0.75;
-
-		&:before {
-			content: @spinner-icon;
-			font-family: 'afterglow-icon';
-			position: absolute;
-			top: 0;
-			left: 0;
-			width: 20px;
-			height: 20px;
-			text-align: center;
+		&:before{
+			content:none;
 		}
 	}
 
@@ -1634,4 +1621,16 @@ and the native poster can take over */
 	/* border-color-with-alpha *///
 	border-color: @color;
 	border-color: @rgba;
+}
+
+// Spinner animation
+
+
+@-webkit-keyframes spCircRot {
+	from { -webkit-transform: rotate(0deg); }
+	to { -webkit-transform: rotate(359deg); }
+}
+@keyframes spCircRot {
+	from { transform: rotate(0deg); }
+	to { transform: rotate(359deg); }
 }