fix: undeprecate Cloudinary.new() (ONCALL-3380) (#619)

* fix: undeprecate Cloudinary.new() * chore: add an embedded player example * ci: netlify ignore unchanged * chore: example should default to edge
cloudinary · Apr 15, 2024 · 99de793 · 99de793
1 parent a034611
commit 99de793
Show file tree

Hide file tree

Showing 4 changed files with 100 additions and 1 deletion.
diff --git a/docs/embedded-iframe.html b/docs/embedded-iframe.html
@@ -0,0 +1,80 @@
+<!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 search = new URLSearchParams(window.location.search);
+      const ver = search.get('ver');
+
+      const url = `https://player.cloudinary.com/embed/?public_id=race_road_car&cloud_name=demo&vpv=${(ver ? ver : 'edge')}`
+
+      const iframe = document.getElementById('player');
+
+      iframe.src = url;
+    }, 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">Embedded (iframe) player</h3>
+
+    <iframe
+      id="player"
+      width="640"
+      height="360"
+      style="height: auto; width: 100%; aspect-ratio: 640 / 360;"
+      allow="autoplay; fullscreen; encrypted-media; picture-in-picture"
+      allowfullscreen
+      frameborder="0"
+    ></iframe>
+
+    <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;iframe
+        src="https://player.cloudinary.com/embed/?public_id=race_road_car&cloud_name=demo"
+        width="640"
+        height="360"
+        style="height: auto; width: 100%; aspect-ratio: 640 / 360;"
+        allow="autoplay; fullscreen; encrypted-media; picture-in-picture"
+        allowfullscreen
+        frameborder="0"
+      &gt;&lt;/iframe&gt;
+      </code>
+    </pre>
+  </div>
+
+</body>
+</html>
diff --git a/docs/es-modules/netlify.toml b/docs/es-modules/netlify.toml
@@ -0,0 +1,2 @@
+[build]
+  ignore = "false"
diff --git a/docs/index.html b/docs/index.html
@@ -81,6 +81,9 @@ <h3 class="mt-4">Some code examples:</h3>
       <li><a href="./ui-config.html">UI Config</a></li>
       <li><a href="./vast-vpaid.html">VAST & VPAID Support</a></li>
       <li><a href="./360.html">VR/360 Videos</a></li>
+      <hr>
+      <li><a href="./embedded-iframe.html">Embedded (iframe) player</a></li>
+      <li><a href="https://cld-vp-esm-pages.netlify.app/">ESM Imports</a></li>
     </ul>
 
   </div>

diff --git a/src/index.js b/src/index.js
@@ -26,11 +26,25 @@ export const videoPlayer = getVideoPlayer();
 export const videoPlayers = getVideoPlayers();
 export const videoPlayerWithProfile = getVideoPlayerWithProfile();
 
+const cloudinaryVideoPlayerLegacyConfig = config => {
+  console.warn(
+    'Cloudinary.new() is deprecated and will be removed. Please use cloudinary.videoPlayer() instead.'
+  );
+  return {
+    videoPlayer: getVideoPlayer(config),
+    videoPlayers: getVideoPlayers(config)
+  };
+};
+
 const cloudinary = {
   ...(window.cloudinary || {}),
   videoPlayer,
   videoPlayers,
-  videoPlayerWithProfile
+  videoPlayerWithProfile,
+  Cloudinary: {
+    // Backwards compatibility with SDK v1
+    new: cloudinaryVideoPlayerLegacyConfig
+  }
 };
 
 window.cloudinary = cloudinary;