From 0c87bda8227c28d99e6f25a5d760b72429d8011c Mon Sep 17 00:00:00 2001 From: Tsachi Shlidor Date: Mon, 22 Jan 2024 14:14:27 +0200 Subject: [PATCH 1/2] perf: lazy load shoppable plugin --- src/components/index.js | 2 -- src/plugins/index.js | 11 +++++++---- src/plugins/interactive-plugin/index.js | 10 ---------- src/plugins/shoppable-plugin/index.js | 6 ++++++ src/video-player.js | 5 ++--- 5 files changed, 15 insertions(+), 19 deletions(-) delete mode 100644 src/plugins/interactive-plugin/index.js create mode 100644 src/plugins/shoppable-plugin/index.js diff --git a/src/components/index.js b/src/components/index.js index d9a3da69..76dc5d97 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -3,7 +3,6 @@ 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'; export { @@ -12,6 +11,5 @@ export { LogoButton, ProgressControlEventsBlocker, RecommendationsOverlay, - ShoppablePanel, TitleBar }; diff --git a/src/plugins/index.js b/src/plugins/index.js index cc5f3de7..60b30809 100644 --- a/src/plugins/index.js +++ b/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; diff --git a/src/plugins/interactive-plugin/index.js b/src/plugins/interactive-plugin/index.js deleted file mode 100644 index 626039ac..00000000 --- a/src/plugins/interactive-plugin/index.js +++ /dev/null @@ -1,10 +0,0 @@ -import ShoppableWidget from '../../components/shoppable-bar/shoppable-widget'; - -export default function interactivePlugin(player, options) { - - // Shoppable Video - if (options.shoppable) { - new ShoppableWidget(player, options.shoppable).init(); - } - -} diff --git a/src/plugins/shoppable-plugin/index.js b/src/plugins/shoppable-plugin/index.js new file mode 100644 index 00000000..837b53c4 --- /dev/null +++ b/src/plugins/shoppable-plugin/index.js @@ -0,0 +1,6 @@ +export default async function lazyPlugin(player, options) { + + const { default: ShoppableWidget } = await import(/* webpackChunkName: "shoppable" */ '../../components/shoppable-bar/shoppable-widget'); + new ShoppableWidget(player, options.shoppable).init(); + +} diff --git a/src/video-player.js b/src/video-player.js index 7bea12bb..b5409d39 100644 --- a/src/video-player.js +++ b/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()) { From bad3e3271512fe3a40b470646ba4dd75581520fc Mon Sep 17 00:00:00 2001 From: Tsachi Shlidor Date: Tue, 23 Jan 2024 10:06:46 +0200 Subject: [PATCH 2/2] chore: lazyShoppablePlugin --- src/plugins/shoppable-plugin/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/plugins/shoppable-plugin/index.js b/src/plugins/shoppable-plugin/index.js index 837b53c4..65c36757 100644 --- a/src/plugins/shoppable-plugin/index.js +++ b/src/plugins/shoppable-plugin/index.js @@ -1,4 +1,4 @@ -export default async function lazyPlugin(player, options) { +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();