Replace voice match video with lottie animation

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

Bug: 1001713
Test: Manual Test
Change-Id: I54162809464cdcb16e749dd74ec35122842f5237
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1804693
Reviewed-by: Xiaohui Chen <xiaohuic@chromium.org>
Reviewed-by: Steven Bennetts <stevenjb@chromium.org>
Reviewed-by: Xiyuan Xia <xiyuan@chromium.org>
Commit-Queue: Yue Li <updowndota@chromium.org>
Cr-Commit-Position: refs/heads/master@{#696956}

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

@@ -19,15 +19,17 @@
   color: #757575;
 }
 
-#voice-match-video-container {
+#voice-match-animation-container {
   flex-grow: 1;
 }
 
-#voice-match-video {
+#voice-match-animation {
+  height: 170px;
   left: 50%;
   position: relative;
   top: 50%;
   transform: translate(-50%, -50%);
+  width: 255px;
 }
 
 #already-setup-video-container {

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

@@ -4,6 +4,7 @@
 
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
 <link rel="import" href="chrome://resources/cr_elements/icons.html">
+<link rel="import" href="chrome://resources/cr_elements/chromeos/cr_lottie/cr_lottie.html">
 <dom-module id="assistant-voice-match">
   <template>
     <link rel="stylesheet" href="../login/oobe_flex_layout.css">
@@ -24,10 +25,11 @@
             <div class="content" id="no-dsp-message"
                 i18n-content="assistantVoiceMatchNoDspMessage">
             </div>
-            <div id="voice-match-video-container">
-              <video id="voice-match-video" muted autoplay loop>
-                <source src="voice_laptop_1x.webm" type="video/webm">
-              </video>
+            <div id="voice-match-animation-container">
+              <div id="voice-match-animation">
+                <cr-lottie animation-url="voice_match_animation.json">
+                </cr-lottie>
+              </div>
             </div>
           </div>
           <div id="recording-container">

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

@@ -27,6 +27,7 @@
 #include "content/public/browser/web_ui_data_source.h"
 #include "content/public/common/content_features.h"
 #include "net/base/url_util.h"
+#include "ui/chromeos/resources/grit/ui_chromeos_resources.h"
 #include "ui/views/widget/widget.h"
 #include "ui/wm/core/window_animations.h"
 
@@ -80,6 +81,9 @@ AssistantOptInUI::AssistantOptInUI(content::WebUI* web_ui)
   source->AddResourcePath("assistant_logo.png", IDR_ASSISTANT_LOGO_PNG);
   source->AddBoolean("hotwordDspAvailable", chromeos::IsHotwordDspAvailable());
   source->SetDefaultResource(IDR_ASSISTANT_OPTIN_HTML);
+  source->AddResourcePath("voice_match_animation.json",
+                          IDR_ASSISTANT_VOICE_MATCH_ANIMATION);
+  source->OverrideContentSecurityPolicyWorkerSrc("worker-src blob: 'self';");
   content::WebUIDataSource::Add(Profile::FromWebUI(web_ui), source);
 
   // Do not zoom for Assistant opt-in web contents.

ui/chromeos/resources/ui_chromeos_resources.grd

@@ -99,6 +99,9 @@
       <!-- Kerberos. -->
       <structure type="chrome_scaled_image" name="IDR_KERBEROS_ICON_KEY" file="kerberos/vpn_key_grey600_24dp.png" />
 
+      <!-- Assistant images. -->
+      <structure type="chrome_html" name="IDR_ASSISTANT_VOICE_MATCH_ANIMATION" file="vector/voice_laptop.json" compress="gzip" />
+
     </structures>
   </release>
 </grit>