Oobe: stop fingerprint lottie animation when it is hidden

Bug: 1141030
Change-Id: Ie530eeeb8c6f17a6df7fd2e5b81ebd81a85f039f
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2520839Reviewed-by: Denis Kuznetsov [CET] <antrim@chromium.org>
Reviewed-by: Nina Satragno <nsatragno@chromium.org>
Reviewed-by: Roman Sorokin [CET] <rsorokin@chromium.org>
Commit-Queue: Yunke Zhou <yunkez@google.com>
Cr-Commit-Position: refs/heads/master@{#825266}

chrome/browser/resources/chromeos/login/fingerprint_setup.js

@@ -178,6 +178,8 @@ Polymer({
       const lottieElement = /** @type{CrLottieElement} */ (
           this.$.setupFingerprint.querySelector('#scannerLocationLottie'));
       lottieElement.setPlay(playing);
+      /** @type {!CrFingerprintProgressArcElement} */ (this.$.arc)
+          .setPlay(playing);
     }
   },
 

chrome/browser/resources/settings/chromeos/os_people_page/setup_fingerprint_dialog.html

@@ -85,7 +85,7 @@
              aria-live="polite" >
           </div>
         </template>
-        <cr-fingerprint-progress-arc id="arc" circle-radius="100"
+        <cr-fingerprint-progress-arc id="arc" circle-radius="100" autoplay
             hidden="[[!showArc_(step_)]]">
         </cr-fingerprint-progress-arc>
       </div>

chrome/browser/resources/settings/privacy_page/security_keys_bio_enroll_dialog.html

@@ -81,7 +81,8 @@
 
           <div id="enroll">
             <p>[[progressArcLabel_]]</p>
-            <cr-fingerprint-progress-arc id="arc"></cr-fingerprint-progress-arc>
+            <cr-fingerprint-progress-arc id="arc" autoplay>
+            </cr-fingerprint-progress-arc>
           </div>
 
           <div id="chooseName">
@@ -116,4 +117,3 @@
         </cr-button>
       </div>
     </cr-dialog>
-

ui/webui/resources/cr_elements/cr_fingerprint/cr_fingerprint_progress_arc.html

@@ -32,9 +32,11 @@
 
     <div id="canvasDiv">
       <canvas id="canvas" height="240" width="460"></canvas>
-      <cr-lottie id="scanningAnimation" aria-hidden="true" autoplay>
+      <cr-lottie id="scanningAnimation" aria-hidden="true"
+          autoplay="[[autoplay]]">
       </cr-lottie>
-      <iron-icon id="enrollmentDone" icon="cr-fingerprint-icon:enrollment-done" hidden>
+      <iron-icon id="enrollmentDone" icon="cr-fingerprint-icon:enrollment-done"
+          hidden>
       </iron-icon>
     </div>
   </template>

ui/webui/resources/cr_elements/cr_fingerprint/cr_fingerprint_progress_arc.js

@@ -91,6 +91,15 @@ Polymer({
       value: DEFAULT_CANVAS_CIRCLE_RADIUS,
     },
 
+    /**
+     * Whether lottie animation should be autoplayed.
+     * @type {boolean}
+     */
+    autoplay: {
+      type: Boolean,
+      value: false,
+    },
+
     /**
      * Scale factor based the configured radius (circleRadius) vs the default
      * radius (DEFAULT_CANVAS_CIRCLE_RADIUS).
@@ -263,6 +272,16 @@ Polymer({
     }
   },
 
+  /**
+   * Controls the animation based on the value of |shouldPlay|.
+   * @param {boolean} shouldPlay Will play the animation if true else pauses it.
+   */
+  setPlay(shouldPlay) {
+    const scanningAnimation =
+        /** @type {CrLottieElement|HTMLElement} */ (this.$.scanningAnimation);
+    scanningAnimation.setPlay(shouldPlay);
+  },
+
   /**
    * Updates the lottie animation taking into account the current state and
    * whether dark mode is enabled.