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

<!-- Copyright 2018 The Chromium Authors. All rights reserved.
     Use of this source code is governed by a BSD-style license that can be
     found in the LICENSE file. -->

<link rel="import" href="chrome://resources/html/polymer.html">

<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/cr_lottie/cr_lottie.html">

<link rel="import" href="/components/behaviors/multi_step_behavior.html">
<link rel="import" href="/components/behaviors/oobe_dialog_host_behavior.html">
<link rel="import" href="/components/behaviors/oobe_i18n_behavior.html">
<link rel="import" href="/components/buttons/oobe_next_button.html">
<link rel="import" href="/components/buttons/oobe_text_button.html">
<link rel="import" href="/components/common_styles/oobe_dialog_host_styles.html">
<link rel="import" href="/components/dialogs/oobe_adaptive_dialog.html">

<dom-module id="assistant-voice-match">
  <template>
    <style include="oobe-dialog-host-styles"></style>
    <link rel="stylesheet" href="assistant_shared_styles.css">
    <link rel="stylesheet" href="assistant_voice_match.css">
    <oobe-adaptive-dialog id="voiceMatchIntroDialog" role="dialog"
        aria-label$="[[i18nDynamic(locale, 'assistantVoiceMatchTitle')]]"
        hide-shadow for-step="intro">
      <iron-icon slot="icon" icon="assistant-32:assistant"
          aria-label$="[[i18nDynamic(locale, 'assistantLogo')]]">
      </iron-icon>
      <h1 slot="title">
        [[i18nDynamic(locale, 'assistantVoiceMatchTitle')]]
      </h1>
      <div slot="subtitle" id="message-horizontal-mode"
          inner-h-t-m-l="[[getSubtitleMessage_(locale)]]">
      </div>
      <div slot="content" class="flex layout vertical center center-justified">
        <div id="voice-match-animation">
          <cr-lottie id="voice-match-lottie"
              animation-url="voice_match_animation.json">
          </cr-lottie>
        </div>
        <div id="message-vertical-mode"
            inner-h-t-m-l="[[getSubtitleMessage_(locale)]]">
        </div>
      </div>
      <div slot="bottom-buttons">
        <oobe-text-button id="skip-button" on-click="onSkipTap_"
            disabled="[[buttonsDisabled]]"
            text-key="assistantOptinNoThanksButton">
        </oobe-text-button>
        <oobe-text-button id="agree-button" inverse="[[!equalWeightButtons_]]"
            on-click="onAgreeTap_" disabled="[[buttonsDisabled]]"
            text-key="assistantOptinAgreeButton">
        </oobe-text-button>
      </div>
    </oobe-adaptive-dialog>

    <oobe-adaptive-dialog id="voiceMatchRecordingDialog" role="dialog"
        aria-label$="[[i18nDynamic(locale, 'assistantVoiceMatchRecording')]]"
        hide-shadow for-step="recording, completed">
      <iron-icon slot="icon" icon="assistant-32:assistant"
          aria-label$="[[i18nDynamic(locale, 'assistantLogo')]]">
      </iron-icon>
      <h1 slot="title" for-step="recording">
        [[i18nDynamic(locale, 'assistantVoiceMatchRecording')]]
      </h1>
      <h1 slot="title" for-step="completed">
        [[i18nDynamic(locale, 'assistantVoiceMatchCompleted')]]
      </h1>
      <div slot="subtitle">
        [[i18nDynamic(locale, 'assistantVoiceMatchFooter')]]
      </div>
      <div slot="content" class="landscape-header-aligned
          portrait-horizontal-centered">
        <div id="voice-match-entries">
          <voice-match-entry id="voice-entry-0">
            <div slot="entry-content">
              [[i18nDynamic(locale, 'assistantVoiceMatchInstruction0')]]
            </div>
          </voice-match-entry>
          <voice-match-entry id="voice-entry-1">
            <div slot="entry-content">
              [[i18nDynamic(locale, 'assistantVoiceMatchInstruction1')]]
            </div>
          </voice-match-entry>
          <voice-match-entry id="voice-entry-2">
            <div slot="entry-content">
              [[i18nDynamic(locale, 'assistantVoiceMatchInstruction2')]]
            </div>
          </voice-match-entry>
          <voice-match-entry id="voice-entry-3">
            <div slot="entry-content">
              [[i18nDynamic(locale, 'assistantVoiceMatchInstruction3')]]
            </div>
          </voice-match-entry>
        </div>
        <div id="loading-animation" hidden>
          <paper-spinner-lite id="loading-spinner" active>
          </paper-spinner-lite>
        </div>
      </div>
      <div slot="bottom-buttons">
        <oobe-text-button id="later-button" on-click="onSkipTap_"
            disabled="[[buttonsDisabled]]" text-key="assistantOptinSkipButton">
        </oobe-text-button>
      </div>
    </oobe-adaptive-dialog>

    <oobe-adaptive-dialog id="voiceMatchAlreadySetupDialog" role="dialog"
        aria-label$=
            "[[i18nDynamic(locale, 'assistantVoiceMatchAlreadySetupTitle')]]"
        hide-shadow for-step="already-setup">
      <iron-icon slot="icon" icon="assistant-32:assistant"
          aria-label$="[[i18nDynamic(locale, 'assistantLogo')]]">
      </iron-icon>
      <h1 slot="title">
        [[i18nDynamic(locale, 'assistantVoiceMatchAlreadySetupTitle')]]
      </h1>
      <div slot="subtitle">
        [[i18nDynamic(locale, 'assistantVoiceMatchAlreadySetupMessage')]]
      </div>
      <div slot="content" class="flex layout vertical center center-justified">
        <img id="ready-img" class="oobe-illustration" aria-hidden="true"
            srcset="assistant_ready_1x.svg 1x, assistant_ready_2x.svg 2x">
      </div>
    </oobe-adaptive-dialog>
  </template>
</dom-module>