From 30a69fae132d6c12e2fac8a7b4b0f61d2979d698 Mon Sep 17 00:00:00 2001
From: yflory <yann.flory@xwiki.com>
Date: Tue, 24 Oct 2017 12:26:04 +0200
Subject: [PATCH] Add thumbnails for videos
---
www/common/common-file.js | 2 +-
www/common/common-thumbnail.js | 38 +++++++++++++++++++++++++-------
www/common/sframe-common-file.js | 2 +-
3 files changed, 32 insertions(+), 10 deletions(-)
diff --git a/www/common/common-file.js b/www/common/common-file.js
index 97705e556..73a58cc50 100644
--- a/www/common/common-file.js
+++ b/www/common/common-file.js
@@ -296,7 +296,7 @@ define([
if (!Thumb.isSupportedType(file.type)) { return finish(); }
// make a resized thumbnail from the image..
- Thumb.fromImageBlob(file, function (e, thumb_blob) {
+ Thumb.fromBlob(file, function (e, thumb_blob) {
if (e) { console.error(e); }
if (!thumb_blob) { return finish(); }
diff --git a/www/common/common-thumbnail.js b/www/common/common-thumbnail.js
index f46d83b24..049273b50 100644
--- a/www/common/common-thumbnail.js
+++ b/www/common/common-thumbnail.js
@@ -10,11 +10,14 @@ define([
'image/png',
'image/jpeg',
'image/jpg',
- 'image/gif', // TODO confirm this is true
+ 'image/gif',
+ 'video/'
];
Thumb.isSupportedType = function (type) {
- return supportedTypes.indexOf(type) !== -1;
+ return supportedTypes.some(function (t) {
+ return type.indexOf(t) !== -1;
+ });
};
// create thumbnail image from metadata
@@ -38,9 +41,9 @@ define([
}
};
- var getResizedDimensions = function (img) {
- var h = img.height;
- var w = img.width;
+ var getResizedDimensions = function (img, type) {
+ var h = type === 'video' ? img.videoHeight : img.height;
+ var w = type === 'video' ? img.videoWidth : img.width;
var dim = Thumb.dimension;
// if the image is too small, don't bother making a thumbnail
@@ -73,9 +76,8 @@ define([
// assumes that your canvas is square
// nodeback returning blob
- Thumb.fromCanvas = Thumb.fromImage = function (canvas, cb) {
+ Thumb.fromCanvas = Thumb.fromImage = function (canvas, D, cb) {
var c2 = document.createElement('canvas');
- var D = getResizedDimensions(canvas);
if (!D) { return void cb('TOO_SMALL'); }
c2.width = Thumb.dimension;
@@ -93,7 +95,8 @@ define([
var img = new Image();
img.onload = function () {
- Thumb.fromImage(img, function (err, t) {
+ var D = getResizedDimensions(img, 'image');
+ Thumb.fromImage(img, D, function (err, t) {
if (err === 'TOO_SMALL') { return void cb(void 0, blob); }
cb(err, t);
});
@@ -103,6 +106,25 @@ define([
};
img.src = url;
};
+ Thumb.fromVideoBlob = function (blob, cb) {
+ var url = URL.createObjectURL(blob);
+ var video = document.createElement("VIDEO");
+
+ video.src = url;
+ video.addEventListener('loadedmetadata', function() {
+ video.currentTime = Number(Math.floor(Math.min(video.duration/10, 5)));
+ video.addEventListener('loadeddata', function() {
+ var D = getResizedDimensions(video, 'video');
+ Thumb.fromCanvas(video, D, cb);
+ });
+ });
+ };
+ Thumb.fromBlob = function (blob, cb) {
+ if (blob.type.indexOf('video/') !== -1) {
+ return void Thumb.fromVideoBlob(blob, cb);
+ }
+ Thumb.fromImageBlob(blob, cb);
+ };
Thumb.fromVideo = function (video, cb) {
cb = cb; // WIP
diff --git a/www/common/sframe-common-file.js b/www/common/sframe-common-file.js
index b4e167690..724c13349 100644
--- a/www/common/sframe-common-file.js
+++ b/www/common/sframe-common-file.js
@@ -247,7 +247,7 @@ define([
if (!Thumb.isSupportedType(file.type)) { return finish(); }
// make a resized thumbnail from the image..
- Thumb.fromImageBlob(file, function (e, thumb_blob) {
+ Thumb.fromBlob(file, function (e, thumb_blob) {
if (e) { console.error(e); }
if (!thumb_blob) { return finish(); }