perf: lazy load interaction-areas plugin

src/assets/styles/main.scss

@@ -8,7 +8,6 @@ $icon-font-path: '../icon-font' !default;
 @import '~video.root.js/dist/video-js.min.css';
 @import 'mixins/skin';
 @import 'icons';
-@import 'components/interaction-areas.scss';
 @import 'components/loading-button.scss';
 @import 'components/text-tracks.scss';
 

src/plugins/index.js

@@ -22,6 +22,7 @@ import vttThumbnails from './vtt-thumbnails';
 import playlist from './playlist';
 import shoppable from './shoppable-plugin';
 import styledTextTracks from './styled-text-tracks';
+import interactionAreas from './interaction-areas';
 
 const plugins = {
   // #if (!process.env.WEBPACK_BUILD_LIGHT)
@@ -44,7 +45,8 @@ const plugins = {
   // Lazy loaded plugins
   playlist,
   shoppable,
-  styledTextTracks
+  styledTextTracks,
+  interactionAreas
 };
 
 export default plugins;

src/plugins/interaction-areas/index.js

@@ -0,0 +1,8 @@
+export default async function lazyInteractionAreasPlugin(player, playerOptions, videojsOptions) {
+  try {
+    const { interactionAreasService } = await import(/* webpackChunkName: "interaction-area" */ './interaction-areas.service');
+    interactionAreasService(player, playerOptions, videojsOptions);
+  } catch (error) {
+    console.error('Failed to load plugin:', error);
+  }
+}

src/components/interaction-area/interaction-area.service.js → src/plugins/interaction-areas/interaction-areas.service.js

@@ -3,7 +3,7 @@ import {
   CLOSE_INTERACTION_AREA_LAYOUT_DELAY,
   DEFAULT_INTERACTION_ARE_TRANSITION,
   INTERACTION_AREAS_CONTAINER_CLASS_NAME, TEMPLATE_INTERACTION_AREAS_VTT
-} from './interaction-area.const';
+} from './interaction-areas.const';
 import {
   createInteractionAreaLayoutMessage,
   getInteractionAreaItem,
@@ -13,16 +13,17 @@ import {
   setInteractionAreasContainerSize,
   shouldShowAreaLayoutMessage,
   updateInteractionAreasItem
-} from './interaction-area.utils';
+} from './interaction-areas.utils';
 import { addEventListener, createElement } from '../../utils/dom';
 import { throttle } from '../../utils/throttle';
 import { get } from '../../utils/object';
 import { noop } from '../../utils/type-inference';
 import { addMetadataTrack } from '../../video-player.utils';
 import { PLAYER_EVENT } from '../../utils/consts';
 
+import './interaction-areas.scss';
 
-export const interactionAreaService = (player, playerOptions, videojsOptions) => {
+export const interactionAreasService = (player, playerOptions, videojsOptions) => {
 
   let isZoomed = false;
   let currentSource = null;
@@ -240,8 +241,5 @@ export const interactionAreaService = (player, playerOptions, videojsOptions) =>
     });
   }
 
-  return {
-    init
-  };
-
+  init();
 };

src/components/interaction-area/interaction-area.utils.js → src/plugins/interaction-areas/interaction-areas.utils.js

@@ -7,12 +7,12 @@ import {
   INTERACTION_AREAS_CONTAINER_CLASS_NAME,
   INTERACTION_AREAS_PREFIX,
   INTERACTION_AREAS_THEME
-} from './interaction-area.const';
+} from './interaction-areas.const';
 import { noop } from '../../utils/type-inference';
-import { getDefaultPlayerColor } from '../../plugins/colors';
+import { getDefaultPlayerColor } from '../colors';
 import { forEach, some } from '../../utils/array';
-import { themedButton } from '../themeButton/themedButton';
-import { BUTTON_THEME } from '../themeButton/themedButton.const';
+import { themedButton } from '../../components/themeButton/themedButton';
+import { BUTTON_THEME } from '../../components/themeButton/themedButton.const';
 
 
 const getInteractionAreaItemId = (item, index) => item.id || item.type || `id_${index}`;

src/validators/validators.js

@@ -2,7 +2,7 @@ import { ADS_IN_PLAYLIST, AUTO_PLAY_MODE, FLOATING_TO } from '../video-player.co
 import {
   INTERACTION_AREAS_TEMPLATE,
   INTERACTION_AREAS_THEME
-} from '../components/interaction-area/interaction-area.const';
+} from '../plugins/interaction-areas/interaction-areas.const';
 import { validator } from './validators-types';
 
 export const playerValidators = {

src/video-player.js

@@ -23,7 +23,6 @@ import { getAnalyticsFromPlayerOptions } from './utils/get-analytics-player-opti
 import { extendCloudinaryConfig, normalizeOptions, isRawUrl } from './plugins/cloudinary/common';
 // #if (!process.env.WEBPACK_BUILD_LIGHT)
 import qualitySelector from './components/qualitySelector/qualitySelector.js';
-import { interactionAreaService } from './components/interaction-area/interaction-area.service';
 // #endif
 
 const INTERNAL_ANALYTICS_URL = 'https://analytics-api-s.cloudinary.com';
@@ -97,10 +96,6 @@ class VideoPlayer extends Utils.mixin(Eventable) {
       this.fluid(this.playerOptions.fluid);
     }
 
-    // #if (!process.env.WEBPACK_BUILD_LIGHT)
-    this.interactionArea = interactionAreaService(this, this.playerOptions, this._videojsOptions);
-    // #endif
-
     this._setCssClasses();
     this._initPlugins();
     this._initJumpButtons();
@@ -178,10 +173,6 @@ class VideoPlayer extends Utils.mixin(Eventable) {
       if (ready) {
         ready(this);
       }
-
-      // #if (!process.env.WEBPACK_BUILD_LIGHT)
-      this.interactionArea.init();
-      // #endif
     });
 
   }
@@ -202,6 +193,7 @@ class VideoPlayer extends Utils.mixin(Eventable) {
     this._initHighlightsGraph();
     this._initSeekThumbs();
     this._initChapters();
+    this._initInteractionAreas();
   }
 
   _isFullScreen() {
@@ -328,6 +320,14 @@ class VideoPlayer extends Utils.mixin(Eventable) {
     });
   }
 
+  _initInteractionAreas() {
+    this.videojs.on(PLAYER_EVENT.READY, async () => {
+      if (this.options.videojsOptions.interactionDisplay && this.videojs.interactionAreas) {
+        this.videojs.interactionAreas(this, this.playerOptions, this._videojsOptions);
+      }
+    });
+  }
+
   _initColors () {
     this.videojs.colors(this.playerOptions.colors ? { colors: this.playerOptions.colors } : {});
   }