rcrooks
8/23/2015 - 10:53 AM
DI dashboard: the dashboard
DI dashboard: the dashboard
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dynamic Ingest Log</title>
<style>
body {
font-family: sans-serif;
margin: 5em;
}
.hide {
display: none;
}
.show {
display: block;
}
table {
border-collapse: collapse;
border: 1px #999999 solid;
}
th {
background-color: #666666;
color: #f5f5f5;
padding: .5em;
}
td {
border: 1px #999999 solid;
padding: .5em
}
.hidden {
display: none;
}
</style>
</head>
<body>
<h1>Dynamic Ingest Log</h1>
<h2>Account: <span id="account"></span></h2>
<p style="width:70%">
Videos are listed in order of processing completion time, newest to oldest. The reference id (generated by the <a href="./di-tester.html">Dynamic Ingest tester</a>) is a combination of the date/time that the Dynamic Ingest job was initiated and the ingest profile that was used. You can add additional videos using the <a href="./di-tester.html">Dynamic Ingest tester</a>. New videos will appear in this log after processing is complete.
</p>
<p>
<button id="clearLogBtn">Clear the log</button>
</p>
<div id="videoLogBlock">
<table>
<thead>
<tr>
<th>Video ID</th>
<th>Name</th>
<th>Reference ID</th>
<th>Renditions created</th>
</tr>
</thead>
<tbody id="logBody"></tbody>
</table>
<h4 id="loadingMessage">Loading data, please wait...</h4>
</div>
<script src="video-ids.js"></script>
<script>
var BCLS = ( function (videoIdArray) {
// to use another account, set the account_id value appropriately
// the client_id and client_secret will also need to be changed in the proxy
var account_id = your_account_id_here,
account = document.getElementById('account');
logBody = document.getElementById('logBody'),
loadingMessage = document.getElementById('loadingMessage'),
clearLogBtn = document.getElementById('clearLogBtn'),
i = 0,
iMax = videoIdArray.length,
// set the proxyURL to the location of the proxy app that makes Brightcove API requests
proxyURL = './brightcove-learning-proxy.php',
videoDataArray = [],
videoDataItem = {},
requestOptions = {},
currentVideo,
// functions
submitRequest,
setVideoRequestOptions,
setSourcesRequestOptions,
getVideoInfo,
writeReport,
clearLog,
bclslog;
/**
* Logging function - safe for IE
* @param {string} context - description of the data
* @param {*} message - the data to be logged by the console
* @return {}
*/
bclslog = function (context, message) {
if (window["console"] && console["log"]) {
console.log(context, message);
}
return;
};
// write out the report table
writeReport = function () {
var j,
jMax = videoDataArray.length,
item;
loadingMessage.className = 'hidden';
for (j = 0; j < jMax; j++) {
item = videoDataArray[j];
logBody.innerHTML += '<tr><td>' + item.id + '</td><td>' + item.name + '</td><td>' + item.reference_id + '</td><td>' + item.sources + '</td></tr>';
}
};
// function to set up video data request
setVideoRequestOptions = function () {
requestOptions = {};
requestOptions.url = 'https://cms.api.brightcove.com/v1/accounts/' + account_id + '/videos/' + currentVideo;
submitRequest(requestOptions, proxyURL, 'video');
};
// function to set up video sources request
setSourcesRequestOptions = function () {
requestOptions.url = 'https://cms.api.brightcove.com/v1/accounts/' + account_id + '/videos/' + currentVideo + '/sources';
submitRequest(requestOptions, proxyURL, 'sources');
};
// initiates the cms api requests
getVideoInfo = function () {
if (videoIdArray.length > 0) {
currentVideo = videoIdArray[i];
setVideoRequestOptions();
} else {
loadingMessage.innerHTML = 'No videos have been ingested';
}
};
// function to make the cms api requests
submitRequest = function (options, url, type) {
var httpRequest = new XMLHttpRequest(),
requestData,
responseData,
parsedData,
getResponse = function () {
try {
if (httpRequest.readyState === 4) {
if (httpRequest.status === 200) {
responseData = httpRequest.responseText;
switch (type) {
case "video":
videoDataItem = {};
parsedData = JSON.parse(responseData);
videoDataItem.id = parsedData.id;
videoDataItem.reference_id = parsedData.reference_id;
videoDataItem.name = parsedData.name;
setSourcesRequestOptions();
break;
case "sources":
parsedData = JSON.parse(responseData);
if (parsedData.length > 0) {
videoDataItem.sources = parsedData.length;
} else {
videoDataItem.sources = '<span style="color:#990000">No renditions - ingest failed!</span>';
}
videoDataArray.push(videoDataItem);
i++;
if (i < iMax) {
getVideoInfo();
} else {
writeReport();
}
break;
}
} else {
bclslog("There was a problem with the request. Request returned " + httpRequest.status);
if (type === 'video') {
setVideoRequestOptions();
} else {
setSourcesRequestOptions();
}
}
}
}
catch(e) {
bclslog('Caught Exception: ' + e);
}
};
// set up request data
requestData = "url=" + encodeURIComponent(options.url) + "&requestType=GET";
// set response handler
httpRequest.onreadystatechange = getResponse;
// open the request
httpRequest.open("POST", url);
// set headers
httpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
// open and send request
httpRequest.send(requestData);
};
// event handlers
clearLogBtn.addEventListener('click', function () {
if (window.confirm('Are you sure? This action cannot be undone!')) {
// if your clear-log app resides in another location, change the URL
window.location.href = 'clear-log.php';
}
});
// bclslog('videoIdArray', videoIdArray);
// get things started
account.innerHTML = account_id;
getVideoInfo();
})(videoIdArray);
</script>
</body>
</html>