feat: light esm build (#765)

* feat: light esm build * chore: esm tests * chore: e2e & devServer * chore: e2e
cloudinary · Dec 26, 2024 · 0049fb9 · 0049fb9
1 parent 8298ac9
commit 0049fb9
Show file tree

Hide file tree

Showing 13 changed files with 171 additions and 14 deletions.
diff --git a/docs/es-modules/all.html b/docs/es-modules/all.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Cloudinary Video Player</title>
+    <link
+      href="https://res.cloudinary.com/cloudinary-marketing/image/upload/f_auto,q_auto/c_scale,w_32,e_hue:290/creative_staging/cloudinary_internal/Website/Brand%20Updates/Favicon/cloudinary_web_favicon_192x192.png"
+      rel="icon"
+      type="image/png"
+    />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+  <body>
+    <div class="container p-4 col-12 col-md-9 col-xl-6">
+      <nav class="nav mb-2">
+        <a href="/index.html">&#60;&#60; Back to examples index</a>
+      </nav>
+      <h1>Cloudinary Video Player</h1>
+      <h3 class="mb-4"><code>/all</code> build</h3>
+
+      <p>Using the <code>/all</code> build, you get a build that already includes all plugins (except the big <code>/dash</code> plugin), saving you the need to import them separately</p>
+
+      <video
+        id="player"
+        class="cld-video-player cld-fluid"
+        crossorigin="anonymous"
+        controls
+        muted
+        playsinline
+      ></video>
+
+      <p class="mt-4">
+        <a href="https://cloudinary.com/documentation/cloudinary_video_player#installation"
+          >Full documentation</a
+        >
+      </p>
+    </div>
+
+    <script type="module">
+      import { videoPlayer } from 'cloudinary-video-player/all';
+      import 'cloudinary-video-player/cld-video-player.min.css';
+
+      const player = videoPlayer('player', {
+        cloudName: 'demo',
+        publicId: 'dog',
+        autoplay: true,
+        chapters: {
+          0: 'Chapter I',
+          3: 'Chapter II',
+          8: 'Chapter III',
+        }
+      });
+    </script>
+
+    <!-- Bootstrap -->
+    <link
+      href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
+      rel="stylesheet"
+      integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
+      crossorigin="anonymous"
+    />
+  </body>
+</html>
diff --git a/docs/es-modules/index.html b/docs/es-modules/index.html
@@ -75,6 +75,9 @@ <h3 class="mt-4">Code examples:</h3>
         <li><a href="./ui-config.html">UI Config</a></li>
         <li><a href="./vast-vpaid.html">VAST & VPAID Support</a></li>
         <li><a href="./360.html">VR/360 Videos</a></li>
+        <hr>
+        <li><a href="./all.html"><code>/all</code> build</a></li>
+        <li><a href="./light.html"><code>/light</code> build</a></li>
       </ul>
     </div>
   </body>

diff --git a/docs/es-modules/light.html b/docs/es-modules/light.html
@@ -0,0 +1,65 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Cloudinary Video Player</title>
+    <link
+      href="https://res.cloudinary.com/cloudinary-marketing/image/upload/f_auto,q_auto/c_scale,w_32,e_hue:290/creative_staging/cloudinary_internal/Website/Brand%20Updates/Favicon/cloudinary_web_favicon_192x192.png"
+      rel="icon"
+      type="image/png"
+    />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+  <body>
+    <div class="container p-4 col-12 col-md-9 col-xl-6">
+      <nav class="nav mb-2">
+        <a href="/index.html">&#60;&#60; Back to examples index</a>
+      </nav>
+      <h1>Cloudinary Video Player</h1>
+      <h3 class="mb-4"><code>/light</code> build</h3>
+
+      <p>Using the <code>/light</code> build gives you the smallest possible bundle-size</p>
+
+      <video
+        id="player"
+        class="cld-video-player cld-fluid"
+        crossorigin="anonymous"
+        controls
+        muted
+        playsinline
+      ></video>
+
+      <p class="mt-4">
+        <a href="https://cloudinary.com/documentation/cloudinary_video_player#installation"
+          >Full documentation</a
+        >
+      </p>
+    </div>
+
+    <script type="module">
+      import { videoPlayer } from 'cloudinary-video-player/light';
+      import 'cloudinary-video-player/light/chapters';
+      import 'cloudinary-video-player/cld-video-player.min.css';
+
+      const player = videoPlayer('player', {
+        cloudName: 'demo',
+        publicId: 'dog',
+        autoplay: true,
+        chapters: {
+          0: 'Chapter I',
+          3: 'Chapter II',
+          8: 'Chapter III',
+        }
+      });
+    </script>
+
+    <!-- Bootstrap -->
+    <link
+      href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
+      rel="stylesheet"
+      integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
+      crossorigin="anonymous"
+    />
+  </body>
+</html>
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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'),
+  }
+
+});