perf: update dependencies (#594)

* chore: update dependencies

* chore: bundlewatch

* perf: update dependencies

* perf: update dependencies

* chore: update dependencies

* chore: update eslint

* chore: update httpSourceSelector plugin

.eslintrc.js

@@ -7,7 +7,7 @@ module.exports = {
     "jest": true
   },
   "extends": "eslint:recommended",
-  "parser": "babel-eslint",
+  "parser": "@babel/eslint-parser",
   "parserOptions": {
     "ecmaFeatures": {
       "experimentalObjectRestSpread": true,

package.json

@@ -57,29 +57,29 @@
     "files": [
       {
         "path": "./dist/cld-video-player.min.js",
-        "maxSize": "240kb"
+        "maxSize": "245kb"
       },
       {
         "path": "./dist/cld-video-player.light.min.js",
         "maxSize": "125kb"
       },
       {
         "path": "./lib/cld-video-player.js",
-        "maxSize": "485kb"
+        "maxSize": "245kb"
       },
       {
         "path": "./lib/videoPlayer.js",
-        "maxSize": "240kb"
+        "maxSize": "245kb"
       }
     ]
   },
   "dependencies": {
-    "@cloudinary/url-gen": "^1.16.1",
+    "@cloudinary/url-gen": "^1.19.0",
     "cloudinary-video-analytics": "1.4.3",
     "lodash": "^4.17.21",
-    "uuid": "^9.0.0",
-    "video.js": "8.10.0",
-    "videojs-contrib-ads": "^7.3.3",
+    "uuid": "^9.0.1",
+    "video.js": "^8.11.8",
+    "videojs-contrib-ads": "^7.5.0",
     "videojs-contrib-dash": "^5.1.1",
     "videojs-ima": "^2.3.0",
     "videojs-per-source-behaviors": "^3.0.1",
@@ -88,48 +88,44 @@
   "devDependencies": {
     "@actions/core": "^1.10.1",
     "@actions/github": "^6.0.0",
-    "@babel/core": "^7.19.6",
-    "@babel/plugin-transform-runtime": "^7.19.6",
-    "@babel/preset-env": "^7.19.4",
-    "@commitlint/cli": "^18.4.3",
-    "@commitlint/config-conventional": "^18.4.3",
-    "babel-eslint": "^7.2.3",
-    "babel-jest": "^24.9.0",
-    "babel-loader": "^8.2.2",
-    "bundlewatch": "^0.3.2",
-    "copy-webpack-plugin": "^8.1.0",
-    "css-loader": "^5.2.6",
-    "css-minimizer-webpack-plugin": "^4.2.2",
+    "@babel/core": "^7.24.3",
+    "@babel/eslint-parser": "^7.24.1",
+    "@babel/plugin-transform-runtime": "^7.24.3",
+    "@babel/preset-env": "^7.24.3",
+    "@commitlint/cli": "^19.2.1",
+    "@commitlint/config-conventional": "^19.1.0",
+    "babel-jest": "^29.7.0",
+    "babel-loader": "^9.1.3",
+    "bundlewatch": "^0.3.3",
+    "copy-webpack-plugin": "^12.0.2",
+    "css-loader": "^6.10.0",
+    "css-minimizer-webpack-plugin": "^6.0.0",
     "css.escape": "^1.5.1",
-    "eslint": "^5.16.0",
-    "eslint-loader": "^3.0.4",
-    "eslint-plugin-jest": "^21.27.2",
-    "expose-loader": "^4.0.0",
-    "file-loader": "^6.2.0",
-    "html-webpack-plugin": "^5.5.0",
-    "husky": "^8.0.3",
-    "jest": "^26.6.3",
-    "jest-fetch-mock": "^3.0.3",
-    "jest-puppeteer": "^5.0.4",
-    "jest-webpack": "^0.5.1",
-    "json-loader": "^0.5.7",
-    "mini-css-extract-plugin": "^2.7.1",
-    "puppeteer": "^5.5.0",
+    "eslint": "^8.57.0",
+    "eslint-plugin-jest": "^27.9.0",
+    "eslint-webpack-plugin": "^4.1.0",
+    "expose-loader": "^5.0.0",
+    "html-webpack-plugin": "^5.6.0",
+    "husky": "^9.0.11",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "jest-puppeteer": "^10.0.1",
+    "mini-css-extract-plugin": "^2.8.1",
+    "puppeteer": "^22.6.0",
     "puppeteer-request-spy": "^1.4.0",
-    "sass": "^1.35.1",
-    "sass-loader": "^10.2.0",
-    "semver": "^7.5.4",
-    "shx": "^0.3.3",
-    "snyk": "^1.653.0",
-    "source-map-loader": "^1.1.3",
-    "terser-webpack-plugin": "^5.1.1",
+    "sass": "^1.72.0",
+    "sass-loader": "^14.1.1",
+    "semver": "^7.6.0",
+    "shx": "^0.3.4",
+    "snyk": "^1.1285.0",
+    "terser-webpack-plugin": "^5.3.10",
     "url-loader": "^4.1.1",
-    "webpack": "^5.75.0",
-    "webpack-bundle-analyzer": "^4.5.0",
-    "webpack-cli": "^4.9.2",
+    "webpack": "^5.91.0",
+    "webpack-bundle-analyzer": "^4.10.1",
+    "webpack-cli": "^5.1.4",
     "webpack-conditional-loader": "^1.0.12",
-    "webpack-dev-server": "^4.7.4",
-    "webpack-merge": "^5.8.0"
+    "webpack-dev-server": "^5.0.4",
+    "webpack-merge": "^5.10.0"
   },
   "snyk": true
 }

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

@@ -66,12 +66,12 @@ class ShoppableProductsOverlay extends Component {
     // Remove
     this.player_.one(PLAYER_EVENT.SEEKING, this.clearLayout);
     this.player_.one(PLAYER_EVENT.PLAY, this.clearLayout);
-  }
+  };
 
   clearLayout = () => {
     this.layout_.innerHTML = '';
     this.player_.removeClass(SHOPPABLE_PRODUCTS_OVERLAY_CLASS);
-  }
+  };
 
   createEl() {
     const dimensions = this.player_.currentDimensions();

src/plugins/chapters/chapters.js

@@ -69,7 +69,7 @@ const ChaptersPlugin = (function () {
 
     const fullUrl = getCloudinaryUrl(
       `${currentPublicId}-chapters.vtt`,
-      extendCloudinaryConfig(this.player.cloudinary.cloudinaryConfig(), { resource_type: 'raw', version: '1' }),
+      extendCloudinaryConfig(this.player.cloudinary.cloudinaryConfig(), { resource_type: 'raw', version: '1' })
     );
     return `${fullUrl}?t=${Date.now()}`;
   };

src/plugins/cloudinary-analytics/index.js

@@ -14,7 +14,7 @@ class CloudinaryAnalytics {
   getMetadata = () => ({
     cloudName: this.player.cloudinary.cloudinaryConfig().cloud_name,
     publicId: this.player.cloudinary.currentPublicId()
-  })
+  });
 
   sourceChanged = () => {
     const metadata = this.getMetadata();

src/plugins/paced-transcript/index.js

@@ -11,7 +11,7 @@ function pacedTranscript(config) {
     srclang: config.srclang || 'en',
     src: config.src || getCloudinaryUrl(
       source.publicId(),
-      extendCloudinaryConfig(player.cloudinary.cloudinaryConfig(), { resource_type: 'raw' }),
+      extendCloudinaryConfig(player.cloudinary.cloudinaryConfig(), { resource_type: 'raw' })
     ) + '.transcript',
     maxWords: config.maxWords,
     wordHighlight: config.wordHighlight,

src/plugins/playlist/ui/components/upcoming-video-overlay.js

@@ -27,7 +27,7 @@ class UpcomingVideoOverlay extends ClickableComponent {
 
   _hide = () => {
     this.removeClass(UpcomingVideoOverlay.VJS_UPCOMING_VIDEO_SHOW);
-  }
+  };
 
   _disableTransition(block) {
     this.addClass(UpcomingVideoOverlay.DISABLE_TRANSITION_CLASS);
@@ -42,7 +42,7 @@ class UpcomingVideoOverlay extends ClickableComponent {
         this.setItem(event.next);
       }
     });
-  }
+  };
 
   _show = () => {
     const ima = this.player().ima;
@@ -55,7 +55,7 @@ class UpcomingVideoOverlay extends ClickableComponent {
     } else {
       this.addClass(UpcomingVideoOverlay.VJS_UPCOMING_VIDEO_SHOW);
     }
-  }
+  };
 
   setTitle(source) {
     const title = this.getChild('upcomingVideoOverlayContent')

src/plugins/videojs-http-source-selector/components/SourceMenuButton.js

@@ -1,87 +1,118 @@
 import videojs from 'video.js';
-import SourceMenuItem from './SourceMenuItem';
+import SourceMenuItem from './SourceMenuItem.js';
 
 const MenuButton = videojs.getComponent('MenuButton');
 
+/**
+ * A button that hides/shows sorted SourceMenuItems
+ */
 class SourceMenuButton extends MenuButton {
 
+  /**
+   * Create SourceMenuItems and sort them
+   *
+   * @param {videojs.Player} player
+   * videojs player
+   * @param {{default}} options
+   * high | low
+   */
   constructor(player, options) {
     super(player, options);
 
-    const qualityLevels = this.player().qualityLevels();
+    const qualityLevels = this.player_.qualityLevels();
 
     // Handle options: We accept an options.default value of ( high || low )
     // This determines a bias to set initial resolution selection.
     if (options && options.default) {
       if (options.default === 'low') {
-        for (let i = 0; i < qualityLevels.length; i++) {
-          qualityLevels[i].enabled = (i === 0);
+        for (const [index, qualityLevel] of qualityLevels.entries()) {
+          qualityLevel.enabled = (index === 0);
         }
       } else if (options.default === 'high') {
-        for (let i = 0; i < qualityLevels.length; i++) {
-          qualityLevels[i].enabled = (i === (qualityLevels.length - 1));
+        for (let index = 0; index < qualityLevels.length; index++) {
+          qualityLevels[index].enabled = (index === (qualityLevels.length - 1));
         }
       }
     }
 
     // Bind update to qualityLevels changes
-    this.player().qualityLevels().on('addqualitylevel', (event) => {
-      this.update(event);
-    });
-
-    this.menuButton_.el_.setAttribute('aria-label', 'Source Selector Button');
+    // Todo: switch to Function.prototype.bind
+    this.player_.qualityLevels().on(['change', 'addqualitylevel', 'removequalitylevel'], videojs.bind(this, this.update));
   }
 
+  /**
+   * Create div with videojs classes
+   *
+   * @returns {videojs.MenuButton} The sum of the two numbers.
+   */
   createEl() {
     return videojs.dom.createEl('div', {
       className: 'vjs-http-source-selector vjs-menu-button vjs-menu-button-popup vjs-control vjs-button'
     });
   }
 
+  /**
+   * Create SourceMenuItems and sort them
+   *
+   * @returns {SourceMenuItem[]} The sum of the two numbers.
+   */
+  buildCSSClass() {
+    return MenuButton.prototype.buildCSSClass.call(this);
+  }
+
+  /**
+   * Update the menu button
+   *
+   * @returns {videojs.MenuButton} The updated menu button
+   */
+  update() {
+    return MenuButton.prototype.update.call(this);
+  }
+
+  /**
+   * Create SourceMenuItems and sort them
+   *
+   * @returns {SourceMenuItem[]} Sorted array of SourceMenuItems
+   */
   createItems() {
     const menuItems = [];
-    const levels = this.player().qualityLevels();
+    const levels = this.player_.qualityLevels();
     const labels = [];
 
-    for (let i = 0; i < levels.length; i++) {
-      let index = levels.length - (i + 1);
-      let selected = (index === levels.selectedIndex);
+    for (let index = levels.length - 1; index >= 0; index--) {
+      const selected = (index === levels.selectedIndex);
 
       // Display height if height metadata is provided with the stream, else use bitrate
       let label = `${index}`;
-      let sortVal = index;
-      if (levels[index].height) {
-        label = `${levels[index].height}p`;
-        sortVal = parseInt(levels[index].height, 10);
-      } else if (levels[index].bitrate) {
-        label = `${Math.floor(levels[index].bitrate / 1e3)} kbps`;
-        sortVal = parseInt(levels[index].bitrate, 10);
+      let sortValue = index;
+      const level = levels[index];
+
+      if (level.height) {
+        label = `${level.height}p`;
+        sortValue = Number.parseInt(level.height, 10);
+      } else if (level.bitrate) {
+        label = `${Math.floor(level.bitrate / 1e3)} kbps`;
+        sortValue = Number.parseInt(level.bitrate, 10);
       }
 
       // Skip duplicate labels
-      if (labels.indexOf(label) >= 0) {
+      if (labels.includes(label)) {
         // eslint-disable-next-line no-continue
         continue;
       }
       labels.push(label);
 
-      menuItems.push(new SourceMenuItem(this.player_, { label, index, selected, sortVal }));
+      menuItems.push(new SourceMenuItem(this.player_, { label, index, selected, sortValue }));
     }
 
     // If there are multiple quality levels, offer an 'auto' option
     if (levels.length > 1) {
-      menuItems.push(new SourceMenuItem(this.player_, { label: 'Auto', index: levels.length, selected: false, sortVal: 99999 }));
+      menuItems.push(new SourceMenuItem(this.player_, { label: 'Auto', index: levels.length, selected: false, sortValue: 999999 }));
     }
 
     // Sort menu items by their label name with Auto always first
     menuItems.sort(function(a, b) {
-      if (a.options_.sortVal < b.options_.sortVal) {
-        return 1;
-      } else if (a.options_.sortVal > b.options_.sortVal) {
-        return -1;
-      } else {
-        return 0;
-      }
+      return b.options_.sortValue - a.options_.sortValue;
     });
 
     return menuItems;