erp5_document_scanner: unify video and cropper rendering

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;

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.60019.31334.2372</string> </value>
+                      <value> <string>982.60162.8290.29303</string> </value>
                   </item>
                   <item>
                       <key> <string>state</string> </key>
@@ -262,7 +262,7 @@
                           </tuple>
                           <state>
                             <tuple>
-                              <float>1585753245.18</float>
+                              <float>1585815950.8</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: false,
         // 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.59651.45192.29798</string> </value>
+                      <value> <string>982.61109.60561.44919</string> </value>
                   </item>
                   <item>
                       <key> <string>state</string> </key>
@@ -262,7 +262,7 @@
                           </tuple>
                           <state>
                             <tuple>
-                              <float>1585728228.5</float>
+                              <float>1585815745.95</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 {