Merge pull request #519 from cloudinary/ME-14382-lazy-shoppable

ME-14382-lazy-shoppable-plugin

src/components/index.js

@@ -2,14 +2,12 @@ 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 ShoppablePanel from './shoppable-bar/panel/shoppable-panel';
 import TitleBar from './title-bar/title-bar';
 
 export {
   JumpForwardButton,
   JumpBackButton,
   LogoButton,
   ProgressControlEventsBlocker,
-  ShoppablePanel,
   TitleBar
 };

src/plugins/index.js

@@ -3,7 +3,6 @@ import 'videojs-per-source-behaviors';
 // #if (!process.env.WEBPACK_BUILD_LIGHT)
 import dashPlugin from './dash';
 import imaPlugin from './ima';
-import interactive from './interactive-plugin';
 import './videojs-http-source-selector/plugin';
 // #endif
 
@@ -21,14 +20,15 @@ import vttThumbnails from './vtt-thumbnails';
 
 // Lazy loaded plugins
 import playlist from './playlist';
+import shoppable from './shoppable-plugin';
 import styledTextTracks from './styled-text-tracks';
 
 const plugins = {
   // #if (!process.env.WEBPACK_BUILD_LIGHT)
   dashPlugin,
-  interactive,
   imaPlugin,
   // #endif
+
   aiHighlightsGraph,
   analytics,
   autoplayOnScroll,
@@ -39,9 +39,12 @@ const plugins = {
   contextMenu,
   floatingPlayer,
   pacedTranscript,
+  vttThumbnails,
+
+  // Lazy loaded plugins
   playlist,
-  styledTextTracks,
-  vttThumbnails
+  shoppable,
+  styledTextTracks
 };
 
 export default plugins;

src/plugins/shoppable-plugin/index.js

@@ -0,0 +1,6 @@
+export default async function lazyShoppablePlugin(player, options) {
+
+  const { default: ShoppableWidget } = await import(/* webpackChunkName: "shoppable" */ '../../components/shoppable-bar/shoppable-widget');
+  new ShoppableWidget(player, options.shoppable).init();
+
+}

src/video-player.js

@@ -533,9 +533,8 @@ class VideoPlayer extends Utils.mixin(Eventable) {
       return this.videojs.cloudinary.source(publicId, options);
     }
 
-    // Interactive plugin - available in full (not light) build only
-    if (this.videojs.interactive) {
-      this.videojs.interactive(this.videojs, options);
+    if (options.shoppable && this.videojs.shoppable) {
+      this.videojs.shoppable(this.videojs, options);
     }
 
     if (VideoPlayer.allowUsageReport()) {