From cde7922e37694ab944912abbf3c2f0ef1e8ff8f6 Mon Sep 17 00:00:00 2001
From: Tsachi Shlidor <tsachi.shlidor@cloudinary.com>
Date: Sun, 21 Jan 2024 16:08:09 +0200
Subject: [PATCH 1/2] perf: lazy loaded recommendation component

---
 src/components/index.js                            |  2 --
 src/components/recommendations-overlay/index.js    | 14 +++++++++++---
 .../recommendations-overlay-primary-item.js        |  2 +-
 src/plugins/cloudinary/index.js                    | 14 +++++++++-----
 src/video-player.utils.js                          |  1 -
 5 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/src/components/index.js b/src/components/index.js
index d9a3da69..a60aff9c 100644
--- a/src/components/index.js
+++ b/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
 };
diff --git a/src/components/recommendations-overlay/index.js b/src/components/recommendations-overlay/index.js
index c004ca22..af90b196 100644
--- a/src/components/recommendations-overlay/index.js
+++ b/src/components/recommendations-overlay/index.js
@@ -1,3 +1,11 @@
-import RecommendationsOverlay from './recommendations-overlay';
-
-export default RecommendationsOverlay;
+export default async function lazyComponent(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);
+  }
+}
diff --git a/src/components/recommendations-overlay/recommendations-overlay-primary-item.js b/src/components/recommendations-overlay/recommendations-overlay-primary-item.js
index 4406724e..0baf883f 100644
--- a/src/components/recommendations-overlay/recommendations-overlay-primary-item.js
+++ b/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;
diff --git a/src/plugins/cloudinary/index.js b/src/plugins/cloudinary/index.js
index 185393f5..635db8f3 100644
--- a/src/plugins/cloudinary/index.js
+++ b/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);
 }
diff --git a/src/video-player.utils.js b/src/video-player.utils.js
index f028b0a6..b4dbbf4d 100644
--- a/src/video-player.utils.js
+++ b/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) {

From 0c54b10b03328ddbba8766e8e1cffb7240e27a27 Mon Sep 17 00:00:00 2001
From: Tsachi Shlidor <tsachi.shlidor@cloudinary.com>
Date: Tue, 23 Jan 2024 10:08:33 +0200
Subject: [PATCH 2/2] chore: lazyRecommendationsOverlayComponent

---
 src/components/recommendations-overlay/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/recommendations-overlay/index.js b/src/components/recommendations-overlay/index.js
index af90b196..2f88d92d 100644
--- a/src/components/recommendations-overlay/index.js
+++ b/src/components/recommendations-overlay/index.js
@@ -1,4 +1,4 @@
-export default async function lazyComponent(player) {
+export default async function lazyRecommendationsOverlayComponent(player) {
   try {
     if (!player.getChild('recommendationsOverlay')) {
       await import(/* webpackChunkName: "recommendations-overlay" */ './recommendations-overlay');