Video thumbnails - no poster yet

package.json

@@ -5,8 +5,14 @@
   "author": "Romain Prieto",
   "license": "BSD",
   "keywords": [
-    "photo", "video", "gallery", "thumbnails", "portfolio",
+    "photo",
-    "website", "s3", "generator"
+    "video",
+    "gallery",
+    "thumbnails",
+    "portfolio",
+    "website",
+    "s3",
+    "generator"
   ],
   "scripts": {
     "example": "node example/build.js"
@@ -22,6 +28,8 @@
     "gulp-image-resize": "~0.5.0",
     "lodash": "~2.4.1",
     "wrench": "~1.5.8",
-    "fs-extra": "~0.8.1"
+    "fs-extra": "~0.8.1",
+    "video-thumb": "0.0.2",
+    "gulp-rename": "~1.2.0"
   }
 }

src/galleries.js

@@ -8,13 +8,30 @@ exports.fromDisk = function(mediaPath, mediaPrefix) {
     return {
       // read file date
       date: 2340930845,
+      name: path.basename(file),
       path: file,
       url: mediaPrefix + '/' + file,
-      thumbnail: 'thumbs/' + file,
+      thumbnail: thumbsPath(file),
-      video: file.match(/\.mp4$/)
+      video: isVideo(file),
+      poster: videoPoster(file)
     }
   }
 
+  function thumbsPath(file) {
+    return 'thumbs/' + file.replace(/\.[a-z0-9]+$/, '.jpg');
+  }
+
+  function videoPoster(file) {
+    if (file.match(/mp4$/)) {
+      return file.replace(/\.[a-z0-9]+$/, '_poster.jpg')
+    } else {
+      return null;
+    }
+  }
+  function isVideo(file) {
+    return file.match(/mp4$/) != null;
+  }
+
   function byFolder(file) {
     return path.dirname(file.path);
   }

src/index.js

@@ -2,10 +2,13 @@ var _           = require('lodash');
 var fs          = require('fs-extra');
 var os          = require('os');
 var path        = require('path');
+var wrench      = require('wrench');
 var gulp        = require('gulp');
 var newer       = require('gulp-newer');
+var rename      = require("gulp-rename");
 var imageResize = require('gulp-image-resize');
 var parallel    = require('concurrent-transform');
+var thumbler    = require('video-thumb');
 
 var galleries   = require('./galleries');
 var render      = require('./render');
@@ -17,7 +20,7 @@ exports.build = function(opts) {
   fs.mkdirp(opts.output);
   var list = galleries.fromDisk(opts.input, opts.mediaPrefix);
   
-  gulp.task('thumbs', function () {
+  gulp.task('thumbs-photos', function() {
     var dest = opts.output + '/thumbs';
     gulp
     .src(opts.input + '/**/*.{jpg,png}')
@@ -25,7 +28,18 @@ exports.build = function(opts) {
     .pipe(parallel(imageResize({width: opts.size, height: opts.size, crop: true}), os.cpus().length))
     .pipe(gulp.dest(dest));
   });
-  
+
+  gulp.task('thumbs-videos', function() {
+    var files = wrench.readdirSyncRecursive(opts.input);
+    var videos = files.filter(function(f) { return f.match(/\.mp4$/); });
+    
+    videos.forEach(function(videoPath) {
+      var input = path.join(opts.input, videoPath);
+      var output = path.join(opts.output, 'thumbs', videoPath.replace('.mp4', '.jpg'));
+      thumbler.extract(input, output, '00:00:00', '100x100', function() {});
+    });
+  });
+
   gulp.task('index', function() {
     var rendered = render.gallery(list, list[0]);
     var outputPath = path.join(opts.output, 'index.html');
@@ -48,6 +62,6 @@ exports.build = function(opts) {
     });
   });
   
-  gulp.run('thumbs', 'public', 'index', 'galleries');
+  gulp.run('thumbs-photos', 'thumbs-videos', 'public', 'index', 'galleries');
 
 };

templates/gallery.hbs

@@ -30,11 +30,12 @@
 
     <ul id="gallery">
       {{#each gallery.media}}<li>
-        {{#if media.video}}
+        {{#if video}}
           <a href="{{url}}"
              type="video/mp4"
-             data-poster="{{thumbnail}}">
+             data-poster="{{poster}}">
-             {{name}}
+             <img src="{{thumbnail}}"
+                 alt="{{name}}" />
           </a>
         {{else}}
           <a href="{{url}}">