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.61113.55569.43315</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>1585816780.79</float>
+                              <float>1585815950.8</float>
                               <string>UTC</string>
                             </tuple>
                           </state>

bt5/erp5_document_scanner/PathTemplateItem/web_page_module/scanner_gadget_document_scanner_js.js

@@ -191,10 +191,9 @@
         guides: true,
         center: true,
         background: false,
-        minContainerWidth: 1,
-        minContainerHeight: 1,
-        responsive: true,
-        restore: true,
+        minContainerWidth: 0,
+        minContainerHeight: 0,
+        responsive: false,
         // Avoid any cropper calculation or guessing
         scalable: false,
         rotatable: false,
@@ -430,11 +429,14 @@
           text: result_list[1][0]
         }));
 
-        button_list.push(
-          domsugar('button', {type: 'button',
-                              'class': 'auto-crop-btn ui-icon-fast-forward ui-btn-icon-left',
-                              text: result_list[1][3]
-                             }));
+        if (gadget.state.is_cropper_size_confirmed) {
+          button_list.push(
+            domsugar('button', {type: 'button',
+                                'class': 'auto-crop-btn ui-icon-fast-forward ui-btn-icon-left',
+                                text: result_list[1][3]
+                               })
+          );
+        }
 
         div = domsugar('div', {'class': 'camera'}, [
           domsugar('div', {'class': 'camera-header'}, [
@@ -720,9 +722,7 @@
               domsugar('label', {'class': 'page-number', text: gadget.state.page + 1})
             ])
           ]),
-          domsugar('div', {'class': 'img-container'}, [
-            domsugar('img', {src: gadget.state['blob_url_' + gadget.state.page]})
-          ]),
+          domsugar('img', {src: gadget.state['blob_url_' + gadget.state.page]}),
           // XXX TODO: why is the button rendering different from the other pages?
           domsugar('div', {'class': 'edit-picture'}, button_list),
           result_list[1]
@@ -742,7 +742,8 @@
       preferred_cropped_canvas_data: gadget.cropper.getData(),
       display_step: 'display_video',
       page: gadget.state.page + 1,
-      page_count: gadget.state.page_count + 1
+      page_count: gadget.state.page_count + 1,
+      is_cropper_size_confirmed: true
     };
     // Keep image date, as user may need to display it again
     state_dict['blob_canvas_' + gadget.state.page_count] = canvas;
@@ -788,7 +789,8 @@
       display_step: 'display_video',
       page: 1,
       page_count: 0,
-      camera_list: []
+      camera_list: [],
+      is_cropper_size_confirmed: false
     })
     .declareMethod('render', function (options) {
       // This method is called during the ERP5 form rendering

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.61109.60561.44919</string> </value>
                   </item>
                   <item>
                       <key> <string>state</string> </key>
@@ -262,7 +262,7 @@
                           </tuple>
                           <state>
                             <tuple>
-                              <float>1585846471.58</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 {