generalized separator class and created specific insertion point class

split spacer into two files and converted to es6

insertion-point-spacer  -> custom-control-spacer

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,7 +45,7 @@ ControlBar.prototype.options_ = {
     'remainingTimeDisplay': {},
     'liveDisplay': {},
     'progressControl': {},
-    // 'separator': {},
+    '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/separator.js

@@ -1,20 +0,0 @@
-/**
-* Just an empty separator element that can be used as an append point for plugins, etc.
-* Also can be used to create space between elements when necessary.
-*
-* @param {vjs.Player|Object} player
-* @param {Object=} options
-* @constructor
-*/
-vjs.Separator = vjs.Component.extend({
-  /** @constructor */
-  init: function(player, options){
-    vjs.Component.call(this, player, options);
-  }
-});
-
-vjs.Separator.prototype.createEl = function(){
-  return vjs.Component.prototype.createEl.call(this, 'div', {
-    className: 'vjs-separator-control'
-  });
-};

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;