Fix lightbox videos

inc/spot.php

@@ -133,7 +133,8 @@ class Spot extends Main
 				'filepath_js_leaflet'		=> self::addTimestampToFilePath('script/leaflet.min.js'),
 				'filepath_js_jquery'		=> self::addTimestampToFilePath('script/jquery.min.js'),
 				'filepath_js_jquery_mods'	=> self::addTimestampToFilePath('script/jquery.mods.js'),
-				'filepath_js_spot'			=> self::addTimestampToFilePath('script/spot.js')
+				'filepath_js_spot'			=> self::addTimestampToFilePath('script/spot.js'),
+				'filepath_js_lightbox'		=> self::addTimestampToFilePath('script/lightbox.js')
 			)
 		);
 	}

masks/index.html

@@ -25,6 +25,7 @@
 	<script type="text/javascript" src="[#]filepath_js_jquery[#]"></script>
 	<script type="text/javascript" src="[#]filepath_js_jquery_mods[#]"></script>
 	<script type="text/javascript" src="[#]filepath_js_spot[#]"></script>
+	<script type="text/javascript" src="[#]filepath_js_lightbox[#]"></script>
 	<script type="text/javascript">
 		var oSpot = new Spot([#]GLOBAL_VARS[#]); 
 		$(document).ready(oSpot.init);

masks/project.html

@@ -20,7 +20,6 @@
 	</div>
 </div>
 <div id="mobile" class="mobile"></div>
-<script type="text/javascript" src="script/lightbox.js"></script>
 <script type="text/javascript">
 oSpot.onSamePageMove = function(asHash) {
 	if(self.tmp('first_exec')) initPage(asHash);

script/lightbox.js

@@ -63,7 +63,7 @@
      */
     sanitizeTitle: false
     //ADDED-START
-    , hasVideo: false
+    , hasVideo: true
     //ADDED-END
   };
 
@@ -126,7 +126,7 @@
 
     //ADDED-START
 	if(self.options.hasVideo) {
-		this.$video = $('<video class="lb-video" src="" controls autoplay></video>');
+		this.$video = $('<video class="lb-video" src="" controls="true" autoplay playsinline></video>');
 		this.$image.after(this.$video);
 		this.videoBorderWidth = {
 			top: parseInt(this.$video.css('border-top-width'), 10),
@@ -310,7 +310,7 @@
     $('.lb-loader').fadeIn('slow');
     //ADDED-START
     //this.$lightbox.find('.lb-image, .lb-nav, .lb-prev, .lb-next, .lb-dataContainer, .lb-numbers, .lb-caption').hide();
-    this.$lightbox.find('.lb-image, .lb-video, .lb-nav, .lb-prev, .lb-next, .lb-dataContainer, .lb-numbers, .lb-caption').hide();
+    this.$lightbox.find('.lb-image, .lb-video, .lb-nav, .lb-prev, .lb-next, .lb-number, .lb-caption').hide();
 	//ADDED-END
     
     this.$outerContainer.addClass('animating');
@@ -326,32 +326,36 @@
 				var $This = $(this);
 				
 				//TODO merge with image
+				windowWidth    = $(window).width();
+				windowHeight   = $(window).height();
+				maxVideoWidth  = windowWidth - self.containerPadding.left - self.containerPadding.right - self.videoBorderWidth.left - self.videoBorderWidth.right - self.$lightbox.find('.lb-dataContainer').outerWidth();
+				maxVideoHeight = windowHeight - self.containerPadding.top - self.containerPadding.bottom - self.videoBorderWidth.top - self.videoBorderWidth.bottom;
+		
 				if(self.options.fitImagesInViewport) {
-					windowWidth    = $(window).width();
-					windowHeight   = $(window).height();
-					maxVideoWidth  = windowWidth - self.containerPadding.left - self.containerPadding.right - self.videoBorderWidth.left - self.videoBorderWidth.right - self.$lightbox.find('.lb-dataContainer').outerWidth();
-					maxVideoHeight = windowHeight - self.containerPadding.top - self.containerPadding.bottom - self.videoBorderWidth.top - self.videoBorderWidth.bottom;
-					
 					//Check if image size is larger than maxWidth|maxHeight in settings
 					if(self.options.maxWidth && self.options.maxWidth < maxVideoWidth) maxVideoWidth = self.options.maxWidth;
 					if(self.options.maxHeight && self.options.maxHeight < maxVideoWidth) maxVideoHeight = self.options.maxHeight;
-					
-					//Is the current image's width or height is greater than the maxImageWidth or maxImageHeight
-					//option than we need to size down while maintaining the aspect ratio.
-				    if((this.videoWidth > maxVideoWidth) || (this.videoHeight > maxVideoHeight)) {
-				    	if ((this.videoWidth / maxVideoWidth) > (this.videoHeight / maxVideoHeight)) {
-				    		videoWidth = maxVideoWidth;
-				    		videoHeight = Math.round(this.videoHeight / (this.videoWidth / videoWidth));
-				    		$This.width(videoWidth);
-				    		$This.height(videoHeight);
-				    	} else {
-				    		videoHeight = maxVideoHeight;
-				    		videoWidth = Math.round(this.videoWidth / (this.videoHeight / videoHeight));
-				    		$This.width(videoWidth);
-				    		$This.height(videoHeight);
-				    	}
-				    }
 				}
+				else {
+					maxVideoWidth = self.options.maxWidth || this.videoWidth || maxVideoWidth;
+					maxVideoHeight = self.options.maxHeight || this.videoHeight || maxVideoHeight;
+				}
+
+				//Is the current image's width or height is greater than the maxImageWidth or maxImageHeight
+				//option than we need to size down while maintaining the aspect ratio.
+			    if((this.videoWidth > maxVideoWidth) || (this.videoHeight > maxVideoHeight)) {
+			    	if ((this.videoWidth / maxVideoWidth) > (this.videoHeight / maxVideoHeight)) {
+			    		videoWidth = maxVideoWidth;
+			    		videoHeight = Math.round(this.videoHeight / (this.videoWidth / videoWidth));
+			    		$This.width(videoWidth);
+			    		$This.height(videoHeight);
+			    	} else {
+			    		videoHeight = maxVideoHeight;
+			    		videoWidth = Math.round(this.videoWidth / (this.videoHeight / videoHeight));
+			    		$This.width(videoWidth);
+			    		$This.height(videoHeight);
+			    	}
+			    }
 				
 				self.sizeContainer($This.width(), $This.height(), 'video');
 				$This.off('loadedmetadata');
@@ -468,8 +472,9 @@
   };
 
   // Stretch overlay to fit the viewport
-  Lightbox.prototype.sizeOverlay = function() {
+  Lightbox.prototype.sizeOverlay = function(e) {
     var self = this;
+    
     /*
     We use a setTimeout 0 to pause JS execution and let the rendering catch-up.
     Why do this? If the `disableScrolling` option is set to true, a class is added to the body
@@ -477,14 +482,21 @@
     hidden before we measure the document width, as the presence of the scrollbar will affect the
     number.
     */
+    //ADDED-START
+    /*
     setTimeout(function() {
       self.$overlay
         .width($(document).width())
         .height($(document).height());
-
     }, 0);
+    */
+    if(e) {
+    	if(typeof oResizeTimer != 'undefined') clearTimeout(oResizeTimer);
+    	oResizeTimer = setTimeout(function(){self.changeImage(self.currentImageIndex);}, 200);
+    }
+    //ADDED-END
   };
-
+  
   // Animate the size of the lightbox to fit the image we are showing
   // This method also shows the the image.
   //ADDED-START

style/_lightbox.scss

@@ -7,6 +7,11 @@
 	@extend .#{$fa-css-prefix}-#{$icon};
 }
 
+.lightboxOverlay {
+	bottom: 0;
+	right: 0;
+}
+
 .lightbox {
 	display: flex;
 	align-items: center;
@@ -23,7 +28,6 @@
 		.lb-image {
 			image-orientation: from-image;
 			border: none;
-			border-radius: 0;
 		}
 		
 		.lb-nav a.lb-prev, .lb-nav a.lb-next {
@@ -56,8 +60,10 @@
 		padding: 0;
 		display: inline-block;
 		vertical-align: top;
-		width: auto;
-		white-space: nowrap;
+		width: 200px;
+		max-width: 100%;
+		flex: 0 0 auto;
+		overflow: hidden;
 		
 		.lb-data {
 			padding: 1em 0 0 1em;