erp5_document_scanner: unify video and cropper rendering

erp5_document_scanner: try to bypass cropper resize issue

but doesn't seems good :/

bt5/erp5_document_scanner/PathTemplateItem/web_page_module/scanner_gadget_document_scanner_css.css

@@ -20,7 +20,7 @@ div[data-gadget-url$="gadget_document_scanner.html"] .canvas {
   text-align: center;
 }
 div[data-gadget-url$="gadget_document_scanner.html"] .camera-input {
-  min-height: 360px;
+  background-color: rgba(0, 0, 0, 0.5);
 }
 div[data-gadget-url$="gadget_document_scanner.html"] .page-number {
   display: inline;
@@ -100,7 +100,13 @@ div[data-gadget-url$="gadget_document_scanner.html"] .new-btn {
 }
 div[data-gadget-url$="gadget_document_scanner.html"] .img-container {
   /* Never limit the container height here */
+  position: relative;
+  width: 100%;
+  max-height: 500px;
+}
+div[data-gadget-url$="gadget_document_scanner.html"] .img-container img {
   max-width: 100%;
+  width: 100%;
 }
 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>982.61223.17950.60723</string> </value>
                   </item>
                   <item>
                       <key> <string>state</string> </key>
@@ -262,7 +262,7 @@
                           </tuple>
                           <state>
                             <tuple>
-                              <float>1585816780.79</float>
+                              <float>1585822646.11</float>
                               <string>UTC</string>
                             </tuple>
                           </state>

bt5/erp5_document_scanner/PathTemplateItem/web_page_module/scanner_gadget_document_scanner_js.js

@@ -186,14 +186,18 @@
     // 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: 0,
+        minContainerHeight: 0,
+        responsive: 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,

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.61614.28913.46660</string> </value>
+                      <value> <string>982.61167.48996.42035</string> </value>
                   </item>
                   <item>
                       <key> <string>state</string> </key>
@@ -262,7 +262,7 @@
                           </tuple>
                           <state>
                             <tuple>
-                              <float>1585846471.58</float>
+                              <float>1585821355.34</float>
                               <string>UTC</string>
                             </tuple>
                           </state>

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

@@ -19,7 +19,8 @@ div[data-gadget-url$="gadget_document_scanner.html"] {
   }
 
   .camera-input {
-    min-height: 360px;
+    // Mimic cropper background
+    background-color: rgba(0, 0, 0, 0.5);
   }
 
   .page-number {