Merge pull request #2671 from numbersprotocol/feat-v230310-sprint-2-u…

…pload-image

Feat v230310 sprint 2 upload image

src/app/features/home/custom-camera/custom-camera.page.html

@@ -100,9 +100,7 @@
           </div>
         </div>
         <div class="footer-camera-buttons">
-          <mat-icon class="temporarily-hidden" id="gallery-icon">
-            video_collection
-          </mat-icon>
+          <mat-icon (click)="pickImage()"> imagesmode </mat-icon>
 
           <circle-progress
             (click)="onPress()"

src/app/features/home/custom-camera/custom-camera.page.scss

@@ -155,10 +155,6 @@ mat-icon.close-camera-button {
   right: 16px;
 }
 
-mat-icon.temporarily-hidden {
-  visibility: hidden;
-}
-
 // mat-icon
 .select-from-go-pro-camera-button {
   position: absolute;

src/app/features/home/custom-camera/custom-camera.page.ts

@@ -205,6 +205,22 @@ export class CustomCameraPage implements OnInit, OnDestroy {
     this.customCameraService.stopPreviewCamera();
   }
 
+  async pickImage() {
+    try {
+      const image = await this.customCameraService.pickImage();
+      await this.prePublish(
+        { filePath: image.path },
+        'image',
+        CameraSource.Photos
+      );
+    } catch (error) {
+      /**
+       * Error mighght happen if user didn't pick photo or video,
+       * we'll handle such error quietly without notifying user.
+       */
+    }
+  }
+
   async flipCamera() {
     await this.customCameraService.flipCamera();
     await this.syncCameraState();

src/app/features/home/custom-camera/custom-camera.service.ts

@@ -8,6 +8,7 @@ import { Platform } from '@ionic/angular';
 import { TranslocoService } from '@ngneat/transloco';
 import { PreviewCamera } from '@numbersprotocol/preview-camera';
 import { BehaviorSubject } from 'rxjs';
+import { CameraService } from '../../../shared/camera/camera.service';
 import { FILESYSTEM_PLUGIN } from '../../../shared/capacitor-plugins/capacitor-plugins.module';
 import { CaptureService } from '../../../shared/capture/capture.service';
 import { ErrorService } from '../../../shared/error/error.service';
@@ -34,7 +35,8 @@ export class CustomCameraService {
     private readonly translocoService: TranslocoService,
     @Inject(FILESYSTEM_PLUGIN)
     private readonly filesystemPlugin: FilesystemPlugin,
-    private readonly platform: Platform
+    private readonly platform: Platform,
+    private readonly cameraService: CameraService
   ) {}
 
   private mediaItemFromFilePath(
@@ -81,6 +83,10 @@ export class CustomCameraService {
     return PreviewCamera.stopPreview().catch(() => ({}));
   }
 
+  async pickImage() {
+    return this.cameraService.pickPhoto();
+  }
+
   // eslint-disable-next-line class-methods-use-this
   async flipCamera() {
     return PreviewCamera.flipCamera().catch(() => ({}));

src/app/shared/camera/camera.service.ts

@@ -1,14 +1,14 @@
 import { Inject, Injectable } from '@angular/core';
 import { AppPlugin } from '@capacitor/app';
 import {
+  Photo as CameraPhoto,
   CameraPlugin,
   CameraResultType,
   CameraSource,
-  Photo as CameraPhoto,
 } from '@capacitor/camera';
 import { Subject } from 'rxjs';
 import { blobToBase64 } from '../../utils/encoding/encoding';
-import { fromExtension, MimeType } from '../../utils/mime-type';
+import { MimeType, fromExtension } from '../../utils/mime-type';
 import {
   APP_PLUGIN,
   CAMERA_PLUGIN,
@@ -51,6 +51,15 @@ export class CameraService {
     return cameraPhotoToPhoto(cameraPhoto);
   }
 
+  async pickPhoto(): Promise<CameraPhoto> {
+    return this.cameraPlugin.getPhoto({
+      resultType: CameraResultType.Uri,
+      source: CameraSource.Photos,
+      quality: 100,
+      allowEditing: false,
+    });
+  }
+
   // eslint-disable-next-line class-methods-use-this
   async recordVideo(): Promise<Media> {
     return new Promise<Media>((resolve, reject) => {