shaka-player 4.6.4 → 4.7.0

package/demo/input.js

@@ -1,270 +0,0 @@
-/*! @license
- * Shaka Player
- * Copyright 2016 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-
-goog.provide('shakaDemo.BoolInput');
-goog.provide('shakaDemo.DatalistInput');
-goog.provide('shakaDemo.Input');
-goog.provide('shakaDemo.NumberInput');
-goog.provide('shakaDemo.SelectInput');
-goog.provide('shakaDemo.TextInput');
-
-goog.requireType('shakaDemo.InputContainer');
-
-/**
- * Creates and contains the MDL elements of a type of input.
- */
-shakaDemo.Input = class {
-  /**
-   * @param {!shakaDemo.InputContainer} parentContainer
-   * @param {string} inputType The element type for the input object.
-   * @param {string} containerType The element type for the container containing
-   *   the input object.
-   * @param {string} extraType The element type for the "sibling element" to the
-   *   input object. If null, it adds no such element.
-   * @param {function(!HTMLInputElement, !shakaDemo.Input)} onChange
-   */
-  constructor(parentContainer, inputType, containerType, extraType, onChange) {
-    /** @private {!Element} */
-    this.container_ = document.createElement(containerType);
-    parentContainer.latestElementContainer.appendChild(this.container_);
-
-    /** @private {!HTMLInputElement} */
-    this.input_ =
-      /** @type {!HTMLInputElement} */(document.createElement(inputType));
-    this.input_.onchange = () => {
-      onChange(this.input_, this);
-    };
-    // <textarea> elements need to also react to 'input' events.
-    if (inputType == 'textarea') {
-      this.input_.oninput = () => {
-        onChange(this.input_, this);
-      };
-    }
-    this.input_.id = shakaDemo.Input.generateNewId_('input');
-    this.container_.appendChild(this.input_);
-
-    if (parentContainer.latestTooltip) {
-      // Since the row isn't focusable, add the tooltip information into the
-      // accessibility data of the input, so it can be accessed by users using
-      // screen readers.
-      const extraInfo = document.createElement('span');
-      extraInfo.textContent = parentContainer.latestTooltip;
-      extraInfo.classList.add('hidden');
-      extraInfo.id = shakaDemo.Input.generateNewId_('extra-info');
-      this.container_.appendChild(extraInfo);
-      this.input_.setAttribute('aria-describedby', extraInfo.id);
-    }
-
-    /**
-     * Most MDL inputs require some sort of "sibling element" that exists at
-     * the same level as the input itself. These other elements are used to
-     * create various visual effects, such as the ripple effect.
-     * @private {?Element}
-     */
-    this.extra_ = null;
-    if (extraType) {
-      this.extra_ = document.createElement(extraType);
-      this.container_.appendChild(this.extra_);
-    }
-  }
-
-  /** @return {!HTMLInputElement} */
-  input() {
-    return this.input_;
-  }
-
-  /** @return {!Element} */
-  container() {
-    return this.container_;
-  }
-
-  /** @return {?Element} */
-  extra() {
-    return this.extra_;
-  }
-
-  /** @param {boolean} valid */
-  setValid(valid) {
-    if (valid) {
-      this.input_.setCustomValidity('');  // valid
-      this.container_.classList.remove('is-invalid');
-    } else {
-      this.input_.setCustomValidity('invalid');  // any message will do
-      this.container_.parentElement.classList.add('is-invalid');
-    }
-  }
-
-  /**
-  * @param {string} prefix
-  * @return {string}
-  * @private
-  */
-  static generateNewId_(prefix) {
-    const idNumber = shakaDemo.Input.lastId_;
-    shakaDemo.Input.lastId_ += 1;
-    return prefix + '-labeled-' + idNumber;
-  }
-};
-
-
-/** @private {number} */
-shakaDemo.Input.lastId_ = 0;
-
-
-/**
- * Creates and contains the MDL elements of a select input.
- */
-shakaDemo.SelectInput = class extends shakaDemo.Input {
-  /**
-   * @param {!shakaDemo.InputContainer} parentContainer
-   * @param {?string} name
-   * @param {function(!HTMLInputElement, !shakaDemo.Input)} onChange
-   * @param {!Object.<string, string>} values
-   */
-  constructor(parentContainer, name, onChange, values) {
-    super(parentContainer, 'select', 'div', 'label', onChange);
-    this.container_.classList.add('mdl-textfield');
-    this.container_.classList.add('mdl-js-textfield');
-    this.container_.classList.add('mdl-textfield--floating-label');
-    this.input_.classList.add('mdl-textfield__input');
-    this.extra_.classList.add('mdl-textfield__label');
-    this.extra_.setAttribute('for', this.input_.id);
-    if (name) {
-      this.extra_.textContent = name;
-    }
-    for (const value of Object.keys(values)) {
-      const option =
-        /** @type {!HTMLOptionElement} */(document.createElement('option'));
-      option.textContent = values[value];
-      option.value = value;
-      this.input_.appendChild(option);
-    }
-  }
-};
-
-
-/**
- * Creates and contains the MDL elements of a bool input.
- */
-shakaDemo.BoolInput = class extends shakaDemo.Input {
-  /**
-   * @param {!shakaDemo.InputContainer} parentContainer
-   * @param {string} name
-   * @param {function(!HTMLInputElement, !shakaDemo.Input)} onChange
-   */
-  constructor(parentContainer, name, onChange) {
-    super(parentContainer, 'input', 'label', 'span', onChange);
-    this.input_.type = 'checkbox';
-    this.container_.classList.add('mdl-switch');
-    this.container_.classList.add('mdl-js-switch');
-    this.container_.classList.add('mdl-js-ripple-effect');
-    this.container_.setAttribute('for', this.input_.id);
-    this.input_.classList.add('mdl-switch__input');
-    this.extra_.classList.add('mdl-switch__label');
-  }
-};
-
-
-/**
- * Creates and contains the MDL elements of a text input.
- */
-shakaDemo.TextInput = class extends shakaDemo.Input {
-  /**
-   * @param {!shakaDemo.InputContainer} parentContainer
-   * @param {string} name
-   * @param {function(!HTMLInputElement, !shakaDemo.Input)} onChange
-   * @param {boolean=} isTextArea
-   */
-  constructor(parentContainer, name, onChange, isTextArea) {
-    super(parentContainer, isTextArea ? 'textarea' : 'input', 'div', 'label',
-        onChange);
-    this.container_.classList.add('mdl-textfield');
-    this.container_.classList.add('mdl-js-textfield');
-    this.container_.classList.add('mdl-textfield--floating-label');
-    this.input_.classList.add('mdl-textfield__input');
-    this.extra_.classList.add('mdl-textfield__label');
-    this.extra_.setAttribute('for', this.input_.id);
-  }
-};
-
-
-/**
- * Creates and contains the MDL elements of a datalist input.
- */
-shakaDemo.DatalistInput = class extends shakaDemo.TextInput {
-  /**
-   * @param {!shakaDemo.InputContainer} parentContainer
-   * @param {string} name
-   * @param {function(!HTMLInputElement, !shakaDemo.Input)} onChange
-   * @param {!Array.<string>} values
-   */
-  constructor(parentContainer, name, onChange, values) {
-    super(parentContainer, name, onChange, /* isTextArea= */ false);
-    // This element is not literally a datalist, as those are not supported on
-    // all platforms (and they also have no MDL style support).
-    // Instead, this is using the third-party "awesomplete" module, which acts
-    // as a text field with autocomplete selection.
-    const awesomplete = new Awesomplete(this.input_);
-    awesomplete.list = values.slice(); // Make a local copy of the values list.
-    awesomplete.minChars = 0;
-    this.input_.addEventListener('focus', () => {
-      // By default, awesomplete does not show suggestions on focusing on the
-      // input, only on typing something.
-      // This manually updates the suggestions, so that they will show up.
-      awesomplete.evaluate();
-    });
-    this.input_.addEventListener('awesomplete-selectcomplete', () => {
-      onChange(this.input_, this);
-    });
-  }
-};
-
-
-/**
- * Creates and contains the MDL elements of a number input.
- */
-shakaDemo.NumberInput = class extends shakaDemo.TextInput {
-  /**
-   * @param {!shakaDemo.InputContainer} parentContainer
-   * @param {string} name
-   * @param {function(!HTMLInputElement, !shakaDemo.Input)} onChange
-   * @param {boolean} canBeDecimal
-   * @param {boolean} canBeZero
-   * @param {boolean} canBeUnset
-   */
-  constructor(
-      parentContainer, name, onChange, canBeDecimal, canBeZero, canBeUnset) {
-    super(parentContainer, name, onChange, /* isTextArea= */ false);
-    const error = document.createElement('span');
-    error.classList.add('mdl-textfield__error');
-    this.container_.appendChild(error);
-
-    if (canBeZero && canBeDecimal) {
-      error.textContent = 'Must be a positive number.';
-    } else if (canBeZero) {
-      error.textContent = 'Must be a positive integer.';
-    } else if (canBeDecimal) {
-      error.textContent = 'Must be a positive, nonzero number.';
-    } else {
-      error.textContent = 'Must be a positive, nonzero integer.';
-    }
-
-    this.input_.pattern = '(Infinity|';
-    if (canBeZero) {
-      this.input_.pattern += '[0-9]*';
-    } else {
-      this.input_.pattern += '[0-9]*[1-9][0-9]*';
-    }
-    if (canBeDecimal) {
-      // TODO: Handle commas as decimal delimeters, for appropriate regions?
-      this.input_.pattern += '(.[0-9]+)?';
-    }
-    this.input_.pattern += ')';
-    if (canBeUnset) {
-      this.input_.pattern += '?';
-    }
-  }
-};

package/demo/input_container.js

@@ -1,218 +0,0 @@
-/*! @license
- * Shaka Player
- * Copyright 2016 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-
-
-goog.provide('shakaDemo.InputContainer');
-
-
-goog.require('shakaDemo.Tooltips');
-
-/**
- * Creates elements for containing inputs. It represents a single "section" of
- * input.
- * It contains a number of "rows", each of which contains an optional label and
- * an input.
- * It also has an optional header, which can contain style-dependent
- * functionality.
- */
-shakaDemo.InputContainer = class {
-  /**
-   * @param {!Element} parentDiv
-   * @param {?string} headerText The text to be displayed by the header.
-   *   If null, there will be no header.
-   * @param {!shakaDemo.InputContainer.Style} style
-   * @param {?string} docLink
-   */
-  constructor(parentDiv, headerText, style, docLink) {
-    /** @private {!shakaDemo.InputContainer.Style} */
-    this.style_ = style;
-
-    /** @private {?Element} */
-    this.header_;
-
-    /** @private {!Element} */
-    this.table_ = document.createElement('div');
-
-    /** @private {?Element} */
-    this.latestRow_;
-
-    /** @private {?string} */
-    this.defaultRowClass_ = null;
-
-    /** @type {?Element} */
-    this.latestElementContainer;
-
-    /** @type {?string} */
-    this.latestTooltip;
-
-    /** @private {number} */
-    this.numRows_ = 0;
-
-    if (headerText) {
-      this.createHeader_(parentDiv, headerText);
-    }
-    this.table_.classList.add(style);
-    if (style == shakaDemo.InputContainer.Style.ACCORDION) {
-      this.table_.classList.add('hidden');
-    }
-    parentDiv.appendChild(this.table_);
-    if (docLink) {
-      this.addDocLink_(this.table_, docLink);
-    }
-  }
-
-  /**
-   * @return {boolean} true if this is an open accordion menu, false otherwise
-   */
-  getIsOpen() {
-    if (this.style_ == shakaDemo.InputContainer.Style.ACCORDION) {
-      return this.table_.classList.contains('show');
-    }
-    return false;
-  }
-
-  /** If this is an accordion menu, open it. */
-  open() {
-    if (!this.style_ == shakaDemo.InputContainer.Style.ACCORDION) {
-      return;
-    }
-    this.table_.classList.remove('hidden');
-    setTimeout(() => {
-      this.table_.classList.add('show');
-    }, /* milliseconds= */ 20);
-    this.header_.classList.add('mdl-button--colored');
-  }
-
-  /** If this is an accordion menu, close it. */
-  close() {
-    if (this.style_ != shakaDemo.InputContainer.Style.ACCORDION) {
-      return;
-    }
-    this.table_.classList.remove('show');
-    this.table_.addEventListener('transitionend', (e) => {
-      this.table_.classList.add('hidden');
-    }, {once: true});
-    this.header_.classList.remove('mdl-button--colored');
-  }
-
-  /**
-   * @param {!Element} parentDiv
-   * @param {string} headerText
-   * @private
-   */
-  createHeader_(parentDiv, headerText) {
-    if (this.style_ == shakaDemo.InputContainer.Style.ACCORDION) {
-      this.header_ = document.createElement('button');
-      this.header_.classList.add('mdl-button--raised');
-      this.header_.classList.add('mdl-button');
-      this.header_.classList.add('mdl-js-button');
-      this.header_.classList.add('mdl-js-ripple-effect');
-      this.header_.addEventListener('click', () => {
-        // Show/hide the table.
-        if (this.getIsOpen()) {
-          this.close();
-        } else {
-          this.open();
-        }
-      });
-    } else {
-      this.header_ = document.createElement('div');
-      this.header_.classList.add('input-header');
-    }
-    this.header_.textContent = headerText;
-    parentDiv.appendChild(this.header_);
-  }
-
-  /**
-   * Creates a link that links to a section within the Shaka Player docs.
-   * @param {!Element} parentDiv
-   * @param {string} docLink
-   * @private
-   */
-  addDocLink_(parentDiv, docLink) {
-    const link = /** @type {!HTMLAnchorElement} */(document.createElement('a'));
-    link.href = docLink;
-    link.target = '_blank';
-    link.classList.add('mdl-button');
-    link.classList.add('mdl-js-button');
-    link.classList.add('mdl-js-ripple-effect');
-    link.classList.add('mdl-button--colored');
-
-    const icon = document.createElement('i');
-    icon.classList.add('material-icons-round');
-    icon.textContent = 'help';
-
-    link.appendChild(icon);
-    parentDiv.appendChild(link);
-  }
-
-  /**
-   * Set the default row class for future calls to addRow().
-   *
-   * @param {?string} rowClass
-   */
-  setDefaultRowClass(rowClass) {
-    this.defaultRowClass_ = rowClass;
-  }
-
-  /**
-   * Return the CSS class list for the container.
-   *
-   * @return {!DOMTokenList}
-   */
-  getClassList() {
-    return this.table_.classList;
-  }
-
-  /**
-   * Makes a row, for storing an input.
-   * @param {?string} labelString
-   * @param {?string} tooltipString
-   * @param {string=} rowClass
-   */
-  addRow(labelString, tooltipString, rowClass) {
-    rowClass = rowClass || this.defaultRowClass_ || '';
-    this.latestRow_ = document.createElement('div');
-    if (rowClass) {
-      this.latestRow_.classList.add(rowClass);
-    }
-    this.table_.appendChild(this.latestRow_);
-
-    const elementId = 'input-container-row-' + this.numRows_;
-    this.numRows_ += 1;
-
-    if (labelString) {
-      const label = document.createElement('label');
-      label.setAttribute('for', elementId);
-      label.classList.add('input-container-label');
-      const labelText = document.createElement('b');
-      labelText.textContent = labelString;
-      label.appendChild(labelText);
-      this.latestRow_.appendChild(label);
-    }
-
-    this.latestElementContainer = document.createElement('div');
-    this.latestRow_.appendChild(this.latestElementContainer);
-
-    this.latestElementContainer.classList.add('input-container-row');
-    this.latestElementContainer.id = elementId;
-
-    this.latestTooltip = tooltipString;
-    if (tooltipString) {
-      shakaDemo.Tooltips.make(this.latestRow_, tooltipString);
-      // Keep the row from being focused.
-      this.latestRow_.setAttribute('tabindex', -1);
-      this.latestRow_.classList.add('borderless');
-    }
-  }
-};
-
-/** @enum {string} */
-shakaDemo.InputContainer.Style = {
-  VERTICAL: 'input-container-style-vertical',
-  ACCORDION: 'input-container-style-accordion',
-  FLEX: 'input-container-style-flex',
-};

package/demo/load.js

@@ -1,156 +0,0 @@
-/*! @license
- * Shaka Player
- * Copyright 2016 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-
-
-function shakaUncompiledModeSupported() {
-  // Check if ES6 arrow function syntax and ES7 async are usable.  Both are
-  // needed for uncompiled builds to work.
-  try {
-    eval('async ()=>{}');
-    return true;
-  } catch (e) {
-    return false;
-  }
-}
-
-/**
- * Loads both library and application sources.  Chooses compiled or debug
- * version of the sources based on the presence or absence of the URL parameter
- * "compiled".  Uses the global arrays COMPILED_JS, COMPILED_DEBUG_JS, and
- * UNCOMPILED_JS, defined by the application in advance.
- *
- * This dynamic loading process is not necessary in a production environment,
- * but simplifies the process of switching between compiled and uncompiled
- * mode during development.
- */
-(function() {  // anonymous namespace
-  // The URL of the page itself, without URL fragments or search strings.
-  var pageUrl = location.href.split('#')[0].split('?')[0];
-  // The URL of the page, up to and including the final '/'.
-  var baseUrl = pageUrl.split('/').slice(0, -1).join('/') + '/';
-
-  function loadRelativeScript(src) {
-    importScript(baseUrl + src);
-  }
-
-  // NOTE: This is a quick-and-easy hack based on assumption that the old
-  // demo page will be replaced in the near future.
-  function loadSpecificCss(href, linkRel) {
-    var link = document.createElement('link');
-    link.type = 'text/css';
-    link.href = baseUrl + href;
-    link.rel = linkRel;
-
-    document.head.appendChild(link);
-  }
-  function loadCss(buildType) {
-    // These should override the compiled versions, which have already been
-    // hard-coded into the HTML.  This get us the best balance between avoiding
-    // a flash of unstyled content and allowing the developer to quickly reload
-    // uncompiled LESS in uncompiled mode.
-    if (buildType == 'uncompiled') {
-      loadSpecificCss('../ui/controls.less', 'stylesheet/less');
-      loadSpecificCss('../demo/demo.less', 'stylesheet/less');
-    }
-  }
-
-  function importScript(src) {
-    var script = document.createElement('script');
-    script.type = 'text/javascript';
-    script.src = src;
-    script.defer = true;
-    // Setting async = false is important to make sure the script is imported
-    // before the 'load' event fires.
-    script.async = false;  // eslint-disable-line id-denylist
-    document.head.appendChild(script);
-
-    // Signal success, or else the Closure Library's loader will not load the
-    // next script.
-    return true;
-  }
-
-  window.CLOSURE_IMPORT_SCRIPT = importScript;
-
-  var fields = location.search.substr(1);
-  fields = fields ? fields.split(';') : [];
-  var fragments = location.hash.substr(1);
-  fragments = fragments ? fragments.split(';') : [];
-  var combined = fields.concat(fragments);
-
-  var buildType = 'uncompiled';
-  var buildSpecified = false;
-
-  if (!shakaUncompiledModeSupported()) {
-    // If uncompiled mode is not supported, default to the compiled debug
-    // version, which should still work.
-    buildType = 'debug_compiled';
-  }
-
-  if (!navigator.onLine) {
-    // If we're offline, default to the compiled version, which may have been
-    // cached by the service worker.
-    buildType = 'compiled';
-  }
-
-  // Very old browsers do not have Array.prototype.indexOf, so we loop.
-  for (var i = 0; i < combined.length; ++i) {
-    if (combined[i] == 'build=compiled') {
-      buildType = 'compiled';
-      buildSpecified = true;
-      break;
-    }
-    if (combined[i] == 'build=debug_compiled') {
-      buildType = 'debug_compiled';
-      buildSpecified = true;
-      break;
-    }
-    if (combined[i] == 'build=uncompiled') {
-      buildType = 'uncompiled';
-      buildSpecified = true;
-      break;
-    }
-  }
-
-  if (!shakaUncompiledModeSupported() && buildType == 'uncompiled') {
-    // The URL says uncompiled, but we know it won't work.  This URL was
-    // probably copied from some other browser, but it won't work in this one.
-    // Force the use of the compiled debug build and update the hash.
-    buildType = 'debug_compiled';
-
-    // Replace the build type in either the hash or the URL parameters.
-    // At this point, we don't know precisely which contained the build type.
-    location.hash = location.hash.replace(
-        'build=uncompiled', 'build=debug_compiled');
-    location.href = location.href.replace(
-        'build=uncompiled', 'build=debug_compiled');
-    // Changing location.href will trigger a refresh of the page.  If the
-    // build type was in the URL parameters, the page will now be refreshed.
-    // If the build type was in the hash, the page will continue to load with
-    // an updated hash and the correct library type.
-  }
-
-  // If no build was specified in the URL, update the fragment with the default
-  // we chose.
-  if (!buildSpecified) {
-    if (location.hash.length) {
-      location.hash += ';';
-    }
-    location.hash += 'build=' + buildType;
-  }
-
-  loadCss(buildType);
-
-  // The application must define its list of compiled and uncompiled sources
-  // before including this loader.  The URLs should be relative to the page.
-  var scripts = {
-    'compiled': window['COMPILED_JS'],
-    'debug_compiled': window['COMPILED_DEBUG_JS'],
-    'uncompiled': window['UNCOMPILED_JS'],
-  }[buildType];
-  for (var j = 0; j < scripts.length; ++j) {
-    loadRelativeScript(scripts[j]);
-  }
-})();  // anonymous namespace