perf: utils refactor & cleanup (#595)

* perf: utils refactor (array, assign, playlist utils)

* perf: utils refactor (cloudinary, css-prefix, dom, find)

* perf: utils refactor (cloudinary, css-prefix, dom, find)

* perf: utils refactor (groupBy, matches)

* perf: utils refactor (find, omit, get, object, positioning, tests, playButton)

* chore: bundlesize

* perf: utils refactor (webpack loaders)

* perf: utils refactor (startsWith, camelize)

* perf: utils refactor (throttle, types)

* perf: utils refactor (isObject)

* chore: cleanup

* perf: utils refactor (hasCodec)

* chore: export

Author: tsi

docs/scripts.js

@@ -1,30 +1,5 @@
 /* eslint no-var: "off", vars-on-top: "off", curly: "off", no-extend-native: "off" */
 
-// String.startsWith() polyfill
-if (!String.prototype.startsWith) {
-  String.prototype.startsWith = function (searchString, position) {
-    position = position || 0;
-    return this.substr(position, searchString.length) === searchString;
-  };
-}
-
-// URLSearchParams.get() polyfill
-if (!window.URLSearchParams) {
-  window.URLSearchParams = window.URLSearchParams || function (searchString) {
-    var self = this;
-    self.searchString = searchString;
-    self.get = function (name) {
-      var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(self.searchString);
-
-      if (results === null) {
-        return null;
-      }
-
-      return decodeURI(results[1]) || 0;
-    };
-  };
-}
-
 // true on /localhost or /anything.local
 var isLocal = window.location.hostname === 'localhost' || window.location.hostname.substring(window.location.hostname.lastIndexOf('.', window.location.hostname.lastIndexOf('.')) + 1) === 'local';
 

package.json

@@ -61,7 +61,7 @@
       },
       {
         "path": "./dist/cld-video-player.light.min.js",
-        "maxSize": "125kb"
+        "maxSize": "130kb"
       },
       {
         "path": "./lib/cld-video-player.js",

src/components/qualitySelector/qualitySelector.js

@@ -1,6 +1,5 @@
 /* global dashjs */
 import '../../plugins/videojs-http-source-selector/plugin';
-import { findIndex } from '../../utils/find';
 
 import './quality-selector.scss';
 
@@ -59,7 +58,7 @@ const qualitySelector = {
                   if (val !== undefined) {
                     this.selected = val;
                     if (val === true) {
-                      let selectedIdx = findIndex(player.qualityLevels().levels_, (l => l.id === this.id));
+                      const selectedIdx = player.qualityLevels().levels_?.findIndex(l => l.id === this.id);
                       player.qualityLevels().selectedIndex_ = selectedIdx;
                       player.qualityLevels().trigger({
                         type: 'change',

src/components/shoppable-bar/layout/bar-layout.js

@@ -1,6 +1,5 @@
 
 import videojs from 'video.js';
-import { elMatches } from 'utils/matches';
 
 const dom = videojs.dom || videojs;
 const Component = videojs.getComponent('Component');
@@ -84,7 +83,7 @@ class ShoppableBarLayout extends Component {
         if (this.options_.autoClose && this.options_.startState.indexOf('open') !== -1) {
           setTimeout(() => {
             // Keep it open while hovered
-            if (!elMatches(this.contentEl_, ':hover')) {
+            if (!this.contentEl_.matches(':hover')) {
               this.togglePanel(false);
             } else {
               this.contentEl_.addEventListener('mouseleave', () => {

src/components/shoppable-bar/panel/shoppable-panel-item.js

@@ -1,5 +1,4 @@
 import videojs from 'video.js';
-import { elMatches } from 'utils/matches';
 
 const ClickableComponent = videojs.getComponent('ClickableComponent');
 const dom = videojs.dom || videojs;
@@ -25,7 +24,7 @@ class ShoppablePanelItem extends ClickableComponent {
     event.preventDefault();
     event.stopPropagation();
 
-    if (!elMatches(this.el_, `.dragged .${CLD_SPBL_ITEM}`)) {
+    if (!this.el_.matches(`.dragged .${CLD_SPBL_ITEM}`)) {
       // Prevent click event if dragged
       this.options_.clickHandler(event);
     }

src/components/shoppable-bar/panel/shoppable-panel.js

@@ -1,6 +1,5 @@
 import videojs from 'video.js';
-import { assign } from 'utils/assign';
-import { throttle } from 'utils/throttle';
+import throttle from 'lodash/throttle';
 import { parseTime } from 'utils/time';
 import ShoppablePanelItem from './shoppable-panel-item';
 import ImageSource from '../../../plugins/cloudinary/models/image-source';
@@ -52,7 +51,7 @@ class ShoppablePanel extends Component {
     const cloudinaryConfig = this.player_.cloudinary.cloudinaryConfig();
     return this.options.products.map(product => {
       if (product.onHover && typeof product.onHover.args === 'object') {
-        product.onHover.args.transformation = assign({},
+        product.onHover.args.transformation = Object.assign({},
           this.options.transformation,
           product.onHover.args.transformation
         );
@@ -68,7 +67,7 @@ class ShoppablePanel extends Component {
       };
       const imageSource = new ImageSource(product.publicId, {
         cloudinaryConfig: cloudinaryConfig,
-        transformation: assign({}, this.options.transformation, product.transformation)
+        transformation: Object.assign({}, this.options.transformation, product.transformation)
       });
       return {
         imageSrc: imageSource,

src/extended-events.js

@@ -1,7 +1,6 @@
 import videojs from 'video.js';
 import EventEmitter from 'events';
-import { assign } from 'utils/assign';
-import { isPlainObject } from 'utils/type-inference';
+import isObject from 'lodash/isObject';
 import { PLAYER_EVENT } from './utils/consts';
 
 const EVENT_DEFAULTS = {
@@ -203,8 +202,8 @@ const normalizeEventsParam = (events, defaults) => {
     normalized = events.reduce((agg, item) => {
       const eventDefaults = defaults[item] || {};
 
-      if (isPlainObject(item)) {
-        agg[item.type] = assign({}, eventDefaults, item);
+      if (isObject(item)) {
+        agg[item.type] = Object.assign({}, eventDefaults, item);
       } else {
         agg[item] = eventDefaults;
       }

src/index.js

@@ -1,15 +1,15 @@
 import 'assets/styles/main.scss';
+import pick from 'lodash/pick';
 import VideoPlayer from './video-player';
 import createVideoPlayerProfile from './video-player-profile';
-import { assign } from 'utils/assign';
-import { pick, convertKeysToSnakeCase } from './utils/object';
+import { convertKeysToSnakeCase } from './utils/object';
 import { CLOUDINARY_CONFIG_PARAM } from './video-player.const';
 
 const getConfig = (playerOptions = {}, cloudinaryConfig) => {
   const snakeCaseCloudinaryConfig = pick(convertKeysToSnakeCase(playerOptions), CLOUDINARY_CONFIG_PARAM);
 
   // pick cld-configurations and assign them to cloudinaryConfig
-  return assign(playerOptions, {
+  return Object.assign(playerOptions, {
     cloudinaryConfig: cloudinaryConfig || snakeCaseCloudinaryConfig
   });
 };

src/plugins/autoplay-on-scroll/index.js

@@ -1,6 +1,5 @@
 import { isElementInViewport } from 'utils/positioning';
 import { sliceProperties } from 'utils/slicing';
-import { assign } from 'utils/assign';
 
 const defaults = {
   fraction: 0.5,
@@ -9,7 +8,7 @@ const defaults = {
 
 class AutoplayOnScrollPlugin {
   constructor(player, opts = {}) {
-    opts = assign({}, defaults, opts);
+    opts = Object.assign({}, defaults, opts);
 
     this.player = player;
     let _options = sliceProperties(opts, 'fraction');

src/plugins/cloudinary/common.js

@@ -1,15 +1,15 @@
 import videojs from 'video.js';
-import { assign } from 'utils/assign';
+import omit from 'lodash/omit';
 import { sliceAndUnsetProperties } from 'utils/slicing';
-import { isString, isPlainObject } from 'utils/type-inference';
+import isObject from 'lodash/isObject';
+import isString from 'lodash/isString';
 import { URL_PATTERN } from './models/video-source/video-source.const';
 import { createCloudinaryLegacyURL } from '@cloudinary/url-gen/backwards/createCloudinaryLegacyURL';
 import Transformation from '@cloudinary/url-gen/backwards/transformation';
-import { omit } from '../../utils/object';
 
 const normalizeOptions = (publicId, options, { tolerateMissingId = false } = {}) => {
-  if (isPlainObject(publicId)) {
-    const _options = assign({}, publicId);
+  if (isObject(publicId)) {
+    const _options = Object.assign({}, publicId);
 
     publicId = sliceAndUnsetProperties(_options, 'publicId').publicId;
 
@@ -18,7 +18,7 @@ const normalizeOptions = (publicId, options, { tolerateMissingId = false } = {})
     }
 
     if (options) {
-      options = assign({}, _options, options);
+      options = Object.assign({}, _options, options);
     }
   }