ChromeOS OOBE: Add Welcome screen animations.

This Cl replaces static images with animations.

Bug: 852038
Change-Id: I8185420aed0ed23c080ac0bc7a2270d3ac4c5b7b
Reviewed-on: https://chromium-review.googlesource.com/1166590
Commit-Queue: Alexander Alekseev <alemate@chromium.org>
Reviewed-by: Wenzhao (Colin) Zang <wzang@chromium.org>
Cr-Commit-Position: refs/heads/master@{#581735}

chrome/browser/resources/chromeos/login/oobe_welcome.js

@@ -94,6 +94,10 @@ Polymer({
       if (behavior.onBeforeShow)
         behavior.onBeforeShow.call(this);
     });
+
+    let activeScreen = this.getActiveScreen_();
+    if (activeScreen.show)
+      activeScreen.show();
   },
 
   /**

chrome/browser/resources/chromeos/login/oobe_welcome_dialog.html

@@ -66,17 +66,41 @@
         <div class="layout vertical end-justified" id="titleContainer">
           <h1 id="title">[[i18nDynamic(locale, 'welcomeScreenGreeting')]]</h1>
         </div>
-        <div class="welcome-illustration" hidden="[[isInTabletMode]]">
-          <img srcset="images/welcome_illustration_1x.png 1x,
-                       images/welcome_illustration_2x.png 2x">
-        </div>
-        <div class="welcome-illustration" hidden="[[!isInTabletMode]]">
-          <img hidden="[[!isInPortraitMode]]"
-              srcset="images/welcome_illustration_tablet_mode_portraight_1x.png 1x,
-                      images/welcome_illustration_tablet_mode_portraight_2x.png 2x">
-          <img hidden="[[isInPortraitMode]]"
-              srcset="images/welcome_illustration_tablet_mode_1x.png 1x,
-                      images/welcome_illustration_tablet_mode_2x.png 2x">
+        <div class="welcome-illustration">
+          <if expr="chromeos and _google_chrome">
+            <video muted hidden oobe_devices="laptop_G"
+                oobe_orientations="portrait,landscape" oobe_types="intro"
+                src="../../../internal/resources/chromeos/animations/oobe-welcome/laptop_G_intro.webm">
+            </video>
+            <video muted loop hidden oobe_devices="laptop_G"
+                oobe_orientations="portrait,landscape" oobe_types="loop"
+                src="../../../internal/resources/chromeos/animations/oobe-welcome/laptop_G_loop.webm">
+            </video>
+            <video muted hidden oobe_devices="laptop"
+                oobe_orientations="portrait,landscape" oobe_types="intro"
+                src="../../../internal/resources/chromeos/animations/oobe-welcome/laptop_intro.webm">
+            </video>
+            <video muted loop hidden oobe_devices="laptop"
+                oobe_orientations="portrait,landscape" oobe_types="loop"
+                src="../../../internal/resources/chromeos/animations/oobe-welcome/laptop_loop.webm">
+            </video>
+            <video muted hidden oobe_devices="tablet_G"
+                oobe_orientations="portrait,landscape" oobe_types="intro"
+                src="../../../internal/resources/chromeos/animations/oobe-welcome/tablet_G_intro.webm">
+            </video>
+            <video muted loop hidden oobe_devices="tablet_G"
+                oobe_orientations="portrait,landscape" oobe_types="loop"
+                src="../../../internal/resources/chromeos/animations/oobe-welcome/tablet_G_loop.webm">
+            </video>
+            <video muted hidden oobe_devices="tablet"
+                oobe_orientations="portrait,landscape" oobe_types="intro"
+                src="../../../internal/resources/chromeos/animations/oobe-welcome/tablet_intro.webm">
+            </video>
+            <video muted loop hidden oobe_devices="tablet"
+                oobe_orientations="portrait,landscape" oobe_types="loop"
+                src="../../../internal/resources/chromeos/animations/oobe-welcome/tablet_loop.webm">
+            </video>
+          </if>
         </div>
         <div hidden="[[!debuggingLinkVisible]]">
           <a href="#" on-tap="onDebuggingLinkClicked_">

chrome/browser/resources/chromeos/login/oobe_welcome_dialog.js

@@ -3,9 +3,9 @@
 // found in the LICENSE file.
 
 {
-  var LONG_TOUCH_TIME_MS = 1000;
+  const LONG_TOUCH_TIME_MS = 1000;
 
-  function LongTouchDetector(element, callback) {
+  function TitleLongTouchDetector(element, callback) {
     this.callback_ = callback;
 
     element.addEventListener('touchstart', this.onTouchStart_.bind(this));
@@ -17,7 +17,7 @@
     element.addEventListener('mouseleave', this.killTimer_.bind(this));
   }
 
-  LongTouchDetector.prototype = {
+  TitleLongTouchDetector.prototype = {
     /**
      * This is timeout ID used to kill window timeout that fires "detected"
      * callback if touch event was cancelled.
@@ -57,6 +57,195 @@
     },
   };
 
+  const VIDEO_DEVICE = {
+    LAPTOP: 'laptop',
+    TABLET: 'tablet',
+    LAPTOP_G: 'laptop_G',
+    TABLET_G: 'tablet_G',
+  };
+
+  const VIDEO_ORIENTATION = {
+    PORTRAIT: 'portrait',
+    LANDSCAPE: 'landscape',
+  };
+
+  const VIDEO_TYPE = {
+    INTRO: 'intro',
+    LOOP: 'loop',
+  };
+
+  class WelcomeVideoController {
+    /**
+     * This calculates key that is used to identify <video> node in internal
+     * mapping between possible video configurations and actual videos.
+     *
+     * @param {VIDEO_DEVICE} device Allowed device type.
+     * @param {VIDEO_ORIENTATION} orientation Allowed orientation.
+     * @param {VIDEO_TYPE} type Allowed type.
+     * @return {String} Returns <video> key to be stored in this.videos.
+     * @private
+     */
+    calcKey_(device, orientation, type) {
+      return device + '-' + orientation + '-' + type;
+    }
+
+    /**
+     * @param {VIDEO_DEVICE} device Allowed device type.
+     * @param {VIDEO_ORIENTATION} orientation Allowed orientation.
+     */
+    constructor(device, orientation) {
+      this.devices = new Set();
+      this.orientations = new Set();
+      this.types = new Set();
+      for (let key in VIDEO_DEVICE)
+        this.devices.add(VIDEO_DEVICE[key]);
+
+      for (let key in VIDEO_ORIENTATION)
+        this.orientations.add(VIDEO_ORIENTATION[key]);
+
+      for (let key in VIDEO_TYPE)
+        this.types.add(VIDEO_TYPE[key]);
+
+      assert(this.devices.has(device));
+      assert(this.orientations.has(orientation));
+
+      this.device = device;
+      this.orientation = orientation;
+      this.type = VIDEO_TYPE.INTRO;
+
+      // This is map from 'device-orientation-video_type' to video DOM object.
+      this.videos = new Map();
+    }
+
+    /**
+     * Returns currently playing video.
+     * If none are playing, falls back to currently visible one, because
+     * it might have accidentally stopped because of media error.
+     *
+     * @return {Object|null} Returns <video> DOM node.
+     * @private
+     */
+    getActiveVideo_() {
+      for (let node of this.videos.values()) {
+        if (!node.paused)
+          return node;
+      }
+      // Media decode error stops video play. Try 'hidden' instead.
+      for (let node of this.videos.values()) {
+        if (!node.hasAttribute('hidden'))
+          return node;
+      }
+      return null;
+    }
+
+    /**
+     * @param {Object} video <video> DOM node with valid |oobe_devices|,
+     *     |oobe_orientations| and |oobe_types|.
+     * |oobe_devices| is a comma-separated list of VIDEO_DEVICE values.
+     * |oobe_orientations| is a comma-separated list of VIDEO_ORIENTATION
+     *     values.
+     * |oobe_types| is a comma-separated list of VIDEO_TYPE values.
+     */
+    add(video) {
+      // Split strings by comma and trim space.
+      let devices = video.getAttribute('oobe_devices')
+                        .split(',')
+                        .map((str) => str.replace(/\s/g, ''));
+      let orientations = video.getAttribute('oobe_orientations')
+                             .split(',')
+                             .map((str) => str.replace(/\s/g, ''));
+      let types = video.getAttribute('oobe_types')
+                      .split(',')
+                      .map((str) => str.replace(/\s/g, ''));
+
+      for (let device of devices) {
+        assert(this.devices.has(device));
+
+        for (let orientation of orientations) {
+          assert(this.orientations.has(orientation));
+
+          for (let type of types) {
+            assert(this.types.has(type));
+
+            let key = this.calcKey_(device, orientation, type);
+            assert(!this.videos.has(key));
+
+            this.videos.set(key, video);
+
+            if (type == VIDEO_TYPE.INTRO)
+              video.addEventListener('ended', (event) => {
+                event.target.setAttribute('hidden', '');
+                this.type = VIDEO_TYPE.LOOP;
+                this.play();
+              });
+          }
+        }
+      }
+    }
+
+    /**
+     * Hides all videos.
+     * @private
+     */
+    hideAll_() {
+      for (let node of this.videos.values())
+        node.setAttribute('hidden', '');
+    }
+
+    /**
+     * Updates screen configuration, and switches to appropriate video to match
+     * it.
+     *
+     * @param {String} device Allowed device type.
+     * @param {String} orientation Allowed orientation.
+     */
+    updateConfiguration(device, orientation) {
+      assert(this.devices.has(device));
+      assert(this.orientations.has(orientation));
+
+      if (device === this.device && orientation === this.orientation)
+        return;
+
+      this.device = device;
+      this.orientation = orientation;
+      let previousVideo = this.getActiveVideo_();
+      let nextKey = this.calcKey_(device, orientation, this.type);
+      let nextVideo = this.videos.get(nextKey);
+
+      // Some video may match more than one key.
+      if (previousVideo === nextVideo)
+        return;
+
+      if (previousVideo)
+        previousVideo.pause();
+
+      if (previousVideo && nextVideo)
+        nextVideo.currentTime = previousVideo.currentTime;
+
+      this.hideAll_();
+      if (nextVideo) {
+        nextVideo.removeAttribute('hidden');
+        nextVideo.play();
+      }
+    }
+
+    /**
+     *  Starts active video.
+     */
+    play() {
+      if (this.getActiveVideo_())
+        return;
+
+      let key = this.calcKey_(this.device, this.orientation, this.type);
+      let video = this.videos.get(key);
+
+      if (video) {
+        video.removeAttribute('hidden');
+        video.play();
+      }
+    }
+  }
+
   Polymer({
     is: 'oobe-welcome-dialog',
 
@@ -87,19 +276,44 @@
       /**
        * True when in tablet mode.
        */
-      isInTabletMode: Boolean,
+      isInTabletMode: {
+        type: Boolean,
+        observer: 'updateVideoMode_',
+      },
 
       /**
-       * True when scree orientation is portraight.
+       * True when scree orientation is portrait.
        */
-      isInPortraitMode: Boolean,
+      isInPortraitMode: {
+        type: Boolean,
+        observer: 'updateVideoMode_',
+      }
+    },
+
+    getVideoDeviceType_: function() {
+      return this.isInTabletMode ? VIDEO_DEVICE.TABLET : VIDEO_DEVICE.LAPTOP;
+    },
+
+    getVideoOrientationType_: function() {
+      return this.isInPortraitMode ? VIDEO_ORIENTATION.PORTRAIT :
+                                     VIDEO_ORIENTATION.LANDSCAPE;
+    },
+
+    updateVideoMode_: function() {
+      this.welcomeVideoController_.updateConfiguration(
+          this.getVideoDeviceType_(), this.getVideoOrientationType_());
     },
 
     /**
-     * @private {LongTouchDetector}
+     * @private {TitleLongTouchDetector}
      */
     titleLongTouchDetector_: null,
 
+    /**
+     * @private {WelcomeVideoController}
+     */
+    welcomeVideoController_: null,
+
     /**
      * This is stored ID of currently focused element to restore id on returns
      * to this dialog from Language / Timezone Selection dialogs.
@@ -141,14 +355,20 @@
     },
 
     attached: function() {
-      this.titleLongTouchDetector_ = new LongTouchDetector(
+      this.welcomeVideoController_ = new WelcomeVideoController(
+          this.getVideoDeviceType_(), this.getVideoOrientationType_());
+      let videos = Polymer.dom(this.root).querySelectorAll('video');
+      for (let video of videos)
+        this.welcomeVideoController_.add(video);
+
+      this.titleLongTouchDetector_ = new TitleLongTouchDetector(
           this.$.title, this.onTitleLongTouch_.bind(this));
       this.focus();
     },
 
     focus: function() {
       this.onWindowResize();
-      var focusedElement = this.$[this.focusedElement_];
+      let focusedElement = this.$[this.focusedElement_];
       if (focusedElement)
         focusedElement.focus();
     },
@@ -158,6 +378,7 @@
      */
     show: function() {
       this.focus();
+      this.welcomeVideoController_.play();
     },
 
     /**