Commit e93aae03 authored by Yunke Zhou's avatar Yunke Zhou Committed by Commit Bot

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: default avatarDenis Kuznetsov [CET] <antrim@chromium.org>
Reviewed-by: default avatarNina Satragno <nsatragno@chromium.org>
Reviewed-by: default avatarRoman Sorokin [CET] <rsorokin@chromium.org>
Commit-Queue: Yunke Zhou <yunkez@google.com>
Cr-Commit-Position: refs/heads/master@{#825266}
parent 61aafe63
...@@ -178,6 +178,8 @@ Polymer({ ...@@ -178,6 +178,8 @@ Polymer({
const lottieElement = /** @type{CrLottieElement} */ ( const lottieElement = /** @type{CrLottieElement} */ (
this.$.setupFingerprint.querySelector('#scannerLocationLottie')); this.$.setupFingerprint.querySelector('#scannerLocationLottie'));
lottieElement.setPlay(playing); lottieElement.setPlay(playing);
/** @type {!CrFingerprintProgressArcElement} */ (this.$.arc)
.setPlay(playing);
} }
}, },
......
...@@ -85,7 +85,7 @@ ...@@ -85,7 +85,7 @@
aria-live="polite" > aria-live="polite" >
</div> </div>
</template> </template>
<cr-fingerprint-progress-arc id="arc" circle-radius="100" <cr-fingerprint-progress-arc id="arc" circle-radius="100" autoplay
hidden="[[!showArc_(step_)]]"> hidden="[[!showArc_(step_)]]">
</cr-fingerprint-progress-arc> </cr-fingerprint-progress-arc>
</div> </div>
......
...@@ -81,7 +81,8 @@ ...@@ -81,7 +81,8 @@
<div id="enroll"> <div id="enroll">
<p>[[progressArcLabel_]]</p> <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>
<div id="chooseName"> <div id="chooseName">
...@@ -116,4 +117,3 @@ ...@@ -116,4 +117,3 @@
</cr-button> </cr-button>
</div> </div>
</cr-dialog> </cr-dialog>
...@@ -32,9 +32,11 @@ ...@@ -32,9 +32,11 @@
<div id="canvasDiv"> <div id="canvasDiv">
<canvas id="canvas" height="240" width="460"></canvas> <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> </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> </iron-icon>
</div> </div>
</template> </template>
......
...@@ -91,6 +91,15 @@ Polymer({ ...@@ -91,6 +91,15 @@ Polymer({
value: DEFAULT_CANVAS_CIRCLE_RADIUS, 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 * Scale factor based the configured radius (circleRadius) vs the default
* radius (DEFAULT_CANVAS_CIRCLE_RADIUS). * radius (DEFAULT_CANVAS_CIRCLE_RADIUS).
...@@ -263,6 +272,16 @@ Polymer({ ...@@ -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 * Updates the lottie animation taking into account the current state and
* whether dark mode is enabled. * whether dark mode is enabled.
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment