Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
405 lines (325 sloc) 11.3 KB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Battle Sound</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="vendor/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="vendor/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="public/css/custom.css">
<!-- <link rel="stylesheet" href="public/css/film_strip.css"> -->
<link rel="stylesheet" href="public/css/overlay.css">
<link rel="stylesheet" href="public/css/bootswatch.css">
<script type="text/javascript" src="vendor/js/tabletop.js"></script>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="vendor/js/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="vendor/js/bootstrap.min.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-10 col-md-10 col-lg-8
col-sm-offset-1 col-md-offset-1 col-lg-offset-1">
<h1 class="title" ><span id="mainVideoTitle"></span> <small id="mainVideoDescription"></small></h1>
</div>
</div>
<!--Main player 8 -->
<div class="row">
<div class="col-xs-12 col-sm-8 col-md-8 col-lg-8
col-sm-offset-1 col-md-offset-1 col-lg-offset-1 ">
<div class="centerBlock">
<video id="mainVideo"width="100%" height="100%" class="img-responsive" controls>
<source id="mainVideoSrc" src="dummy.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
</div>
<div class="col-xs-12 col-sm-2 col-md-2 col-lg-2">
<div id="mainVideoText">
Transcription
</div>
</div>
</div>
<div class="row" >
<div class="col-xs-12 col-sm-10 col-md-10 col-lg-10
col-sm-offset-1 col-md-offset-1 col-lg-offset-1">
<hr>
<div id="summplementaryMaterial">
<!-- sumpplementary material -->
</div>
<hr>
</div>
</div>
<div id="myNav" class="overlay ">
<!-- <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3 "> -->
<!-- Button to close the overlay navigation -->
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
<div class="overlay-content">
<div class="col-xs-12 col-sm-10 col-md-10 col-lg-8
col-sm-offset-2 col-md-offset-2 col-lg-offset-3">
<div id="supplementaryMaterialSidebar">
yo
</div>
</div>
<!-- </div> -->
</div>
</div>
<!-- Summplementary material 4 -->
<script>
// var video = document.getElementById("mainVideo");
window.onload = function() { init() };
var public_spreadsheet_url = "https://docs.google.com/spreadsheets/d/1YlaEx8yftVVGlK7dcINtDdHZc3tZi_LUCJUNldtyXws/pubhtml";
function init() {
Tabletop.init( { key: public_spreadsheet_url,
callback: showInfo,
simpleSheet: true } );
}
function showInfo(data, tabletop) {
for (var i=0; i<data.length; i++){
var element = data[i];
if(element.content == "main_video"){
console.log("main")
// console.log(element)
addMainVideo(element)
}else if(element.content == "supplementary_material"){
// console.log(element)
// console.log(element.media_type)
addSupplemntaryElement(element)
}
}
}
function addMainVideo(videoElement){
var mainVideoId = "mainVideo";
loadVideo({
url: videoElement.url,
playerId: mainVideoId,
srcId:'mainVideoSrc',
thumbnail: videoElement.thumbnail
})
addText(videoElement.title, "mainVideoTitle")
addText(videoElement.description, "mainVideoDescription")
// console.log("JSON")
// console.log(videoElement.transcription_json)
//Fetch the json
$.getJSON(videoElement.transcription_json, function(json) {
// console.log("JSON recived")
// console.log(json)
// console.log(); // this will show the info it in firebug console
var lines = json.text[0].paragraph;
var textResult =""
for(var i =0; i<lines.length; i++){
var line = lines[i].line;
// console.log(line);
// console.log( renderLine(line,mainVideoId))
textResult +=renderLine(line, mainVideoId)
// for (var j = 0; line.length; j++){
// var word = line[j];
// console.log(word)
// }
}
//append textResult transcription
// console.log("textResult")
// console.log(textResult)
addTranscriptionToMainVideo(textResult, "mainVideoText");
});
}
function addTranscriptionToMainVideo(textDivs, parentId){
var textDiv = document.getElementById(parentId)
textDiv.innerHTML = textDivs;
}
function renderLine(line,videoId){
var result = ""
for(var k=0; k<line.length; k++){
// console.log("render")
// console.log(line[k].startTime);
// console.log(line[k].text);
// console.log(line[k].id);
result += "<span class='googleFont words' onclick=\"playVideo('"+videoId+"',"+line[k].startTime+")\"' data-start-time='"+line[k].startTime+"' id='word_"+line[k].id+"'"+">"+line[k].text+" </span>";
}
return result
}
function playVideo(videoId,startTime){
var video = document.getElementById(videoId);
video.currentTime = startTime;
// video.load();
//change color of video
video.play();
};
function addText(title, titleId){
document.getElementById(titleId).innerText =title;
}
/**
* to add sumplementary material element, looks at `media_type`
* calls appropriate function to add that media type to the html
*/
function addSupplemntaryElement(element){
console.log(element.media_type)
switch (element.media_type) {
case "video":
addPreview(element,"summplementaryMaterial","sumplementaryMaterialPreview");
break;
case "audio":
// addAudio(element);
break;
case "text":
// addText(element);
break;
case "image":
// addImage(element);
break;
case "soundcloud":
// addSound(element);
break;
case "vimeo":
// addVimeo(element);
break;
case "youtube":
// addNews(element);
break;
default:
console.log("invalid type");
}//end switch
}
function addVideo(videoElem, parentId, className){
var parent = document.getElementById(parentId)
var video = document.createElement('video');
video.id = videoElem.n;
video.className = className;
video.className = "img-responsive";
video.src = videoElem.url;
video.poster = videoElem.thumbnail
video.setAttribute("controls","controls")
console.log(video)
parent.appendChild(video);
video.currentTime = videoElem.media_start_second;
video.play();
}
function addPreview(element){
// var divElementClip = document.createElement("Div");
// divElementClip.className = "clip";
// var divElementFilm = document.createElement("Div");
var parent = document.getElementById("summplementaryMaterial");
//create div
// var iDiv = document.createElement('div');
// // iDiv.style.display='inherit';
// iDiv.className ="suplMatDiv";
// var h2 = document.createElement('h6');
// var t = document.createTextNode(element.title);
// h2.appendChild(t)
// iDiv.appendChild(h2)
//create h2 text
//create node text
//add node text to h1
// add h1 to div
var previewImage = new Image();
previewImage.id = element.n;
previewImage.src = element.thumbnail;
previewImage.dataset.startTime = element.seconds_start;
previewImage.dataset.endTime = element.seconds_end;
previewImage.className= "sumplementaryMaterialPreview bnw";
// previewImage.className= "bnw";
previewImage.addEventListener("click", function(){
// previewImage.classList.toggle("bnw");
//pause main
document.getElementById("mainVideo").pause();
openNav();
document.getElementById("supplementaryMaterialSidebar").innerHTML ="";
addVideo(element,"supplementaryMaterialSidebar","preview" )
});
//append image to div
// iDiv.appendChild(previewImage)
//append div instead of image
parent.appendChild(previewImage);
}
/**
* params config object iwth url, playerId, srcId
* loads the src to a video given the video url
*/
function loadVideo(config){
var player = document.getElementById(config.playerId);
var mp4Vid = document.getElementById(config.srcId);
mp4Vid.src =config.url;
player.poster = config.thumbnail;
console.log(player)
player.load();
// player.addEventListener("onPlay", function(){
// previewImage.classList.toggle("bnw");
// });
/**
* Words hilight
*/
player.ontimeupdate = function() {
console.log("playing")
//Words highlight
var words = document.getElementsByClassName("words")
for(var i =0; i< words.length; i++){
var word = words[i];
if(parseInt(word.dataset.startTime) < parseInt(this.currentTime)){
if(!word.classList.contains('infocus')){
word.classList.toggle("infocus")
}
}else{
if(word.classList.contains('infocus')){
word.classList.toggle("infocus")
}
}
}
//end of words highlight
//supplementary material
var suplMat = document.getElementsByClassName("sumplementaryMaterialPreview")
for(var g = 0; g< suplMat.length; g++){
var suplMatElem = suplMat[g];
if(parseFloat(suplMatElem.dataset.startTime) < parseFloat(this.currentTime)){
if(suplMatElem.classList.contains('infocusSuplElem')){
suplMatElem.classList.toggle("infocusSuplElem")
}
}else{
if(!suplMatElem.classList.contains('infocusSuplElem')){
suplMatElem.classList.toggle("infocusSuplElem")
}
}
if(parseFloat(suplMatElem.dataset.endTime) > parseFloat(this.currentTime)){
suplMatElem.classList.toggle("infocusSuplElem")
}
}
// end suplMat
}
}
// var mainVideo = document.getElementById("mainVideo")
// mainVideo.onplaying = function() {
// var words = document.getElementsByClassName("words")
// for(var i =0; i< words.length; i++){
// var word = words[i];
// if(parseInt(word.startTime) < parseInt(this.currentTime)){
// console.log(parseInt(word.startTime))
// console.log(parseInt(this.currentTime))
// word.classList.toggle("infocus")
// }else{
// word.classList.toggle("infocus")
// }
// }
// }
</script>
</div>
<script>
function openNav() {
document.getElementById("myNav").style.height = "100%";
}
function closeNav() {
document.getElementById("myNav").style.height = "0%";
document.getElementById("supplementaryMaterialSidebar").innerHTML ="";
}
</script>
</body>
</html>