From bc5be3e4c1ea638d0994f2d95151013bb951e960 Mon Sep 17 00:00:00 2001
From: Pat O'Neill <pgoneill@gmail.com>
Date: Fri, 2 Oct 2015 15:11:55 -0400
Subject: [PATCH 01/36] Add CloseButton component

---
 src/js/close-button.js         | 28 +++++++++++++++++++++
 test/unit/close-button.test.js | 45 ++++++++++++++++++++++++++++++++++
 2 files changed, 73 insertions(+)
 create mode 100644 src/js/close-button.js
 create mode 100644 test/unit/close-button.test.js

diff --git a/src/js/close-button.js b/src/js/close-button.js
new file mode 100644
index 0000000000..7c1d8dd33b
--- /dev/null
+++ b/src/js/close-button.js
@@ -0,0 +1,28 @@
+import Button from './button';
+import Component from './component';
+
+/**
+ * The `CloseButton` component is a button which fires a "close" event
+ * when it is activated.
+ *
+ * @extends Button
+ * @class CloseButton
+ */
+class CloseButton extends Button {
+
+  constructor(player, options) {
+    super(player, options);
+    this.controlText(options && options.controlText || this.localize('Close'));
+  }
+
+  buildCSSClass() {
+    return `vjs-close ${super.buildCSSClass()}`;
+  }
+
+  handleClick() {
+    this.trigger({type: 'close', bubbles: false});
+  }
+}
+
+Component.registerComponent('CloseButton', CloseButton);
+export default CloseButton;
diff --git a/test/unit/close-button.test.js b/test/unit/close-button.test.js
new file mode 100644
index 0000000000..48f74cf360
--- /dev/null
+++ b/test/unit/close-button.test.js
@@ -0,0 +1,45 @@
+import CloseButton from '../../src/js/close-button';
+import TestHelpers from './test-helpers';
+
+q.module('CloseButton', {
+
+  beforeEach: function() {
+    this.player = TestHelpers.makePlayer();
+    this.btn = new CloseButton(this.player);
+  },
+
+  afterEach: function() {
+    this.player.dispose();
+    this.btn.dispose();
+  }
+});
+
+q.test('should create the expected element', function(assert) {
+  var classes = ['button', 'close', 'control'];
+
+  assert.expect(2 + classes.length);
+  assert.strictEqual(this.btn.el().tagName.toLowerCase(), 'button', 'is a <button>');
+  assert.strictEqual(this.btn.el().textContent, 'Close');
+
+  classes.forEach(function(s) {
+    var c = 'vjs-' + s;
+    assert.ok(this.btn.hasClass(c), 'has the "' + c + '" class');
+  }, this);
+});
+
+q.test('should allow setting the controlText_ property as an option', function(assert) {
+  var text = 'OK!';
+  var btn = new CloseButton(this.player, {controlText: text});
+
+  assert.expect(1);
+  assert.strictEqual(btn.controlText_, text, 'set the controlText_ property');
+});
+
+q.test('should trigger an event on activation', function(assert) {
+  var spy = sinon.spy();
+
+  this.btn.on('close', spy);
+  this.btn.trigger('click');
+  assert.expect(1);
+  assert.strictEqual(spy.callCount, 1, 'the "close" event was triggered');
+});

From 7e788c52800a03cf364476225a5aad3a5da75f20 Mon Sep 17 00:00:00 2001
From: Pat O'Neill <pgoneill@gmail.com>
Date: Fri, 2 Oct 2015 16:35:45 -0400
Subject: [PATCH 02/36] Add ModalDialog component

---
 src/js/modal-dialog.js         | 203 ++++++++++++++++++++++++++++++++
 test/unit/modal-dialog.test.js | 209 +++++++++++++++++++++++++++++++++
 2 files changed, 412 insertions(+)
 create mode 100644 src/js/modal-dialog.js
 create mode 100644 test/unit/modal-dialog.test.js

diff --git a/src/js/modal-dialog.js b/src/js/modal-dialog.js
new file mode 100644
index 0000000000..24bf112a83
--- /dev/null
+++ b/src/js/modal-dialog.js
@@ -0,0 +1,203 @@
+/**
+ * @file modal-dialog.js
+ */
+import document from 'global/document';
+import tsml from 'tsml';
+
+import * as Dom from './utils/dom';
+import * as Events from './utils/events';
+import * as Fn from './utils/fn';
+
+import Component from './component';
+import CloseButton from './close-button';
+
+const CLASS_NAME_PREFIX = 'vjs-modal-dialog';
+
+// An array of strings which are used for modal dialog sub-element classes,
+// so will cause CSS issues if used as a slug.
+const DISALLOWED_SLUGS = [
+  'content'
+];
+
+const ESC = 27;
+
+/**
+ * Modal dialog for use by plugins to display a dialog over the video, which
+ * blocks interaction with the player until it is closed.
+ *
+ * Modal dialogs include a "Close" button and will close when that button
+ * is activated - or when Esc is pressed anywhere.
+ *
+ * @extends Component
+ * @class ModalDialog
+ */
+class ModalDialog extends Component {
+
+  /**
+   * Constructor for modal dialogs.
+   *
+   * @param  {Player} player
+   * @param  {Object} [options]
+   * @param  {Boolean} [options.disposeOnClose]
+   *         If `true`, the modal can only be opened once. It will be
+   *         disposed as soon as it's closed.
+   *
+   * @param  {String} [options.label]
+   *         A text label for the dialog, primarily for accessibility.
+   *
+   * @param  {Boolean} [options.openImmediately]
+   *         If `true`, the modal will be displayed immediately upon
+   *         instantiation.
+   *
+   * @param  {String} [options.slug]
+   *         This is a string that will be prefixed with "vjs-modal-dialog-"
+   *         to construct a CSS class specific to this modal. For example,
+   *         if this option were "foo," the modal could be identified with
+   *         the class "vjs-modal-dialog-foo".
+   */
+  constructor(player, options) {
+    if (options && DISALLOWED_SLUGS.indexOf(options.slug) > -1) {
+      throw new Error(`${options.slug} is not allowed as a slug`);
+    }
+
+    super(player, options);
+    this.opened_ = false;
+
+    // Create an own property for each instance with a bound keypress
+    // handler so it can be properly added and removed as a listener.
+    this.handleKeyPress = Fn.bind(this, this.handleKeyPress);
+
+    // If a close button was added (which is the default), set the modal to
+    // close when the button is activated.
+    let close = this.getChild('closeButton');
+    if (close) {
+      this.on(close, 'close', this.close);
+    }
+
+    // Make sure the contentEl is defined AFTER any children are initialized
+    // because we only want the contents of the modal in the contentEl (not
+    // the UI elements like the close button).
+    this.contentEl_ = Dom.createEl('div', {
+      className: `${CLASS_NAME_PREFIX}-content`
+    });
+    this.el_.appendChild(this.contentEl_);
+
+    if (this.options_.openImmediately) {
+      this.open();
+    }
+  }
+
+  /**
+   * Create the modal dialog's DOM element
+   *
+   * @method createEl
+   */
+  createEl() {
+    return super.createEl('div', {
+      className: this.buildCSSClass(),
+      tabIndex: -1
+    }, {
+      'aria-role': 'dialog',
+      'aria-label': this.options_.label || ''
+    });
+  }
+
+  /**
+   * Build the modal dialog's CSS class.
+   *
+   * @method buildCSSClass
+   */
+  buildCSSClass() {
+    return `${CLASS_NAME_PREFIX} vjs-hidden ${CLASS_NAME_PREFIX}-${this.options_.slug} ${super.buildCSSClass()}`;
+  }
+
+  /**
+   * Handles key presses on the document, looking for ESC, which closes
+   * the modal dialog.
+   *
+   * @method handleKeyPress
+   * @param  {Event} e
+   */
+  handleKeyPress(e) {
+    if (e.which === ESC) {
+      this.close();
+    }
+  }
+
+  /**
+   * Opens the modal dialog.
+   *
+   * @method open
+   * @return {ModalDialog}
+   */
+  open() {
+    if (this.opened_) {
+      return;
+    }
+
+    this.trigger('beforemodalopen');
+    this.opened_ = true;
+
+    // If the player was playing, pause it and take note of its previously
+    // playing state.
+    this.wasPlaying_ = !this.player().paused();
+    if (this.wasPlaying_) {
+      this.player().pause();
+    }
+
+    Events.on(document, 'keydown', this.handleKeyPress);
+    this.show();
+    this.trigger('modalopen');
+  }
+
+  /**
+   * Whether or not the modal is open currently.
+   *
+   * @method opened
+   * @return {Boolean}
+   */
+  opened() {
+    return !!this.opened_;
+  }
+
+  /**
+   * Closes the modal dialog.
+   *
+   * @method close
+   * @return {ModalDialog}
+   */
+  close() {
+    if (!this.opened_) {
+      return;
+    }
+
+    this.trigger('beforemodalclose');
+    this.opened_ = false;
+
+    if (this.wasPlaying_) {
+      this.player().play();
+    }
+
+    Events.off(document, 'keydown', this.handleKeyPress);
+    this.hide();
+    this.trigger('modalclose');
+
+    if (this.options_.disposeOnClose) {
+      this.dispose();
+    }
+  }
+}
+
+/*
+ * Modal dialog default options.
+ *
+ * @type {Object}
+ * @private
+ */
+ModalDialog.prototype.options_ = {
+  children: ['closeButton'],
+  slug: 'none'
+};
+
+Component.registerComponent('ModalDialog', ModalDialog);
+export default ModalDialog;
diff --git a/test/unit/modal-dialog.test.js b/test/unit/modal-dialog.test.js
new file mode 100644
index 0000000000..d60eccd9bd
--- /dev/null
+++ b/test/unit/modal-dialog.test.js
@@ -0,0 +1,209 @@
+import CloseButton from '../../src/js/close-button';
+import ModalDialog from '../../src/js/modal-dialog';
+import * as Fn from '../../src/js/utils/fn';
+import TestHelpers from './test-helpers';
+
+q.module('ModalDialog', {
+
+  beforeEach: function() {
+    this.player = TestHelpers.makePlayer();
+    this.modal = new ModalDialog(this.player);
+    this.el = this.modal.el();
+  },
+
+  afterEach: function() {
+    this.player.dispose();
+    this.modal.dispose();
+  }
+});
+
+q.test('should create the expected element', function(assert) {
+  var classes = [
+    'modal-dialog',
+    'hidden',
+    'modal-dialog-none'
+  ];
+
+  assert.expect(4 + classes.length);
+  assert.strictEqual(this.el.tagName.toLowerCase(), 'div', 'el is a <div>');
+  assert.strictEqual(this.el.tabIndex, -1, 'el has -1 tabindex');
+  assert.strictEqual(this.el.getAttribute('aria-role'), 'dialog', 'el has aria-role="dialog"');
+  assert.strictEqual(this.el.getAttribute('aria-label'), '', 'el has aria-role="" by default');
+
+  classes.forEach(function(s) {
+    var c = 'vjs-' + s;
+    assert.ok(this.modal.hasClass(c), [
+      'has the "',
+      c,
+      '" class in "',
+      this.el.className,
+      '"'
+    ].join(''));
+  }, this);
+});
+
+q.test('should create the expected contentEl', function(assert) {
+  var contentEl = this.modal.contentEl();
+
+  assert.expect(3);
+  assert.strictEqual(contentEl.parentNode, this.el, 'contentEl is a child of el');
+  assert.strictEqual(contentEl.tagName.toLowerCase(), 'div', 'contentEl is a <div>');
+  assert.strictEqual(contentEl.className.trim(), 'vjs-modal-dialog-content', 'has "vjs-modal-dialog-content" class');
+});
+
+q.test('should create a close button by default', function(assert) {
+  var btn = this.modal.getChild('closeButton');
+
+  // We only check the aspects of the button that relate to the modal. Other
+  // aspects of the button (classes, etc) are tested in their appropriate test
+  // module.
+  assert.expect(2);
+  assert.ok(btn instanceof CloseButton, 'close button is a CloseButton');
+  assert.strictEqual(btn.el().parentNode, this.el, 'close button is a child of el');
+});
+
+q.test('open() triggers events', function(assert) {
+  var modal = this.modal;
+  var beforeModalOpenSpy = sinon.spy(function() {
+    assert.notOk(modal.opened(), 'modal is not opened before opening event');
+  });
+
+  var modalOpenSpy = sinon.spy(function() {
+    assert.ok(modal.opened(), 'modal is opened on opening event');
+  });
+
+  modal.on('beforemodalopen', beforeModalOpenSpy);
+  modal.on('modalopen', modalOpenSpy);
+
+  assert.expect(4);
+  modal.open();
+  assert.strictEqual(beforeModalOpenSpy.callCount, 1, 'beforemodalopen spy was called');
+  assert.strictEqual(modalOpenSpy.callCount, 1, 'modalopen spy was called');
+});
+
+q.test('open() removes "vjs-hidden" class', function(assert) {
+  assert.expect(2);
+  assert.ok(this.modal.hasClass('vjs-hidden'), 'modal starts hidden');
+  this.modal.open();
+  assert.notOk(this.modal.hasClass('vjs-hidden'), 'modal is not hidden after opening');
+});
+
+q.test('open() cannot be called on an opened modal', function(assert) {
+  var spy = sinon.spy();
+
+  this.modal.on('modalopen', spy);
+  this.modal.open();
+  this.modal.open();
+
+  assert.expect(1);
+  assert.strictEqual(spy.callCount, 1, 'modal was only opened once');
+});
+
+q.test('close() triggers events', function(assert) {
+  var modal = this.modal;
+  var beforeModalCloseSpy = sinon.spy(function() {
+    assert.ok(modal.opened(), 'modal is not closed before closing event');
+  });
+
+  var modalCloseSpy = sinon.spy(function() {
+    assert.notOk(modal.opened(), 'modal is closed on closing event');
+  });
+
+  modal.on('beforemodalclose', beforeModalCloseSpy);
+  modal.on('modalclose', modalCloseSpy);
+
+  assert.expect(4);
+  modal.open();
+  modal.close();
+  assert.strictEqual(beforeModalCloseSpy.callCount, 1, 'beforemodalclose spy was called');
+  assert.strictEqual(modalCloseSpy.callCount, 1, 'modalclose spy was called');
+});
+
+q.test('close() adds the "vjs-hidden" class', function(assert) {
+  assert.expect(1);
+  this.modal.open();
+  this.modal.close();
+  assert.ok(this.modal.hasClass('vjs-hidden'), 'modal is hidden upon close');
+});
+
+q.test('pressing ESC triggers close(), but only when the modal is opened', function(assert) {
+  var spy = sinon.spy();
+
+  this.modal.on('modalclose', spy);
+  this.modal.handleKeyPress({which: 27});
+  assert.expect(2);
+  assert.strictEqual(spy.callCount, 0, 'ESC did not close the closed modal');
+
+  this.modal.open();
+  this.modal.handleKeyPress({which: 27});
+  assert.strictEqual(spy.callCount, 1, 'ESC closed the now-opened modal');
+});
+
+q.test('close() cannot be called on an closed modal', function(assert) {
+  var spy = sinon.spy();
+
+  this.modal.on('modalclose', spy);
+  this.modal.open();
+  this.modal.close();
+  this.modal.close();
+
+  assert.expect(1);
+  assert.strictEqual(spy.callCount, 1, 'modal was only closed once');
+});
+
+q.test('open() pauses playback, close() resumes', function(assert) {
+
+  // Quick and dirty; make it looks like the player is playing.
+  this.player.paused = function() {
+    return false;
+  };
+
+  sinon.spy(this.player, 'play');
+  sinon.spy(this.player, 'pause');
+  this.modal.open();
+
+  assert.expect(2);
+  assert.strictEqual(this.player.pause.callCount, 1, 'player is paused when the modal opens');
+
+  this.modal.close();
+  assert.strictEqual(this.player.play.callCount, 1, 'player is resumed when the modal closes');
+});
+
+q.test('"disposeOnClose" option', function(assert) {
+  var modal = new ModalDialog(this.player, {disposeOnClose: true});
+
+  modal.open();
+  sinon.spy(modal, 'dispose');
+  modal.close();
+
+  assert.expect(1);
+  assert.strictEqual(modal.dispose.callCount, 1, 'dispose was called');
+});
+
+q.test('"label" option', function(assert) {
+  var label = 'foo';
+  var modal = new ModalDialog(this.player, {label: label});
+
+  assert.expect(1);
+  assert.strictEqual(modal.el().getAttribute('aria-label'), label, 'uses the label as the aria-label');
+});
+
+q.test('"openImmediately" option', function(assert) {
+  var modal = new ModalDialog(this.player, {openImmediately: true});
+
+  assert.expect(1);
+  assert.ok(modal.opened(), 'the modal is opened immediately');
+});
+
+q.test('"slug" option', function(assert) {
+  var player = this.player;
+  var slug = 'foo';
+  var modal = new ModalDialog(player, {slug: slug});
+
+  assert.expect(2);
+  assert.ok(modal.hasClass('vjs-modal-dialog-' + slug), 'adds the slug-based class');
+
+  assert.throws(function() {
+    new ModalDialog(player, {slug: 'content'});
+  }, 'throws errors on disallowed slugs');
+});

From aa86bea75824c61f35812016f49f9961aa0f868c Mon Sep 17 00:00:00 2001
From: Pat O'Neill <pgoneill@gmail.com>
Date: Fri, 2 Oct 2015 18:23:38 -0400
Subject: [PATCH 03/36] Make sure components are included

---
 src/js/video.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/js/video.js b/src/js/video.js
index 2310dfc79c..54acfb99ac 100644
--- a/src/js/video.js
+++ b/src/js/video.js
@@ -29,6 +29,9 @@ import xhr from 'xhr';
 import Html5 from './tech/html5.js';
 import Flash from './tech/flash.js';
 
+import CloseButton from './close-button';
+import ModalDialog from './modal-dialog';
+
 // HTML5 Element Shim for IE8
 if (typeof HTMLVideoElement === 'undefined') {
   document.createElement('video');

From b14fb8ad6721825ef73f7928a07a11eb2d2f862c Mon Sep 17 00:00:00 2001
From: Pat O'Neill <pgoneill@gmail.com>
Date: Fri, 2 Oct 2015 18:23:54 -0400
Subject: [PATCH 04/36] Very basic modal styles

---
 src/css/components/_modal-dialog.scss | 51 +++++++++++++++++++++++++++
 src/css/video-js.scss                 |  1 +
 2 files changed, 52 insertions(+)
 create mode 100644 src/css/components/_modal-dialog.scss

diff --git a/src/css/components/_modal-dialog.scss b/src/css/components/_modal-dialog.scss
new file mode 100644
index 0000000000..9391932540
--- /dev/null
+++ b/src/css/components/_modal-dialog.scss
@@ -0,0 +1,51 @@
+%fill-player {
+  height: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+
+.video-js .vjs-modal-dialog {
+  @extend %fill-player;
+
+  $gradient-start: rgba(0, 0, 0, 0.8);
+  $gradient-stop: rgba(255, 255, 255, 0);
+  background: $gradient-start;
+  background: -moz-linear-gradient(top, $gradient-start 0%, $gradient-stop 100%);
+  background: -webkit-gradient(left top, left bottom, color-stop(0%, $gradient-start), color-stop(100%, $gradient-stop));
+  background: -webkit-linear-gradient(top, $gradient-start 0%, $gradient-stop 100%);
+  background: -o-linear-gradient(top, $gradient-start 0%, $gradient-stop 100%);
+  background: -ms-linear-gradient(top, $gradient-start 0%, $gradient-stop 100%);
+  background: linear-gradient(top bottom, $gradient-start 0%, $gradient-stop 100%);
+
+  .vjs-modal-dialog-content {
+    @extend %fill-player;
+    z-index: 1;
+  }
+
+  // Ultimately, this would be moved to its own component partial, but
+  // for now it's unclear what styles would be generic and which specific
+  // to this context!
+  .vjs-close {
+    cursor: pointer;
+    font-size: 1.2em; // 12px
+    height: auto;
+    padding: 0.75em 1em; // 9px 12px
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: auto;
+    z-index: 2;
+
+    .vjs-control-text {
+
+      // Reset inherited control-text styles.
+      clip: auto;
+      height: auto;
+      margin: 0;
+      position: static;
+      width: auto;
+    }
+  }
+}
diff --git a/src/css/video-js.scss b/src/css/video-js.scss
index ae27be3c11..3bf462f61d 100644
--- a/src/css/video-js.scss
+++ b/src/css/video-js.scss
@@ -35,3 +35,4 @@
 @import "components/subtitles";
 @import "components/adaptive";
 @import "components/captions-settings";
+@import "components/modal-dialog";

From 0575a816058f4e4bcaea279189fcbfcff01da1b1 Mon Sep 17 00:00:00 2001
From: Pat O'Neill <pgoneill@gmail.com>
Date: Fri, 2 Oct 2015 18:34:34 -0400
Subject: [PATCH 05/36] Modal also suppresses controls.

---
 src/js/modal-dialog.js         | 10 +++++++---
 test/unit/modal-dialog.test.js | 10 ++++++++++
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/src/js/modal-dialog.js b/src/js/modal-dialog.js
index 24bf112a83..ae0a9fd22a 100644
--- a/src/js/modal-dialog.js
+++ b/src/js/modal-dialog.js
@@ -137,14 +137,16 @@ class ModalDialog extends Component {
 
     this.trigger('beforemodalopen');
     this.opened_ = true;
+    let player = this.player();
 
     // If the player was playing, pause it and take note of its previously
     // playing state.
-    this.wasPlaying_ = !this.player().paused();
+    this.wasPlaying_ = !player.paused();
     if (this.wasPlaying_) {
-      this.player().pause();
+      player.pause();
     }
 
+    player.controls(false);
     Events.on(document, 'keydown', this.handleKeyPress);
     this.show();
     this.trigger('modalopen');
@@ -173,11 +175,13 @@ class ModalDialog extends Component {
 
     this.trigger('beforemodalclose');
     this.opened_ = false;
+    let player = this.player();
 
     if (this.wasPlaying_) {
-      this.player().play();
+      player.play();
     }
 
+    player.controls(true);
     Events.off(document, 'keydown', this.handleKeyPress);
     this.hide();
     this.trigger('modalclose');
diff --git a/test/unit/modal-dialog.test.js b/test/unit/modal-dialog.test.js
index d60eccd9bd..6e7377fb8e 100644
--- a/test/unit/modal-dialog.test.js
+++ b/test/unit/modal-dialog.test.js
@@ -169,6 +169,16 @@ q.test('open() pauses playback, close() resumes', function(assert) {
   assert.strictEqual(this.player.play.callCount, 1, 'player is resumed when the modal closes');
 });
 
+q.test('open() hides controls, close() shows controls', function(assert) {
+  this.modal.open();
+
+  assert.expect(2);
+  assert.notOk(this.player.controls_, 'controls are hidden');
+
+  this.modal.close();
+  assert.ok(this.player.controls_, 'controls are no longer hidden');
+});
+
 q.test('"disposeOnClose" option', function(assert) {
   var modal = new ModalDialog(this.player, {disposeOnClose: true});
 

From a178f5c08e7f0a2c9d99ec6c5b21403f22f69c6c Mon Sep 17 00:00:00 2001
From: Pat O'Neill <pgoneill@gmail.com>
Date: Mon, 5 Oct 2015 10:54:40 -0400
Subject: [PATCH 06/36] Add linear-gradient mixin

---
 src/css/_utilities.scss                 |  8 ++-
 src/css/components/_modal-dialog.scss   | 23 +------
 src/css/utilities/_linear-gradient.scss | 81 +++++++++++++++++++++++++
 3 files changed, 91 insertions(+), 21 deletions(-)
 create mode 100644 src/css/utilities/_linear-gradient.scss

diff --git a/src/css/_utilities.scss b/src/css/_utilities.scss
index f2d7c4f050..a40cab5b60 100644
--- a/src/css/_utilities.scss
+++ b/src/css/_utilities.scss
@@ -1,3 +1,5 @@
+@import "utilities/linear-gradient";
+
 @mixin background-color-with-alpha($color, $alpha) {
   background-color: $color;
   background-color: rgba($color, $alpha);
@@ -94,11 +96,15 @@
   order: $value;
 }
 
-%icon-default {
+%overlay-space {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
+}
+
+%icon-default {
+  @extend %fill-space;
   text-align: center;
 }
diff --git a/src/css/components/_modal-dialog.scss b/src/css/components/_modal-dialog.scss
index 9391932540..d5f7efc76e 100644
--- a/src/css/components/_modal-dialog.scss
+++ b/src/css/components/_modal-dialog.scss
@@ -1,26 +1,9 @@
-%fill-player {
-  height: 100%;
-  left: 0;
-  position: absolute;
-  top: 0;
-  width: 100%;
-}
-
 .video-js .vjs-modal-dialog {
-  @extend %fill-player;
-
-  $gradient-start: rgba(0, 0, 0, 0.8);
-  $gradient-stop: rgba(255, 255, 255, 0);
-  background: $gradient-start;
-  background: -moz-linear-gradient(top, $gradient-start 0%, $gradient-stop 100%);
-  background: -webkit-gradient(left top, left bottom, color-stop(0%, $gradient-start), color-stop(100%, $gradient-stop));
-  background: -webkit-linear-gradient(top, $gradient-start 0%, $gradient-stop 100%);
-  background: -o-linear-gradient(top, $gradient-start 0%, $gradient-stop 100%);
-  background: -ms-linear-gradient(top, $gradient-start 0%, $gradient-stop 100%);
-  background: linear-gradient(top bottom, $gradient-start 0%, $gradient-stop 100%);
+  @extend %overlay-space;
+  @include linear-gradient(180deg, rgba(0, 0, 0, 0.8), rgba(255, 255, 255, 0));
 
   .vjs-modal-dialog-content {
-    @extend %fill-player;
+    @extend %overlay-space;
     z-index: 1;
   }
 
diff --git a/src/css/utilities/_linear-gradient.scss b/src/css/utilities/_linear-gradient.scss
new file mode 100644
index 0000000000..b4827bee7b
--- /dev/null
+++ b/src/css/utilities/_linear-gradient.scss
@@ -0,0 +1,81 @@
+// These functions and mixins taken from:
+//
+// "Building a linear-gradient Mixin in Sass" by Hugo Giraudel
+//    http://www.sitepoint.com/building-linear-gradient-mixin-sass/
+//    http://sassmeister.com/gist/b58f6e2cc3160007c880
+//
+
+/// Convert angle
+/// @author Chris Eppstein
+/// @param {Number} $value - Value to convert
+/// @param {String} $unit - Unit to convert to
+/// @return {Number} Converted angle
+@function convert-angle($value, $unit) {
+  $convertable-units: deg grad turn rad;
+  $conversion-factors: 1 (10grad/9deg) (1turn/360deg) (3.1415926rad/180deg);
+  @if index($convertable-units, unit($value)) and index($convertable-units, $unit) {
+    @return $value
+             / nth($conversion-factors, index($convertable-units, unit($value)))
+             * nth($conversion-factors, index($convertable-units, $unit));
+  }
+
+  @warn "Cannot convert `#{unit($value)}` to `#{$unit}`.";
+}
+
+/// Test if `$value` is an angle
+/// @param {*} $value - Value to test
+/// @return {Bool}
+@function is-direction($value) {
+  $is-direction: index((to top, to top right, to right top, to right, to bottom right, to right bottom, to bottom, to bottom left, to left bottom, to left, to left top, to top left), $value);
+  $is-angle: type-of($value) == 'number' and index('deg' 'grad' 'turn' 'rad', unit($value));
+
+  @return $is-direction or $is-angle;
+}
+
+/// Convert a direction to legacy syntax
+/// @param {Keyword | Angle} $value - Value to convert
+/// @require {function} is-direction
+/// @require {function} convert-angle
+@function legacy-direction($value) {
+  @if is-direction($value) == false {
+    @warn "Cannot convert `#{$value}` to legacy syntax because it doesn't seem to be an angle or a direction";
+  }
+
+  $conversion-map: (
+    to top          : bottom,
+    to top right    : bottom left,
+    to right top    : left bottom,
+    to right        : left,
+    to bottom right : top left,
+    to right bottom : left top,
+    to bottom       : top,
+    to bottom left  : top right,
+    to left bottom  : right top,
+    to left         : right,
+    to left top     : right bottom,
+    to top left     : bottom right
+  );
+
+  @if map-has-key($conversion-map, $value) {
+    @return map-get($conversion-map, $value);
+  }
+
+  @return 90deg - convert-angle($value, 'deg');
+}
+
+/// Mixin printing a linear-gradient
+/// as well as a plain color fallback
+/// and the `-webkit-` prefixed declaration
+/// @access public
+/// @param {String | List | Angle} $direction - Linear gradient direction
+/// @param {Arglist} $color-stops - List of color-stops composing the gradient
+@mixin linear-gradient($direction, $color-stops...) {
+  @if is-direction($direction) == false {
+    $color-stops: ($direction, $color-stops);
+    $direction: 180deg;
+  }
+
+  background: nth(nth($color-stops, 1), 1);
+  background: -webkit-linear-gradient(legacy-direction($direction), $color-stops);
+  background: linear-gradient($direction, $color-stops);
+}

From 5041d8ebf7627b67d688d9c84ee977898a5ec748 Mon Sep 17 00:00:00 2001
From: Pat O'Neill <pgoneill@gmail.com>
Date: Mon, 5 Oct 2015 10:55:09 -0400
Subject: [PATCH 07/36] Remove unnecessary step

I didn't understand that the event handlers were tracked by a `guid`
property on the function rather than by reference. Because the `guid` is
added to the original function (not the bound function), this step was
unnecessary.
---
 src/js/modal-dialog.js | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/src/js/modal-dialog.js b/src/js/modal-dialog.js
index ae0a9fd22a..eb6cb2d115 100644
--- a/src/js/modal-dialog.js
+++ b/src/js/modal-dialog.js
@@ -63,10 +63,6 @@ class ModalDialog extends Component {
     super(player, options);
     this.opened_ = false;
 
-    // Create an own property for each instance with a bound keypress
-    // handler so it can be properly added and removed as a listener.
-    this.handleKeyPress = Fn.bind(this, this.handleKeyPress);
-
     // If a close button was added (which is the default), set the modal to
     // close when the button is activated.
     let close = this.getChild('closeButton');
@@ -147,7 +143,7 @@ class ModalDialog extends Component {
     }
 
     player.controls(false);
-    Events.on(document, 'keydown', this.handleKeyPress);
+    Events.on(document, 'keydown', Fn.bind(this, this.handleKeyPress));
     this.show();
     this.trigger('modalopen');
   }
@@ -182,7 +178,7 @@ class ModalDialog extends Component {
     }
 
     player.controls(true);
-    Events.off(document, 'keydown', this.handleKeyPress);
+    Events.off(document, 'keydown', Fn.bind(this, this.handleKeyPress));
     this.hide();
     this.trigger('modalclose');
 

From 46a178d1a7f5edb58724009e06030dd3fb9aa201 Mon Sep 17 00:00:00 2001
From: Pat O'Neill <pgoneill@gmail.com>
Date: Mon, 5 Oct 2015 10:58:15 -0400
Subject: [PATCH 08/36] Fix typo

---
 src/css/_utilities.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/css/_utilities.scss b/src/css/_utilities.scss
index a40cab5b60..5b3cca4c28 100644
--- a/src/css/_utilities.scss
+++ b/src/css/_utilities.scss
@@ -105,6 +105,6 @@
 }
 
 %icon-default {
-  @extend %fill-space;
+  @extend %overlay-space;
   text-align: center;
 }

From a617e49437ae2f445602d01025abd4a8035013d1 Mon Sep 17 00:00:00 2001
From: Pat O'Neill <pgoneill@gmail.com>
Date: Mon, 5 Oct 2015 14:14:39 -0400
Subject: [PATCH 09/36] Add methods to fill/empty modal content

---
 src/js/modal-dialog.js         | 187 ++++++++++++++++++++++++---------
 src/js/utils/dom.js            |  11 ++
 test/unit/modal-dialog.test.js | 106 +++++++++++++++++--
 3 files changed, 245 insertions(+), 59 deletions(-)

diff --git a/src/js/modal-dialog.js b/src/js/modal-dialog.js
index eb6cb2d115..70fc613600 100644
--- a/src/js/modal-dialog.js
+++ b/src/js/modal-dialog.js
@@ -22,11 +22,11 @@ const DISALLOWED_SLUGS = [
 const ESC = 27;
 
 /**
- * Modal dialog for use by plugins to display a dialog over the video, which
- * blocks interaction with the player until it is closed.
+ * The `ModalDialog` displays over the video and its controls, which blocks
+ * interaction with the player until it is closed.
  *
  * Modal dialogs include a "Close" button and will close when that button
- * is activated - or when Esc is pressed anywhere.
+ * is activated - or when ESC is pressed anywhere.
  *
  * @extends Component
  * @class ModalDialog
@@ -38,22 +38,31 @@ class ModalDialog extends Component {
    *
    * @param  {Player} player
    * @param  {Object} [options]
-   * @param  {Boolean} [options.disposeOnClose]
-   *         If `true`, the modal can only be opened once. It will be
-   *         disposed as soon as it's closed.
+   * @param  {Mixed} [options.content]
+   *         Provide customized content for this modal dialog.
    *
-   * @param  {String} [options.label]
-   *         A text label for the dialog, primarily for accessibility.
+   * @param  {Boolean} [options.disposeOnClose=false]
+   *         If `true`, the modal dialog can only be opened once. It will be
+   *         disposed as soon as it's closed, which is useful for one-off
+   *         modal dialogs.
    *
-   * @param  {Boolean} [options.openImmediately]
-   *         If `true`, the modal will be displayed immediately upon
+   * @param  {String} [options.label='']
+   *         A text label for the modal dialog, primarily for accessibility.
+   *
+   * @param  {Boolean} [options.openImmediately=false]
+   *         If `true`, the modal dialog will be displayed immediately upon
    *         instantiation.
    *
+   * @param  {Boolean} [options.fillImmediately=false]
+   *         If `true`, the modal dialog will be filled immediately upon
+   *         instantiation - rather than manually or the first time it
+   *         opens.
+   *
    * @param  {String} [options.slug]
    *         This is a string that will be prefixed with "vjs-modal-dialog-"
-   *         to construct a CSS class specific to this modal. For example,
-   *         if this option were "foo," the modal could be identified with
-   *         the class "vjs-modal-dialog-foo".
+   *         to construct a CSS class specific to this modal dialog. For
+   *         example, if this option were "foo," the modal dialog could be
+   *         identified with the class "vjs-modal-dialog-foo".
    */
   constructor(player, options) {
     if (options && DISALLOWED_SLUGS.indexOf(options.slug) > -1) {
@@ -61,23 +70,27 @@ class ModalDialog extends Component {
     }
 
     super(player, options);
-    this.opened_ = false;
+    this.opened_ = this.hasBeenOpened_ = this.hasBeenFilled_ = false;
 
-    // If a close button was added (which is the default), set the modal to
-    // close when the button is activated.
+    // If a close button was added (which is the default), set the modal
+    // dialog to close when the button is activated.
     let close = this.getChild('closeButton');
     if (close) {
       this.on(close, 'close', this.close);
     }
 
     // Make sure the contentEl is defined AFTER any children are initialized
-    // because we only want the contents of the modal in the contentEl (not
-    // the UI elements like the close button).
+    // because we only want the contents of the modal dialog in the contentEl
+    // (not the UI elements like the close button).
     this.contentEl_ = Dom.createEl('div', {
       className: `${CLASS_NAME_PREFIX}-content`
     });
     this.el_.appendChild(this.contentEl_);
 
+    if (this.options_.fillImmediately) {
+      this.fill();
+    }
+
     if (this.options_.openImmediately) {
       this.open();
     }
@@ -127,29 +140,36 @@ class ModalDialog extends Component {
    * @return {ModalDialog}
    */
   open() {
-    if (this.opened_) {
-      return;
-    }
+    if (!this.opened_) {
+      let player = this.player();
 
-    this.trigger('beforemodalopen');
-    this.opened_ = true;
-    let player = this.player();
+      this.trigger('beforemodalopen');
+      this.opened_ = true;
 
-    // If the player was playing, pause it and take note of its previously
-    // playing state.
-    this.wasPlaying_ = !player.paused();
-    if (this.wasPlaying_) {
-      player.pause();
-    }
+      // Fill content if the modal dialog has never opened before and
+      // never been filled.
+      if (this.options_.content && !this.hasBeenOpened_ && !this.hasBeenFilled_) {
+        this.fill();
+      }
+
+      // If the player was playing, pause it and take note of its previously
+      // playing state.
+      this.wasPlaying_ = !player.paused();
+      if (this.wasPlaying_) {
+        player.pause();
+      }
 
-    player.controls(false);
-    Events.on(document, 'keydown', Fn.bind(this, this.handleKeyPress));
-    this.show();
-    this.trigger('modalopen');
+      player.controls(false);
+      Events.on(document, 'keydown', Fn.bind(this, this.handleKeyPress));
+      this.show();
+      this.trigger('modalopen');
+      this.hasBeenOpened_ = true;
+    }
+    return this;
   }
 
   /**
-   * Whether or not the modal is open currently.
+   * Whether or not the modal dialog is opened currently.
    *
    * @method opened
    * @return {Boolean}
@@ -165,26 +185,97 @@ class ModalDialog extends Component {
    * @return {ModalDialog}
    */
   close() {
-    if (!this.opened_) {
-      return;
+    if (this.opened_) {
+      let player = this.player();
+
+      this.trigger('beforemodalclose');
+      this.opened_ = false;
+
+      if (this.wasPlaying_) {
+        player.play();
+      }
+
+      player.controls(true);
+      Events.off(document, 'keydown', Fn.bind(this, this.handleKeyPress));
+      this.hide();
+      this.trigger('modalclose');
+
+      if (this.options_.disposeOnClose) {
+        this.dispose();
+      }
     }
+    return this;
+  }
 
-    this.trigger('beforemodalclose');
-    this.opened_ = false;
-    let player = this.player();
+  /**
+   * Fill the modal dialog's content element with the given content or
+   * falling back on the modal dialog's "content" option.
+   *
+   * The content element will be emptied before this change takes place.
+   *
+   * @param  {Mixed} [content]
+   *         Defines the contents of the modal dialog. This must be either
+   *         a DOM element, an array of DOM elements, or a function which
+   *         returns one of these.
+   *
+   * @return {ModalDialog}
+   */
+  fill(content=this.options_.content) {
+    let contentEl = this.contentEl();
+    let parentEl = contentEl.parentNode;
+    let nextSiblingEl = contentEl.nextSibling;
+
+    this.hasBeenFilled_ = true;
+
+    // Detach the content element from the DOM before performing
+    // manipulation to avoid modifying the live DOM multiple times.
+    parentEl.removeChild(contentEl);
+    this.empty();
+
+    this.normalizeContent_(content).forEach(el => contentEl.appendChild(el));
 
-    if (this.wasPlaying_) {
-      player.play();
+    // Re-inject the re-filled content element.
+    if (nextSiblingEl) {
+      parentEl.insertBefore(contentEl, nextSiblingEl);
+    } else {
+      parentEl.appendChild(contentEl);
     }
 
-    player.controls(true);
-    Events.off(document, 'keydown', Fn.bind(this, this.handleKeyPress));
-    this.hide();
-    this.trigger('modalclose');
+    return this;
+  }
+
+  /**
+   * Empties the content element.
+   *
+   * This happens automatically anytime the modal dialog is filled.
+   *
+   * @return {ModalDialog}
+   */
+  empty() {
+    let contentEl = this.contentEl();
+    [].slice.call(contentEl.children).forEach(el => contentEl.removeChild(el));
+    return this;
+  }
+
+  /**
+   * Normalizes contents for insertion into a content element.
+   *
+   * Always returns an array of DOM elements.
+   *
+   * @private
+   * @param  {Array|Element|Function} content
+   * @return {Array}
+   */
+  normalizeContent_(content) {
+    if (typeof content === 'function') {
+      content = content.call(this, this.contentEl());
+    }
 
-    if (this.options_.disposeOnClose) {
-      this.dispose();
+    if (!Array.isArray(content)) {
+      content = [content];
     }
+
+    return content.filter(Dom.isEl);
   }
 }
 
diff --git a/src/js/utils/dom.js b/src/js/utils/dom.js
index 570ccdbb47..98cd4ad711 100644
--- a/src/js/utils/dom.js
+++ b/src/js/utils/dom.js
@@ -369,3 +369,14 @@ export function getPointerPosition(el, event) {
 
   return position;
 }
+
+
+/**
+ * Determines, via duck typing, whether or not a value is a DOM element.
+ *
+ * @param  {Mixed} value
+ * @return {Boolean}
+ */
+export function isEl(value) {
+  return !!value && typeof value === 'object' && value.nodeType === 1;
+}
diff --git a/test/unit/modal-dialog.test.js b/test/unit/modal-dialog.test.js
index 6e7377fb8e..e4f5045398 100644
--- a/test/unit/modal-dialog.test.js
+++ b/test/unit/modal-dialog.test.js
@@ -1,5 +1,6 @@
 import CloseButton from '../../src/js/close-button';
 import ModalDialog from '../../src/js/modal-dialog';
+import * as Dom from '../../src/js/utils/dom';
 import * as Fn from '../../src/js/utils/fn';
 import TestHelpers from './test-helpers';
 
@@ -62,6 +63,15 @@ q.test('should create a close button by default', function(assert) {
   assert.strictEqual(btn.el().parentNode, this.el, 'close button is a child of el');
 });
 
+q.test('returns `this` for expected methods', function(assert) {
+  var methods = ['open', 'close', 'fill', 'empty'];
+
+  assert.expect(methods.length);
+  methods.forEach(function(method) {
+    assert.strictEqual(this[method](), this, '`' + method + '()` returns `this`');
+  }, this.modal);
+});
+
 q.test('open() triggers events', function(assert) {
   var modal = this.modal;
   var beforeModalOpenSpy = sinon.spy(function() {
@@ -92,8 +102,7 @@ q.test('open() cannot be called on an opened modal', function(assert) {
   var spy = sinon.spy();
 
   this.modal.on('modalopen', spy);
-  this.modal.open();
-  this.modal.open();
+  this.modal.open().open();
 
   assert.expect(1);
   assert.strictEqual(spy.callCount, 1, 'modal was only opened once');
@@ -113,16 +122,14 @@ q.test('close() triggers events', function(assert) {
   modal.on('modalclose', modalCloseSpy);
 
   assert.expect(4);
-  modal.open();
-  modal.close();
+  modal.open().close();
   assert.strictEqual(beforeModalCloseSpy.callCount, 1, 'beforemodalclose spy was called');
   assert.strictEqual(modalCloseSpy.callCount, 1, 'modalclose spy was called');
 });
 
 q.test('close() adds the "vjs-hidden" class', function(assert) {
   assert.expect(1);
-  this.modal.open();
-  this.modal.close();
+  this.modal.open().close();
   assert.ok(this.modal.hasClass('vjs-hidden'), 'modal is hidden upon close');
 });
 
@@ -143,9 +150,7 @@ q.test('close() cannot be called on an closed modal', function(assert) {
   var spy = sinon.spy();
 
   this.modal.on('modalclose', spy);
-  this.modal.open();
-  this.modal.close();
-  this.modal.close();
+  this.modal.open().close().close();
 
   assert.expect(1);
   assert.strictEqual(spy.callCount, 1, 'modal was only closed once');
@@ -179,12 +184,91 @@ q.test('open() hides controls, close() shows controls', function(assert) {
   assert.ok(this.player.controls_, 'controls are no longer hidden');
 });
 
+q.test('normalizeContent_() with arrays and elements', function(assert) {
+  var asElement = this.modal.normalizeContent_(Dom.createEl());
+  var asInvalid = this.modal.normalizeContent_(null);
+
+  var asArray = this.modal.normalizeContent_([
+    Dom.createEl(), {}, Dom.createEl('span'), []
+  ]);
+
+  assert.expect(3);
+  assert.strictEqual(asElement.length, 1, 'single elements are accepted');
+  assert.strictEqual(asInvalid.length, 0, 'single invalid values are rejected');
+  assert.strictEqual(asArray.length, 2, 'invalid values filtered out of array');
+});
+
+q.test('normalizeContent_() with callbacks', function(assert) {
+  var asElementFn = this.modal.normalizeContent_(function() {
+    return Dom.createEl();
+  });
+
+  var asInvalidFn = this.modal.normalizeContent_(function() {
+    return 'hello world';
+  });
+
+  var asArrayFn = this.modal.normalizeContent_(function() {
+    return [null, 123, Dom.createEl()];
+  });
+
+  assert.expect(3);
+  assert.strictEqual(asElementFn.length, 1, 'single elements are accepted when returned by a function');
+  assert.strictEqual(asInvalidFn.length, 0, 'single invalid values are rejected when returned by a function');
+  assert.strictEqual(asArrayFn.length, 1, 'invalid values filtered out of array when returned by a function');
+});
+
+q.test('normalizeContent_() callback invocations', function(assert) {
+  var callbackSpy = sinon.spy();
+  var spyCall;
+
+  this.modal.normalizeContent_(callbackSpy);
+  spyCall = callbackSpy.getCall(0);
+
+  assert.expect(3);
+  assert.strictEqual(callbackSpy.callCount, 1, 'the test callback was called');
+  assert.strictEqual(spyCall.thisValue, this.modal, 'the value of "this" in the callback is the modal');
+  assert.ok(spyCall.calledWithExactly(this.modal.contentEl()), 'the contentEl is passed to the callback');
+});
+
+q.test('empty()', function(assert) {
+  this.modal.fill([Dom.createEl(), Dom.createEl()]).empty();
+  assert.expect(1);
+  assert.strictEqual(this.modal.contentEl().children.length, 0, 'removed all `contentEl()` children');
+});
+
+q.test('fill()', function(assert) {
+  var contentEl = this.modal.contentEl();
+  var children = [Dom.createEl(), Dom.createEl(), Dom.createEl()];
+
+  [Dom.createEl(), Dom.createEl()].forEach(function(el) {
+    contentEl.appendChild(el);
+  });
+
+  this.modal.fill(children);
+
+  assert.expect(1 + children.length);
+  assert.strictEqual(contentEl.children.length, children.length, 'has the right number of children');
+  children.forEach(function(el) {
+    assert.strictEqual(el.parentNode, contentEl, 'new child appended');
+  });
+});
+
+q.test('"content" option (fills on first open() invocation)', function(assert) {
+  var modal = new ModalDialog(this.player, {content: Dom.createEl()});
+
+  sinon.spy(modal, 'fill');
+  modal.open().close().open();
+
+  assert.expect(2);
+  assert.strictEqual(modal.fill.callCount, 1, 'auto-fills only once');
+  assert.strictEqual(modal.contentEl().firstChild, modal.options_.content, 'has the expected content');
+});
+
 q.test('"disposeOnClose" option', function(assert) {
   var modal = new ModalDialog(this.player, {disposeOnClose: true});
 
-  modal.open();
   sinon.spy(modal, 'dispose');
-  modal.close();
+  modal.open().close();
 
   assert.expect(1);
   assert.strictEqual(modal.dispose.callCount, 1, 'dispose was called');

From b22f6a0b877f372d890ae8d0be4cac6a7d4524be Mon Sep 17 00:00:00 2001
From: Pat O'Neill <pgoneill@gmail.com>
Date: Mon, 5 Oct 2015 15:12:30 -0400
Subject: [PATCH 10/36] Support "closeability" on the modal

This also enhances the functionality of the `opened()` method.
---
 src/js/modal-dialog.js         | 116 +++++++++++++++++++++++----------
 test/unit/modal-dialog.test.js |  97 ++++++++++++++++++++++-----
 2 files changed, 162 insertions(+), 51 deletions(-)

diff --git a/src/js/modal-dialog.js b/src/js/modal-dialog.js
index 70fc613600..f0ee1c3020 100644
--- a/src/js/modal-dialog.js
+++ b/src/js/modal-dialog.js
@@ -13,7 +13,7 @@ import CloseButton from './close-button';
 
 const CLASS_NAME_PREFIX = 'vjs-modal-dialog';
 
-// An array of strings which are used for modal dialog sub-element classes,
+// An array of strings which are used for modal sub-element classes,
 // so will cause CSS issues if used as a slug.
 const DISALLOWED_SLUGS = [
   'content'
@@ -34,35 +34,41 @@ const ESC = 27;
 class ModalDialog extends Component {
 
   /**
-   * Constructor for modal dialogs.
+   * Constructor for modals.
    *
    * @param  {Player} player
    * @param  {Object} [options]
-   * @param  {Mixed} [options.content]
-   *         Provide customized content for this modal dialog.
+   * @param  {Mixed} [options.content=undefined]
+   *         Provide customized content for this modal.
    *
    * @param  {Boolean} [options.disposeOnClose=false]
-   *         If `true`, the modal dialog can only be opened once. It will be
+   *         If `true`, the modal can only be opened once. It will be
    *         disposed as soon as it's closed, which is useful for one-off
-   *         modal dialogs.
+   *         modals.
    *
    * @param  {String} [options.label='']
-   *         A text label for the modal dialog, primarily for accessibility.
+   *         A text label for the modal, primarily for accessibility.
    *
    * @param  {Boolean} [options.openImmediately=false]
-   *         If `true`, the modal dialog will be displayed immediately upon
+   *         If `true`, the modal will be displayed immediately upon
    *         instantiation.
    *
    * @param  {Boolean} [options.fillImmediately=false]
-   *         If `true`, the modal dialog will be filled immediately upon
+   *         If `true`, the modal will be filled immediately upon
    *         instantiation - rather than manually or the first time it
    *         opens.
    *
-   * @param  {String} [options.slug]
+   * @param  {String} [options.slug='none']
    *         This is a string that will be prefixed with "vjs-modal-dialog-"
-   *         to construct a CSS class specific to this modal dialog. For
-   *         example, if this option were "foo," the modal dialog could be
+   *         to construct a CSS class specific to this modal. For
+   *         example, if this option were "foo," the modal could be
    *         identified with the class "vjs-modal-dialog-foo".
+   *
+   * @param  {Boolean} [options.uncloseable=false]
+   *         If `true`, the user will not be able to close the modal
+   *         through the UI in the normal ways. Programmatic closing is
+   *         still possible.
+   *
    */
   constructor(player, options) {
     if (options && DISALLOWED_SLUGS.indexOf(options.slug) > -1) {
@@ -72,15 +78,10 @@ class ModalDialog extends Component {
     super(player, options);
     this.opened_ = this.hasBeenOpened_ = this.hasBeenFilled_ = false;
 
-    // If a close button was added (which is the default), set the modal
-    // dialog to close when the button is activated.
-    let close = this.getChild('closeButton');
-    if (close) {
-      this.on(close, 'close', this.close);
-    }
+    this.closeable(!this.options_.uncloseable);
 
     // Make sure the contentEl is defined AFTER any children are initialized
-    // because we only want the contents of the modal dialog in the contentEl
+    // because we only want the contents of the modal in the contentEl
     // (not the UI elements like the close button).
     this.contentEl_ = Dom.createEl('div', {
       className: `${CLASS_NAME_PREFIX}-content`
@@ -97,9 +98,10 @@ class ModalDialog extends Component {
   }
 
   /**
-   * Create the modal dialog's DOM element
+   * Create the modal's DOM element
    *
    * @method createEl
+   * @return {Element}
    */
   createEl() {
     return super.createEl('div', {
@@ -112,9 +114,10 @@ class ModalDialog extends Component {
   }
 
   /**
-   * Build the modal dialog's CSS class.
+   * Build the modal's CSS class.
    *
    * @method buildCSSClass
+   * @return {String}
    */
   buildCSSClass() {
     return `${CLASS_NAME_PREFIX} vjs-hidden ${CLASS_NAME_PREFIX}-${this.options_.slug} ${super.buildCSSClass()}`;
@@ -122,19 +125,19 @@ class ModalDialog extends Component {
 
   /**
    * Handles key presses on the document, looking for ESC, which closes
-   * the modal dialog.
+   * the modal.
    *
    * @method handleKeyPress
    * @param  {Event} e
    */
   handleKeyPress(e) {
-    if (e.which === ESC) {
+    if (e.which === ESC && this.closeable()) {
       this.close();
     }
   }
 
   /**
-   * Opens the modal dialog.
+   * Opens the modal.
    *
    * @method open
    * @return {ModalDialog}
@@ -146,7 +149,7 @@ class ModalDialog extends Component {
       this.trigger('beforemodalopen');
       this.opened_ = true;
 
-      // Fill content if the modal dialog has never opened before and
+      // Fill content if the modal has never opened before and
       // never been filled.
       if (this.options_.content && !this.hasBeenOpened_ && !this.hasBeenFilled_) {
         this.fill();
@@ -155,12 +158,16 @@ class ModalDialog extends Component {
       // If the player was playing, pause it and take note of its previously
       // playing state.
       this.wasPlaying_ = !player.paused();
+
       if (this.wasPlaying_) {
         player.pause();
       }
 
+      if (this.closeable()) {
+        Events.on(document, 'keydown', Fn.bind(this, this.handleKeyPress));
+      }
+
       player.controls(false);
-      Events.on(document, 'keydown', Fn.bind(this, this.handleKeyPress));
       this.show();
       this.trigger('modalopen');
       this.hasBeenOpened_ = true;
@@ -169,17 +176,25 @@ class ModalDialog extends Component {
   }
 
   /**
-   * Whether or not the modal dialog is opened currently.
+   * Whether or not the modal is opened currently.
    *
    * @method opened
-   * @return {Boolean}
+   * @param  {Boolean} [value]
+   *         If given as a Boolean, it will open (`true`) or close (`false`)
+   *         the modal.
+   *
+   * @return {Boolean|ModalDialog}
+   *         Returns `this` only if `value` was passed.
    */
-  opened() {
+  opened(value) {
+    if (typeof value !== 'undefined') {
+      this[value ? 'open' : 'close']();
+    }
     return !!this.opened_;
   }
 
   /**
-   * Closes the modal dialog.
+   * Closes the modal.
    *
    * @method close
    * @return {ModalDialog}
@@ -195,8 +210,11 @@ class ModalDialog extends Component {
         player.play();
       }
 
+      if (this.closeable()) {
+        Events.off(document, 'keydown', Fn.bind(this, this.handleKeyPress));
+      }
+
       player.controls(true);
-      Events.off(document, 'keydown', Fn.bind(this, this.handleKeyPress));
       this.hide();
       this.trigger('modalclose');
 
@@ -208,13 +226,39 @@ class ModalDialog extends Component {
   }
 
   /**
-   * Fill the modal dialog's content element with the given content or
-   * falling back on the modal dialog's "content" option.
+   * Whether or not the modal is closeable via the UI.
+   *
+   * @method closeable
+   * @param  {Boolean} [value]
+   *         If given as a Boolean, it will set the `closeable` option.
+   *
+   * @return {Boolean}
+   */
+  closeable(value) {
+    if (typeof value !== 'undefined') {
+      let closeable = this.closeable_ = !!value;
+      let close = this.getChild('closeButton');
+
+      if (closeable && !close) {
+        this.on(this.addChild('closeButton'), 'close', this.close);
+      } else if (!closeable && close) {
+        this.off(close, 'close', this.close);
+        this.removeChild(close);
+        close.dispose();
+      }
+    }
+    return !!this.closeable_;
+  }
+
+  /**
+   * Fill the modal's content element with the given content or
+   * falling back on the modal's "content" option.
    *
    * The content element will be emptied before this change takes place.
    *
+   * @method fill
    * @param  {Mixed} [content]
-   *         Defines the contents of the modal dialog. This must be either
+   *         Defines the contents of the modal. This must be either
    *         a DOM element, an array of DOM elements, or a function which
    *         returns one of these.
    *
@@ -247,8 +291,9 @@ class ModalDialog extends Component {
   /**
    * Empties the content element.
    *
-   * This happens automatically anytime the modal dialog is filled.
+   * This happens automatically anytime the modal is filled.
    *
+   * @method empty
    * @return {ModalDialog}
    */
   empty() {
@@ -262,6 +307,7 @@ class ModalDialog extends Component {
    *
    * Always returns an array of DOM elements.
    *
+   * @method normalizeContent_
    * @private
    * @param  {Array|Element|Function} content
    * @return {Array}
diff --git a/test/unit/modal-dialog.test.js b/test/unit/modal-dialog.test.js
index e4f5045398..7e7213d6bb 100644
--- a/test/unit/modal-dialog.test.js
+++ b/test/unit/modal-dialog.test.js
@@ -4,6 +4,8 @@ import * as Dom from '../../src/js/utils/dom';
 import * as Fn from '../../src/js/utils/fn';
 import TestHelpers from './test-helpers';
 
+var ESC = 27;
+
 q.module('ModalDialog', {
 
   beforeEach: function() {
@@ -82,11 +84,13 @@ q.test('open() triggers events', function(assert) {
     assert.ok(modal.opened(), 'modal is opened on opening event');
   });
 
-  modal.on('beforemodalopen', beforeModalOpenSpy);
-  modal.on('modalopen', modalOpenSpy);
-
   assert.expect(4);
-  modal.open();
+
+  modal.
+    on('beforemodalopen', beforeModalOpenSpy).
+    on('modalopen', modalOpenSpy).
+    open();
+
   assert.strictEqual(beforeModalOpenSpy.callCount, 1, 'beforemodalopen spy was called');
   assert.strictEqual(modalOpenSpy.callCount, 1, 'modalopen spy was called');
 });
@@ -101,8 +105,7 @@ q.test('open() removes "vjs-hidden" class', function(assert) {
 q.test('open() cannot be called on an opened modal', function(assert) {
   var spy = sinon.spy();
 
-  this.modal.on('modalopen', spy);
-  this.modal.open().open();
+  this.modal.on('modalopen', spy).open().open();
 
   assert.expect(1);
   assert.strictEqual(spy.callCount, 1, 'modal was only opened once');
@@ -118,11 +121,14 @@ q.test('close() triggers events', function(assert) {
     assert.notOk(modal.opened(), 'modal is closed on closing event');
   });
 
-  modal.on('beforemodalclose', beforeModalCloseSpy);
-  modal.on('modalclose', modalCloseSpy);
-
   assert.expect(4);
-  modal.open().close();
+
+  modal.
+    on('beforemodalclose', beforeModalCloseSpy).
+    on('modalclose', modalCloseSpy).
+    open().
+    close();
+
   assert.strictEqual(beforeModalCloseSpy.callCount, 1, 'beforemodalclose spy was called');
   assert.strictEqual(modalCloseSpy.callCount, 1, 'modalclose spy was called');
 });
@@ -136,21 +142,18 @@ q.test('close() adds the "vjs-hidden" class', function(assert) {
 q.test('pressing ESC triggers close(), but only when the modal is opened', function(assert) {
   var spy = sinon.spy();
 
-  this.modal.on('modalclose', spy);
-  this.modal.handleKeyPress({which: 27});
+  this.modal.on('modalclose', spy).handleKeyPress({which: ESC});
   assert.expect(2);
   assert.strictEqual(spy.callCount, 0, 'ESC did not close the closed modal');
 
-  this.modal.open();
-  this.modal.handleKeyPress({which: 27});
+  this.modal.open().handleKeyPress({which: ESC});
   assert.strictEqual(spy.callCount, 1, 'ESC closed the now-opened modal');
 });
 
 q.test('close() cannot be called on an closed modal', function(assert) {
   var spy = sinon.spy();
 
-  this.modal.on('modalclose', spy);
-  this.modal.open().close().close();
+  this.modal.on('modalclose', spy).open().close().close();
 
   assert.expect(1);
   assert.strictEqual(spy.callCount, 1, 'modal was only closed once');
@@ -184,6 +187,27 @@ q.test('open() hides controls, close() shows controls', function(assert) {
   assert.ok(this.player.controls_, 'controls are no longer hidden');
 });
 
+q.test('opened()', function(assert) {
+  var openSpy = sinon.spy();
+  var closeSpy = sinon.spy();
+
+  assert.expect(4);
+  assert.strictEqual(this.modal.opened(), false, 'the modal is closed');
+  this.modal.open();
+  assert.strictEqual(this.modal.opened(), true, 'the modal is open');
+
+  this.modal.
+    close().
+    on('modalopen', openSpy).
+    on('modalclose', closeSpy).
+    opened(true);
+
+  this.modal.opened(true);
+  this.modal.opened(false);
+  assert.strictEqual(openSpy.callCount, 1, 'modal was opened only once');
+  assert.strictEqual(closeSpy.callCount, 1, 'modal was closed only once');
+});
+
 q.test('normalizeContent_() with arrays and elements', function(assert) {
   var asElement = this.modal.normalizeContent_(Dom.createEl());
   var asInvalid = this.modal.normalizeContent_(null);
@@ -253,6 +277,33 @@ q.test('fill()', function(assert) {
   });
 });
 
+q.test('closeable()', function(assert) {
+  let initialCloseButton = this.modal.getChild('closeButton');
+
+  assert.expect(8);
+  assert.strictEqual(this.modal.closeable(), true, 'the modal is closed');
+
+  this.modal.open().closeable(false);
+  assert.notOk(this.modal.getChild('closeButton'), 'the close button is no longer a child of the modal');
+  assert.notOk(initialCloseButton.el(), 'the initial close button was disposed');
+
+  this.modal.handleKeyPress({which: ESC});
+  assert.ok(this.modal.opened(), 'the modal was not closed by the ESC key');
+
+  this.modal.close();
+  assert.notOk(this.modal.opened(), 'the modal was closed programmatically');
+
+  this.modal.open().closeable(true);
+  assert.ok(this.modal.getChild('closeButton'), 'a new close button was created');
+
+  this.modal.getChild('closeButton').trigger('click');
+  assert.notOk(this.modal.opened(), 'the modal was closed by the new close button');
+
+  this.modal.open().handleKeyPress({which: ESC});
+  assert.notOk(this.modal.opened(), 'the modal was closed by the ESC key');
+});
+
+
 q.test('"content" option (fills on first open() invocation)', function(assert) {
   var modal = new ModalDialog(this.player, {content: Dom.createEl()});
 
@@ -301,3 +352,17 @@ q.test('"slug" option', function(assert) {
     new ModalDialog(player, {slug: 'content'});
   }, 'throws errors on disallowed slugs');
 });
+
+q.test('"uncloseable" option', function(assert) {
+  var modal = new ModalDialog(this.player, {uncloseable: true});
+  var spy = sinon.spy();
+
+  modal.on('modalclose', spy);
+
+  assert.expect(3);
+  assert.strictEqual(modal.closeable(), false, 'the modal is uncloseable');
+  assert.notOk(modal.getChild('closeButton'), 'the close button is not present');
+
+  modal.open().handleKeyPress({which: ESC});
+  assert.strictEqual(spy.callCount, 0, 'ESC did not close the modal');
+});

From d8edb1952ea4296cf3e9cfde73acd60a11e2f156 Mon Sep 17 00:00:00 2001
From: Pat O'Neill <pgoneill@gmail.com>
Date: Mon, 5 Oct 2015 16:54:37 -0400
Subject: [PATCH 11/36] Add fillWith, so fill uses option only

---
 src/js/modal-dialog.js         | 17 ++++++++++++++---
 test/unit/modal-dialog.test.js | 18 +++++++++---------
 2 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/src/js/modal-dialog.js b/src/js/modal-dialog.js
index f0ee1c3020..f188119d70 100644
--- a/src/js/modal-dialog.js
+++ b/src/js/modal-dialog.js
@@ -251,12 +251,23 @@ class ModalDialog extends Component {
   }
 
   /**
-   * Fill the modal's content element with the given content or
-   * falling back on the modal's "content" option.
+   * Fill the modal's content element with the modal's "content" option.
    *
    * The content element will be emptied before this change takes place.
    *
    * @method fill
+   * @return {ModalDialog}
+   */
+  fill() {
+    return this.fillWith(this.options_.content);
+  }
+
+  /**
+   * Fill the modal's content element with the given content.
+   *
+   * The content element will be emptied before this change takes place.
+   *
+   * @method fillWith
    * @param  {Mixed} [content]
    *         Defines the contents of the modal. This must be either
    *         a DOM element, an array of DOM elements, or a function which
@@ -264,7 +275,7 @@ class ModalDialog extends Component {
    *
    * @return {ModalDialog}
    */
-  fill(content=this.options_.content) {
+  fillWith(content) {
     let contentEl = this.contentEl();
     let parentEl = contentEl.parentNode;
     let nextSiblingEl = contentEl.nextSibling;
diff --git a/test/unit/modal-dialog.test.js b/test/unit/modal-dialog.test.js
index 7e7213d6bb..ca5ca6ad76 100644
--- a/test/unit/modal-dialog.test.js
+++ b/test/unit/modal-dialog.test.js
@@ -66,7 +66,7 @@ q.test('should create a close button by default', function(assert) {
 });
 
 q.test('returns `this` for expected methods', function(assert) {
-  var methods = ['open', 'close', 'fill', 'empty'];
+  var methods = ['close', 'empty', 'fill', 'fillWith', 'open'];
 
   assert.expect(methods.length);
   methods.forEach(function(method) {
@@ -254,13 +254,7 @@ q.test('normalizeContent_() callback invocations', function(assert) {
   assert.ok(spyCall.calledWithExactly(this.modal.contentEl()), 'the contentEl is passed to the callback');
 });
 
-q.test('empty()', function(assert) {
-  this.modal.fill([Dom.createEl(), Dom.createEl()]).empty();
-  assert.expect(1);
-  assert.strictEqual(this.modal.contentEl().children.length, 0, 'removed all `contentEl()` children');
-});
-
-q.test('fill()', function(assert) {
+q.test('fillWith()', function(assert) {
   var contentEl = this.modal.contentEl();
   var children = [Dom.createEl(), Dom.createEl(), Dom.createEl()];
 
@@ -268,7 +262,7 @@ q.test('fill()', function(assert) {
     contentEl.appendChild(el);
   });
 
-  this.modal.fill(children);
+  this.modal.fillWith(children);
 
   assert.expect(1 + children.length);
   assert.strictEqual(contentEl.children.length, children.length, 'has the right number of children');
@@ -277,6 +271,12 @@ q.test('fill()', function(assert) {
   });
 });
 
+q.test('empty()', function(assert) {
+  this.modal.fillWith([Dom.createEl(), Dom.createEl()]).empty();
+  assert.expect(1);
+  assert.strictEqual(this.modal.contentEl().children.length, 0, 'removed all `contentEl()` children');
+});
+
 q.test('closeable()', function(assert) {
   let initialCloseButton = this.modal.getChild('closeButton');
 

From bc84666372bccc5adbb09fd2d745bc0980783f30 Mon Sep 17 00:00:00 2001
From: Pat O'Neill <pgoneill@gmail.com>
Date: Mon, 5 Oct 2015 17:15:48 -0400
Subject: [PATCH 12/36] Add `content` method

This method makes it easier to define content at the level of
subclasses, rather than depending on passed-in options or manually
filled modals.
---
 src/js/modal-dialog.js         | 57 +++++++++++++++++++++++++---------
 test/unit/modal-dialog.test.js | 16 ++++++++--
 2 files changed, 57 insertions(+), 16 deletions(-)

diff --git a/src/js/modal-dialog.js b/src/js/modal-dialog.js
index f188119d70..39f02463ea 100644
--- a/src/js/modal-dialog.js
+++ b/src/js/modal-dialog.js
@@ -7,6 +7,7 @@ import tsml from 'tsml';
 import * as Dom from './utils/dom';
 import * as Events from './utils/events';
 import * as Fn from './utils/fn';
+import log from './utils/log';
 
 import Component from './component';
 import CloseButton from './close-button';
@@ -79,6 +80,7 @@ class ModalDialog extends Component {
     this.opened_ = this.hasBeenOpened_ = this.hasBeenFilled_ = false;
 
     this.closeable(!this.options_.uncloseable);
+    this.content(this.options_.content);
 
     // Make sure the contentEl is defined AFTER any children are initialized
     // because we only want the contents of the modal in the contentEl
@@ -151,7 +153,7 @@ class ModalDialog extends Component {
 
       // Fill content if the modal has never opened before and
       // never been filled.
-      if (this.options_.content && !this.hasBeenOpened_ && !this.hasBeenFilled_) {
+      if (this.content() && !this.hasBeenOpened_ && !this.hasBeenFilled_) {
         this.fill();
       }
 
@@ -259,7 +261,7 @@ class ModalDialog extends Component {
    * @return {ModalDialog}
    */
   fill() {
-    return this.fillWith(this.options_.content);
+    return this.fillWith(this.content());
   }
 
   /**
@@ -268,8 +270,8 @@ class ModalDialog extends Component {
    * The content element will be emptied before this change takes place.
    *
    * @method fillWith
-   * @param  {Mixed} [content]
-   *         Defines the contents of the modal. This must be either
+   * @param  {Element|Array|Function} [content]
+   *         The content with which to fill the modal. This must be either
    *         a DOM element, an array of DOM elements, or a function which
    *         returns one of these.
    *
@@ -280,20 +282,25 @@ class ModalDialog extends Component {
     let parentEl = contentEl.parentNode;
     let nextSiblingEl = contentEl.nextSibling;
 
-    this.hasBeenFilled_ = true;
+    content = this.normalizeContent_(content);
 
-    // Detach the content element from the DOM before performing
-    // manipulation to avoid modifying the live DOM multiple times.
-    parentEl.removeChild(contentEl);
-    this.empty();
+    if (content && content.length) {
+      this.hasBeenFilled_ = true;
 
-    this.normalizeContent_(content).forEach(el => contentEl.appendChild(el));
+      // Detach the content element from the DOM before performing
+      // manipulation to avoid modifying the live DOM multiple times.
+      parentEl.removeChild(contentEl);
+      this.empty();
+      content.forEach(el => contentEl.appendChild(el));
 
-    // Re-inject the re-filled content element.
-    if (nextSiblingEl) {
-      parentEl.insertBefore(contentEl, nextSiblingEl);
+      // Re-inject the re-filled content element.
+      if (nextSiblingEl) {
+        parentEl.insertBefore(contentEl, nextSiblingEl);
+      } else {
+        parentEl.appendChild(contentEl);
+      }
     } else {
-      parentEl.appendChild(contentEl);
+      log.warn('no content defined for modal');
     }
 
     return this;
@@ -313,6 +320,28 @@ class ModalDialog extends Component {
     return this;
   }
 
+  /**
+   * Retrieves or sets the modal content; the raw content that fills the modal.
+   *
+   * This does not update the DOM or fill the modal, but it is called during
+   * that process.
+   *
+   * @method content
+   * @param  {Element|Array|Function|Null} [value]
+   *         If given, sets the internal content value to be used on the next
+   *         call to `fill`.
+   *
+   * @return {Element|Array|Function}
+   */
+  content(value) {
+    if (value === null || Dom.isEl(value) || Array.isArray(value) || typeof value === 'function') {
+      this.content_ = value;
+    } else if (typeof content !== 'undefined') {
+      log.warn('invalid content value, expected element, array, function or null');
+    }
+    return this.content_;
+  }
+
   /**
    * Normalizes contents for insertion into a content element.
    *
diff --git a/test/unit/modal-dialog.test.js b/test/unit/modal-dialog.test.js
index ca5ca6ad76..e50d867105 100644
--- a/test/unit/modal-dialog.test.js
+++ b/test/unit/modal-dialog.test.js
@@ -208,6 +208,17 @@ q.test('opened()', function(assert) {
   assert.strictEqual(closeSpy.callCount, 1, 'modal was closed only once');
 });
 
+q.test('content()', function(assert) {
+  assert.expect(4);
+  assert.strictEqual(this.modal.content(), undefined, 'no content by default');
+  this.modal.content(Dom.createEl());
+  assert.ok(Dom.isEl(this.modal.content()), 'content was set');
+  this.modal.content(null);
+  assert.ok(this.modal.content() === null, 'content was nullified');
+  this.modal.content(123);
+  assert.ok(this.modal.content() === null, 'content was NOT changed due to invalid input');
+});
+
 q.test('normalizeContent_() with arrays and elements', function(assert) {
   var asElement = this.modal.normalizeContent_(Dom.createEl());
   var asInvalid = this.modal.normalizeContent_(null);
@@ -310,9 +321,10 @@ q.test('"content" option (fills on first open() invocation)', function(assert) {
   sinon.spy(modal, 'fill');
   modal.open().close().open();
 
-  assert.expect(2);
+  assert.expect(3);
+  assert.strictEqual(modal.content(), modal.options_.content, 'has the expected content');
   assert.strictEqual(modal.fill.callCount, 1, 'auto-fills only once');
-  assert.strictEqual(modal.contentEl().firstChild, modal.options_.content, 'has the expected content');
+  assert.strictEqual(modal.contentEl().firstChild, modal.options_.content, 'has the expected content in the DOM');
 });
 
 q.test('"disposeOnClose" option', function(assert) {

From 06ea1ca70367f6f1f05399291d156ae0f742e14d Mon Sep 17 00:00:00 2001
From: Pat O'Neill <pgoneill@gmail.com>
Date: Mon, 5 Oct 2015 17:26:50 -0400
Subject: [PATCH 13/36] Add 'fillAlways' option

---
 src/js/modal-dialog.js         | 10 ++++++++--
 test/unit/modal-dialog.test.js | 10 ++++++++++
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/js/modal-dialog.js b/src/js/modal-dialog.js
index 39f02463ea..cb37140972 100644
--- a/src/js/modal-dialog.js
+++ b/src/js/modal-dialog.js
@@ -47,6 +47,11 @@ class ModalDialog extends Component {
    *         disposed as soon as it's closed, which is useful for one-off
    *         modals.
    *
+   * @param  {Boolean} [options.fillAlways=false]
+   *         Normally, modals are automatically filled only the first time
+   *         they open. This tells the modal to refresh its content
+   *         every time it opens.
+   *
    * @param  {String} [options.label='']
    *         A text label for the modal, primarily for accessibility.
    *
@@ -153,7 +158,7 @@ class ModalDialog extends Component {
 
       // Fill content if the modal has never opened before and
       // never been filled.
-      if (this.content() && !this.hasBeenOpened_ && !this.hasBeenFilled_) {
+      if (this.options_.fillAlways || !this.hasBeenOpened_ && !this.hasBeenFilled_) {
         this.fill();
       }
 
@@ -321,7 +326,8 @@ class ModalDialog extends Component {
   }
 
   /**
-   * Retrieves or sets the modal content; the raw content that fills the modal.
+   * Gets or sets the raw modal content. This will be normalized prior to
+   * injection into the live DOM.
    *
    * This does not update the DOM or fill the modal, but it is called during
    * that process.
diff --git a/test/unit/modal-dialog.test.js b/test/unit/modal-dialog.test.js
index e50d867105..d8d6ac2bbc 100644
--- a/test/unit/modal-dialog.test.js
+++ b/test/unit/modal-dialog.test.js
@@ -337,6 +337,16 @@ q.test('"disposeOnClose" option', function(assert) {
   assert.strictEqual(modal.dispose.callCount, 1, 'dispose was called');
 });
 
+q.test('"fillAlways" option', function(assert) {
+  var modal = new ModalDialog(this.player, {fillAlways: true});
+
+  sinon.spy(modal, 'fill');
+  modal.open().close().open();
+
+  assert.expect(1);
+  assert.strictEqual(modal.fill.callCount, 2, 'the modal was filled on each open call');
+});
+
 q.test('"label" option', function(assert) {
   var label = 'foo';
   var modal = new ModalDialog(this.player, {label: label});

From be7fb74c056e1a39bcd881bce6b58804f6622a22 Mon Sep 17 00:00:00 2001
From: Pat O'Neill <pgoneill@gmail.com>
Date: Mon, 5 Oct 2015 17:35:17 -0400
Subject: [PATCH 14/36] Reimplement `ErrorDisplay` as a subclass of
 `ModalDialog`

---
 src/js/error-display.js | 60 +++++++++++++++++++++++------------------
 1 file changed, 34 insertions(+), 26 deletions(-)

diff --git a/src/js/error-display.js b/src/js/error-display.js
index 8fcf7206d4..2d218bded6 100644
--- a/src/js/error-display.js
+++ b/src/js/error-display.js
@@ -2,53 +2,61 @@
  * @file error-display.js
  */
 import Component from './component';
-import  * as Dom from './utils/dom.js';
+import ModalDialog from './modal-dialog';
+
+import * as Dom from './utils/dom';
+import mergeOptions from './utils/merge-options';
 
 /**
- * Display that an error has occurred making the video unplayable
+ * Display that an error has occurred making the video unplayable.
  *
- * @param {Object} player  Main Player
- * @param {Object=} options Object of option names and values
- * @extends Component
+ * @extends ModalDialog
  * @class ErrorDisplay
  */
-class ErrorDisplay extends Component {
+class ErrorDisplay extends ModalDialog {
 
+  /**
+   * Constructor for error display modal.
+   *
+   * @param  {Player} player
+   * @param  {Object} [options]
+   */
   constructor(player, options) {
     super(player, options);
-
-    this.update();
-    this.on(player, 'error', this.update);
+    this.on(player, 'error', this.open);
   }
 
   /**
-   * Create the component's DOM element
+   * Build the modal's CSS class.
    *
-   * @return {Element}
-   * @method createEl
+   * @method buildCSSClass
+   * @return {String}
    */
-  createEl() {
-    var el = super.createEl('div', {
-      className: 'vjs-error-display'
-    });
-
-    this.contentEl_ = Dom.createEl('div');
-    el.appendChild(this.contentEl_);
-
-    return el;
+  buildCSSClass() {
+    return `vjs-error-display ${super.buildCSSClass()}`;
   }
 
   /**
-   * Update the error message in localized language
+   * Generates the modal content based on the player error.
    *
-   * @method update
+   * @return {Element|Null}
    */
-  update() {
-    if (this.player().error()) {
-      this.contentEl_.innerHTML = this.localize(this.player().error().message);
+  content() {
+    let error = this.player().error();
+    if (error) {
+      this.content_ = Dom.createEl('span');
+      this.content_.textContent = this.localize(error.message);
+    } else {
+      this.content_ = null;
     }
+    return this.content_;
   }
 }
 
+ErrorDisplay.prototype.options_ = mergeOptions(ModalDialog.prototype.options_, {
+  fillAlways: true,
+  uncloseable: true
+});
+
 Component.registerComponent('ErrorDisplay', ErrorDisplay);
 export default ErrorDisplay;

From 6a4ac48f5211c4a13784decf508cfc44e79ad214 Mon Sep 17 00:00:00 2001
From: Pat O'Neill <pgoneill@gmail.com>
Date: Tue, 6 Oct 2015 14:44:19 -0400
Subject: [PATCH 15/36] Allow strings as modal content

---
 src/js/error-display.js        | 15 ++++-----
 src/js/modal-dialog.js         | 58 ++++++++++++++++++++++------------
 test/unit/modal-dialog.test.js | 53 +++++++++++++++++++++----------
 3 files changed, 81 insertions(+), 45 deletions(-)

diff --git a/src/js/error-display.js b/src/js/error-display.js
index 2d218bded6..1ab93e221d 100644
--- a/src/js/error-display.js
+++ b/src/js/error-display.js
@@ -27,9 +27,12 @@ class ErrorDisplay extends ModalDialog {
   }
 
   /**
-   * Build the modal's CSS class.
+   * Include the old class for backward-compatibility.
+   *
+   * This can be removed in 6.0.
    *
    * @method buildCSSClass
+   * @deprecated
    * @return {String}
    */
   buildCSSClass() {
@@ -39,22 +42,18 @@ class ErrorDisplay extends ModalDialog {
   /**
    * Generates the modal content based on the player error.
    *
-   * @return {Element|Null}
+   * @return {String|Null}
    */
   content() {
     let error = this.player().error();
-    if (error) {
-      this.content_ = Dom.createEl('span');
-      this.content_.textContent = this.localize(error.message);
-    } else {
-      this.content_ = null;
-    }
+    this.content_ = error ? this.localize(error.message) : null;
     return this.content_;
   }
 }
 
 ErrorDisplay.prototype.options_ = mergeOptions(ModalDialog.prototype.options_, {
   fillAlways: true,
+  slug: 'error-display',
   uncloseable: true
 });
 
diff --git a/src/js/modal-dialog.js b/src/js/modal-dialog.js
index cb37140972..0bb3490c24 100644
--- a/src/js/modal-dialog.js
+++ b/src/js/modal-dialog.js
@@ -270,15 +270,15 @@ class ModalDialog extends Component {
   }
 
   /**
-   * Fill the modal's content element with the given content.
+   * Fill the modal's content element with arbitrary content.
    *
    * The content element will be emptied before this change takes place.
    *
    * @method fillWith
-   * @param  {Element|Array|Function} [content]
+   * @param  {String|Function|Element|Array} [content]
    *         The content with which to fill the modal. This must be either
-   *         a DOM element, an array of DOM elements, or a function which
-   *         returns one of these.
+   *         a DOM element, an array of DOM elements, a string, or a
+   *         function which returns one of these.
    *
    * @return {ModalDialog}
    */
@@ -296,7 +296,14 @@ class ModalDialog extends Component {
       // manipulation to avoid modifying the live DOM multiple times.
       parentEl.removeChild(contentEl);
       this.empty();
-      content.forEach(el => contentEl.appendChild(el));
+
+      // Strings are written into the DOM directly, arrays should by filtered
+      // down to DOM elements only and appended in order.
+      if (typeof content === 'string') {
+        contentEl.innerHTML = content;
+      } else {
+        content.forEach(el => contentEl.appendChild(el));
+      }
 
       // Re-inject the re-filled content element.
       if (nextSiblingEl) {
@@ -326,24 +333,29 @@ class ModalDialog extends Component {
   }
 
   /**
-   * Gets or sets the raw modal content. This will be normalized prior to
-   * injection into the live DOM.
+   * Gets or sets the modal content, which gets normalized before being
+   * rendered into the DOM.
    *
    * This does not update the DOM or fill the modal, but it is called during
    * that process.
    *
    * @method content
-   * @param  {Element|Array|Function|Null} [value]
+   * @param  {String|Function|Element|Array|Null} [value]
    *         If given, sets the internal content value to be used on the next
-   *         call to `fill`.
+   *         call to `fill`. This value is passed through normalizeContent_
+   *         before being rendered into the DOM.
    *
-   * @return {Element|Array|Function}
+   * @return {String|Function|Element|Array|Null}
    */
   content(value) {
-    if (value === null || Dom.isEl(value) || Array.isArray(value) || typeof value === 'function') {
+    if (
+      value === null ||
+      typeof value === 'string' ||
+      typeof value === 'function' ||
+      Array.isArray(value) ||
+      Dom.isEl(value)
+    ) {
       this.content_ = value;
-    } else if (typeof content !== 'undefined') {
-      log.warn('invalid content value, expected element, array, function or null');
     }
     return this.content_;
   }
@@ -351,23 +363,29 @@ class ModalDialog extends Component {
   /**
    * Normalizes contents for insertion into a content element.
    *
-   * Always returns an array of DOM elements.
-   *
    * @method normalizeContent_
    * @private
-   * @param  {Array|Element|Function} content
-   * @return {Array}
+   * @param  {String|Function|Element|Array} content
+   * @return {Array|String|Null}
+   *         An array of one or more DOM element(s). A non-empty string. Null.
    */
   normalizeContent_(content) {
+
+    // Short-cut out if it's clearly invalid.
+    if (!content) {
+      return null;
+    }
+
     if (typeof content === 'function') {
       content = content.call(this, this.contentEl());
     }
 
-    if (!Array.isArray(content)) {
-      content = [content];
+    if (typeof content === 'string' && /\S/.test(content)) {
+      return content;
     }
 
-    return content.filter(Dom.isEl);
+    content = (Array.isArray(content) ? content : [content]).filter(Dom.isEl);
+    return content.length ? content : null;
   }
 }
 
diff --git a/test/unit/modal-dialog.test.js b/test/unit/modal-dialog.test.js
index d8d6ac2bbc..12af6c10c6 100644
--- a/test/unit/modal-dialog.test.js
+++ b/test/unit/modal-dialog.test.js
@@ -209,47 +209,66 @@ q.test('opened()', function(assert) {
 });
 
 q.test('content()', function(assert) {
+  var content;
+
   assert.expect(4);
-  assert.strictEqual(this.modal.content(), undefined, 'no content by default');
-  this.modal.content(Dom.createEl());
-  assert.ok(Dom.isEl(this.modal.content()), 'content was set');
-  this.modal.content(null);
-  assert.ok(this.modal.content() === null, 'content was nullified');
-  this.modal.content(123);
-  assert.ok(this.modal.content() === null, 'content was NOT changed due to invalid input');
+  assert.strictEqual(typeof this.modal.content(), 'undefined', 'no content by default');
+
+  content = this.modal.content(Dom.createEl());
+  assert.ok(Dom.isEl(content), 'content was set from a single DOM element');
+
+  assert.strictEqual(this.modal.content(123), content, 'content was NOT changed by invalid input');
+  assert.strictEqual(this.modal.content(null), null, 'content was nullified');
 });
 
-q.test('normalizeContent_() with arrays and elements', function(assert) {
+q.test('normalizeContent_() arrays, elements, and non-empty strings', function(assert) {
   var asElement = this.modal.normalizeContent_(Dom.createEl());
-  var asInvalid = this.modal.normalizeContent_(null);
+
+  var asString = this.modal.normalizeContent_('hello');
 
   var asArray = this.modal.normalizeContent_([
     Dom.createEl(), {}, Dom.createEl('span'), []
   ]);
 
-  assert.expect(3);
+  var asInvalid = this.modal.normalizeContent_(true);
+
+  var asEmptyString = this.modal.normalizeContent_('  ');
+
+  assert.expect(5);
   assert.strictEqual(asElement.length, 1, 'single elements are accepted');
-  assert.strictEqual(asInvalid.length, 0, 'single invalid values are rejected');
+  assert.strictEqual(asString.length, 5, 'non-empty strings are accepted');
   assert.strictEqual(asArray.length, 2, 'invalid values filtered out of array');
+  assert.strictEqual(asInvalid, null, 'single invalid values are rejected');
+  assert.strictEqual(asEmptyString, null, 'empty strings are rejected');
 });
 
-q.test('normalizeContent_() with callbacks', function(assert) {
+q.test('normalizeContent_() callbacks', function(assert) {
   var asElementFn = this.modal.normalizeContent_(function() {
     return Dom.createEl();
   });
 
-  var asInvalidFn = this.modal.normalizeContent_(function() {
-    return 'hello world';
+  var asStringFn = this.modal.normalizeContent_(function() {
+    return 'hello';
   });
 
   var asArrayFn = this.modal.normalizeContent_(function() {
-    return [null, 123, Dom.createEl()];
+    return [null, '123', Dom.createEl()];
   });
 
-  assert.expect(3);
+  var asInvalidFn = this.modal.normalizeContent_(function() {
+    return 123;
+  });
+
+  var asEmptyStringFn = this.modal.normalizeContent_(function() {
+    return '\t\r\n';
+  });
+
+  assert.expect(5);
   assert.strictEqual(asElementFn.length, 1, 'single elements are accepted when returned by a function');
-  assert.strictEqual(asInvalidFn.length, 0, 'single invalid values are rejected when returned by a function');
+  assert.strictEqual(asStringFn.length, 5, 'non-empty strings are passed through directly');
   assert.strictEqual(asArrayFn.length, 1, 'invalid values filtered out of array when returned by a function');
+  assert.strictEqual(asInvalidFn, null, 'single invalid values are rejected when returned by a function');
+  assert.strictEqual(asEmptyStringFn, null, 'empty strings are rejected when returned by a function');
 });
 
 q.test('normalizeContent_() callback invocations', function(assert) {

From 855d59038401f85f610a2390b46ca34fecbf7ec5 Mon Sep 17 00:00:00 2001
From: Pat O'Neill <pgoneill@gmail.com>
Date: Tue, 6 Oct 2015 14:46:42 -0400
Subject: [PATCH 16/36] tsml no longer needed

---
 src/js/modal-dialog.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/js/modal-dialog.js b/src/js/modal-dialog.js
index 0bb3490c24..b39b0c7a9b 100644
--- a/src/js/modal-dialog.js
+++ b/src/js/modal-dialog.js
@@ -2,7 +2,6 @@
  * @file modal-dialog.js
  */
 import document from 'global/document';
-import tsml from 'tsml';
 
 import * as Dom from './utils/dom';
 import * as Events from './utils/events';

From 7fb016606dfc91cf13e26162cca0ead5b3e868d7 Mon Sep 17 00:00:00 2001
From: Pat O'Neill <pgoneill@gmail.com>
Date: Tue, 6 Oct 2015 16:44:59 -0400
Subject: [PATCH 17/36] Maybe fix PAM/IE8

---
 test/unit/close-button.test.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/unit/close-button.test.js b/test/unit/close-button.test.js
index 48f74cf360..c8201828f9 100644
--- a/test/unit/close-button.test.js
+++ b/test/unit/close-button.test.js
@@ -19,7 +19,7 @@ q.test('should create the expected element', function(assert) {
 
   assert.expect(2 + classes.length);
   assert.strictEqual(this.btn.el().tagName.toLowerCase(), 'button', 'is a <button>');
-  assert.strictEqual(this.btn.el().textContent, 'Close');
+  assert.strictEqual(this.btn.el().querySelector('.vjs-control-text').innerHTML, 'Close');
 
   classes.forEach(function(s) {
     var c = 'vjs-' + s;

From a556447bc38f934aa5ef90dcb9d963bb6d0cf863 Mon Sep 17 00:00:00 2001
From: Pat O'Neill <pgoneill@gmail.com>
Date: Wed, 7 Oct 2015 13:15:40 -0400
Subject: [PATCH 18/36] Add modalfill event

---
 src/js/modal-dialog.js         | 2 ++
 test/unit/modal-dialog.test.js | 8 +++++++-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/js/modal-dialog.js b/src/js/modal-dialog.js
index b39b0c7a9b..0bf63f17ac 100644
--- a/src/js/modal-dialog.js
+++ b/src/js/modal-dialog.js
@@ -304,6 +304,8 @@ class ModalDialog extends Component {
         content.forEach(el => contentEl.appendChild(el));
       }
 
+      this.trigger('modalfill');
+
       // Re-inject the re-filled content element.
       if (nextSiblingEl) {
         parentEl.insertBefore(contentEl, nextSiblingEl);
diff --git a/test/unit/modal-dialog.test.js b/test/unit/modal-dialog.test.js
index 12af6c10c6..21fd83e3a1 100644
--- a/test/unit/modal-dialog.test.js
+++ b/test/unit/modal-dialog.test.js
@@ -287,18 +287,24 @@ q.test('normalizeContent_() callback invocations', function(assert) {
 q.test('fillWith()', function(assert) {
   var contentEl = this.modal.contentEl();
   var children = [Dom.createEl(), Dom.createEl(), Dom.createEl()];
+  var spy = sinon.spy();
 
   [Dom.createEl(), Dom.createEl()].forEach(function(el) {
     contentEl.appendChild(el);
   });
 
+  this.modal.on('modalfill', spy);
   this.modal.fillWith(children);
 
-  assert.expect(1 + children.length);
+  assert.expect(3 + children.length);
   assert.strictEqual(contentEl.children.length, children.length, 'has the right number of children');
+
   children.forEach(function(el) {
     assert.strictEqual(el.parentNode, contentEl, 'new child appended');
   });
+
+  assert.strictEqual(spy.callCount, 1, 'the test callback was called');
+  assert.strictEqual(spy.getCall(0).thisValue, this.modal, 'the value of "this" in the callback is the modal');
 });
 
 q.test('empty()', function(assert) {

From 1bf9d4c598728968b0e76bfccd43acff8cb140ce Mon Sep 17 00:00:00 2001
From: Pat O'Neill <pgoneill@gmail.com>
Date: Wed, 7 Oct 2015 13:22:06 -0400
Subject: [PATCH 19/36] Further flesh out fill/empty events

---
 src/js/modal-dialog.js         |  3 +++
 test/unit/modal-dialog.test.js | 33 +++++++++++++++++++++++++--------
 2 files changed, 28 insertions(+), 8 deletions(-)

diff --git a/src/js/modal-dialog.js b/src/js/modal-dialog.js
index 0bf63f17ac..870d931a24 100644
--- a/src/js/modal-dialog.js
+++ b/src/js/modal-dialog.js
@@ -289,6 +289,7 @@ class ModalDialog extends Component {
     content = this.normalizeContent_(content);
 
     if (content && content.length) {
+      this.trigger('beforemodalfill');
       this.hasBeenFilled_ = true;
 
       // Detach the content element from the DOM before performing
@@ -329,7 +330,9 @@ class ModalDialog extends Component {
    */
   empty() {
     let contentEl = this.contentEl();
+    this.trigger('beforemodalempty');
     [].slice.call(contentEl.children).forEach(el => contentEl.removeChild(el));
+    this.trigger('modalempty');
     return this;
   }
 
diff --git a/test/unit/modal-dialog.test.js b/test/unit/modal-dialog.test.js
index 21fd83e3a1..25578baeed 100644
--- a/test/unit/modal-dialog.test.js
+++ b/test/unit/modal-dialog.test.js
@@ -287,30 +287,47 @@ q.test('normalizeContent_() callback invocations', function(assert) {
 q.test('fillWith()', function(assert) {
   var contentEl = this.modal.contentEl();
   var children = [Dom.createEl(), Dom.createEl(), Dom.createEl()];
-  var spy = sinon.spy();
+  var beforeFillSpy = sinon.spy();
+  var fillSpy = sinon.spy();
 
   [Dom.createEl(), Dom.createEl()].forEach(function(el) {
     contentEl.appendChild(el);
   });
 
-  this.modal.on('modalfill', spy);
-  this.modal.fillWith(children);
+  this.modal.
+    on('beforemodalfill', beforeFillSpy).
+    on('modalfill', fillSpy).
+    fillWith(children);
 
-  assert.expect(3 + children.length);
+  assert.expect(5 + children.length);
   assert.strictEqual(contentEl.children.length, children.length, 'has the right number of children');
 
   children.forEach(function(el) {
     assert.strictEqual(el.parentNode, contentEl, 'new child appended');
   });
 
-  assert.strictEqual(spy.callCount, 1, 'the test callback was called');
-  assert.strictEqual(spy.getCall(0).thisValue, this.modal, 'the value of "this" in the callback is the modal');
+  assert.strictEqual(beforeFillSpy.callCount, 1, 'the "beforemodalfill" callback was called');
+  assert.strictEqual(beforeFillSpy.getCall(0).thisValue, this.modal, 'the value of "this" is the modal');
+  assert.strictEqual(fillSpy.callCount, 1, 'the "modalfill" callback was called');
+  assert.strictEqual(fillSpy.getCall(0).thisValue, this.modal, 'the value of "this" is the modal');
 });
 
 q.test('empty()', function(assert) {
-  this.modal.fillWith([Dom.createEl(), Dom.createEl()]).empty();
-  assert.expect(1);
+  var beforeEmptySpy = sinon.spy();
+  var emptySpy = sinon.spy();
+
+  this.modal.
+    fillWith([Dom.createEl(), Dom.createEl()]).
+    on('beforemodalempty', beforeEmptySpy).
+    on('modalempty', emptySpy).
+    empty();
+
+  assert.expect(5);
   assert.strictEqual(this.modal.contentEl().children.length, 0, 'removed all `contentEl()` children');
+  assert.strictEqual(beforeEmptySpy.callCount, 1, 'the "beforemodalempty" callback was called');
+  assert.strictEqual(beforeEmptySpy.getCall(0).thisValue, this.modal, 'the value of "this" is the modal');
+  assert.strictEqual(emptySpy.callCount, 1, 'the "modalempty" callback was called');
+  assert.strictEqual(emptySpy.getCall(0).thisValue, this.modal, 'the value of "this" is the modal');
 });
 
 q.test('closeable()', function(assert) {

From 467affde159a05f9914e97e62b3c34c3df44a97d Mon Sep 17 00:00:00 2001
From: Pat O'Neill <pgoneill@gmail.com>
Date: Thu, 8 Oct 2015 17:57:59 -0400
Subject: [PATCH 20/36] Removals after feedback/discussion w/ @heff

---
 src/js/error-display.js        |  4 +--
 src/js/modal-dialog.js         | 60 ++++++++--------------------------
 src/js/video.js                |  3 --
 test/unit/modal-dialog.test.js | 58 ++++++++++++++------------------
 4 files changed, 40 insertions(+), 85 deletions(-)

diff --git a/src/js/error-display.js b/src/js/error-display.js
index 1ab93e221d..f97f1a4134 100644
--- a/src/js/error-display.js
+++ b/src/js/error-display.js
@@ -46,14 +46,12 @@ class ErrorDisplay extends ModalDialog {
    */
   content() {
     let error = this.player().error();
-    this.content_ = error ? this.localize(error.message) : null;
-    return this.content_;
+    return error ? this.localize(error.message) : '';
   }
 }
 
 ErrorDisplay.prototype.options_ = mergeOptions(ModalDialog.prototype.options_, {
   fillAlways: true,
-  slug: 'error-display',
   uncloseable: true
 });
 
diff --git a/src/js/modal-dialog.js b/src/js/modal-dialog.js
index 870d931a24..ff8c6bce78 100644
--- a/src/js/modal-dialog.js
+++ b/src/js/modal-dialog.js
@@ -11,14 +11,7 @@ import log from './utils/log';
 import Component from './component';
 import CloseButton from './close-button';
 
-const CLASS_NAME_PREFIX = 'vjs-modal-dialog';
-
-// An array of strings which are used for modal sub-element classes,
-// so will cause CSS issues if used as a slug.
-const DISALLOWED_SLUGS = [
-  'content'
-];
-
+const MODAL_CLASS_NAME = 'vjs-modal-dialog';
 const ESC = 27;
 
 /**
@@ -41,10 +34,9 @@ class ModalDialog extends Component {
    * @param  {Mixed} [options.content=undefined]
    *         Provide customized content for this modal.
    *
-   * @param  {Boolean} [options.disposeOnClose=false]
-   *         If `true`, the modal can only be opened once. It will be
-   *         disposed as soon as it's closed, which is useful for one-off
-   *         modals.
+   * @param  {Boolean} [options.temporary=true]
+   *         If `true`, the modal can only be opened once; it will be
+   *         disposed as soon as it's closed.
    *
    * @param  {Boolean} [options.fillAlways=false]
    *         Normally, modals are automatically filled only the first time
@@ -54,21 +46,6 @@ class ModalDialog extends Component {
    * @param  {String} [options.label='']
    *         A text label for the modal, primarily for accessibility.
    *
-   * @param  {Boolean} [options.openImmediately=false]
-   *         If `true`, the modal will be displayed immediately upon
-   *         instantiation.
-   *
-   * @param  {Boolean} [options.fillImmediately=false]
-   *         If `true`, the modal will be filled immediately upon
-   *         instantiation - rather than manually or the first time it
-   *         opens.
-   *
-   * @param  {String} [options.slug='none']
-   *         This is a string that will be prefixed with "vjs-modal-dialog-"
-   *         to construct a CSS class specific to this modal. For
-   *         example, if this option were "foo," the modal could be
-   *         identified with the class "vjs-modal-dialog-foo".
-   *
    * @param  {Boolean} [options.uncloseable=false]
    *         If `true`, the user will not be able to close the modal
    *         through the UI in the normal ways. Programmatic closing is
@@ -76,10 +53,6 @@ class ModalDialog extends Component {
    *
    */
   constructor(player, options) {
-    if (options && DISALLOWED_SLUGS.indexOf(options.slug) > -1) {
-      throw new Error(`${options.slug} is not allowed as a slug`);
-    }
-
     super(player, options);
     this.opened_ = this.hasBeenOpened_ = this.hasBeenFilled_ = false;
 
@@ -90,17 +63,9 @@ class ModalDialog extends Component {
     // because we only want the contents of the modal in the contentEl
     // (not the UI elements like the close button).
     this.contentEl_ = Dom.createEl('div', {
-      className: `${CLASS_NAME_PREFIX}-content`
+      className: `${MODAL_CLASS_NAME}-content`
     });
     this.el_.appendChild(this.contentEl_);
-
-    if (this.options_.fillImmediately) {
-      this.fill();
-    }
-
-    if (this.options_.openImmediately) {
-      this.open();
-    }
   }
 
   /**
@@ -126,7 +91,7 @@ class ModalDialog extends Component {
    * @return {String}
    */
   buildCSSClass() {
-    return `${CLASS_NAME_PREFIX} vjs-hidden ${CLASS_NAME_PREFIX}-${this.options_.slug} ${super.buildCSSClass()}`;
+    return `${MODAL_CLASS_NAME} vjs-hidden ${super.buildCSSClass()}`;
   }
 
   /**
@@ -224,7 +189,7 @@ class ModalDialog extends Component {
       this.hide();
       this.trigger('modalclose');
 
-      if (this.options_.disposeOnClose) {
+      if (this.options_.temporary) {
         this.dispose();
       }
     }
@@ -245,9 +210,12 @@ class ModalDialog extends Component {
       let closeable = this.closeable_ = !!value;
       let close = this.getChild('closeButton');
 
-      if (closeable && !close) {
-        this.on(this.addChild('closeButton'), 'close', this.close);
-      } else if (!closeable && close) {
+      if (closeable) {
+        if (!close) {
+          close = this.addChild('closeButton');
+        }
+        this.on(close, 'close', this.close);
+      } else if (close) {
         this.off(close, 'close', this.close);
         this.removeChild(close);
         close.dispose();
@@ -401,7 +369,7 @@ class ModalDialog extends Component {
  */
 ModalDialog.prototype.options_ = {
   children: ['closeButton'],
-  slug: 'none'
+  temporary: true
 };
 
 Component.registerComponent('ModalDialog', ModalDialog);
diff --git a/src/js/video.js b/src/js/video.js
index 54acfb99ac..2310dfc79c 100644
--- a/src/js/video.js
+++ b/src/js/video.js
@@ -29,9 +29,6 @@ import xhr from 'xhr';
 import Html5 from './tech/html5.js';
 import Flash from './tech/flash.js';
 
-import CloseButton from './close-button';
-import ModalDialog from './modal-dialog';
-
 // HTML5 Element Shim for IE8
 if (typeof HTMLVideoElement === 'undefined') {
   document.createElement('video');
diff --git a/test/unit/modal-dialog.test.js b/test/unit/modal-dialog.test.js
index 25578baeed..fe4d9f41bd 100644
--- a/test/unit/modal-dialog.test.js
+++ b/test/unit/modal-dialog.test.js
@@ -10,7 +10,7 @@ q.module('ModalDialog', {
 
   beforeEach: function() {
     this.player = TestHelpers.makePlayer();
-    this.modal = new ModalDialog(this.player);
+    this.modal = new ModalDialog(this.player, {temporary: false});
     this.el = this.modal.el();
   },
 
@@ -23,8 +23,7 @@ q.module('ModalDialog', {
 q.test('should create the expected element', function(assert) {
   var classes = [
     'modal-dialog',
-    'hidden',
-    'modal-dialog-none'
+    'hidden'
   ];
 
   assert.expect(4 + classes.length);
@@ -356,9 +355,11 @@ q.test('closeable()', function(assert) {
   assert.notOk(this.modal.opened(), 'the modal was closed by the ESC key');
 });
 
-
 q.test('"content" option (fills on first open() invocation)', function(assert) {
-  var modal = new ModalDialog(this.player, {content: Dom.createEl()});
+  var modal = new ModalDialog(this.player, {
+    content: Dom.createEl(),
+    temporary: false
+  });
 
   sinon.spy(modal, 'fill');
   modal.open().close().open();
@@ -369,18 +370,25 @@ q.test('"content" option (fills on first open() invocation)', function(assert) {
   assert.strictEqual(modal.contentEl().firstChild, modal.options_.content, 'has the expected content in the DOM');
 });
 
-q.test('"disposeOnClose" option', function(assert) {
-  var modal = new ModalDialog(this.player, {disposeOnClose: true});
+q.test('"temporary" option', function(assert) {
+  var temp = new ModalDialog(this.player, {temporary: true});
+  var perm = new ModalDialog(this.player, {temporary: false});
 
-  sinon.spy(modal, 'dispose');
-  modal.open().close();
+  sinon.spy(temp, 'dispose');
+  sinon.spy(perm, 'dispose');
+  temp.open().close();
+  perm.open().close();
 
-  assert.expect(1);
-  assert.strictEqual(modal.dispose.callCount, 1, 'dispose was called');
+  assert.expect(2);
+  assert.strictEqual(temp.dispose.callCount, 1, 'temporary modals are disposed');
+  assert.strictEqual(perm.dispose.callCount, 0, 'permanent modals are not disposed');
 });
 
 q.test('"fillAlways" option', function(assert) {
-  var modal = new ModalDialog(this.player, {fillAlways: true});
+  var modal = new ModalDialog(this.player, {
+    fillAlways: true,
+    temporary: false
+  });
 
   sinon.spy(modal, 'fill');
   modal.open().close().open();
@@ -397,28 +405,12 @@ q.test('"label" option', function(assert) {
   assert.strictEqual(modal.el().getAttribute('aria-label'), label, 'uses the label as the aria-label');
 });
 
-q.test('"openImmediately" option', function(assert) {
-  var modal = new ModalDialog(this.player, {openImmediately: true});
-
-  assert.expect(1);
-  assert.ok(modal.opened(), 'the modal is opened immediately');
-});
-
-q.test('"slug" option', function(assert) {
-  var player = this.player;
-  var slug = 'foo';
-  var modal = new ModalDialog(player, {slug: slug});
-
-  assert.expect(2);
-  assert.ok(modal.hasClass('vjs-modal-dialog-' + slug), 'adds the slug-based class');
-
-  assert.throws(function() {
-    new ModalDialog(player, {slug: 'content'});
-  }, 'throws errors on disallowed slugs');
-});
-
 q.test('"uncloseable" option', function(assert) {
-  var modal = new ModalDialog(this.player, {uncloseable: true});
+  var modal = new ModalDialog(this.player, {
+    temporary: false,
+    uncloseable: true
+  });
+
   var spy = sinon.spy();
 
   modal.on('modalclose', spy);

From 5e652b44167872e5eb9431d6a120f7e27c9fc7fe Mon Sep 17 00:00:00 2001
From: Pat O'Neill <pgoneill@gmail.com>
Date: Thu, 8 Oct 2015 20:22:24 -0400
Subject: [PATCH 21/36] Remove CSS nesting and rename overlay-space.

---
 src/css/_utilities.scss               |  4 +-
 src/css/components/_modal-dialog.scss | 55 +++++++++++++--------------
 2 files changed, 29 insertions(+), 30 deletions(-)

diff --git a/src/css/_utilities.scss b/src/css/_utilities.scss
index 5b3cca4c28..f5beea5bba 100644
--- a/src/css/_utilities.scss
+++ b/src/css/_utilities.scss
@@ -96,7 +96,7 @@
   order: $value;
 }
 
-%overlay-space {
+%fill-parent {
   position: absolute;
   top: 0;
   left: 0;
@@ -105,6 +105,6 @@
 }
 
 %icon-default {
-  @extend %overlay-space;
+  @extend %fill-parent;
   text-align: center;
 }
diff --git a/src/css/components/_modal-dialog.scss b/src/css/components/_modal-dialog.scss
index d5f7efc76e..6cd8c3d6ef 100644
--- a/src/css/components/_modal-dialog.scss
+++ b/src/css/components/_modal-dialog.scss
@@ -1,34 +1,33 @@
 .video-js .vjs-modal-dialog {
-  @extend %overlay-space;
+  @extend %fill-parent;
   @include linear-gradient(180deg, rgba(0, 0, 0, 0.8), rgba(255, 255, 255, 0));
+}
 
-  .vjs-modal-dialog-content {
-    @extend %overlay-space;
-    z-index: 1;
-  }
-
-  // Ultimately, this would be moved to its own component partial, but
-  // for now it's unclear what styles would be generic and which specific
-  // to this context!
-  .vjs-close {
-    cursor: pointer;
-    font-size: 1.2em; // 12px
-    height: auto;
-    padding: 0.75em 1em; // 9px 12px
-    position: absolute;
-    right: 0;
-    top: 0;
-    width: auto;
-    z-index: 2;
+.vjs-modal-dialog .vjs-modal-dialog-content {
+  @extend %fill-parent;
+  z-index: 1;
+}
 
-    .vjs-control-text {
+// Ultimately, this would be moved to its own component partial, but
+// for now it's unclear what styles would be generic and which specific
+// to this context!
+.vjs-modal-dialog .vjs-close {
+  cursor: pointer;
+  font-size: 1.2em; // 12px
+  height: auto;
+  padding: 0.75em 1em; // 9px 12px
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: auto;
+  z-index: 2;
+}
 
-      // Reset inherited control-text styles.
-      clip: auto;
-      height: auto;
-      margin: 0;
-      position: static;
-      width: auto;
-    }
-  }
+// Reset inherited control-text styles.
+.vjs-modal-dialog .vjs-close .vjs-control-text {
+  clip: auto;
+  height: auto;
+  margin: 0;
+  position: static;
+  width: auto;
 }

From b372694151f40f0e2ff9ff264f84a60bb8fde62b Mon Sep 17 00:00:00 2001
From: Pat O'Neill <pgoneill@gmail.com>
Date: Thu, 8 Oct 2015 20:22:42 -0400
Subject: [PATCH 22/36] Add createModal method to Player

---
 src/js/modal-dialog.js   |  8 ++++----
 src/js/player.js         | 33 +++++++++++++++++++++++++++++++++
 test/unit/player.test.js | 26 ++++++++++++++++++++++++++
 3 files changed, 63 insertions(+), 4 deletions(-)

diff --git a/src/js/modal-dialog.js b/src/js/modal-dialog.js
index ff8c6bce78..dd395e656f 100644
--- a/src/js/modal-dialog.js
+++ b/src/js/modal-dialog.js
@@ -34,10 +34,6 @@ class ModalDialog extends Component {
    * @param  {Mixed} [options.content=undefined]
    *         Provide customized content for this modal.
    *
-   * @param  {Boolean} [options.temporary=true]
-   *         If `true`, the modal can only be opened once; it will be
-   *         disposed as soon as it's closed.
-   *
    * @param  {Boolean} [options.fillAlways=false]
    *         Normally, modals are automatically filled only the first time
    *         they open. This tells the modal to refresh its content
@@ -46,6 +42,10 @@ class ModalDialog extends Component {
    * @param  {String} [options.label='']
    *         A text label for the modal, primarily for accessibility.
    *
+   * @param  {Boolean} [options.temporary=true]
+   *         If `true`, the modal can only be opened once; it will be
+   *         disposed as soon as it's closed.
+   *
    * @param  {Boolean} [options.uncloseable=false]
    *         If `true`, the user will not be able to close the modal
    *         through the UI in the normal ways. Programmatic closing is
diff --git a/src/js/player.js b/src/js/player.js
index 4796eb71c5..92c8853b3a 100644
--- a/src/js/player.js
+++ b/src/js/player.js
@@ -32,6 +32,7 @@ import BigPlayButton from './big-play-button.js';
 import ControlBar from './control-bar/control-bar.js';
 import ErrorDisplay from './error-display.js';
 import TextTrackSettings from './tracks/text-track-settings.js';
+import ModalDialog from './modal-dialog';
 
 // Require html5 tech, at least for disposing the original video tag
 import Html5 from './tech/html5.js';
@@ -2513,6 +2514,38 @@ class Player extends Component {
     return options;
   }
 
+  /**
+   * Creates a simple modal dialog (an instance of the `ModalDialog`
+   * component) that immediately overlays the player with arbitrary
+   * content and removes itself when closed.
+   *
+   * @param {String|Function|Element|Array|Null} content
+   *        Same as `ModalDialog#content`'s param of the same name.
+   *
+   *        The most straight-forward usage is to provide a string or DOM
+   *        element.
+   *
+   * @param {Object} [options]
+   *        Extra options which will be passed on to the `ModalDialog`.
+   *
+   * @return {ModalDialog}
+   */
+  createModal(content, options) {
+    let player = this;
+
+    options = options || {};
+    options.content = content || '';
+
+    let modal = new ModalDialog(player, options);
+
+    player.addChild(modal);
+    modal.on('dispose', function() {
+      player.removeChild(modal);
+    });
+
+    return modal.open();
+  }
+
   /**
    * Gets tag settings
    *
diff --git a/test/unit/player.test.js b/test/unit/player.test.js
index 2789e2608c..377074178f 100644
--- a/test/unit/player.test.js
+++ b/test/unit/player.test.js
@@ -833,3 +833,29 @@ test('should return correct values for canPlayType', function(){
 
   player.dispose();
 });
+
+test('createModal()', function() {
+  var player = TestHelpers.makePlayer();
+  var modal = player.createModal('foo');
+  var spy = sinon.spy();
+
+  modal.on('dispose', spy);
+
+  expect(5);
+  strictEqual(modal.el().parentNode, player.el(), 'the modal is injected into the player');
+  strictEqual(modal.content(), 'foo', 'content is set properly');
+  ok(modal.opened(), 'modal is opened by default');
+  modal.close();
+  ok(spy.called, 'modal was disposed when closed');
+  strictEqual(player.children().indexOf(modal), -1, 'modal was removed from player\'s children');
+});
+
+test('createModal() options object', function() {
+  var player = TestHelpers.makePlayer();
+  var modal = player.createModal('foo', {content: 'bar', label: 'boo'});
+
+  expect(2);
+  strictEqual(modal.content(), 'foo', 'content argument takes precedence');
+  strictEqual(modal.options_.label, 'boo', 'modal options are set properly');
+  modal.close();
+});

From 370e2bc4e09af088032d690c764ceae4b655e357 Mon Sep 17 00:00:00 2001
From: Pat O'Neill <pgoneill@gmail.com>
Date: Fri, 9 Oct 2015 15:19:42 -0400
Subject: [PATCH 23/36] Fixes to make tests work in IE8

---
 src/js/modal-dialog.js         |  5 +++-
 test/index.html                |  2 +-
 test/unit/modal-dialog.test.js | 47 +++++++++++++++++++++++-----------
 3 files changed, 37 insertions(+), 17 deletions(-)

diff --git a/src/js/modal-dialog.js b/src/js/modal-dialog.js
index dd395e656f..95c356fb29 100644
--- a/src/js/modal-dialog.js
+++ b/src/js/modal-dialog.js
@@ -298,8 +298,11 @@ class ModalDialog extends Component {
    */
   empty() {
     let contentEl = this.contentEl();
+    let count = contentEl.children.length;
     this.trigger('beforemodalempty');
-    [].slice.call(contentEl.children).forEach(el => contentEl.removeChild(el));
+    while (count--) {
+      contentEl.removeChild(contentEl.children[0]);
+    }
     this.trigger('modalempty');
     return this;
   }
diff --git a/test/index.html b/test/index.html
index f9659ab51e..08944509ed 100644
--- a/test/index.html
+++ b/test/index.html
@@ -10,7 +10,7 @@
   <div id="qunit"></div>
   <script src="../node_modules/qunitjs/qunit/qunit.js"></script>
 
-  <script src="../build/temp/ie8/videojs-ie8.min.js"></script>
+  <script src="../build/temp/ie8/videojs-ie8.js"></script>
 
   <!-- Execute the bundled tests first -->
   <script src="../build/temp/tests.js"></script>
diff --git a/test/unit/modal-dialog.test.js b/test/unit/modal-dialog.test.js
index fe4d9f41bd..5f92f72dc3 100644
--- a/test/unit/modal-dialog.test.js
+++ b/test/unit/modal-dialog.test.js
@@ -17,6 +17,7 @@ q.module('ModalDialog', {
   afterEach: function() {
     this.player.dispose();
     this.modal.dispose();
+    this.el = null;
   }
 });
 
@@ -149,31 +150,40 @@ q.test('pressing ESC triggers close(), but only when the modal is opened', funct
   assert.strictEqual(spy.callCount, 1, 'ESC closed the now-opened modal');
 });
 
-q.test('close() cannot be called on an closed modal', function(assert) {
+q.test('close() cannot be called on a closed modal', function(assert) {
   var spy = sinon.spy();
 
-  this.modal.on('modalclose', spy).open().close().close();
+  this.modal.on('modalclose', spy);
+  this.modal.open().close().close();
 
   assert.expect(1);
   assert.strictEqual(spy.callCount, 1, 'modal was only closed once');
 });
 
 q.test('open() pauses playback, close() resumes', function(assert) {
+  var playSpy = sinon.spy();
+  var pauseSpy = sinon.spy();
 
   // Quick and dirty; make it looks like the player is playing.
   this.player.paused = function() {
     return false;
   };
 
-  sinon.spy(this.player, 'play');
-  sinon.spy(this.player, 'pause');
+  this.player.play = function() {
+    playSpy();
+  };
+
+  this.player.pause = function() {
+    pauseSpy();
+  };
+
   this.modal.open();
 
   assert.expect(2);
-  assert.strictEqual(this.player.pause.callCount, 1, 'player is paused when the modal opens');
+  assert.strictEqual(pauseSpy.callCount, 1, 'player is paused when the modal opens');
 
   this.modal.close();
-  assert.strictEqual(this.player.play.callCount, 1, 'player is resumed when the modal closes');
+  assert.strictEqual(playSpy.callCount, 1, 'player is resumed when the modal closes');
 });
 
 q.test('open() hides controls, close() shows controls', function(assert) {
@@ -289,7 +299,7 @@ q.test('fillWith()', function(assert) {
   var beforeFillSpy = sinon.spy();
   var fillSpy = sinon.spy();
 
-  [Dom.createEl(), Dom.createEl()].forEach(function(el) {
+  children.forEach(function(el) {
     contentEl.appendChild(el);
   });
 
@@ -361,40 +371,47 @@ q.test('"content" option (fills on first open() invocation)', function(assert) {
     temporary: false
   });
 
-  sinon.spy(modal, 'fill');
+  var spy = sinon.spy();
+
+  modal.on('modalfill', spy);
   modal.open().close().open();
 
   assert.expect(3);
   assert.strictEqual(modal.content(), modal.options_.content, 'has the expected content');
-  assert.strictEqual(modal.fill.callCount, 1, 'auto-fills only once');
+  assert.strictEqual(spy.callCount, 1, 'auto-fills only once');
   assert.strictEqual(modal.contentEl().firstChild, modal.options_.content, 'has the expected content in the DOM');
 });
 
 q.test('"temporary" option', function(assert) {
   var temp = new ModalDialog(this.player, {temporary: true});
+  var tempSpy = sinon.spy();
   var perm = new ModalDialog(this.player, {temporary: false});
+  var permSpy = sinon.spy();
 
-  sinon.spy(temp, 'dispose');
-  sinon.spy(perm, 'dispose');
+  temp.on('dispose', tempSpy);
+  perm.on('dispose', permSpy);
   temp.open().close();
   perm.open().close();
 
   assert.expect(2);
-  assert.strictEqual(temp.dispose.callCount, 1, 'temporary modals are disposed');
-  assert.strictEqual(perm.dispose.callCount, 0, 'permanent modals are not disposed');
+  assert.strictEqual(tempSpy.callCount, 1, 'temporary modals are disposed');
+  assert.strictEqual(permSpy.callCount, 0, 'permanent modals are not disposed');
 });
 
 q.test('"fillAlways" option', function(assert) {
   var modal = new ModalDialog(this.player, {
+    content: 'foo',
     fillAlways: true,
     temporary: false
   });
 
-  sinon.spy(modal, 'fill');
+  var spy = sinon.spy();
+
+  modal.on('modalfill', spy);
   modal.open().close().open();
 
   assert.expect(1);
-  assert.strictEqual(modal.fill.callCount, 2, 'the modal was filled on each open call');
+  assert.strictEqual(spy.callCount, 2, 'the modal was filled on each open call');
 });
 
 q.test('"label" option', function(assert) {

From be00345289576a58366e847d6d8482c202ae33fc Mon Sep 17 00:00:00 2001
From: Pat O'Neill <pgoneill@gmail.com>
Date: Wed, 14 Oct 2015 10:27:36 -0400
Subject: [PATCH 24/36] Quote map/array keys/values to prevent certain sass
 errors

---
 src/css/utilities/_linear-gradient.scss | 39 ++++++++++++++++---------
 1 file changed, 26 insertions(+), 13 deletions(-)

diff --git a/src/css/utilities/_linear-gradient.scss b/src/css/utilities/_linear-gradient.scss
index b4827bee7b..4128a31834 100644
--- a/src/css/utilities/_linear-gradient.scss
+++ b/src/css/utilities/_linear-gradient.scss
@@ -26,7 +26,20 @@
 /// @param {*} $value - Value to test
 /// @return {Bool}
 @function is-direction($value) {
-  $is-direction: index((to top, to top right, to right top, to right, to bottom right, to right bottom, to bottom, to bottom left, to left bottom, to left, to left top, to top left), $value);
+  $is-direction: index((
+    'to top',
+    'to top right',
+    'to right top',
+    'to right',
+    'to bottom right',
+    'to right bottom',
+    'to bottom',
+    'to bottom left',
+    'to left bottom',
+    'to left',
+    'to left top',
+    'to top left'
+  ), $value);
   $is-angle: type-of($value) == 'number' and index('deg' 'grad' 'turn' 'rad', unit($value));
 
   @return $is-direction or $is-angle;
@@ -42,18 +55,18 @@
   }
 
   $conversion-map: (
-    to top          : bottom,
-    to top right    : bottom left,
-    to right top    : left bottom,
-    to right        : left,
-    to bottom right : top left,
-    to right bottom : left top,
-    to bottom       : top,
-    to bottom left  : top right,
-    to left bottom  : right top,
-    to left         : right,
-    to left top     : right bottom,
-    to top left     : bottom right
+    'to top'          : 'bottom',
+    'to top right'    : 'bottom left',
+    'to right top'    : 'left bottom',
+    'to right'        : 'left',
+    'to bottom right' : 'top left',
+    'to right bottom' : 'left top',
+    'to bottom'       : 'top',
+    'to bottom left'  : 'top right',
+    'to left bottom'  : 'right top',
+    'to left'         : 'right',
+    'to left top'     : 'right bottom',
+    'to top left'     : 'bottom right'
   );
 
   @if map-has-key($conversion-map, $value) {

From ca80d0a63a192f51953b0f1f48dbfbae373b8db5 Mon Sep 17 00:00:00 2001
From: Pat O'Neill <pgoneill@gmail.com>
Date: Mon, 26 Oct 2015 17:00:22 -0400
Subject: [PATCH 25/36] Make close button consistent

Other buttons are icons, so the close button is, too. This pulls in the
current tip of master on the font because the cancel icon is not in a
tagged commit yet.
---
 package.json                          |  2 +-
 src/css/components/_close-button.scss |  9 +++++++++
 src/css/components/_modal-dialog.scss | 24 ------------------------
 src/css/video-js.scss                 |  1 +
 src/js/close-button.js                |  2 +-
 test/unit/close-button.test.js        |  2 +-
 6 files changed, 13 insertions(+), 27 deletions(-)
 create mode 100644 src/css/components/_close-button.scss

diff --git a/package.json b/package.json
index bc19e89025..1cbe36d387 100644
--- a/package.json
+++ b/package.json
@@ -28,7 +28,7 @@
     "object.assign": "^4.0.1",
     "safe-json-parse": "^4.0.0",
     "tsml": "1.0.1",
-    "videojs-font": "1.3.0",
+    "videojs-font": "git+https://github.com/videojs/font.git#182aa4c2ee46cca7ca00155c4cdbd89acbad5a65",
     "videojs-ie8": "1.1.0",
     "videojs-swf": "5.0.0-rc1",
     "vtt.js": "git+https://github.com/gkatsev/vtt.js.git#vjs-v0.12.1",
diff --git a/src/css/components/_close-button.scss b/src/css/components/_close-button.scss
new file mode 100644
index 0000000000..abb2193c21
--- /dev/null
+++ b/src/css/components/_close-button.scss
@@ -0,0 +1,9 @@
+.video-js .vjs-control.vjs-close-button {
+  @extend .vjs-icon-cancel;
+  cursor: pointer;
+  height: 3em;
+  position: absolute;
+  right: 0;
+  top: 0.5em;
+  z-index: 2;
+}
diff --git a/src/css/components/_modal-dialog.scss b/src/css/components/_modal-dialog.scss
index 6cd8c3d6ef..185822c11a 100644
--- a/src/css/components/_modal-dialog.scss
+++ b/src/css/components/_modal-dialog.scss
@@ -7,27 +7,3 @@
   @extend %fill-parent;
   z-index: 1;
 }
-
-// Ultimately, this would be moved to its own component partial, but
-// for now it's unclear what styles would be generic and which specific
-// to this context!
-.vjs-modal-dialog .vjs-close {
-  cursor: pointer;
-  font-size: 1.2em; // 12px
-  height: auto;
-  padding: 0.75em 1em; // 9px 12px
-  position: absolute;
-  right: 0;
-  top: 0;
-  width: auto;
-  z-index: 2;
-}
-
-// Reset inherited control-text styles.
-.vjs-modal-dialog .vjs-close .vjs-control-text {
-  clip: auto;
-  height: auto;
-  margin: 0;
-  position: static;
-  width: auto;
-}
diff --git a/src/css/video-js.scss b/src/css/video-js.scss
index 3bf462f61d..a44e18d5f4 100644
--- a/src/css/video-js.scss
+++ b/src/css/video-js.scss
@@ -7,6 +7,7 @@
 @import "components/layout";
 @import "components/big-play";
 @import "components/button";
+@import "components/close-button";
 
 @import "components/menu/menu";
 @import "components/menu/menu-popup";
diff --git a/src/js/close-button.js b/src/js/close-button.js
index 7c1d8dd33b..7db8da10ee 100644
--- a/src/js/close-button.js
+++ b/src/js/close-button.js
@@ -16,7 +16,7 @@ class CloseButton extends Button {
   }
 
   buildCSSClass() {
-    return `vjs-close ${super.buildCSSClass()}`;
+    return `vjs-close-button ${super.buildCSSClass()}`;
   }
 
   handleClick() {
diff --git a/test/unit/close-button.test.js b/test/unit/close-button.test.js
index c8201828f9..02e0a30a07 100644
--- a/test/unit/close-button.test.js
+++ b/test/unit/close-button.test.js
@@ -15,7 +15,7 @@ q.module('CloseButton', {
 });
 
 q.test('should create the expected element', function(assert) {
-  var classes = ['button', 'close', 'control'];
+  var classes = ['button', 'close-button', 'control'];
 
   assert.expect(2 + classes.length);
   assert.strictEqual(this.btn.el().tagName.toLowerCase(), 'button', 'is a <button>');

From fc8cc9a14e175e8d8e26aee64392cd494905e5dd Mon Sep 17 00:00:00 2001
From: Pat O'Neill <pgoneill@gmail.com>
Date: Mon, 26 Oct 2015 17:24:42 -0400
Subject: [PATCH 26/36] Add assertElHasClasses test helper

This makes testing for the presence of multiple classes on a component a
little cleaner/simpler.
---
 test/unit/close-button.test.js | 12 ++++++------
 test/unit/modal-dialog.test.js | 18 ++++--------------
 test/unit/test-helpers.js      |  7 +++++++
 3 files changed, 17 insertions(+), 20 deletions(-)

diff --git a/test/unit/close-button.test.js b/test/unit/close-button.test.js
index 02e0a30a07..cf46bd73db 100644
--- a/test/unit/close-button.test.js
+++ b/test/unit/close-button.test.js
@@ -15,16 +15,16 @@ q.module('CloseButton', {
 });
 
 q.test('should create the expected element', function(assert) {
-  var classes = ['button', 'close-button', 'control'];
+  let classes = [
+    'vjs-button',
+    'vjs-close-button',
+    'vjs-control'
+  ];
 
   assert.expect(2 + classes.length);
   assert.strictEqual(this.btn.el().tagName.toLowerCase(), 'button', 'is a <button>');
   assert.strictEqual(this.btn.el().querySelector('.vjs-control-text').innerHTML, 'Close');
-
-  classes.forEach(function(s) {
-    var c = 'vjs-' + s;
-    assert.ok(this.btn.hasClass(c), 'has the "' + c + '" class');
-  }, this);
+  TestHelpers.assertElHasClasses(assert, this.modal, classes);
 });
 
 q.test('should allow setting the controlText_ property as an option', function(assert) {
diff --git a/test/unit/modal-dialog.test.js b/test/unit/modal-dialog.test.js
index 5f92f72dc3..b704ff4dba 100644
--- a/test/unit/modal-dialog.test.js
+++ b/test/unit/modal-dialog.test.js
@@ -22,9 +22,9 @@ q.module('ModalDialog', {
 });
 
 q.test('should create the expected element', function(assert) {
-  var classes = [
-    'modal-dialog',
-    'hidden'
+  let classes = [
+    'vjs-modal-dialog',
+    'vjs-hidden'
   ];
 
   assert.expect(4 + classes.length);
@@ -32,17 +32,7 @@ q.test('should create the expected element', function(assert) {
   assert.strictEqual(this.el.tabIndex, -1, 'el has -1 tabindex');
   assert.strictEqual(this.el.getAttribute('aria-role'), 'dialog', 'el has aria-role="dialog"');
   assert.strictEqual(this.el.getAttribute('aria-label'), '', 'el has aria-role="" by default');
-
-  classes.forEach(function(s) {
-    var c = 'vjs-' + s;
-    assert.ok(this.modal.hasClass(c), [
-      'has the "',
-      c,
-      '" class in "',
-      this.el.className,
-      '"'
-    ].join(''));
-  }, this);
+  TestHelpers.assertElHasClasses(assert, this.modal, classes);
 });
 
 q.test('should create the expected contentEl', function(assert) {
diff --git a/test/unit/test-helpers.js b/test/unit/test-helpers.js
index deb97c857d..2bcebd256f 100644
--- a/test/unit/test-helpers.js
+++ b/test/unit/test-helpers.js
@@ -40,6 +40,13 @@ var TestHelpers = {
         return el.currentStyle[rule];
       }
     }
+  },
+
+  assertElHasClasses: function(assert, component, classes) {
+    let el = component.el();
+    classes.forEach(c => {
+      assert.ok(component.hasClass(c), `has the "${c}" class in "${el.className}"`);
+    });
   }
 };
 

From c47b8f988eb1a719be9ddbfa71362072ad1e80d0 Mon Sep 17 00:00:00 2001
From: Pat O'Neill <pgoneill@gmail.com>
Date: Mon, 26 Oct 2015 17:35:23 -0400
Subject: [PATCH 27/36] No need to depend on Events

---
 src/js/modal-dialog.js | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/js/modal-dialog.js b/src/js/modal-dialog.js
index 95c356fb29..eba1491d54 100644
--- a/src/js/modal-dialog.js
+++ b/src/js/modal-dialog.js
@@ -4,7 +4,6 @@
 import document from 'global/document';
 
 import * as Dom from './utils/dom';
-import * as Events from './utils/events';
 import * as Fn from './utils/fn';
 import log from './utils/log';
 
@@ -135,7 +134,7 @@ class ModalDialog extends Component {
       }
 
       if (this.closeable()) {
-        Events.on(document, 'keydown', Fn.bind(this, this.handleKeyPress));
+        this.on(document, 'keydown', Fn.bind(this, this.handleKeyPress));
       }
 
       player.controls(false);
@@ -182,7 +181,7 @@ class ModalDialog extends Component {
       }
 
       if (this.closeable()) {
-        Events.off(document, 'keydown', Fn.bind(this, this.handleKeyPress));
+        this.off(document, 'keydown', Fn.bind(this, this.handleKeyPress));
       }
 
       player.controls(true);

From fdfd809dcc106fb76e0025bfcc406c9617516ece Mon Sep 17 00:00:00 2001
From: Pat O'Neill <pgoneill@gmail.com>
Date: Mon, 26 Oct 2015 17:56:39 -0400
Subject: [PATCH 28/36] More explicit args for overloaded methods

---
 src/js/modal-dialog.js | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/src/js/modal-dialog.js b/src/js/modal-dialog.js
index eba1491d54..dd1b027f4b 100644
--- a/src/js/modal-dialog.js
+++ b/src/js/modal-dialog.js
@@ -150,17 +150,15 @@ class ModalDialog extends Component {
    *
    * @method opened
    * @param  {Boolean} [value]
-   *         If given as a Boolean, it will open (`true`) or close (`false`)
-   *         the modal.
+   *         If given, it will open (`true`) or close (`false`) the modal.
    *
-   * @return {Boolean|ModalDialog}
-   *         Returns `this` only if `value` was passed.
+   * @return {Boolean}
    */
   opened(value) {
-    if (typeof value !== 'undefined') {
+    if (typeof value === 'boolean') {
       this[value ? 'open' : 'close']();
     }
-    return !!this.opened_;
+    return this.opened_;
   }
 
   /**
@@ -205,7 +203,7 @@ class ModalDialog extends Component {
    * @return {Boolean}
    */
   closeable(value) {
-    if (typeof value !== 'undefined') {
+    if (typeof value === 'boolean') {
       let closeable = this.closeable_ = !!value;
       let close = this.getChild('closeButton');
 
@@ -220,7 +218,7 @@ class ModalDialog extends Component {
         close.dispose();
       }
     }
-    return !!this.closeable_;
+    return this.closeable_;
   }
 
   /**

From e97399c09fa7070dda17ff2c668083a623d52a48 Mon Sep 17 00:00:00 2001
From: Pat O'Neill <pgoneill@gmail.com>
Date: Tue, 27 Oct 2015 09:23:06 -0400
Subject: [PATCH 29/36] Fix copy/paste error

---
 test/unit/close-button.test.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/unit/close-button.test.js b/test/unit/close-button.test.js
index cf46bd73db..a250d7751a 100644
--- a/test/unit/close-button.test.js
+++ b/test/unit/close-button.test.js
@@ -24,7 +24,7 @@ q.test('should create the expected element', function(assert) {
   assert.expect(2 + classes.length);
   assert.strictEqual(this.btn.el().tagName.toLowerCase(), 'button', 'is a <button>');
   assert.strictEqual(this.btn.el().querySelector('.vjs-control-text').innerHTML, 'Close');
-  TestHelpers.assertElHasClasses(assert, this.modal, classes);
+  TestHelpers.assertElHasClasses(assert, this.btn, classes);
 });
 
 q.test('should allow setting the controlText_ property as an option', function(assert) {

From 06e942fea333e29eb8a26389a0ea939f124a39c8 Mon Sep 17 00:00:00 2001
From: Pat O'Neill <pgoneill@gmail.com>
Date: Tue, 27 Oct 2015 11:58:46 -0400
Subject: [PATCH 30/36] Improve accessibility and element testing.

This improves modal accessibility by allowing a description element and
some additional updates to ARIA attributes.

Also, this removes the previously-added `assertElHasClasses` in favor of
a more comprehensive `assertEl` method on the test helpers object.
---
 src/css/components/_layout.scss |  9 ++++
 src/js/modal-dialog.js          | 63 +++++++++++++++++++++--
 src/js/utils/dom.js             | 16 ++++++
 test/unit/close-button.test.js  | 20 ++++----
 test/unit/modal-dialog.test.js  | 63 +++++++++++++++++------
 test/unit/test-helpers.js       | 88 +++++++++++++++++++++++++++++++--
 6 files changed, 225 insertions(+), 34 deletions(-)

diff --git a/src/css/components/_layout.scss b/src/css/components/_layout.scss
index 2a95fe2083..a496e0e0de 100644
--- a/src/css/components/_layout.scss
+++ b/src/css/components/_layout.scss
@@ -125,6 +125,15 @@ body.vjs-full-window {
 /* Hide disabled or unsupported controls. */
 .vjs-hidden { display: none !important; }
 
+// Visually hidden offscreen, but accessible to screen readers.
+.video-js .vjs-offscreen {
+  height: 1px;
+  left: -9999px;
+  position: absolute;
+  top: 0;
+  width: 1px;
+}
+
 .vjs-lock-showing {
   display: block !important;
   opacity: 1;
diff --git a/src/js/modal-dialog.js b/src/js/modal-dialog.js
index dd1b027f4b..309cd2679e 100644
--- a/src/js/modal-dialog.js
+++ b/src/js/modal-dialog.js
@@ -13,6 +13,17 @@ import CloseButton from './close-button';
 const MODAL_CLASS_NAME = 'vjs-modal-dialog';
 const ESC = 27;
 
+/**
+ * Whether or not a value is a non-empty string.
+ *
+ * @function nonEmptyString
+ * @param    {Mixed} value
+ * @return   {Boolean}
+ */
+function nonEmptyString(value) {
+  return typeof value === 'string' && /\S/.test(value);
+}
+
 /**
  * The `ModalDialog` displays over the video and its controls, which blocks
  * interaction with the player until it is closed.
@@ -33,12 +44,15 @@ class ModalDialog extends Component {
    * @param  {Mixed} [options.content=undefined]
    *         Provide customized content for this modal.
    *
+   * @param  {String} [options.description]
+   *         A text description for the modal, primarily for accessibility.
+   *
    * @param  {Boolean} [options.fillAlways=false]
    *         Normally, modals are automatically filled only the first time
    *         they open. This tells the modal to refresh its content
    *         every time it opens.
    *
-   * @param  {String} [options.label='']
+   * @param  {String} [options.label]
    *         A text label for the modal, primarily for accessibility.
    *
    * @param  {Boolean} [options.temporary=true]
@@ -63,7 +77,17 @@ class ModalDialog extends Component {
     // (not the UI elements like the close button).
     this.contentEl_ = Dom.createEl('div', {
       className: `${MODAL_CLASS_NAME}-content`
+    }, {
+      role: 'document'
     });
+
+    this.descEl_ = Dom.createEl('p', {
+      className: `${MODAL_CLASS_NAME}-description vjs-offscreen`,
+      id: this.el().getAttribute('aria-describedby')
+    });
+
+    Dom.textContent(this.descEl_, this.description());
+    this.el_.appendChild(this.descEl_);
     this.el_.appendChild(this.contentEl_);
   }
 
@@ -78,8 +102,10 @@ class ModalDialog extends Component {
       className: this.buildCSSClass(),
       tabIndex: -1
     }, {
-      'aria-role': 'dialog',
-      'aria-label': this.options_.label || ''
+      'aria-describedby': `${this.id()}_description`,
+      'aria-hidden': 'true',
+      'aria-label': this.label(),
+      role: 'dialog'
     });
   }
 
@@ -106,6 +132,32 @@ class ModalDialog extends Component {
     }
   }
 
+  /**
+   * Returns the label string for this modal. Primarily used for accessibility.
+   *
+   * @return {String}
+   */
+  label() {
+    return this.options_.label || this.localize('Modal Window');
+  }
+
+  /**
+   * Returns the description string for this modal. Primarily used for
+   * accessibility.
+   *
+   * @return {String}
+   */
+  description() {
+    let desc = this.options_.description || this.localize('This is a modal window.');
+
+    // Append a universal closeability message if the modal is closeable.
+    if (this.closeable()) {
+      desc += ' ' + this.localize('This modal can be closed by pressing the Escape key or activating the close button.');
+    }
+
+    return desc;
+  }
+
   /**
    * Opens the modal.
    *
@@ -139,6 +191,7 @@ class ModalDialog extends Component {
 
       player.controls(false);
       this.show();
+      this.el().setAttribute('aria-hidden', 'false');
       this.trigger('modalopen');
       this.hasBeenOpened_ = true;
     }
@@ -184,6 +237,7 @@ class ModalDialog extends Component {
 
       player.controls(true);
       this.hide();
+      this.el().setAttribute('aria-hidden', 'true');
       this.trigger('modalclose');
 
       if (this.options_.temporary) {
@@ -352,10 +406,11 @@ class ModalDialog extends Component {
       content = content.call(this, this.contentEl());
     }
 
-    if (typeof content === 'string' && /\S/.test(content)) {
+    if (nonEmptyString(content)) {
       return content;
     }
 
+    // DOM element and array handling.
     content = (Array.isArray(content) ? content : [content]).filter(Dom.isEl);
     return content.length ? content : null;
   }
diff --git a/src/js/utils/dom.js b/src/js/utils/dom.js
index 98cd4ad711..be1bd9237f 100644
--- a/src/js/utils/dom.js
+++ b/src/js/utils/dom.js
@@ -58,6 +58,22 @@ export function createEl(tagName='div', properties={}, attributes={}){
   return el;
 }
 
+/**
+ * Injects text into an element, replacing any existing contents entirely.
+ *
+ * @param  {Element} el
+ * @param  {String} text
+ * @return {Element}
+ * @function textContent
+ */
+export function textContent(el, text) {
+  if (typeof el.textContent === 'undefined') {
+    el.innerText = text;
+  } else {
+    el.textContent = text;
+  }
+}
+
 /**
  * Insert an element as the first child node of another
  *
diff --git a/test/unit/close-button.test.js b/test/unit/close-button.test.js
index a250d7751a..bd02bbb7f4 100644
--- a/test/unit/close-button.test.js
+++ b/test/unit/close-button.test.js
@@ -15,16 +15,18 @@ q.module('CloseButton', {
 });
 
 q.test('should create the expected element', function(assert) {
-  let classes = [
-    'vjs-button',
-    'vjs-close-button',
-    'vjs-control'
-  ];
-
-  assert.expect(2 + classes.length);
-  assert.strictEqual(this.btn.el().tagName.toLowerCase(), 'button', 'is a <button>');
+  let elAssertions = TestHelpers.assertEl(assert, this.btn.el(), {
+    tagName: 'button',
+    classes: [
+      'vjs-button',
+      'vjs-close-button',
+      'vjs-control'
+    ]
+  });
+
+  assert.expect(elAssertions.count + 1);
+  elAssertions();
   assert.strictEqual(this.btn.el().querySelector('.vjs-control-text').innerHTML, 'Close');
-  TestHelpers.assertElHasClasses(assert, this.btn, classes);
 });
 
 q.test('should allow setting the controlText_ property as an option', function(assert) {
diff --git a/test/unit/modal-dialog.test.js b/test/unit/modal-dialog.test.js
index b704ff4dba..1c6beea772 100644
--- a/test/unit/modal-dialog.test.js
+++ b/test/unit/modal-dialog.test.js
@@ -22,26 +22,57 @@ q.module('ModalDialog', {
 });
 
 q.test('should create the expected element', function(assert) {
-  let classes = [
-    'vjs-modal-dialog',
-    'vjs-hidden'
-  ];
-
-  assert.expect(4 + classes.length);
-  assert.strictEqual(this.el.tagName.toLowerCase(), 'div', 'el is a <div>');
-  assert.strictEqual(this.el.tabIndex, -1, 'el has -1 tabindex');
-  assert.strictEqual(this.el.getAttribute('aria-role'), 'dialog', 'el has aria-role="dialog"');
-  assert.strictEqual(this.el.getAttribute('aria-label'), '', 'el has aria-role="" by default');
-  TestHelpers.assertElHasClasses(assert, this.modal, classes);
+  let elAssertions = TestHelpers.assertEl(assert, this.el, {
+    tagName: 'div',
+    classes: [
+      'vjs-modal-dialog',
+      'vjs-hidden'
+    ],
+    attrs: {
+      'aria-describedby': this.modal.descEl_.id,
+      'aria-hidden': 'true',
+      'aria-label': this.modal.label(),
+      'role': 'dialog'
+    },
+    props: {
+      tabIndex: -1
+    }
+  });
+
+  assert.expect(elAssertions.count);
+  elAssertions();
+});
+
+q.test('should create the expected description element', function(assert) {
+  let elAssertions = TestHelpers.assertEl(assert, this.modal.descEl_, {
+    tagName: 'p',
+    innerHTML: this.modal.description(),
+    classes: [
+      'vjs-modal-dialog-description',
+      'vjs-offscreen'
+    ],
+    attrs: {
+      id: this.el.getAttribute('aria-describedby')
+    }
+  });
+
+  assert.expect(elAssertions.count);
+  elAssertions();
 });
 
 q.test('should create the expected contentEl', function(assert) {
-  var contentEl = this.modal.contentEl();
+  let elAssertions = TestHelpers.assertEl(assert, this.modal.contentEl(), {
+    tagName: 'div',
+    classes: [
+      'vjs-modal-dialog-content'
+    ],
+    props: {
+      parentNode: this.el
+    }
+  });
 
-  assert.expect(3);
-  assert.strictEqual(contentEl.parentNode, this.el, 'contentEl is a child of el');
-  assert.strictEqual(contentEl.tagName.toLowerCase(), 'div', 'contentEl is a <div>');
-  assert.strictEqual(contentEl.className.trim(), 'vjs-modal-dialog-content', 'has "vjs-modal-dialog-content" class');
+  assert.expect(elAssertions.count);
+  elAssertions();
 });
 
 q.test('should create a close button by default', function(assert) {
diff --git a/test/unit/test-helpers.js b/test/unit/test-helpers.js
index 2bcebd256f..5d3c2d5696 100644
--- a/test/unit/test-helpers.js
+++ b/test/unit/test-helpers.js
@@ -1,3 +1,4 @@
+import * as Dom from '../../src/js/utils/dom';
 import Player from '../../src/js/player.js';
 import TechFaker from './tech/tech-faker.js';
 import window from 'global/window';
@@ -42,11 +43,88 @@ var TestHelpers = {
     }
   },
 
-  assertElHasClasses: function(assert, component, classes) {
-    let el = component.el();
-    classes.forEach(c => {
-      assert.ok(component.hasClass(c), `has the "${c}" class in "${el.className}"`);
-    });
+  /**
+   * Runs a range of assertions on a DOM element.
+   *
+   * @param  {QUnit.Assert} assert
+   * @param  {Element} el
+   * @param  {Object} spec
+   *         An object from which assertions are generated.
+   *
+   * @param  {Object} [spec.attrs]
+   *         An object mapping attribute names (keys) to strict values.
+   *
+   * @param  {Array} [spec.classes]
+   *         An array of classes that are expected on the element.
+   *
+   * @param  {String} [spec.innerHTML]
+   *         A string of text/html that is expected as the content of element.
+   *         Both values will be trimmed, but remains case-sensitive.
+   *
+   * @param  {Object} [spec.props]
+   *         An object mapping property names (keys) to strict values.
+   *
+   * @param  {String} [spec.tagName]
+   *         A string (case-insensitive) representing that element's tagName.
+   *
+   * @return {Function}
+   *         Invoke the returned function to run the assertions. This
+   *         function has a `count` property which can be used to
+   *         reference how many assertions will be run (e.g. for use
+   *         with `assert.expect()`).
+   */
+  assertEl: function(assert, el, spec) {
+    let attrs = spec.attrs ? Object.keys(spec.attrs) : [];
+    let classes = spec.classes || [];
+    let innerHTML = spec.innerHTML ? spec.innerHTML.trim() : '';
+    let props = spec.props ? Object.keys(spec.props) : [];
+    let tagName = spec.tagName ? spec.tagName.toLowerCase() : '';
+
+    // Return value is a function, which runs through all the combined
+    // assertions. This is done so that the count can be attached dynamically
+    // and run whenever desired.
+    let run = () => {
+      if (tagName) {
+        let elTagName = el.tagName.toLowerCase();
+        let msg = `el should have been a <${tagName}> and was a <${elTagName}>`;
+        assert.strictEqual(elTagName, tagName, msg);
+      }
+
+      if (innerHTML) {
+        let elInnerHTML = el.innerHTML.trim();
+        let msg = `el should have expected HTML content`;
+        assert.strictEqual(elInnerHTML, innerHTML, msg);
+      }
+
+      attrs.forEach(a => {
+        let actual = el.getAttribute(a);
+        let expected = spec.attrs[a];
+        let msg = `el should have the "${a}" attribute with the value "${expected}" and it was "${actual}"`;
+        assert.strictEqual(actual, expected, msg);
+      });
+
+      classes.forEach(c => {
+        let msg = `el should have the "${c}" class in its className, which is "${el.className}"`;
+        assert.ok(Dom.hasElClass(el, c), msg);
+      });
+
+      props.forEach(p => {
+        let actual = el[p];
+        let expected = spec.props[p];
+        let msg = `el should have the "${p}" property with the value "${expected}" and it was "${actual}"`;
+        assert.strictEqual(actual, expected, msg);
+      });
+    };
+
+    // Include the number of assertions to run, so it can be used to set
+    // expectations (via `assert.expect()`).
+    run.count =  Number(!!tagName) +
+      Number(!!innerHTML) +
+      classes.length +
+      attrs.length +
+      props.length;
+
+    return run;
   }
 };
 

From a7def7c886dbff044b9045ef9aa4905fe119397e Mon Sep 17 00:00:00 2001
From: Pat O'Neill <pgoneill@gmail.com>
Date: Tue, 27 Oct 2015 16:27:40 -0400
Subject: [PATCH 31/36] Abstract content normalization to utils/dom.

Also adds a number of methods to the DOM utility and lots of tests for
those. Simplifies the modal dialog component correspondingly.
---
 src/js/modal-dialog.js         | 108 ++++++--------------------
 src/js/utils/dom.js            | 103 ++++++++++++++++++++++++-
 test/unit/modal-dialog.test.js |  66 +---------------
 test/unit/utils/dom.test.js    | 134 +++++++++++++++++++++++++++++++++
 4 files changed, 258 insertions(+), 153 deletions(-)

diff --git a/src/js/modal-dialog.js b/src/js/modal-dialog.js
index 309cd2679e..df4165d7c9 100644
--- a/src/js/modal-dialog.js
+++ b/src/js/modal-dialog.js
@@ -13,17 +13,6 @@ import CloseButton from './close-button';
 const MODAL_CLASS_NAME = 'vjs-modal-dialog';
 const ESC = 27;
 
-/**
- * Whether or not a value is a non-empty string.
- *
- * @function nonEmptyString
- * @param    {Mixed} value
- * @return   {Boolean}
- */
-function nonEmptyString(value) {
-  return typeof value === 'string' && /\S/.test(value);
-}
-
 /**
  * The `ModalDialog` displays over the video and its controls, which blocks
  * interaction with the player until it is closed.
@@ -293,10 +282,8 @@ class ModalDialog extends Component {
    * The content element will be emptied before this change takes place.
    *
    * @method fillWith
-   * @param  {String|Function|Element|Array} [content]
-   *         The content with which to fill the modal. This must be either
-   *         a DOM element, an array of DOM elements, a string, or a
-   *         function which returns one of these.
+   * @param  {Mixed} [content]
+   *         The same rules apply to this as apply to the `content` option.
    *
    * @return {ModalDialog}
    */
@@ -305,35 +292,21 @@ class ModalDialog extends Component {
     let parentEl = contentEl.parentNode;
     let nextSiblingEl = contentEl.nextSibling;
 
-    content = this.normalizeContent_(content);
-
-    if (content && content.length) {
-      this.trigger('beforemodalfill');
-      this.hasBeenFilled_ = true;
+    this.trigger('beforemodalfill');
+    this.hasBeenFilled_ = true;
 
-      // Detach the content element from the DOM before performing
-      // manipulation to avoid modifying the live DOM multiple times.
-      parentEl.removeChild(contentEl);
-      this.empty();
+    // Detach the content element from the DOM before performing
+    // manipulation to avoid modifying the live DOM multiple times.
+    parentEl.removeChild(contentEl);
+    this.empty();
+    Dom.insertContent(contentEl, content);
+    this.trigger('modalfill');
 
-      // Strings are written into the DOM directly, arrays should by filtered
-      // down to DOM elements only and appended in order.
-      if (typeof content === 'string') {
-        contentEl.innerHTML = content;
-      } else {
-        content.forEach(el => contentEl.appendChild(el));
-      }
-
-      this.trigger('modalfill');
-
-      // Re-inject the re-filled content element.
-      if (nextSiblingEl) {
-        parentEl.insertBefore(contentEl, nextSiblingEl);
-      } else {
-        parentEl.appendChild(contentEl);
-      }
+    // Re-inject the re-filled content element.
+    if (nextSiblingEl) {
+      parentEl.insertBefore(contentEl, nextSiblingEl);
     } else {
-      log.warn('no content defined for modal');
+      parentEl.appendChild(contentEl);
     }
 
     return this;
@@ -348,12 +321,8 @@ class ModalDialog extends Component {
    * @return {ModalDialog}
    */
   empty() {
-    let contentEl = this.contentEl();
-    let count = contentEl.children.length;
     this.trigger('beforemodalempty');
-    while (count--) {
-      contentEl.removeChild(contentEl.children[0]);
-    }
+    Dom.emptyEl(this.contentEl());
     this.trigger('modalempty');
     return this;
   }
@@ -366,54 +335,19 @@ class ModalDialog extends Component {
    * that process.
    *
    * @method content
-   * @param  {String|Function|Element|Array|Null} [value]
-   *         If given, sets the internal content value to be used on the next
-   *         call to `fill`. This value is passed through normalizeContent_
-   *         before being rendered into the DOM.
+   * @param  {Mixed} [value]
+   *         If defined, sets the internal content value to be used on the
+   *         next call(s) to `fill`. This value is normalized before being
+   *         inserted. To "clear" the internal content value, pass `null`.
    *
-   * @return {String|Function|Element|Array|Null}
+   * @return {Mixed}
    */
   content(value) {
-    if (
-      value === null ||
-      typeof value === 'string' ||
-      typeof value === 'function' ||
-      Array.isArray(value) ||
-      Dom.isEl(value)
-    ) {
+    if (typeof value !== 'undefined') {
       this.content_ = value;
     }
     return this.content_;
   }
-
-  /**
-   * Normalizes contents for insertion into a content element.
-   *
-   * @method normalizeContent_
-   * @private
-   * @param  {String|Function|Element|Array} content
-   * @return {Array|String|Null}
-   *         An array of one or more DOM element(s). A non-empty string. Null.
-   */
-  normalizeContent_(content) {
-
-    // Short-cut out if it's clearly invalid.
-    if (!content) {
-      return null;
-    }
-
-    if (typeof content === 'function') {
-      content = content.call(this, this.contentEl());
-    }
-
-    if (nonEmptyString(content)) {
-      return content;
-    }
-
-    // DOM element and array handling.
-    content = (Array.isArray(content) ? content : [content]).filter(Dom.isEl);
-    return content.length ? content : null;
-  }
 }
 
 /*
diff --git a/src/js/utils/dom.js b/src/js/utils/dom.js
index be1bd9237f..f8a09b4020 100644
--- a/src/js/utils/dom.js
+++ b/src/js/utils/dom.js
@@ -386,7 +386,6 @@ export function getPointerPosition(el, event) {
   return position;
 }
 
-
 /**
  * Determines, via duck typing, whether or not a value is a DOM element.
  *
@@ -396,3 +395,105 @@ export function getPointerPosition(el, event) {
 export function isEl(value) {
   return !!value && typeof value === 'object' && value.nodeType === 1;
 }
+
+/**
+ * Determines, via duck typing, whether or not a value is a text node.
+ *
+ * @param  {Mixed} value
+ * @return {Boolean}
+ */
+export function isTextNode(value) {
+  return !!value && typeof value === 'object' && value.nodeType === 3;
+}
+
+/**
+ * Empties the contents of an element.
+ *
+ * @function emptyEl
+ * @param    {Element} el
+ * @return   {Element}
+ */
+export function emptyEl(el) {
+  while (el.firstChild) {
+    el.removeChild(el.firstChild);
+  }
+  return el;
+}
+
+/**
+ * Normalizes content for eventual insertion into the DOM.
+ *
+ * This allows a wide range of content definition methods, but protects
+ * from falling into the trap of simply writing to `innerHTML`, which is
+ * an XSS concern.
+ *
+ * The content for an element can be passed in multiple types, whose
+ * behavior is as follows:
+ *
+ * - String: Normalized into a text node.
+ * - Node: An Element or TextNode is passed through.
+ * - Array: A one-dimensional array of strings, nodes, or functions (which
+ *   return single strings or nodes).
+ * - Function: If the sole argument, is expected to produce a string, node,
+ *   or array.
+ *
+ * @function normalizeContent
+ * @param    {String|Element|Array|Function} content
+ * @return   {Array}
+ */
+export function normalizeContent(content) {
+
+  // First, invoke content if it is a function. If it produces an array,
+  // that needs to happen before normalization.
+  if (typeof content === 'function') {
+    content = content();
+  }
+
+  // Next up, normalize to an array, so one or many items can be normalized,
+  // filtered, and returned.
+  return (Array.isArray(content) ? content : [content]).map(value => {
+
+    // First, invoke value if it is a function to produce a new value,
+    // which will be subsequently normalized to a Node of some kind.
+    if (typeof value === 'function') {
+      value = value();
+    }
+
+    if (isEl(value) || isTextNode(value)) {
+      return value;
+    }
+
+    if (typeof value === 'string' && /\S/.test(value)) {
+      return document.createTextNode(value);
+    }
+  }).filter(value => value);
+}
+
+/**
+ * Normalizes and inserts content into an element.
+ *
+ * @function insertContent
+ * @param    {Element} el
+ * @param    {String|Element|Array|Function} content
+ * @param    {Boolean} [append=false]
+ * @return   {Element}
+ */
+export function insertContent(el, content, append=false) {
+  if (!append) {
+    emptyEl(el);
+  }
+  normalizeContent(content).forEach(node => el.appendChild(node));
+  return el;
+}
+
+/**
+ * Normalizes and inserts content into an element.
+ *
+ * @function insertContent
+ * @param    {Element} el
+ * @param    {String|Element|Array|Function} content
+ * @return   {Element}
+ */
+export function appendContent(el, content) {
+  return insertContent(el, content, true);
+}
diff --git a/test/unit/modal-dialog.test.js b/test/unit/modal-dialog.test.js
index 1c6beea772..1e04c994f5 100644
--- a/test/unit/modal-dialog.test.js
+++ b/test/unit/modal-dialog.test.js
@@ -241,79 +241,15 @@ q.test('opened()', function(assert) {
 q.test('content()', function(assert) {
   var content;
 
-  assert.expect(4);
+  assert.expect(3);
   assert.strictEqual(typeof this.modal.content(), 'undefined', 'no content by default');
 
   content = this.modal.content(Dom.createEl());
   assert.ok(Dom.isEl(content), 'content was set from a single DOM element');
 
-  assert.strictEqual(this.modal.content(123), content, 'content was NOT changed by invalid input');
   assert.strictEqual(this.modal.content(null), null, 'content was nullified');
 });
 
-q.test('normalizeContent_() arrays, elements, and non-empty strings', function(assert) {
-  var asElement = this.modal.normalizeContent_(Dom.createEl());
-
-  var asString = this.modal.normalizeContent_('hello');
-
-  var asArray = this.modal.normalizeContent_([
-    Dom.createEl(), {}, Dom.createEl('span'), []
-  ]);
-
-  var asInvalid = this.modal.normalizeContent_(true);
-
-  var asEmptyString = this.modal.normalizeContent_('  ');
-
-  assert.expect(5);
-  assert.strictEqual(asElement.length, 1, 'single elements are accepted');
-  assert.strictEqual(asString.length, 5, 'non-empty strings are accepted');
-  assert.strictEqual(asArray.length, 2, 'invalid values filtered out of array');
-  assert.strictEqual(asInvalid, null, 'single invalid values are rejected');
-  assert.strictEqual(asEmptyString, null, 'empty strings are rejected');
-});
-
-q.test('normalizeContent_() callbacks', function(assert) {
-  var asElementFn = this.modal.normalizeContent_(function() {
-    return Dom.createEl();
-  });
-
-  var asStringFn = this.modal.normalizeContent_(function() {
-    return 'hello';
-  });
-
-  var asArrayFn = this.modal.normalizeContent_(function() {
-    return [null, '123', Dom.createEl()];
-  });
-
-  var asInvalidFn = this.modal.normalizeContent_(function() {
-    return 123;
-  });
-
-  var asEmptyStringFn = this.modal.normalizeContent_(function() {
-    return '\t\r\n';
-  });
-
-  assert.expect(5);
-  assert.strictEqual(asElementFn.length, 1, 'single elements are accepted when returned by a function');
-  assert.strictEqual(asStringFn.length, 5, 'non-empty strings are passed through directly');
-  assert.strictEqual(asArrayFn.length, 1, 'invalid values filtered out of array when returned by a function');
-  assert.strictEqual(asInvalidFn, null, 'single invalid values are rejected when returned by a function');
-  assert.strictEqual(asEmptyStringFn, null, 'empty strings are rejected when returned by a function');
-});
-
-q.test('normalizeContent_() callback invocations', function(assert) {
-  var callbackSpy = sinon.spy();
-  var spyCall;
-
-  this.modal.normalizeContent_(callbackSpy);
-  spyCall = callbackSpy.getCall(0);
-
-  assert.expect(3);
-  assert.strictEqual(callbackSpy.callCount, 1, 'the test callback was called');
-  assert.strictEqual(spyCall.thisValue, this.modal, 'the value of "this" in the callback is the modal');
-  assert.ok(spyCall.calledWithExactly(this.modal.contentEl()), 'the contentEl is passed to the callback');
-});
-
 q.test('fillWith()', function(assert) {
   var contentEl = this.modal.contentEl();
   var children = [Dom.createEl(), Dom.createEl(), Dom.createEl()];
diff --git a/test/unit/utils/dom.test.js b/test/unit/utils/dom.test.js
index 03f4820f59..0c1d82b856 100644
--- a/test/unit/utils/dom.test.js
+++ b/test/unit/utils/dom.test.js
@@ -160,3 +160,137 @@ test('Dom.findElPosition should find top and left position', function() {
   position = Dom.findElPosition(d);
   deepEqual(position, {left: 0, top: 0}, 'If there is no gBCR, we should get zeros');
 });
+
+test('Dom.isEl', function(assert) {
+  assert.expect(7);
+  assert.notOk(Dom.isEl(), 'undefined is not an element');
+  assert.notOk(Dom.isEl(true), 'booleans are not elements');
+  assert.notOk(Dom.isEl({}), 'objects are not elements');
+  assert.notOk(Dom.isEl([]), 'arrays are not elements');
+  assert.notOk(Dom.isEl('<h1></h1>'), 'strings are not elements');
+  assert.ok(Dom.isEl(document.createElement('div')), 'elements are elements');
+  assert.ok(Dom.isEl({nodeType: 1}), 'duck typing is imperfect');
+});
+
+test('Dom.isTextNode', function(assert) {
+  assert.expect(7);
+  assert.notOk(Dom.isTextNode(), 'undefined is not a text node');
+  assert.notOk(Dom.isTextNode(true), 'booleans are not text nodes');
+  assert.notOk(Dom.isTextNode({}), 'objects are not text nodes');
+  assert.notOk(Dom.isTextNode([]), 'arrays are not text nodes');
+  assert.notOk(Dom.isTextNode('hola mundo'), 'strings are not text nodes');
+  assert.ok(Dom.isTextNode(document.createTextNode('hello, world!')), 'text nodes are text nodes');
+  assert.ok(Dom.isTextNode({nodeType: 3}), 'duck typing is imperfect');
+});
+
+test('Dom.emptyEl', function(assert) {
+  let el = Dom.createEl();
+
+  el.appendChild(Dom.createEl('span'));
+  el.appendChild(Dom.createEl('span'));
+  el.appendChild(document.createTextNode('hola mundo'));
+  el.appendChild(Dom.createEl('span'));
+
+  Dom.emptyEl(el);
+
+  assert.expect(1);
+  assert.notOk(el.firstChild, 'the element was emptied');
+});
+
+test('Dom.normalizeContent: strings and elements/nodes', function(assert) {
+  assert.expect(8);
+
+  let str = Dom.normalizeContent('hello');
+  assert.strictEqual(str[0].data, 'hello', 'single string becomes a text node');
+
+  let elem = Dom.normalizeContent(Dom.createEl());
+  assert.ok(Dom.isEl(elem[0]), 'an element is passed through');
+
+  let node = Dom.normalizeContent(document.createTextNode('goodbye'));
+  assert.strictEqual(node[0].data, 'goodbye', 'a text node is passed through');
+
+  assert.strictEqual(Dom.normalizeContent(null).length, 0, 'falsy values are ignored');
+  assert.strictEqual(Dom.normalizeContent(false).length, 0, 'falsy values are ignored');
+  assert.strictEqual(Dom.normalizeContent().length, 0, 'falsy values are ignored');
+  assert.strictEqual(Dom.normalizeContent(123).length, 0, 'numbers are ignored');
+  assert.strictEqual(Dom.normalizeContent({}).length, 0, 'objects are ignored');
+});
+
+test('Dom.normalizeContent: functions returning strings and elements/nodes', function(assert) {
+  assert.expect(9);
+
+  let str = Dom.normalizeContent(() => 'hello');
+  assert.strictEqual(str[0].data, 'hello', 'a function can return a string, which becomes a text node');
+
+  let elem = Dom.normalizeContent(() => Dom.createEl());
+  assert.ok(Dom.isEl(elem[0]), 'a function can return an element');
+
+  let node = Dom.normalizeContent(() => document.createTextNode('goodbye'));
+  assert.strictEqual(node[0].data, 'goodbye', 'a function can return a text node');
+
+  assert.strictEqual(Dom.normalizeContent(() => null).length, 0, 'a function CANNOT return falsy values');
+  assert.strictEqual(Dom.normalizeContent(() => false).length, 0, 'a function CANNOT return falsy values');
+  assert.strictEqual(Dom.normalizeContent(() => undefined).length, 0, 'a function CANNOT return falsy values');
+  assert.strictEqual(Dom.normalizeContent(() => 123).length, 0, 'a function CANNOT return numbers');
+  assert.strictEqual(Dom.normalizeContent(() => {}).length, 0, 'a function CANNOT return objects');
+  assert.strictEqual(Dom.normalizeContent(() => (() => null)).length, 0, 'a function CANNOT return a function');
+});
+
+test('Dom.normalizeContent: arrays of strings and objects', function(assert) {
+  assert.expect(7);
+
+  let source = [
+    'hello',
+    {},
+    Dom.createEl(),
+    ['oops'],
+    null,
+    document.createTextNode('goodbye'),
+    () => 'it works'
+  ];
+
+  let result = Dom.normalizeContent(source);
+
+  assert.strictEqual(result[0].data, 'hello', 'an array can include a string normalized to a text node');
+  assert.ok(Dom.isEl(result[1]), 'an array can include an element');
+  assert.strictEqual(result[2].data, 'goodbye', 'an array can include a text node');
+  assert.strictEqual(result[3].data, 'it works', 'an array can include a function, which is invoked');
+  assert.strictEqual(result.indexOf(source[1]), -1, 'an array CANNOT include an object');
+  assert.strictEqual(result.indexOf(source[3]), -1, 'an array CANNOT include an array');
+  assert.strictEqual(result.indexOf(source[4]), -1, 'an array CANNOT include falsy values');
+});
+
+test('Dom.normalizeContent: functions returning arrays', function(assert) {
+  assert.expect(3);
+
+  let arr = [];
+  let result = Dom.normalizeContent(() => ['hello', Function.prototype, arr]);
+
+  assert.strictEqual(result[0].data, 'hello', 'a function can return an array');
+  assert.strictEqual(result.indexOf(Function.prototype), -1, 'a function can return an array, but it CANNOT include a function');
+  assert.strictEqual(result.indexOf(arr), -1, 'a function can return an array, but it CANNOT include an array');
+});
+
+test('Dom.insertContent', function(assert) {
+  let p = Dom.createEl('p');
+  let text = document.createTextNode('hello');
+  let el = Dom.insertContent(Dom.createEl(), [p, text]);
+
+  assert.expect(2);
+  assert.strictEqual(el.firstChild, p, 'the paragraph was inserted first');
+  assert.strictEqual(el.firstChild.nextSibling, text, 'the text node was inserted last');
+});
+
+test('Dom.appendContent', function(assert) {
+  let p1 = Dom.createEl('p');
+  let p2 = Dom.createEl('p');
+  let el = Dom.insertContent(Dom.createEl(), [p1]);
+
+  Dom.appendContent(el, p2);
+
+  assert.expect(2);
+  assert.strictEqual(el.firstChild, p1, 'the first paragraph is the first child');
+  assert.strictEqual(el.firstChild.nextSibling, p2, 'the second paragraph was appended');
+});
+
+

From fa16f3d3e7be22263e57f3067cf04c2a15762fa4 Mon Sep 17 00:00:00 2001
From: Pat O'Neill <pgoneill@gmail.com>
Date: Tue, 27 Oct 2015 16:54:28 -0400
Subject: [PATCH 32/36] Style tweaks and better close button handling.

---
 src/css/components/_modal-dialog.scss |  3 +++
 src/js/modal-dialog.js                | 19 +++++++++++++------
 2 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/src/css/components/_modal-dialog.scss b/src/css/components/_modal-dialog.scss
index 185822c11a..105b8ab720 100644
--- a/src/css/components/_modal-dialog.scss
+++ b/src/css/components/_modal-dialog.scss
@@ -5,5 +5,8 @@
 
 .vjs-modal-dialog .vjs-modal-dialog-content {
   @extend %fill-parent;
+
+  font-size: 1.2em; // 12px
+  padding: 2.5em; // 30px
   z-index: 1;
 }
diff --git a/src/js/modal-dialog.js b/src/js/modal-dialog.js
index df4165d7c9..833b1e329e 100644
--- a/src/js/modal-dialog.js
+++ b/src/js/modal-dialog.js
@@ -250,12 +250,20 @@ class ModalDialog extends Component {
       let closeable = this.closeable_ = !!value;
       let close = this.getChild('closeButton');
 
-      if (closeable) {
-        if (!close) {
-          close = this.addChild('closeButton');
-        }
+      // If this is being made closeable and has no close button, add one.
+      if (closeable && !close) {
+
+        // The close button should be a child of the modal - not its
+        // content element, so temporarily change the content element.
+        let temp = this.contentEl_;
+        this.contentEl_ = this.el_;
+        close = this.addChild('closeButton');
+        this.contentEl_ = temp;
         this.on(close, 'close', this.close);
-      } else if (close) {
+      }
+
+      // If this is being made uncloseable and has a close button, remove it.
+      if (!closeable && close) {
         this.off(close, 'close', this.close);
         this.removeChild(close);
         close.dispose();
@@ -357,7 +365,6 @@ class ModalDialog extends Component {
  * @private
  */
 ModalDialog.prototype.options_ = {
-  children: ['closeButton'],
   temporary: true
 };
 

From 02947ede54c8b059f14172d3baac11153d731a4a Mon Sep 17 00:00:00 2001
From: Pat O'Neill <pgoneill@gmail.com>
Date: Tue, 27 Oct 2015 17:02:23 -0400
Subject: [PATCH 33/36] Remove most of the error-display CSS

---
 src/css/components/_error.scss        | 46 +--------------------------
 src/css/components/_modal-dialog.scss |  3 +-
 2 files changed, 3 insertions(+), 46 deletions(-)

diff --git a/src/css/components/_error.scss b/src/css/components/_error.scss
index 135f2dfaab..97963c354e 100644
--- a/src/css/components/_error.scss
+++ b/src/css/components/_error.scss
@@ -1,48 +1,4 @@
-.vjs-error-display {
-  display: none;
-}
-
-.vjs-error .vjs-error-display {
-  display: block;
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-}
-
-.vjs-error .vjs-error-display:before {
-  content: 'X';
-  font-family: $text-font-family;
-  font-size: 4em;
-  color: #fff;
-  /* In order to center the play icon vertically we need to set the line height
-  to the same as the button height */
-  line-height: 1;
-  text-shadow: 0.05em 0.05em 0.1em #000;
-  text-align: center /* Needed for IE8 */;
-  vertical-align: middle;
-
-  position: absolute;
-  left: 0;
-  top: 50%;
-  margin-top: -0.5em;
-  width: 100%;
-}
-
-.vjs-error-display div {
-  position: absolute;
-  bottom: 1em;
-  right: 0;
-  left: 0;
+.video-js .vjs-error-display .vjs-modal-dialog-content {
   font-size: 1.4em;
   text-align: center;
-  padding: 3px;
-
-  @include background-color-with-alpha(#000, 0.5);
-}
-
-.vjs-error-display a,
-.vjs-error-display a:visited {
-  color: #66A8CC;
 }
diff --git a/src/css/components/_modal-dialog.scss b/src/css/components/_modal-dialog.scss
index 105b8ab720..e8acf48b5c 100644
--- a/src/css/components/_modal-dialog.scss
+++ b/src/css/components/_modal-dialog.scss
@@ -7,6 +7,7 @@
   @extend %fill-parent;
 
   font-size: 1.2em; // 12px
-  padding: 2.5em; // 30px
+  line-height: 1.5; // 18px
+  padding: 30px;
   z-index: 1;
 }

From cd48015ec8061efe95e5b7de2565e977402b6014 Mon Sep 17 00:00:00 2001
From: Pat O'Neill <pgoneill@gmail.com>
Date: Tue, 27 Oct 2015 17:19:49 -0400
Subject: [PATCH 34/36] Use proper videojs-font version

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 1cbe36d387..7f1dd41958 100644
--- a/package.json
+++ b/package.json
@@ -28,7 +28,7 @@
     "object.assign": "^4.0.1",
     "safe-json-parse": "^4.0.0",
     "tsml": "1.0.1",
-    "videojs-font": "git+https://github.com/videojs/font.git#182aa4c2ee46cca7ca00155c4cdbd89acbad5a65",
+    "videojs-font": "1.4.0",
     "videojs-ie8": "1.1.0",
     "videojs-swf": "5.0.0-rc1",
     "vtt.js": "git+https://github.com/gkatsev/vtt.js.git#vjs-v0.12.1",

From d78686701ce1b87f434dadf1b7daf39184dc3457 Mon Sep 17 00:00:00 2001
From: Pat O'Neill <pgoneill@gmail.com>
Date: Wed, 28 Oct 2015 11:16:11 -0400
Subject: [PATCH 35/36] Make appendContent/insertContent better

---
 src/js/utils/dom.js | 17 +++++++----------
 1 file changed, 7 insertions(+), 10 deletions(-)

diff --git a/src/js/utils/dom.js b/src/js/utils/dom.js
index f8a09b4020..8d5da2eb58 100644
--- a/src/js/utils/dom.js
+++ b/src/js/utils/dom.js
@@ -470,30 +470,27 @@ export function normalizeContent(content) {
 }
 
 /**
- * Normalizes and inserts content into an element.
+ * Normalizes and appends content to an element.
  *
- * @function insertContent
+ * @function appendContent
  * @param    {Element} el
  * @param    {String|Element|Array|Function} content
- * @param    {Boolean} [append=false]
  * @return   {Element}
  */
-export function insertContent(el, content, append=false) {
-  if (!append) {
-    emptyEl(el);
-  }
+export function appendContent(el, content) {
   normalizeContent(content).forEach(node => el.appendChild(node));
   return el;
 }
 
 /**
- * Normalizes and inserts content into an element.
+ * Normalizes and inserts content into an element; this is identical to
+ * `appendContent()`, except it empties the element first.
  *
  * @function insertContent
  * @param    {Element} el
  * @param    {String|Element|Array|Function} content
  * @return   {Element}
  */
-export function appendContent(el, content) {
-  return insertContent(el, content, true);
+export function insertContent(el, content) {
+  return appendContent(emptyEl(el), content);
 }

From 5e94d293fe46bb388a5abf4a130b72b17b38919b Mon Sep 17 00:00:00 2001
From: Pat O'Neill <pgoneill@gmail.com>
Date: Wed, 28 Oct 2015 13:20:51 -0400
Subject: [PATCH 36/36] Restore error display 'X'

---
 src/css/components/_error.scss | 21 ++++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/src/css/components/_error.scss b/src/css/components/_error.scss
index 97963c354e..e81b634244 100644
--- a/src/css/components/_error.scss
+++ b/src/css/components/_error.scss
@@ -1,4 +1,23 @@
-.video-js .vjs-error-display .vjs-modal-dialog-content {
+.vjs-error .vjs-error-display .vjs-modal-dialog-content {
   font-size: 1.4em;
   text-align: center;
 }
+
+.vjs-error .vjs-error-display:before {
+  color: #fff;
+  content: 'X';
+  font-family: $text-font-family;
+  font-size: 4em;
+  left: 0;
+
+  // In order to center the play icon vertically we need to set the line height
+  // to the same as the button height
+  line-height: 1;
+  margin-top: -0.5em;
+  position: absolute;
+  text-shadow: 0.05em 0.05em 0.1em #000;
+  text-align: center; // Needed for IE8
+  top: 50%;
+  vertical-align: middle;
+  width: 100%;
+}