Replace voice match already setup video with lottie

The cl replaces the use of webm video with lottie animation in Assistant
opt-in flow.

Also update the style to center the lottie animation.

Bug: b/1012793
Test: Manual Test
Change-Id: I620d01dee2bf9c6670f57ec2390b6b0bf0da53df
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1891336Reviewed-by: Xiyuan Xia <xiyuan@chromium.org>
Reviewed-by: Steven Bennetts <stevenjb@chromium.org>
Commit-Queue: Yue Li <updowndota@chromium.org>
Cr-Commit-Position: refs/heads/master@{#712364}

chrome/browser/resources/chromeos/assistant_optin/assistant_voice_match.css

@@ -32,12 +32,17 @@
   width: 255px;
 }
 
-#already-setup-video-container {
-  text-align: center;
+#already-setup-animation-container {
+  flex-grow: 1;
 }
 
-#already-setup-video {
-  height: 450px;
+#already-setup-animation {
+  height: 300px;
+  left: 50%;
+  position: relative;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 360px;
 }
 
 #intro-container,

chrome/browser/resources/chromeos/assistant_optin/assistant_voice_match.html

@@ -69,10 +69,12 @@
                 i18n-content="assistantVoiceMatchAlreadySetupTitle"></div>
             <div class="content"
                 i18n-content="assistantVoiceMatchAlreadySetupMessage"></div>
-            <div id="already-setup-video-container">
-              <video id="already-setup-video" muted autoplay loop>
-                <source src="voice_already_setup.webm" type="video/webm">
-              </video>
+            <div id="already-setup-animation-container">
+              <div id="already-setup-animation">
+                <cr-lottie id="already-setup-lottie"
+                    animation-url="voice_match_already_setup_animation.json">
+                </cr-lottie>
+              </div>
             </div>
           </div>
         </div>

chrome/browser/resources/chromeos/assistant_optin/assistant_voice_match.js

@@ -48,6 +48,7 @@ Polymer({
         'login.AssistantOptInFlowScreen.VoiceMatchScreen.userActed',
         ['skip-pressed']);
     this.$['voice-match-lottie'].setPlay(false);
+    this.$['already-setup-lottie'].setPlay(false);
   },
 
   /**
@@ -149,6 +150,7 @@ Polymer({
           'login.AssistantOptInFlowScreen.VoiceMatchScreen.userActed',
           ['voice-match-done']);
       this.$['voice-match-lottie'].setPlay(false);
+      this.$['already-setup-lottie'].setPlay(false);
     }, this.doneActionDelayMs_);
   },
 
@@ -158,6 +160,7 @@ Polymer({
   onShow: function() {
     chrome.send('login.AssistantOptInFlowScreen.VoiceMatchScreen.screenShown');
     this.$['voice-match-lottie'].setPlay(true);
+    this.$['already-setup-lottie'].setPlay(true);
     this.$['agree-button'].focus();
     if (loadTimeData.getBoolean('hotwordDspAvailable')) {
       this.$['no-dsp-message'].hidden = true;

chrome/browser/ui/webui/chromeos/assistant_optin/assistant_optin_ui.cc

@@ -96,6 +96,8 @@ AssistantOptInUI::AssistantOptInUI(content::WebUI* web_ui)
   source->SetDefaultResource(IDR_ASSISTANT_OPTIN_HTML);
   source->AddResourcePath("voice_match_animation.json",
                           IDR_ASSISTANT_VOICE_MATCH_ANIMATION);
+  source->AddResourcePath("voice_match_already_setup_animation.json",
+                          IDR_ASSISTANT_VOICE_MATCH_ALREADY_SETUP_ANIMATION);
   source->OverrideContentSecurityPolicyWorkerSrc("worker-src blob: 'self';");
   content::WebUIDataSource::Add(Profile::FromWebUI(web_ui), source);
 

chrome/browser/ui/webui/chromeos/login/oobe_ui.cc

@@ -184,6 +184,8 @@ void AddArcScreensResources(content::WebUIDataSource* source) {
 void AddAssistantScreensResources(content::WebUIDataSource* source) {
   source->AddResourcePath("voice_match_animation.json",
                           IDR_ASSISTANT_VOICE_MATCH_ANIMATION);
+  source->AddResourcePath("voice_match_already_setup_animation.json",
+                          IDR_ASSISTANT_VOICE_MATCH_ALREADY_SETUP_ANIMATION);
   source->OverrideContentSecurityPolicyWorkerSrc("worker-src blob: 'self';");
 }
 

ui/chromeos/resources/ui_chromeos_resources.grd

@@ -101,6 +101,7 @@
 
       <!-- Assistant images. -->
       <structure type="chrome_html" name="IDR_ASSISTANT_VOICE_MATCH_ANIMATION" file="vector/voice_laptop.json" compress="gzip" />
+      <structure type="chrome_html" name="IDR_ASSISTANT_VOICE_MATCH_ALREADY_SETUP_ANIMATION" file="vector/connecting_loop.json" compress="gzip" />
 
     </structures>
   </release>