@yoobic/yobi 8.4.9 → 8.4.10

package/dist/collection/components/form/form-capture/form-capture.js

@@ -1,14 +1,14 @@
 import { MediaType, PictureSourceType } from '@awesome-cordova-plugins/camera';
 import { MediaCapture } from '@awesome-cordova-plugins/media-capture';
 import { StatusBar } from '@capacitor/status-bar';
-import { addFilePrefix, asyncWaterfall, audios, changeExtension, downloadFile, getAsyncExtraData, getFormCapturedFileSize, getMimeType, getSession, hasLargeFile, images, isAndroid, isAudio, isCloudinaryLink, isFile, isGif, isImage, isImageUrl, isIOS, isIphoneX, isLenovo, isNativeFilePath, isNativeMobile, isNullOrUndefined, isOffline, isPhotoEdited, isSafari, isUnsplashUrl, isVideo, isWeb, moveToImageDirectory, pipes, read, showActionSheet, showAlert, showContextMenu, showModal, showToast, translate, translateMulti, updatePathSessionId, videos } from '@shared/utils';
+import { addFilePrefix, asyncWaterfall, audios, changeExtension, downloadFile, getAsyncExtraData, getFormCapturedFileSize, getMimeType, getSession, hasLargeFile, images, isAndroid, isAudio, isCloudinaryLink, isFile, isGif, isImage, isImageUrl, isIOS, isIphoneX, isLenovo, isNativeFilePath, isNativeMobile, isNullOrUndefined, isOffline, isPhotoEdited, isSafari, isUnsplashUrl, isVideo, isWeb, pipes, read, showActionSheet, showAlert, showContextMenu, showModal, showToast, translate, translateMulti, updatePathSessionId, videos } from '@shared/utils';
 import { Build, Component, Element, Event, h, Host, Method, Prop, State, Watch } from '@stencil/core';
 import { assign, assignInWith, clone, compact, intersection, isArray, isNumber, isUndefined, keys } from 'lodash-es';
 import { getPicture, getVideo, getVideoDevices, importMultipleFromLibrary, showAudioRecorder } from '../../../utils/helpers/camera-helpers';
 import { getAppContext, querySelectorAllDeep, querySelectorDeep, showImageCropper, showPhotoEditor, showSlidesMedia } from '../../../utils/helpers/common-helpers';
 import { initArrayValue } from '../../../utils/helpers/form-helpers';
 import { setValidator, setValueAndValidateInput } from '../../../utils/helpers/form-input-helpers';
-import { shouldUseLowPerformanceCamera } from './form-capture-helper';
+import { processMediaPath, shouldUseLowPerformanceCamera } from './form-capture-helper';
 export class YooFormCaptureComponent {
   constructor() {
     this.extraData = {};
@@ -37,9 +37,15 @@ export class YooFormCaptureComponent {
     this.updateExtraData(extraData);
   }
   /** If there is index, the field is a multiphoto */
-  async setFieldValue(data) {
-    this.multiple ? this.value.push(data) : this.value = data;
-    setValueAndValidateInput(this.value, this);
+  async setFieldValue(index, data) {
+    if (index === undefined) {
+      setValueAndValidateInput(data, this);
+    }
+    else {
+      const newValue = this.value ? [...this.value] : [];
+      newValue[index] = data;
+      setValueAndValidateInput(newValue, this);
+    }
   }
   async stopImageRecognitionProcess(isCancelled = false) {
     this.imageRecoCancelled = isCancelled;
@@ -231,7 +237,7 @@ export class YooFormCaptureComponent {
   }
   allowCrop(file) {
     var _a;
-    return (((_a = this.cropperOptions) === null || _a === void 0 ? void 0 : _a.cropRatio) > 0 || this.showCropper) && isImage(file) && !isGif(file) && (!(typeof file === 'string' && isUnsplashUrl(file)) || isWeb(this.host));
+    return isWeb(this.host) && (((_a = this.cropperOptions) === null || _a === void 0 ? void 0 : _a.cropRatio) > 0 || this.showCropper) && isImage(file) && !isGif(file) && (!(typeof file === 'string' && isUnsplashUrl(file)) || isWeb(this.host));
   }
   removeAllCapture() {
     this.value = [];
@@ -259,7 +265,7 @@ export class YooFormCaptureComponent {
   }
   /** for webcam, choose which device to take photo/video */
   capture(device, index) {
-    var _a, _b;
+    var _a, _b, _c;
     let newIndex = index;
     if (index < 0) {
       newIndex = (_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
@@ -267,7 +273,7 @@ export class YooFormCaptureComponent {
     if (isNativeMobile()) {
       let newIndex = index;
       if (index < 0) {
-        if (this.value && this.value.length) {
+        if ((_c = this.value) === null || _c === void 0 ? void 0 : _c.length) {
           newIndex = this.value.length;
         }
         else {
@@ -291,33 +297,19 @@ export class YooFormCaptureComponent {
     }
   }
   async processMediaData(mediaData, index) {
-    if (mediaData === null || mediaData === void 0 ? void 0 : mediaData.includes('?')) {
-      mediaData = mediaData.substring(0, mediaData.indexOf('?'));
-    }
-    else if (mediaData && !isImageUrl(mediaData)) {
-      mediaData = addFilePrefix(mediaData);
-      if (!isAndroid() && ['cache', 'tmp'].includes(mediaData)) {
-        try {
-          mediaData = await moveToImageDirectory(mediaData, getSession().user ? getSession().user.disablePhotoOrientationAutoFix : false);
-        }
-        catch (err) {
-          throw new Error(err);
-        }
-      }
-    }
     try {
+      !isImageUrl(mediaData) && (mediaData = await processMediaPath(mediaData));
       if (this.shouldTagImage()) {
         const tag = await this.showPhotoTagDialog(mediaData);
         (tag === null || tag === void 0 ? void 0 : tag.data) && this.updateTagData(tag, index);
       }
-      await this.setFieldValue(mediaData);
+      await this.setFieldValue(index, mediaData);
       this.clearPhotoEdit(index);
       this.saveGeoloc && this.captureGeoloc(index);
     }
     catch (err) {
       throw new Error(err);
     }
-    return mediaData;
   }
   showPhotoTagDialog(imageSrc, value) {
     const imageTag = document.createElement('yoo-form-capture-tag-dialog');
@@ -325,7 +317,8 @@ export class YooFormCaptureComponent {
     imageTag.imageSrc = imageSrc;
     imageTag.value = value;
     imageTag.addEventListener('fetchData', (ev) => {
-      this.onFetchGridData(ev);
+      ev.stopPropagation();
+      this.fetchData.emit(ev.detail);
     });
     return showModal(imageTag, null, '', 'slideYEnterAnimation', 'slideYLeaveAnimation');
   }
@@ -379,7 +372,7 @@ export class YooFormCaptureComponent {
     });
   }
   async capturePhoto(useLibrary, index) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e;
     const quality = this.isImageRecognition ? 100 : 70;
     const sourceType = useLibrary ? PictureSourceType.PHOTOLIBRARY : PictureSourceType.CAMERA;
     const mediaType = this.type === 'video' ? MediaType.VIDEO : MediaType.PICTURE;
@@ -449,26 +442,22 @@ export class YooFormCaptureComponent {
       if (!res && this.showImageLoader) {
         this.showImageLoader = false;
       }
+      const newIndex = index < 0 ? ((_e = (_d = this.value) === null || _d === void 0 ? void 0 : _d.length) !== null && _e !== void 0 ? _e : 0) : index;
       const imagesData = Array.isArray(res) ? res : [res];
       const hasUnsplash = imagesData.some(d => isUnsplashUrl(d));
-      const processImage = async (imageData, index) => {
-        var _a;
+      const processImage = async (imageData, i) => {
         try {
-          let extractedData = (imageData === null || imageData === void 0 ? void 0 : imageData['data']) || (imageData === null || imageData === void 0 ? void 0 : imageData['path']) || (imageData === null || imageData === void 0 ? void 0 : imageData['fullPath']) || imageData;
-          if (!this.shouldTagImage()) {
-            const shouldOpenCropper = !hasUnsplash && imagesData.length === 1 && this.allowCrop(imageData);
-            const newIndex = Array.isArray(this.value) ? (_a = this.value) === null || _a === void 0 ? void 0 : _a.length : index;
-            if (shouldOpenCropper) {
-              extractedData = await this.onOpenCropper(imageData);
-            }
-            await this.processMediaData(extractedData, newIndex);
-          }
+          let extractedData = await processMediaPath((imageData === null || imageData === void 0 ? void 0 : imageData['data']) || (imageData === null || imageData === void 0 ? void 0 : imageData['path']) || (imageData === null || imageData === void 0 ? void 0 : imageData['fullPath']) || imageData);
+          const shouldOpenCropper = !hasUnsplash && imagesData.length === 1 && this.allowCrop(extractedData);
+          shouldOpenCropper && (extractedData = await this.onOpenCropper(imageData));
+          const updatingIndex = this.multiple ? newIndex + i : undefined;
+          await this.processMediaData(extractedData, updatingIndex);
         }
         catch (err) {
           this.showImageLoader = false;
         }
       };
-      await Promise.all(imagesData.map((data, index) => processImage(data, index)));
+      await asyncWaterfall(imagesData.map((data, i) => processImage(data, i)));
       this.showImageLoader = false;
     }
     catch (err) {
@@ -476,36 +465,29 @@ export class YooFormCaptureComponent {
       throw new Error(err);
     }
   }
-  captureVideo(index) {
-    const options = { limit: 1, duration: this.duration || 60, saveToPhotoAlbum: true };
-    return getVideo(options).then((files) => {
-      this.processMediaData(this.fixPathAndGetValue(files), index);
-    });
+  async captureVideo(index) {
+    const files = await getVideo({ limit: 1, duration: this.duration || 60, saveToPhotoAlbum: true });
+    await Promise.all(files === null || files === void 0 ? void 0 : files.map(file => this.processMediaData(this.fixPathAndGetValue(file), index)));
   }
   async captureAudio(index) {
-    if (isAndroid()) {
-      const ret = await showAudioRecorder(this.host);
-      if (ret && ret.data) {
-        return this.processMediaData(ret.data, index);
+    try {
+      if (isAndroid()) {
+        const { data } = await showAudioRecorder(this.host);
+        this.processMediaData(data, index);
+      }
+      else {
+        const files = await MediaCapture.captureAudio({ limit: 1, duration: this.duration || 60 });
+        await Promise.all(files === null || files === void 0 ? void 0 : files.map(file => this.processMediaData(this.fixPathAndGetValue(file), index)));
       }
     }
-    else {
-      const options = { limit: 1, duration: this.duration || 60 };
-      return MediaCapture.captureAudio(options)
-        .then((files) => {
-        this.processMediaData(this.fixPathAndGetValue(files), index);
-      })
-        .catch((err) => {
-        if (err.code !== 3) {
-          this.noAudio();
-        }
-      });
+    catch (err) {
+      if (err.code !== 3) {
+        showAlert(translate('AUDIO'), [translate('YOOBICOK')], translate('NOAUDIO'));
+      }
+      throw new Error(err);
     }
   }
-  noAudio() {
-    showAlert(translate('AUDIO'), [translate('YOOBICOK')], translate('NOAUDIO'));
-  }
-  fixSessionIdPath() {
+  async fixSessionIdPath() {
     if (isIOS() && isNativeMobile() && this.value && typeof this.value !== 'undefined') {
       if (Array.isArray(this.value)) {
         const newValue = [];
@@ -527,11 +509,8 @@ export class YooFormCaptureComponent {
       }
     }
   }
-  fixPathAndGetValue(files) {
-    if ((files === null || files === void 0 ? void 0 : files.length) > 0) {
-      return addFilePrefix(files[0].fullPath);
-    }
-    return '';
+  fixPathAndGetValue(file) {
+    return addFilePrefix(file === null || file === void 0 ? void 0 : file.fullPath) || '';
   }
   captureFromWebcam(device, index) {
     let webcam = document.createElement('yoo-form-capture-webcam-dialog');
@@ -542,7 +521,7 @@ export class YooFormCaptureComponent {
           this.showPhotoTagDialog(ret.data).then((tag) => {
             if (!isNullOrUndefined(tag === null || tag === void 0 ? void 0 : tag.data)) {
               this.updateTagData(tag, index);
-              this.setFieldValue(ret.data);
+              this.setFieldValue(index, ret.data);
               this.clearPhotoEdit(index);
               if (this.saveGeoloc) {
                 this.captureGeoloc();
@@ -551,7 +530,7 @@ export class YooFormCaptureComponent {
           });
         }
         else {
-          this.setFieldValue(ret.data);
+          this.setFieldValue(index, ret.data);
           this.clearPhotoEdit(index);
           if (this.saveGeoloc) {
             this.captureGeoloc();
@@ -651,7 +630,7 @@ export class YooFormCaptureComponent {
         }
         else {
           if (this.multiple && (newImages === null || newImages === void 0 ? void 0 : newImages.length) > 0) {
-            this.setFieldValue(newImages);
+            this.setFieldValue(index, newImages);
           }
           else if (newImages === null || newImages === void 0 ? void 0 : newImages.length) {
             this.value = newImages[0];
@@ -662,9 +641,10 @@ export class YooFormCaptureComponent {
     });
   }
   captureGeoloc(index) {
+    var _a;
     let newIndex = index;
     if (this.saveGeoloc) {
-      if (isNullOrUndefined(newIndex) && this.multiple && this.value && this.value.length - 1 > -1) {
+      if (isNullOrUndefined(newIndex) && this.multiple && ((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) - 1 > -1) {
         newIndex = this.value.length - 1;
       }
       this.getGeoloc.emit(newIndex);
@@ -690,10 +670,6 @@ export class YooFormCaptureComponent {
       this.captureFromDisk(index);
     }
   }
-  onFetchGridData(ev) {
-    ev.stopPropagation();
-    this.fetchData.emit(ev.detail);
-  }
   getTargetElement(index) {
     return index !== undefined ? Array.from(this.fileInputs).find((_, ind) => ind === index) : this.fileInputs;
   }
@@ -714,17 +690,17 @@ export class YooFormCaptureComponent {
         const tag = await this.showPhotoTagDialog(data);
         if (!isNullOrUndefined(tag === null || tag === void 0 ? void 0 : tag.data)) {
           this.updateTagData(tag, index);
-          this.setFieldValue(data);
+          this.setFieldValue(index, data);
           this.clearPhotoEdit(index);
         }
       }
       else {
-        this.setFieldValue(data);
+        this.setFieldValue(index, data);
         this.clearPhotoEdit(index);
       }
     }
     else {
-      this.setFieldValue(f);
+      this.setFieldValue(index, f);
       this.clearPhotoEdit(index);
     }
     targetElement.value = null;
@@ -1605,7 +1581,8 @@ export class YooFormCaptureComponent {
     }
   }
   shouldTagImage() {
-    return this.tags && this.tags.length > 0;
+    var _a;
+    return ((_a = this.tags) === null || _a === void 0 ? void 0 : _a.length) > 0;
   }
   onCancelImageReco() {
     showAlert('', [translate('YOOBICNO'), translate('YOOBICYES')], translate('STOPIMAGERECO')).then((res) => {
@@ -2779,10 +2756,13 @@ export class YooFormCaptureComponent {
     },
     "setFieldValue": {
       "complexType": {
-        "signature": "(data: any) => Promise<void>",
+        "signature": "(index: number, data: any) => Promise<void>",
         "parameters": [{
             "tags": [],
             "text": ""
+          }, {
+            "tags": [],
+            "text": ""
           }],
         "references": {
           "Promise": {

package/dist/collection/components/form/form-dynamic/form-dynamic.js

@@ -295,7 +295,7 @@ export class YooFormDynamicComponent {
           const videoValue = fieldData.value;
           const videoElement = el;
           if (videoValue) {
-            videoElement.setFieldValue(videoValue);
+            videoElement.setFieldValue(undefined, videoValue);
           }
           break;
         }