Merge pull request #1593 from markmatney/enable-mediacontrol-configur…

…ation enable MediaControl configuration after player creation
clappr · Mar 14, 2018 · 1e5df5d · 1e5df5d
2 parents 3491400 + c0de5e3
commit 1e5df5d
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 0 deletions.
diff --git a/src/base/events.js b/src/base/events.js
@@ -795,3 +795,9 @@ Events.MEDIACONTROL_NOTPLAYING = 'mediacontrol:notplaying'
  * @event MEDIACONTROL_CONTAINERCHANGED
  */
 Events.MEDIACONTROL_CONTAINERCHANGED = 'mediacontrol:containerchanged'
+/**
+ * Fired when the options were changed for the mediacontrol
+ *
+ * @event MEDIACONTROL_OPTIONS_CHANGE
+ */
+Events.MEDIACONTROL_OPTIONS_CHANGE = 'mediacontrol:options:change'
diff --git a/src/components/core/core.js b/src/components/core/core.js
@@ -346,6 +346,7 @@ export default class Core extends UIObject {
     this.containers.forEach((container) => {
       container.configure(this.options)
     })
+    this.mediaControl.configure(this.options)
   }
 
   appendToParent() {

diff --git a/src/components/media_control/media_control.js b/src/components/media_control/media_control.js
@@ -644,6 +644,16 @@ export default class MediaControl extends UIObject {
     this.unbindKeyEvents()
   }
 
+  /**
+   * enables to configure the media control after its creation
+   * @method configure
+   * @param {Object} options all the options to change in form of a javascript object
+   */
+  configure(options) {
+    this._options = $.extend(this._options, options)
+    this.trigger(Events.MEDIACONTROL_OPTIONS_CHANGE)
+  }
+
   render() {
     const timeout = 1000
     this.$el.html(this.template({ settings: this.settings }))

diff --git a/test/components/media_control_spec.js b/test/components/media_control_spec.js
@@ -156,4 +156,16 @@ describe('MediaControl', function() {
       )
     })
   })
+
+  it('can be configured after its creation', function() {
+    expect(this.mediaControl._options.hideMediaControl).to.be.undefined
+    expect(this.mediaControl._options.mediacontrol).to.be.undefined
+
+    this.mediaControl.configure({ hideMediaControl: false, mediacontrol: { seekbar: '#E113D3', buttons: '#66B2FF' } })
+    expect(this.mediaControl._options.hideMediaControl).to.be.false
+    expect(this.mediaControl._options.mediacontrol).not.to.be.undefined
+
+    this.mediaControl.configure({ hideMediaControl: true })
+    expect(this.mediaControl._options.hideMediaControl).to.be.true
+  })
 })