erp5_document_scanner: unify video, cropper and image layout

Limit the media height.

Patch cropperjs to force it rendering when resizing the window.

bt5/erp5_document_scanner/PathTemplateItem/web_page_module/scanner_gadget_document_scanner_css.css

@@ -15,13 +15,9 @@ div[data-gadget-url$="gadget_document_scanner.html"] .camera-output,
 div[data-gadget-url$="gadget_document_scanner.html"] .canvas {
   max-width: 100%;
   width: auto;
-  max-height: 500px;
   filter: brightness(1);
   text-align: center;
 }
-div[data-gadget-url$="gadget_document_scanner.html"] .camera-input {
-  min-height: 360px;
-}
 div[data-gadget-url$="gadget_document_scanner.html"] .page-number {
   display: inline;
 }
@@ -98,9 +94,23 @@ div[data-gadget-url$="gadget_document_scanner.html"] .new-btn {
   width: calc(6em + 1px);
   height: calc(6em + 1px);
 }
-div[data-gadget-url$="gadget_document_scanner.html"] .img-container {
+div[data-gadget-url$="gadget_document_scanner.html"] .review-img-container {
+  height: 70vh;
+}
+div[data-gadget-url$="gadget_document_scanner.html"] .review-img-container img {
+  max-height: 100%;
+}
+div[data-gadget-url$="gadget_document_scanner.html"] .img-container,
+div[data-gadget-url$="gadget_document_scanner.html"] .camera-input {
   /* Never limit the container height here */
-  max-width: 100%;
+  position: relative;
+  width: 100%;
+}
+div[data-gadget-url$="gadget_document_scanner.html"] .img-container img,
+div[data-gadget-url$="gadget_document_scanner.html"] .camera-input img,
+div[data-gadget-url$="gadget_document_scanner.html"] .img-container video,
+div[data-gadget-url$="gadget_document_scanner.html"] .camera-input video {
+  height: 70vh;
 }
 div[data-gadget-url$="gadget_document_scanner.html"] .btn-thumbnail:before {
   color: #000;

bt5/erp5_document_scanner/PathTemplateItem/web_page_module/scanner_gadget_document_scanner_css.xml

@@ -244,7 +244,7 @@
                   </item>
                   <item>
                       <key> <string>serial</string> </key>
-                      <value> <string>982.61113.55569.43315</string> </value>
+                      <value> <string>983.1627.17749.2013</string> </value>
                   </item>
                   <item>
                       <key> <string>state</string> </key>
@@ -262,7 +262,7 @@
                           </tuple>
                           <state>
                             <tuple>
-                              <float>1585816780.79</float>
+                              <float>1586178991.43</float>
                               <string>UTC</string>
                             </tuple>
                           </state>

bt5/erp5_document_scanner/PathTemplateItem/web_page_module/scanner_gadget_document_scanner_js.js

@@ -186,14 +186,19 @@
     // creating Cropper is asynchronous
     return new RSVP.Promise(function (resolve, reject) {
       cropper = new Cropper(element, {
-        // restrict the minimum canvas size to fill fit the container
-        viewMode: 3,
+        // restrict the minimum canvas size to fit within the container
+        viewMode: 2,
+        guides: true,
+        center: true,
+        background: false,
+        minContainerWidth: 1,
+        minContainerHeight: 1,
+        responsive: true,
+        restore: true,
         // Avoid any cropper calculation or guessing
         scalable: false,
-        // Please, DON'T touch on rotatable and checkOrientation. Removing it,
-        // we will not be able to fix orientation before crop.
-        rotatable: true,
-        checkOrientation: true,
+        rotatable: false,
+        checkOrientation: false,
         zoomable: false,
         movable: false,
         data: data,
@@ -726,7 +731,7 @@
 
         div = domsugar('div', {'class': 'camera'}, [
           buildPageTitle(gadget, result_list[0][2]),
-          domsugar('div', {'class': 'img-container'}, [
+          domsugar('div', {'class': 'review-img-container'}, [
             domsugar('img', {src: gadget.state['blob_url_' + gadget.state.display_index]})
           ]),
           // XXX TODO: why is the button rendering different from the other pages?

bt5/erp5_document_scanner/PathTemplateItem/web_page_module/scanner_gadget_document_scanner_js.xml

@@ -244,7 +244,7 @@
                   </item>
                   <item>
                       <key> <string>serial</string> </key>
-                      <value> <string>982.62865.31516.35805</string> </value>
+                      <value> <string>982.62866.16795.56132</string> </value>
                   </item>
                   <item>
                       <key> <string>state</string> </key>
@@ -262,7 +262,7 @@
                           </tuple>
                           <state>
                             <tuple>
-                              <float>1585921095.31</float>
+                              <float>1585922429.02</float>
                               <string>UTC</string>
                             </tuple>
                           </state>

bt5/erp5_document_scanner/SkinTemplateItem/portal_skins/erp5_document_scanner/cropper.css.css

@@ -55,7 +55,8 @@
 }
 
 .cropper-modal {
-  background-color: #000;
+  /* Disable the black layer around the image
+  background-color: #000;*/
   opacity: 0.5;
 }
 

bt5/erp5_document_scanner/SkinTemplateItem/portal_skins/erp5_document_scanner/cropper.js.js

@@ -1793,38 +1793,31 @@
 
   var handlers = {
     resize: function resize() {
+      // Always render fully
+      // Otherwise, there are some display issue when increasing the window size (part of the canvas is hidden)
       var options = this.options,
           container = this.container,
           containerData = this.containerData;
       var minContainerWidth = Number(options.minContainerWidth) || MIN_CONTAINER_WIDTH;
       var minContainerHeight = Number(options.minContainerHeight) || MIN_CONTAINER_HEIGHT;
 
-      if (this.disabled || containerData.width <= minContainerWidth || containerData.height <= minContainerHeight) {
-        return;
-      }
-
       var ratio = container.offsetWidth / containerData.width; // Resize when width changed or height changed
 
-      if (ratio !== 1 || container.offsetHeight !== containerData.height) {
-        var canvasData;
-        var cropBoxData;
+      var canvasData;
+      var cropBoxData;
 
-        if (options.restore) {
-          canvasData = this.getCanvasData();
-          cropBoxData = this.getCropBoxData();
-        }
+      canvasData = this.getCanvasData();
+      cropBoxData = this.getCropBoxData();
 
-        this.render();
+      this.render();
+
+      this.setCanvasData(forEach(canvasData, function (n, i) {
+        canvasData[i] = n * ratio;
+      }));
+      this.setCropBoxData(forEach(cropBoxData, function (n, i) {
+        cropBoxData[i] = n * ratio;
+      }));
 
-        if (options.restore) {
-          this.setCanvasData(forEach(canvasData, function (n, i) {
-            canvasData[i] = n * ratio;
-          }));
-          this.setCropBoxData(forEach(cropBoxData, function (n, i) {
-            cropBoxData[i] = n * ratio;
-          }));
-        }
-      }
     },
     dblclick: function dblclick() {
       if (this.disabled || this.options.dragMode === DRAG_MODE_NONE) {

bt5/erp5_document_scanner/SkinTemplateItem/portal_skins/erp5_document_scanner/documentscannercss.less.txt

@@ -13,15 +13,10 @@ div[data-gadget-url$="gadget_document_scanner.html"] {
   .photo, .video, .camera-output, .canvas {
     max-width: 100%;
     width: auto;
-    max-height: 500px;
     filter: brightness(1);
     text-align: center;
   }
 
-  .camera-input {
-    min-height: 360px;
-  }
-
   .page-number {
     display: inline;
   }
@@ -99,9 +94,20 @@ div[data-gadget-url$="gadget_document_scanner.html"] {
     height: calc(6em + 1px);
   }
 
-  .img-container {
+  .review-img-container {
+      height: 70vh;
+      img {
+        max-height: 100%;
+      }
+  }
+
+  .img-container, .camera-input {
     /* Never limit the container height here */
-    max-width: 100%;
+    position: relative;
+    width: 100%;
+    img, video {
+      height: 70vh;
+    }
   }
 
   .btn-thumbnail:before {