feat: scheduler and rollup lazy-player

.config/vitest.config.ts

@@ -31,6 +31,7 @@ export default defineConfig({
   },
   resolve: {
     alias: {
+      '~': path.resolve(process.cwd(), './src'),
       '@': path.resolve(process.cwd(), './src'),
       'src': path.resolve(process.cwd(), './src'),
       'assets': path.resolve(process.cwd(), './src/assets'),

docs/es-modules/adaptive-streaming.html

@@ -107,8 +107,6 @@ <h4>HLS with highQuality</h4>
 
     <script type="module">
       import { videoPlayer } from 'cloudinary-video-player';
-      import 'cloudinary-video-player/dash';
-      import 'cloudinary-video-player/adaptive-streaming';
       import 'cloudinary-video-player/cld-video-player.min.css';
 
       const cldConfig = { 
@@ -118,12 +116,12 @@ <h4>HLS with highQuality</h4>
       };
 
       const uap = new UAParser(navigator.userAgent);
-      const playerHls = cloudinary.videoPlayer('example-player-hls', cldConfig);
-      const playerHlsH265 = cloudinary.videoPlayer('example-player-hls-h265', cldConfig);
-      const playerDash = cloudinary.videoPlayer('example-player-dash', cldConfig);
-      const playerDashVp9 = cloudinary.videoPlayer('example-player-dash-vp9', cldConfig);
-      const playerFastStart = cloudinary.videoPlayer('example-player-fast-start', cldConfig);
-      const playerHighQuality = cloudinary.videoPlayer('example-player-high-quality', cldConfig);
+      const playerHls = videoPlayer('example-player-hls', cldConfig);
+      const playerHlsH265 = videoPlayer('example-player-hls-h265', cldConfig);
+      const playerDash = videoPlayer('example-player-dash', cldConfig);
+      const playerDashVp9 = videoPlayer('example-player-dash-vp9', cldConfig);
+      const playerFastStart = videoPlayer('example-player-fast-start', cldConfig);
+      const playerHighQuality = videoPlayer('example-player-high-quality', cldConfig);
 
       playerHls.source(
         'sea_turtle',

docs/es-modules/api.html

@@ -69,7 +69,7 @@ <h3 class="mb-4">API and Events</h3>
 
     <script type="module">
       import { videoPlayer } from 'cloudinary-video-player';
-      import 'cloudinary-video-player/playlist';
+
 
       import 'cloudinary-video-player/cld-video-player.min.css';
 

docs/es-modules/chapters.html

@@ -65,8 +65,6 @@ <h4 class="mb-4">From an automatically taken VTT file</h4>
 
     <script type="module">
       import { videoPlayer } from 'cloudinary-video-player';
-      import 'cloudinary-video-player/chapters';
-
       import 'cloudinary-video-player/cld-video-player.min.css';
 
       const playerVTT = videoPlayer('player-vtt', {

docs/es-modules/colors.html

@@ -64,7 +64,7 @@ <h3 class="text-primary">Player 3</h3>
 
     <script type="module">
       import { videoPlayers } from 'cloudinary-video-player';
-      import 'cloudinary-video-player/colors';
+
       import 'cloudinary-video-player/cld-video-player.min.css';
 
       const players = videoPlayers('.cld-video-player', {

docs/es-modules/components.html

@@ -57,14 +57,11 @@ <h2>Custom Components</h2>
     </div>
 
     <script type="module">
-      import { videoPlayer } from 'cloudinary-video-player';
-      import 'cloudinary-video-player/playlist';
-
+      import { videoPlayer, videojs } from 'cloudinary-video-player';
       import 'cloudinary-video-player/cld-video-player.min.css';
 
       // Get the ClickableComponent base class from Video.js
-      let vjs = window.videojs.default || window.videojs;
-      const ClickableComponent = vjs.getComponent('ClickableComponent');
+      const ClickableComponent = videojs.getComponent('ClickableComponent');
 
       // Create a common class for playlist buttons
       class PlaylistButton extends ClickableComponent {
@@ -83,7 +80,7 @@ <h2>Custom Components</h2>
 
           const typeCssClass = 'vjs-playlist-' + type + '-control';
 
-          return vjs.createEl('button', {
+          return videojs.createEl('button', {
             // Prefixing classes of elements within a player with "vjs-"
             // is a convention used in Video.js.
             className: 'vjs-control vjs-playlist-control vjs-button ' + typeCssClass
@@ -119,8 +116,8 @@ <h2>Custom Components</h2>
       }
 
       // Register the component with Video.js, so it can be used in players.
-      vjs.registerComponent('NextButton', NextButton);
-      vjs.registerComponent('PreviousButton', PreviousButton);
+      videojs.registerComponent('NextButton', NextButton);
+      videojs.registerComponent('PreviousButton', PreviousButton);
 
       // Cloudinary Video Player related code
       // ====================================

docs/es-modules/debug.html

@@ -39,7 +39,7 @@ <h3 class="mb-4">Debug mode</h3>
 
     <script type="module">
       import { videoPlayer } from 'cloudinary-video-player';
-      import 'cloudinary-video-player/debug';
+
       import 'cloudinary-video-player/cld-video-player.min.css';
 
       const player = cloudinary.videoPlayer('player', {

docs/es-modules/entry-points.html

@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Cloudinary Video Player - Entry Points Test</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">Bundler Test: Entry Points</h3>
+
+      <p>Verifies every <code>exports</code> path in <code>package.json</code> resolves correctly.</p>
+
+      <h4 class="mt-3">Results:</h4>
+      <pre id="results" class="bg-light p-3 border rounded" style="white-space: pre-wrap;"></pre>
+
+      <video
+        id="player"
+        class="cld-video-player cld-fluid"
+        crossorigin="anonymous"
+        controls
+        muted
+        playsinline
+      ></video>
+    </div>
+
+    <script type="module">
+      const log = (msg) => {
+        const el = document.getElementById('results');
+        el.textContent += msg + '\n';
+      };
+
+      const check = (name, value) => {
+        const type = typeof value;
+        const ok = type === 'function' || type === 'object';
+        log(`${ok ? '✅' : '❌'} ${name}: ${type}`);
+        return ok;
+      };
+
+      (async () => {
+        try {
+          // 1. Default entry - named exports
+          const { videoPlayer, videoPlayers, player, players } = await import('cloudinary-video-player');
+          check('videoPlayer (named)', videoPlayer);
+          check('videoPlayers (named)', videoPlayers);
+          check('player (named)', player);
+          check('players (named)', players);
+
+          // 2. /videoPlayer sub-path
+          const vpModule = await import('cloudinary-video-player/videoPlayer');
+          check('videoPlayer (default from /videoPlayer)', vpModule.default);
+
+          // 3. /player sub-path
+          const pModule = await import('cloudinary-video-player/player');
+          check('player (default from /player)', pModule.default);
+
+          // 4. /all - with plugins
+          const allModule = await import('cloudinary-video-player/all');
+          check('cloudinary (default from /all)', allModule.default);
+          check('videoPlayer (named from /all)', allModule.videoPlayer);
+
+          // 5. /lazy
+          const lazyModule = await import('cloudinary-video-player/lazy');
+          check('player (named from /lazy)', lazyModule.player);
+          check('players (named from /lazy)', lazyModule.players);
+
+          // 6. CSS import
+          await import('cloudinary-video-player/cld-video-player.min.css');
+          log('✅ CSS import resolved');
+
+          // 7. Wildcard paths
+          const dashModule = await import('cloudinary-video-player/dash');
+          check('dash (wildcard export)', dashModule);
+
+          const debugModule = await import('cloudinary-video-player/debug');
+          check('debug (wildcard export)', debugModule);
+
+          log('\n--- Creating player to verify runtime works ---');
+          videoPlayer('player', { cloudName: 'demo', publicId: 'sea_turtle' });
+          log('✅ Player created successfully');
+        } catch (err) {
+          log(`❌ Error: ${err.message}`);
+          console.error(err);
+        }
+      })();
+    </script>
+
+    <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>

docs/es-modules/index.html

@@ -71,6 +71,7 @@ <h3 class="mt-4">Code examples:</h3>
         <li><a href="./profiles.html">Profiles</a></li>
         <li><a href="./raw-url.html">Raw URL</a></li>
         <li><a href="./recommendations.html">Recommendations</a></li>
+        <li><a href="./schedule.html">Schedule (weekly time slots)</a></li>
         <li><a href="./seek-thumbs.html">Seek Thumbnails</a></li>
         <li><a href="./share-plugin.html">Share &amp; Download</a></li>
         <li><a href="./shoppable.html">Shoppable Videos</a></li>
@@ -82,6 +83,12 @@ <h3 class="mt-4">Code examples:</h3>
         <li><a href="./360.html">VR/360 Videos</a></li>
         <hr>
         <li><a href="./all.html"><code>/all</code> build</a></li>
+        <hr>
+        <h4>Bundler Tests</h4>
+        <li><a href="./entry-points.html">Entry Points (all exports)</a></li>
+        <li><a href="./tree-shaking.html">Tree Shaking</a></li>
+        <li><a href="./lazy-loading.html">Lazy Loading</a></li>
+        <li><a href="./multiple-entry-points.html">Multiple Entry Points</a></li>
       </ul>
     </div>
   </body>

docs/es-modules/interaction-area.html

@@ -86,7 +86,7 @@ <h3>Auto-zoom video cropping</h3>
 
     <script type="module">
       import cloudinary from 'cloudinary-video-player/all';
-      import 'cloudinary-video-player/interaction-areas';
+
 
       import 'cloudinary-video-player/cld-video-player.min.css';
 

docs/es-modules/lazy-loading.html

@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Cloudinary Video Player - Lazy Loading Test</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">Bundler Test: Lazy Loading</h3>
+
+      <p>
+        Only the tiny lazy stub loads on page load. The full player core loads on demand
+        when you click the button below. Watch the <strong>Network</strong> tab.
+      </p>
+
+      <h4 class="mt-3">Results:</h4>
+      <pre id="results" class="bg-light p-3 border rounded" style="white-space: pre-wrap;"></pre>
+
+      <button type="button" id="load-btn" class="btn btn-primary mb-3">Load Player</button>
+
+      <video
+        id="player"
+        class="cld-video-player cld-fluid"
+        crossorigin="anonymous"
+        controls
+        muted
+        playsinline
+      ></video>
+
+      <h4 class="mt-4">What to check in DevTools:</h4>
+      <ul>
+        <li>On page load, only the lazy stub JS should appear in the Network tab</li>
+        <li>After clicking "Load Player", the core player chunks should load</li>
+        <li>The player should render and play video after loading</li>
+      </ul>
+    </div>
+
+    <script type="module">
+      import { player } from 'cloudinary-video-player/lazy';
+      import 'cloudinary-video-player/cld-video-player.min.css';
+
+      const log = (msg) => {
+        document.getElementById('results').textContent += msg + '\n';
+      };
+
+      log('✅ Lazy stub imported - core player NOT yet loaded');
+      log('📋 Check Network tab: only the lazy entry chunk should be present');
+      log('\n⏳ Click "Load Player" to trigger dynamic import...\n');
+
+      document.getElementById('load-btn').addEventListener('click', async () => {
+        log('🔄 Loading player core...');
+        const start = performance.now();
+
+        try {
+          const p = await player('player', {
+            cloudName: 'demo',
+            publicId: 'sea_turtle',
+            autoplay: true,
+          });
+          const elapsed = Math.round(performance.now() - start);
+          log(`✅ Player loaded and created in ${elapsed}ms`);
+          log('📋 Check Network tab: core chunks should now appear');
+        } catch (err) {
+          log(`❌ Error: ${err.message}`);
+          console.error(err);
+        }
+      });
+    </script>
+
+    <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>