From 493f4d5df47797740c42fe2ecbf4680266cb6e8e Mon Sep 17 00:00:00 2001 From: Matthew McClure Date: Fri, 30 Jan 2015 19:06:36 +0100 Subject: [PATCH 1/2] Created generic spacer component meant to make it easier to create control bar layouts --- src/js/control-bar/control-bar.js | 1 + src/js/control-bar/separator.js | 20 ++++++++++++++++++++ 2 files changed, 21 insertions(+) create mode 100644 src/js/control-bar/separator.js diff --git a/src/js/control-bar/control-bar.js b/src/js/control-bar/control-bar.js index e7a59a7002..75f045f19e 100644 --- a/src/js/control-bar/control-bar.js +++ b/src/js/control-bar/control-bar.js @@ -44,6 +44,7 @@ ControlBar.prototype.options_ = { 'remainingTimeDisplay': {}, 'liveDisplay': {}, 'progressControl': {}, + // 'separator': {}, 'fullscreenToggle': {}, 'volumeControl': {}, 'muteToggle': {}, diff --git a/src/js/control-bar/separator.js b/src/js/control-bar/separator.js new file mode 100644 index 0000000000..a1b6391add --- /dev/null +++ b/src/js/control-bar/separator.js @@ -0,0 +1,20 @@ +/** +* 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' + }); +}; From 4f52a47d7e79732b57d828a43cc7301e165927b3 Mon Sep 17 00:00:00 2001 From: Matthew McClure Date: Mon, 9 Mar 2015 15:51:54 -0700 Subject: [PATCH 2/2] 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 | 3 ++- .../progress-control/seek-handle.js | 2 +- src/js/control-bar/separator.js | 20 ---------------- .../spacer-controls/custom-control-spacer.js | 23 ++++++++++++++++++ src/js/control-bar/spacer-controls/spacer.js | 24 +++++++++++++++++++ 5 files changed, 50 insertions(+), 22 deletions(-) delete mode 100644 src/js/control-bar/separator.js create mode 100644 src/js/control-bar/spacer-controls/custom-control-spacer.js create mode 100644 src/js/control-bar/spacer-controls/spacer.js diff --git a/src/js/control-bar/control-bar.js b/src/js/control-bar/control-bar.js index 75f045f19e..b8a2ebb6b3 100644 --- a/src/js/control-bar/control-bar.js +++ b/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': {}, diff --git a/src/js/control-bar/progress-control/seek-handle.js b/src/js/control-bar/progress-control/seek-handle.js index 5fc57835fe..bccfff7b55 100644 --- a/src/js/control-bar/progress-control/seek-handle.js +++ b/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' }); diff --git a/src/js/control-bar/separator.js b/src/js/control-bar/separator.js deleted file mode 100644 index a1b6391add..0000000000 --- a/src/js/control-bar/separator.js +++ /dev/null @@ -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' - }); -}; diff --git a/src/js/control-bar/spacer-controls/custom-control-spacer.js b/src/js/control-bar/spacer-controls/custom-control-spacer.js new file mode 100644 index 0000000000..0354847043 --- /dev/null +++ b/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; diff --git a/src/js/control-bar/spacer-controls/spacer.js b/src/js/control-bar/spacer-controls/spacer.js new file mode 100644 index 0000000000..86bcc3acc0 --- /dev/null +++ b/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;