CLD-340-fixed-video-image-issue

cartridges/int_cloudinary_pd/cartridge/static/default/js/cloudinaryVideos.js

@@ -1,31 +1,4 @@
 function initializeCloudinaryPlayers() {
-    const convertToSnakeCase = obj => JSON.parse(JSON.stringify(obj).replace(/"([^"]+)":/g, (_, p1) => `"${p1.replace(/([a-z])([A-Z])/g, '$1_$2').toLowerCase()}":`));
-    window.players.forEach(player => {
-        if (player) {
-            const pCnf = JSON.parse(player.playerConf);
-            const p = window.cld.videoPlayer(player.id, pCnf.playerConfig);
-            pCnf.sourceConfig['transformation'] = convertToSnakeCase(pCnf.sourceConfig.transformation)
-            pCnf.playerConfig['cloudName'] = pCnf.cloudName;
-            p.source(pCnf.publicId, pCnf.sourceConfig);
-            p.on('error', function (e) {
-                const error = e.Player.videojs.error();
-                if (error && error.code === 10) {
-                    p.videojs.error(null);
-                    p.videojs.error({ code: null, message: "Generating the video, please wait." });
-                }
-            })
-        }
-    });
-}
-
-
-$(document).ready(function () {
-    /**
-     * Page Designer does not become active until document.ready. Because if this
-     * it waits until streaming videos fully load. We need to delay initializing
-     * Cloudinary video player a little bit.
-     */
-
     if (!document.cloudinaryInit) {
         document.cloudinaryInit = true;
         let conf = {
@@ -35,7 +8,33 @@ $(document).ready(function () {
             conf.secure_distribution = window.cname;
             conf.private_cdn = true;
         }
-        window.cld = window.cloudinary.Cloudinary.new(conf);
-        initializeCloudinaryPlayers();
+        var cld = window.cldPDVideoPlayer.Cloudinary.new(conf);
+        const convertToSnakeCase = obj => JSON.parse(JSON.stringify(obj).replace(/"([^"]+)":/g, (_, p1) => `"${p1.replace(/([a-z])([A-Z])/g, '$1_$2').toLowerCase()}":`));
+        window.players.forEach(player => {
+            if (player) {
+                const pCnf = JSON.parse(player.playerConf);
+                const p = cld.videoPlayer(player.id, pCnf.playerConfig);
+                pCnf.sourceConfig['transformation'] = convertToSnakeCase(pCnf.sourceConfig.transformation)
+                pCnf.playerConfig['cloudName'] = pCnf.cloudName;
+                p.source(pCnf.publicId, pCnf.sourceConfig);
+                p.on('error', function (e) {
+                    const error = e.Player.videojs.error();
+                    if (error && error.code === 10) {
+                        p.videojs.error(null);
+                        p.videojs.error({ code: null, message: "Generating the video, please wait." });
+                    }
+                })
+            }
+        });
     }
+}
+
+
+$(document).ready(function () {
+    /**
+     * Page Designer does not become active until document.ready. Because if this
+     * it waits until streaming videos fully load. We need to delay initializing
+     * Cloudinary video player a little bit.
+     */
+    initializeCloudinaryPlayers();
 });

cartridges/int_cloudinary_pd/cartridge/templates/default/experience/components/assets/cloudinaryVideo.isml

@@ -32,5 +32,6 @@
 		window.players.push(value);
 		window.cloudName = value.cloudName;
 		window.cname = value.cname || null;
+		window.cldPDVideoPlayer = cloudinary;
 	</script>
 </div>

example/cld_custom_i9n/cartridge/templates/default/experience/components/assets/example.isml

@@ -31,5 +31,5 @@
 <div class="cloudinary-media-library-container sfdc-component-mock sfdc-component-assets-media_library-mock">
     <img class="component-media_library ml-image" src="${pdict.viewmodel.placeholder}"
         data-real-url="${pdict.viewmodel.src}" id="${pdict.viewmodel.id}" alt="${pdict.viewmodel.altText}"
-        style="max-width: 100%">
+        style="max-width: 100%" />
 </div>

example/cld_custom_i9n/cartridge/templates/default/experience/components/assets/videoExample.isml

@@ -30,11 +30,6 @@
         window.players.push(value);
         window.cloudName = value.cloudName;
         window.cname = value.cname || null;
-
-        // Check if the Cloudinary Core JS is inculded
-        const shrinkWrapJs = document.querySelector('script[src="'+value.CLDPDShrinkwrapJSURL+'"]');
-        if (shrinkWrapJs) {
-            shrinkWrapJs.parentNode.removeChild(shrinkWrapJs);
-        }
+		window.cldPDVideoPlayer = cloudinary;
     </script>
 </div>