Re-added hidden 'noinput' param to demo.

Change-Id: I137fdaf04342f20c8e389340473d0994c527998c
shaka-project · Jul 29, 2019 · 2c51de2 · 2c51de2
1 parent f33395e
commit 2c51de2
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 22 deletions.
diff --git a/demo/demo.less b/demo/demo.less
@@ -382,6 +382,22 @@ footer .mdl-mega-footer__link-list {
    * mobile screens. */
   max-width: 100%;
 }
+#video-bar.no-input-sized {
+  /* Add some additional padding so that TV overscan doesn't cut off the version
+   * number or other information we might need. */
+  padding: 2.5em 2em;
+
+  /* Constrain the body to its size minus margin and padding, so that nested
+   * elements can constrain to the body. */
+  width: 100%;
+  width: calc(100% - 4em);
+  height: 100%;
+  height: calc(100% - 5em);
+}
+.video-container.no-input-sized {
+  width: 100%;
+  height: 100%;
+}
 
 #video {
   /* Fill whatever space we're given, whether fullscreen or not. */

diff --git a/demo/index.html b/demo/index.html
@@ -84,18 +84,21 @@
   </head>
   <body>
     <div id="main-layout" class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
-      <header class="app-header mdl-layout__header">
+      <header class="app-header mdl-layout__header should-hide-in-no-input-mode">
         <header class="mdl-layout__header-row" id="nav-button-container">
           <img alt="Shaka Player Logo" src="shaka_logo_trans.png" class="logo" />
           <button id="nav-button-front" class="mdl-button mdl-js-button mdl-js-ripple-effect should-disable-on-fail" defaultselected>HOME</button>
           <button id="nav-button-search" class="mdl-button mdl-js-button mdl-js-ripple-effect should-disable-on-fail">SEARCH</button>
           <button id="nav-button-custom" class="mdl-button mdl-js-button mdl-js-ripple-effect should-disable-on-fail">CUSTOM CONTENT</button>
           <div class="mdl-layout-spacer"></div>
-          <div id="version-block">
-            <span id="version-string"></span>
+          <div class="version-block">
+            <span class="version-string"></span>
           </div>
         </header>
       </header>
+      <div class="version-block hidden should-show-in-no-input-mode">
+        <span class="version-string"></span>
+      </div>
       <div class="mdl-layout__drawer hamburger-menu">
         <div id="hamburger-menu-title" class="mdl-layout-title">
           Shaka Player Demo Config
@@ -116,7 +119,7 @@
           </div>
         </div>
         <div id="contents"></div>
-        <footer class="mdl-mega-footer">
+        <footer class="mdl-mega-footer should-hide-in-no-input-mode">
           <div class="mdl-mega-footer__middle-section">
 
             <div class="mdl-mega-footer__drop-down-section">

diff --git a/demo/main.js b/demo/main.js
@@ -65,6 +65,9 @@ shakaDemo.Main = class {
 
     /** @private {string} */
     this.uiLocale_ = '';
+
+    /** @private {boolean} */
+    this.noInput_ = false;
   }
 
   /**
@@ -91,8 +94,8 @@ shakaDemo.Main = class {
     document.getElementById('error-display-close-button').addEventListener(
         'click', (event) => this.closeError_());
 
-    // Set up version string.
-    this.setUpVersionString_();
+    // Set up version strings in the appropriate divs.
+    this.setUpVersionStrings_();
   }
 
   /**
@@ -155,15 +158,35 @@ shakaDemo.Main = class {
       }
     }
 
+    // Optionally enter noinput mode. This has to happen before setting up the
+    // player.
+    this.noInput_ = 'noinput' in this.getParams_();
     this.setupPlayer_();
     this.readHash_();
     window.addEventListener('hashchange', () => this.hashChanged_());
 
     await this.setupStorage_();
 
-    // The main page is loaded. Dispatch an event, so the various
-    // configurations will load themselves.
-    this.dispatchEventWithName_('shaka-main-loaded');
+    if (this.noInput_) {
+      // Set the page to noInput mode, disabling the header and footer.
+      const hideClass = 'should-hide-in-no-input-mode';
+      for (const element of document.getElementsByClassName(hideClass)) {
+        this.hideNode_(element);
+      }
+      const showClass = 'should-show-in-no-input-mode';
+      for (const element of document.getElementsByClassName(showClass)) {
+        this.showNode_(element);
+      }
+      // Also fullscreen the container.
+      this.container_.classList.add('no-input-sized');
+      document.getElementById('video-bar').classList.add('no-input-sized');
+    } else {
+      // The main page is loaded. Dispatch an event, so the various
+      // configurations will load themselves.
+      // But don't dispatch the event if in noInput mode; we don't need the
+      // side-tabs to be set up.
+      this.dispatchEventWithName_('shaka-main-loaded');
+    }
 
     // Update the componentHandler, to account for any new MDL elements added.
     componentHandler.upgradeDom();
@@ -186,14 +209,19 @@ shakaDemo.Main = class {
     const ui = video['ui'];
     this.player_ = ui.getControls().getPlayer();
 
-    // Register custom controls to the UI.
-    const factory = new shakaDemo.CloseButton.Factory();
-    shaka.ui.Controls.registerElement('close', factory);
+    if (!this.noInput_) {
+      // Don't add the close button if in noInput mode; it doesn't make much
+      // sense to stop playing a video if you can't start playing other videos.
 
-    // Configure UI.
-    const uiConfig = ui.getConfiguration();
-    uiConfig.controlPanelElements.push('close');
-    ui.configure(uiConfig);
+      // Register custom controls to the UI.
+      const factory = new shakaDemo.CloseButton.Factory();
+      shaka.ui.Controls.registerElement('close', factory);
+
+      // Configure UI.
+      const uiConfig = ui.getConfiguration();
+      uiConfig.controlPanelElements.push('close');
+      ui.configure(uiConfig);
+    }
 
     // Add application-level default configs here.  These are not the library
     // defaults, but they are the application defaults.  This will affect the
@@ -1026,6 +1054,10 @@ shakaDemo.Main = class {
       }
     }
 
+    if (this.noInput_) {
+      params.push('noinput');
+    }
+
     if (this.nativeControlsEnabled_) {
       params.push('nativecontrols');
     }
@@ -1170,8 +1202,12 @@ shakaDemo.Main = class {
     document.dispatchEvent(event);
   }
 
-  /** @private */
-  setUpVersionString_() {
+  /**
+   * Sets the "version-string" divs to a version string.
+   * For example, "v2.5.4-master (uncompiled)".
+   * @private
+   */
+  setUpVersionStrings_() {
     const version = shaka.Player.version;
     let split = version.split('-');
     const inParen = [];
@@ -1186,10 +1222,12 @@ shakaDemo.Main = class {
     }
 
     // Put the version into the version string div.
-    const versionStringDiv = document.getElementById('version-string');
-    versionStringDiv.textContent = split.join('-');
-    if (inParen.length > 0) {
-      versionStringDiv.textContent += ' (' + inParen.join(', ') + ')';
+    const versionStringDivs = document.getElementsByClassName('version-string');
+    for (const div of versionStringDivs) {
+      div.textContent = split.join('-');
+      if (inParen.length > 0) {
+        div.textContent += ' (' + inParen.join(', ') + ')';
+      }
     }
   }