feat(custom-camera): add splash feedback on capture photo

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

@@ -3,6 +3,7 @@
   [style.--background]="'transparent'"
   *transloco="let t"
 >
+  <div id="camera-flash-placeholder"></div>
   <div
     class="select-from-go-pro-camera-button"
     *ngIf="lastConnectedGoProDevice$ | ngrxPush"

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

@@ -53,3 +53,27 @@ mat-icon.temporarily-hidden {
   bottom: 0;
   padding: 16px 8px;
 }
+
+#camera-flash-placeholder {
+  position: absolute;
+  left: 0;
+  width: 100%;
+  top: 0;
+  height: 100%;
+}
+
+@keyframes flash-camera-keyframes {
+  from {
+    background-color: white;
+  }
+
+  to {
+    background-color: transparent;
+  }
+}
+
+.flash-camera-animation {
+  animation-duration: 1s;
+  animation-iteration-count: 1;
+  animation-name: flash-camera-keyframes;
+}

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

@@ -105,6 +105,7 @@ export class CustomCameraPage implements OnInit, OnDestroy {
   onPress() {
     this.userGuideService.setHasCapturedPhotoWithCustomCamera(true);
     this.customCameraService.takePhoto();
+    this.flashCameraScreen();
   }
 
   onLongPress() {
@@ -123,11 +124,10 @@ export class CustomCameraPage implements OnInit, OnDestroy {
   }
 
   onReleasePressing() {
-    this.customCameraService.stopRecord();
-
     if (this.curRecordTimeInMilliseconds > 0) {
       this.curRecordTimeInMilliseconds = 0;
       this.curRecordTimeInPercent = 0;
+      this.customCameraService.stopRecord();
     }
   }
 
@@ -154,16 +154,13 @@ export class CustomCameraPage implements OnInit, OnDestroy {
   }
 
   // eslint-disable-next-line class-methods-use-this
-  private scaleUpGalleryButton() {
-    // TODO: use @ViewChild elementRef
-    const element = document.getElementById('gallery-icon');
-    element?.classList.add('scaled-mat-icon');
-  }
-
-  // eslint-disable-next-line class-methods-use-this
-  private scaleDownGalleryButton() {
-    // TODO: use @ViewChild elementRef
-    const element = document.getElementById('gallery-icon');
-    element?.classList.remove('scaled-mat-icon');
+  private flashCameraScreen() {
+    const element = document.getElementById('camera-flash-placeholder');
+    element?.classList.add('flash-camera-animation');
+    const flashCameraTimeout = 1000;
+    setTimeout(
+      () => element?.classList.remove('flash-camera-animation'),
+      flashCameraTimeout
+    );
   }
 }