CCA: Add sound effect to pause/resume UI

To add sound effect to pause/resume UI, new 'recording-ui-paused' state
is introduced to control the UI transition.

Bug: 1072706
Test: Run "tast run 'camera.CCAUIRecordVideo'", check if sound effect is
applied.

Change-Id: I7e6305e302cea55a14a1174b484a5dc24b06fabf
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2296548Reviewed-by: Wei Lee <wtlee@chromium.org>
Commit-Queue: Kuo Jen Wei <inker@chromium.org>
Auto-Submit: Kuo Jen Wei <inker@chromium.org>
Cr-Commit-Position: refs/heads/master@{#789405}

chromeos/components/camera_app_ui/resources/BUILD.gn

@@ -12,9 +12,7 @@ group("chrome_camera_app") {
   # According to crbug.com/855747, we should list all the files we want to copy
   # rather than list only the folders to avoid potential building issue and ease
   # the difficulty to diagnose.
-  deps = [
-    "src/strings:camera_strings",
-  ]
+  deps = [ "src/strings:camera_strings" ]
 
   data_deps = [
     ":chrome_camera_app_base",
@@ -203,6 +201,7 @@ copy("chrome_camera_app_js_views_camera") {
 copy("chrome_camera_app_sounds") {
   sources = [
     "src/sounds/record_end.ogg",
+    "src/sounds/record_pause.ogg",
     "src/sounds/record_start.ogg",
     "src/sounds/shutter.ogg",
     "src/sounds/tick_final.ogg",

chromeos/components/camera_app_ui/resources/camera_app_resources.grd

@@ -116,6 +116,7 @@
       <!-- TODO(crbug.com/980846): Add FFMpeg library here with comrpession enabled once video recording is ready to test in SWA -->
 
       <include name="IDR_CAMERA_RECORD_END_OGG" file="src/sounds/record_end.ogg" type="BINDATA" />
+      <include name="IDR_CAMERA_RECORD_PAUSE_OGG" file="src/sounds/record_pause.ogg" type="BINDATA" />
       <include name="IDR_CAMERA_RECORD_START_OGG" file="src/sounds/record_start.ogg" type="BINDATA" />
       <include name="IDR_CAMERA_SHUTTER_OGG" file="src/sounds/shutter.ogg" type="BINDATA" />
       <include name="IDR_CAMERA_TICK_FINAL_OGG" file="src/sounds/tick_final.ogg" type="BINDATA" />

chromeos/components/camera_app_ui/resources/src/css/main.css

@@ -434,7 +434,7 @@ body.taking.video #recordvideo .red-dot {
   width: var(--size);
 }
 
-body:not(.recording-paused).video #pause-recordvideo .red-dot {
+body:not(.recording-ui-paused).video #pause-recordvideo .red-dot {
   --dot-size: 0px;
 }
 
@@ -469,15 +469,15 @@ body.taking.video #recordvideo .white-square {
   width: var(--bar-size);
 }
 
-body.video.recording.recording-paused #recordvideo {
+body.video.recording.recording-ui-paused #recordvideo {
   --size: 44px;
 }
 
-body.video.recording-paused #pause-recordvideo {
+body.video.recording-ui-paused #pause-recordvideo {
   --size: 60px;
 }
 
-body.video.recording-paused #pause-recordvideo .two-bars {
+body.video.recording-ui-paused #pause-recordvideo .two-bars {
   --bar-size: 0px;
 }
 
@@ -993,7 +993,7 @@ body:not(.grid):not(.view-grid-settings) #preview-grid-vertical::before {
   pointer-events: none;
 }
 
-body.recording-paused #record-time {
+body.recording-ui-paused #record-time {
   background-color: black;
 }
 
@@ -1010,8 +1010,8 @@ body.recording-paused #record-time {
   width: 6px;
 }
 
-body.recording-paused #record-time .icon,
-body:not(.recording-paused) #record-time [i18n-content=record_video_paused_msg] {
+body.recording-ui-paused #record-time .icon,
+body:not(.recording-ui-paused) #record-time [i18n-content=record_video_paused_msg] {
   display: none;
 }
 

chromeos/components/camera_app_ui/resources/src/js/state.js

@@ -35,8 +35,12 @@ export const State = {
   PLAYING_RESULT_VIDEO: 'playing-result-video',
   PREVIEW_VERTICAL_DOCK: 'preview-vertical-dock',
   PRINT_PERFORMANCE_LOGS: 'print-performance-logs',
+  // Starts/Ends from start()/at stop() of MediaRecorder.
   RECORDING: 'recording',
+  // Binds with paused state of MediaRecorder.
   RECORDING_PAUSED: 'recording-paused',
+  // Controls appearance of paused/resumed UI.
+  RECORDING_UI_PAUSED: 'recording-ui-paused',
   REVIEW_PHOTO_RESULT: 'review-photo-result',
   REVIEW_RESULT: 'review-result',
   REVIEW_VIDEO_RESULT: 'review-video-result',

chromeos/components/camera_app_ui/resources/src/js/views/camera/modes.js

@@ -718,7 +718,10 @@ export class Video extends ModeBase {
    * Toggles pause/resume state of video recording.
    * @return {!Promise} Promise resolved when recording is paused/resumed.
    */
-  togglePaused() {
+  async togglePaused() {
+    if (!state.get(state.State.RECORDING)) {
+      return;
+    }
     if (this.togglePaused_ !== null) {
       return this.togglePaused_;
     }
@@ -735,12 +738,18 @@ export class Video extends ModeBase {
       this.togglePaused_ = null;
       waitable.signal();
     };
-    this.mediaRecorder_.addEventListener(toggledEvent, onToggled);
+    const playEffect = async () => {
+      state.set(state.State.RECORDING_UI_PAUSED, toBePaused);
+      await sound.play(toBePaused ? '#sound-rec-pause' : '#sound-rec-start');
+    };
 
+    this.mediaRecorder_.addEventListener(toggledEvent, onToggled);
     if (toBePaused) {
+      waitable.wait().then(playEffect);
       this.recordTime_.stop({pause: true});
       this.mediaRecorder_.pause();
     } else {
+      await playEffect();
       this.recordTime_.start({resume: true});
       this.mediaRecorder_.resume();
     }
@@ -841,6 +850,7 @@ export class Video extends ModeBase {
       const onstop = (event) => {
         state.set(state.State.RECORDING, false);
         state.set(state.State.RECORDING_PAUSED, false);
+        state.set(state.State.RECORDING_UI_PAUSED, false);
 
         this.mediaRecorder_.removeEventListener(
             'dataavailable', ondataavailable);
@@ -858,6 +868,7 @@ export class Video extends ModeBase {
       this.mediaRecorder_.start(100);
       state.set(state.State.RECORDING, true);
       state.set(state.State.RECORDING_PAUSED, false);
+      state.set(state.State.RECORDING_UI_PAUSED, false);
     });
   }
 }

chromeos/components/camera_app_ui/resources/src/views/main.html

@@ -387,8 +387,10 @@
       data-timeout="1000">
     <audio id="sound-shutter" src="../sounds/shutter.ogg" data-timeout="350">
     <audio id="sound-rec-start" src="../sounds/record_start.ogg"
-      data-timeout="200">
+      data-timeout="300">
     <audio id="sound-rec-end" src="../sounds/record_end.ogg" data-timeout="450">
+    <audio id="sound-rec-pause" src="../sounds/record_pause.ogg"
+      data-timeout="500">
     <template id="resolution-item-template">
       <label class="menu-item circle resolution-option">
         <input class="icon" type="radio" tabindex="0">