feat: use rollup for esm

.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/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/package.json

@@ -3,8 +3,8 @@
   "private": true,
   "version": "0.0.1",
   "scripts": {
-    "prepare-player": "cd ../../ && npm i && npm run build-all",
-    "install-player": "npm i ../../ --no-save",
+    "prepare-player": "cd ../.. && npm i && npm run build-es",
+    "install-player": "npm i ../.. --no-save",
     "prepare": "npm run prepare-player && npm run install-player",
     "update-edge": "npm i",
     "start": "vite",

docs/es-modules/playlist-by-tag.html

@@ -41,7 +41,7 @@ <h3 class="mb-4">Playlist by tag (with captions)</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/playlist.html

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