Play icon on video files

masks/project.html

@@ -85,7 +85,7 @@ function initPage(asHash) {
 		//Lightbox options
 		lightbox.option({
 			alwaysShowNavOnTouchDevices: true,
-			albumLabel: "Photo %1 sur %2",
+			albumLabel: "Média %1 sur %2",
 			fadeDuration: 300,
 			imageFadeDuration: 400,
 			resizeDuration: 600,
@@ -502,10 +502,17 @@ function getPost(asPost) {
 				);
 			break;
 		case 'media':
-			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'});
 			var bVideo = (asPost.subtype == 'video');
-			$Body = $('<a>', {href: asPost.pic_path, 'data-video': (bVideo?'true':'false'), 'data-lightbox': 'post-pictures', 'data-title': (bVideo?'Vidéo':'Photo')+' ajoutée le '+sAbsTime+sTakenOn, 'data-orientation': asPost.rotate}).append($Image);
+			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: bVideo?'Click pour voir la vidéo':'Click pour zoomer'});
+			
+			$Body = $('<a>', {
+				'class': (bVideo?'video':'picture'),
+				href: asPost.pic_path,
+				'data-video': (bVideo?'true':'false'),
+				'data-lightbox': 'post-pictures',
+				'data-title': (bVideo?'Vidéo':'Photo')+' ajoutée le '+sAbsTime+sTakenOn, 'data-orientation': asPost.rotate
+			}).append($Image);
 			break;
 		case 'post':
 			$Body = $('<div>')

style/_fa.scss

@@ -48,6 +48,7 @@ $fa-css-prefix: fa;
 .#{$fa-css-prefix}-message:before { content: fa-content($fa-var-map-marker); }
 .#{$fa-css-prefix}-time:before { content: fa-content($fa-var-clock); }
 .#{$fa-css-prefix}-coords:before { content: fa-content($fa-var-compass); }
+.#{$fa-css-prefix}-play:before { content: fa-content($fa-var-play-circle); }
 
 /* Feed - Poster */
 .#{$fa-css-prefix}-poster:before { content: fa-content($fa-var-comment-edit); }

style/_mask_project.scss

@@ -311,6 +311,28 @@ $legend-color: #222;
 						width: 100%;
 						line-height: 0;
 						margin: 0;
+						position: relative;
+						
+						&.video {
+							@extend .fa;
+							@extend .fa-play;
+							overflow: hidden;
+							
+							&:hover::before {
+								color: white;
+							}
+							
+							&::before {
+								position: absolute;
+								top: 50%;
+								transform: translate(-50%,-50%);
+								color: #CCC;
+								left: 50%;
+								text-shadow: 0px 1px 1px rgba(0,0,0,0.8);
+								font-size: 3em;
+								text-decoration: none;
+							}
+						}
 					}
 					
 					img {