Added videos representation screenshots generation for all image subDefinitions

lib/Alchemy/Phrasea/Controller/Prod/ToolsController.php

@@ -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());

templates/web/prod/actions/Tools/index.html.twig

@@ -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 id="thumb_canvas"></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
                     },

www/skins/prod/ThumbExtractor.js

@@ -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;
+                    h = maxH;
-                    var w = Math.round(h * ratio);
+                    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 () {