Allow upload of videos

.gitignore

@@ -12,4 +12,6 @@
 /files/**/*.JPEG
 /files/**/*.png
 /files/**/*.PNG
+/files/**/*.mov
+/files/**/*.MOV
 /geo/*.geojson

inc/uploader.php

@@ -15,7 +15,7 @@ class Uploader extends UploadHandler
 		$this->error_messages['wrong_project_mode'] = 'Le projet n\'est pas en mode "blog".';
 		$this->oPicture = &$oPicture;
 		$this->sBody = '';
-		parent::__construct(array('image_versions'=>array(), 'accept_file_types'=>'/\.(gif|jpe?g|png)$/i'));
+		parent::__construct(array('image_versions'=>array(), 'accept_file_types'=>'/\.(gif|jpe?g|png|mov)$/i'));
 	}
 	
 	protected function validate($uploaded_file, $file, $error, $index) {

masks/project.html

@@ -88,7 +88,8 @@ function initPage(asHash) {
 			albumLabel: "Photo %1 sur %2",
 			fadeDuration: 300,
 			imageFadeDuration: 400,
-			resizeDuration: 600
+			resizeDuration: 600,
+			hasVideo: true
 		});
 		
 		//Assign Track Type Colors
@@ -503,7 +504,8 @@ function getPost(asPost) {
 		case 'picture':
 			var sTakenOn = (asPost.taken_on == '0000-00-00 00:00:00')?'':' et prise le '+asPost.taken_on_formatted+self.tmp('site_tz_notice');
 			var $Image = $('<img>', {'src': asPost.thumb_path, title: 'Click pour zoomer'});
-			$Body = $('<a>', {href: asPost.pic_path, 'data-lightbox': 'post-pictures', 'data-title': 'Photo ajoutée le '+sAbsTime+sTakenOn, 'data-orientation': asPost.rotate}).append($Image);
+			var sVideo = asPost.pic_path.toLowerCase().split('.').pop()=='mov'?'true':'false';
+			$Body = $('<a>', {href: asPost.pic_path, 'data-video': sVideo, 'data-lightbox': 'post-pictures', 'data-title': 'Photo ajoutée le '+sAbsTime+sTakenOn, 'data-orientation': asPost.rotate}).append($Image);
 			break;
 		case 'post':
 			$Body = $('<div>')

masks/upload.html

@@ -1,5 +1,5 @@
 <div id="upload">
-	<h1>Pictures upload</h1>
+	<h1>Picture &amp; Video Uploads</h1>
 	<input id="fileupload" type="file" name="files[]" multiple>
 	<div id="progress">
     	<div class="bar" style="width: 0%;"></div>
@@ -15,7 +15,7 @@ oSpot.pageInit = function(asHash)
 			.attr('data-url', self.getActionLink('upload'))
 			.fileupload({
 				dataType: 'json',
-				acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
+				acceptFileTypes: /(\.|\/)(gif|jpe?g|png|mov)$/i,
 				done: function (e, asData) {
 					var $Status = $('#status');
 					$.each(asData.result.files, function(iKey, oFile) {

readme.md

@@ -6,7 +6,7 @@
 ## To Do List
 * require js
 * Video support
-	* Upload
+	* Thumbnail
 	* Preloader
 	* Resize
 	* Navigation

script/lightbox.js

@@ -62,6 +62,9 @@
     to prevent xss and other injection attacks.
      */
     sanitizeTitle: false
+    //ADDED-START
+    , hasVideo: false
+    //ADDED-END
   };
 
   Lightbox.prototype.option = function(options) {
@@ -109,6 +112,19 @@
     this.$image          = this.$lightbox.find('.lb-image');
     this.$nav            = this.$lightbox.find('.lb-nav');
 
+    //ADDED-START
+	if(self.options.hasVideo) {
+		this.$video = $('<video class="lb-video" width="560" height="315" src="" controls autoplay></video>');
+		this.$image.after(this.$video);
+		this.videoBorderWidth = {
+			top: parseInt(this.$video.css('border-top-width'), 10),
+			right: parseInt(this.$video.css('border-right-width'), 10),
+			bottom: parseInt(this.$video.css('border-bottom-width'), 10),
+			left: parseInt(this.$video.css('border-left-width'), 10)
+		};
+    }
+    //ADDED-END
+    
     // Store css values for future lookup
     this.containerPadding = {
       top: parseInt(this.$container.css('padding-top'), 10),
@@ -217,6 +233,7 @@
         title: $link.attr('data-title') || $link.attr('title')
         //ADDED-START
         , orientation: $link.attr('data-orientation')
+        , video: (self.options.hasVideo && typeof $link.attr('data-video') !== 'undefined' && $link.attr('data-video') === 'true')
         //ADDED-END
       });
     }
@@ -275,10 +292,36 @@
     this.$overlay.fadeIn(this.options.fadeDuration);
 
     $('.lb-loader').fadeIn('slow');
-    this.$lightbox.find('.lb-image, .lb-nav, .lb-prev, .lb-next, .lb-dataContainer, .lb-numbers, .lb-caption').hide();
+    //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();
+	//ADDED-END
     
     this.$outerContainer.addClass('animating');
     
+    //ADDED-START
+	if(self.options.hasVideo) {
+		var $video = this.$lightbox.find('.lb-video');
+		var $lbContainer = this.$lightbox.find('.lb-container');
+		var $hasVideoNav = $lbContainer.hasClass('lb-video-nav');
+
+		if(self.album[imageNumber].video) {
+			$video.attr('src', self.album[imageNumber].link);
+			var $videoWidth = parseInt($video.attr('width'));
+			var $videoHeight = parseInt($video.attr('height'));
+			this.currentImageIndex = imageNumber;
+			self.sizeContainer($videoWidth, $videoHeight, 'video');
+			
+			if(!$hasVideoNav) $lbContainer.addClass('lb-video-nav');
+			return;
+		}
+		else {
+			$video.attr('src', '');
+			if($hasVideoNav) $lbContainer.removeClass('lb-video-nav');
+        }
+	}
+    //ADDED-END
+
     // When image to show is preloaded, we send the width and height to sizeContainer()
     var preloader = new Image();
     preloader.onload = function() {
@@ -341,7 +384,10 @@
           }
         }
       }
-      self.sizeContainer($image.width(), $image.height());
+      //ADDED-START
+      //self.sizeContainer($image.width(), $image.height());
+      self.sizeContainer($image.width(), $image.height(), 'image');
+      //ADDED-END
     };
 
     preloader.src          = this.album[imageNumber].link;
@@ -356,13 +402,23 @@
   };
 
   // Animate the size of the lightbox to fit the image we are showing
-  Lightbox.prototype.sizeContainer = function(imageWidth, imageHeight) {
-    var self = this;
+  //ADDED-START
+  //Lightbox.prototype.sizeContainer = function(imageWidth, imageHeight) {
+  Lightbox.prototype.sizeContainer = function(imageWidth, imageHeight, media) {
+	media = media || 'image';
+  //ADDED-END
+	var self = this;
 
     var oldWidth  = this.$outerContainer.outerWidth();
     var oldHeight = this.$outerContainer.outerHeight();
-    var newWidth  = imageWidth + this.containerPadding.left + this.containerPadding.right + this.imageBorderWidth.left + this.imageBorderWidth.right;
-    var newHeight = imageHeight + this.containerPadding.top + this.containerPadding.bottom + this.imageBorderWidth.top + this.imageBorderWidth.bottom;
+    //ADDED-START
+    //var newWidth  = imageWidth + this.containerPadding.left + this.containerPadding.right + this.imageBorderWidth.left + this.imageBorderWidth.right;
+    //var newHeight = imageHeight + this.containerPadding.top + this.containerPadding.bottom + this.imageBorderWidth.top + this.imageBorderWidth.bottom;
+    var mediaBorderWidth = (media=='image')?(this.imageBorderWidth.left + this.imageBorderWidth.right):(this.videoBorderWidth.left + this.videoBorderWidth.right);
+    var mediaBorderHeight = (media=='image')?(this.imageBorderWidth.top + this.imageBorderWidth.bottom):(this.videoBorderWidth.top + this.videoBorderWidth.bottom);
+    var newWidth  = imageWidth + this.containerPadding.left + this.containerPadding.right + mediaBorderWidth;
+    var newHeight = imageHeight + this.containerPadding.top + this.containerPadding.bottom + mediaBorderHeight;
+    //ADDED-END
     
     function postResize() {
       self.$lightbox.find('.lb-dataContainer').width(newWidth);
@@ -386,7 +442,12 @@
   // Display the image and its details and begin preload neighboring images.
   Lightbox.prototype.showImage = function() {
     this.$lightbox.find('.lb-loader').stop(true).hide();
-    this.$lightbox.find('.lb-image').fadeIn(this.options.imageFadeDuration);
+    
+    //ADDED-START
+    //this.$lightbox.find('.lb-image').fadeIn(this.options.imageFadeDuration);
+    if(this.options.hasVideo && this.album[this.currentImageIndex].video) this.$lightbox.find('.lb-video').fadeIn(this.options.imageFadeDuration);
+    else this.$lightbox.find('.lb-image').fadeIn(this.options.imageFadeDuration);
+    //ADDED-END
     
     this.updateNav();
     this.updateDetails();
@@ -515,6 +576,18 @@
   // Closing time. :-(
   Lightbox.prototype.end = function() {
     this.disableKeyboardNav();
+    
+    //ADDED-START
+    if(this.options.hasVideo) {
+    	var $video = this.$lightbox.find('.lb-video');
+        var $lbContainer = this.$lightbox.find('.lb-container');
+        var $hasVideoNav = $lbContainer.hasClass('lb-video-nav');
+        $video.attr('src', '');
+        
+        if($hasVideoNav) $lbContainer.removeClass('lb-video-nav');
+    }
+    //ADDED-END
+    
     $(window).off('resize', this.sizeOverlay);
     this.$lightbox.fadeOut(this.options.fadeDuration);
     this.$overlay.fadeOut(this.options.fadeDuration);

style/_lightbox.scss

@@ -7,40 +7,42 @@
 	@extend .#{$fa-css-prefix}-#{$icon};
 }
 
-.lb-cancel {
-	@include lightbox-icon(cancel);
-	@extend .flicker;
-	color: #CCC;
-}
+.lightbox {
+	.lb-cancel {
+		@include lightbox-icon(cancel);
+		@extend .flicker;
+		color: #CCC;
+	}
 	
-.lb-nav a.lb-prev, .lb-nav a.lb-next {
-	color: white;
-	text-decoration: none;
+	.lb-nav a.lb-prev, .lb-nav a.lb-next {
+		color: white;
+		text-decoration: none;
 		
-	&:before {
-		position: absolute;
-		top: calc(50% - 1em);
+		&:before {
+			position: absolute;
+			top: calc(50% - 1em);
+		}
+	}
+		
+	.lb-nav a.lb-prev {
+		@include lightbox-icon(prev);
+		&:before {
+			left: 2em;
+		}
+	}
+	
+	.lb-nav a.lb-next {
+		@include lightbox-icon(next);
+		&:before {
+			right: 2em;
+		}
+	}
+	
+	.lb-data .lb-close {
+		@include lightbox-icon(close);
+	}
+	
+	.lb-image {
+		image-orientation: from-image;
 	}
 }
-	
-.lb-nav a.lb-prev {
-	@include lightbox-icon(prev);
-	&:before {
-		left: 2em;
-	}
-}
-
-.lb-nav a.lb-next {
-	@include lightbox-icon(next);
-	&:before {
-		right: 2em;
-	}
-}
-
-.lb-data .lb-close {
-	@include lightbox-icon(close);
-}
-
-.lb-image {
-	image-orientation: from-image;
-}

style/lightbox/_lightbox.scss

@@ -38,6 +38,16 @@ html.lb-disable-scrolling {
   border: 4px solid white;
 }
 
+//ADDED-START
+.lightbox .lb-video {
+  border-radius: 4px;
+  box-sizing: content-box;
+}
+.lightbox .lb-video-nav .lb-nav {
+	height: calc(100% - 45px);
+}
+//ADDED-END
+
 .lightbox a img {
   border: none;
 }