fix: esm examples (#609)

cloudinary · Apr 10, 2024 · 81c0831 · 81c0831
1 parent 634e15a
commit 81c0831
Show file tree

Hide file tree

Showing 7 changed files with 170 additions and 7 deletions.
diff --git a/docs/debug.html b/docs/debug.html
@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Cloudinary Video Player</title>
+  <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">
+
+  <!-- Bootstrap -->
+  <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">
+
+  <!-- highlight.js -->
+  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-light.min.css">
+  <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
+  <script>hljs.initHighlightingOnLoad();</script>
+
+  <!--
+    We're loading scripts & style dynamically for development/testing.
+    Real-world usage would look like this:
+
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cloudinary-video-player/dist/cld-video-player.min.css">
+    <script src="https://cdn.jsdelivr.net/npm/cloudinary-video-player/dist/cld-video-player.min.js"></script>
+
+  -->
+
+  <script type="text/javascript" src="./scripts.js"></script>
+
+  <script type="text/javascript">
+    window.addEventListener('load', function(){
+
+      const player = cloudinary.videoPlayer('player', {
+        cloudName: 'demo',
+        fluid: 'yes', // Should be a boolean
+        debug: true
+      });
+
+      player.source({
+        publicId: 'elephants'
+      })
+
+    }, false);
+  </script>
+
+</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">Debug mode</h3>
+
+    <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>
+
+    <video
+      id="player"
+      playsinline
+      controls
+      muted
+      autoplay
+      class="cld-video-player"
+      width="500"
+    ></video>
+
+    <p class="mt-4">
+      <a href="https://cloudinary.com/documentation/cloudinary_video_player">Full documentation</a>
+    </p>
+
+    <h3 class="mt-4">Example Code:</h3>
+    <pre>
+      <code class="language-html">
+        &lt;video
+          id="player"
+          controls
+          muted
+          autoplay
+          class="cld-video-player"
+          width="500"
+        &gt;&lt;/video&gt;
+      </code>
+      <code class="language-javascript">
+
+        const player = cloudinary.videoPlayer('player', {
+          cloudName: 'demo',
+          fluid: 'yes', // Should be a boolean
+          debug: true
+        });
+
+        player.source({
+          publicId: 'elephants'
+        })
+
+      </code>
+    </pre>
+  </div>
+
+</body>
+</html>
diff --git a/docs/es-modules/_template.html b/docs/es-modules/_template.html
@@ -41,9 +41,9 @@ <h3 class="mb-4">TITLE</h3>
       import { videoPlayer } from 'cloudinary-video-player';
       import 'cloudinary-video-player/cld-video-player.min.css';
 
-      const player = cloudinary.videoPlayer('player', {
+      const player = videoPlayer('player', {
         cloudName: 'demo',
-        publicId: 'video-player/Golden-Gate-Bridge'
+        publicId: 'dog'
       });
     </script>
 

diff --git a/docs/es-modules/debug.html b/docs/es-modules/debug.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Cloudinary Video Player</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">Debug mode</h3>
+
+      <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>
+
+      <video
+        id="player"
+        class="cld-video-player cld-fluid"
+        crossorigin="anonymous"
+        controls
+        muted
+        playsinline
+      ></video>
+
+      <p class="mt-4">
+        <a href="https://cloudinary.com/documentation/cloudinary_video_player"
+          >Full documentation</a
+        >
+      </p>
+    </div>
+
+    <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', {
+        cloudName: 'demo',
+        fluid: 'yes', // Should be a boolean
+        debug: true
+      });
+
+      player.source({
+        publicId: 'dog'
+      })
+    </script>
+
+    <!-- Bootstrap -->
+    <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>
diff --git a/docs/es-modules/index.html b/docs/es-modules/index.html
@@ -54,6 +54,7 @@ <h3 class="mt-4">Code examples:</h3>
         <li><a href="./colors.html">Colors API</a></li>
         <li><a href="./components.html">Components</a></li>
         <li><a href="./custom-cld-errors.html">Custom Errors</a></li>
+        <li><a href="./debug.html">Debug</a></li>
         <li><a href="./ui-config.html">Display Configurations</a></li>
         <li><a href="./floating-player.html">Floating Player</a></li>
         <li><a href="./fluid.html">Fluid Layouts</a></li>

diff --git a/docs/es-modules/package-lock.json b/docs/es-modules/package-lock.json
diff --git a/docs/index.html b/docs/index.html
@@ -60,6 +60,7 @@ <h3 class="mt-4">Some code examples:</h3>
       <li><a href="./components.html">Components</a></li>
       <li><a href="./custom-cld-errors.html">Custom Errors</a></li>
       <li><a href="./ui-config.html">Display Configurations</a></li>
+      <li><a href="./debug.html">Debug mode</a></li>
       <li><a href="./es-imports.html">ES Module Imports</a></li>
       <li><a href="./floating-player.html">Floating Player</a></li>
       <li><a href="./fluid.html">Fluid Layouts</a></li>

diff --git a/src/validators/validators-functions.js b/src/validators/validators-functions.js
@@ -54,7 +54,7 @@ export const isValidConfig = (config, validators) => {
  * @returns boolean - true is the configuration object is valid and false if it is not
  */
 export const isValidPlayerConfig = async (config) => {
-  return import(/* webpackChunkName: "validators" */ './validators').then(({playerValidators}) => {
+  return import(/* webpackChunkName: "debug" */ './validators').then(({playerValidators}) => {
     return isValidConfig(config, playerValidators);
   });
 };
@@ -65,7 +65,7 @@ export const isValidPlayerConfig = async (config) => {
  * @returns boolean - true is the configuration object is valid and false if it is not
  */
 export const isValidSourceConfig = (config) => {
-  return import(/* webpackChunkName: "validators" */ './validators').then(({sourceValidators}) => {
+  return import(/* webpackChunkName: "debug" */ './validators').then(({sourceValidators}) => {
     return isValidConfig(config, sourceValidators);
   });
 };