hazza/Phraseanet
1
0
Fork 0
mirror of https://github.com/alchemy-fr/Phraseanet.git synced 2025-10-18 15:33:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added videos representation screenshots generation for all image subDefinitions

Browse Source
This commit is contained in:
Florian BLOUET
2015-06-11 18:44:28 +02:00
parent c746214fbb
commit a372148d5a
3 changed files with 156 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
lib/Alchemy/Phrasea/Controller/Prod/ToolsController.php
View File

@@ -251,6 +251,35 @@ class ToolsController extends Controller
try {
$record = new \record_adapter($this->app, $request->request->get('sbas_id'), $request->request->get('record_id'));
$subDef = $request->request->get('sub_def');
if( is_array($subDef)) {
foreach($subDef as $def) {
$subDefName = $def['name'];
$subDefDataUri = $def['src'];
$dataUri = Parser::parse($subDefDataUri);
$name = sprintf('extractor_thumb_%s', $record->get_serialize_key());
$fileName = sprintf('%s/%s.png', sys_get_temp_dir(), $name);
file_put_contents($fileName, $dataUri->getData());
$media = $this->app->getMediaFromUri($fileName);
$this->getSubDefinitionSubstituer()->substitute($record, $subDefName, $media);
$this->getDataboxLogger($record->get_databox())
->log($record, \Session_Logger::EVENT_SUBSTITUTE, $subDefName, '');
unset($media);
$this->getFilesystem()->remove($fileName);
}
$return['success'] = true;
}
// legacy usage:
$dataUri = Parser::parse($request->request->get('image', ''));
$name = sprintf('extractor_thumb_%s', $record->get_serialize_key());

54
templates/web/prod/actions/Tools/index.html.twig
View File

@@ -105,7 +105,7 @@
<div class="PNB part_title_left"></div>
<div class="PNB frame_video">
{% set outputFormats = record.getSubdfefByDeviceAndMime(null, ['image/jpeg', 'image/png']) %}
{% set previewHtml5 = record.getSubdfefByDeviceAndMime(constant('\\databox_subdef::DEVICE_SCREEN'), ['video/ogg', 'video/mp4', 'video/webm']) %}
{% set dataW = constant('media_subdef::TC_DATA_WIDTH') %}
{% set dataH = constant('media_subdef::TC_DATA_HEIGHT') %}
@@ -138,16 +138,22 @@
</div>
<div class="PNB frame_canva">
<div id="thumb_reset_button">
{#<div id="thumb_reset_button">
<img src="/skins/prod/ThumbExtractor/reset.png" />
</div>
</div>#}
<div id="thumb_delete_button">
<img src="/skins/prod/ThumbExtractor/delete.png" />
</div>
<p id='thumb_info'>{{ 'To take a screenshot click on camera' | trans }}</p>
<canvas id="thumb_canvas">
</canvas>
<canvas id="thumb_canvas"></canvas>
<div id="alt_canvas_container" style="position:absolute;overflow:hidden;top:-1200px;visibility: hidden; width:0!important;height:0!important">
{% for subdef in outputFormats %}
<canvas data-width="{{ subdef.get_width() }}" data-name="{{ subdef.get_name() }}" class="alt_canvas" id="{{ subdef.get_name() }}"></canvas>
{% endfor %}
</div>
</div>
{# disabled editing actions
<div class="PNB action_bar_right">
<div class="action_icon">
<img id="flipH" src="/skins/prod/ThumbExtractor/flip_horizontal.png"/>
@@ -162,6 +168,7 @@
<img id="contrast" src="/skins/prod/ThumbExtractor/contrast.png" />
</div>
</div>
#}
<div id="thumb_slider" class="PNB">
<div id="thumb_wrapper">
@@ -428,7 +435,9 @@ $(document).ready(function(){
//thumbExtractor
var ThumbEditor = new this.THUMB_EDITOR("thumb_video", "thumb_canvas");
var ThumbEditor = new this.THUMB_EDITOR("thumb_video", "thumb_canvas", {
altCanvas: $('#alt_canvas_container .alt_canvas')
});
if(ThumbEditor.isSupported()) {
$("#slider-brightness", scope).slider({
@@ -450,8 +459,7 @@ $(document).ready(function(){
}).slider( "option", "value", 1/3*100);
var sliderWrapper = $("#thumb_wrapper", scope);
$("#thumb_reset_button",scope).bind("click", function(){
/*$("#thumb_reset_button",scope).bind("click", function(){
var curImg = sliderWrapper.find(".selected");
var id = curImg.attr("id").split("_").pop();
var originalScreenShot = ThumbEditor.store.get(id);
@@ -463,7 +471,7 @@ $(document).ready(function(){
.attr("id", "#working_"+ id)
.attr("src", originalScreenShot.getDataURI())
.trigger("click");
});
});*/
$("#thumb_delete_button", scope).bind("click", function(){
var img = sliderWrapper.find(".selected");
@@ -482,7 +490,7 @@ $(document).ready(function(){
else
{
$(this).hide();
$("#thumb_reset_button",scope).hide();
//$("#thumb_reset_button",scope).hide();
$("#thumb_info", scope).show();
ThumbEditor.resetCanva();
}
@@ -540,13 +548,17 @@ $(document).ready(function(){
$('.selected', sliderWrapper).removeClass('selected');
$(this).addClass('selected');
ThumbEditor.copy($(this).get(0));
var $self = this;
var selectedScreenId = $self.getAttribute("id").split("_").pop();
var screenshots = ThumbEditor.store.get(selectedScreenId);
ThumbEditor.copy(screenshots.getDataURI(), screenshots.getAltScreenShots());
});
$("#thumb_camera_button", scope).bind("click", function(){
$("#thumb_info", scope).hide();
$("#thumb_delete_button", scope).show();
$("#thumb_reset_button",scope).show();
//$("#thumb_reset_button",scope).show();
var screenshot = ThumbEditor.screenshot();
var img = $("<img />");
@@ -573,7 +585,6 @@ $(document).ready(function(){
});
$("#thumb_validate_button", scope).bind("click", function(){
var thumbnail = $('.selected', sliderWrapper);
if(thumbnail.length === 0)
@@ -599,6 +610,21 @@ $(document).ready(function(){
var record_id = $("input[name=record_id]").val();
var sbas_id = $("input[name=sbas_id]").val();
var selectedScreenId = thumbnail.attr('id').split("_").pop();
var screenshots = ThumbEditor.store.get(selectedScreenId);
var screenData = screenshots.getAltScreenShots(),
subDefs = [];
for(var i = 0; i < screenData.length; i++ ) {
subDefs.push({
name: screenData[i].name,
src: screenData[i].dataURI
});
}
function disableConfirmButton(dialog){
dialog.getDomElement().closest('.ui-dialog').find(".ui-dialog-buttonpane button").filter(function() {
@@ -635,7 +661,7 @@ $(document).ready(function(){
type: "POST",
url: "/prod/tools/thumb-extractor/apply/",
data: {
image: $("#thumb_confirm img.selected").attr('src'),
sub_def: subDefs,
record_id : record_id,
sbas_id: sbas_id
},

99
www/skins/prod/ThumbExtractor.js
View File

@@ -9,21 +9,34 @@
};
Canva.prototype = {
resize: function (elementDomNode) {
resize: function (elementDomNode, forceWidth) {
var w = elementDomNode.getWidth();
var h = null;
var maxH = elementDomNode.getHeight();
var ratio = 1;
if ('' !== elementDomNode.getAspectRatio()) {
var ratio = parseFloat(elementDomNode.getAspectRatio());
ratio = parseFloat(elementDomNode.getAspectRatio());
var h = Math.round(w * (1 / ratio));
h = Math.round(w * (1 / ratio));
if (h > maxH) {
var h = maxH;
var w = Math.round(h * ratio);
h = maxH;
w = Math.round(h * ratio);
}
} else {
var h = maxH;
h = maxH;
}
if( forceWidth !== undefined ) {
w = parseInt(forceWidth, 10);
if (elementDomNode.getAspectRatio() !== '') {
h = Math.round(w * (1 / ratio));
} else {
h = maxH;
}
}
this.domCanva.setAttribute("width", w);
@@ -137,7 +150,8 @@
return this.datas[id];
},
remove: function (id) {
delete this.datas[id];
// never reuse same id
this.datas[id] = null;
},
getLength: function () {
var count = 0;
@@ -153,17 +167,34 @@
/******************
* Screenshot Object
******************/
var ScreenShot = function (id, canva, video) {
var ScreenShot = function (id, canva, video, altCanvas) {
var date = new Date();
var options = options || {};
canva.resize(video);
canva.copy(video);
// handle alternative canvas:
var altCanvas = altCanvas == undefined ? [] : altCanvas;
this.altScreenShots = [];
if( altCanvas.length > 0 ) {
for(var i = 0; i< altCanvas.length; i++) {
var canvaEl = altCanvas[i].el;
canvaEl.resize(video, altCanvas[i].width);
canvaEl.copy(video);
this.altScreenShots.push({
dataURI: canvaEl.extractImage(),
name: altCanvas[i].name
})
}
}
this.id = id;
this.timestamp = date.getTime();
this.dataURI = canva.extractImage();
this.videoTime = video.getCurrentTime();
};
ScreenShot.prototype = {
@@ -178,13 +209,16 @@
},
getVideoTime: function () {
return this.videoTime;
},
getAltScreenShots: function() {
return this.altScreenShots;
}
};
/**
* THUMB EDITOR
*/
var ThumbEditor = function (videoId, canvaId) {
var ThumbEditor = function (videoId, canvaId, outputOptions) {
var domElement = document.getElementById(videoId);
@@ -197,6 +231,23 @@
return document.getElementById(canvaId);
}
var outputOptions = outputOptions || {};
function setAltCanvas() {
var domElements = [],
altCanvas = outputOptions.altCanvas;
if( altCanvas.length > 0 ) {
for(var i = 0; i< altCanvas.length; i++) {
domElements.push({
el: new Canva(altCanvas[i]),
width: altCanvas[i].getAttribute('data-width'),
name: altCanvas[i].getAttribute('data-name')
} );
}
}
return domElements;
}
return {
isSupported: function () {
var elem = document.createElement('canvas');
@@ -208,7 +259,8 @@
var screenshot = new ScreenShot(
store.getLength() + 1,
new Canva(getCanva()),
editorVideo
editorVideo,
setAltCanvas()
);
store.set(screenshot.getId(), screenshot);
@@ -216,16 +268,39 @@
return screenshot;
},
store: store,
copy: function (elementDomNode) {
copy: function (mainSource, altSources) {
var elementDomNode = document.createElement('img');
elementDomNode.src = mainSource;
var element = new Image(elementDomNode);
var editorCanva = new Canva(getCanva());
var altEditorCanva = setAltCanvas();
editorCanva
.reset()
.resize(editorVideo)
.copy(element);
// handle alternative canvas:
if( altEditorCanva.length > 0 ) {
for(var i = 0; i< altEditorCanva.length; i++) {
var tmpEl = document.createElement('img');
tmpEl.src = altSources[i].dataURI;
var canvaEl = altEditorCanva[i].el;
canvaEl
.reset()
.resize(editorVideo, altEditorCanva[i].width)
.copy(new Image(tmpEl)); // @TODO: should copy the right stored image
}
}
},
getCanvaImage: function () {
var canva = new Canva(getCanva());
return canva.extractImage();
},
resetCanva: function () {