Merge pull request #518 from cloudinary/ME-14384-lazy-recommendations

ME-14384-lazy-recommendations

src/components/index.js

@@ -2,7 +2,6 @@ import JumpForwardButton from './jumpButtons/jump-10-plus';
 import JumpBackButton from './jumpButtons/jump-10-minus';
 import LogoButton from './logoButton/logo-button';
 import ProgressControlEventsBlocker from './progress-control-events-blocker/progress-control-events-blocker';
-import RecommendationsOverlay from './recommendations-overlay';
 import ShoppablePanel from './shoppable-bar/panel/shoppable-panel';
 import TitleBar from './title-bar/title-bar';
 
@@ -11,7 +10,6 @@ export {
   JumpBackButton,
   LogoButton,
   ProgressControlEventsBlocker,
-  RecommendationsOverlay,
   ShoppablePanel,
   TitleBar
 };

src/components/recommendations-overlay/index.js

@@ -1,3 +1,11 @@
-import RecommendationsOverlay from './recommendations-overlay';
-
-export default RecommendationsOverlay;
+export default async function lazyRecommendationsOverlayComponent(player) {
+  try {
+    if (!player.getChild('recommendationsOverlay')) {
+      await import(/* webpackChunkName: "recommendations-overlay" */ './recommendations-overlay');
+      player.addChild('recommendationsOverlay');
+    }
+    return player;
+  } catch (error) {
+    console.error('Failed to load plugin:', error);
+  }
+}

src/components/recommendations-overlay/recommendations-overlay-primary-item.js

@@ -1,6 +1,6 @@
 import videojs from 'video.js';
 import RecommendationsOverlayItem from './recommendations-overlay-item';
-import componentUtils from '../component-utils';
+import componentUtils from 'components/component-utils';
 
 // support VJS5 & VJS6 at the same time
 const dom = videojs.dom || videojs;

src/plugins/cloudinary/index.js

@@ -16,6 +16,8 @@ import VideoSource from './models/video-source/video-source';
 import EventHandlerRegistry from './event-handler-registry';
 import AudioSource from './models/audio-source/audio-source';
 
+import recommendationsOverlay from 'components/recommendations-overlay';
+
 const DEFAULT_PARAMS = {
   transformation: {},
   sourceTypes: [],
@@ -27,9 +29,7 @@ export const CONSTRUCTOR_PARAMS = ['cloudinaryConfig', 'transformation',
   'sourceTypes', 'sourceTransformation', 'posterOptions', 'autoShowRecommendations'];
 
 class CloudinaryContext {
-
   constructor(player, options = {}) {
-
     setupCloudinaryMiddleware();
 
     this.player = player;
@@ -74,7 +74,11 @@ class CloudinaryContext {
         if (options.recommendationOptions) {
           ({ disableAutoShow, itemBuilder } = sliceAndUnsetProperties(options.recommendationOptions, 'disableAutoShow', 'itemBuilder'));
         }
-        setRecommendations(recommendations, { disableAutoShow, itemBuilder });
+
+        recommendationsOverlay(player).then(() => {
+          setRecommendations(recommendations, { disableAutoShow, itemBuilder });
+        });
+
       } else {
         unsetRecommendations();
       }
@@ -227,7 +231,7 @@ class CloudinaryContext {
         }
       };
 
-      this.one('cldsourcechanged', _recommendations.sourceChangedHandler);
+      _recommendations.sourceChangedHandler();
 
       _recommendations.endedHandler = () => {
         if (!disableAutoShow && this.autoShowRecommendations()) {
@@ -364,7 +368,7 @@ class CloudinaryContext {
   }
 }
 
-export default function(options = {}) {
+export default function (options = {}) {
   options.chainTarget = options.chainTarget || this;
   this.cloudinary = new CloudinaryContext(this, options);
 }

src/video-player.utils.js

@@ -110,7 +110,6 @@ export const overrideDefaultVideojsComponents = () => {
 
   // Add TitleBar as default
   children.push('titleBar');
-  children.push('recommendationsOverlay');
 
   const ControlBar = videojs.getComponent('ControlBar');
   if (ControlBar) {