From 2c85238abf9a6748f7c25b572940bc41fc8db84b Mon Sep 17 00:00:00 2001 From: Tsachi Shlidor Date: Thu, 16 Apr 2026 17:38:58 +0300 Subject: [PATCH 1/5] feat!: deliver lazy bundle (AKA 4k player) by default --- docs/scripts.js | 6 +- package.json | 29 ++-- rollup.esm.config.js | 11 +- src/{index.umd.js => index.full.js} | 0 src/index.js | 39 +++++- src/index.lazy.js | 18 --- src/index.player.js | 6 - src/index.videoPlayer.js | 6 - src/utils/deferred-player.js | 84 ++++++++++++ test/unit/deferred-player.test.js | 174 ++++++++++++++++++++++++ test/unit/legacy-cloudinary-new.test.js | 4 +- webpack/common.config.js | 33 ++++- webpack/copy-light-bundle.js | 32 ++--- 13 files changed, 352 insertions(+), 90 deletions(-) rename src/{index.umd.js => index.full.js} (100%) delete mode 100644 src/index.lazy.js delete mode 100644 src/index.player.js delete mode 100644 src/index.videoPlayer.js create mode 100644 src/utils/deferred-player.js create mode 100644 test/unit/deferred-player.test.js diff --git a/docs/scripts.js b/docs/scripts.js index 39c8d6dcd..b57d868c8 100644 --- a/docs/scripts.js +++ b/docs/scripts.js @@ -119,9 +119,9 @@ var loadStyle = function (source, ver) { function initPlayerExamples() { var scriptUrl = new URL(document.currentScript.src, window.location); - var lazy = scriptUrl.searchParams.has('lazy'); - var bundleName = lazy ? '/cld-video-player-lazy' : '/cld-video-player'; - loadStyle('/cld-video-player' + (min ? '.min' : '') + '.css', ver); + var full = scriptUrl.searchParams.has('full'); + var bundleName = full ? '/player-full' : '/player'; + loadStyle('/player' + (min ? '.min' : '') + '.css', ver); loadScript(bundleName + (min ? '.min' : '') + '.js', ver); window.addEventListener('load', function () { diff --git a/package.json b/package.json index 9d5461b6e..49d291ab5 100644 --- a/package.json +++ b/package.json @@ -9,8 +9,8 @@ "url": "https://github.com/cloudinary/cloudinary-video-player.git" }, "module": "./lib/index.js", - "main": "./dist/cld-video-player.min.js", - "style": "./dist/cld-video-player.min.css", + "main": "./dist/player.min.js", + "style": "./dist/player.min.css", "types": "./types/cld-video-player.d.ts", "files": [ "dist", @@ -23,24 +23,13 @@ ".": { "types": "./types/cld-video-player.d.ts", "import": "./lib/index.js", - "require": "./dist/cld-video-player.min.js" - }, - "./videoPlayer": { - "import": "./lib/videoPlayer.js", - "require": "./dist/cld-video-player.min.js" - }, - "./player": { - "import": "./lib/player.js", - "require": "./dist/cld-video-player.min.js" + "require": "./dist/player.min.js" }, "./all": { "import": "./lib/all.js", - "require": "./dist/cld-video-player.min.js" - }, - "./lazy": { - "import": "./lib/lazy.js", - "require": "./dist/cld-video-player-lazy.min.js" + "require": "./dist/player-full.min.js" }, + "./player.min.css": "./lib/player.min.css", "./cld-video-player.min.css": "./lib/cld-video-player.min.css", "./shoppable": "./lib/shoppable-widget.js", "./interaction-areas": "./lib/interaction-areas.service.js", @@ -80,12 +69,12 @@ "bundlewatch": { "files": [ { - "path": "./dist/cld-video-player.min.js", - "maxSize": "140kb" + "path": "./dist/player.min.js", + "maxSize": "10kb" }, { - "path": "./dist/cld-video-player-lazy.min.js", - "maxSize": "10kb" + "path": "./dist/player-full.min.js", + "maxSize": "140kb" } ] }, diff --git a/rollup.esm.config.js b/rollup.esm.config.js index 82fa2c7bc..8c60e2d7e 100644 --- a/rollup.esm.config.js +++ b/rollup.esm.config.js @@ -80,10 +80,7 @@ function stubScss() { module.exports = { input: { index: path.join(srcDir, 'index.js'), - videoPlayer: path.join(srcDir, 'index.videoPlayer.js'), - player: path.join(srcDir, 'index.player.js'), all: path.join(srcDir, 'index.all.js'), - lazy: path.join(srcDir, 'index.lazy.js'), dash: path.join(srcDir, 'dash.js'), debug: path.join(srcDir, 'debug.js') }, @@ -118,11 +115,11 @@ module.exports = { mkdirSync(path.dirname(schemaDest), { recursive: true }); copyFileSync(schemaSrc, schemaDest); } - const cssSrc = path.join(__dirname, 'dist/cld-video-player.min.css'); - const cssDest = path.join(__dirname, 'lib/cld-video-player.min.css'); + const cssSrc = path.join(__dirname, 'dist/player.min.css'); if (existsSync(cssSrc)) { - mkdirSync(path.dirname(cssDest), { recursive: true }); - copyFileSync(cssSrc, cssDest); + mkdirSync(outDir, { recursive: true }); + copyFileSync(cssSrc, path.join(outDir, 'player.min.css')); + copyFileSync(cssSrc, path.join(outDir, 'cld-video-player.min.css')); } } } diff --git a/src/index.umd.js b/src/index.full.js similarity index 100% rename from src/index.umd.js rename to src/index.full.js diff --git a/src/index.js b/src/index.js index 2e6706511..0941661b9 100644 --- a/src/index.js +++ b/src/index.js @@ -1,20 +1,47 @@ import '~/assets/styles/main.scss'; -import videojs from 'video.js'; -import { createVideoPlayer, createPlayerWithConfig } from './video-player.js'; import { createAsyncPlayer, createMultiplePlayers, createMultipleSync, setupCloudinaryGlobal } from './utils/player-api'; +import { createDeferredPlayer } from './utils/deferred-player'; -export { videojs }; +const importCore = () => import(/* webpackChunkName: "cld-player-core" */ './video-player.js'); export const videoPlayer = (id, playerOptions = {}, ready) => - createVideoPlayer(id, playerOptions, ready); + createDeferredPlayer( + importCore().then((m) => m.createVideoPlayer(id, playerOptions, ready)) + ); export const videoPlayers = (selector, playerOptions, ready) => createMultipleSync(selector, playerOptions, ready, videoPlayer); export const player = (id, playerOptions = {}, ready) => - createAsyncPlayer(id, playerOptions, ready, createPlayerWithConfig); + createAsyncPlayer(id, playerOptions, ready, async (videoElement, opts, r) => { + const { createPlayerWithConfig } = await importCore(); + return createPlayerWithConfig(videoElement, opts, r); + }); export const players = (selector, playerOptions, ready) => createMultiplePlayers(selector, playerOptions, ready, player); -export default setupCloudinaryGlobal({ videoPlayer, videoPlayers, player, players }); +const cloudinaryVideoPlayerLegacyConfig = (instanceConfig = {}) => { + console.warn( + 'Cloudinary.new() is deprecated and will be removed. Please use cloudinary.videoPlayer() instead.' + ); + const mergeOpts = (callOpts = {}) => Object.assign({}, instanceConfig, callOpts); + return { + videoPlayer: (id, playerOptions = {}, ready) => + createDeferredPlayer( + importCore().then((m) => m.createVideoPlayer(id, mergeOpts(playerOptions), ready)) + ), + videoPlayers: (selector, playerOptions = {}, ready) => + createMultipleSync(selector, mergeOpts(playerOptions), ready, videoPlayer) + }; +}; + +export default setupCloudinaryGlobal({ + videoPlayer, + videoPlayers, + player, + players, + Cloudinary: { + new: cloudinaryVideoPlayerLegacyConfig + } +}); diff --git a/src/index.lazy.js b/src/index.lazy.js deleted file mode 100644 index 6ba14e523..000000000 --- a/src/index.lazy.js +++ /dev/null @@ -1,18 +0,0 @@ -/** - * Lazy entry: tiny initial bundle, player core loads on demand. - * Only player()/players() are available. For sync videoPlayer(), use the full bundle. - */ -import { createAsyncPlayer, createMultiplePlayers, setupCloudinaryGlobal } from './utils/player-api'; - -export const player = (id, playerOptions, ready) => - createAsyncPlayer(id, playerOptions, ready, async (videoElement, opts, r) => { - const { videoPlayer } = await import( - /* webpackChunkName: "cld-player-core" */ './index.js' - ); - return videoPlayer(videoElement, opts, r); - }); - -export const players = (selector, playerOptions, ready) => - createMultiplePlayers(selector, playerOptions, ready, player); - -export default setupCloudinaryGlobal({ player, players }); diff --git a/src/index.player.js b/src/index.player.js deleted file mode 100644 index 8e2eded4a..000000000 --- a/src/index.player.js +++ /dev/null @@ -1,6 +0,0 @@ -// This file is bundled as `player.js` to be imported as a tree-shaken module. - -// Usage: -// import player from 'cloudinary-video-player/player'; - -export { player as default } from './index.js'; diff --git a/src/index.videoPlayer.js b/src/index.videoPlayer.js deleted file mode 100644 index 4fcdc316a..000000000 --- a/src/index.videoPlayer.js +++ /dev/null @@ -1,6 +0,0 @@ -// This file is bundled as `videoPlayer.js` to be imported as a tree-shaken module. - -// Usage: -// import videoPlayer from 'cloudinary-video-player/videoPlayer'; - -export { videoPlayer as default } from './index.js'; diff --git a/src/utils/deferred-player.js b/src/utils/deferred-player.js new file mode 100644 index 000000000..9a9b609c5 --- /dev/null +++ b/src/utils/deferred-player.js @@ -0,0 +1,84 @@ +/** + * Deferred Player Proxy + * + * Returns a synchronous object from videoPlayer() that buffers all method calls + * while the real VideoPlayer loads asynchronously, then replays them in order. + * + * This allows the default entry point to be lightweight (lazy) while preserving + * the synchronous API contract: + * + * const player = cloudinary.videoPlayer('el', { ... }); + * player.source('elephants'); // buffered, replayed after load + * player.on('error', handler); // buffered, replayed after load + */ + +/** + * Creates a deferred player proxy that buffers calls until the real player loads. + * + * @param {Promise} playerPromise - Promise that resolves to a VideoPlayer instance. + * @returns {Object} A proxy that looks like a VideoPlayer synchronously. + */ +export const createDeferredPlayer = (playerPromise) => { + let realPlayer = null; + let failed = false; + const queue = []; + + const resolvedPromise = playerPromise.then((p) => { + realPlayer = p; + queue.forEach(({ method, args, resolve, reject }) => { + try { + resolve(realPlayer[method](...args)); + } catch (e) { + reject(e); + } + }); + queue.length = 0; + return p; + }).catch((err) => { + failed = true; + queue.forEach(({ reject }) => reject(err)); + queue.length = 0; + throw err; + }); + + const proxy = new Proxy({}, { + get(_target, prop) { + if (prop === 'then' || prop === 'catch' || prop === 'finally') { + return resolvedPromise[prop].bind(resolvedPromise); + } + + if (prop === Symbol.toPrimitive || prop === Symbol.toStringTag) { + return undefined; + } + + if (realPlayer) { + const val = realPlayer[prop]; + return typeof val === 'function' ? val.bind(realPlayer) : val; + } + + if (failed) { + return undefined; + } + + return (...args) => { + const deferred = {}; + const promise = new Promise((resolve, reject) => { + deferred.resolve = resolve; + deferred.reject = reject; + }); + queue.push({ method: prop, args, ...deferred }); + promise.catch((e) => console.error('[Cloudinary] Deferred player call failed:', e)); + return proxy; + }; + }, + + has(_target, prop) { + if (realPlayer) { + return prop in realPlayer; + } + return true; + } + }); + + return proxy; +}; diff --git a/test/unit/deferred-player.test.js b/test/unit/deferred-player.test.js new file mode 100644 index 000000000..0cb518245 --- /dev/null +++ b/test/unit/deferred-player.test.js @@ -0,0 +1,174 @@ +import { createDeferredPlayer } from '../../src/utils/deferred-player'; + +const createMockPlayer = (overrides = {}) => ({ + source: vi.fn().mockReturnValue('source-result'), + on: vi.fn().mockReturnValue('on-result'), + one: vi.fn(), + off: vi.fn(), + play: vi.fn(), + pause: vi.fn(), + playlist: vi.fn().mockReturnValue('playlist-result'), + dispose: vi.fn(), + duration: vi.fn().mockReturnValue(120), + currentPublicId: vi.fn().mockReturnValue('my-video'), + videojs: { vr: vi.fn() }, + ...overrides +}); + +describe('deferred-player', () => { + describe('basic proxy behavior', () => { + it('returns a proxy synchronously', () => { + const proxy = createDeferredPlayer(new Promise(() => {})); + expect(proxy).toBeDefined(); + expect(typeof proxy).toBe('object'); + }); + + it('delegates to real player after resolution', async () => { + const mockPlayer = createMockPlayer(); + const proxy = createDeferredPlayer(Promise.resolve(mockPlayer)); + + await proxy; + + proxy.source('elephants'); + expect(mockPlayer.source).toHaveBeenCalledWith('elephants'); + }); + + it('returns real method return values after resolution', async () => { + const mockPlayer = createMockPlayer(); + const proxy = createDeferredPlayer(Promise.resolve(mockPlayer)); + + await proxy; + + const result = proxy.duration(); + expect(result).toBe(120); + }); + }); + + describe('call buffering', () => { + it('buffers method calls before player is ready', async () => { + let resolve; + const promise = new Promise((r) => { resolve = r; }); + const mockPlayer = createMockPlayer(); + const proxy = createDeferredPlayer(promise); + + proxy.source('elephants'); + proxy.on('error', () => {}); + proxy.playlist([{ publicId: 'a' }]); + + expect(mockPlayer.source).not.toHaveBeenCalled(); + expect(mockPlayer.on).not.toHaveBeenCalled(); + expect(mockPlayer.playlist).not.toHaveBeenCalled(); + + resolve(mockPlayer); + await promise; + + expect(mockPlayer.source).toHaveBeenCalledWith('elephants'); + expect(mockPlayer.on).toHaveBeenCalledWith('error', expect.any(Function)); + expect(mockPlayer.playlist).toHaveBeenCalledWith([{ publicId: 'a' }]); + }); + + it('replays buffered calls in order', async () => { + const callOrder = []; + const mockPlayer = createMockPlayer({ + source: vi.fn(() => callOrder.push('source')), + on: vi.fn(() => callOrder.push('on')), + play: vi.fn(() => callOrder.push('play')) + }); + + let resolve; + const promise = new Promise((r) => { resolve = r; }); + const proxy = createDeferredPlayer(promise); + + proxy.source('video1'); + proxy.on('ready', () => {}); + proxy.play(); + + resolve(mockPlayer); + await promise; + + expect(callOrder).toEqual(['source', 'on', 'play']); + }); + + it('returns proxy for chaining before resolution', () => { + const proxy = createDeferredPlayer(new Promise(() => {})); + + const result = proxy.source('elephants'); + expect(result).toBe(proxy); + }); + }); + + describe('thenable behavior', () => { + it('is thenable - resolves to the real player', async () => { + const mockPlayer = createMockPlayer(); + const proxy = createDeferredPlayer(Promise.resolve(mockPlayer)); + + const result = await proxy; + expect(result).toBe(mockPlayer); + }); + + it('supports .then() chaining', async () => { + const mockPlayer = createMockPlayer(); + const proxy = createDeferredPlayer(Promise.resolve(mockPlayer)); + + const id = await proxy.then((p) => p.currentPublicId()); + expect(id).toBe('my-video'); + }); + + it('supports .catch() on failure', async () => { + const error = new Error('load failed'); + const proxy = createDeferredPlayer(Promise.reject(error)); + + const caught = await proxy.catch((e) => e); + expect(caught).toBe(error); + }); + }); + + describe('property access', () => { + it('accesses real properties after resolution', async () => { + const mockPlayer = createMockPlayer(); + const proxy = createDeferredPlayer(Promise.resolve(mockPlayer)); + + await proxy; + + expect(proxy.videojs).toBe(mockPlayer.videojs); + }); + + it('has() returns true before resolution for any prop', () => { + const proxy = createDeferredPlayer(new Promise(() => {})); + expect('source' in proxy).toBe(true); + expect('anything' in proxy).toBe(true); + }); + + it('has() delegates to real player after resolution', async () => { + const mockPlayer = createMockPlayer(); + const proxy = createDeferredPlayer(Promise.resolve(mockPlayer)); + + await proxy; + + expect('source' in proxy).toBe(true); + expect('nonExistentMethod' in proxy).toBe(false); + }); + }); + + describe('error handling', () => { + it('rejects buffered calls when player fails to load', async () => { + const error = new Error('load failed'); + const proxy = createDeferredPlayer(Promise.reject(error)); + + proxy.source('elephants'); + + await proxy.catch(() => {}); + + expect(proxy.source).toBeUndefined(); + }); + + it('returns undefined for property access after failure', async () => { + const error = new Error('load failed'); + const proxy = createDeferredPlayer(Promise.reject(error)); + + await proxy.catch(() => {}); + + expect(proxy.anything).toBeUndefined(); + }); + }); +}); diff --git a/test/unit/legacy-cloudinary-new.test.js b/test/unit/legacy-cloudinary-new.test.js index 3b641e9a9..6f1b9936d 100644 --- a/test/unit/legacy-cloudinary-new.test.js +++ b/test/unit/legacy-cloudinary-new.test.js @@ -2,8 +2,8 @@ import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'; vi.mock('~/assets/styles/main.scss', () => ({})); -// Default export is the object returned by setupCloudinaryGlobal({ ... }) in src/index.umd.js -import cloudinary from '../../src/index.umd.js'; +// Tests the full (sync) UMD entry that preserves the legacy Cloudinary.new() API. +import cloudinary from '../../src/index.full.js'; describe('Cloudinary.new() legacy instance config', () => { let warnSpy; diff --git a/webpack/common.config.js b/webpack/common.config.js index 0d8f88b5f..7fc1d4bb1 100644 --- a/webpack/common.config.js +++ b/webpack/common.config.js @@ -12,12 +12,12 @@ const webpackConfig = { context: path.resolve(__dirname, '../src'), entry: { - 'cld-video-player': { - import: './index.umd.js', + 'player': { + import: './index.js', library: { name: 'cloudinary-video-player', type: 'umd' } }, - 'cld-video-player-lazy': { - import: './index.lazy.js', + 'player-full': { + import: './index.full.js', library: { name: 'cloudinary-video-player', type: 'umd' } } }, @@ -102,8 +102,29 @@ const webpackConfig = { new ESLintPlugin(), new DefinePlugin({ VERSION }), new MiniCssExtractPlugin({ - filename: `cld-video-player${minFilenamePart}.css` - }) + filename: `player${minFilenamePart}.css` + }), + { + apply(compiler) { + compiler.hooks.afterEmit.tapAsync('CopyAliases', (compilation, callback) => { + const fs = compiler.outputFileSystem; + const outputPath = compilation.outputOptions.path; + const copies = [ + [`player${minFilenamePart}.css`, `cld-video-player${minFilenamePart}.css`], + [`player-full${minFilenamePart}.js`, `cld-video-player${minFilenamePart}.js`] + ]; + let pending = copies.length; + copies.forEach(([src, dest]) => { + fs.readFile(path.join(outputPath, src), (err, data) => { + if (err) return --pending === 0 ? callback() : null; + fs.writeFile(path.join(outputPath, dest), data, () => { + if (--pending === 0) callback(); + }); + }); + }); + }); + } + } ] }; diff --git a/webpack/copy-light-bundle.js b/webpack/copy-light-bundle.js index 7f2314777..14ccbb553 100644 --- a/webpack/copy-light-bundle.js +++ b/webpack/copy-light-bundle.js @@ -1,24 +1,24 @@ const fs = require('fs'); const path = require('path'); -const src = path.resolve(__dirname, '../dist/cld-video-player.js'); -const dest = path.resolve(__dirname, '../dist/cld-video-player.light.js'); -const srcMin = path.resolve(__dirname, '../dist/cld-video-player.min.js'); -const destMin = path.resolve(__dirname, '../dist/cld-video-player.light.min.js'); +const dist = path.resolve(__dirname, '../dist'); + const warning = 'console.warn(\'[Cloudinary] The "light" video-player is deprecated and will be removed in a future release. The main player is now light by default. Please use that instead.\');\n'; -fs.readFile(src, 'utf8', (err, data) => { - if (err) throw err; - fs.writeFile(dest, warning + data, 'utf8', (err) => { - if (err) throw err; - console.log('Light bundle created with deprecation warning.'); - }); -}); +const copies = [ + { src: 'player-full.js', dest: 'cld-video-player.light.js' }, + { src: 'player-full.min.js', dest: 'cld-video-player.light.min.js' } +]; + +copies.forEach(({ src, dest }) => { + const srcPath = path.join(dist, src); + const destPath = path.join(dist, dest); -fs.readFile(srcMin, 'utf8', (err, data) => { - if (err) throw err; - fs.writeFile(destMin, warning + data, 'utf8', (err) => { + fs.readFile(srcPath, 'utf8', (err, data) => { if (err) throw err; - console.log('Light minified bundle created with deprecation warning.'); + fs.writeFile(destPath, warning + data, 'utf8', (err) => { + if (err) throw err; + console.log(`${dest} created (deprecated copy of ${src}).`); + }); }); -}); +}); From 6d582a7d0f48703de651ed6079a64b0f60dc8a0e Mon Sep 17 00:00:00 2001 From: Tsachi Shlidor Date: Thu, 16 Apr 2026 17:56:32 +0300 Subject: [PATCH 2/5] chore: old imports --- README.md | 8 ++++---- package.json | 12 +++++++++++- 2 files changed, 15 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index d7b786326..862ae1ac8 100644 --- a/README.md +++ b/README.md @@ -16,7 +16,7 @@ This README includes basic information for installation and getting started. Vie ```js import cloudinary from 'cloudinary-video-player'; - import 'cloudinary-video-player/cld-video-player.min.css'; + import 'cloudinary-video-player/player.min.css'; // import required plugins like that: // import 'cloudinary-video-player/chapters'; // import 'cloudinary-video-player/playlist'; @@ -26,7 +26,7 @@ This README includes basic information for installation and getting started. Vie ```js import cloudinary from 'cloudinary-video-player/all'; - import 'cloudinary-video-player/cld-video-player.min.css'; + import 'cloudinary-video-player/player.min.css'; ``` ### CDN @@ -34,9 +34,9 @@ This README includes basic information for installation and getting started. Vie Cloudinary Video Player can also be included directly from the [jsDelivr CDN](https://www.jsdelivr.com/), optional plugins will be lazy-loaded on demand: ```html - + - + ``` diff --git a/package.json b/package.json index 49d291ab5..82bc2b935 100644 --- a/package.json +++ b/package.json @@ -34,7 +34,17 @@ "./shoppable": "./lib/shoppable-widget.js", "./interaction-areas": "./lib/interaction-areas.service.js", "./*": "./lib/*", - "./light/*": "./lib/*" + "./light/*": "./lib/*", + + "__deprecated_exports_below__": "Kept for backwards compatibility.", + "./videoPlayer": { + "import": "./lib/index.js", + "require": "./dist/player-full.min.js" + }, + "./player": { + "import": "./lib/index.js", + "require": "./dist/player.min.js" + } }, "scripts": { "prepare": "shx cp env.example.js env.js", From 935383e387cdedcfabd81cbd11f476f3a57828f1 Mon Sep 17 00:00:00 2001 From: Tsachi Shlidor Date: Mon, 20 Apr 2026 16:47:56 +0300 Subject: [PATCH 3/5] chore: lazy-player (v4.x) example pages (#1034) * chore: example pages * chore: e2e * chore: e2e * chore: e2e * chore: e2e * chore: sync ESM variant * chore: align plugin names --- README.md | 10 -- docs/360.html | 8 +- docs/_template.html | 4 +- docs/adaptive-streaming.html | 6 +- docs/analytics.html | 4 +- docs/api.html | 4 +- docs/audio.html | 4 +- docs/autoplay-on-scroll.html | 4 +- docs/breakpoints.html | 6 +- docs/chapters.html | 4 +- docs/cloudinary-analytics.html | 4 +- docs/codec-formats.html | 6 +- docs/colors.html | 4 +- docs/components.html | 6 +- docs/custom-cld-errors.html | 6 +- docs/debug.html | 4 +- docs/embedded-iframe.html | 4 +- docs/es-modules/360.html | 6 +- docs/es-modules/_template.html | 2 +- docs/es-modules/adaptive-streaming.html | 2 +- docs/es-modules/all.html | 2 +- docs/es-modules/analytics.html | 2 +- docs/es-modules/api.html | 2 +- docs/es-modules/aspect-ratio-crop.html | 2 +- docs/es-modules/audio.html | 2 +- docs/es-modules/autoplay-on-scroll.html | 2 +- docs/es-modules/breakpoints.html | 4 +- docs/es-modules/chapters.html | 2 +- docs/es-modules/cloudinary-analytics.html | 4 +- docs/es-modules/codec-formats.html | 8 +- docs/es-modules/colors.html | 2 +- docs/es-modules/components.html | 5 +- docs/es-modules/custom-cld-errors.html | 2 +- docs/es-modules/debug.html | 2 +- docs/es-modules/entry-points.html | 105 ------------------ docs/es-modules/floating-player.html | 2 +- docs/es-modules/fluid.html | 4 +- docs/es-modules/force-hls-subtitles.html | 3 +- docs/es-modules/hdr.html | 2 +- docs/es-modules/highlights-graph.html | 2 +- docs/es-modules/index.html | 3 +- docs/es-modules/interaction-area.html | 2 +- docs/es-modules/lazy-loading.html | 9 +- docs/es-modules/lazy-player.html | 8 +- docs/es-modules/multiple-entry-points.html | 2 +- docs/es-modules/multiple-players.html | 2 +- docs/es-modules/playlist-by-tag.html | 45 ++++---- docs/es-modules/playlist.html | 2 +- docs/es-modules/poster.html | 3 +- docs/es-modules/profiles.html | 2 +- docs/es-modules/raw-url.html | 3 +- docs/es-modules/recommendations.html | 2 +- docs/es-modules/schedule.html | 6 +- docs/es-modules/seek-thumbs.html | 2 +- docs/es-modules/share-plugin.html | 3 +- docs/es-modules/shoppable.html | 2 +- docs/es-modules/subtitles-and-captions.html | 2 +- docs/es-modules/transformations.html | 4 +- docs/es-modules/tree-shaking.html | 10 +- docs/es-modules/ui-config.html | 2 +- docs/es-modules/vast-vpaid.html | 60 +++++----- docs/es-modules/video-details.html | 2 +- docs/es-modules/visual-search.html | 2 +- docs/floating-player.html | 4 +- docs/fluid.html | 4 +- docs/force-hls-subtitles-ios.html | 4 +- docs/hdr.html | 4 +- docs/highlights-graph.html | 4 +- docs/index.html | 6 +- docs/lazy-player.html | 2 +- docs/live-streaming.html | 4 +- docs/multiple-players.html | 4 +- docs/playlist-by-tag-captions.html | 6 +- docs/playlist.html | 6 +- docs/poster.html | 4 +- docs/profiles.html | 6 +- docs/raw-url.html | 4 +- docs/recommendations.html | 4 +- docs/schedule.html | 2 +- docs/seek-thumbs.html | 4 +- docs/shoppable.html | 4 +- docs/source-switcher.html | 4 +- docs/subtitles-and-captions.html | 4 +- docs/transformations.html | 4 +- docs/ui-config.html | 4 +- docs/vast-vpaid.html | 6 +- docs/visual-search.html | 4 +- package-lock.json | 19 ++++ package.json | 11 +- rollup.esm.config.js | 1 + .../shoppable-bar/layout/bar-layout.js | 2 +- .../layout/shoppable-panel-toggle.js | 2 +- .../layout/shoppable-products-overlay.js | 2 +- .../panel/shoppable-panel-item.js | 2 +- .../shoppable-bar/panel/shoppable-panel.js | 2 +- .../shoppable-bar/shoppable-post-widget.js | 2 +- ...ble-widget.const.js => shoppable.const.js} | 0 .../{shoppable-widget.js => shoppable.js} | 4 +- .../{shoppable-widget.scss => shoppable.scss} | 0 src/index.all.js | 4 +- src/plugins/interaction-areas/index.js | 2 +- ...-areas.service.js => interaction-areas.js} | 0 src/plugins/shoppable-plugin/index.js | 2 +- test/e2e/specs/ESM/esmEntryPointsPage.spec.ts | 21 ---- .../ESM/linksConsoleErrorsEsmPage.spec.ts | 2 +- test/e2e/testData/esmPageLinksData.ts | 1 - 106 files changed, 248 insertions(+), 368 deletions(-) delete mode 100644 docs/es-modules/entry-points.html rename src/components/shoppable-bar/{shoppable-widget.const.js => shoppable.const.js} (100%) rename src/components/shoppable-bar/{shoppable-widget.js => shoppable.js} (97%) rename src/components/shoppable-bar/{shoppable-widget.scss => shoppable.scss} (100%) rename src/plugins/interaction-areas/{interaction-areas.service.js => interaction-areas.js} (100%) delete mode 100644 test/e2e/specs/ESM/esmEntryPointsPage.spec.ts diff --git a/README.md b/README.md index 862ae1ac8..af4dc2fb6 100644 --- a/README.md +++ b/README.md @@ -17,16 +17,6 @@ This README includes basic information for installation and getting started. Vie ```js import cloudinary from 'cloudinary-video-player'; import 'cloudinary-video-player/player.min.css'; - // import required plugins like that: - // import 'cloudinary-video-player/chapters'; - // import 'cloudinary-video-player/playlist'; - ``` - -* Note - import `/all` to get all available plugins in a single import: - - ```js - import cloudinary from 'cloudinary-video-player/all'; - import 'cloudinary-video-player/player.min.css'; ``` ### CDN diff --git a/docs/360.html b/docs/360.html index a0a7e0fbe..f7a01d104 100644 --- a/docs/360.html +++ b/docs/360.html @@ -4,19 +4,19 @@ Cloudinary Video Player - + diff --git a/docs/_template.html b/docs/_template.html index af95fd85b..bb00feda2 100644 --- a/docs/_template.html +++ b/docs/_template.html @@ -17,8 +17,8 @@ We're loading scripts & style dynamically for development/testing. Real-world usage would look like this: - - + + --> diff --git a/docs/adaptive-streaming.html b/docs/adaptive-streaming.html index 0a018e71a..01aa13b2e 100644 --- a/docs/adaptive-streaming.html +++ b/docs/adaptive-streaming.html @@ -19,11 +19,11 @@ We're loading scripts & style dynamically for development/testing. Real-world usage would look like this: - - + + --> - + + + --> diff --git a/docs/api.html b/docs/api.html index 3bf6bc8f4..94e3c523f 100644 --- a/docs/api.html +++ b/docs/api.html @@ -17,8 +17,8 @@ We're loading scripts & style dynamically for development/testing. Real-world usage would look like this: - - + + --> diff --git a/docs/audio.html b/docs/audio.html index 98238bcd0..d44a4ba26 100644 --- a/docs/audio.html +++ b/docs/audio.html @@ -17,8 +17,8 @@ We're loading scripts & style dynamically for development/testing. Real-world usage would look like this: - - + + --> diff --git a/docs/autoplay-on-scroll.html b/docs/autoplay-on-scroll.html index ca1156181..db95ec69e 100644 --- a/docs/autoplay-on-scroll.html +++ b/docs/autoplay-on-scroll.html @@ -17,8 +17,8 @@ We're loading scripts & style dynamically for development/testing. Real-world usage would look like this: - - + + --> diff --git a/docs/breakpoints.html b/docs/breakpoints.html index 7616310ad..edd99d2b3 100644 --- a/docs/breakpoints.html +++ b/docs/breakpoints.html @@ -17,12 +17,12 @@ We're loading scripts & style dynamically for development/testing. Real-world usage would look like this: - - + + --> - +