1 files changed, 138 insertions, 0 deletions
diff --git a/javascript/videojs/src/js/title-bar.js b/javascript/videojs/src/js/title-bar.js
new file mode 100644
index 0000000..1b59cb8
--- /dev/null
+++ b/javascript/videojs/src/js/title-bar.js
@@ -0,0 +1,138 @@
+import Component from './component';
+import * as Dom from './utils/dom';
+import * as Guid from './utils/guid';
+import * as Obj from './utils/obj';
+
+/**
+ * Displays an element over the player which contains an optional title and
+ * description for the current content.
+ *
+ * Much of the code for this component originated in the now obsolete
+ * videojs-dock plugin: https://github.com/brightcove/videojs-dock/
+ *
+ * @extends Component
+ */
+class TitleBar extends Component {
+
+  constructor(player, options) {
+    super(player, options);
+    this.on('statechanged', (e) => this.updateDom_());
+    this.updateDom_();
+  }
+
+  /**
+   * Create the `TitleBar`'s DOM element
+   *
+   * @return {Element}
+   *         The element that was created.
+   */
+  createEl() {
+    this.els = {
+      title: Dom.createEl('div', {
+        className: 'vjs-title-bar-title',
+        id: `vjs-title-bar-title-${Guid.newGUID()}`
+      }),
+      description: Dom.createEl('div', {
+        className: 'vjs-title-bar-description',
+        id: `vjs-title-bar-description-${Guid.newGUID()}`
+      })
+    };
+
+    return Dom.createEl('div', {
+      className: 'vjs-title-bar'
+    }, {}, Obj.values(this.els));
+  }
+
+  /**
+   * Updates the DOM based on the component's state object.
+   */
+  updateDom_() {
+    const tech = this.player_.tech_;
+    const techEl = tech && tech.el_;
+    const techAriaAttrs = {
+      title: 'aria-labelledby',
+      description: 'aria-describedby'
+    };
+
+    ['title', 'description'].forEach(k => {
+      const value = this.state[k];
+      const el = this.els[k];
+      const techAriaAttr = techAriaAttrs[k];
+
+      Dom.emptyEl(el);
+
+      if (value) {
+        Dom.textContent(el, value);
+      }
+
+      // If there is a tech element available, update its ARIA attributes
+      // according to whether a title and/or description have been provided.
+      if (techEl) {
+        techEl.removeAttribute(techAriaAttr);
+
+        if (value) {
+          techEl.setAttribute(techAriaAttr, el.id);
+        }
+      }
+    });
+
+    if (this.state.title || this.state.description) {
+      this.show();
+    } else {
+      this.hide();
+    }
+  }
+
+  /**
+   * Update the contents of the title bar component with new title and
+   * description text.
+   *
+   * If both title and description are missing, the title bar will be hidden.
+   *
+   * If either title or description are present, the title bar will be visible.
+   *
+   * NOTE: Any previously set value will be preserved. To unset a previously
+   * set value, you must pass an empty string or null.
+   *
+   * For example:
+   *
+   * ```
+   * update({title: 'foo', description: 'bar'}) // title: 'foo', description: 'bar'
+   * update({description: 'bar2'}) // title: 'foo', description: 'bar2'
+   * update({title: ''}) // title: '', description: 'bar2'
+   * update({title: 'foo', description: null}) // title: 'foo', description: null
+   * ```
+   *
+   * @param  {Object} [options={}]
+   *         An options object. When empty, the title bar will be hidden.
+   *
+   * @param  {string} [options.title]
+   *         A title to display in the title bar.
+   *
+   * @param  {string} [options.description]
+   *         A description to display in the title bar.
+   */
+  update(options) {
+    this.setState(options);
+  }
+
+  /**
+   * Dispose the component.
+   */
+  dispose() {
+    const tech = this.player_.tech_;
+    const techEl = tech && tech.el_;
+
+    if (techEl) {
+      techEl.removeAttribute('aria-labelledby');
+      techEl.removeAttribute('aria-describedby');
+    }
+
+    super.dispose();
+    this.els = null;
+  }
+}
+
+Component.registerComponent('TitleBar', TitleBar);
+
+export default TitleBar;