Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

CLD-340-fixed-video-image-issue #98

Closed
wants to merge 7 commits into from
Closed

CLD-340-fixed-video-image-issue #98

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
bf997b5
CLD-340-fixed-video-image-issue
asad-rafter Jan 21, 2025
2e26f79
changes requested
asad-rafter Jan 21, 2025
c5df09f
requested changes
asad-rafter Jan 21, 2025
7515d46
changes requested
asad-rafter Jan 21, 2025
d548ba5
Fixed PD video image issue
asad-rafter Jan 23, 2025
93736f3
added sourceConfig
asad-rafter Jan 23, 2025
953c6c6
updated requested changes
asad-rafter Jan 27, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
52 changes: 22 additions & 30 deletions cartridges/int_cloudinary_pd/cartridge/static/default/js/cloudinaryVideos.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,31 +1,6 @@
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.
*/
'use strict';

window.initializeCloudinaryPlayers = function () {
if (!document.cloudinaryInit) {
document.cloudinaryInit = true;
let conf = {
Expand All @@ -35,7 +10,24 @@ $(document).ready(function () {
conf.secure_distribution = window.cname;
conf.private_cdn = true;
}
window.cld = window.cloudinary.Cloudinary.new(conf);
initializeCloudinaryPlayers();
window.cld = window.cldPDVideoPlayer.Cloudinary.new(conf);
yuval-cloudinary marked this conversation as resolved.
Show resolved Hide resolved
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." });
}
})
}
});
}
});
}
29 changes: 13 additions & 16 deletions ...oudinary_pd/cartridge/templates/default/experience/components/assets/cloudinaryVideo.isml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,29 +8,26 @@

<isscript>
// SFRA has a logic bug where full urls are added twice, so we need to check for duplicates before adding.
var assets = require('*/cartridge/scripts/assets.js');
var assets = require('*/cartridge/scripts/assets.js');

// Video Player CSS
var src = sitePref.CLDPDVideoPlayerCSSURL;
if (assets.styles.lastIndexOf(src) < 0) {
assets.addCss(src);
if (assets.styles.lastIndexOf(src) < 0) {
assets.addCss(src);
}

// Cloudinary Video Player JS
src = sitePref.CLDPDVideoPlayerJSURL;
if (assets.scripts.lastIndexOf(src) < 0) {
yuval-cloudinary marked this conversation as resolved.
Show resolved Hide resolved
assets.addJs(src);
}
assets.addJs('/js/cloudinaryVideos.js');
assets.addJs('/js/cloudinaryVideos.js');
</isscript>

<div class="cloudinary-video-container sfdc-component-mock sfdc-component-assets-media_library_video-mock">
<video id="${pdict.viewmodel.id}"></video>
<script>
var value = JSON.parse('<isprint value="${JSON.stringify(pdict.viewmodel)}" encoding="jsonvalue"/>');
window.players = window.players || [];
window.players.push(value);
window.cloudName = value.cloudName;
window.cname = value.cname || null;
</script>
</div>

<script>
var value = JSON.parse('<isprint value="${JSON.stringify(pdict.viewmodel)}" encoding="jsonvalue"/>');
window.players = window.players || [];
window.players.push(value);
window.cloudName = value.cloudName;
window.cname = value.cname || null;
</script>
<script src="${sitePref.CLDPDVideoPlayerJSURL}" onload="window.cldPDVideoPlayer = cloudinary; window.initializeCloudinaryPlayers()"> </script>
2 changes: 1 addition & 1 deletion example/cld_custom_i9n/cartridge/templates/default/experience/components/assets/example.isml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
51 changes: 20 additions & 31 deletions ...cld_custom_i9n/cartridge/templates/default/experience/components/assets/videoExample.isml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,40 +1,29 @@
<iscomment> TEMPLATENAME: example.isml </iscomment>
<isset name="sitePref" value="${dw.system.Site.current.preferences.custom}" scope="page" />

<isscript>
// SFRA has a logic bug where full urls are added twice, so we need to check for duplicates before adding.
var assets = require('*/cartridge/scripts/assets.js');

// Video Player CSS
var src = sitePref.CLDPDVideoPlayerCSSURL;
if (assets.styles.lastIndexOf(src) < 0) {
assets.addCss(src);
}
<h2>${pdict.headline}</h2>

// Cloudinary Video Player JS
src = sitePref.CLDPDVideoPlayerJSURL;
if (assets.scripts.lastIndexOf(src) < 0) {
assets.addJs(src);
}
<isscript>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The CSS part should be before the HTML

// SFRA has a logic bug where full urls are added twice, so we need to check for duplicates before adding.
var assets = require('*/cartridge/scripts/assets.js');

pdict.viewmodel.CLDPDShrinkwrapJSURL = sitePref.CLDPDShrinkwrapJSURL;
assets.addJs('/js/cloudinaryVideos.js');
// Video Player CSS
var src = sitePref.CLDPDVideoPlayerCSSURL;
if (assets.styles.lastIndexOf(src) < 0) {
assets.addCss(src);
}

assets.addJs('/js/cloudinaryVideos.js');
</isscript>

<h2>${pdict.headline}</h2>
<div class="cloudinary-video-container sfdc-component-mock sfdc-component-assets-media_library_video-mock">
<video id="${pdict.viewmodel.id}"></video>
<script>
var value = JSON.parse('<isprint value="${JSON.stringify(pdict.viewmodel)}" encoding="jsonvalue"/>');
window.players = window.players || [];
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);
}
</script>
</div>

<script>
var value = JSON.parse('<isprint value="${JSON.stringify(pdict.viewmodel)}" encoding="jsonvalue"/>');
window.players = window.players || [];
window.players.push(value);
window.cloudName = value.cloudName;
window.cname = value.cname || null;
</script>
<script src="${sitePref.CLDPDVideoPlayerJSURL}" onload="window.cldPDVideoPlayer = cloudinary; window.initializeCloudinaryPlayers()"> </script>