fix: shnow camera system dialog when camera is the only source

uploadcare · Feb 29, 2024 · 95f0287 · 95f0287
1 parent 5ecacba
commit 95f0287
Show file tree

Hide file tree

Showing 2 changed files with 76 additions and 43 deletions.
diff --git a/abstract/UploaderBlock.js b/abstract/UploaderBlock.js
@@ -21,7 +21,6 @@ import { TypedCollection } from './TypedCollection.js';
 import { buildOutputCollectionState } from './buildOutputCollectionState.js';
 import { uploadEntrySchema } from './uploadEntrySchema.js';
 import { throttle } from '../blocks/utils/throttle.js';
-
 export class UploaderBlock extends ActivityBlock {
   couldBeCtxOwner = false;
   isCtxOwner = false;
@@ -300,7 +299,9 @@ export class UploaderBlock extends ActivityBlock {
     this.fileInput.dispatchEvent(new MouseEvent('click'));
     this.fileInput.onchange = () => {
       // @ts-ignore TODO: fix this
-      [...this.fileInput['files']].forEach((file) => this.addFileFromObject(file, { source: UploadSource.LOCAL }));
+      [...this.fileInput['files']].forEach((file) =>
+        this.addFileFromObject(file, { source: options.captureCamera ? UploadSource.CAMERA : UploadSource.LOCAL }),
+      );
       // To call uploadTrigger UploadList should draw file items first:
       this.$['*currentActivity'] = ActivityBlock.activities.UPLOAD_LIST;
       this.setOrAddState('*modalActive', true);
@@ -330,24 +331,18 @@ export class UploaderBlock extends ActivityBlock {
       this.setOrAddState('*modalActive', true);
     } else {
       if (this.sourceList?.length === 1) {
-        let srcKey = this.sourceList[0];
-        // Single source case:
-        if (srcKey === 'local') {
-          this.$['*currentActivity'] = ActivityBlock.activities.UPLOAD_LIST;
-          this?.['openSystemDialog']();
-        } else {
-          if (Object.values(UploaderBlock.extSrcList).includes(/** @type {any} */ (srcKey))) {
-            this.set$({
-              '*currentActivityParams': {
-                externalSourceType: srcKey,
-              },
-              '*currentActivity': ActivityBlock.activities.EXTERNAL,
-            });
-          } else {
-            this.$['*currentActivity'] = srcKey;
-          }
-          this.setOrAddState('*modalActive', true);
-        }
+        const srcKey = this.sourceList[0];
+        /** @type {Set<import('./Block').Block>} */
+        const blocksRegistry = this.$['*blocksRegistry'];
+        /**
+         * @param {import('./Block').Block} block
+         * @returns {block is import('../blocks/SourceBtn/SourceBtn.js').SourceBtn}
+         */
+        const isSourceBtn = (block) => 'type' in block && block.type === srcKey;
+        const sourceBtnBlock = [...blocksRegistry].find(isSourceBtn);
+        // TODO: This is weird that we have this logic inside UI component, we should consider to move it somewhere else
+        sourceBtnBlock?.activate();
+        this.setOrAddState('*modalActive', true);
       } else {
         // Multiple sources case:
         this.set$({

diff --git a/blocks/SourceBtn/SourceBtn.js b/blocks/SourceBtn/SourceBtn.js
@@ -1,23 +1,45 @@
+// @ts-check
 import { UploaderBlock } from '../../abstract/UploaderBlock.js';
 import { ActivityBlock } from '../../abstract/ActivityBlock.js';
 
 const L10N_PREFIX = 'src-type-';
 
+/**
+ * @typedef {{
+ *   type: string;
+ *   activity?: string;
+ *   textKey?: string;
+ *   icon?: string;
+ *   handle?: () => boolean;
+ *   activityParams?: Record<string, unknown>;
+ * }} TConfig
+ */
+
 export class SourceBtn extends UploaderBlock {
   couldBeCtxOwner = true;
-  /** @private */
+  /** @type {string | undefined} */
+  type = undefined;
+  /**
+   * @private
+   * @type {Record<string, TConfig>}
+   */
   _registeredTypes = {};
 
-  init$ = {
-    ...this.init$,
-    iconName: 'default',
-  };
+  constructor() {
+    super();
+
+    this.init$ = {
+      ...this.init$,
+      iconName: 'default',
+    };
+  }
 
   initTypes() {
     this.registerType({
       type: UploaderBlock.sourceTypes.LOCAL,
-      onClick: () => {
+      handle: () => {
         this.openSystemDialog();
+        return false;
       },
     });
     this.registerType({
@@ -28,9 +50,8 @@ export class SourceBtn extends UploaderBlock {
     this.registerType({
       type: UploaderBlock.sourceTypes.CAMERA,
       activity: ActivityBlock.activities.CAMERA,
-      onClick: () => {
-        let el = document.createElement('input');
-        var supportsCapture = el.capture !== undefined;
+      handle: () => {
+        const supportsCapture = 'capture' in document.createElement('input');
         if (supportsCapture) {
           this.openSystemDialog({ captureCamera: true });
         }
@@ -59,39 +80,55 @@ export class SourceBtn extends UploaderBlock {
     this.initTypes();
 
     this.setAttribute('role', 'button');
-    this.defineAccessor('type', (val) => {
-      if (!val) {
-        return;
-      }
-      this.applyType(val);
-    });
+    this.defineAccessor(
+      'type',
+      /** @param {string} val */
+      (val) => {
+        if (!val) {
+          return;
+        }
+        this.applyType(val);
+      },
+    );
   }
 
+  /** @param {TConfig} typeConfig */
   registerType(typeConfig) {
     this._registeredTypes[typeConfig.type] = typeConfig;
   }
 
+  /** @param {string} type */
   getType(type) {
     return this._registeredTypes[type];
   }
 
+  activate() {
+    if (!this.type) {
+      return;
+    }
+    const configType = this._registeredTypes[this.type];
+    const { activity, handle, activityParams = {} } = configType;
+    const showActivity = handle ? handle() : !!activity;
+    showActivity &&
+      this.set$({
+        '*currentActivityParams': activityParams,
+        '*currentActivity': activity,
+      });
+  }
+
+  /** @param {string} type */
   applyType(type) {
     const configType = this._registeredTypes[type];
     if (!configType) {
       console.warn('Unsupported source type: ' + type);
       return;
     }
-    const { textKey = type, icon = type, activity, onClick, activityParams = {} } = configType;
+    const { textKey = type, icon = type } = configType;
 
     this.applyL10nKey('src-type', `${L10N_PREFIX}${textKey}`);
     this.$.iconName = icon;
-    this.onclick = (e) => {
-      const showActivity = onClick ? onClick(e) : !!activity;
-      showActivity &&
-        this.set$({
-          '*currentActivityParams': activityParams,
-          '*currentActivity': activity,
-        });
+    this.onclick = () => {
+      this.activate();
     };
   }
 }
@@ -100,5 +137,6 @@ SourceBtn.template = /* HTML */ `
   <div class="txt" l10n="src-type"></div>
 `;
 SourceBtn.bindAttributes({
+  // @ts-expect-error symbiote types bug
   type: null,
 });