Fix #1041 Keep video aspect ratio when extracting thumbnail using canva

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

@@ -124,7 +124,19 @@
             <div class="PNB frame_video">
 
               {% set previewHtml5 = record.getSubdfefByDeviceAndMime(constant('\\databox_subdef::DEVICE_SCREEN'), ['video/ogg', 'video/mp4', 'video/webm']) %}
-              <video id="thumb_video" controls="" preload="auto">
+              {% set dataW = constant('media_subdef::TC_DATA_WIDTH') %}
+              {% set dataH = constant('media_subdef::TC_DATA_HEIGHT') %}
+
+              {% set width = record.get_technical_infos(dataW) %}
+              {% set height = record.get_technical_infos(dataH) %}
+
+              {% if width and height %}
+                {% set ratio = (width / height) %}
+              {% else %}
+                 {% set ratio = 1 %}
+              {% endif %}
+
+              <video id="thumb_video" controls="" preload="auto" data-ratio="{{ ratio }}">
                 {% for subdef in previewHtml5 %}
                 <source type="{{ subdef.get_mime() }}" src="{{ subdef.get_url() }}" />
                 {% endfor %}
@@ -150,7 +162,7 @@
                 <img src="/skins/prod/ThumbExtractor/delete.png" />
               </div>
               <p id='thumb_info'>{% trans 'To take a screenshot click on camera' %}</p>
-              <canvas id="thumb_canvas" >
+              <canvas id="thumb_canvas">
               </canvas>
             </div>
             <div class="PNB action_bar_right">

www/prod/ThumbExtractor.js

@@ -6,12 +6,20 @@
    *****************/
   var Canva = function(domCanva){
     this.domCanva = domCanva;
-  }
+  };
 
   Canva.prototype = {
     resize : function(elementDomNode){
-      var h = elementDomNode.getHeight();
       var w = elementDomNode.getWidth();
+      var maxH = elementDomNode.getHeight();
+
+      var h = Math.round(w * (1 / elementDomNode.getAspectRatio()));
+
+      if (h > maxH) {
+          var h = maxH;
+          var w =  Math.round(h * elementDomNode.getAspectRatio());
+      }
+
 
       this.domCanva.setAttribute("width", w);
       this.domCanva.setAttribute("height", h);
@@ -20,7 +28,7 @@
     },
     getContext2d : function(){
 
-      if (this.domCanva.getContext == undefined)
+      if (this.domCanva.getContext === undefined)
       {
         return G_vmlCanvasManager
         .initElement(this.domCanva)
@@ -94,6 +102,7 @@
 
   var Video = function(domElement){
     Image.call(this, domElement);
+    this.aspectRatio = domElement.getAttribute('data-ratio') || 1;
   };
 
   Video.prototype = new Image();
@@ -101,6 +110,9 @@
   Video.prototype.getCurrentTime = function(){
     return Math.floor(this.domElement.currentTime);
   };
+  Video.prototype.getAspectRatio = function(){
+    return this.aspectRatio;
+  };
 
   /******************
  *  Cache Object
@@ -148,7 +160,7 @@
     this.timestamp = date.getTime();
     this.dataURI = canva.extractImage();
     this.videoTime = video.getCurrentTime();
-  }
+  };
 
   ScreenShot.prototype = {
     getId:function(){

www/skins/prod/000000/prodcolor.css

@@ -3732,7 +3732,7 @@ dans l'onglet thesaurus : arbres, menus contextuels
 #thumbExtractor .main_title {
     height: 15px;
     font-weight: bold;
-    top: 15px
+    top: 15px;
 }
 
 #thumbExtractor .part_title_left {
@@ -3771,11 +3771,18 @@ dans l'onglet thesaurus : arbres, menus contextuels
     border: 1px solid #1A1B1B;
     border-bottom: none;
     height: 210px;
+    line-height:210px;
     width: 320px;
     top: 50px;
     left: 380px;
     z-index: 2;
-    text-align: center
+    text-align: center;
+}
+
+#thumbExtractor #thumb_canvas {
+    vertical-align:middle;
+    display:inline-block;
+    line-height: 20px;
 }
 
 #thumbExtractor .action_bar_left {
@@ -3783,7 +3790,7 @@ dans l'onglet thesaurus : arbres, menus contextuels
     width: 320px;
     left: 10px;
     top: 260px;
-    background-color: #3B3D3B;
+    background-color:  #3B3D3B;
     border: 1px solid #3B3D3B;
     padding: 2px;
 }
@@ -3802,7 +3809,7 @@ dans l'onglet thesaurus : arbres, menus contextuels
 #thumbExtractor .action_bar_right .action_icon {
     padding-right: 10px;
     display: table-cell;
-    vertical-align: middle
+    vertical-align: middle;
 }
 
 #thumbExtractor .action_bar_right .action_icon:hover {
@@ -3816,6 +3823,7 @@ dans l'onglet thesaurus : arbres, menus contextuels
     bottom: 10px;
     right: 60px;
     display: none;
+    line-height: 20px;
 }
 
 #thumbExtractor #thumb_delete_button {
@@ -3824,7 +3832,8 @@ dans l'onglet thesaurus : arbres, menus contextuels
     position: absolute;
     bottom: 10px;
     right: 10px;
-    display: none
+    display: none;
+    line-height: 20px;
 }
 
 #thumbExtractor #thumb_delete_button,

www/skins/prod/959595/prodcolor.css

@@ -3915,6 +3915,7 @@ dans l'onglet thesaurus :  arbres, menus contextuels
     border: 1px solid #1A1B1B;
     border-bottom: none;
     height: 210px;
+    line-height:210px;
     width: 320px;
     top: 50px;
     left: 380px;
@@ -3922,6 +3923,12 @@ dans l'onglet thesaurus :  arbres, menus contextuels
     text-align: center;
 }
 
+#thumbExtractor #thumb_canvas {
+    vertical-align:middle;
+    display:inline-block;
+    line-height: 20px;
+}
+
 #thumbExtractor .action_bar_left {
     height: 20px;
     width: 320px;
@@ -3960,6 +3967,7 @@ dans l'onglet thesaurus :  arbres, menus contextuels
     bottom: 10px;
     right: 60px;
     display: none;
+    line-height: 20px;
 }
 
 #thumbExtractor #thumb_delete_button {
@@ -3969,6 +3977,7 @@ dans l'onglet thesaurus :  arbres, menus contextuels
     bottom: 10px;
     right: 10px;
     display: none;
+    line-height: 20px;
 }
 
 #thumbExtractor #thumb_delete_button,