fix(camera): Make web use source options (#487)

ionic-team · Jun 23, 2021 · 7870e6b · 7870e6b
1 parent c39ead4
commit 7870e6b
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 32 deletions.
diff --git a/camera/README.md b/camera/README.md
@@ -169,7 +169,7 @@ Request camera and photo album permissions
 | **`direction`**           | <code><a href="#cameradirection">CameraDirection</a></code>   | iOS and Web only: The camera direction.                                                                                                                                                                                                                                | <code>: CameraDirection.Rear</code> | 1.0.0 |
 | **`presentationStyle`**   | <code>'fullscreen' \| 'popover'</code>                        | iOS only: The presentation style of the Camera.                                                                                                                                                                                                                        | <code>: 'fullscreen'</code>         | 1.0.0 |
 | **`webUseInput`**         | <code>boolean</code>                                          | Web only: Whether to use the PWA Element experience or file input. The default is to use PWA Elements if installed and fall back to file input. To always use file input, set this to `true`. Learn more about PWA Elements: https://capacitorjs.com/docs/pwa-elements |                                     | 1.0.0 |
-| **`promptLabelHeader`**   | <code>string</code>                                           | Text value to use when displaying the prompt. iOS and Android only: The title of the action sheet.                                                                                                                                                                     | <code>: 'Photo'</code>              | 1.0.0 |
+| **`promptLabelHeader`**   | <code>string</code>                                           | Text value to use when displaying the prompt.                                                                                                                                                                                                                          | <code>: 'Photo'</code>              | 1.0.0 |
 | **`promptLabelCancel`**   | <code>string</code>                                           | Text value to use when displaying the prompt. iOS only: The label of the 'cancel' button.                                                                                                                                                                              | <code>: 'Cancel'</code>             | 1.0.0 |
 | **`promptLabelPhoto`**    | <code>string</code>                                           | Text value to use when displaying the prompt. The label of the button to select a saved image.                                                                                                                                                                         | <code>: 'From Photos'</code>        | 1.0.0 |
 | **`promptLabelPicture`**  | <code>string</code>                                           | Text value to use when displaying the prompt. The label of the button to open the camera.                                                                                                                                                                              | <code>: 'Take Picture'</code>       | 1.0.0 |

diff --git a/camera/src/definitions.ts b/camera/src/definitions.ts
@@ -131,7 +131,6 @@ export interface ImageOptions {
 
   /**
    * Text value to use when displaying the prompt.
-   * iOS and Android only: The title of the action sheet.
    * @default: 'Photo'
    *
    * @since 1.0.0

diff --git a/camera/src/web.ts b/camera/src/web.ts
@@ -12,43 +12,71 @@ export class CameraWeb extends WebPlugin implements CameraPlugin {
   async getPhoto(options: ImageOptions): Promise<Photo> {
     // eslint-disable-next-line no-async-promise-executor
     return new Promise<Photo>(async (resolve, reject) => {
-      if (options.webUseInput) {
+      if (options.webUseInput || options.source === CameraSource.Photos) {
         this.fileInputExperience(options, resolve);
-      } else {
-        if (customElements.get('pwa-camera-modal')) {
-          const cameraModal: any = document.createElement('pwa-camera-modal');
-          document.body.appendChild(cameraModal);
-          try {
-            await cameraModal.componentOnReady();
-            cameraModal.addEventListener('onPhoto', async (e: any) => {
-              const photo = e.detail;
-
-              if (photo === null) {
-                reject(new CapacitorException('User cancelled photos app'));
-              } else if (photo instanceof Error) {
-                reject(photo);
-              } else {
-                resolve(await this._getCameraPhoto(photo, options));
-              }
-
-              cameraModal.dismiss();
-              document.body.removeChild(cameraModal);
-            });
-
-            cameraModal.present();
-          } catch (e) {
+      } else if (options.source === CameraSource.Prompt) {
+        let actionSheet: any = document.querySelector('pwa-action-sheet');
+        if (!actionSheet) {
+          actionSheet = document.createElement('pwa-action-sheet');
+          document.body.appendChild(actionSheet);
+        }
+        actionSheet.header = options.promptLabelHeader || 'Photo';
+        actionSheet.cancelable = false;
+        actionSheet.options = [
+          { title: options.promptLabelPhoto || 'From Photos' },
+          { title: options.promptLabelPicture || 'Take Picture' },
+        ];
+        actionSheet.addEventListener('onSelection', async (e: any) => {
+          const selection = e.detail;
+          if (selection === 0) {
             this.fileInputExperience(options, resolve);
+          } else {
+            this.cameraExperience(options, resolve, reject);
           }
-        } else {
-          console.error(
-            `Unable to load PWA Element 'pwa-camera-modal'. See the docs: https://capacitorjs.com/docs/pwa-elements.`,
-          );
-          this.fileInputExperience(options, resolve);
-        }
+        });
+      } else {
+        this.cameraExperience(options, resolve, reject);
       }
     });
   }
 
+  private async cameraExperience(
+    options: ImageOptions,
+    resolve: any,
+    reject: any,
+  ) {
+    if (customElements.get('pwa-camera-modal')) {
+      const cameraModal: any = document.createElement('pwa-camera-modal');
+      document.body.appendChild(cameraModal);
+      try {
+        await cameraModal.componentOnReady();
+        cameraModal.addEventListener('onPhoto', async (e: any) => {
+          const photo = e.detail;
+
+          if (photo === null) {
+            reject(new CapacitorException('User cancelled photos app'));
+          } else if (photo instanceof Error) {
+            reject(photo);
+          } else {
+            resolve(await this._getCameraPhoto(photo, options));
+          }
+
+          cameraModal.dismiss();
+          document.body.removeChild(cameraModal);
+        });
+
+        cameraModal.present();
+      } catch (e) {
+        this.fileInputExperience(options, resolve);
+      }
+    } else {
+      console.error(
+        `Unable to load PWA Element 'pwa-camera-modal'. See the docs: https://capacitorjs.com/docs/pwa-elements.`,
+      );
+      this.fileInputExperience(options, resolve);
+    }
+  }
+
   private fileInputExperience(options: ImageOptions, resolve: any) {
     let input = document.querySelector(
       '#_capacitor-camera-input',