Skip to content

Commit 5d76ad0

Browse files
bafubafu
authored
Merge pull request #2059 from numbersprotocol/feature-zoom-in-out
Feature zoom in out
2 parents f3f58eb + 48713f3 commit 5d76ad0

File tree

5 files changed

+119
-42
lines changed

5 files changed

+119
-42
lines changed

‎package-lock.json

Lines changed: 4 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

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

Lines changed: 51 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -36,41 +36,59 @@
3636
</mat-icon>
3737

3838
<div class="camera-buttons-container">
39-
<mat-icon class="temporarily-hidden" id="gallery-icon">
40-
video_collection
41-
</mat-icon>
39+
<div *ngIf="isFlashAvailable" class="zoom-slider">
40+
<ion-range
41+
(ionChange)="zoomFactorChange($event)"
42+
[disabled]="!canZoomInOut"
43+
[min]="minZoomFactor"
44+
[max]="maxZoomFactor"
45+
[value]="curZoomFactor"
46+
step="0.1"
47+
>
48+
<ion-icon slot="start" name="remove-outline"></ion-icon>
49+
<ion-icon slot="end" name="add-outline"></ion-icon>
50+
</ion-range>
51+
</div>
4252

43-
<circle-progress
44-
(click)="onPress()"
45-
[maxTime]="maxRecordTimeInMilliseconds"
46-
ngxLongPress2
47-
(onLongPress)="onLongPress()"
48-
(onLongPressing)="onLongPressing($event)"
49-
(onReleasePressing)="onReleasePressing()"
50-
[percent]="curRecordTimeInPercent"
51-
[radius]="38"
52-
[outerStrokeWidth]="6"
53-
[innerStrokeWidth]="4"
54-
[outerStrokeColor]="'#78C000'"
55-
[innerStrokeColor]="'#F2F2F2'"
56-
[showTitle]="false"
57-
[showUnits]="false"
58-
[showSubtitle]="false"
59-
[animation]="false"
60-
[animationDuration]="0"
61-
joyrideStep="highlightCustomCameraCaptureButton"
62-
[title]="t('userGuide.cameraUsageGuide')"
63-
[text]="t('userGuide.tapToTakeAPhotoAndLongPressToRecordVideo')"
64-
></circle-progress>
53+
<div class="main-buttons">
54+
<mat-icon class="temporarily-hidden" id="gallery-icon">
55+
video_collection
56+
</mat-icon>
6557

66-
<mat-icon
67-
(click)="flipCamera()"
68-
joyrideStep="highlightCustomCameraFlipButton"
69-
[title]="t('userGuide.cameraUsageGuide')"
70-
[text]="t('userGuide.flipTheCameraToSwitchBetweenFrontAndBackCameras')"
71-
>
72-
flip_camera_android
73-
</mat-icon>
58+
<circle-progress
59+
(click)="onPress()"
60+
[maxTime]="maxRecordTimeInMilliseconds"
61+
ngxLongPress2
62+
(onLongPress)="onLongPress()"
63+
(onLongPressing)="onLongPressing($event)"
64+
(onReleasePressing)="onReleasePressing()"
65+
[percent]="curRecordTimeInPercent"
66+
[radius]="38"
67+
[outerStrokeWidth]="6"
68+
[innerStrokeWidth]="4"
69+
[outerStrokeColor]="'#78C000'"
70+
[innerStrokeColor]="'#F2F2F2'"
71+
[showTitle]="false"
72+
[showUnits]="false"
73+
[showSubtitle]="false"
74+
[animation]="false"
75+
[animationDuration]="0"
76+
joyrideStep="highlightCustomCameraCaptureButton"
77+
[title]="t('userGuide.cameraUsageGuide')"
78+
[text]="t('userGuide.tapToTakeAPhotoAndLongPressToRecordVideo')"
79+
></circle-progress>
80+
81+
<mat-icon
82+
(click)="flipCamera()"
83+
joyrideStep="highlightCustomCameraFlipButton"
84+
[title]="t('userGuide.cameraUsageGuide')"
85+
[text]="
86+
t('userGuide.flipTheCameraToSwitchBetweenFrontAndBackCameras')
87+
"
88+
>
89+
flip_camera_android
90+
</mat-icon>
91+
</div>
7492
</div>
7593
</ng-container>
7694
<ng-container *ngIf="(mode$ | ngrxPush) === 'pre-publish'">

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

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -50,14 +50,24 @@ mat-icon.temporarily-hidden {
5050

5151
.camera-buttons-container {
5252
display: flex;
53-
flex-direction: row;
54-
justify-content: space-around;
55-
align-items: center;
53+
flex-direction: column;
5654
position: absolute;
5755
left: 0;
5856
right: 0;
5957
bottom: 0;
6058
padding: 16px 8px;
59+
60+
.zoom-slider {
61+
margin: 0 auto;
62+
width: 80vw;
63+
}
64+
65+
.main-buttons {
66+
display: flex;
67+
flex-direction: row;
68+
justify-content: space-around;
69+
align-items: center;
70+
}
6171
}
6272

6373
#camera-flash-placeholder {

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

Lines changed: 28 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/* eslint-disable no-console */
22
import { Location } from '@angular/common';
3-
import { Component, OnDestroy, OnInit } from '@angular/core';
3+
import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
44
import { Router } from '@angular/router';
55
import { Capacitor, PluginListenerHandle } from '@capacitor/core';
66
import { UntilDestroy } from '@ngneat/until-destroy';
@@ -44,6 +44,14 @@ export class CustomCameraPage implements OnInit, OnDestroy {
4444
isFlashOn = false;
4545
isFlashAvailable = false;
4646

47+
minZoomFactor = 0;
48+
maxZoomFactor = 0;
49+
curZoomFactor = 0;
50+
51+
get canZoomInOut() {
52+
return this.minZoomFactor < this.maxZoomFactor;
53+
}
54+
4755
readonly lastConnectedGoProDevice$ =
4856
this.goProBluetoothService.lastConnectedDevice$;
4957

@@ -53,7 +61,8 @@ export class CustomCameraPage implements OnInit, OnDestroy {
5361
private readonly customCameraService: CustomCameraService,
5462
private readonly goProBluetoothService: GoProBluetoothService,
5563
private readonly errorService: ErrorService,
56-
private readonly userGuideService: UserGuideService
64+
private readonly userGuideService: UserGuideService,
65+
private readonly ref: ChangeDetectorRef
5766
) {}
5867

5968
ngOnInit() {
@@ -131,6 +140,13 @@ export class CustomCameraPage implements OnInit, OnDestroy {
131140
async syncCameraState() {
132141
this.isFlashOn = (await this.isTorchOn()).result;
133142
this.isFlashAvailable = await this.customCameraService.isTorchAvailable();
143+
144+
if (this.isFlashAvailable) {
145+
this.minZoomFactor = await this.customCameraService.minZoomFactor();
146+
this.maxZoomFactor = await this.customCameraService.maxZoomFactor();
147+
this.customCameraService.zoom(0);
148+
console.log(`maxZoomFactor: ${this.maxZoomFactor}`);
149+
}
134150
}
135151

136152
onPress() {
@@ -192,6 +208,16 @@ export class CustomCameraPage implements OnInit, OnDestroy {
192208
await this.customCameraService.focus(event.x, event.y);
193209
}
194210

211+
// eslint-disable-next-line class-methods-use-this
212+
zoomFactorChange(event: any) {
213+
this.customCameraService.zoom(event.detail.value);
214+
}
215+
216+
// eslint-disable-next-line class-methods-use-this
217+
zoomFactorChanging(value: any) {
218+
console.log(value);
219+
}
220+
195221
async leaveCustomCamera() {
196222
return this.location.back();
197223
}

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

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -122,6 +122,29 @@ export class CustomCameraService {
122122
return Promise.resolve();
123123
}
124124

125+
async minZoomFactor(): Promise<number> {
126+
const defaultMinAvailableZoom = 0;
127+
if (this.isNativePlatform) {
128+
return (await PreviewCamera.minAvailableZoom()).result;
129+
}
130+
return defaultMinAvailableZoom;
131+
}
132+
133+
async maxZoomFactor(): Promise<number> {
134+
const defaultMaxAvailableZoom = 0;
135+
if (this.isNativePlatform) {
136+
return (await PreviewCamera.maxAvailableZoom()).result;
137+
}
138+
return Promise.resolve(defaultMaxAvailableZoom);
139+
}
140+
141+
async zoom(zoomFactor: any) {
142+
if (this.isNativePlatform) {
143+
return await PreviewCamera.zoom({ factor: zoomFactor });
144+
}
145+
return Promise.resolve();
146+
}
147+
125148
async isTorchAvailable(): Promise<boolean> {
126149
if (this.isNativePlatform) {
127150
return (await PreviewCamera.isTorchAvailable()).result;

0 commit comments

Comments
 (0)