Skip to content

Instantly share code, notes, and snippets.

@olifante

olifante/cms-api-quick-start.markdown

Created February 28, 2023 22:48
Show Gist options
  • Save olifante/786251ab17f70db8aba95163217ad287 to your computer and use it in GitHub Desktop.
Save olifante/786251ab17f70db8aba95163217ad287 to your computer and use it in GitHub Desktop.
Download ZIP
CMS API Quick Start
Raw
index.html
<h2>CMS API Tester</h1>
<p><strong>Videos</strong></p>
<p>
<button class="bcls-button" id="get5videos">Get 5 videos</button>
<button class="bcls-button" id="get5more">Get 5 more videos</button>
<button class="bcls-button" id="sort">Sort videos</button>
<button class="bcls-button" id="get1video">Get 1 video</button>
<button class="bcls-button" id="sources">Get video sources</button>
<button class="bcls-button" id="search">Search videos</button>
<button class="bcls-button" id="searchCount">Get search results count</button>
</p>
<p>
<button class="bcls-button" id="createVideo">Create video</button>
<button class="bcls-button" id="updateVideo">Update Video</button>
<button class="bcls-button" id="addRendition">Add remote rendition</button>
<button class="bcls-button" id="addPoster">Add remote poster</button>
<button class="bcls-button" id="addThumbnail">Add remote thumbnail</button>
</p>
<p><strong>Playlists</strong></p>
<p>
<button class="bcls-button" id="get3playlists">Get 3 playlists</button>
<button class="bcls-button" id="get1playlist">Get 1 playlist</button>
<button class="bcls-button" id="getPlaylistVideoCount">Get playlist video count</button>
<button class="bcls-button" id="getPlaylistVideos">Get playlist videos</button>
<button class="bcls-button" id="createPlaylist">Create playlist</button>
<button class="bcls-button" id="updatePlaylist">Update playlist</button>
</p>
<p><strong>Folders</strong></p>
<p>
<button class="bcls-button" id="getFolders">Get folders</button>
<button class="bcls-button" id="getFolderVideos">Get videos in folder</button>
<button class="bcls-button" id="addVideoToFolder">Add video to folder</button>
<button class="bcls-button" id="removeVideoFromFolder">Remove video from folder</button>
</p>
<p><strong>API request:</strong></p>
<pre id="apiRequest" class="bcls-code"><code></code></pre>
<p><strong>Input data for write requests:</strong></p>
<pre id="apiData" class="bcls-code"><code></code></pre>
<p><strong>Request method:</strong></p>
<pre id="apiMethod" class="bcls-code"><code></code></pre>
<p><strong>Response data</strong></p>
<pre id="responseData" class="bcls-code"><code></code></pre>
Raw
script.js
var BCLS = (function(window, document) {
var baseURL = 'https://cms.api.brightcove.com/v1/accounts/57838016001',
proxyURL = 'https://solutions.brightcove.com/bcls/bcls-proxy/bcls-proxy-v2.php',
video_id = '5191499941001',
newVideo_id = '5191509290001',
playlist_id = '4492151631001',
newPlaylist_id = '730486831001',
folder_id = '560039e5e4b0e69e4b01cacd',
playlist_videos = [],
allButtons = document.getElementsByTagName('button'),
get5videos = document.getElementById('get5videos'),
get5more = document.getElementById('get5more'),
sort = document.getElementById('sort'),
get1video = document.getElementById('get1video'),
sources = document.getElementById('sources'),
search = document.getElementById('search'),
searchCount = document.getElementById('searchCount'),
createVideo = document.getElementById('createVideo'),
updateVideo = document.getElementById('updateVideo'),
addRendition = document.getElementById('addRendition'),
addPoster = document.getElementById('addPoster'),
addThumbnail = document.getElementById('addThumbnail'),
get3playlists = document.getElementById('get3playlists'),
get1playlist = document.getElementById('get1playlist'),
getPlaylistVideoCount = document.getElementById('getPlaylistVideoCount'),
getPlaylistVideos = document.getElementById('getPlaylistVideos'),
createPlaylist = document.getElementById('createPlaylist'),
updatePlaylist = document.getElementById('updatePlaylist'),
addVideos = document.getElementById('updatePlaylist'),
getFolders = document.getElementById('getFolders'),
getFolderVideos = document.getElementById('getFolderVideos'),
addVideoToFolder = document.getElementById('addVideoToFolder'),
removeVideoFromFolder = document.getElementById('removeVideoFromFolder'),
apiRequest = document.getElementById('apiRequest'),
apiData = document.getElementById('apiData'),
apiMethod = document.getElementById('apiMethod'),
generatedContent = document.getElementById('generatedContent'),
responseData = document.getElementById('responseData'),
nowISO = new Date().toISOString();
/**
* disables all buttons so user can't submit new request until current one finishes
*/
function disableButtons() {
var i,
iMax = allButtons.length;
for (i = 0; i < iMax; i++) {
allButtons[i].setAttribute('disabled', 'disabled');
}
}
/**
* re-enables all buttons
*/
function enableButtons() {
var i,
iMax = allButtons.length;
for (i = 0; i < iMax; i++) {
allButtons[i].removeAttribute('disabled');
}
}
/**
* display the api response
* @param {String} response API raw response
*/
function displayResponse(response) {
var parsedData = JSON.parse(response);
responseData.textContent = JSON.stringify(parsedData, null, ' ');
return;
}
/**
* sets up the data for the API request
* @param {String} id the id of the button that was clicked
*/
function setoptions(id) {
var endPoint = '',
options = {},
requestBody = {},
parsedData,
i,
iMax;
// disable buttons to prevent a new request before current one finishes
disableButtons();
options.account_id = '57838016001';
options.proxyURL = proxyURL;
switch (id) {
case 'get5videos':
endPoint = '/videos?limit=5';
options.url = baseURL + endPoint;
options.requestType = 'GET';
apiRequest.textContent = options.url;
apiMethod.textContent = options.requestType;
apiData.textContent = '';
makeRequest(options, function(response) {
displayResponse(response);
parsedData = JSON.parse(response);
// add ids to array to add to playlist later
iMax = parsedData.length;
for (i = 0; i < iMax; i++) {
playlist_videos.push(parsedData[i].id);
}
enableButtons();
});
break;
case 'get5more':
endPoint = '/videos?limit=5&offset=5';
options.url = baseURL + endPoint;
options.requestType = 'GET';
apiRequest.textContent = options.url;
apiMethod.textContent = options.requestType;
apiData.textContent = '';
makeRequest(options, function(response) {
displayResponse(response);
parsedData = JSON.parse(response);
// add ids to array to add to playlist later
iMax = parsedData.length;
for (i = 0; i < iMax; i++) {
playlist_videos.push(parsedData[i].id);
}
enableButtons();
});
break;
case 'sort':
endPoint = '/videos?limit=5&sort=name';
options.url = baseURL + endPoint;
options.requestType = 'GET';
apiRequest.textContent = options.url;
apiMethod.textContent = options.requestType;
apiData.textContent = '';
makeRequest(options, function(response) {
displayResponse(response);
enableButtons();
});
break;
case 'get1video':
endPoint = '/videos/' + video_id;
options.url = baseURL + endPoint;
options.requestType = 'GET';
apiRequest.textContent = options.url;
apiMethod.textContent = options.requestType;
apiData.textContent = '';
makeRequest(options, function(response) {
displayResponse(response);
enableButtons();
});
break;
case 'sources':
endPoint = '/videos/' + video_id + '/sources';
options.url = baseURL + endPoint;
options.requestType = 'GET';
apiRequest.textContent = options.url;
apiMethod.textContent = options.requestType;
apiData.textContent = '';
makeRequest(options, function(response) {
displayResponse(response);
enableButtons();
});
break;
case 'search':
endPoint = '/videos?q=' + encodeURI('name:sea');
options.url = baseURL + endPoint;
options.requestType = 'GET';
apiRequest.textContent = options.url;
apiMethod.textContent = options.requestType;
apiData.textContent = '';
makeRequest(options, function(response) {
displayResponse(response);
enableButtons();
});
break;
case 'searchCount':
endPoint = '/counts/videos?q=' + encodeURI('name:sea');
options.url = baseURL + endPoint;
options.requestType = 'GET';
apiRequest.textContent = options.url;
apiMethod.textContent = options.requestType;
apiData.textContent = '';
makeRequest(options, function(response) {
displayResponse(response);
enableButtons();
});
break;
case 'createVideo':
endPoint = '/videos';
options.url = baseURL + endPoint;
options.requestType = 'POST';
requestBody.name = 'Great Blue Heron - from CMS API Quick Start - ' + nowISO;
options.requestBody = JSON.stringify(requestBody);
apiRequest.textContent = options.url;
apiData.textContent = JSON.stringify(requestBody, null, ' ');
apiMethod.textContent = options.requestType;
makeRequest(options, function(response) {
displayResponse(response);
parsedData = JSON.parse(response);
newVideo_id = parsedData.id;
enableButtons();
});
break;
case 'updateVideo':
endPoint = '/videos/' + newVideo_id;
options.url = baseURL + endPoint;
options.requestType = 'PATCH';
requestBody.description = 'This video was updated ' + nowISO;
requestBody.tags = ['test','quick_start'];
options.requestBody = JSON.stringify(requestBody);
apiRequest.textContent = options.url;
apiData.textContent = JSON.stringify(requestBody, null, ' ');
apiMethod.textContent = options.requestType;
makeRequest(options, function(response) {
displayResponse(response);
enableButtons();
});
break;
case 'addRendition':
endPoint = '/videos/' + newVideo_id + '/assets/renditions';
options.url = baseURL + endPoint;
options.requestType = 'POST';
requestBody.progressive_download = true;
requestBody.remote_url = 'https://learning-services-media.brightcove.com/videos/mp4/greatblueheron.mp4';
requestBody.video_duration = 31000;
requestBody.size = 90990884;
requestBody.frame_height = 1080;
requestBody.frame_width = 1920;
requestBody.video_codec = 'h264';
requestBody.video_container = 'MP4';
options.requestBody = JSON.stringify(requestBody);
apiRequest.textContent = options.url;
apiData.textContent = JSON.stringify(requestBody, null, ' ');
apiMethod.textContent = options.requestType;
makeRequest(options, function(response) {
displayResponse(response);
enableButtons();
});
break;
case 'addPoster':
endPoint = '/videos/' + newVideo_id + '/assets/poster';
options.url = baseURL + endPoint;
options.requestType = 'POST';
requestBody.remote_url = 'https://learning-services-media.brightcove.com/images/great-blue-heron-poster.png';
options.requestBody = JSON.stringify(requestBody);
apiRequest.textContent = options.url;
apiData.textContent = JSON.stringify(requestBody, null, ' ');
apiMethod.textContent = options.requestType;
makeRequest(options, function(response) {
displayResponse(response);
enableButtons();
});
break;
case 'addThumbnail':
endPoint = '/videos/' + newVideo_id + '/assets/thumbnail';
options.url = baseURL + endPoint;
options.requestType = 'POST';
requestBody.remote_url = 'https://learning-services-media.brightcove.com/images/great-blue-heron-thumbnail.png';
options.requestBody = JSON.stringify(requestBody);
apiRequest.textContent = options.url;
apiData.textContent = JSON.stringify(requestBody, null, ' ');
apiMethod.textContent = options.requestType;
makeRequest(options, function(response) {
displayResponse(response);
enableButtons();
});
break;
case 'get3playlists':
endPoint = '/playlists?limit=3';
options.url = baseURL + endPoint;
options.requestType = 'GET';
apiRequest.textContent = options.url;
apiMethod.textContent = options.requestType;
apiData.textContent = '';
makeRequest(options, function(response) {
displayResponse(response);
enableButtons();
});
break;
case 'get1playlist':
endPoint = '/playlists/' + playlist_id;
options.url = baseURL + endPoint;
options.requestType = 'GET';
apiRequest.textContent = options.url;
apiMethod.textContent = options.requestType;
apiData.textContent = '';
makeRequest(options, function(response) {
displayResponse(response);
enableButtons();
});
break;
case 'getPlaylistVideoCount':
endPoint = '/counts/playlists/' + playlist_id + '/videos';
options.url = baseURL + endPoint;
options.requestType = 'GET';
apiRequest.textContent = options.url;
apiMethod.textContent = options.requestType;
apiData.textContent = '';
makeRequest(options, function(response) {
displayResponse(response);
enableButtons();
});
break;
case 'getPlaylistVideos':
endPoint = '/playlists/' + playlist_id + '/videos';
options.url = baseURL + endPoint;
options.requestType = 'GET';
apiRequest.textContent = options.url;
apiMethod.textContent = options.requestType;
apiData.textContent = '';
makeRequest(options, function(response) {
displayResponse(response);
enableButtons();
});
break;
case 'createPlaylist':
endPoint = '/playlists';
options.url = baseURL + endPoint;
options.requestType = 'POST';
requestBody.name = 'New Manual Playlist from CMS API Quick Start ' + nowISO;
requestBody.type = 'EXPLICIT';
requestBody.name = 'New Playlist from CMS API Quick Start' + nowISO;
options.requestBody = JSON.stringify(requestBody);
apiRequest.textContent = options.url;
apiData.textContent = JSON.stringify(requestBody, null, ' ');
apiMethod.textContent = options.requestType;
makeRequest(options, function(response) {
displayResponse(response);
parsedData = JSON.parse(response);
newPlaylist_id = parsedData.id;
enableButtons();
});
break;
case 'updatePlaylist':
endPoint = '/playlists/' + newPlaylist_id;
options.url = baseURL + endPoint;
options.requestType = 'PATCH';
requestBody.name = 'Updated Playlist from CMS API Quick Start' + nowISO;
requestBody.video_ids = playlist_videos;
options.requestBody = JSON.stringify(requestBody);
apiRequest.textContent = options.url;
apiData.textContent = JSON.stringify(requestBody, null, ' ');
apiMethod.textContent = options.requestType;
makeRequest(options, function(response) {
displayResponse(response);
enableButtons();
});
break;
case 'getFolders':
endPoint = '/folders';
options.url = baseURL + endPoint;
options.requestType = 'GET';
apiRequest.textContent = options.url;
apiMethod.textContent = options.requestType;
apiData.textContent = '';
makeRequest(options, function(response) {
displayResponse(response);
enableButtons();
});
break;
case 'getFolderVideos':
endPoint = '/folders/' + folder_id + '/videos';
options.url = baseURL + endPoint;
options.requestType = 'GET';
apiRequest.textContent = options.url;
apiMethod.textContent = options.requestType;
apiData.textContent = '';
makeRequest(options, function(response) {
displayResponse(response);
enableButtons();
});
break;
case 'addVideoToFolder':
endPoint = '/folders/' + folder_id + '/videos/' + video_id;
options.url = baseURL + endPoint;
options.requestType = 'PUT';
apiRequest.textContent = options.url;
apiMethod.textContent = options.requestType;
apiData.textContent = '';
makeRequest(options, function(response) {
responseData.textContent = 'This request returns 204 No Content';
enableButtons();
});
break;
case 'removeVideoFromFolder':
endPoint = '/folders/' + folder_id + '/videos/' + video_id;
options.url = baseURL + endPoint;
options.requestType = 'DELETE';
apiRequest.textContent = options.url;
apiMethod.textContent = options.requestType;
apiData.textContent = '';
makeRequest(options, function(response) {
responseData.textContent = 'This request returns 204 No Content';
enableButtons();
});
break;
}
}
/**
* send API request to the proxy
* @param {Object} options for the request
* @param {String} options.url the full API request URL
* @param {String="GET","POST","PATCH","PUT","DELETE"} requestData [options.requestType="GET"] HTTP type for the request
* @param {String} options.proxyURL proxyURL to send the request to
* @param {String} options.client_id client id for the account (default is in the proxy)
* @param {String} options.client_secret client secret for the account (default is in the proxy)
* @param {JSON} [options.requestBody] Data to be sent in the request body in the form of a JSON string
* @param {Function} [callback] callback function that will process the response
*/
function makeRequest(options, callback) {
var httpRequest = new XMLHttpRequest(),
response,
proxyURL = options.proxyURL,
// response handler
getResponse = function() {
try {
if (httpRequest.readyState === 4) {
if (httpRequest.status >= 200 && httpRequest.status < 300) {
response = httpRequest.responseText;
// some API requests return '{null}' for empty responses - breaks JSON.parse
if (response === '{null}') {
response = null;
}
// return the response
callback(response);
} else {
alert('There was a problem with the request. Request returned ' + httpRequest.status);
}
}
} catch (e) {
alert('Caught Exception: ' + e);
}
};
/**
* set up request data
* the proxy used here takes the following request body:
* JSON.stringify(options)
*/
// set response handler
httpRequest.onreadystatechange = getResponse;
// open the request
httpRequest.open('POST', proxyURL);
// set headers if there is a set header line, remove it
// open and send request
httpRequest.send(JSON.stringify(options));
}
// event listeners
get5videos.addEventListener('click', function() {
setoptions('get5videos');
});
get5more.addEventListener('click', function() {
setoptions('get5more');
});
sort.addEventListener('click', function() {
setoptions('sort');
});
get1video.addEventListener('click', function() {
setoptions('get1video');
});
sources.addEventListener('click', function() {
setoptions('sources');
});
search.addEventListener('click', function() {
setoptions('search');
});
searchCount.addEventListener('click', function() {
setoptions('searchCount');
});
createVideo.addEventListener('click', function() {
setoptions('createVideo');
});
updateVideo.addEventListener('click', function() {
setoptions('updateVideo');
});
addRendition.addEventListener('click', function() {
setoptions('addRendition');
});
addPoster.addEventListener('click', function() {
setoptions('addPoster');
});
addThumbnail.addEventListener('click', function() {
setoptions('addThumbnail');
});
get3playlists.addEventListener('click', function() {
setoptions('get3playlists');
});
get1playlist.addEventListener('click', function() {
setoptions('get1playlist');
});
getPlaylistVideoCount.addEventListener('click', function() {
setoptions('getPlaylistVideoCount');
});
getPlaylistVideos.addEventListener('click', function() {
setoptions('getPlaylistVideos');
});
createPlaylist.addEventListener('click', function() {
setoptions('createPlaylist');
});
updatePlaylist.addEventListener('click', function() {
setoptions('updatePlaylist');
});
getFolders.addEventListener('click', function() {
setoptions('getFolders');
});
getFolderVideos.addEventListener('click', function() {
setoptions('getFolderVideos');
});
addVideoToFolder.addEventListener('click', function() {
setoptions('addVideoToFolder');
});
removeVideoFromFolder.addEventListener('click', function() {
setoptions('removeVideoFromFolder');
});
})(window, document);
Raw
style.css
/* * The body style is just for the
* background color of the codepen.
* Do not include in your code.
*/
body {
background-color: #111;
color: #f5f5f5;
font-family: sans-serif;
margin: 2em;
}
/*
* Styles essential to the sample
* are below
*/
.bcls-code {
color: #E4B842;
font-family: 'Source Code Pro',monospace;
padding: 1em;
width: 90%;
min-height: 2em;
font-size: 1rem;
}
.bcls-button {
padding: .5em;
background-color: #333;
border: 1px yellow solid;
border-radius: .5em;
color: yellow;
cursor: pointer;
}
fieldset {
color: #64AAB2;
border: 1px #64AAB2 solid;
border-radius: .5em;
}
code {
color: #E4B842;
font-family: 'Source Code Pro',monospace;
}
pre {
margin-top: 1em;
margin-botton: 1em;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment