Use declarative ui setup in demo.

Also adds a getConfiguration method to the ui, so that the demo does
not need to construct a config object from scratch.

Change-Id: Ic583fbcc0815494c7668242f6c798b8c15f09697

demo/index.html

@@ -114,8 +114,8 @@
       </div>
       <main class="mdl-layout__content" id="main-div">
         <div id="video-bar" class="hidden">
-          <div id="video-container">
-            <video autoplay playsinline id="video"></video>
+          <div data-shaka-player-container data-shaka-player-cast-receiver-id="A15A181D" id="video-container">
+            <video data-shaka-player autoplay playsinline id="video"></video>
           </div>
         </div>
         <div id="contents"></div>

demo/main.js

@@ -144,29 +144,16 @@ class ShakaDemoMain {
 
   /** @private */
   setupPlayer_() {
-    const videoContainer = /** @type {!HTMLElement} */ (
-        document.getElementById('video-container'));
     const video = /** @type {!HTMLVideoElement} */ (this.video_);
+    const ui = video['ui'];
+    this.player_ = ui.getPlayer();
 
     // Register custom controls to the UI.
     shaka.ui.Controls.registerElement('close', new CloseButton.Factory());
 
-    // Set up UI.
-    const uiControlPanelElements = [
-      'time_and_duration',
-      'spacer',
-      'mute',
-      'volume',
-      'fullscreen',
-      'overflow_menu',
-      'close',
-    ];
-    const uiConfig = {
-      castReceiverAppId: '7B25EC44',
-      controlPanelElements: uiControlPanelElements,
-    };
-    this.player_ = new shaka.Player(video);
-    const ui = new shaka.ui.Overlay(this.player_, videoContainer, video);
+    // Configure UI.
+    const uiConfig = ui.getConfiguration();
+    uiConfig.controlPanelElements.push('close');
     ui.configure(uiConfig);
 
     // Add application-level default configs here.  These are not the library

ui/ui.js

@@ -65,6 +65,16 @@ shaka.ui.Overlay.prototype.destroy = async function() {
 };
 
 
+/** @return {!shaka.extern.UIConfiguration} */
+shaka.ui.Overlay.prototype.getConfiguration = function() {
+  let ret = this.defaultConfig_();
+  shaka.util.ConfigUtils.mergeConfigObjects(
+      ret, this.config_, this.defaultConfig_(),
+      /* overrides (only used for player config)*/ {}, /* path */ '');
+  return ret;
+};
+
+
 /**
  * @param {!Object} config This should follow the form of
  *   {@link shaka.extern.UIConfiguration}, but you may omit