Address UI review comments

cortezaproject · Jan 17, 2025 · 448edde · 448edde
1 parent 085e58a
commit 448edde
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 59 deletions.
diff --git a/client/web/compose/src/components/ModuleFields/Editor/File.vue b/client/web/compose/src/components/ModuleFields/Editor/File.vue
@@ -32,7 +32,7 @@
       </div>
     </template>
 
-    <div class="d-flex justify-content-between gap-3">
+    <div class="d-flex justify-content-between gap-1">
       <uploader
         ref="uploader"
         :endpoint="endpoint"
@@ -45,7 +45,7 @@
 
       <b-button
         variant="light"
-        class="d-flex align-items-center gap-1"
+        class="d-flex align-items-center"
         @click="openCamera"
       >
         <font-awesome-icon
@@ -68,27 +68,24 @@
     <b-modal
       ref="modal"
       size="lg"
-      modal-class="video-modal-width"
+      centered
       :title="$t('editor.file.webcam.title')"
-      ok-only
-      ok-title="Close"
       body-class="d-flex flex-column align-items-center"
-      @ok="closeCamera"
-      @show="initializeWebcam"
     >
-      <video
-        ref="video"
-        width="640"
-        height="480"
-        autoplay
-        style="display:none;"
-      />
-      <canvas
-        ref="canvas"
-        width="640"
-        height="480"
-        style="display:none;"
+      <b-spinner
+        v-show="processingWebcam"
+        variant="primary"
       />
+
+      <div
+        v-show="!processingWebcam"
+        class="embed-responsive embed-responsive-4by3"
+      >
+        <video
+          ref="video"
+          autoplay
+        />
+      </div>
       <template #modal-footer>
         <div class="d-flex align-items-center gap-2">
           <b-button
@@ -100,22 +97,12 @@
           </b-button>
 
           <b-button
-            v-if="!hasCapturedImage"
-            ref="captureButton"
-            style="display:none;"
             variant="primary"
-            @click="capturePhoto"
+            @click="() => (hasCapturedImage ? uploadCapturedImage() : capturePhoto())"
           >
-            {{ $t('editor.file.webcam.buttons.capture') }}
-          </b-button>
-          <b-button
-            v-if="hasCapturedImage"
-            ref="uploadButton"
-            variant="primary"
-            style="display:none;"
-            @click="uploadCapturedImage"
-          >
-            {{ $t('editor.file.webcam.buttons.confirm') }}
+            {{ hasCapturedImage
+              ? $t('editor.file.webcam.buttons.confirm')
+              : $t('editor.file.webcam.buttons.capture') }}
           </b-button>
         </div>
       </template>
@@ -144,10 +131,10 @@ export default {
   data () {
     return {
       video: null,
-      canvas: null,
       stream: null,
       capturedImage: null,
       hasCapturedImage: false,
+      processingWebcam: true,
     }
   },
 
@@ -215,12 +202,6 @@ export default {
     async initializeWebcam () {
       await this.$nextTick()
 
-      this.video = this.$refs.video
-      this.canvas = this.$refs.canvas
-      this.captureButton = this.$refs.captureButton
-      this.uploadButton = this.$refs.uploadButton
-      this.closeButton = this.$refs.closeButton
-
       this.startWebcam()
     },
 
@@ -229,15 +210,10 @@ export default {
       navigator.mediaDevices.getUserMedia({ video: true })
         .then(stream => {
           this.stream = stream
-          this.video.srcObject = stream
-          this.video.style.display = 'block'
-          this.closeButton.style.display = 'inline-block'
-
-          if (this.hasCapturedImage) {
-            this.uploadButton.style.display = 'inline-block'
-          } else {
-            this.captureButton.style.display = 'inline-block'
-          }
+          this.$refs.video.srcObject = stream
+          this.$refs.video.style.display = 'block'
+
+          this.processingWebcam = false
         })
         .catch(err => {
           console.error('Error accessing the camera: ' + err)
@@ -246,6 +222,8 @@ export default {
 
     openCamera () {
       this.$refs.modal.show()
+
+      this.initializeWebcam()
     },
     capturePhoto () {
       const video = this.$refs.video
@@ -265,7 +243,8 @@ export default {
         fetch(this.capturedImage)
           .then(res => res.blob())
           .then(blob => {
-            const file = new File([blob], 'webcam-image.jpg', { type: 'image/jpeg' })
+            const imageSuffix = new Date().toISOString().replace(/[:.]/g, '-')
+            const file = new File([blob], `webcam-image-${imageSuffix}.jpg`, { type: 'image/jpeg' })
 
             const uploader = this.$refs.uploader
             uploader.$refs.dropzone.addFile(file)
@@ -294,10 +273,3 @@ export default {
   },
 }
 </script>
-
-<style>
-.video-modal-width .modal-dialog {
-  max-width: 700px;
-  width: 100%;
-}
-</style>
diff --git a/locale/en/corteza-webapp-compose/general.yaml b/locale/en/corteza-webapp-compose/general.yaml
@@ -180,11 +180,11 @@ editor:
   unsavedChanges:  Unsaved changes will be lost. Do you wish to leave the page?
   file:
     webcam:
-      title: Capture image
+      title: Capture Photo
       buttons:
         cancel: Cancel
         capture: Capture photo
-        confirm: Confirm
+        confirm: Upload photo
 record:
   unsavedChanges:  Unsaved changes will be lost. Do you wish to close the record?