Skip to content

Commit 9c0d6b2

Browse files
authored
feat: scheduler and rollup lazy-player (#1003)
* feat: schedule and lazy-player * chore: style loading * chore: player * chore: move to duration based schedule * chore: handle over-night ranges * feat: use rollup for esm (#1004) * feat: use rollup for esm * chore: cleanup * chore: rollup imports * chore: build * chore: deduplicate * chore: setupCloudinaryGlobal * chore: test over-night time-ranges * chore: improve E2E test pages * chore: fix tests build
1 parent 4705710 commit 9c0d6b2

88 files changed

Lines changed: 1790 additions & 736 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

.config/vitest.config.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ export default defineConfig({
3131
},
3232
resolve: {
3333
alias: {
34+
'~': path.resolve(process.cwd(), './src'),
3435
'@': path.resolve(process.cwd(), './src'),
3536
'src': path.resolve(process.cwd(), './src'),
3637
'assets': path.resolve(process.cwd(), './src/assets'),

docs/es-modules/adaptive-streaming.html

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -107,8 +107,6 @@ <h4>HLS with highQuality</h4>
107107

108108
<script type="module">
109109
import { videoPlayer } from 'cloudinary-video-player';
110-
import 'cloudinary-video-player/dash';
111-
import 'cloudinary-video-player/adaptive-streaming';
112110
import 'cloudinary-video-player/cld-video-player.min.css';
113111

114112
const cldConfig = {
@@ -118,12 +116,12 @@ <h4>HLS with highQuality</h4>
118116
};
119117

120118
const uap = new UAParser(navigator.userAgent);
121-
const playerHls = cloudinary.videoPlayer('example-player-hls', cldConfig);
122-
const playerHlsH265 = cloudinary.videoPlayer('example-player-hls-h265', cldConfig);
123-
const playerDash = cloudinary.videoPlayer('example-player-dash', cldConfig);
124-
const playerDashVp9 = cloudinary.videoPlayer('example-player-dash-vp9', cldConfig);
125-
const playerFastStart = cloudinary.videoPlayer('example-player-fast-start', cldConfig);
126-
const playerHighQuality = cloudinary.videoPlayer('example-player-high-quality', cldConfig);
119+
const playerHls = videoPlayer('example-player-hls', cldConfig);
120+
const playerHlsH265 = videoPlayer('example-player-hls-h265', cldConfig);
121+
const playerDash = videoPlayer('example-player-dash', cldConfig);
122+
const playerDashVp9 = videoPlayer('example-player-dash-vp9', cldConfig);
123+
const playerFastStart = videoPlayer('example-player-fast-start', cldConfig);
124+
const playerHighQuality = videoPlayer('example-player-high-quality', cldConfig);
127125

128126
playerHls.source(
129127
'sea_turtle',

docs/es-modules/api.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@ <h3 class="mb-4">API and Events</h3>
6969

7070
<script type="module">
7171
import { videoPlayer } from 'cloudinary-video-player';
72-
import 'cloudinary-video-player/playlist';
72+
7373

7474
import 'cloudinary-video-player/cld-video-player.min.css';
7575

docs/es-modules/chapters.html

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -65,8 +65,6 @@ <h4 class="mb-4">From an automatically taken VTT file</h4>
6565

6666
<script type="module">
6767
import { videoPlayer } from 'cloudinary-video-player';
68-
import 'cloudinary-video-player/chapters';
69-
7068
import 'cloudinary-video-player/cld-video-player.min.css';
7169

7270
const playerVTT = videoPlayer('player-vtt', {

docs/es-modules/colors.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ <h3 class="text-primary">Player 3</h3>
6464

6565
<script type="module">
6666
import { videoPlayers } from 'cloudinary-video-player';
67-
import 'cloudinary-video-player/colors';
67+
6868
import 'cloudinary-video-player/cld-video-player.min.css';
6969

7070
const players = videoPlayers('.cld-video-player', {

docs/es-modules/components.html

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -57,14 +57,11 @@ <h2>Custom Components</h2>
5757
</div>
5858

5959
<script type="module">
60-
import { videoPlayer } from 'cloudinary-video-player';
61-
import 'cloudinary-video-player/playlist';
62-
60+
import { videoPlayer, videojs } from 'cloudinary-video-player';
6361
import 'cloudinary-video-player/cld-video-player.min.css';
6462

6563
// Get the ClickableComponent base class from Video.js
66-
let vjs = window.videojs.default || window.videojs;
67-
const ClickableComponent = vjs.getComponent('ClickableComponent');
64+
const ClickableComponent = videojs.getComponent('ClickableComponent');
6865

6966
// Create a common class for playlist buttons
7067
class PlaylistButton extends ClickableComponent {
@@ -83,7 +80,7 @@ <h2>Custom Components</h2>
8380

8481
const typeCssClass = 'vjs-playlist-' + type + '-control';
8582

86-
return vjs.createEl('button', {
83+
return videojs.createEl('button', {
8784
// Prefixing classes of elements within a player with "vjs-"
8885
// is a convention used in Video.js.
8986
className: 'vjs-control vjs-playlist-control vjs-button ' + typeCssClass
@@ -119,8 +116,8 @@ <h2>Custom Components</h2>
119116
}
120117

121118
// Register the component with Video.js, so it can be used in players.
122-
vjs.registerComponent('NextButton', NextButton);
123-
vjs.registerComponent('PreviousButton', PreviousButton);
119+
videojs.registerComponent('NextButton', NextButton);
120+
videojs.registerComponent('PreviousButton', PreviousButton);
124121

125122
// Cloudinary Video Player related code
126123
// ====================================

docs/es-modules/debug.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ <h3 class="mb-4">Debug mode</h3>
3939

4040
<script type="module">
4141
import { videoPlayer } from 'cloudinary-video-player';
42-
import 'cloudinary-video-player/debug';
42+
4343
import 'cloudinary-video-player/cld-video-player.min.css';
4444

4545
const player = cloudinary.videoPlayer('player', {

docs/es-modules/entry-points.html

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Cloudinary Video Player - Entry Points Test</title>
6+
<link
7+
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"
8+
rel="icon"
9+
type="image/png"
10+
/>
11+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
12+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
13+
</head>
14+
<body>
15+
<div class="container p-4 col-12 col-md-9 col-xl-6">
16+
<nav class="nav mb-2">
17+
<a href="/index.html">&#60;&#60; Back to examples index</a>
18+
</nav>
19+
<h1>Cloudinary Video Player</h1>
20+
<h3 class="mb-4">Bundler Test: Entry Points</h3>
21+
22+
<p>Verifies every <code>exports</code> path in <code>package.json</code> resolves correctly.</p>
23+
24+
<h4 class="mt-3">Results:</h4>
25+
<pre id="results" class="bg-light p-3 border rounded" style="white-space: pre-wrap;"></pre>
26+
27+
<video
28+
id="player"
29+
class="cld-video-player cld-fluid"
30+
crossorigin="anonymous"
31+
controls
32+
muted
33+
playsinline
34+
></video>
35+
</div>
36+
37+
<script type="module">
38+
const log = (msg) => {
39+
const el = document.getElementById('results');
40+
el.textContent += msg + '\n';
41+
};
42+
43+
const check = (name, value) => {
44+
const type = typeof value;
45+
const ok = type === 'function' || type === 'object';
46+
log(`${ok ? '✅' : '❌'} ${name}: ${type}`);
47+
return ok;
48+
};
49+
50+
(async () => {
51+
try {
52+
// 1. Default entry - named exports
53+
const { videoPlayer, videoPlayers, player, players } = await import('cloudinary-video-player');
54+
check('videoPlayer (named)', videoPlayer);
55+
check('videoPlayers (named)', videoPlayers);
56+
check('player (named)', player);
57+
check('players (named)', players);
58+
59+
// 2. /videoPlayer sub-path
60+
const vpModule = await import('cloudinary-video-player/videoPlayer');
61+
check('videoPlayer (default from /videoPlayer)', vpModule.default);
62+
63+
// 3. /player sub-path
64+
const pModule = await import('cloudinary-video-player/player');
65+
check('player (default from /player)', pModule.default);
66+
67+
// 4. /all - with plugins
68+
const allModule = await import('cloudinary-video-player/all');
69+
check('cloudinary (default from /all)', allModule.default);
70+
check('videoPlayer (named from /all)', allModule.videoPlayer);
71+
72+
// 5. /lazy
73+
const lazyModule = await import('cloudinary-video-player/lazy');
74+
check('player (named from /lazy)', lazyModule.player);
75+
check('players (named from /lazy)', lazyModule.players);
76+
77+
// 6. CSS import
78+
await import('cloudinary-video-player/cld-video-player.min.css');
79+
log('✅ CSS import resolved');
80+
81+
// 7. Wildcard paths
82+
const dashModule = await import('cloudinary-video-player/dash');
83+
check('dash (wildcard export)', dashModule);
84+
85+
const debugModule = await import('cloudinary-video-player/debug');
86+
check('debug (wildcard export)', debugModule);
87+
88+
log('\n--- Creating player to verify runtime works ---');
89+
videoPlayer('player', { cloudName: 'demo', publicId: 'sea_turtle' });
90+
log('✅ Player created successfully');
91+
} catch (err) {
92+
log(`❌ Error: ${err.message}`);
93+
console.error(err);
94+
}
95+
})();
96+
</script>
97+
98+
<link
99+
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
100+
rel="stylesheet"
101+
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
102+
crossorigin="anonymous"
103+
/>
104+
</body>
105+
</html>

docs/es-modules/index.html

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,7 @@ <h3 class="mt-4">Code examples:</h3>
7171
<li><a href="./profiles.html">Profiles</a></li>
7272
<li><a href="./raw-url.html">Raw URL</a></li>
7373
<li><a href="./recommendations.html">Recommendations</a></li>
74+
<li><a href="./schedule.html">Schedule (weekly time slots)</a></li>
7475
<li><a href="./seek-thumbs.html">Seek Thumbnails</a></li>
7576
<li><a href="./share-plugin.html">Share &amp; Download</a></li>
7677
<li><a href="./shoppable.html">Shoppable Videos</a></li>
@@ -82,6 +83,12 @@ <h3 class="mt-4">Code examples:</h3>
8283
<li><a href="./360.html">VR/360 Videos</a></li>
8384
<hr>
8485
<li><a href="./all.html"><code>/all</code> build</a></li>
86+
<hr>
87+
<h4>Bundler Tests</h4>
88+
<li><a href="./entry-points.html">Entry Points (all exports)</a></li>
89+
<li><a href="./tree-shaking.html">Tree Shaking</a></li>
90+
<li><a href="./lazy-loading.html">Lazy Loading</a></li>
91+
<li><a href="./multiple-entry-points.html">Multiple Entry Points</a></li>
8592
</ul>
8693
</div>
8794
</body>

docs/es-modules/interaction-area.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@ <h3>Auto-zoom video cropping</h3>
8686

8787
<script type="module">
8888
import cloudinary from 'cloudinary-video-player/all';
89-
import 'cloudinary-video-player/interaction-areas';
89+
9090

9191
import 'cloudinary-video-player/cld-video-player.min.css';
9292

0 commit comments

Comments
 (0)