Skip to content

Commit 98aa63b

Browse files
sultanmyrzasultanmyrza
committed
finish camera tab mode
1 parent 1d29e17 commit 98aa63b

File tree

3 files changed

+431
-192
lines changed

3 files changed

+431
-192
lines changed

‎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

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

Lines changed: 103 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,10 @@
1+
$camera-header-height: calc(86px - env(safe-area-inset-top));
2+
$camera-zoom-slider-height: calc(58px - env(safe-area-inset-bottom));
3+
$camera-footer-height: calc(168px - env(safe-area-inset-bottom));
4+
$camera-preview-height: calc(
5+
100% - #{$camera-header-height} - #{$camera-zoom-slider-height} - #{$camera-footer-height}
6+
);
7+
18
:host {
29
background-color: transparent;
310
}
@@ -6,15 +13,104 @@ ion-content {
613
--background: transparent;
714
}
815

9-
ion-fab-button {
10-
font-size: 14px;
11-
width: 64px;
16+
.camera-container {
17+
position: absolute;
18+
top: 0;
19+
left: 0;
20+
width: 100%;
21+
height: 100%;
22+
// background-color: white;
23+
// opacity: 0.8;
24+
25+
.camera-header {
26+
height: $camera-header-height;
27+
background-color: rgba(0 0 0 / 0.5);
28+
padding-top: 16px;
29+
// opacity: 0.4;
30+
}
1231

13-
--border-radius: 8px;
14-
}
32+
.camera-preview {
33+
height: $camera-preview-height;
34+
// background-color: green;
35+
// opacity: 0.4;
36+
}
1537

16-
ion-fab-list {
17-
right: 8px;
38+
ion-range.zoom-slider {
39+
height: $camera-zoom-slider-height;
40+
margin: 0 auto;
41+
width: 80vw;
42+
43+
--bar-height: 8px;
44+
--bar-border-radius: 8px;
45+
--bar-background: rgba(0 0 0 / 0.5);
46+
--bar-background-active: white;
47+
--knob-background: white;
48+
}
49+
50+
.camera-footer {
51+
height: $camera-footer-height;
52+
width: 100%;
53+
// background-color: blue;
54+
background-color: rgba(0 0 0 / 0.5);
55+
// opacity: 0.4;
56+
display: flex;
57+
flex-direction: column;
58+
59+
.footer-camera-modes {
60+
width: 100%;
61+
height: 28px;
62+
margin: 16px 0 20px;
63+
display: flex;
64+
flex-direction: row;
65+
justify-content: center;
66+
67+
.camera-mode-item {
68+
width: 68px;
69+
height: 27px;
70+
display: flex;
71+
align-items: center;
72+
justify-content: center;
73+
border-radius: 37px;
74+
margin: 0 8px;
75+
font-style: normal;
76+
font-weight: 500;
77+
font-size: 13px;
78+
text-transform: uppercase;
79+
color: white;
80+
}
81+
82+
.selected {
83+
color: black;
84+
background: white;
85+
transition: background-color 500ms linear;
86+
}
87+
}
88+
89+
.story-mode-selected {
90+
transform: translateX(84px);
91+
transition: 0.3s ease-in-out;
92+
-webkit-transition: 0.3s ease-in-out;
93+
}
94+
95+
.photo-mode-selected {
96+
transform: translateX(0);
97+
transition: 0.3s ease-in-out;
98+
-webkit-transition: 0.3s ease-in-out;
99+
}
100+
101+
.gopro-mode-selected {
102+
transform: translateX(-84px);
103+
transition: 0.3s ease-in-out;
104+
-webkit-transition: 0.3s ease-in-out;
105+
}
106+
107+
.footer-camera-buttons {
108+
display: flex;
109+
flex-direction: row;
110+
justify-content: space-around;
111+
align-items: center;
112+
}
113+
}
18114
}
19115

20116
mat-icon {
@@ -65,36 +161,6 @@ mat-icon.temporarily-hidden {
65161
}
66162
}
67163

68-
.camera-buttons-container {
69-
display: flex;
70-
flex-direction: column;
71-
position: absolute;
72-
left: 0;
73-
right: 0;
74-
bottom: 0;
75-
padding: 16px 8px;
76-
77-
.zoom-slider {
78-
margin: 0 auto;
79-
width: 80vw;
80-
}
81-
82-
.main-buttons {
83-
display: flex;
84-
flex-direction: row;
85-
justify-content: space-around;
86-
align-items: center;
87-
}
88-
}
89-
90-
#camera-flash-placeholder {
91-
position: absolute;
92-
left: 0;
93-
width: 100%;
94-
top: 0;
95-
height: 100%;
96-
}
97-
98164
@keyframes flash-camera-keyframes {
99165
from {
100166
background-color: white;

0 commit comments

Comments
 (0)