Merge pull request #1838 from mmcc/feature/control-bar-separator

Feature/control bar separator

src/js/control-bar/control-bar.js

@@ -17,6 +17,7 @@ import ChaptersButton from './text-track-controls/chapters-button.js';
 import SubtitlesButton from './text-track-controls/subtitles-button.js';
 import CaptionsButton from './text-track-controls/captions-button.js';
 import PlaybackRateMenuButton from './playback-rate-menu/playback-rate-menu-button.js';
+import CustomControlSpacer from './spacer-controls/custom-control-spacer.js';
 
 /**
  * Container of main controls
@@ -44,6 +45,7 @@ ControlBar.prototype.options_ = {
     'remainingTimeDisplay': {},
     'liveDisplay': {},
     'progressControl': {},
+    'customControlSpacer': {},
     'fullscreenToggle': {},
     'volumeControl': {},
     'muteToggle': {},

src/js/control-bar/progress-control/seek-handle.js

@@ -18,7 +18,7 @@ class SeekHandle extends SliderHandle {
 
   /** @inheritDoc */
   createEl() {
-    return super.createEl.call('div', {
+    return super.createEl('div', {
       className: 'vjs-seek-handle',
       'aria-live': 'off'
     });

src/js/control-bar/spacer-controls/custom-control-spacer.js

@@ -0,0 +1,23 @@
+import Spacer from './spacer.js';
+
+/**
+ * Spacer specifically meant to be used as an insertion point for new plugins, etc.
+ *
+ * @param {Player|Object} player
+ * @param {Obect=} options
+ */
+class CustomControlSpacer extends Spacer {
+  buildCSSClass() {
+    return `vjs-custom-control-spacer ${super.buildCSSClass}`;
+  }
+
+  createEl() {
+    return super.createEl({
+      className: this.buildCSSClass()
+    });
+  }
+}
+
+Spacer.registerComponent('CustomControlSpacer', CustomControlSpacer);
+
+export default CustomControlSpacer;

src/js/control-bar/spacer-controls/spacer.js

@@ -0,0 +1,24 @@
+import Component from '../../component.js';
+
+/**
+ * Just an empty spacer element that can be used as an append point for plugins, etc.
+ * Also can be used to create space between elements when necessary.
+ *
+ * @param {Player|Object} player
+ * @param {Object=} options
+ */
+class Spacer extends Component {
+  buildCSSClass() {
+    return `vjs-spacer ${super.buildCSSClass()}`;
+  }
+
+  createEl(props) {
+    return super.createEl('div', {
+      className: this.buildCSSClass()
+    });
+  }
+}
+
+Component.registerComponent('Spacer', Spacer);
+
+export default Spacer;