Skip to content

Commit 4a54632

Browse files
yuval-cloudinaryyuval-cloudinary
authored
Merge pull request #99 from asad-rafter/CLD-340-update-video-image-issue
Cld 340 update video image issue
2 parents 4906176 + eaf28fa commit 4a54632

4 files changed

Lines changed: 51 additions & 81 deletions

File tree

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

Lines changed: 12 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,21 @@
11
function initializeCloudinaryPlayers() {
2+
let conf = {
3+
cloud_name: window.cloudName
4+
}
5+
if (window.cname) {
6+
conf.secure_distribution = window.cname;
7+
conf.private_cdn = true;
8+
}
9+
const cld = window.cldPDVideoPlayer.Cloudinary.new(conf);
210
const convertToSnakeCase = obj => JSON.parse(JSON.stringify(obj).replace(/"([^"]+)":/g, (_, p1) => `"${p1.replace(/([a-z])([A-Z])/g, '$1_$2').toLowerCase()}":`));
11+
312
window.players.forEach(player => {
413
if (player) {
514
const pCnf = JSON.parse(player.playerConf);
6-
const p = window.cld.videoPlayer(player.id, pCnf.playerConfig);
15+
const p = cld.videoPlayer(player.id, pCnf.playerConfig);
716
pCnf.sourceConfig['transformation'] = convertToSnakeCase(pCnf.sourceConfig.transformation)
817
pCnf.playerConfig['cloudName'] = pCnf.cloudName;
18+
pCnf.sourceConfig['cloud_name'] = pCnf.cloudName;
919
p.source(pCnf.publicId, pCnf.sourceConfig);
1020
p.on('error', function (e) {
1121
const error = e.Player.videojs.error();
@@ -18,24 +28,4 @@ function initializeCloudinaryPlayers() {
1828
});
1929
}
2030

21-
22-
$(document).ready(function () {
23-
/**
24-
* Page Designer does not become active until document.ready. Because if this
25-
* it waits until streaming videos fully load. We need to delay initializing
26-
* Cloudinary video player a little bit.
27-
*/
28-
29-
if (!document.cloudinaryInit) {
30-
document.cloudinaryInit = true;
31-
let conf = {
32-
cloud_name: window.cloudName
33-
}
34-
if (window.cname) {
35-
conf.secure_distribution = window.cname;
36-
conf.private_cdn = true;
37-
}
38-
window.cld = window.cloudinary.Cloudinary.new(conf);
39-
initializeCloudinaryPlayers();
40-
}
41-
});
31+
initializeCloudinaryPlayers();

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

Lines changed: 16 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,28 @@
11
<iscomment>
22
Cloudinary Video Component Template:
33
This document renders an instance of the component. Multiple instances can be placed on the page.
4-
54
Refer to module_pagedesigner_custom/cartridge/experience/components/assets/cloudinary_video.js
65
</iscomment>
76
<isset name="sitePref" value="${dw.system.Site.current.preferences.custom}" scope="page" />
7+
<script src="${sitePref.CLDPDVideoPlayerJSURL}" onload="window.cldPDVideoPlayer = cloudinary"></script>
8+
<div class="cloudinary-video-container sfdc-component-mock sfdc-component-assets-media_library_video-mock">
9+
<video id="${pdict.viewmodel.id}"></video>
10+
</div>
11+
<script>
12+
var value = JSON.parse('<isprint value="${JSON.stringify(pdict.viewmodel)}" encoding="jsonvalue"/>');
13+
window.players = window.players || [];
14+
window.players.push(value);
15+
window.cloudName = value.cloudName;
16+
window.cname = value.cname || null;
17+
</script>
818

919
<isscript>
10-
// SFRA has a logic bug where full urls are added twice, so we need to check for duplicates before adding.
20+
// SFRA has a logic bug where full urls are added twice, so we need to check for duplicates before adding.
1121
var assets = require('*/cartridge/scripts/assets.js');
12-
13-
// Video Player CSS
14-
var src = sitePref.CLDPDVideoPlayerCSSURL;
22+
// Video Player CSS
23+
var src = sitePref.CLDPDVideoPlayerCSSURL;
1524
if (assets.styles.lastIndexOf(src) < 0) {
16-
assets.addCss(src);
17-
}
18-
19-
// Cloudinary Video Player JS
20-
src = sitePref.CLDPDVideoPlayerJSURL;
21-
if (assets.scripts.lastIndexOf(src) < 0) {
22-
assets.addJs(src);
23-
}
25+
assets.addCss(src);
26+
}
2427
assets.addJs('/js/cloudinaryVideos.js');
2528
</isscript>
26-
27-
<div class="cloudinary-video-container sfdc-component-mock sfdc-component-assets-media_library_video-mock">
28-
<video id="${pdict.viewmodel.id}"></video>
29-
<script>
30-
var value = JSON.parse('<isprint value="${JSON.stringify(pdict.viewmodel)}" encoding="jsonvalue"/>');
31-
window.players = window.players || [];
32-
window.players.push(value);
33-
window.cloudName = value.cloudName;
34-
window.cname = value.cname || null;
35-
</script>
36-
</div>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,5 +31,5 @@
3131
<div class="cloudinary-media-library-container sfdc-component-mock sfdc-component-assets-media_library-mock">
3232
<img class="component-media_library ml-image" src="${pdict.viewmodel.placeholder}"
3333
data-real-url="${pdict.viewmodel.src}" id="${pdict.viewmodel.id}" alt="${pdict.viewmodel.altText}"
34-
style="max-width: 100%">
34+
style="max-width: 100%" />
3535
</div>

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

Lines changed: 22 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,28 @@
11
<iscomment> TEMPLATENAME: example.isml </iscomment>
22
<isset name="sitePref" value="${dw.system.Site.current.preferences.custom}" scope="page" />
3-
4-
<isscript>
5-
// SFRA has a logic bug where full urls are added twice, so we need to check for duplicates before adding.
6-
var assets = require('*/cartridge/scripts/assets.js');
7-
8-
// Video Player CSS
9-
var src = sitePref.CLDPDVideoPlayerCSSURL;
10-
if (assets.styles.lastIndexOf(src) < 0) {
11-
assets.addCss(src);
12-
}
13-
14-
// Cloudinary Video Player JS
15-
src = sitePref.CLDPDVideoPlayerJSURL;
16-
if (assets.scripts.lastIndexOf(src) < 0) {
17-
assets.addJs(src);
18-
}
19-
20-
pdict.viewmodel.CLDPDShrinkwrapJSURL = sitePref.CLDPDShrinkwrapJSURL;
21-
assets.addJs('/js/cloudinaryVideos.js');
22-
</isscript>
3+
<script src="${sitePref.CLDPDVideoPlayerJSURL}" onload="window.cldPDVideoPlayer = cloudinary"></script>
234

245
<h2>${pdict.headline}</h2>
256
<div class="cloudinary-video-container sfdc-component-mock sfdc-component-assets-media_library_video-mock">
26-
<video id="${pdict.viewmodel.id}"></video>
27-
<script>
28-
var value = JSON.parse('<isprint value="${JSON.stringify(pdict.viewmodel)}" encoding="jsonvalue"/>');
29-
window.players = window.players || [];
30-
window.players.push(value);
31-
window.cloudName = value.cloudName;
32-
window.cname = value.cname || null;
33-
34-
// Check if the Cloudinary Core JS is inculded
35-
const shrinkWrapJs = document.querySelector('script[src="'+value.CLDPDShrinkwrapJSURL+'"]');
36-
if (shrinkWrapJs) {
37-
shrinkWrapJs.parentNode.removeChild(shrinkWrapJs);
38-
}
39-
</script>
7+
<video id="${pdict.viewmodel.id}"></video>
408
</div>
9+
<script>
10+
var value = JSON.parse('<isprint value="${JSON.stringify(pdict.viewmodel)}" encoding="jsonvalue"/>');
11+
window.players = window.players || [];
12+
window.players.push(value);
13+
window.cloudName = value.cloudName;
14+
window.cname = value.cname || null;
15+
</script>
16+
17+
<isscript>
18+
// SFRA has a logic bug where full urls are added twice, so we need to check for duplicates before adding.
19+
var assets = require('*/cartridge/scripts/assets.js');
20+
21+
// Video Player CSS
22+
var src = sitePref.CLDPDVideoPlayerCSSURL;
23+
if (assets.styles.lastIndexOf(src) < 0) {
24+
assets.addCss(src);
25+
}
26+
27+
assets.addJs('/js/cloudinaryVideos.js');
28+
</isscript>

0 commit comments

Comments
 (0)