Menu-based Content
This guide explains how to build a navigation tree for streaming content using the Playout API. The process involves fetching episode data, retrieving menu groups, and constructing a hierarchical navigation structure.
General Flow
- Fetch Episode Data: Use the
/get/episodesendpoint to search for episodes and filter results to find the desiredepisodeId. - Retrieve Menu Groups: Use the
GET /playouts/{playoutId}/episodes/{episodeId}/groupsendpoint to fetch menu groups associated with the episode. - Build Navigation Tree: Start with the group marked as
mainMenu: trueand recursively link related items and subgroups to construct the tree. - Handle Subitems: Check for the existence of subitems to determine whether a group should be displayed or made clickable.
Example Code
The following example demonstrates how to fetch and process data to create a hierarchical menu structure for streaming content:
// Step 1: Fetch episode data
async function fetchEpisodeId(apiBaseUrl, searchParams) {
const response = await fetch(`${apiBaseUrl}/get/episodes?${new URLSearchParams(searchParams)}`);
const episodes = await response.json();
// Filter to find the desired episode
const episode = episodes.find(ep => ep.title.includes("desired-title"));
return episode ? episode.id : null;
}
// Step 2: Fetch menu groups
async function fetchMenuGroups(apiBaseUrl, playoutId, episodeId) {
const response = await fetch(`${apiBaseUrl}/playouts/${playoutId}/episodes/${episodeId}/groups`);
return response.json();
}
// Step 3: Build navigation tree
function buildNavigationTree(groups) {
const mainMenu = groups.find(group => group.mainMenu);
if (!mainMenu) return null;
function buildTree(group) {
return {
id: group.id,
name: group.name,
subItems: group.subGroups.map(subGroupId => {
const subGroup = groups.find(g => g.id === subGroupId);
return buildTree(subGroup);
}),
};
}
return buildTree(mainMenu);
}
// Example usage
(async () => {
const apiBaseUrl = "https://api.jayplatform.com";
const playoutId = "12345";
const searchParams = { filter: "desired-filter" };
const episodeId = await fetchEpisodeId(apiBaseUrl, searchParams);
if (!episodeId) {
console.error("Episode not found");
return;
}
const groups = await fetchMenuGroups(apiBaseUrl, playoutId, episodeId);
const navigationTree = buildNavigationTree(groups);
console.log("Navigation Tree:", JSON.stringify(navigationTree, null, 2));
})();Recommendations
- Check the existence of sub-items to decide if a group should be shown or clickable.
- Groups can also have sub-groups, which should be recursively processed.