Merge pull request #2059 from numbersprotocol/feature-zoom-in-out

Feature zoom in out

Author: bafu

package-lock.json

@@ -36,41 +36,59 @@
     </mat-icon>
 
     <div class="camera-buttons-container">
-      <mat-icon class="temporarily-hidden" id="gallery-icon">
-        video_collection
-      </mat-icon>
+      <div *ngIf="isFlashAvailable" class="zoom-slider">
+        <ion-range
+          (ionChange)="zoomFactorChange($event)"
+          [disabled]="!canZoomInOut"
+          [min]="minZoomFactor"
+          [max]="maxZoomFactor"
+          [value]="curZoomFactor"
+          step="0.1"
+        >
+          <ion-icon slot="start" name="remove-outline"></ion-icon>
+          <ion-icon slot="end" name="add-outline"></ion-icon>
+        </ion-range>
+      </div>
 
-      <circle-progress
-        (click)="onPress()"
-        [maxTime]="maxRecordTimeInMilliseconds"
-        ngxLongPress2
-        (onLongPress)="onLongPress()"
-        (onLongPressing)="onLongPressing($event)"
-        (onReleasePressing)="onReleasePressing()"
-        [percent]="curRecordTimeInPercent"
-        [radius]="38"
-        [outerStrokeWidth]="6"
-        [innerStrokeWidth]="4"
-        [outerStrokeColor]="'#78C000'"
-        [innerStrokeColor]="'#F2F2F2'"
-        [showTitle]="false"
-        [showUnits]="false"
-        [showSubtitle]="false"
-        [animation]="false"
-        [animationDuration]="0"
-        joyrideStep="highlightCustomCameraCaptureButton"
-        [title]="t('userGuide.cameraUsageGuide')"
-        [text]="t('userGuide.tapToTakeAPhotoAndLongPressToRecordVideo')"
-      ></circle-progress>
+      <div class="main-buttons">
+        <mat-icon class="temporarily-hidden" id="gallery-icon">
+          video_collection
+        </mat-icon>
 
-      <mat-icon
-        (click)="flipCamera()"
-        joyrideStep="highlightCustomCameraFlipButton"
-        [title]="t('userGuide.cameraUsageGuide')"
-        [text]="t('userGuide.flipTheCameraToSwitchBetweenFrontAndBackCameras')"
-      >
-        flip_camera_android
-      </mat-icon>
+        <circle-progress
+          (click)="onPress()"
+          [maxTime]="maxRecordTimeInMilliseconds"
+          ngxLongPress2
+          (onLongPress)="onLongPress()"
+          (onLongPressing)="onLongPressing($event)"
+          (onReleasePressing)="onReleasePressing()"
+          [percent]="curRecordTimeInPercent"
+          [radius]="38"
+          [outerStrokeWidth]="6"
+          [innerStrokeWidth]="4"
+          [outerStrokeColor]="'#78C000'"
+          [innerStrokeColor]="'#F2F2F2'"
+          [showTitle]="false"
+          [showUnits]="false"
+          [showSubtitle]="false"
+          [animation]="false"
+          [animationDuration]="0"
+          joyrideStep="highlightCustomCameraCaptureButton"
+          [title]="t('userGuide.cameraUsageGuide')"
+          [text]="t('userGuide.tapToTakeAPhotoAndLongPressToRecordVideo')"
+        ></circle-progress>
+
+        <mat-icon
+          (click)="flipCamera()"
+          joyrideStep="highlightCustomCameraFlipButton"
+          [title]="t('userGuide.cameraUsageGuide')"
+          [text]="
+            t('userGuide.flipTheCameraToSwitchBetweenFrontAndBackCameras')
+          "
+        >
+          flip_camera_android
+        </mat-icon>
+      </div>
     </div>
   </ng-container>
   <ng-container *ngIf="(mode$ | ngrxPush) === 'pre-publish'">

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

@@ -50,14 +50,24 @@ mat-icon.temporarily-hidden {
 
 .camera-buttons-container {
   display: flex;
-  flex-direction: row;
-  justify-content: space-around;
-  align-items: center;
+  flex-direction: column;
   position: absolute;
   left: 0;
   right: 0;
   bottom: 0;
   padding: 16px 8px;
+
+  .zoom-slider {
+    margin: 0 auto;
+    width: 80vw;
+  }
+
+  .main-buttons {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    align-items: center;
+  }
 }
 
 #camera-flash-placeholder {

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

@@ -1,6 +1,6 @@
 /* eslint-disable no-console */
 import { Location } from '@angular/common';
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 import { Capacitor, PluginListenerHandle } from '@capacitor/core';
 import { UntilDestroy } from '@ngneat/until-destroy';
@@ -44,6 +44,14 @@ export class CustomCameraPage implements OnInit, OnDestroy {
   isFlashOn = false;
   isFlashAvailable = false;
 
+  minZoomFactor = 0;
+  maxZoomFactor = 0;
+  curZoomFactor = 0;
+
+  get canZoomInOut() {
+    return this.minZoomFactor < this.maxZoomFactor;
+  }
+
   readonly lastConnectedGoProDevice$ =
     this.goProBluetoothService.lastConnectedDevice$;
 
@@ -53,7 +61,8 @@ export class CustomCameraPage implements OnInit, OnDestroy {
     private readonly customCameraService: CustomCameraService,
     private readonly goProBluetoothService: GoProBluetoothService,
     private readonly errorService: ErrorService,
-    private readonly userGuideService: UserGuideService
+    private readonly userGuideService: UserGuideService,
+    private readonly ref: ChangeDetectorRef
   ) {}
 
   ngOnInit() {
@@ -131,6 +140,13 @@ export class CustomCameraPage implements OnInit, OnDestroy {
   async syncCameraState() {
     this.isFlashOn = (await this.isTorchOn()).result;
     this.isFlashAvailable = await this.customCameraService.isTorchAvailable();
+
+    if (this.isFlashAvailable) {
+      this.minZoomFactor = await this.customCameraService.minZoomFactor();
+      this.maxZoomFactor = await this.customCameraService.maxZoomFactor();
+      this.customCameraService.zoom(0);
+      console.log(`maxZoomFactor: ${this.maxZoomFactor}`);
+    }
   }
 
   onPress() {
@@ -192,6 +208,16 @@ export class CustomCameraPage implements OnInit, OnDestroy {
     await this.customCameraService.focus(event.x, event.y);
   }
 
+  // eslint-disable-next-line class-methods-use-this
+  zoomFactorChange(event: any) {
+    this.customCameraService.zoom(event.detail.value);
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  zoomFactorChanging(value: any) {
+    console.log(value);
+  }
+
   async leaveCustomCamera() {
     return this.location.back();
   }

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

@@ -122,6 +122,29 @@ export class CustomCameraService {
     return Promise.resolve();
   }
 
+  async minZoomFactor(): Promise<number> {
+    const defaultMinAvailableZoom = 0;
+    if (this.isNativePlatform) {
+      return (await PreviewCamera.minAvailableZoom()).result;
+    }
+    return defaultMinAvailableZoom;
+  }
+
+  async maxZoomFactor(): Promise<number> {
+    const defaultMaxAvailableZoom = 0;
+    if (this.isNativePlatform) {
+      return (await PreviewCamera.maxAvailableZoom()).result;
+    }
+    return Promise.resolve(defaultMaxAvailableZoom);
+  }
+
+  async zoom(zoomFactor: any) {
+    if (this.isNativePlatform) {
+      return await PreviewCamera.zoom({ factor: zoomFactor });
+    }
+    return Promise.resolve();
+  }
+
   async isTorchAvailable(): Promise<boolean> {
     if (this.isNativePlatform) {
       return (await PreviewCamera.isTorchAvailable()).result;