From 0049fb90cf9702cfb82b48c6911bedd319835dc8 Mon Sep 17 00:00:00 2001 From: Tsachi Shlidor Date: Thu, 26 Dec 2024 17:04:50 +0200 Subject: [PATCH] feat: light esm build (#765) * feat: light esm build * chore: esm tests * chore: e2e & devServer * chore: e2e --- docs/es-modules/all.html | 64 ++++++++++++++++++ docs/es-modules/index.html | 3 + docs/es-modules/light.html | 65 +++++++++++++++++++ docs/es-modules/package.json | 2 +- package.json | 16 ++++- src/index.all.js | 1 - src/plugins/index.js | 6 +- src/utils/get-analytics-player-options.js | 4 +- .../specs/linksConsoleErrorsEsmPage.spec.ts | 2 +- test/e2e/testData/ExampleLinkNames.ts | 2 + test/e2e/testData/esmPageLinksData.ts | 2 + webpack/dev.config.js | 1 - webpack/es-light.config.js | 17 +++++ 13 files changed, 171 insertions(+), 14 deletions(-) create mode 100644 docs/es-modules/all.html create mode 100644 docs/es-modules/light.html create mode 100644 webpack/es-light.config.js diff --git a/docs/es-modules/all.html b/docs/es-modules/all.html new file mode 100644 index 00000000..ca93f9cb --- /dev/null +++ b/docs/es-modules/all.html @@ -0,0 +1,64 @@ + + + + + Cloudinary Video Player + + + + + +
+ +

Cloudinary Video Player

+

/all build

+ +

Using the /all build, you get a build that already includes all plugins (except the big /dash plugin), saving you the need to import them separately

+ + + +

+ Full documentation +

+
+ + + + + + + diff --git a/docs/es-modules/index.html b/docs/es-modules/index.html index fd44416f..1dc7317f 100644 --- a/docs/es-modules/index.html +++ b/docs/es-modules/index.html @@ -75,6 +75,9 @@

Code examples:

  • UI Config
  • VAST & VPAID Support
  • VR/360 Videos
    • +
    +
  • /all build
    • +
  • /light build
    • diff --git a/docs/es-modules/light.html b/docs/es-modules/light.html new file mode 100644 index 00000000..da8bda20 --- /dev/null +++ b/docs/es-modules/light.html @@ -0,0 +1,65 @@ + + + + + Cloudinary Video Player + + + + + +
    + +

    Cloudinary Video Player

    +

    /light build

    + +

    Using the /light build gives you the smallest possible bundle-size

    + + + +

    + Full documentation +

    +
    + + + + + + + diff --git a/docs/es-modules/package.json b/docs/es-modules/package.json index 925ff263..e4b21064 100644 --- a/docs/es-modules/package.json +++ b/docs/es-modules/package.json @@ -3,7 +3,7 @@ "private": true, "version": "0.0.1", "scripts": { - "prepare-player": "cd ../../ && npm i && npm run build-es", + "prepare-player": "cd ../../ && npm i && npm run build-all", "install-player": "npm i ../../ --no-save", "prepare": "npm run prepare-player && npm run install-player", "update-edge": "npm i", diff --git a/package.json b/package.json index aed6333a..bc58d8cd 100644 --- a/package.json +++ b/package.json @@ -20,9 +20,14 @@ ".": { "types": "./types/cld-video-player.d.ts", "import": "./lib/cld-video-player.js", - "require": "./dist/cld-video-player.js" + "require": "./dist/cld-video-player.min.js" }, - "./*": "./lib/*" + "./*": "./lib/*", + "./light": { + "import": "./lib/light/index.js", + "require": "./dist/cld-video-player.light.min.js" + }, + "./light/*": "./lib/light/*" }, "scripts": { "prepare": "shx cp env.example.js env.js", @@ -34,7 +39,8 @@ "build-es": "WEBPACK_BUILD_MIN=1 webpack --config webpack/es6.config.js --progress --color", "build-light": "WEBPACK_BUILD_LIGHT=1 WEBPACK_BUILD_MIN=1 webpack --config webpack/build.config.js --progress --color", "build-light-dev": "WEBPACK_BUILD_LIGHT=1 webpack --config webpack/build.config.js --progress --color --mode=development", - "build-all": "npm run clean && npm run build && npm run build-dev && npm run build-light && npm run build-light-dev && npm run build-es", + "build-light-es": "WEBPACK_BUILD_LIGHT=1 WEBPACK_BUILD_MIN=1 webpack --config webpack/es-light.config.js --progress --color", + "build-all": "npm run clean && npm run build && npm run build-dev && npm run build-light && npm run build-light-dev && npm run build-light-es && npm run build-es", "analyze": "webpack --config webpack/analyzer.config.js", "analyze:light": "WEBPACK_BUILD_LIGHT=1 webpack --config webpack/analyzer.config.js", "postbuild-all": "bundlewatch", @@ -74,6 +80,10 @@ { "path": "./lib/all.js", "maxSize": "288kb" + }, + { + "path": "./lib/light/index.js", + "maxSize": "135kb" } ] }, diff --git a/src/index.all.js b/src/index.all.js index 4238211d..3a37a985 100644 --- a/src/index.all.js +++ b/src/index.all.js @@ -11,7 +11,6 @@ export * from './index.js'; export * from './plugins/chapters/chapters.js'; export * from './plugins/ima/ima.js'; export * from './plugins/playlist/playlist.js'; -export * from './plugins/styled-text-tracks/styled-text-tracks.js'; export * from './plugins/interaction-areas/interaction-areas.service.js'; export * from './components/shoppable-bar/shoppable-widget.js'; diff --git a/src/plugins/index.js b/src/plugins/index.js index c0c7e850..2a47de3d 100644 --- a/src/plugins/index.js +++ b/src/plugins/index.js @@ -1,9 +1,5 @@ import 'videojs-per-source-behaviors'; -// #if (!process.env.WEBPACK_BUILD_LIGHT) -import './videojs-http-source-selector/plugin'; -// #endif - import aiHighlightsGraph from './ai-highlights-graph'; import analytics from './analytics'; import autoplayOnScroll from './autoplay-on-scroll'; @@ -14,6 +10,7 @@ import contextMenu from './context-menu'; import floatingPlayer from './floating-player'; import pacedTranscript from './paced-transcript'; import srtTextTracks from './srt-text-tracks'; +import styledTextTracks from './styled-text-tracks'; import vttThumbnails from './vtt-thumbnails'; // Lazy loaded plugins @@ -22,7 +19,6 @@ import imaPlugin from './ima'; import interactionAreas from './interaction-areas'; import playlist from './playlist'; import shoppable from './shoppable-plugin'; -import styledTextTracks from './styled-text-tracks'; const plugins = { aiHighlightsGraph, diff --git a/src/utils/get-analytics-player-options.js b/src/utils/get-analytics-player-options.js index 7c9ab48f..1955fd28 100644 --- a/src/utils/get-analytics-player-options.js +++ b/src/utils/get-analytics-player-options.js @@ -20,11 +20,11 @@ const getCloudinaryOptions = (cloudinaryOptions = {}) => ({ }); const getTranscriptOptions = (textTracks = {}) => { - const tracksArr = [textTracks.captions, ...textTracks.subtitles]; + const tracksArr = [textTracks.captions, ...(textTracks.subtitles || [])]; return { textTracks: hasConfig(textTracks), textTracksLength: tracksArr.length, - textTracksOptions: hasConfig(textTracks.options) || Object.keys(textTracks.options).join(','), + textTracksOptions: hasConfig(textTracks.options) && Object.keys(textTracks.options).join(','), pacedTextTracks: hasConfig(textTracks) && JSON.stringify(textTracks || {}).includes('"maxWords":') || null, wordHighlight: hasConfig(textTracks) && JSON.stringify(textTracks || {}).includes('"wordHighlight":') || null, transcriptLanguages: tracksArr.filter((track) => !track.url).map((track) => track.language || '').join(',') || null, diff --git a/test/e2e/specs/linksConsoleErrorsEsmPage.spec.ts b/test/e2e/specs/linksConsoleErrorsEsmPage.spec.ts index 4e75176b..0ef97342 100644 --- a/test/e2e/specs/linksConsoleErrorsEsmPage.spec.ts +++ b/test/e2e/specs/linksConsoleErrorsEsmPage.spec.ts @@ -35,7 +35,7 @@ for (const link of ESM_LINKS) { */ vpTest('ESM page Link count test', async ({ page }) => { await page.goto(ESM_URL); - const expectedNumberOfLinks = 32; + const expectedNumberOfLinks = 34; const numberOfLinks = await page.getByRole('link').count(); expect(numberOfLinks).toBe(expectedNumberOfLinks); }); diff --git a/test/e2e/testData/ExampleLinkNames.ts b/test/e2e/testData/ExampleLinkNames.ts index 9763968a..381b2adb 100644 --- a/test/e2e/testData/ExampleLinkNames.ts +++ b/test/e2e/testData/ExampleLinkNames.ts @@ -39,4 +39,6 @@ export enum ExampleLinkName { VR360Videos = 'VR/360 Videos', EmbeddedIframePlayer = 'Embedded (iframe) player', ESMImports = 'ESM Imports', + AllBuild = '/all build', + LightBuild = '/light build', } diff --git a/test/e2e/testData/esmPageLinksData.ts b/test/e2e/testData/esmPageLinksData.ts index 9fd03f37..f4f243a9 100644 --- a/test/e2e/testData/esmPageLinksData.ts +++ b/test/e2e/testData/esmPageLinksData.ts @@ -37,6 +37,8 @@ export const ESM_LINKS: ExampleLinkType[] = [ { name: ExampleLinkName.UIConfig, endpoint: 'ui-config' }, { name: ExampleLinkName.VASTAndVPAIDSupport, endpoint: 'vast-vpaid' }, { name: ExampleLinkName.VR360Videos, endpoint: '360' }, + { name: ExampleLinkName.AllBuild, endpoint: 'all' }, + { name: ExampleLinkName.LightBuild, endpoint: 'light' }, ]; /** diff --git a/webpack/dev.config.js b/webpack/dev.config.js index 1d53e3e4..c271d9d7 100644 --- a/webpack/dev.config.js +++ b/webpack/dev.config.js @@ -28,7 +28,6 @@ module.exports = merge(webpackCommon, { ], devServer: { - host: env.devServer.host || 'localhost', port: env.devServer.port || 3000, open: [isLight ? 'index.html?light=true' : 'index.html'], headers: { diff --git a/webpack/es-light.config.js b/webpack/es-light.config.js new file mode 100644 index 00000000..b62661f9 --- /dev/null +++ b/webpack/es-light.config.js @@ -0,0 +1,17 @@ +const { merge } = require('webpack-merge'); +const webpackConfig = require('./es6.config'); +const path = require('path'); + +delete webpackConfig.entry; // overwrite + +module.exports = merge(webpackConfig, { + + entry: { + 'index': './index.es.js' + }, + + output: { + path: path.resolve(__dirname, '../lib/light'), + } + +});