Skip to content

Commit 81c0831

Browse files
tsitsi
authored
fix: esm examples (#609)
1 parent 634e15a commit 81c0831

File tree

7 files changed

+170
-7
lines changed

7 files changed

+170
-7
lines changed

‎docs/debug.html‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Cloudinary Video Player</title>
6+
<link href="https://res.cloudinary.com/cloudinary-marketing/image/upload/f_auto,q_auto/c_scale,w_32/v1597183771/creative_staging/cloudinary_internal/Website/Brand%20Updates/Favicon/cloudinary_web_favicon_192x192.png" rel="icon" type="image/png">
7+
8+
<!-- Bootstrap -->
9+
<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">
10+
11+
<!-- highlight.js -->
12+
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-light.min.css">
13+
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
14+
<script>hljs.initHighlightingOnLoad();</script>
15+
16+
<!--
17+
We're loading scripts & style dynamically for development/testing.
18+
Real-world usage would look like this:
19+
20+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cloudinary-video-player/dist/cld-video-player.min.css">
21+
<script src="https://cdn.jsdelivr.net/npm/cloudinary-video-player/dist/cld-video-player.min.js"></script>
22+
23+
-->
24+
25+
<script type="text/javascript" src="./scripts.js"></script>
26+
27+
<script type="text/javascript">
28+
window.addEventListener('load', function(){
29+
30+
const player = cloudinary.videoPlayer('player', {
31+
cloudName: 'demo',
32+
fluid: 'yes', // Should be a boolean
33+
debug: true
34+
});
35+
36+
player.source({
37+
publicId: 'elephants'
38+
})
39+
40+
}, false);
41+
</script>
42+
43+
</head>
44+
<body>
45+
<div class="container p-4 col-12 col-md-9 col-xl-6">
46+
<nav class="nav mb-2">
47+
<a href="./index.html">&#60;&#60; Back to examples index</a>
48+
</nav>
49+
<h1>Cloudinary Video Player</h1>
50+
<h3 class="mb-4">Debug mode</h3>
51+
52+
<p>This mode adds debugging information to the video player. It will validate the configuration passed to the player and warn about any issues.</p>
53+
54+
<video
55+
id="player"
56+
playsinline
57+
controls
58+
muted
59+
autoplay
60+
class="cld-video-player"
61+
width="500"
62+
></video>
63+
64+
<p class="mt-4">
65+
<a href="https://cloudinary.com/documentation/cloudinary_video_player">Full documentation</a>
66+
</p>
67+
68+
<h3 class="mt-4">Example Code:</h3>
69+
<pre>
70+
<code class="language-html">
71+
&lt;video
72+
id="player"
73+
controls
74+
muted
75+
autoplay
76+
class="cld-video-player"
77+
width="500"
78+
&gt;&lt;/video&gt;
79+
</code>
80+
<code class="language-javascript">
81+
82+
const player = cloudinary.videoPlayer('player', {
83+
cloudName: 'demo',
84+
fluid: 'yes', // Should be a boolean
85+
debug: true
86+
});
87+
88+
player.source({
89+
publicId: 'elephants'
90+
})
91+
92+
</code>
93+
</pre>
94+
</div>
95+
96+
</body>
97+
</html>

‎docs/es-modules/_template.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -41,9 +41,9 @@ <h3 class="mb-4">TITLE</h3>
4141
import { videoPlayer } from 'cloudinary-video-player';
4242
import 'cloudinary-video-player/cld-video-player.min.css';
4343

44-
const player = cloudinary.videoPlayer('player', {
44+
const player = videoPlayer('player', {
4545
cloudName: 'demo',
46-
publicId: 'video-player/Golden-Gate-Bridge'
46+
publicId: 'dog'
4747
});
4848
</script>
4949

‎docs/es-modules/debug.html‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Cloudinary Video Player</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">Debug mode</h3>
21+
22+
<p>This mode adds debugging information to the video player. It will validate the configuration passed to the player and warn about any issues.</p>
23+
24+
<video
25+
id="player"
26+
class="cld-video-player cld-fluid"
27+
crossorigin="anonymous"
28+
controls
29+
muted
30+
playsinline
31+
></video>
32+
33+
<p class="mt-4">
34+
<a href="https://cloudinary.com/documentation/cloudinary_video_player"
35+
>Full documentation</a
36+
>
37+
</p>
38+
</div>
39+
40+
<script type="module">
41+
import { videoPlayer } from 'cloudinary-video-player';
42+
import 'cloudinary-video-player/debug';
43+
import 'cloudinary-video-player/cld-video-player.min.css';
44+
45+
const player = cloudinary.videoPlayer('player', {
46+
cloudName: 'demo',
47+
fluid: 'yes', // Should be a boolean
48+
debug: true
49+
});
50+
51+
player.source({
52+
publicId: 'dog'
53+
})
54+
</script>
55+
56+
<!-- Bootstrap -->
57+
<link
58+
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
59+
rel="stylesheet"
60+
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
61+
crossorigin="anonymous"
62+
/>
63+
</body>
64+
</html>

‎docs/es-modules/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@ <h3 class="mt-4">Code examples:</h3>
5454
<li><a href="./colors.html">Colors API</a></li>
5555
<li><a href="./components.html">Components</a></li>
5656
<li><a href="./custom-cld-errors.html">Custom Errors</a></li>
57+
<li><a href="./debug.html">Debug</a></li>
5758
<li><a href="./ui-config.html">Display Configurations</a></li>
5859
<li><a href="./floating-player.html">Floating Player</a></li>
5960
<li><a href="./fluid.html">Fluid Layouts</a></li>

‎docs/es-modules/package-lock.json‎

Lines changed: 3 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,7 @@ <h3 class="mt-4">Some code examples:</h3>
6060
<li><a href="./components.html">Components</a></li>
6161
<li><a href="./custom-cld-errors.html">Custom Errors</a></li>
6262
<li><a href="./ui-config.html">Display Configurations</a></li>
63+
<li><a href="./debug.html">Debug mode</a></li>
6364
<li><a href="./es-imports.html">ES Module Imports</a></li>
6465
<li><a href="./floating-player.html">Floating Player</a></li>
6566
<li><a href="./fluid.html">Fluid Layouts</a></li>

‎src/validators/validators-functions.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ export const isValidConfig = (config, validators) => {
5454
* @returns boolean - true is the configuration object is valid and false if it is not
5555
*/
5656
export const isValidPlayerConfig = async (config) => {
57-
return import(/* webpackChunkName: "validators" */ './validators').then(({playerValidators}) => {
57+
return import(/* webpackChunkName: "debug" */ './validators').then(({playerValidators}) => {
5858
return isValidConfig(config, playerValidators);
5959
});
6060
};
@@ -65,7 +65,7 @@ export const isValidPlayerConfig = async (config) => {
6565
* @returns boolean - true is the configuration object is valid and false if it is not
6666
*/
6767
export const isValidSourceConfig = (config) => {
68-
return import(/* webpackChunkName: "validators" */ './validators').then(({sourceValidators}) => {
68+
return import(/* webpackChunkName: "debug" */ './validators').then(({sourceValidators}) => {
6969
return isValidConfig(config, sourceValidators);
7070
});
7171
};

0 commit comments

Comments
 (0)