Add previews for videos

lib/photo-manager/index.js

@@ -65,12 +65,17 @@ module.exports = function createPhotoManager({photoPath, cacheDuration, paginati
 
 			knownPictures = dates.reduce((pictures, date) => {
 				return pictures.concat(date.entries.map((entry) => {
+					let kind =
+						entry.match(/\.(jpg|png)$/i) ? 'image' :
+						entry.match(/\.(mp4|webm|mov)$/i) ? 'video' :
+						'other';
 					let picture = {
 						date: date,
 						dateString: date.date,
 						filename: entry,
-						previous: lastEntry
-					}
+						previous: lastEntry,
+						kind,
+					};
 
 					if (lastEntry != null) {
 						lastEntry.next = picture;

lib/thumbnailer/index.js

@@ -4,6 +4,7 @@ const Promise = require("bluebird");
 const gm = require("gm");
 const fs = Promise.promisifyAll(require("fs"));
 const path = require("path");
+const ffmpeg = require('fluent-ffmpeg');
 
 const ThumbnailError = require("./error");
 
@@ -31,9 +32,10 @@ function createReadStream(filePath) {
 	});
 }
 
-module.exports = function createThumbnailer(thumbnailFolder, pictureFolder, {width, height, quality}) {
+module.exports = function createThumbnailer(thumbnailFolder, pictureFolder, conf) {
 	return async function getThumbnail(date, filename) {
-		let thumbnailPath = path.join(thumbnailFolder, date, filename);
+		let thumbnailPath = path.join(thumbnailFolder, date, filename.replace(/\..+$/, '.jpg'));
+		let filePath = path.join(pictureFolder, date, filename);
 
 		try {
 			return await createReadStream(thumbnailPath);
@@ -54,13 +56,36 @@ module.exports = function createThumbnailer(thumbnailFolder, pictureFolder, {wid
 			}
 		}
 
-		let resizer = gm(path.join(pictureFolder, date, filename)).
-			noProfile().
-			resize(width, height).
-			quality(quality);
-		Promise.promisifyAll(resizer); // HACK
-		await resizer.writeAsync(thumbnailPath);
+		// file kind check duplicated with lib/photo-manager/index.js
+		if (filename.match(/\.(jpg|png)$/i)) {
+			await createImageThumbnail(filePath, thumbnailPath, conf);
+		} else if (filename.match(/\.(mp4|webm|mov)$/i)) {
+			await createVideoThumbnail(filePath, thumbnailPath, conf);
+		} else {
+			throw new ThumbnailError('not sure how to make a thumbnail for this file');
+		}
 
 		return await createReadStream(thumbnailPath);
 	};
 };
+
+async function createImageThumbnail(inPath, outPath, {width, height, quality}) {
+	let resizer = gm(inPath)
+		.noProfile()
+		.resize(width, height)
+		.quality(quality);
+	Promise.promisifyAll(resizer); // HACK
+	await resizer.writeAsync(outPath);
+}
+
+function createVideoThumbnail(inPath, outPath, {width, height, quality}) {
+	return new Promise((resolve, reject) => {
+		ffmpeg(inPath)
+			.output(outPath)
+			.noAudio()
+			.seek('00:02')
+			.on('error', reject)
+			.on('end', resolve)
+			.run();
+	})
+}

package.json

@@ -23,6 +23,7 @@
     "default-value": "^1.0.0",
     "express": "^4.16.3",
     "express-promise-router": "^3.0.2",
+    "fluent-ffmpeg": "^2.1.3",
     "gm": "^1.23.1",
     "group-by": "0.0.1",
     "moment": "^2.22.1",

public/style.css

@@ -73,7 +73,7 @@ img.photo {
 	overflow: hidden; /* bah */
 }
 
-img.large {
+.large {
 	height: 100%;
 	width: 100%;
 	object-fit: contain;

server.js

@@ -98,7 +98,7 @@ router.get("/view/:date/:filename", async (req, res) => {
 		previousPhoto: photo.previous,
 		nextPhoto: photo.next,
 		// NOTE: The below does not currently work when the user-facing HTTPd is running on a non-standard port!
-		absoluteThumbnail: `${req.protocol}://${req.host}${config.pathPrefix}/thumbnails/${photo.date.date}/${photo.filename}`
+		absoluteThumbnail: `${req.protocol}://${req.host}${config.pathPrefix}/thumbnails/${photo.date.date}/${photo.filename}`,
 	});
 });
 

views/index.pug

@@ -20,6 +20,7 @@ block contents
 
 				.photos
 					for photo in date.entries
-						a(href=`${pathPrefix}/view/${date.date}/${photo.filename}`): img.photo(src=`${pathPrefix}/thumbnails/${date.date}/${photo.filename}`)
-
+						a(href=`${pathPrefix}/view/${date.date}/${photo.filename}`)
+							img.photo(src=`${pathPrefix}/thumbnails/${date.date}/${photo.filename}`)
+
 	+pageNavigation

views/view.pug

@@ -23,4 +23,9 @@ block contents
 		if nextPhoto != null
 			a.next(href=`${pathPrefix}/view/${nextPhoto.date.date}/${nextPhoto.filename}`) ▶
 
-		img.large(src=`${pathPrefix}/photos/${photo.date.date}/${photo.filename}`)
+		if photo.kind == 'image'
+			img.large(src=`${pathPrefix}/photos/${photo.date.date}/${photo.filename}`)
+		else if photo.kind == 'video'
+			video.large(autoplay muted loop src=`${pathPrefix}/photos/${photo.date.date}/${photo.filename}`)
+		else
+			p= "not sure how to display this file..."