feat(player): add playerreset event (#5335)

src/js/mixins/evented.js

@@ -23,6 +23,25 @@ const isEvented = (object) =>
   !!object.eventBusEl_ &&
   ['on', 'one', 'off', 'trigger'].every(k => typeof object[k] === 'function');
 
+/**
+ * Adds a callback to run after the evented mixin applied.
+ *
+ * @param  {Object} object
+ *         An object to Add
+ * @param  {Function} callback
+ *         The callback to run.
+ */
+const addEventedCallback = (target, callback) => {
+  if (isEvented(target)) {
+    callback();
+  } else {
+    if (!target.eventedCallbacks) {
+      target.eventedCallbacks = [];
+    }
+    target.eventedCallbacks.push(callback);
+  }
+};
+
 /**
  * Whether a value is a valid event type - non-empty string or array.
  *
@@ -366,6 +385,12 @@ function evented(target, options = {}) {
 
   Obj.assign(target, EventedMixin);
 
+  if (target.eventedCallbacks) {
+    target.eventedCallbacks.forEach((callback) => {
+      callback();
+    });
+  }
+
   // When any evented object is disposed, it removes all its listeners.
   target.on('dispose', () => {
     target.off();
@@ -379,3 +404,4 @@ function evented(target, options = {}) {
 
 export default evented;
 export {isEvented};
+export {addEventedCallback};

src/js/player.js

@@ -9,6 +9,7 @@ import document from 'global/document';
 import window from 'global/window';
 import tsml from 'tsml';
 import evented from './mixins/evented';
+import {isEvented, addEventedCallback} from './mixins/evented';
 import * as Events from './utils/events.js';
 import * as Dom from './utils/dom.js';
 import * as Fn from './utils/fn.js';
@@ -442,6 +443,9 @@ class Player extends Component {
     // Make this an evented object and use `el_` as its event bus.
     evented(this, {eventBusKey: 'el_'});
 
+    if (this.fluid_) {
+      this.on('playerreset', this.updateStyleEl_);
+    }
     // We also want to pass the original player options to each component and plugin
     // as well so they don't need to reach back into the player for options later.
     // We also need to do another copy of this.options_ so we don't end up with
@@ -825,9 +829,15 @@ class Player extends Component {
 
     this.fluid_ = !!bool;
 
+    if (isEvented(this)) {
+      this.off('playerreset', this.updateStyleEl_);
+    }
     if (bool) {
       this.addClass('vjs-fluid');
       this.fill(false);
+      addEventedCallback(function() {
+        this.on('playerreset', this.updateStyleEl_);
+      });
     } else {
       this.removeClass('vjs-fluid');
     }
@@ -2910,6 +2920,9 @@ class Player extends Component {
     }
     this.loadTech_(this.options_.techOrder[0], null);
     this.techCall_('reset');
+    if (isEvented(this)) {
+      this.trigger('playerreset');
+    }
   }
 
   /**