Goal
Extend the authoring Asset Finder to show EAEM Audio option in Asset filter dropdown
Extend the Dynamic Media Scene7 component /libs/dam/components/scene7/dynamicmedia and create a new component /apps/eaem-dms7-audio-video-component/eaem-dms7-audio-video-component to play both Audio and Video files (product component is for videos only)
For configuring Dynamic Media Scene7 check this post
Demo | Package Install | Github
Asset Finder extension for Audio
Playing Video
Solution
1) To add the EAEM Audio filter in Asset Finder, login to CRXDE Lite, create folder (nt:folder) /apps/eaem-dms7-audio-video-component
2) Create clientlib (type cq:ClientLibraryFolder) /apps/eaem-dms7-audio-video-component/clientlib and set a property categories of String[] type to [cq.authoring.editor.hook.assetfinder], dependencies of type String[] with value lodash
3) Create file ( type nt:file ) /apps/eaem-dms7-audio-video-component/clientlib/js.txt, add the following
assetfinder-audio.js
4) Create file ( type nt:file ) /apps/eaem-dms7-audio-video-component/clientlib/assetfinder-audio.js, add the following code
(function ($, $document, author) {
var self = {},
EAEM_AUDIO = 'EAEM Audio';
var searchPath = self.searchRoot = "/content/dam",
imageServlet = '/bin/wcm/contentfinder/asset/view.html',
itemResourceType = 'cq/gui/components/authoring/assetfinder/asset';
self.loadAssets = function (query, lowerLimit, upperLimit) {
var param = {
'_dc': new Date().getTime(),
'query': query.concat("order:\"-jcr:content/jcr:lastModified\" "),
'mimeType': 'audio',
'itemResourceType': itemResourceType,
'limit': lowerLimit + ".." + upperLimit,
'_charset_': 'utf-8'
};
return $.ajax({
type: 'GET',
dataType: 'html',
url: Granite.HTTP.externalize(imageServlet) + searchPath,
data: param
});
};
self.setSearchPath = function (spath) {
searchPath = spath;
};
author.ui.assetFinder.register(EAEM_AUDIO, self);
}(jQuery, jQuery(document), Granite.author));
5) To support both audio and video in same component extend otb Dynamic Media Scene7 component /libs/dam/components/scene7/dynamicmedia and create component /apps/eaem-dms7-audio-video-component/eaem-dms7-audio-video-component
6) Create node /apps/eaem-dms7-audio-video-component/eaem-dms7-audio-video-component/cq:editConfig of type cq:EditConfig with cq:dropTargets/image@accept=[video/*,audio/*] to support drag and drop of assets of type audio & video onto the component
7) Create use api javascript /apps/eaem-dms7-audio-video-component/eaem-dms7-audio-video-component/audio-video.js, add the following code to read asset specific metadata
use( function(){
var METADATA_NODE = com.day.cq.dam.api.s7dam.constants.S7damConstants.S7_ASSET_METADATA_NODE,
SCENE7_FODLER = METADATA_NODE + "/metadata/dam:scene7Folder",
SCENE7_DOMAIN = METADATA_NODE + "/metadata/dam:scene7Domain",
fileReference = properties['./fileReference'],
rootNode = currentSession.rootNode,
mediaInfo = {};
if(!fileReference) {
mediaInfo.isAudio = false;
return;
}
var assetNode = rootNode.getNode(fileReference.substring(1)),
publishUrl = getPublishServerURL(assetNode);
//log.info("publishUrl----------" + publishUrl);
return{
isAudio: isAudioFile(assetNode),
assetName: assetNode.getName(),
s7PublishPath: publishUrl,
bgImage: assetNode.getPath() + "/jcr:content/renditions/poster.png"
};
function isAudioFile(assetNode){
var META_DC_FORMAT = "jcr:content/metadata/dc:format",
isAudioFile = false;
if(assetNode == undefined){
return isAudioFile;
}
if( assetNode.hasProperty(META_DC_FORMAT)) {
var dcFormat = assetNode.getProperty(META_DC_FORMAT).getString();
isAudioFile = dcFormat.startsWith("audio");
}
return isAudioFile;
}
function getPublishServerURL(assetNode) {
var s7Path = assetNode.getProperty(SCENE7_DOMAIN).getString() + "is/content/"
+ assetNode.getProperty(SCENE7_FODLER).getString() + assetNode.getName();
return s7Path;
}
});
8) For audio files, the above script assumes a rendition with name poster.png exists for audio files to shows as static background for audio player
9) For audio files, you can either publish the audio assets to play in component (accessed from Scene7 delivery server) or add more logic to read the secure preview server url from dynamic media configuration to play in author AEM and use S7 delivery server url for publish AEM e.g.
S7 Secure Preview server url (audio not published) - https://preview1.assetsadobe.com/is/content/CEM/experience-aem-65/muzik.mp3
S7 Delivery server url (audio published) - http://s7d9.scene7.com/is/content/CEM/experience-aem-65/muzik.mp3
10) Add HTL script /apps/eaem-dms7-audio-video-component/eaem-dms7-audio-video-component/eaem-dms7-audio-video-component.html to play the audio files using <audio> tag and video files using S7 player
<style>
.eaem-dms7-audio-container {
position: relative;
text-align: center;
}
.eaem-dms7-audio-centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
<div data-sly-use.mediaInfo="audio-video.js" style="padding:10px">
<h2>This component can play both audio and video</h2>
<div data-sly-test="${mediaInfo.isAudio}">
<h2 data-sly-test="${mediaInfo.assetName}">Currently playing audio : ${mediaInfo.assetName}</h2>
<div class="eaem-dms7-audio-container">
<img class="eaem-dms7-audio-image" src="${mediaInfo.bgImage}">
<div class="eaem-dms7-audio-centered">
<audio class="eaem-dms7-audio-audio" width="100%" height="100%" preload="auto" controls="controls">
<source src="${mediaInfo.s7PublishPath}" type="audio/ogg">
</audio>
</div>
</div>
</div>
<div data-sly-test="${!mediaInfo.isAudio}" data-sly-use.mediaInfo="dynamicmedia_sly.js">
<h2 data-sly-test="${mediaInfo.assetName}">Currently playing video : ${mediaInfo.assetName}</h2>
<div data-sly-include="/libs/dam/components/scene7/dynamicmedia/dynamicmedia.html"></div>
</div>
</div>
No comments:
Post a Comment