video's in het fotoboek

SQL

@@ -3,9 +3,10 @@ CREATE TABLE `fa_photos` (
 	`name` varchar(64) NOT NULL,
 	`path` varchar(255) NOT NULL,
 	`visibility` enum('deleted','lost','hidden','leden','world') NOT NULL default 'world',
-	`cached` set('thumb','large','invalidated') NOT NULL,
+	`cached` set('thumb','large','mp4_360p','webm_360p','mp4_720p','webm_720p','invalidated') NOT NULL,
 	`rotation` smallint(6) NOT NULL default '0',
 	`check_tags` tinyint(1) default '0',
+	`type` enum('photo','video') NOT NULL default 'photo',
 	PRIMARY KEY  (`id`),
 	UNIQUE KEY `path` (`path`,`name`)
 ) ENGINE=MyISAM DEFAULT CHARSET=utf8;

config.php.sample

@@ -5,20 +5,34 @@
 	$domain = 'karpenoktem.nl';
 	$absolute_url_path = '/fotos2/';
 
+	// thumbs layout
 	$thumbs_per_row = 4;
 	$rows_of_thumbs = 2;
 
+	// foto slider
 	$foto_slider = true;
 	$foto_slider_preload = true;
 	$foto_slider_timeout = 5;
 
+	// image resize
 	$imagick = '/usr/local/bin/convert'; // or false to use GD
 	$thumbnail_size = '100x';
 	$large_size = '1024x';
 
+	// video transcoding
+	// ffmpeg command (may have extra options)
+	$ffmpeg = '/usr/local/bin/ffmpeg -loglevel warning';
+	// put preferred codec first
+	// note that mp4 (h264) may have hardware acceleration on certain devices
+	$video_codecs = array('mp4', 'webm');
+	// when changing these don't forget to update the database table!
+	// always put lower resolution first!
+	// and put them in the form of '360p', '480p', '720p', '1080p' etc.
+	$video_resolutions = array('360p', '720p');
+
 	$db_host = 'localhost';
 	$db_user = 'knfotos';
-	$db_db = 'knfotos';
+	$db_db   = 'knfotos';
 	$db_pass = 'abc';
 
 	$mongo_host = 'localhost';

dbutils.php

@@ -0,0 +1,30 @@
+<?php
+
+	// lock the database/cache for write operations
+	// WARNING: when this is used within a server (non-CLI), the lock will remain
+	// when the PHP script has finished. When run from the command-line, the locks
+	// will be relased by the OS (at least, Linux). See:
+	// http://stackoverflow.com/questions/12651068/release-of-flock-in-case-of-errors
+	function lock_db () {
+		global $cachedir;
+		// provide a locking mechanism to prevent two processes from simultaneously running
+		$fp = fopen ($cachedir .'lockfile', 'w'); // create if necessary
+		if (!$fp) {
+			echo "Could not acquire lock: unable to create lockfile.\n";
+		}
+		if (!flock($fp, LOCK_EX|LOCK_NB)) {
+			echo "Another process is already updating the database/cache.\nIf this isn't true, remove {$cachedir}lockfile.\n";
+			fclose($fp);
+			echo "Exiting.\n";
+			exit;
+		}
+		// $fp is required for unlocking (unlocking may be necessary)
+		return $fp;
+	}
+
+	// unlock again (requires file pointer returned by lock_db)
+	// this isn't really needed when run from the command line
+	function unlock_db ($fp) {
+		flock($fp, LOCK_UN);
+		fclose($fp);
+	}

foto.php

@@ -1,36 +1,12 @@
 <?php
 	require('header.php');
+	require('media.php');
 
-	if(!isset($_GET['foto'])) {
-		showTextAsImage("Missing parameter");
-	}
-	$row = getUnitByFullPath($_GET['foto'], UNIT_PHOTO);
-	if(!$row) {
-		header('HTTP/1.1 404 Not found');
-		showTextAsImage('Photo not found');
-	}
+	$media = getUnit(UNIT_PHOTO);
 
-	if(!in_array($row['visibility'], getVisibleVisibilities()) || !isPathVisible($row['path'])) {
-		header('HTTP/1.1 403 Access denied');
-		showTextAsImage('Access denied');
-	}
+	$path = $fotodir . $media['path'] . $media['name'];
 
-	if(!$mime = $extensions[getext($row['name'])]) {
-		showTextAsImage("Unknown extension");
-	}
+	output($path, $media['name']);
 
-	$path = $fotodir . $row['path'] . $row['name'];
-
-	if(!is_file($path)) {
-		header('HTTP/1.1 404 Not found');
-		showTextAsImage("Image not found");
-	}
-	header('Content-type: image/'. $mime);
-	header('Pragma: public');
-	header('Cache-Control: public');
-	header('Last-Modified: '. gmdate('D, d M Y H:i:s', $fmt = filemtime($path)) .' GMT');
-	header('Expires: '. gmdate('D, d M Y H:i:s', time()+60*60).' GMT');
-	header('Etag: '. md5($path . $fmt));
-	readfile($path);
 	require('footer.php');
 ?>

header.php

@@ -19,7 +19,7 @@
 	require('config.php');
 
 	/* Check the config */
-	if(!isset($fotodir, $cachedir, $domain, $absolute_url_path, $thumbs_per_row, $rows_of_thumbs, $imagick, $thumbnail_size, $foto_slider, $db_host, $db_user, $db_pass, $db_db, $log_queries)) {
+	if(!isset($fotodir, $cachedir, $domain, $absolute_url_path, $thumbs_per_row, $rows_of_thumbs, $foto_slider, $imagick, $thumbnail_size, $ffmpeg, $video_codecs, $video_resolutions, $db_host, $db_user, $db_pass, $db_db, $log_queries)) {
 		die("Missing settings");
 	}
 	if($log_queries)
@@ -86,20 +86,40 @@
 			template_assign('foto_slider_preload');
 			template_assign('foto_slider_timeout');
 		}
+
+		template_assign('video_codecs');
+		template_assign('video_resolutions');
 	}
 
 	/* Extensions */
-	$extensions = array(
-		'gif' => 'gif', 
-		'jpg' => 'jpeg', 
-		'jpeg' => 'jpeg', 
-		'png' => 'png', 
-		'gif' => 'gif', 
+	$photoExtensions = array(
+		'gif'  => 'gif',
+		'jpg'  => 'jpeg',
+		'jpeg' => 'jpeg',
+		'png'  => 'png',
 	);
 	if($imagick) {
-		$extensions['bmp'] = 'bmp';
+		$photoExtensions['bmp'] = 'bmp';
 	}
 
+	$videoExtensions = array(
+		'3gp'  => '3gpp',
+		'3g2'  => '3gpp2',
+		'avi'  => 'video/x-msvideo',
+		'm4v'  => 'x-m4v',
+		'mkv'  => 'x-matroska',
+		'mpeg' => 'mpeg',
+		'mpg'  => 'mpeg',
+		'mpe'  => 'mpeg',
+		'mp4'  => 'mp4',
+		'mov'  => 'quicktime',
+		'ogg'  => 'ogg',
+		'ogv'  => 'ogg',
+		'webm' => 'webm',
+		'wmv'  => 'x-ms-wmv',
+		// this should cover most (and should mostly be usable by ffmpeg)
+	);
+
 	/* Functions */
 	function show_template($tpl) {
 		global $_tplvars;
@@ -298,7 +318,7 @@ function getUnitByFullPath($fullpath, $flags = UNIT_BOTH) {
 		if($flags & UNIT_PHOTO) {
 			$res = sql_query("SELECT * FROM fa_photos WHERE path = %s AND name = %s", $path, $name);
 			if($photo = mysql_fetch_assoc($res)) {
-				$photo['type'] = 'photo';
+				// type already defined: 'photo' or 'video'
 				return $photo;
 			}
 		}

index.php

@@ -111,6 +111,9 @@
 	$mode = 'index';
 	template_assign('mode');
 
+	$type = 'album';
+	template_assign('type');
+
 	template_assign('albums');
 	template_assign('photos');
 	if($album != '') {

large.php

@@ -1,37 +1,19 @@
 <?php
 	require('header.php');
+	require('media.php');
 
-	if(!isset($_GET['foto'])) {
-		header('HTTP/1.1 400 Bad Request');
-		showTextAsImage("Missing parameter");
-	}
-	$row = getUnitByFullPath($_GET['foto'], UNIT_PHOTO);
-	if(!$row) {
-		header('HTTP/1.1 404 Not Found');
-		showTextAsImage('Photo not found');
-	}
+	$media = getUnit(UNIT_PHOTO);
 
-	if(!in_array($row['visibility'], getVisibleVisibilities()) || !isPathVisible($row['path'])) {
-		header('HTTP/1.1 403 Access denied');
-		showTextAsImage('Access denied');
+	if ($media['type'] == 'photo') {
+		$path = $cachedir . $media['path'] . $media['name'] .'_large';
+	} else {
+		if(!$mime = $videoExtensions[$_GET['codec']]) {
+			header('HTTP/1.1 400 Bad Request');
+		}
+		$path = $cachedir . $media['path'] . $media['name'] .'_'. intval($_GET['res']) .'p.'. $mime;
 	}
 
-	if(!$mime = $extensions[getext($row['name'])]) {
-		showTextAsImage("Unknown extension");
-	}
+	output($path, $media['name']);
 
-	$cachepath = $cachedir . $row['path'] . $row['name'] .'_large';
-
-	if(!is_file($cachepath)) {
-		header('HTTP/1.1 404 Not Found');
-		showTextAsImage("Image not cached", 600);
-	}
-	header('Content-type: image/'. $mime);
-	header('Pragma: public');
-	header('Cache-Control: public');
-	header('Last-Modified: '. gmdate('D, d M Y H:i:s', $fmt = filemtime($cachepath)) .' GMT');
-	header('Expires: '. gmdate('D, d M Y H:i:s', time()+60*60).' GMT');
-	header('Etag: '. md5($cachepath . $fmt));
-	readfile($cachepath);
 	require('footer.php');
 ?>

media.php

@@ -0,0 +1,44 @@
+<?php
+
+	/* Get current unit (album/photo/video),
+	   wrapper for getUnitByFullPath().
+	 */
+	function getUnit ($flags) {
+		if(!isset($_GET['foto'])) {
+			header('HTTP/1.1 400 Bad Request');
+			showTextAsImage("Missing parameter");
+		}
+		$row = getUnitByFullPath($_GET['foto'], $flags);
+		if(!$row) {
+			header('HTTP/1.1 404 Not Found');
+			showTextAsImage('Photo not found');
+		}
+
+		if(!in_array($row['visibility'], getVisibleVisibilities()) || !isPathVisible($row['path'])) {
+			header('HTTP/1.1 403 Access denied');
+			showTextAsImage('Access denied');
+		}
+		return $row;
+	}
+
+	/* Send a file to client.
+	   $path is the path of the file, $name is the original name of the file.
+	 */
+	function output ($path, $name=NULL) {
+		if(!is_file($path)) {
+			header('HTTP/1.1 404 Not Found');
+			showTextAsImage("Image not cached", 600);
+		}
+
+		$mime = finfo_file(finfo_open(), $path, FILEINFO_MIME_TYPE);
+		// hack, as long as webm isn't supported by the magic database, this is needed
+		if (isset($_GET['codec']) && $_GET['codec'] == 'webm') {
+			$mime = 'video/webm';
+		}
+
+		if ($name)
+			// send real filename instead of php file name
+			header('Content-disposition: inline; filename='. $name);
+		header('Content-type: '. $mime);
+		header('X-Sendfile: '. $path);
+	}

script.js

@@ -0,0 +1,67 @@
+'use strict';
+function slider_next() {
+	location.href = next;
+}
+
+function slider_preload() {
+	var el=document.createElement('img');
+	el.src= preload;
+	el.style.display = 'none';
+	el.alt = 'Fotoslider Preloader';
+	document.body.appendChild(el);
+}
+
+// apply change in resolution to <video>
+function updateResolution () {
+	var resolution = document.getElementById('resolution').value;
+	localStorage.videoResolution = resolution;
+	var video      = document.getElementById('video');
+	var codec = null;
+	for (var i=0; i<codecs.length; i++) {
+		if (video.canPlayType('video/'+codecs[i])) {
+			codec = codecs[i];
+		}
+	}
+	if (!codec) {
+		// problem! Just choose the first. It probably won't play anyway.
+		codec = codecs[0];
+	}
+	// workaround for bug in Chrome on Linux (mp4 doesn't play but is still advertized to play)
+	if (video.canPlayType('video/webm') && navigator.userAgent.indexOf('Linux') && navigator.userAgent.indexOf('Chrome') && codecs.indexOf('webm') != -1) {
+		codec = 'webm';
+	}
+	// all browsers supporting <video> support querySelector
+	var src = document.querySelector('source[type="video/'+codec+'"][data-resolution="'+resolution+'"]').src;
+	var position = video.currentTime;
+	var playing  = !video.paused;
+	video.src = src;
+	video.addEventListener('loadedmetadata', function () {
+		video.currentTime = position;
+		if (playing)
+			video.play();
+	}, false);
+}
+
+if (type == 'photo') {
+	if (sliding) {
+		setTimeout('slider_next()', slider_timeout*1000);
+	}
+} else if (type == 'video') {
+	window.addEventListener('DOMContentLoaded', function () {
+		var video = document.getElementById('video');
+		if (document.getElementById('resolution').value != localStorage.videoResolution) {
+			if (localStorage.videoResolution)
+				document.getElementById('resolution').value  = localStorage.videoResolution;
+			updateResolution();
+		}
+		if (sliding) {
+			video.addEventListener('ended', function () {
+				// don't jump to the next immediately
+				setTimeout(function () {
+					if (!video.paused) return;
+					slider_next();
+				}, 1000);
+			}, false);
+		}
+	}, false);
+}

templates/header.tpl

@@ -10,22 +10,20 @@
 		<![endif]-->
 		<link href="https://www.karpenoktem.nl/base/styles/common/" rel="stylesheet" type="text/css" />
 		<link type="text/css" rel="stylesheet" href="style.css" />
-<?PHP if($sliding) { ?>
 		<script type="text/javascript">
-			function slider_next() {
-				location.href="view.php?slide&foto=<?= urlencode($next) ?>";
-			}
-<?PHP if($foto_slider_preload) { ?>
-			function slider_preload() {
-				var el=document.createElement('img');
-				el.src='foto.php?foto=<?= urlencode($next) ?>';
-				el.style.display='none';
-				el.alt='Fotoslider Preloader';
-				document.body.appendChild(el);
-			}
-<?PHP } ?>
-			setTimeout('slider_next()', <?= $foto_slider_timeout*1000 ?>);
+			var sliding = <?= $sliding ? 'true' : 'false' ?>;
+<?php if ($sliding) { ?>
+			var next    = "view.php?slide&foto=<?= urlencode($next) ?>";
+<?php   if ($foto_slider_preload) { ?>
+			var preload = 'foto.php?foto=<?= urlencode($next) ?>';
+<?php   } ?>
+			var slider_timeout = <?= $foto_slider_timeout ?>;
+<?php } ?>
+			var type    = '<?= $type ?>';
+			var codecs  = <?= json_encode($video_codecs) ?>;
 		</script>
+		<script type="text/javascript" src="script.js"></script>
+<?PHP if($sliding) { ?>
 		<noscript>
 			<meta http-equiv="refresh" content="<?= $foto_slider_timeout ?>; url=view.php?slide&foto=<?= urlencode($next) ?>">
 		</noscript>