Welcome to the "Restaurant of Mistaken Orders" blog! Today, we're serving up a technical dish with a side of humor.
Our dish for today is a JavaScript function that can fetch any asset, not just videos and subtitles. It's a generic function that you can reuse in your own recipes.
Let's take a closer look at the ingredients in this code:
function getAsset(endpoint, rendition) {
return $.ajax({
url: endpoint,
method: 'GET',
})
.then(asset => {
if (asset && asset[rendition] && asset[rendition][0] && asset[rendition][0].href) {
return asset[rendition][0].href;
} else if (asset && asset.renditions && asset.renditions[rendition] &&
asset.renditions[rendition][0] && asset.renditions[rendition][0].href) {
return asset.renditions[rendition][0].href;
} else {
return null;
}
})
.catch(error => {
console.error(`An error occurred while fetching the asset from '${endpoint}': ${error}`);
return null;
});
}
The getAsset function takes two parameters: endpoint and rendition. The endpoint is the URL of the asset you want to fetch, and the rendition is the specific format of the asset, such as video_mp4 or webvtt.
The function uses the $.ajax method to fetch the asset from the endpoint. The $.ajax method returns a Promise that resolves to the asset data.
Once the asset is fetched, the function checks if the asset has a rendition property and if it has a href property. If it does, the function returns the href property, which is the public URL of the asset. If the asset doesn't have the required properties, the function returns null.
In case of an error while fetching the asset, the function logs an error message to the console and returns null.
Next, we have the following code:
var currentUrl = window.location.href;
var assetId = currentUrl.split("/").pop().split("?")[0];
$(document).ready(async function() {
if (!assetId || assetId.length === 0) {
return;
}
const videoHref = await getAsset(`/api/entities/${assetId}`, 'video_mp4');
if (videoHref) {
console.log(`Video URL: ${videoHref}`);
}
const relationHref = await getAsset(`/api/entities/${assetId}/relations/AssetToSubtitleAsset`, 'children');
if (relationHref) {
const subtitleAssetId = relationHref.split("/").pop().split("?")[0];
if (subtitleAssetId && subtitleAssetId.length > 0) {
const subtitleHref = await getAsset(`/api/entities/${subtitleAssetId}`, 'webvtt');
if (subtitleHref) {
console.log(`Subtitle URL: ${subtitleHref}`);
}
}
}
});
The `currentUrl` variable holds the current URL of the page, and the `assetId` variable is the ID of the asset we want to fetch.
The code inside the `$(document).ready` function is executed when the document is ready. The function first checks if the `assetId` variable is set and if it's not empty. If it's not set or empty, the function returns without doing anything.
Next, the function uses the `getAsset` function to fetch the video asset and the subtitle asset. The `videoHref` variable holds the public URL of the video asset, and the `subtitleHref` variable holds the public URL of the subtitle asset. If the URLs are set, the function logs the URLs to the console.
And that's it! With this code, you can easily get the public URL of any asset in Sitecore Content Hub DAM.
So, the next time you receive an order for a video with subtitles, don't worry! Just whip up this code and serve it up like a pro!
Bon appétit!
Comments
Post a Comment