feat: update exposed utility functions and deprecate several top-leve…

…l methods of the videojs global (#7761)

package.json

@@ -99,7 +99,6 @@
   },
   "devDependencies": {
     "@babel/core": "^7.9.0",
-    "@babel/plugin-transform-object-assign": "^7.8.3",
     "@babel/plugin-transform-runtime": "^7.9.0",
     "@babel/preset-env": "^7.9.0",
     "@rollup/plugin-replace": "^2.4.1",

rollup.config.js

@@ -77,7 +77,6 @@ const primedBabel = babel({
     }]
   ],
   plugins: [
-    '@babel/plugin-transform-object-assign',
     ['@babel/plugin-transform-runtime', {regenerator: false}]
   ]
 });

src/js/button.js

@@ -4,7 +4,6 @@
 import ClickableComponent from './clickable-component.js';
 import Component from './component';
 import log from './utils/log.js';
-import {assign} from './utils/obj';
 import keycode from 'keycode';
 import {createEl} from './utils/dom.js';
 
@@ -34,12 +33,12 @@ class Button extends ClickableComponent {
   createEl(tag, props = {}, attributes = {}) {
     tag = 'button';
 
-    props = assign({
+    props = Object.assign({
       className: this.buildCSSClass()
     }, props);
 
     // Add attributes for button element
-    attributes = assign({
+    attributes = Object.assign({
 
       // Necessary since the default button type is "submit"
       type: 'button'

src/js/clickable-component.js

@@ -4,7 +4,6 @@
 import Component from './component';
 import * as Dom from './utils/dom.js';
 import log from './utils/log.js';
-import {assign} from './utils/obj';
 import keycode from 'keycode';
 
 /**
@@ -68,7 +67,7 @@ class ClickableComponent extends Component {
    *         The element that gets created.
    */
   createEl(tag = 'div', props = {}, attributes = {}) {
-    props = assign({
+    props = Object.assign({
       className: this.buildCSSClass(),
       tabIndex: 0
     }, props);
@@ -78,7 +77,7 @@ class ClickableComponent extends Component {
     }
 
     // Add ARIA attributes for clickable element which is not a native HTML button
-    attributes = assign({
+    attributes = Object.assign({
       role: 'button'
     }, attributes);
 

src/js/component.js

@@ -9,9 +9,8 @@ import stateful from './mixins/stateful';
 import * as Dom from './utils/dom.js';
 import * as Fn from './utils/fn.js';
 import * as Guid from './utils/guid.js';
-import {toTitleCase, toLowerCase} from './utils/string-cases.js';
-import mergeOptions from './utils/merge-options.js';
-import computedStyle from './utils/computed-style';
+import {toTitleCase, toLowerCase} from './utils/str.js';
+import {merge} from './utils/obj.js';
 import Map from './utils/map.js';
 import Set from './utils/set.js';
 import keycode from 'keycode';
@@ -69,10 +68,10 @@ class Component {
     this.parentComponent_ = null;
 
     // Make a copy of prototype.options_ to protect against overriding defaults
-    this.options_ = mergeOptions({}, this.options_);
+    this.options_ = merge({}, this.options_);
 
     // Updated options with supplied options
-    options = this.options_ = mergeOptions(this.options_, options);
+    options = this.options_ = merge(this.options_, options);
 
     // Get ID from options or options element if one is supplied
     this.id_ = options.id || (options.el && options.el.id);
@@ -222,7 +221,7 @@ class Component {
   /**
    * Deep merge of options objects with new options.
    * > Note: When both `obj` and `options` contain properties whose values are objects.
-   *         The two properties get merged using {@link module:mergeOptions}
+   *         The two properties get merged using {@link module:obj.merge}
    *
    * @param {Object} obj
    *        The object that contains new options.
@@ -235,7 +234,7 @@ class Component {
       return this.options_;
     }
 
-    this.options_ = mergeOptions(this.options_, obj);
+    this.options_ = merge(this.options_, obj);
     return this.options_;
   }
 
@@ -1081,7 +1080,7 @@ class Component {
       throw new Error('currentDimension only accepts width or height value');
     }
 
-    computedWidthOrHeight = computedStyle(this.el_, widthOrHeight);
+    computedWidthOrHeight = Dom.computedStyle(this.el_, widthOrHeight);
 
     // remove 'px' from variable and parse as integer
     computedWidthOrHeight = parseFloat(computedWidthOrHeight);

src/js/control-bar/progress-control/load-progress-bar.js

@@ -3,7 +3,7 @@
  */
 import Component from '../../component.js';
 import * as Dom from '../../utils/dom.js';
-import clamp from '../../utils/clamp';
+import {clamp} from '../../utils/num';
 import document from 'global/document';
 
 // get the percent width of a time compared to the total end

src/js/control-bar/progress-control/progress-control.js

@@ -3,7 +3,7 @@
  */
 import Component from '../../component.js';
 import * as Dom from '../../utils/dom.js';
-import clamp from '../../utils/clamp.js';
+import {clamp} from '../../utils/num.js';
 import {bind, throttle, UPDATE_REFRESH_INTERVAL} from '../../utils/fn.js';
 import {silencePromise} from '../../utils/promise';
 

src/js/control-bar/progress-control/seek-bar.js

@@ -6,7 +6,7 @@ import Component from '../../component.js';
 import {IS_IOS, IS_ANDROID} from '../../utils/browser.js';
 import * as Dom from '../../utils/dom.js';
 import * as Fn from '../../utils/fn.js';
-import formatTime from '../../utils/format-time.js';
+import {formatTime} from '../../utils/time.js';
 import {silencePromise} from '../../utils/promise';
 import keycode from 'keycode';
 import document from 'global/document';

src/js/control-bar/progress-control/time-tooltip.js

@@ -3,7 +3,7 @@
  */
 import Component from '../../component';
 import * as Dom from '../../utils/dom.js';
-import formatTime from '../../utils/format-time.js';
+import {formatTime} from '../../utils/time.js';
 import * as Fn from '../../utils/fn.js';
 
 /**

src/js/control-bar/text-track-controls/chapters-button.js

@@ -4,7 +4,7 @@
 import TextTrackButton from './text-track-button.js';
 import Component from '../../component.js';
 import ChaptersTrackMenuItem from './chapters-track-menu-item.js';
-import {toTitleCase} from '../../utils/string-cases.js';
+import {toTitleCase} from '../../utils/str.js';
 
 /**
  * The button component for toggling and selecting chapters

src/js/control-bar/text-track-controls/subs-caps-button.js

@@ -5,7 +5,7 @@ import TextTrackButton from './text-track-button.js';
 import Component from '../../component.js';
 import CaptionSettingsMenuItem from './caption-settings-menu-item.js';
 import SubsCapsMenuItem from './subs-caps-menu-item.js';
-import {toTitleCase} from '../../utils/string-cases.js';
+import {toTitleCase} from '../../utils/str.js';
 /**
  * The button component for toggling and selecting captions and/or subtitles
  *

src/js/control-bar/time-controls/time-display.js

@@ -4,7 +4,7 @@
 import document from 'global/document';
 import Component from '../../component.js';
 import * as Dom from '../../utils/dom.js';
-import formatTime from '../../utils/format-time.js';
+import {formatTime} from '../../utils/time.js';
 import log from '../../utils/log.js';
 
 /**

src/js/control-bar/volume-control/volume-bar.js

@@ -4,7 +4,7 @@
 import Slider from '../../slider/slider.js';
 import Component from '../../component.js';
 import * as Dom from '../../utils/dom.js';
-import clamp from '../../utils/clamp.js';
+import {clamp} from '../../utils/num.js';
 import {IS_IOS, IS_ANDROID} from '../../utils/browser.js';
 
 // Required children

src/js/live-tracker.js

@@ -1,5 +1,5 @@
 import Component from './component.js';
-import mergeOptions from './utils/merge-options.js';
+import {merge} from './utils/obj.js';
 import window from 'global/window';
 import * as Fn from './utils/fn.js';
 
@@ -38,7 +38,7 @@ class LiveTracker extends Component {
    */
   constructor(player, options) {
     // LiveTracker does not need an element
-    const options_ = mergeOptions(defaults, options, {createEl: false});
+    const options_ = merge(defaults, options, {createEl: false});
 
     super(player, options_);
 

src/js/loading-spinner.js

@@ -2,7 +2,7 @@
  * @file loading-spinner.js
  */
 import Component from './component';
-import * as dom from './utils/dom';
+import * as Dom from './utils/dom';
 
 /**
  * A loading spinner for use during waiting/loading events.
@@ -20,7 +20,7 @@ class LoadingSpinner extends Component {
   createEl() {
     const isAudio = this.player_.isAudio();
     const playerType = this.localize(isAudio ? 'Audio Player' : 'Video Player');
-    const controlText = dom.createEl('span', {
+    const controlText = Dom.createEl('span', {
       className: 'vjs-control-text',
       textContent: this.localize('{1} is loading.', [playerType])
     });

src/js/media-error.js

@@ -1,7 +1,7 @@
 /**
  * @file media-error.js
  */
-import {assign, isObject} from './utils/obj';
+import {isObject} from './utils/obj';
 
 /**
  * A Custom `MediaError` class which mimics the standard HTML5 `MediaError` class.
@@ -41,7 +41,7 @@ function MediaError(value) {
       this.code = value.code;
     }
 
-    assign(this, value);
+    Object.assign(this, value);
   }
 
   if (!this.message) {

src/js/menu/menu-button.js

@@ -6,7 +6,7 @@ import Component from '../component.js';
 import Menu from './menu.js';
 import * as Dom from '../utils/dom.js';
 import * as Events from '../utils/events.js';
-import {toTitleCase} from '../utils/string-cases.js';
+import {toTitleCase} from '../utils/str.js';
 import { IS_IOS } from '../utils/browser.js';
 import document from 'global/document';
 import keycode from 'keycode';

src/js/menu/menu-item.js

@@ -3,7 +3,6 @@
  */
 import ClickableComponent from '../clickable-component.js';
 import Component from '../component.js';
-import {assign} from '../utils/obj';
 import {MenuKeys} from './menu-keys.js';
 import keycode from 'keycode';
 import {createEl} from '../utils/dom.js';
@@ -64,7 +63,7 @@ class MenuItem extends ClickableComponent {
     // The control is textual, not just an icon
     this.nonIconControl = true;
 
-    const el = super.createEl('li', assign({
+    const el = super.createEl('li', Object.assign({
       className: 'vjs-menu-item',
       tabIndex: -1
     }, props), attrs);

src/js/mixins/evented.js

@@ -6,7 +6,6 @@ import window from 'global/window';
 import * as Dom from '../utils/dom';
 import * as Events from '../utils/events';
 import * as Fn from '../utils/fn';
-import * as Obj from '../utils/obj';
 import EventTarget from '../event-target';
 import DomData from '../utils/dom-data';
 
@@ -482,7 +481,7 @@ function evented(target, options = {}) {
     target.eventBusEl_ = Dom.createEl('span', {className: 'vjs-event-bus'});
   }
 
-  Obj.assign(target, EventedMixin);
+  Object.assign(target, EventedMixin);
 
   if (target.eventedCallbacks) {
     target.eventedCallbacks.forEach((callback) => {

src/js/mixins/stateful.js

@@ -103,11 +103,11 @@ const StatefulMixin = {
  *          Returns the `target`.
  */
 function stateful(target, defaultState) {
-  Obj.assign(target, StatefulMixin);
+  Object.assign(target, StatefulMixin);
 
   // This happens after the mixing-in because we need to replace the `state`
   // added in that step.
-  target.state = Obj.assign({}, target.state, defaultState);
+  target.state = Object.assign({}, target.state, defaultState);
 
   // Auto-bind the `handleStateChanged` method of the target object if it exists.
   if (typeof target.handleStateChanged === 'function' && isEvented(target)) {