Skip to content

Commit d225a28

Browse files
bafubafu
authored
Merge pull request #2398 from numbersprotocol/feat-camera-tab-mode
Feat camera tab mode
2 parents 28c9b5f + c80aaca commit d225a28

File tree

7 files changed

+461
-193
lines changed

7 files changed

+461
-193
lines changed

‎package-lock.json‎

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

‎package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,7 @@
7272
"capacitor-blob-writer": "^1.0.4",
7373
"compressorjs": "^1.0.7",
7474
"cordova-plugin-purchase": "^11.0.0",
75+
"hammerjs": "^2.0.8",
7576
"immutable": "^4.0.0-rc.14",
7677
"lodash-es": "^4.17.21",
7778
"material-design-icons-iconfont": "^6.1.0",
@@ -103,6 +104,7 @@
103104
"@angular/language-service": "^14.2.0",
104105
"@capacitor/cli": "^4.0.0",
105106
"@ionic/angular-toolkit": "^4.0.0",
107+
"@types/hammerjs": "^2.0.41",
106108
"@types/jasmine": "^3.8.2",
107109
"@types/jasminewd2": "^2.0.10",
108110
"@types/lodash-es": "^4.17.4",

‎src/app/app.module.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { NgModule } from '@angular/core';
22
import { MAT_SNACK_BAR_DEFAULT_OPTIONS } from '@angular/material/snack-bar';
3-
import { BrowserModule } from '@angular/platform-browser';
3+
import { BrowserModule, HammerModule } from '@angular/platform-browser';
44
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
55
import { RouteReuseStrategy } from '@angular/router';
66
import { InAppPurchase2 } from '@awesome-cordova-plugins/in-app-purchase-2/ngx';
@@ -25,6 +25,7 @@ import { SharedModule } from './shared/shared.module';
2525
FormlyModule.forRoot({ extras: { lazyRender: true } }),
2626
FormlyMaterialModule,
2727
JoyrideModule.forRoot(),
28+
HammerModule,
2829
],
2930
providers: [
3031
{

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

Lines changed: 129 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -1,101 +1,144 @@
1-
<ion-content
2-
[fullscreen]="true"
3-
[style.--background]="'transparent'"
4-
*transloco="let t"
5-
>
6-
<ng-container *ngIf="(mode$ | ngrxPush) === 'capture'">
7-
<div id="camera-flash-placeholder" (click)="focus($event)"></div>
8-
9-
<mat-icon
10-
*ngIf="isFlashAvailable"
11-
class="flash-camera-button"
12-
(click)="enableTorch()"
13-
>
14-
{{ isFlashOn ? 'flash_on' : 'flash_off' }}
15-
</mat-icon>
16-
17-
<mat-icon
18-
class="camera-quality-button"
19-
[svgIcon]="'capture-rebrand-camera-' + cameraQuality"
20-
(click)="toggleCameraQuality()"
21-
>
22-
</mat-icon>
23-
24-
<div
25-
class="select-from-go-pro-camera-button"
26-
*ngIf="lastConnectedGoProDevice$ | ngrxPush"
27-
(click)="captureFromGoPro()"
28-
>
29-
GoPro
30-
<mat-icon> featured_video </mat-icon>
31-
</div>
32-
33-
<mat-icon
34-
class="close-camera-button"
35-
(click)="leaveCustomCamera()"
36-
joyrideStep="highlightCustomCameraCloseButton"
37-
[title]="t('userGuide.cameraUsageGuide')"
38-
[text]="
39-
t('userGuide.afterTakingPhotosOrRecordingVideosCloseAndGoBackHome')
40-
"
41-
>
42-
close
43-
</mat-icon>
44-
45-
<div class="camera-buttons-container">
46-
<div *ngIf="isFlashAvailable" class="zoom-slider">
47-
<ion-range
48-
(ionChange)="zoomFactorChange($event)"
49-
[disabled]="!canZoomInOut"
50-
[min]="minZoomFactor"
51-
[max]="maxZoomFactor"
52-
[value]="curZoomFactor"
53-
step="0.1"
1+
<ion-content [fullscreen]="true" *transloco="let t">
2+
<ng-container
3+
*ngIf="
4+
(isStoryMode$ | ngrxPush) ||
5+
(isPhotoMode$ | ngrxPush) ||
6+
(isGoProMode$ | ngrxPush)
7+
"
8+
>
9+
<div class="camera-container">
10+
<div class="camera-header">
11+
<mat-icon
12+
*ngIf="isFlashAvailable$ | ngrxPush"
13+
class="flash-camera-button"
14+
(click)="enableTorch()"
5415
>
55-
<ion-icon slot="start" name="remove-outline"></ion-icon>
56-
<ion-icon slot="end" name="add-outline"></ion-icon>
57-
</ion-range>
58-
</div>
16+
{{ (isFlashOn$ | ngrxPush) ? 'flash_on' : 'flash_off' }}
17+
</mat-icon>
5918

60-
<div class="main-buttons">
61-
<mat-icon class="temporarily-hidden" id="gallery-icon">
62-
video_collection
19+
<mat-icon
20+
class="camera-quality-button"
21+
[svgIcon]="'capture-rebrand-camera-' + (cameraQuality$ | ngrxPush)"
22+
(click)="toggleCameraQuality()"
23+
>
6324
</mat-icon>
6425

65-
<circle-progress
66-
(click)="onPress()"
67-
[maxTime]="maxRecordTimeInMilliseconds"
68-
ngxLongPress2
69-
(onLongPress)="onLongPress()"
70-
(onLongPressing)="onLongPressing($event)"
71-
(onReleasePressing)="onReleasePressing()"
72-
[percent]="curRecordTimeInPercent"
73-
[radius]="38"
74-
[outerStrokeWidth]="6"
75-
[innerStrokeWidth]="4"
76-
[outerStrokeColor]="'#78C000'"
77-
[innerStrokeColor]="'#F2F2F2'"
78-
[showTitle]="false"
79-
[showUnits]="false"
80-
[showSubtitle]="false"
81-
[animation]="false"
82-
[animationDuration]="0"
83-
joyrideStep="highlightCustomCameraCaptureButton"
84-
[title]="t('userGuide.cameraUsageGuide')"
85-
[text]="t('userGuide.tapToTakeAPhotoAndLongPressToRecordVideo')"
86-
></circle-progress>
26+
<div
27+
class="select-from-go-pro-camera-button"
28+
*ngIf="lastConnectedGoProDevice$ | ngrxPush"
29+
(click)="captureFromGoPro()"
30+
>
31+
GoPro
32+
<mat-icon> featured_video </mat-icon>
33+
</div>
8734

8835
<mat-icon
89-
(click)="flipCamera()"
90-
joyrideStep="highlightCustomCameraFlipButton"
36+
class="close-camera-button"
37+
(click)="leaveCustomCamera()"
38+
joyrideStep="highlightCustomCameraCloseButton"
9139
[title]="t('userGuide.cameraUsageGuide')"
9240
[text]="
93-
t('userGuide.flipTheCameraToSwitchBetweenFrontAndBackCameras')
41+
t('userGuide.afterTakingPhotosOrRecordingVideosCloseAndGoBackHome')
9442
"
9543
>
96-
flip_camera_android
44+
close
9745
</mat-icon>
9846
</div>
47+
<div
48+
class="camera-preview"
49+
(swipeleft)="onSwipeLeft($event)"
50+
(swiperight)="onSwipeRight($event)"
51+
(pinchstart)="handlePinchStart($event)"
52+
(pinchin)="handlePinchIn($event)"
53+
(pinchout)="handlePinchOut($event)"
54+
></div>
55+
56+
<ion-range
57+
class="zoom-slider"
58+
(ionChange)="zoomFactorChange($event)"
59+
[disabled]="!canZoomInOut"
60+
[min]="minZoomFactor$ | ngrxPush"
61+
[max]="maxZoomFactor$ | ngrxPush"
62+
[value]="curZoomFactor$ | ngrxPush"
63+
step="0.1"
64+
>
65+
<ion-icon slot="start" name="remove-outline"></ion-icon>
66+
<ion-icon slot="end" name="add-outline"></ion-icon>
67+
</ion-range>
68+
69+
<div
70+
class="camera-footer"
71+
(swipeleft)="onSwipeLeft($event)"
72+
(swiperight)="onSwipeRight($event)"
73+
>
74+
<div
75+
class="footer-camera-modes"
76+
[ngClass]="selectedModeCSSClass$ | ngrxPush"
77+
>
78+
<div
79+
class="camera-mode-item"
80+
[ngClass]="{ selected: isStoryMode$ | ngrxPush }"
81+
(click)="selectMode('story')"
82+
>
83+
STORY
84+
</div>
85+
<div
86+
class="camera-mode-item"
87+
[ngClass]="{ selected: isPhotoMode$ | ngrxPush }"
88+
(click)="selectMode('photo')"
89+
>
90+
PHOTO
91+
</div>
92+
<div class="camera-mode-item">
93+
<!-- Temporary disable/hide GO PRO mode
94+
But we need this element for proper positioning -->
95+
</div>
96+
</div>
97+
<div class="footer-camera-buttons">
98+
<mat-icon class="temporarily-hidden" id="gallery-icon">
99+
video_collection
100+
</mat-icon>
101+
102+
<circle-progress
103+
(click)="onPress()"
104+
ngxLongPress2
105+
[maxTime]="maxRecordTimeInMilliseconds"
106+
[percent]="(curRecordTimeInPercent$ | ngrxPush) ?? 0"
107+
[outerStrokeColor]="
108+
(curRecordTimeInPercent$ | ngrxPush) === 0
109+
? 'transparent'
110+
: '#E32323'
111+
"
112+
[radius]="38"
113+
[backgroundPadding]="-6"
114+
[outerStrokeWidth]="4"
115+
[space]="3"
116+
[innerStrokeWidth]="2"
117+
[backgroundStrokeWidth]="6"
118+
[outerStrokeLinecap]="'round'"
119+
[backgroundStroke]="'#ffffff'"
120+
[innerStrokeColor]="'#000000'"
121+
[backgroundColor]="
122+
(isPhotoMode$ | ngrxPush) ? '#ffffff' : '#E32323'
123+
"
124+
[showTitle]="false"
125+
[showUnits]="false"
126+
[showSubtitle]="false"
127+
[animation]="false"
128+
></circle-progress>
129+
130+
<mat-icon
131+
(click)="flipCamera()"
132+
joyrideStep="highlightCustomCameraFlipButton"
133+
[title]="t('userGuide.cameraUsageGuide')"
134+
[text]="
135+
t('userGuide.flipTheCameraToSwitchBetweenFrontAndBackCameras')
136+
"
137+
>
138+
flip_camera_android
139+
</mat-icon>
140+
</div>
141+
</div>
99142
</div>
100143
</ng-container>
101144

0 commit comments

Comments
 (0)