[CrOS] OOBE: pause video when welcome screen is hidden

- Add a WelcomeVideoController.pause() function
- Make WelcomeVideoController.play() call play on the active video, too
- Add a welcome screen hide() function, and call it from a new observer
  of the hidden attribute, when the screen becomes hidden
- Call hideAllScreens() also when leaving oobe_welcome via onBeforeHide
- Mark the active screen as not hidden in the welcome screen onBeforeShow(),
  to handle going back from the network and debug screens

R=rsorokin@google.com
Signed-off-by: Guido Trotter <ultrotter@chromium.org>
Change-Id: Id5eecb1fa88bab598ab16e5152051fc8c14a6ca9
Fixed: 1123835
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2529100Reviewed-by: Roman Sorokin [CET] <rsorokin@chromium.org>
Reviewed-by: Denis Kuznetsov [CET] <antrim@chromium.org>
Cr-Commit-Position: refs/heads/master@{#827712}

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

@@ -112,12 +112,20 @@ Polymer({
     cr.ui.login.invokePolymerMethod(this.$.welcomeScreen, 'onBeforeShow');
 
     let activeScreen = this.getActiveScreen_();
+    activeScreen.hidden = false;
     if (activeScreen.show)
       activeScreen.show();
 
     window.setTimeout(this.applyOobeConfiguration_.bind(this), 0);
   },
 
+  /**
+   * Event handler that is invoked just before the screen is hidden.
+   */
+  onBeforeHide() {
+    this.hideAllScreens_();
+  },
+
   /**
    * This is called when UI strings are changed.
    * Overridden from LoginScreenBehavior.

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

@@ -234,8 +234,12 @@
      *  Starts active video.
      */
     play() {
-      if (this.getActiveVideo_())
+      let activeVideo = this.getActiveVideo_();
+      if (activeVideo) {
+        // The active video could be paused, even if it hasn't changed
+        activeVideo.play();
         return;
+      }
 
       let key = this.calcKey_(this.device, this.orientation, this.type);
       let video = this.videos.get(key);
@@ -245,6 +249,15 @@
         video.play();
       }
     }
+    /**
+     *  Pauses active video.
+     */
+    pause() {
+      let video = this.getActiveVideo_();
+      if (video) {
+        video.pause();
+      }
+    }
   }
 
   Polymer({
@@ -289,6 +302,15 @@
       isInPortraitMode: {
         type: Boolean,
         observer: 'updateVideoMode_',
+      },
+
+      /**
+       * Observer for when this screen is hidden, or shown.
+       */
+      hidden: {
+        type: Boolean,
+        observer: 'updateHidden_',
+        reflectToAttribute: true,
       }
     },
 
@@ -390,6 +412,24 @@
       this.welcomeVideoController_.play();
     },
 
+    /*
+     * Observer method for changes to the hidden property
+     */
+    updateHidden_(newValue, oldValue) {
+      /*
+       * hidden becomes True
+       */
+      if (newValue && newValue != oldValue) {
+        // Pause the welcome video to avoid using resources while
+        // this page is not visible
+        this.welcomeVideoController_.pause();
+      }
+      /* We are not calling show() when hidden becomes false
+       * as the pattern used in these classes is different, and show() is called
+       * by the parent anyway.
+       */
+    },
+
     /**
      * This function formats message for labels.
      * @param String label i18n string ID.