feat: Allow choosing the placement of overlay elements in the control bar.

Author: bc-paul

README.md

@@ -46,12 +46,16 @@ Whether or not to include background styling & padding around the overlay.
 
 #### `attachToControlBar`
 
-__Type:__ `Boolean`
+__Type:__ `Boolean`, `String`
 __Default:__ `false`
 
 _This setting can be overridden by being set on individual overlay objects._
 
-If set to true, bottom aligned overlays will adjust positioning when the control bar minimizes. This has no effect on overlays that are not aligned to bottom, bottom-left, or bottom-right. For use with the default control bar, it may not work for custom control bars.
+If set to `true` or a `string` value, bottom aligned overlays will adjust positioning when the control bar minimizes. This has no effect on overlays that are not aligned to bottom, bottom-left, or bottom-right. For use with the default control bar, it may not work for custom control bars.
+
+The value of `string` must be the name of a ControlBar component.
+
+Bottom aligned overlays will be inserted before the specified component. Otherwise, bottom aligned overlays are inserted before the first child component of the ControlBar. All other overlays are inserted before the ControlBar component.
 
 #### `class`
 

src/plugin.js

@@ -321,16 +321,37 @@ const plugin = function(options) {
 
   this.overlays_ = overlays.map(o => {
     const mergeOptions = videojs.mergeOptions(settings, o);
+    const attachToControlBar = typeof mergeOptions.attachToControlBar === 'string' || mergeOptions.attachToControlBar === true;
 
-    // Attach bottom aligned overlays to the control bar so
-    // they will adjust positioning when the control bar minimizes
-    if (mergeOptions.attachToControlBar &&
-        this.controlBar &&
-        mergeOptions.align.indexOf('bottom') !== -1) {
-      return this.controlBar.addChild('overlay', mergeOptions);
+    if (!this.controls() || !this.controlBar) {
+      return this.addChild('overlay', mergeOptions);
     }
 
-    return this.addChild('overlay', mergeOptions);
+    if (attachToControlBar && mergeOptions.align.indexOf('bottom') !== -1) {
+      let referenceChild = this.controlBar.children()[0];
+
+      if (this.controlBar.getChild(mergeOptions.attachToControlBar) !== undefined) {
+        referenceChild = this.controlBar.getChild(mergeOptions.attachToControlBar);
+      }
+
+      if (referenceChild) {
+        const controlBarChild = this.controlBar.addChild('overlay', mergeOptions);
+
+        this.controlBar.el().insertBefore(
+          controlBarChild.el(),
+          referenceChild.el()
+        );
+        return controlBarChild;
+      }
+    }
+
+    const playerChild = this.addChild('overlay', mergeOptions);
+
+    this.el().insertBefore(
+      playerChild.el(),
+      this.controlBar.el()
+    );
+    return playerChild;
   });
 };
 

test/plugin.test.js

@@ -28,6 +28,7 @@ QUnit.module('videojs-overlay', {
 
     this.fixture = document.getElementById('qunit-fixture');
     this.video = document.createElement('video');
+    this.video.controls = true;
     this.fixture.appendChild(this.video);
     this.player = videojs(this.video);
 
@@ -663,3 +664,146 @@ QUnit.test('can deinitialize the plugin on reinitialization', function(assert) {
     'new top-left overlay added'
   );
 });
+
+QUnit.test('attach bottom overlay as first child when attachToControlBar is invalid component', function(assert) {
+  assert.expect(1);
+
+  this.player.overlay({
+    attachToControlBar: 'InvalidComponent',
+    overlays: [{
+      start: 'start',
+      align: 'bottom'
+    }]
+  });
+
+  this.player.trigger('start');
+
+  assert.equal(
+    this.player.$('.vjs-overlay.vjs-overlay-bottom'),
+    this.player.controlBar.el().firstChild,
+    'bottom attaches as first child of controlBar'
+  );
+});
+
+QUnit.test('attach top overlay as previous sibling when attachToControlBar is invalid component', function(assert) {
+  assert.expect(1);
+
+  this.player.overlay({
+    attachToControlBar: 'InvalidComponent',
+    overlays: [{
+      start: 'start',
+      align: 'top'
+    }]
+  });
+
+  this.player.trigger('start');
+
+  assert.equal(
+    this.player.$('.vjs-overlay.vjs-overlay-top'),
+    this.player.controlBar.el().previousSibling,
+    'top attaches as previous sibiling of controlBar'
+  );
+});
+
+QUnit.test('attach overlays when attachToControlBar is true', function(assert) {
+  assert.expect(4);
+
+  this.player.overlay({
+    attachToControlBar: true,
+    overlays: [{
+      start: 'start',
+      align: 'bottom'
+    }]
+  });
+
+  this.player.trigger('start');
+
+  assert.equal(
+    this.player.controlBar.$('.vjs-overlay.vjs-overlay-bottom'),
+    this.player.controlBar.el().firstChild,
+    'bottom attaches as first child of control bar'
+  );
+
+  this.player.overlay({
+    attachToControlBar: true,
+    overlays: [{
+      start: 'start',
+      align: 'top'
+    }]
+  });
+
+  this.player.trigger('start');
+
+  assert.equal(
+    this.player.$('.vjs-overlay.vjs-overlay-top'),
+    this.player.controlBar.el().previousSibling,
+    'top attaches as previous sibiling of controlBar'
+  );
+
+  this.player.overlay({
+    attachToControlBar: 'RemainingTimeDisplay',
+    overlays: [{
+      start: 'start',
+      align: 'bottom'
+    }]
+  });
+
+  this.player.trigger('start');
+
+  assert.equal(
+    this.player.controlBar.$('.vjs-overlay.vjs-overlay-bottom'),
+    this.player.controlBar.remainingTimeDisplay.el().previousSibling,
+    'bottom attaches as previous sibiling of attachToControlBar component'
+  );
+
+  this.player.overlay({
+    attachToControlBar: 'RemainingTimeDisplay',
+    overlays: [{
+      start: 'start',
+      align: 'top'
+    }]
+  });
+
+  this.player.trigger('start');
+
+  assert.equal(
+    this.player.$('.vjs-overlay.vjs-overlay-top'),
+    this.player.controlBar.el().previousSibling,
+    'top attaches as previous sibiling of controlBar when using attachToControlBar component'
+  );
+});
+
+QUnit.test('attach overlays as last child when no controls are present', function(assert) {
+  assert.expect(2);
+  this.player.controls(false);
+
+  this.player.overlay({
+    overlays: [{
+      start: 'start',
+      align: 'bottom'
+    }]
+  });
+
+  this.player.trigger('start');
+
+  assert.equal(
+    this.player.$('.vjs-overlay.vjs-overlay-bottom'),
+    this.player.el().lastChild,
+    'bottom attaches as last child of player'
+  );
+
+  this.player.overlay({
+    overlays: [{
+      start: 'start',
+      align: 'top'
+    }]
+  });
+
+  this.player.trigger('start');
+
+  assert.equal(
+    this.player.$('.vjs-overlay.vjs-overlay-top'),
+    this.player.el().lastChild,
+    'top attaches as last child of player'
+  );
+});