var BCLS = (function(window, document) {
var playerMngmtURL = "https://players.api.brightcove.com/v2/accounts/",
proxyURL =
"https://solutions.brightcove.com/bcls/bcls-proxy/bcls-proxy-v2.php",
default_account_id = "57838016001",
all_player_data = "";
(account_id_input = document.getElementById("account_id_input")),
(client_id_input = document.getElementById("client_id_input")),
(client_secret_input = document.getElementById("client_secret_input")),
// apiRequest = document.getElementById('apiRequest'),
(playerTable = document.getElementById("playerTable")),
// apiMethod = document.getElementById('apiMethod'),
(apiResponse = document.getElementById("apiResponse")),
// buttons
(all_buttons = document.querySelectorAll(".bcls-button")),
(get_last_viewed = document.getElementById("get_last_viewed")),
(reset_app = document.getElementById("reset_app")),
(selectedReportType = "");
/**
* event listeners
*/
get_last_viewed.addEventListener("click", function() {
createRequest("get_last_viewed");
});
reset_app.addEventListener("click", function() {
reset();
});
/**
* disables all buttons so user can't submit new request until current one finishes
*/
function disableButtons() {
var i,
iMax = all_buttons.length;
for (i = 0; i < iMax; i++) {
all_buttons[i].setAttribute("disabled", "disabled");
all_buttons[i].setAttribute(
"style",
"color:#999;cursor:not-allowed;border:1px #999 solid;"
);
}
}
/**
* enables a button element
* @param {htmlElement} button the button
*/
function enableButton(button) {
button.removeAttribute("disabled");
button.removeAttribute("style");
}
function reset() {
disableButtons();
enableButton(get_last_viewed);
}
/**
* sets up the data for the API request
* @param {String} id the id of the button that was clicked
*/
function createRequest(id) {
var endPoint = "",
options = {},
requestBody = {};
selectedReportType = document.querySelector(
'input[name="reportType"]:checked'
).value;
// disable buttons to prevent a new request before current one finishes
disableButtons();
options.account_id =
account_id_input.value.length > 0
? account_id_input.value
: "57838016001";
if (
client_id_input.value.length > 0 &&
client_secret_input.value.length > 0
) {
options.client_id = client_id_input.value;
options.client_secret = client_secret_input.value;
}
options.proxyURL = proxyURL;
endPoint = options.account_id + "/players";
options.url = playerMngmtURL + endPoint;
options.requestType = "GET";
// apiRequest.textContent = options.url;
// apiMethod.textContent = options.requestType;
makeRequest(options, function(response) {
var parsedData,
i,
iMax,
option,
frag = document.createDocumentFragment();
parsedData = JSON.parse(response);
apiResponse.textContent = JSON.stringify(parsedData, null, 2);
apiResponse.textContent = JSON.stringify(parsedData, null, " ");
// enable the create experience button
disableButtons();
// Using returned data, call function that builds the table
buildTable(parsedData);
});
}
/**
* 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));
}
/**
* find index of an object in array of objects
* based on some property value
*
* @param {array} targetArray array to search
* @param {string} objProperty object property to search
* @param {string} value of the property to search for
* @return {integer} index of first instance if found, otherwise returns -1
*/
function findObjectInArray(targetArray, objProperty, value) {
var i,
totalItems = targetArray.length,
objFound = false;
for (i = 0; i < totalItems; i++) {
if (targetArray[i][objProperty] === value) {
objFound = true;
return i;
}
}
if (objFound === false) {
return -1;
}
}
/**
* sort an array of objects based on an object property
* @param {array} targetArray - array to be sorted
* @param {string|number} objProperty - object property to sort on
* @return sorted array
*/
function sortArray(targetArray, objProperty) {
targetArray.sort(function(a, b) {
var propA = a[objProperty].toLowerCase(),
propB = b[objProperty].toLowerCase();
// sort ascending; reverse propA and propB to sort descending
if (propA < propB) {
return -1;
} else if (propA > propB) {
return 1;
} else {
return 0;
}
});
return targetArray;
}
/**
*builds a table from the players' last_viewed array
* @param JSON rawPlayerData - all data returned from the Player Mgmt API call /players
*/
function buildTable(rawPlayerData) {
// Build skeleton of table
switch (selectedReportType) {
case "version":
playerTable.innerHTML =
'<table id="myTable"><tr><th style="width: 40%">Name</th><th style="width: 20%">Player ID</th><th style="width: 40%">Version</th></tr></table>';
break;
case "imapluginServerUrl":
playerTable.innerHTML =
'<table id="myTable"><tr><th style="width: 20%">Name</th><th style="width: 20%">Player ID</th><th style="width: 60%">IMA3 Plugin serverUrl</th></tr></table>';
break;
case "allplugins":
playerTable.innerHTML =
'<table id="myTable"><tr><th style="width: 30%">Name</th><th style="width: 20%">Player ID</th><th style="width: 50%">All Plugins</th></tr></table>';
break;
}
// Extract items array from raw JSON
var arrayOfPlayers = rawPlayerData.items,
// Get number of players
numPlayers = arrayOfPlayers.length,
// Get table element for later use
table = document.getElementById("myTable");
// Style table
table.setAttribute("class", "bcls-Data-Table");
switch (selectedReportType) {
case "version":
//Sort array on version
//arrayOfPlayers = sortArray(arrayOfPlayers,branches.master.configuration.player.template.version)
//Loop over all players
for (var i = 0; i < numPlayers; i++) {
// Insert a row
var row = table.insertRow(i + 1);
// Insert new cells (<td> elements):
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
// Add some text to the new cells:
cell1.innerHTML = arrayOfPlayers[i].name;
cell2.innerHTML = arrayOfPlayers[i].id;
cell3.innerHTML =
arrayOfPlayers[
i
].branches.master.configuration.player.template.version;
}
break;
case "imapluginServerUrl":
//Loop over all players
for (var i = 0; i < numPlayers; i++) {
// Insert a row
var row = table.insertRow(i + 1);
if ("plugins" in arrayOfPlayers[i].branches.master.configuration) {
checkForIMA = findObjectInArray(
arrayOfPlayers[i].branches.master.configuration.plugins,
"registry_id",
"@brightcove/videojs-ima3"
);
if (checkForIMA !== -1) {
serverUrlValue =
arrayOfPlayers[i].branches.master.configuration.plugins[
checkForIMA
].options.serverUrl;
// Insert new cells (<td> elements):
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
// Add some text to the new cells:
cell1.innerHTML = rawPlayerData.items[i].name;
cell2.innerHTML = rawPlayerData.items[i].id;
cell3.innerHTML = serverUrlValue;
}
}
}
break;
case "allplugins":
//Loop over all players
for (var i = 0; i < numPlayers; i++) {
// Insert a row
var row = table.insertRow(i + 1),
playerVersion,
pluginsLength;
playerVersion =
arrayOfPlayers[i].branches.master.configuration.player.template
.version;
var havePluginAra =
"plugins" in arrayOfPlayers[i].branches.master.configuration;
if (havePluginAra) {
pluginsLength =
arrayOfPlayers[i].branches.master.configuration.plugins.length;
}
if (playerVersion.charAt(0) == "6" && pluginsLength !== 0) {
if ("plugins" in arrayOfPlayers[i].branches.master.configuration) {
// Insert new cells (<td> elements):
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
// Add some text to the new cells:
cell1.innerHTML = arrayOfPlayers[i].name;
cell2.innerHTML = arrayOfPlayers[i].id;
for (var j = 0; j < pluginsLength; j++) {
if (
"registry_id" in
arrayOfPlayers[i].branches.master.configuration.plugins[j]
) {
cell3.innerHTML +=
arrayOfPlayers[i].branches.master.configuration.plugins[j]
.registry_id + "<br>";
console.log(
"bc plugin",
arrayOfPlayers[i].branches.master.configuration.plugins[j]
.registry_id
);
} else {
cell3.innerHTML +=
arrayOfPlayers[i].branches.master.configuration.plugins[j]
.name + "<br>";
console.log(
"custom login name",
arrayOfPlayers[i].branches.master.configuration.plugins[j]
.name
);
}
}
}
}
}
break;
}
}
// set initial state
reset();
})(window, document);
!
