markus/photofloat
1
0
Fork 0
Code Issues 1 Pull Requests Releases Wiki Activity

Add support for videos using ffmpeg for transcoding to webm format and HTML5 video tag.

Browse Source
This commit is contained in:
Jerome Charaoui
2013-12-20 22:40:25 -05:00
parent 9c8beb0cc5
commit 6f482f8f78
5 changed files with 194 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
web/css/000-controls.css
View File

@ -91,9 +91,14 @@ a:hover {
right: 0;
text-align: center;
}
#photo-box {
#photo-box, #video-box {
display: inline;
}
#video-box-inner {
position: absolute;
top: 50%;
width: 100%;
}
#photo-links {
background-color: #000000;
font-weight: bold;

5
web/index.html
View File

@ -21,6 +21,11 @@
<div id="metadata"></div>
</div>
</div>
<div id="video-box">
<div id="video-box-inner">
<video id="video" controls></video>
</div>
</div>
<a id="back">&lsaquo;</a>
<a id="next">&rsaquo;</a>

4
web/js/010-libphotofloat.js
View File

@ -144,6 +144,9 @@
suffix = size.toString();
return "cache/" + PhotoFloat.cachePath(PhotoFloat.photoHash(album, photo) + "_" + suffix + ".jpg");
};
PhotoFloat.videoPath = function(album, video) {
return "cache/" + PhotoFloat.cachePath(PhotoFloat.photoHash(album, video) + ".webm");
};
PhotoFloat.originalPhotoPath = function(album, photo) {
return "albums/" + album.path + "/" + photo.name;
};
@ -176,6 +179,7 @@
PhotoFloat.prototype.photoHash = PhotoFloat.photoHash;
PhotoFloat.prototype.albumHash = PhotoFloat.albumHash;
PhotoFloat.prototype.photoPath = PhotoFloat.photoPath;
PhotoFloat.prototype.videoPath = PhotoFloat.videoPath;
PhotoFloat.prototype.originalPhotoPath = PhotoFloat.originalPhotoPath;
PhotoFloat.prototype.trimExtension = PhotoFloat.trimExtension;
PhotoFloat.prototype.cleanHash = PhotoFloat.cleanHash;

55
web/js/011-display.js
View File

@ -145,6 +145,7 @@ $(document).ready(function() {
$("#album-view").removeClass("photo-view-container");
$("#subalbums").show();
$("#photo-view").hide();
$("#video")[0].pause()
}
setTimeout(scrollToThumb, 1);
}
@ -165,25 +166,43 @@ $(document).ready(function() {
image.css("height", "100%").css("width", "auto").css("position", "").css("bottom", "");
}
function showPhoto() {
var width, height, photoSrc, previousPhoto, nextPhoto, nextLink, text;
width = currentPhoto.size[0];
height = currentPhoto.size[1];
if (width > height) {
height = height / width * maxSize;
width = maxSize;
} else {
width = width / height * maxSize;
height = maxSize;
var width, height, photoSrc, videoSrc, previousPhoto, nextPhoto, nextLink, text;
if (currentPhoto.mediaType == "video") {
width = currentPhoto.size[0];
height = currentPhoto.size[1];
videoSrc = photoFloat.videoPath(currentAlbum, currentPhoto);
$("#video")
.attr("width", width).attr("height", height).attr("ratio", currentPhoto.size[0] / currentPhoto.size[1])
.attr("src", videoSrc)
.attr("alt", currentPhoto.name);
$("#video-box-inner").css('height', height + 'px').css('margin-top', - height / 2);
$("#photo-box").hide();
$("#video-box").show();
}
else {
width = currentPhoto.size[0];
height = currentPhoto.size[1];
if (width > height) {
height = height / width * maxSize;
width = maxSize;
} else {
width = width / height * maxSize;
height = maxSize;
}
$(window).unbind("resize", scaleImage);
photoSrc = photoFloat.photoPath(currentAlbum, currentPhoto, maxSize, false);
$("#photo")
.attr("width", width).attr("height", height).attr("ratio", currentPhoto.size[0] / currentPhoto.size[1])
.attr("src", photoSrc)
.attr("alt", currentPhoto.name)
.attr("title", currentPhoto.date)
.load(scaleImage);
$("head").append("<link rel=\"image_src\" href=\"" + photoSrc + "\" />");
$("#video")[0].pause()
$("#video-box").hide();
$("#photo-box").show();
}
$(window).unbind("resize", scaleImage);
photoSrc = photoFloat.photoPath(currentAlbum, currentPhoto, maxSize, false);
$("#photo")
.attr("width", width).attr("height", height).attr("ratio", currentPhoto.size[0] / currentPhoto.size[1])
.attr("src", photoSrc)
.attr("alt", currentPhoto.name)
.attr("title", currentPhoto.date)
.load(scaleImage);
$("head").append("<link rel=\"image_src\" href=\"" + photoSrc + "\" />");
previousPhoto = currentAlbum.photos[
(currentPhotoIndex - 1 < 0) ? (currentAlbum.photos.length - 1) : (currentPhotoIndex - 1)