Add webcam componts to file block

cortezaproject · Jan 24, 2025 · b3a6bf0 · b3a6bf0
1 parent 8e599e8
commit b3a6bf0
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 19 deletions.
diff --git a/client/web/compose/src/components/ModuleFields/Editor/File.vue b/client/web/compose/src/components/ModuleFields/Editor/File.vue
@@ -44,7 +44,7 @@
       />
 
       <c-webcam-button
-        :webcam-enabled="field.options.enableWebcam"
+        v-if="field.options.enableWebcam"
         @openWebcamModal="openWebCamModal"
       >
         <template #camera-icon>
@@ -71,7 +71,8 @@
       :modal-title="$t('editor.file.webcam.title')"
       :cancel-button-label="$t('editor.file.webcam.buttons.cancel')"
       :confirm-button-label="$t('editor.file.webcam.buttons.confirm')"
-      :capture-button-label="$t('editor.file.webcam.buttons.capture') "
+      :capture-button-label="$t('editor.file.webcam.buttons.capture')"
+      :camera-error-message="$t('editor.file.webcam.errors.camera')"
     />
     <errors :errors="errors" />
   </b-form-group>

diff --git a/client/web/compose/src/components/PageBlocks/FileConfigurator.vue b/client/web/compose/src/components/PageBlocks/FileConfigurator.vue
@@ -36,13 +36,27 @@
         {{ $t('kind.file.view.enableDownload') }}
       </b-form-checkbox>
     </b-form-group>
+    <div class="d-flex justify-content-between gap-1">
+      <uploader
+        :endpoint="endpoint"
+        :max-filesize="$s('compose.Page.Attachments.MaxSize', 100)"
+        :accepted-files="$s('compose.Page.Attachments.Mimetypes', ['*/*'])"
+        class="flex-grow-1"
+        @uploaded="appendAttachment"
+      />
+
+      <c-webcam-button
+        @openWebcamModal="openWebCamModal"
+      >
+        <template #camera-icon>
+          <font-awesome-icon
+            class="text-primary"
+            :icon="['fas', 'camera']"
+          />
+        </template>
+      </c-webcam-button>
+    </div>
 
-    <uploader
-      :endpoint="endpoint"
-      :max-filesize="$s('compose.Page.Attachments.MaxSize', 100)"
-      :accepted-files="$s('compose.Page.Attachments.Mimetypes', ['*/*'])"
-      @uploaded="appendAttachment"
-    />
     <list-loader
       kind="page"
       enable-delete
@@ -52,6 +66,15 @@
       class="mt-2"
     />
 
+    <c-webcam-modal
+      ref="webcam"
+      :modal-title="$t('general:editor.file.webcam.title')"
+      :cancel-button-label="$t('general:editor.file.webcam.buttons.cancel')"
+      :confirm-button-label="$t('general:editor.file.webcam.buttons.confirm')"
+      :capture-button-label="$t('general:editor.file.webcam.buttons.capture')"
+      :camera-error-message="$t('general:editor.file.webcam.errors.camera')"
+    />
+
     <template v-if="enablePreviewStyling">
       <hr>
 
@@ -239,6 +262,10 @@ export default {
     appendAttachment ({ attachmentID } = {}) {
       this.options.attachments.push(attachmentID)
     },
+
+    openWebCamModal () {
+      this.$refs.webcam.$refs.modal.show()
+    },
   },
 }
 </script>
diff --git a/lib/vue/src/components/webcam/CWebcamButton.vue b/lib/vue/src/components/webcam/CWebcamButton.vue
@@ -1,6 +1,5 @@
 <template>
   <b-button
-    v-if="webcamEnabled"
     variant="light"
     class="d-flex align-items-center"
     @click.prevent="$emit('openWebcamModal')"
@@ -12,12 +11,5 @@
 <script>
 export default {
   name: 'CWebcamButton',
-
-  props: {
-    webcamEnabled: {
-      type: Boolean,
-      required: true,
-    },
-  },
 }
 </script>
diff --git a/lib/vue/src/components/webcam/CWebcamModal.vue b/lib/vue/src/components/webcam/CWebcamModal.vue
@@ -4,14 +4,21 @@
     size="lg"
     centered
     :title="modalTitle"
-    body-class="d-flex flex-column align-items-center"
+    :body-class="processingWebcam ? 'd-flex flex-column align-items-center' : 'p-0'"
     @show="initializeWebcam"
   >
     <b-spinner
       v-show="processingWebcam"
       variant="primary"
     />
 
+    <div
+      v-if="showErrorMessage"
+      class="bg-danger rounded p-2 m-2 text-white"
+    >
+      {{ cameraErrorMessage }}
+    </div>
+
     <div
       v-show="!processingWebcam"
       class="embed-responsive embed-responsive-4by3"
@@ -32,6 +39,7 @@
         </b-button>
 
         <b-button
+          :disabled="processingWebcam"
           variant="primary"
           @click="() => (hasCapturedImage ? uploadCapturedImage() : capturePhoto())"
         >
@@ -65,6 +73,10 @@ export default {
       type: String,
       required: true,
     },
+    cameraErrorMessage: {
+      type: String,
+      required: true,
+    },
   },
 
   data () {
@@ -74,6 +86,7 @@ export default {
       capturedImage: null,
       hasCapturedImage: false,
       processingWebcam: true,
+      showErrorMessage: false,
     }
   },
 
@@ -86,15 +99,24 @@ export default {
 
     startWebcam () {
       // Get access to the camera
-      navigator.mediaDevices.getUserMedia({ video: true, audio: true })
+      navigator.mediaDevices.getUserMedia({
+        video: {
+          facingMode: 'user',
+        },
+      })
         .then(stream => {
+          this.showErrorMessage = false
+
           this.stream = stream
           this.$refs.video.srcObject = stream
 
           this.processingWebcam = false
         })
         .catch(err => {
-          console.error('Error accessing the camera: ' + err)
+          console.error('Error accessing the camera:', err)
+
+          this.showErrorMessage = true
+          this.processingWebcam = false
         })
     },
 

diff --git a/locale/en/corteza-webapp-compose/general.yaml b/locale/en/corteza-webapp-compose/general.yaml
@@ -185,6 +185,8 @@ editor:
         cancel: Cancel
         capture: Capture photo
         confirm: Upload photo
+      errors: 
+        camera: Unable to access the camera. Please make sure you have granted camera permissions.
 record:
   unsavedChanges:  Unsaved changes will be lost. Do you wish to close the record?