Fix #3. Display web-friendly videos (smaller size, and keeps original)

src/galleries.js

@@ -10,12 +10,25 @@ exports.fromDisk = function(mediaPath, thumbSize, callback) {
       date: date(mediaPath, file),
       name: path.basename(file),
       path: file,
-      video: video(file),
+      video: isVideo(file),
       size: thumbSize,
-      urls: {
-        original: mediaUrl(file, 'original'),
-        large: mediaUrl(file, 'large'),
-        thumb: mediaUrl(file, 'thumbs')
+      urls: urls(file)
+    }
+  }
+
+  function urls(file) {
+    if (isVideo(file)) {
+      return {
+        original: path.join('media', 'original', file),
+        web:      path.join('media', 'large',  ext(file, 'mp4')),
+        large:    path.join('media', 'large',  ext(file, 'jpg')),
+        thumb:    path.join('media', 'thumbs', ext(file, 'jpg'))
+      };
+    } else {
+      return {
+        original: path.join('media', 'original', file),
+        large:    path.join('media', 'large', file),
+        thumb:    path.join('media', 'thumbs', file)
       }
     }
   }
@@ -24,14 +37,11 @@ exports.fromDisk = function(mediaPath, thumbSize, callback) {
     return fs.statSync(file).ctime.getTime();
   }
 
-  function mediaUrl(file, type) {
-    if (type != 'original') {
-      file = file.replace(/\.(mp4|mov)$/, '.jpg');
-    }
-    return path.join('media', type, file);
+  function ext(file, ext) {
+    return file.replace(/\.[a-z0-9]+$/i, '.' + ext);
   }
 
-  function video(file) {
+  function isVideo(file) {
     return (file.match(/\.(mp4|mov)$/) != null);
   }
 

src/index.js

@@ -89,6 +89,15 @@ exports.build = function(opts) {
     }, callback);
   }
 
+  function videoWeb(callback) {
+    regen({
+      cwd: opts.input,
+      src: '**/*.{mp4,mov}',
+      dest: media + '/large/$path/$name.mp4',
+      process: thumbs.videoWeb
+    }, callback);
+  }
+
   function videoLarge(callback) {
     regen({
       cwd: opts.input,
@@ -114,6 +123,7 @@ exports.build = function(opts) {
     step('Original media',    copyMedia),
     step('Photos (large)',    photoLarge),
     step('Photos (thumbs)',   photoThumbs),
+    step('Videos (web)',      videoWeb),
     step('Videos (large)',    videoLarge),
     step('Videos (thumbs)',   videoThumbs)
   ], finish);

src/thumbs.js

@@ -7,6 +7,7 @@ exports.sizes = {
   large: 1000,
 };
 
+// Small square photo thumbnail
 exports.photoSquare = function(src, dest, callback) {
   gm(src)
     .resize(exports.sizes.thumb, exports.sizes.thumb, '^')
@@ -16,6 +17,7 @@ exports.photoSquare = function(src, dest, callback) {
     .write(dest, callback);
 };
 
+// Large photo
 exports.photoLarge = function(src, dest, callback) {
   gm(src)
     .resize(null, exports.sizes.large, '>')
@@ -23,11 +25,19 @@ exports.photoLarge = function(src, dest, callback) {
     .write(dest, callback);
 };
 
+// Web-streaming friendly video
+exports.videoWeb = function(src, dest, callback) {
+  var ffmpeg = 'ffmpeg -i "' + src + '" -vcodec libx264 -ab 96k -vb 1200k -y "'+ dest +'"';
+  exec(ffmpeg, callback);
+};
+
+// Large video preview (before you click play)
 exports.videoLarge = function(src, dest, callback) {
   var ffmpeg = 'ffmpeg -itsoffset -1 -i "' + src + '" -ss 0.1 -vframes 1 -y "' + dest + '"';
   exec(ffmpeg, callback);
 };
 
+// Small square video preview
 exports.videoSquare = function(src, dest, callback) {
   async.series([
     exports.videoLarge.bind(this, src, dest),

templates/gallery.hbs

@@ -36,7 +36,7 @@
       {{#each gallery.media}}<li>
         {{#if video}}
           <div class="video-overlay">&#9654;</div>
-          <a href="{{urls.original}}"
+          <a href="{{urls.web}}"
              type="video/mp4"
              data-poster="{{urls.large}}">
              <img src="{{urls.thumb}}"