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({
const lottieElement = /** @type{CrLottieElement} */ (
this.$.setupFingerprint.querySelector('#scannerLocationLottie'));
lottieElement.setPlay(playing);
/** @type {!CrFingerprintProgressArcElement} */ (this.$.arc)
.setPlay(playing);
}
},
......
......@@ -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>
......
......@@ -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>
......@@ -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>
......
......@@ -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.
......
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