AEM Cloud Service - Show Dynamic Media Video Content and Encode URLs in Asset Details

Goal

AEM Release 2023.1.10912.20230130T173736Z

Show the Dynamic Media Video Content and Encodes delivery URLs in Asset Details (say for copying the URLs to a thirdparty system)

Demo | Package Install | Github

Solution

1) Add a datasource jsp /apps/eaem-dm-video-url/components/video-encodes/video-encodes.jsp for getting the video encodes ...

<%@include file="/libs/granite/ui/global.jsp"%>

<%@page session="false"
        import="java.util.Iterator,
                org.apache.sling.commons.json.JSONObject,
                com.adobe.granite.ui.components.Config,
                com.adobe.granite.ui.components.Tag"%>
<%@ page import="com.adobe.granite.ui.components.ds.ValueMapResource" %>
<%@ page import="org.apache.sling.api.SlingHttpServletRequest" %>
<%@ page import="com.day.cq.dam.api.Asset" %>
<%@ page import="com.day.cq.dam.api.renditions.DynamicMediaRenditionProvider" %>
<%@ page import="com.day.cq.dam.api.Rendition" %>
<%@ page import="java.util.HashMap" %>
<%@ page import="java.util.List" %>
<%@ page import="org.apache.sling.api.resource.Resource" %>
<%@ page import="org.apache.sling.commons.json.JSONException" %>

<%
    response.setContentType("application/json");

    SlingHttpServletRequest eaemSlingRequest = slingRequest;
    String assetPath = eaemSlingRequest.getRequestPathInfo().getSuffix();

    Resource currentResource = eaemSlingRequest.getResourceResolver().getResource(assetPath);
    Asset asset = (currentResource != null ? currentResource.adaptTo(Asset.class) : null);

    JSONObject dynRenditions = new JSONObject();

    if( (asset == null) || !(asset.getMimeType().startsWith("video/"))) {
        dynRenditions.write(response.getWriter());
        return;
    }

    String s7Domain = asset.getMetadataValue("dam:scene7Domain");

    DynamicMediaRenditionProvider dmRendProvider = sling.getService(DynamicMediaRenditionProvider.class);

    HashMap<String, Object> rules = new HashMap<>();
    rules.put("remote", true);
    rules.put("video", true);

    String image = null;
    String s7EncodeUrl = null;

    JSONObject dynRendition = getVideo(s7Domain, asset);
    dynRenditions.put(dynRendition.getString("name"), dynRendition);

    List<Rendition> dmRenditions = dmRendProvider.getRenditions(asset, rules);

    for (Rendition dmRendition : dmRenditions) {
        dynRendition = new JSONObject();

        image = dmRendition.getPath();

        image = image.substring(0, image.lastIndexOf("."));

        s7EncodeUrl = getDeliveryUrl(s7Domain, dmRendition.getPath());

        dynRendition.put("type", "VIDEO");
        dynRendition.put("name", dmRendition.getName());
        dynRendition.put("image", getRendThumbnail(s7Domain, image));
        dynRendition.put("s7Url", s7EncodeUrl);

        dynRenditions.put(dmRendition.getName(), dynRendition);
    }

    dynRenditions.write(response.getWriter());
%>

<%!
    private JSONObject getVideo(String s7Domain, Asset asset) throws JSONException {
        JSONObject dynRendition = new JSONObject();

        dynRendition.put("type", "VIDEO");
        dynRendition.put("name", asset.getMetadataValue("dam:scene7Name"));
        dynRendition.put("s7Url", getDeliveryUrl(s7Domain, asset.getMetadataValue("dam:scene7File")));

        return dynRendition;
    }

    private static String getDeliveryUrl(String s7Domain, String rendPath){
        if(rendPath.contains(".")){
            rendPath = rendPath.substring(0, rendPath.lastIndexOf("."));
        }

        return s7Domain + "is/content/" + rendPath;
    }

    private static String getRendThumbnail(String s7Domain, String rendPath){
        return s7Domain + "is/image/" + rendPath + "?fit=constrain,1&wid=200&hei=200";
    }
%>

2) The video encodes json is available by accessing eg. https://author-p10961-e880305.adobeaemcloud.com/apps/eaem-dm-video-url/components/video-encodes/renditions.html/content/dam/experience-aem-cs/software/sreek-snowboarder.mov

3) Add the Video URL action bar button configuration in /apps/eaem-dm-video-url/clientlibs/content/show-video-url-but

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" 
          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/coral/foundation/collection/action"
    icon="link"
    target=".cq-damadmin-admin-childpages"
    text="Video URL"
    variant="actionBar"/>

4) Add a clientlib /apps/eaem-dm-video-url/clientlibs/clientlib-video-url with categories="[dam.gui.actions.coral]" and following code in /apps/eaem-dm-video-url/clientlibs/clientlib-video-url/video-dm-url.js

(function ($, $document) {
    "use strict";

    var ASSET_DETAILS_PAGE = "/assetdetails.html",
        initialized = false,
        BESIDE_ACTIVATOR = "cq-damadmin-admin-actions-download-activator",
        DATA_ENCODE_LINK = "data-video-encode-link",
        VIDEO_ENCODES_URL  = "/apps/eaem-dm-video-url/components/video-encodes/renditions.html",
        VIDEO_BUTTON_URL = "/apps/eaem-dm-video-url/clientlibs/content/show-video-url-but.html";

    if (!isAssetDetailsPage()) {
        return;
    }

    $document.on("foundation-contentloaded", addActionBarButtons);

    function addActionBarButtons(){
        if (initialized) {
            return;
        }

        initialized = true;

        if(!window.s7viewers.VideoViewer){
            return;
        }

        $.ajax(VIDEO_BUTTON_URL).done(addVideoUrlButton);
    }

    function addVideoUrlButton(html) {
        const $eActivator = $("." + BESIDE_ACTIVATOR);

        if ($eActivator.length == 0) {
            return;
        }

        const $videoUrlBUt = $(html).insertAfter($eActivator);

        $videoUrlBUt.find("coral-button-label").css("padding-left", "7px");
        $videoUrlBUt.click(showVideoUrl);
    }

    function getCopyOpenLinks(link){
        return  "<div style='text-align: right'>" +
                        "<span style='margin-right: 10px; cursor: pointer' " + DATA_ENCODE_LINK + "='" + link + "'>Copy</span>" +
                        "<a style='text-decoration: none' href='" + link+ "' target='_blank'>Open</a>" +
                    "</div>";
    }

    function showVideoUrl(){
        const assetUrl = window.location.pathname.substring(ASSET_DETAILS_PAGE.length);

        jQuery.ajax({url: VIDEO_ENCODES_URL + assetUrl}).done(handler);

        function handler(data){
            let rendsText = "";

            jQuery.each(data,(index, rend) => {
                rendsText =  rendsText + "<div style='padding: 5px'><span>" + rend["s7Url"] + "</span>"
                                + getCopyOpenLinks(rend["s7Url"]) + "</div>";
            })

            const fui = $(window).adaptTo("foundation-ui"),
                    options = [{
                        id: "ok",
                        text: "Close",
                        primary: true
                    }];

            fui.prompt("Video URL",rendsText, "default", options);

            $("[" + DATA_ENCODE_LINK + "]").click((event) => {
                navigator.clipboard.writeText(event.currentTarget.dataset.videoEncodeLink);
            })
        }
    }

    function isAssetDetailsPage() {
        return (window.location.pathname.indexOf(ASSET_DETAILS_PAGE) >= 0);
    }
}(jQuery, jQuery(document)));