Modal Dialog

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": "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",

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 {
+%fill-parent {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
+}
+
+%icon-default {
+  @extend %fill-parent;
   text-align: center;
 }

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;
+}

src/css/components/_error.scss

@@ -1,48 +1,23 @@
-.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 .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;
-  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;
+  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;
-  left: 0;
+  text-shadow: 0.05em 0.05em 0.1em #000;
+  text-align: center; // Needed for IE8
   top: 50%;
-  margin-top: -0.5em;
+  vertical-align: middle;
   width: 100%;
 }
-
-.vjs-error-display div {
-  position: absolute;
-  bottom: 1em;
-  right: 0;
-  left: 0;
-  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;
-}

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;

src/css/components/_modal-dialog.scss

@@ -0,0 +1,13 @@
+.video-js .vjs-modal-dialog {
+  @extend %fill-parent;
+  @include linear-gradient(180deg, rgba(0, 0, 0, 0.8), rgba(255, 255, 255, 0));
+}
+
+.vjs-modal-dialog .vjs-modal-dialog-content {
+  @extend %fill-parent;
+
+  font-size: 1.2em; // 12px
+  line-height: 1.5; // 18px
+  padding: 30px;
+  z-index: 1;
+}

src/css/utilities/_linear-gradient.scss

@@ -0,0 +1,94 @@
+// 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);
+}

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";
@@ -35,3 +36,4 @@
 @import "components/subtitles";
 @import "components/adaptive";
 @import "components/captions-settings";
+@import "components/modal-dialog";

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-button ${super.buildCSSClass()}`;
+  }
+
+  handleClick() {
+    this.trigger({type: 'close', bubbles: false});
+  }
+}
+
+Component.registerComponent('CloseButton', CloseButton);
+export default CloseButton;

src/js/error-display.js

@@ -2,53 +2,58 @@
  * @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
+   * Include the old class for backward-compatibility.
    *
-   * @return {Element}
-   * @method createEl
+   * This can be removed in 6.0.
+   *
+   * @method buildCSSClass
+   * @deprecated
+   * @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 {String|Null}
    */
-  update() {
-    if (this.player().error()) {
-      this.contentEl_.innerHTML = this.localize(this.player().error().message);
-    }
+  content() {
+    let error = this.player().error();
+    return error ? this.localize(error.message) : '';
   }
 }
 
+ErrorDisplay.prototype.options_ = mergeOptions(ModalDialog.prototype.options_, {
+  fillAlways: true,
+  uncloseable: true
+});
+
 Component.registerComponent('ErrorDisplay', ErrorDisplay);
 export default ErrorDisplay;