[CCA] Update tick sound and shutter sound.

Bug: 1004190
Test: Test on 3 and 10 second tick, see if tick sound and shutter sound
changed as expected.

Change-Id: Ib3e2f80d7c4edbdd5ac0f9f443bd717ba708603c
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1837431Reviewed-by: Shik Chen <shik@chromium.org>
Commit-Queue: Kuo Jen Wei <inker@chromium.org>
Auto-Submit: Kuo Jen Wei <inker@chromium.org>
Cr-Commit-Position: refs/heads/master@{#702341}

chrome/browser/resources/chromeos/camera/BUILD.gn

@@ -222,7 +222,9 @@ copy("chrome_camera_app_sounds") {
     "src/sounds/record_end.ogg",
     "src/sounds/record_start.ogg",
     "src/sounds/shutter.ogg",
-    "src/sounds/tick.ogg",
+    "src/sounds/tick_final.ogg",
+    "src/sounds/tick_inc.ogg",
+    "src/sounds/tick_start.ogg",
   ]
 
   outputs = [

chrome/browser/resources/chromeos/camera/Makefile

@@ -164,7 +164,9 @@ RESOURCES = \
 	src/sounds/record_end.ogg \
 	src/sounds/record_start.ogg \
 	src/sounds/shutter.ogg \
-	src/sounds/tick.ogg \
+	src/sounds/tick_final.ogg \
+	src/sounds/tick_inc.ogg \
+	src/sounds/tick_start.ogg \
 	src/views/main.html \
 	src/LICENSE \
 

chrome/browser/resources/chromeos/camera/camera_resources.grd

@@ -90,7 +90,9 @@
       <include name="IDR_CAMERA_RECORD_END_OGG" file="src/sounds/record_end.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_OGG" file="src/sounds/tick.ogg" type="BINDATA" />
+      <include name="IDR_CAMERA_TICK_FINAL_OGG" file="src/sounds/tick_final.ogg" type="BINDATA" />
+      <include name="IDR_CAMERA_TICK_INC_OGG" file="src/sounds/tick_inc.ogg" type="BINDATA" />
+      <include name="IDR_CAMERA_TICK_START_OGG" file="src/sounds/tick_start.ogg" type="BINDATA" />
       <include name="IDR_CAMERA_CAMERA_MODE_SQUARE_SVG" file="src/images/camera_mode_square.svg" type="BINDATA" />
       <include name="IDR_CAMERA_SETTINGS_BUTTON_BACK_SVG" file="src/images/settings_button_back.svg" type="BINDATA" />
       <include name="IDR_CAMERA_CAMERA_MODE_PORTRAIT_SVG" file="src/images/camera_mode_portrait.svg" type="BINDATA" />

chrome/browser/resources/chromeos/camera/src/js/views/camera/timertick.js

@@ -51,12 +51,20 @@ cca.views.camera.timertick.start = function() {
       reject(new Error('cancel'));
     };
 
-    var tickCounter = cca.state.get('_10sec') ? 10 : 3;
+    let tickCounter = cca.state.get('_10sec') ? 10 : 3;
+    const sounds = {
+      1: '#sound-tick-final',
+      2: '#sound-tick-inc',
+      3: '#sound-tick-inc',
+      [tickCounter]: '#sound-tick-start',
+    };
     var onTimerTick = () => {
       if (tickCounter == 0) {
         resolve();
       } else {
-        cca.sound.play('#sound-tick');
+        if (sounds[tickCounter] !== undefined) {
+          cca.sound.play(sounds[tickCounter]);
+        }
         tickMsg.textContent = tickCounter + '';
         cca.util.animateOnce(tickMsg);
         tickTimeout = setTimeout(onTimerTick, 1000);

chrome/browser/resources/chromeos/camera/src/views/main.html

@@ -414,9 +414,14 @@
     </div>
     <div class="centered-overlay" id="toast" aria-live="polite"></div>
     <div id="tooltip" aria-hidden="true"></div>
-    <audio id="sound-tick" src="../sounds/tick.ogg" data-timeout="200">
+    <audio id="sound-tick-final" src="../sounds/tick_final.ogg"
+      data-timeout="1000">
+    <audio id="sound-tick-inc" src="../sounds/tick_inc.ogg" data-timeout="1000">
+    <audio id="sound-tick-start" src="../sounds/tick_start.ogg"
+      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">
+    <audio id="sound-rec-start" src="../sounds/record_start.ogg"
+      data-timeout="200">
     <audio id="sound-rec-end" src="../sounds/record_end.ogg" data-timeout="450">
     <template id="resolution-item-template">
       <label class="menu-item circle">