mirror of
https://github.com/mehotkhan/BandersnatchInteractive.git
synced 2025-07-27 17:23:22 +00:00
first commit
This commit is contained in:
Imanoel Ali
commit
08e385231b
8 changed files with 33543 additions and 0 deletions
2
.gitignore
vendored
Normal file
2
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
Black.Mirror.Bandersnatch.2018.720p.WEB-DL.x264.DUAL.mkv
|
||||
Black.Mirror.Bandersnatch.2018.WEBRip.x264-NoGRP.srt
|
||||
1
README.md
Normal file
1
README.md
Normal file
|
|
@ -0,0 +1 @@
|
|||
# BandersnatchInteractive
|
||||
7131
assets/SegmentMap.js
Normal file
7131
assets/SegmentMap.js
Normal file
File diff suppressed because it is too large
Load diff
742
assets/SubPlayerJS.js
Normal file
742
assets/SubPlayerJS.js
Normal file
|
|
@ -0,0 +1,742 @@
|
|||
!window.jQuery && document.write(unescape('%3Cscript src="https://code.jquery.com/jquery-2.1.1.min.js"%3E%3C%2Fscript%3E%3Cscript src="jquery.ajax-cross-origin.min.js"%3E%3C%2Fscript%3E'));
|
||||
|
||||
//loads video
|
||||
var timeStamp = 0 + ":" + 0 + ":" + 0 + "." + 0;
|
||||
var lineNumber = 0;
|
||||
var currentTime = 0;
|
||||
var videoPlayerLoaded = false;
|
||||
var subtitleIsSet = false;
|
||||
var guiIsvisible = false;
|
||||
var isPlaying = false;
|
||||
var isFullScreen = false;
|
||||
var isSubtitleEnabled = true;
|
||||
var isSeeking = false;
|
||||
var isParsing = false;
|
||||
var subtitleArray = [];
|
||||
var ammountOfVideos = 0;
|
||||
var fontsArray = [];
|
||||
|
||||
|
||||
|
||||
class SubPlayerJS {
|
||||
|
||||
constructor(div, file) {
|
||||
this.div = div;
|
||||
this.file = file;
|
||||
this.timeStamp = timeStamp;
|
||||
this.previousVidWidth;
|
||||
this.previousVidHeight;
|
||||
this.lineNumber = lineNumber;
|
||||
this.currentTime = currentTime;
|
||||
this.interval;
|
||||
this.videoPlayerLoaded = videoPlayerLoaded;
|
||||
this.subtitleIsSet = subtitleIsSet;
|
||||
this.guiIsvisible = false;
|
||||
this.isPlaying = isPlaying;
|
||||
this.isFullScreen = isFullScreen;
|
||||
this.isSubtitleEnabled = isSubtitleEnabled;
|
||||
this.subtitleArray = [];
|
||||
this.isSeeking = isSeeking;
|
||||
this.timer;
|
||||
|
||||
|
||||
if (!$("link[href='http://fonts.googleapis.com/icon?family=Material+Icons']").length) {
|
||||
loadjscssfile("http://fonts.googleapis.com/icon?family=Material+Icons", "css");
|
||||
}
|
||||
if (!$("link[href='https://rawgit.com/EldinZenderink/SubPlayerJS/master/SubPlayerJS.css']").length) {
|
||||
loadjscssfile("https://rawgit.com/EldinZenderink/SubPlayerJS/master/SubPlayerJS.css", "css");
|
||||
}
|
||||
if (!$("link[href='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css']").length) {
|
||||
loadjscssfile("https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css", "css");
|
||||
}
|
||||
|
||||
ammountOfVideos++;
|
||||
subtitleArray.push([]);
|
||||
fontsArray.push({});
|
||||
this.loadVideo(ammountOfVideos);
|
||||
|
||||
this.videoid = ammountOfVideos;
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
parseSubtitle(){
|
||||
this.resetSubtitle();
|
||||
var subPlayerVideo = SubPlayerJS.getVideo(this.videoid.toString());
|
||||
var previousTime = 0;
|
||||
var previousTotalAVBytesDecoded = 0;
|
||||
var bitRate = 0;
|
||||
var curTime = 0;
|
||||
var totalAVBytesDecoded= 0;
|
||||
var packsParsed = 0;
|
||||
var packsSize = 0;
|
||||
var packsContainingSubtitle = 0;
|
||||
var timeItSeekedTo = 0;
|
||||
var timeSeekTook = 0;
|
||||
var audioBytesDecoded = 0;
|
||||
var videoBytesDecoded = 0;
|
||||
var bitRate = 0;
|
||||
var curTime = 0;
|
||||
var guessedBytePosition = 0;
|
||||
var parsedSubtitle = [];
|
||||
var needsToSeek = false;
|
||||
var isPlaying = false;
|
||||
var sourceUrl = this.file;
|
||||
var videoid = this.videoid.toString();
|
||||
console.log(videoid);
|
||||
console.log(subPlayerVideo);
|
||||
subPlayerVideo.onended = function(e) {
|
||||
isPlaying = false;
|
||||
};
|
||||
subPlayerVideo.onplay = function(){
|
||||
isPlaying = true;
|
||||
}
|
||||
subPlayerVideo.onpause = function(){
|
||||
isPlaying = false;
|
||||
console.log("is pausing");
|
||||
console.log(subPlayerVideo.currentTime);
|
||||
}
|
||||
subPlayerVideo.onseeking = function(){
|
||||
|
||||
|
||||
timeItSeekedTo = subPlayerVideo.currentTime;
|
||||
|
||||
|
||||
if(!needsToSeek){
|
||||
if(timeItSeekedTo < previousTime){
|
||||
needsToSeek = true;
|
||||
var parsedSubtitleLength = parsedSubtitle.length;
|
||||
|
||||
for(var x = 0; x < parsedSubtitleLength; x++){
|
||||
var timeOfSubtitle = parsedSubtitle[x].time;
|
||||
if(Math.round(timeOfSubtitle) > Math.round(timeItSeekedTo)){
|
||||
guessedBytePosition = totalAVBytesDecoded - parsedSubtitle[x].decodedBytes;
|
||||
subPlayerVideo.currentTime = timeOfSubtitle;
|
||||
return;
|
||||
}
|
||||
}
|
||||
needsToSeek = false;
|
||||
} else {
|
||||
subPlayerVideo.currentTime = previousTime;
|
||||
needsToSeek = true;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
subPlayerVideo.ontimeupdate = function(){
|
||||
|
||||
audioBytesDecoded = subPlayerVideo.webkitAudioDecodedByteCount;
|
||||
videoBytesDecoded = subPlayerVideo.webkitVideoDecodedByteCount;
|
||||
totalAVBytesDecoded = videoBytesDecoded + audioBytesDecoded;
|
||||
curTime = subPlayerVideo.currentTime;
|
||||
bitRate = totalAVBytesDecoded / curTime;
|
||||
|
||||
|
||||
|
||||
var startRequest = Math.round(previousTotalAVBytesDecoded - guessedBytePosition) ;
|
||||
var endRequest = Math.round(totalAVBytesDecoded - guessedBytePosition) ;
|
||||
packsSize = endRequest - startRequest;
|
||||
|
||||
if(subPlayerVideo.currentTime < timeItSeekedTo){
|
||||
subPlayerVideo.playbackRate = 100;
|
||||
} else {
|
||||
needsToSeek = false;
|
||||
subPlayerVideo.playbackRate = 1;
|
||||
var oReq2 = new XMLHttpRequest();
|
||||
oReq2.open("GET", sourceUrl, true);
|
||||
oReq2.setRequestHeader('Range', 'bytes=' + startRequest + '-' + endRequest);
|
||||
oReq2.responseType = "blob";
|
||||
|
||||
oReq2.onload = function(oEvent) {
|
||||
console.log("Received file!");
|
||||
var blob = oReq2.response;
|
||||
packsParsed++;
|
||||
|
||||
var reader = new FileReader();
|
||||
reader.onload = function(){
|
||||
var binaryString = this.result;
|
||||
if(binaryString.indexOf("0,,")){
|
||||
var searchResult = binaryString.split("0,,");
|
||||
var resultLength = searchResult.length;
|
||||
if(resultLength > 1){
|
||||
var parsed = "";
|
||||
for(var x = 1; x < resultLength; x++){
|
||||
var decoded = decodeURI(encodeURI(searchResult[x]).split('%E2%80%BA')[0]) + " \r\n";
|
||||
if(decoded.indexOf('%E2%80%BA') < 0 && decoded !== undefined){
|
||||
parsed = parsed + decoded;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
parsedSubtitle.push({time: curTime, decodedBytes: previousTotalAVBytesDecoded});
|
||||
packsContainingSubtitle++;
|
||||
//document.querySelector('#result').innerHTML = parsed;
|
||||
$('#subtitle_' + videoid.toString()).html('<div style="font-family: Sans-Serif;">' + parsed.replace("\\N", "<br />") + '</div>');
|
||||
console.log(videoid);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
reader.readAsText(blob, 'ISO-8859-1');
|
||||
};
|
||||
oReq2.send(null);
|
||||
|
||||
}
|
||||
|
||||
|
||||
var data = " \
|
||||
Time: " + curTime + " \r\n \
|
||||
BitRate: " + (bitRate / 100) + "kbps \r\n \
|
||||
Audio Bytes Decoded: " + (audioBytesDecoded / 1000000) + "mb \r\n \
|
||||
Video Bytes Decoded: " + (videoBytesDecoded / 1000000) + "mb \r\n \
|
||||
Total Bytes Decoded: " + (totalAVBytesDecoded / 1000000) + " mb \r\n \
|
||||
Buffer Length: " + subPlayerVideo.buffered.length + "\r\n \
|
||||
Buffer Start: " + subPlayerVideo.buffered.start(subPlayerVideo.buffered.length - 1) + "\r\n \
|
||||
Buffer End: " + subPlayerVideo.buffered.end(subPlayerVideo.buffered.length - 1) + "\r\n \
|
||||
Packs Parsed: " + packsParsed + "\r\n \
|
||||
Packs Contianing Subtitle: " + packsContainingSubtitle + " \r\n \
|
||||
Timedifference seek: " + timeSeekTook + " \r\n \
|
||||
guessedBytePosition: " + guessedBytePosition + " \r\n \
|
||||
Packs Size: " + packsSize;
|
||||
|
||||
//document.querySelector('#videodata').innerHTML = data;
|
||||
|
||||
previousTotalAVBytesDecoded = totalAVBytesDecoded;
|
||||
//previousTime = curTime;
|
||||
|
||||
}
|
||||
setInterval(function(){
|
||||
if(previousTime != curTime){
|
||||
previousTime = curTime;
|
||||
}
|
||||
|
||||
}, 1000);
|
||||
|
||||
|
||||
}
|
||||
|
||||
setSubtitle(subtitleurl) {
|
||||
this.resetSubtitle();
|
||||
this.subtitle = subtitleurl;
|
||||
|
||||
if (subtitleurl != "" && subtitleurl != null && subtitleurl != 0) {
|
||||
this.getSubtitle(this.videoid);
|
||||
} else {
|
||||
this.subtitleIsSet = false;
|
||||
$('#enableSub_' + ammountOfVideos.toString()).html('<i class="material-icons" style="color: rgb(96, 96, 96);">subtitles</i>');
|
||||
}
|
||||
|
||||
this.getTimeStamp();
|
||||
|
||||
}
|
||||
|
||||
setWidth(width) {
|
||||
this.videoWidth = width;
|
||||
|
||||
}
|
||||
|
||||
setHeight(height) {
|
||||
this.videoHeight = height;
|
||||
}
|
||||
|
||||
resetSubtitle() {
|
||||
$('#subtitle_' + this.videoid.toString()).html('');
|
||||
}
|
||||
|
||||
loadVideo(videoid) {
|
||||
var vidwidth = 0;
|
||||
var vidheight = 0;
|
||||
|
||||
try {
|
||||
clearInterval(this.interval);
|
||||
} catch (e) {
|
||||
console.log("no interval running");
|
||||
}
|
||||
|
||||
if (this.videoWidth != null && this.videoWidth != "" && this.videoWidth != 0) {
|
||||
vidwidth = this.videoWidth;
|
||||
} else {
|
||||
vidwidth = "100%";
|
||||
}
|
||||
|
||||
if (this.videoHeight != null && this.videoHeight != "" && this.videoHeight != 0) {
|
||||
vidheight = this.videoHeight;
|
||||
} else {
|
||||
vidheight = "";
|
||||
}
|
||||
|
||||
if (!this.videoPlayerLoaded || this.previousVidHeight != h || this.previousVidWidth != w) {
|
||||
|
||||
$(this.div).html('<div class="outer-container-SPJS " id="outerContainer_' + videoid.toString() + '">\
|
||||
<div class="inner-container-SPJS " id="innerContainer_' + videoid.toString() + '">\
|
||||
<div class="video-overlay-SPJS" id="subtitle_' + videoid.toString() + '"><br /></div>\
|
||||
<div style="min-width: 100%;" class="control-SPJS" id="controlDiv_' + videoid.toString() + '"></div>\
|
||||
<video id="SubPlayerVideo_' + videoid.toString() + '" width="' + vidwidth + '" height="' + vidheight + '">\
|
||||
<source id="videoSource_' + videoid.toString() + '" src="">\
|
||||
Your browser does not support HTML5 video.\
|
||||
</video>\
|
||||
</div>\
|
||||
</div>');
|
||||
this.videoPlayerLoaded = true;
|
||||
}
|
||||
|
||||
this.previousVidWidth = this.videoWidth;
|
||||
this.previousVidHeight = this.videoHeight;
|
||||
|
||||
var subPlayerVideo = SubPlayerJS.getVideo(videoid.toString());
|
||||
subPlayerVideo = subPlayerVideo;
|
||||
subPlayerVideo.src = this.file;
|
||||
subPlayerVideo.addEventListener('loadedmetadata', function() {
|
||||
var max = subPlayerVideo.duration;
|
||||
|
||||
$('#controlDiv_' + videoid.toString()).html('<div id="allcontrols_' + videoid.toString() + '" style="width: 100%;"><a href="javascript:;" style="bottom: 7px;" id="playpause_' + videoid.toString() + '" onclick="SubPlayerJS.startPlayVideo(' + videoid.toString() + ')"><i class="material-icons" style="color: rgb(255, 255, 255);">play_arrow</i></a><span style="visibility:hidden"> | </span><input onclick="SubPlayerJS.onSeekBarClick(' + videoid.toString() + ')" style="min-width: 80%; bottom: 9px;" type="range" id="seekbar_' + videoid.toString() + '" min="0" max="' + max + '" /><span style="visibility:hidden"> | </span><a id="fullScreen_' + videoid.toString() + '" href="javascript:;" style=" style="" onclick="SubPlayerJS.makeFullScreen(' + videoid.toString() + ')"><i class="material-icons" style="font-size: 24px; color: rgb(255, 255, 255);" >fullscreen</i></a><span style="visibility:hidden"> | </span><a href="javascript:;" id="enableSub_' + videoid.toString() + '" onclick="SubPlayerJS.enaDisaSub(' + videoid.toString() + ')"> <i class="material-icons" style="color: rgb(255, 255, 255);">subtitles</i></a></div>');
|
||||
$('#seekbar_' + videoid.toString()).val(0).css("width", "80%").css("right", "5px");
|
||||
|
||||
$('#allcontrols').hide();
|
||||
|
||||
setTimeout(function() {
|
||||
setInterval(function() {
|
||||
if (!this.isSeeking) {
|
||||
$('#seekbar_' + videoid.toString()).val(subPlayerVideo.currentTime);
|
||||
}
|
||||
}, 1000);
|
||||
}, 0);
|
||||
});
|
||||
|
||||
$('#outerContainer_' + videoid.toString()).on("change mousemove", function() {
|
||||
$('#outerContainer_' + videoid.toString()).css({
|
||||
cursor: "auto"
|
||||
});
|
||||
$('#allcontrols_' + videoid.toString()).show();
|
||||
|
||||
clearTimeout(this.timer);
|
||||
this.timer = setTimeout(function() {
|
||||
$('#allcontrols_' + videoid.toString()).hide();
|
||||
$('#outerContainer_' + videoid.toString()).css({
|
||||
cursor: "none"
|
||||
});
|
||||
}, 4000);
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
getSubtitle(videoid) {
|
||||
var extension = this.subtitle.replace(/^.*\./, '');
|
||||
$.ajax({
|
||||
url: this.subtitle,
|
||||
type: 'get',
|
||||
async: false,
|
||||
success: function(data) {
|
||||
switch (extension) {
|
||||
case "ass":
|
||||
console.log("SubPlayerJS: SSA (SubStationAlpha) Supported!");
|
||||
SubPlayerJS.parseSubStationAlpha(data, videoid);
|
||||
break;
|
||||
case "srt":
|
||||
|
||||
console.log("SubPlayerJS: SRT (SubRip) Supported!");
|
||||
SubPlayerJS.parseSubRip(data, videoid);
|
||||
break;
|
||||
case "vtt":
|
||||
console.log("SubPlayerJS: Comming soon!");
|
||||
break;
|
||||
case "sub":
|
||||
console.log("SubPlayerJS: Maybe supported in future!");
|
||||
break;
|
||||
case "smi":
|
||||
console.log("SubPlayerJS: Maybe supported in future!");
|
||||
break;
|
||||
case "usf":
|
||||
console.log("SubPlayerJS: Maybe supported in future!");
|
||||
break;
|
||||
default:
|
||||
console.log("SubPlayerJS: Subtitle with extension: " + extension + " is NOT supported!");
|
||||
break;
|
||||
}
|
||||
console.log("SubPlayerJS: Succesfully read subtitle!");
|
||||
},
|
||||
error: function(err) {
|
||||
console.log("SubPlayerJS: FAILED TO LOAD SUBTITLE: " + err);
|
||||
this.subtitleIsSet = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
getTimeStamp() {
|
||||
var subPlayerVideo = SubPlayerJS.getVideo(this.videoid.toString());
|
||||
var that = this;
|
||||
var videoid = this.videoid.toString();
|
||||
this.interval = setInterval(function() {
|
||||
var curTimeSecond = subPlayerVideo.currentTime;
|
||||
this.currentTime = curTimeSecond;
|
||||
setTimeout(that.showSubtitle(curTimeSecond, videoid), 0);
|
||||
}, 50);
|
||||
}
|
||||
|
||||
showSubtitle(time, videoid) {
|
||||
var localArray = subtitleArray[videoid - 1];
|
||||
var fonts = fontsArray[videoid - 1];
|
||||
if(fonts.length < 1){
|
||||
fonts["Default"] = "Verdana";
|
||||
}
|
||||
try {
|
||||
var currentText = localArray[this.lineNumber];
|
||||
var secondOfTimeStart = currentText[0];
|
||||
var secondOfTimeEnd = currentText[1];
|
||||
|
||||
if (time < secondOfTimeStart) {
|
||||
|
||||
var index = 0;
|
||||
this.lineNumber = 0;
|
||||
$('#subtitle_' + videoid.toString()).html('');
|
||||
var arrayLength = localArray.length;
|
||||
for (var i = 0; i < arrayLength; i++) {
|
||||
var timeStart = parseInt(localArray[i][0]);
|
||||
var timeEnd = parseInt(localArray[i][1]);
|
||||
|
||||
if (time > timeStart) {
|
||||
this.lineNumber = i;
|
||||
break;
|
||||
}
|
||||
}
|
||||
$('#subtitle_' + videoid.toString()).html('');
|
||||
} else {
|
||||
if (time > secondOfTimeEnd) {
|
||||
this.lineNumber++;
|
||||
$('#subtitle_' + videoid.toString()).html('');
|
||||
} else {
|
||||
var fullText = currentText[2];
|
||||
var fontstyletouse;
|
||||
if(currentText[3] == null || currentText[3].length == 0){
|
||||
fontstyletouse = "Default";
|
||||
} else {
|
||||
fontstyletouse = currentText[3];
|
||||
}
|
||||
$('#subtitle_' + videoid.toString()).html('<div style="font-family: ' + fonts[fontstyletouse] + '">' + fullText.substring(0, fullText.length - 1).replace("\\N", "<br />") + '</div>');
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
try{
|
||||
var index = 0;
|
||||
this.lineNumber = 0;
|
||||
$('#subtitle_' + videoid.toString()).html('');
|
||||
var arrayLength = localArray.length;
|
||||
for (var i = 0; i < arrayLength; i++) {
|
||||
var timeStart = parseInt(localArray[i][0]);
|
||||
var timeEnd = parseInt(localArray[i][1]);
|
||||
|
||||
if (time > timeStart) {
|
||||
this.lineNumber = i;
|
||||
break;
|
||||
}
|
||||
}
|
||||
} catch (e){
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
static getVideo(ammount){
|
||||
return document.getElementById('SubPlayerVideo_' + ammount);
|
||||
}
|
||||
|
||||
static timeStampToSeconds(timestamp, fileType) {
|
||||
var totalSeconds = 0;
|
||||
switch(fileType){
|
||||
case "ass":
|
||||
var parts = timestamp.split(':');
|
||||
var hour = parts[0];
|
||||
var minute = parts[1];
|
||||
var second = parts[2];
|
||||
totalSeconds = hour * 3600 + minute * 60 + parseInt(second);
|
||||
break;
|
||||
case "srt":
|
||||
var parts = timestamp.split(':');
|
||||
var hour = parts[0];
|
||||
var minute = parts[1];
|
||||
var second = parts[2].split('\r\n')[0];
|
||||
totalSeconds = hour * 3600 + minute * 60 + parseInt(second);
|
||||
break;
|
||||
}
|
||||
|
||||
return totalSeconds;
|
||||
}
|
||||
|
||||
static parseSubStationAlpha(ssa, videoid) {
|
||||
var fonts = {};
|
||||
console.log(this.fonts);
|
||||
var styling = ssa.split("Styles]")[1].split("[Events]")[0].split("\n");
|
||||
$.each(styling, function(key, style) {
|
||||
if(style.indexOf("Style:") > -1){
|
||||
var information = style.split(':')[1].split(',');
|
||||
var styletype = information[0].trim();
|
||||
var font = information[1].trim();
|
||||
console.log("STYLE TYPE = " + styletype + ", FONT: " + font);
|
||||
fonts[styletype] = font;
|
||||
fontsArray[videoid - 1] = fonts;
|
||||
console.log(this.fonts);
|
||||
}
|
||||
|
||||
});
|
||||
this.loadFont(videoid);
|
||||
var lines = ssa.split("\n");
|
||||
$.each(lines, function(key, line) {
|
||||
if (line.indexOf("Dialogue") > -1) {
|
||||
var parts = line.split(',');
|
||||
parts[0] = SubPlayerJS.timeStampToSeconds(parts[1], "ass");
|
||||
parts[1] = SubPlayerJS.timeStampToSeconds(parts[2], "ass");
|
||||
var text = "";
|
||||
for(var i = 9; i < line.split(',').length; i++){
|
||||
text = text + line.split(',')[i] + ",";
|
||||
}
|
||||
parts[2] = text;
|
||||
|
||||
parts[3] = parts[3];
|
||||
|
||||
for(var i = 4; i < line.split(',').length; i++){
|
||||
parts[i] = "";
|
||||
}
|
||||
subtitleArray[videoid - 1].push(parts);
|
||||
}
|
||||
});
|
||||
this.subtitleIsSet = true;
|
||||
}
|
||||
|
||||
static parseSubRip(srt, videoid){
|
||||
var lines = srt.split(/[\r\n]+[\r\n]+/);
|
||||
$.each(lines, function(key, line) {
|
||||
if (line.indexOf("-->") > -1) {
|
||||
var parts = line.split(/[\r\n]+/)[1].split(/[\r\n]+/)[0].split('-->');
|
||||
parts[0] = SubPlayerJS.timeStampToSeconds(parts[0], "srt");
|
||||
parts[1] = SubPlayerJS.timeStampToSeconds(parts[1], "srt");
|
||||
|
||||
|
||||
var text = "";
|
||||
for(var i = 2; i < line.split(/[\r\n]+/).length; i++){
|
||||
text = text + line.split(/[\r\n]+/)[i] + "<br />";
|
||||
}
|
||||
parts[2] = text;
|
||||
subtitleArray[videoid - 1].push(parts);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
static enaDisaSub(videoid) {
|
||||
if (this.isSubtitleEnabled) {
|
||||
this.isSubtitleEnabled = false;
|
||||
|
||||
$('#subtitle_' + videoid.toString()).css("z-index", "-1");
|
||||
$('#enableSub_' + videoid.toString()).html('<i class="material-icons" style="color: rgb(96, 96, 96);">subtitles</i>');
|
||||
|
||||
} else {
|
||||
this.isSubtitleEnabled = true;
|
||||
|
||||
$('#subtitle_' + videoid.toString()).css("z-index", "1");
|
||||
$('#enableSub_' + videoid.toString()).html('<i class="material-icons" style="color: rgb(255, 255, 255);">subtitles</i>');
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
static startPlayVideo(videoid) {
|
||||
if (!this.isPlaying) {
|
||||
SubPlayerJS.getVideo(videoid).play();
|
||||
$('#playpause_' + videoid.toString()).html('<i class="material-icons" style="color: rgb(255, 255, 255);">pause</i>');
|
||||
this.isPlaying = true;
|
||||
} else {
|
||||
SubPlayerJS.getVideo(videoid).pause();
|
||||
$('#playpause_' + videoid.toString()).html('<i class="material-icons" style="color: rgb(255, 255, 255);">play_arrow</i>');
|
||||
this.isPlaying = false;
|
||||
}
|
||||
}
|
||||
|
||||
static onSeekBarClick(videoid) {
|
||||
var currentPosition = $('#seekbar_' + videoid.toString()).val();
|
||||
SubPlayerJS.getVideo(videoid).currentTime = currentPosition;
|
||||
// console.log(currentPosition);
|
||||
return false;
|
||||
}
|
||||
|
||||
static makeFullScreen(videoid) {
|
||||
var i = document.getElementById('innerContainer_' + videoid.toString());
|
||||
|
||||
// go full-screen
|
||||
|
||||
if (!this.isFullScreen) {
|
||||
|
||||
if (i.requestFullscreen) {
|
||||
i.requestFullscreen();
|
||||
} else if (i.webkitRequestFullscreen) {
|
||||
i.webkitRequestFullscreen();
|
||||
} else if (i.mozRequestFullScreen) {
|
||||
i.mozRequestFullScreen();
|
||||
} else if (i.msRequestFullscreen) {
|
||||
i.msRequestFullscreen();
|
||||
}
|
||||
console.log("going into fullscreen");
|
||||
|
||||
$('#SubPlayerVideo_' + videoid.toString()).css({
|
||||
position: 'fixed', //or fixed depending on needs
|
||||
top: 0,
|
||||
left: 0,
|
||||
height: '100%',
|
||||
"background-color": "black"
|
||||
});
|
||||
|
||||
$('#subtitle_' + videoid.toString()).css({
|
||||
position: 'fixed', //or fixed depending on needs
|
||||
top: '80%',
|
||||
left: 0,
|
||||
height: '100%',
|
||||
width: '100%'
|
||||
});
|
||||
|
||||
$('#controlDiv_' + videoid.toString()).css({
|
||||
position: 'fixed', //or fixed depending on needs
|
||||
top: '85%',
|
||||
left: 0,
|
||||
width: '100%'
|
||||
});
|
||||
$('#fullScreen_' + videoid.toString()).html('<i class="material-icons" style="color: rgb(255, 255, 255);">fullscreen_exit</i>');
|
||||
this.isFullScreen = true;
|
||||
} else {
|
||||
console.log("exiting fullscreen");
|
||||
if (document.exitFullscreen) {
|
||||
document.exitFullscreen();
|
||||
} else if (document.webkitExitFullscreen) {
|
||||
document.webkitExitFullscreen();
|
||||
} else if (document.mozCancelFullScreen) {
|
||||
document.mozCancelFullScreen();
|
||||
} else if (document.msExitFullscreen) {
|
||||
document.msExitFullscreen();
|
||||
}
|
||||
|
||||
$('#SubPlayerVideo_' + videoid.toString()).css({
|
||||
position: 'relative',
|
||||
"background-color": "",
|
||||
height: ''
|
||||
});
|
||||
|
||||
$('#subtitle_' + videoid.toString()).css({
|
||||
position: 'absolute', //or fixed depending on needs
|
||||
top: '80%',
|
||||
left: 0,
|
||||
height: '',
|
||||
width: '100%'
|
||||
});
|
||||
|
||||
|
||||
$('#controlDiv_' + videoid.toString()).css({
|
||||
position: 'absolute', //or fixed depending on needs
|
||||
top: '85%',
|
||||
left: 0,
|
||||
width: '100%'
|
||||
});
|
||||
$('#fullScreen_' + videoid.toString()).html('<i class="material-icons" style="color: rgb(255, 255, 255);">fullscreen</i>');
|
||||
this.isFullScreen = false;
|
||||
}
|
||||
return false;
|
||||
|
||||
}
|
||||
|
||||
static loadFont(videoid){
|
||||
console.log("LOADING FONTS");
|
||||
console.log(fontsArray[videoid - 1]);
|
||||
var fonts = fontsArray[videoid - 1];
|
||||
for (var style in fonts) {
|
||||
var font = fonts[style].split(' ')[0];
|
||||
|
||||
var downloadFont = true;
|
||||
if (typeof(Storage) !== "undefined") {
|
||||
if(localStorage.getItem(style) !== null){
|
||||
console.log("LOADED FONT: " + font + " FROM LOCAL STORAGE :D" );
|
||||
loadjscssfile("data:text/css;base64," + localStorage.getItem(font), "css");
|
||||
downloadFont = false;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
if(downloadFont){
|
||||
console.log("downloading: " + font);
|
||||
$.ajax({
|
||||
async: false,
|
||||
url: 'https://crossorigin.me/https://www.onlinewebfonts.com/search?q=' + font,
|
||||
success: function(data) {
|
||||
//console.log(data);
|
||||
var foundUrl = data.substring(data.indexOf("class=\"url")).split('"')[3].split('"')[0].replace("/download/", "");
|
||||
var fontstyle = data.substring(data.indexOf("class=\"url")).split('"')[5].substring(1 ).split('<')[0];
|
||||
console.log("foundUrl: " + foundUrl);
|
||||
console.log("fontstyle: " + fontstyle);
|
||||
|
||||
$.ajax({
|
||||
async: true,
|
||||
url: "https://crossorigin.me/https://db.onlinewebfonts.com/c/" + foundUrl + "?family=" + fontstyle,
|
||||
success: function(data) {
|
||||
if (typeof(Storage) !== "undefined") {
|
||||
// Store
|
||||
localStorage.setItem(font, btoa(unescape(encodeURIComponent(data))));
|
||||
console.log("saved subtitle: " + fontstyle + " as base64 in localstorage");
|
||||
} else {
|
||||
console.log("did notsaved subtitle: " + fontstyle + " as base64 in localstorage");
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
loadjscssfile("https://db.onlinewebfonts.com/c/" + foundUrl + "?family=" + fontstyle, "css");
|
||||
for (var style2 in fonts) {
|
||||
//console.log(fonts[style2] + " =?= " + fonts[style] + "-?>" + fontstyle);
|
||||
if( fonts[style2] == fonts[style]){
|
||||
fonts[style2] = fontstyle;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
fontsArray[videoid - 1] = fonts;
|
||||
console.log("done");
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
function loadjscssfile(filename, filetype) {
|
||||
if (filetype == "js") { //if filename is a external JavaScript file
|
||||
var fileref = document.createElement('script')
|
||||
fileref.setAttribute("type", "text/javascript")
|
||||
fileref.setAttribute("src", filename)
|
||||
} else if (filetype == "css") { //if filename is an external CSS file
|
||||
var fileref = document.createElement("link")
|
||||
fileref.setAttribute("rel", "stylesheet")
|
||||
fileref.setAttribute("type", "text/css")
|
||||
fileref.setAttribute("href", filename)
|
||||
}
|
||||
if (typeof fileref != "undefined")
|
||||
document.getElementsByTagName("head")[0].appendChild(fileref)
|
||||
}
|
||||
|
||||
function loadScript(url, callback) {
|
||||
// Adding the script tag to the head as suggested before
|
||||
var head = document.getElementsByTagName('head')[0];
|
||||
var script = document.createElement('script');
|
||||
script.type = 'text/javascript';
|
||||
script.src = url;
|
||||
|
||||
// Then bind the event to the callback function.
|
||||
// There are several events for cross browser compatibility.
|
||||
script.onreadystatechange = callback;
|
||||
script.onload = callback;
|
||||
|
||||
// Fire the loading
|
||||
head.appendChild(script);
|
||||
}
|
||||
24959
assets/bandersnatch.js
Normal file
24959
assets/bandersnatch.js
Normal file
File diff suppressed because it is too large
Load diff
430
assets/scripts.js
Normal file
430
assets/scripts.js
Normal file
|
|
@ -0,0 +1,430 @@
|
|||
var segmentMap = SegmentMap;
|
||||
var bv = bandersnatch.videos['80988062'].interactiveVideoMoments.value;
|
||||
var choicePoints = bv.choicePointNavigatorMetadata.choicePointsMetadata.choicePoints;
|
||||
var momentsBySegment = bv.momentsBySegment;
|
||||
var segmentGroups = bv.segmentGroups;
|
||||
var captions = {};
|
||||
var currentSegment;
|
||||
var currentMoment;
|
||||
var nextSegment = null;
|
||||
var momentSelected = null;
|
||||
var persistentState = bv.stateHistory;
|
||||
var globalChoices = {};
|
||||
|
||||
function msToString(ms) {
|
||||
return new Date(ms).toUTCString().split(' ')[4];
|
||||
}
|
||||
|
||||
function getCurrentMs() {
|
||||
return Math.round(document.getElementById("video").currentTime * 1000.0);
|
||||
}
|
||||
|
||||
function generateJs(cond) {
|
||||
if (cond[0] == 'persistentState') {
|
||||
return '!!persistentState["' + cond[1] + '"]';
|
||||
} else if (cond[0] == 'not') {
|
||||
return '!(' + generateJs(cond[1]) + ')';
|
||||
} else if (cond[0] == 'and') {
|
||||
var conds = [];
|
||||
for (var i = 1; i < cond.length; i++) {
|
||||
conds.push('(' + generateJs(cond[i]) + ')');
|
||||
}
|
||||
return '(' + conds.join(' && ') + ')';
|
||||
} else if (cond[0] == 'or') {
|
||||
var conds = [];
|
||||
for (var i = 1; i < cond.length; i++) {
|
||||
conds.push('(' + generateJs(cond[i]) + ')');
|
||||
}
|
||||
return '(' + conds.join(' || ') + ')';
|
||||
} else {
|
||||
console.log('unsupported condition!', cond);
|
||||
return 'true';
|
||||
}
|
||||
}
|
||||
|
||||
function checkPrecondition(segmentId) {
|
||||
let precondition = bv.preconditions[segmentId];
|
||||
|
||||
if (precondition) {
|
||||
let cond = generateJs(precondition);
|
||||
let match = eval(cond);
|
||||
|
||||
console.log(cond, '==', match);
|
||||
|
||||
return match;
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
function findSegment(id) {
|
||||
if (id.startsWith('nsg-')) {
|
||||
id = id.substr(4);
|
||||
}
|
||||
if (SegmentMap.segments[id]) {
|
||||
// check precondition
|
||||
return id;
|
||||
}
|
||||
|
||||
if (segmentGroups[id]) {
|
||||
for (v of segmentGroups[id]) {
|
||||
if (v.segmentGroup) {
|
||||
return findSegment(v.segmentGroup);
|
||||
} else if (v.segment) {
|
||||
// check precondition
|
||||
return v.segment;
|
||||
} else {
|
||||
if (checkPrecondition(v))
|
||||
return v;
|
||||
}
|
||||
}
|
||||
}
|
||||
return id;
|
||||
}
|
||||
|
||||
function getChoiceMs(choiceId) {
|
||||
var segmentId = findSegment(choiceId);
|
||||
return getSegmentMs(segmentId);
|
||||
}
|
||||
|
||||
function getSegmentId(ms) {
|
||||
for (const [k, v] of Object.entries(SegmentMap.segments)) {
|
||||
if (ms >= v.startTimeMs && ms < v.endTimeMs) {
|
||||
return k;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
function getSegmentMs(segmentId) {
|
||||
return segmentMap.segments[segmentId].startTimeMs;
|
||||
}
|
||||
|
||||
function getMoment(ms) {
|
||||
for (const [k, v] of Object.entries(momentsBySegment)) {
|
||||
for (r of v)
|
||||
if (r.type == 'scene:cs_bs') {
|
||||
if (ms >= r.startMs && ms < r.endMs) {
|
||||
return r;
|
||||
}
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
function newList(id) {
|
||||
var ul = document.getElementById(id);
|
||||
while (ul.firstChild) {
|
||||
ul.removeChild(ul.firstChild);
|
||||
}
|
||||
return ul;
|
||||
}
|
||||
|
||||
function addItem(ul, text, url) {
|
||||
var li = document.createElement("li");
|
||||
var a = document.createElement("a");
|
||||
a.textContent = text;
|
||||
a.setAttribute('href', url);
|
||||
li.appendChild(a);
|
||||
ul.appendChild(li);
|
||||
}
|
||||
|
||||
function setNextSegment(segmentId, comment) {
|
||||
console.log('setNextSegment', segmentId, comment);
|
||||
nextSegment = segmentId;
|
||||
var ul = newList("nextSegment");
|
||||
var caption = 'nextSegment: ' + segmentId;
|
||||
addItem(ul, comment ? caption + ' (' + comment + ')' : caption,
|
||||
'javascript:playSegment("' + segmentId + '")');
|
||||
}
|
||||
|
||||
function addZones(segmentId) {
|
||||
var ul = newList("interactionZones");
|
||||
var caption = 'currentSegment(' + segmentId + ')';
|
||||
addItem(ul, caption, 'javascript:playSegment("' + segmentId + '")');
|
||||
|
||||
var v = segmentMap.segments[segmentId];
|
||||
if (v && v.ui && v.ui.interactionZones) {
|
||||
var index = 0;
|
||||
for (z of v.ui.interactionZones) {
|
||||
var startMs = z[0];
|
||||
var stopMs = z[1];
|
||||
var caption = segmentId + ' interactionZone ' + index;
|
||||
addItem(ul, caption, 'javascript:seek(' + startMs + ')');
|
||||
index++;
|
||||
}
|
||||
}
|
||||
|
||||
var ul = newList("nextSegments");
|
||||
for (const [k, v] of Object.entries(segmentMap.segments[segmentId].next)) {
|
||||
var caption = captions[k] ? captions[k] : k;
|
||||
if (segmentMap.segments[segmentId].defaultNext == k) {
|
||||
caption = '[' + caption + ']';
|
||||
setNextSegment(k);
|
||||
}
|
||||
addItem(ul, caption, 'javascript:playSegment("' + k + '")');
|
||||
}
|
||||
}
|
||||
|
||||
function addChoices(r) {
|
||||
var ul = newList("choices");
|
||||
document.getElementById("choiceCaption").innerHTML = '';
|
||||
if (!r) return;
|
||||
index = 0;
|
||||
|
||||
for (x of r.choices) {
|
||||
console.log(x.id, 'choice saved');
|
||||
globalChoices[x.id] = x;
|
||||
|
||||
var caption = r.defaultChoiceIndex == index ? '[' + x.text + ']' : x.text;
|
||||
addItem(ul, caption, 'javascript:choice("' +
|
||||
(x.segmentId ? x.segmentId : (x.sg ? x.sg : x.id)) + '", "' + x.text + '", "' + x.id + '")');
|
||||
index++;
|
||||
}
|
||||
|
||||
document.getElementById("choiceCaption").innerHTML = choicePoints[r.id].description;
|
||||
}
|
||||
|
||||
|
||||
function updateProgressBar(ms, r) {
|
||||
var p = 0;
|
||||
|
||||
if (r && ms > r.startMs && ms < r.endMs) {
|
||||
p = 100 - Math.floor((ms - r.startMs) * 100 / (r.endMs - r.startMs));
|
||||
}
|
||||
|
||||
document.getElementById("progress").style.width = p + '%';
|
||||
}
|
||||
|
||||
var timerId = 0;
|
||||
|
||||
var switchFrom = null;
|
||||
var switchTo = null;
|
||||
|
||||
function ontimeout(nextSegment) {
|
||||
console.log('ontimeout', nextSegment);
|
||||
|
||||
if (switchFrom != currentSegment || switchTo != nextSegment) {
|
||||
playSegment(nextSegment);
|
||||
}
|
||||
|
||||
switchFrom = currentSegment;
|
||||
switchTo = nextSegment;
|
||||
}
|
||||
|
||||
function ontimeupdate(evt) {
|
||||
var ms = getCurrentMs();
|
||||
|
||||
var segmentId = getSegmentId(ms);
|
||||
|
||||
// ontimeupdate resolution is about a second, better use timer
|
||||
clearTimeout(timerId);
|
||||
if (segmentId && nextSegment && nextSegment != segmentId) {
|
||||
var timeLeft = SegmentMap.segments[segmentId].endTimeMs - ms;
|
||||
timerId = setTimeout(ontimeout, timeLeft, nextSegment);
|
||||
}
|
||||
|
||||
if (currentSegment != segmentId) {
|
||||
console.log('ontimeupdate', currentSegment, segmentId, ms, msToString(ms));
|
||||
currentSegment = segmentId;
|
||||
addZones(segmentId);
|
||||
currentMoment = null;
|
||||
addChoices(0);
|
||||
}
|
||||
|
||||
var r = getMoment(ms);
|
||||
if (r && momentSelected != r.id) {
|
||||
updateProgressBar(ms, r);
|
||||
if (currentMoment != r.id) {
|
||||
currentMoment = r.id;
|
||||
console.log('interaction', currentMoment);
|
||||
addChoices(r);
|
||||
}
|
||||
} else {
|
||||
currentMoment = null;
|
||||
addChoices(0);
|
||||
updateProgressBar(0);
|
||||
}
|
||||
}
|
||||
|
||||
function jumpForward(ms) {
|
||||
var ms = getCurrentMs();
|
||||
var segmentId = getSegmentId(ms);
|
||||
var v = segmentMap.segments[segmentId];
|
||||
|
||||
var interactionMs = 0;
|
||||
if (v && v.ui && v.ui.interactionZones) {
|
||||
for (z of v.ui.interactionZones) {
|
||||
var startMs = z[0];
|
||||
var stopMs = z[1];
|
||||
if (ms < startMs)
|
||||
interactionMs = startMs;
|
||||
}
|
||||
}
|
||||
|
||||
if (interactionMs) {
|
||||
seek(interactionMs);
|
||||
} else {
|
||||
playSegment(nextSegment);
|
||||
}
|
||||
}
|
||||
|
||||
function jumpBack() {
|
||||
var ms = getCurrentMs();
|
||||
var segmentId = getSegmentId(ms);
|
||||
var startMs = getSegmentMs(segmentId);
|
||||
var previousSegment = getSegmentId(startMs - 1000);
|
||||
console.log('jumpBack from-to', segmentId, previousSegment);
|
||||
playSegment(previousSegment);
|
||||
}
|
||||
|
||||
function toggleFullScreen() {
|
||||
console.log('toggleFullScreen');
|
||||
var c = document.getElementById("c");
|
||||
if (!document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement) {
|
||||
if (c.requestFullscreen) {
|
||||
c.requestFullscreen();
|
||||
} else if (c.msRequestFullscreen) {
|
||||
c.msRequestFullscreen();
|
||||
} else if (c.mozRequestFullScreen) {
|
||||
c.mozRequestFullScreen();
|
||||
} else if (c.webkitRequestFullscreen) {
|
||||
c.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
|
||||
}
|
||||
} else {
|
||||
if (document.exitFullscreen) {
|
||||
document.exitFullscreen();
|
||||
} else if (document.msExitFullscreen) {
|
||||
document.msExitFullscreen();
|
||||
} else if (document.mozCancelFullScreen) {
|
||||
document.mozCancelFullScreen();
|
||||
} else if (document.webkitExitFullscreen) {
|
||||
document.webkitExitFullscreen();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function togglePlayPause() {
|
||||
var v = document.getElementById("video");
|
||||
if (v.paused) v.play();
|
||||
else v.pause();
|
||||
}
|
||||
|
||||
function onload() {
|
||||
var video_selector = document.getElementById("video");
|
||||
var file_selector = document.getElementById("file-selector");
|
||||
if (video_selector.getAttribute("src") == '') {
|
||||
console.log('no video')
|
||||
file_selector.style.display = 'table';
|
||||
document.getElementById("wrapper-video").style.display = 'none';
|
||||
}
|
||||
document.getElementById('fileinput').addEventListener('change', function () {
|
||||
var file = this.files[0];
|
||||
// This code is only for demo ...
|
||||
var fileUrl = URL.createObjectURL(file)
|
||||
console.log(file);
|
||||
console.log(fileUrl)
|
||||
video_selector.src = fileUrl;
|
||||
file_selector.style.display = 'none';
|
||||
document.getElementById("wrapper-video").style.display = 'block';
|
||||
}, false);
|
||||
|
||||
video_selector.ontimeupdate = ontimeupdate;
|
||||
|
||||
var c = document.getElementById("c");
|
||||
c.ondblclick = toggleFullScreen;
|
||||
c.onclick = function () {
|
||||
// can't togglePlayPause here, choice buttons stop the video
|
||||
// should use preventdefault or something
|
||||
// use spacebar for now
|
||||
// mind that autoplay is disabled in latest chrome, so play after click
|
||||
document.getElementById("video").play();
|
||||
};
|
||||
|
||||
document.onkeypress = function (e) {
|
||||
if (e.code == 'KeyF')
|
||||
toggleFullScreen();
|
||||
if (e.code == 'KeyR')
|
||||
playSegment(0);
|
||||
if (e.code == 'Space')
|
||||
togglePlayPause();
|
||||
}
|
||||
|
||||
document.onkeydown = function (evt) {
|
||||
var v = document.getElementById("video");
|
||||
|
||||
if (evt.key == 'ArrowLeft') {
|
||||
jumpBack();
|
||||
}
|
||||
|
||||
if (evt.key == 'ArrowRight') {
|
||||
jumpForward();
|
||||
}
|
||||
}
|
||||
|
||||
if (location.hash) {
|
||||
var segmentId = location.hash.slice(1);
|
||||
playSegment(segmentId);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function seek(ms) {
|
||||
clearTimeout(timerId);
|
||||
console.log('seek', ms);
|
||||
momentSelected = null;
|
||||
document.getElementById("video").currentTime = ms / 1000.0;
|
||||
}
|
||||
|
||||
function choice(choiceId, text, id) {
|
||||
var segmentId = findSegment(choiceId);
|
||||
console.log('choice', choiceId, 'nextSegment', segmentId);
|
||||
applyImpression(globalChoices[id]);
|
||||
setNextSegment(segmentId, text);
|
||||
momentSelected = choiceId;
|
||||
addChoices(0);
|
||||
}
|
||||
|
||||
function applyImpression(obj) {
|
||||
if (!obj) {
|
||||
return;
|
||||
}
|
||||
|
||||
impressionData = obj.impressionData;
|
||||
|
||||
if (impressionData && impressionData.type == 'userState') {
|
||||
for (const [variable, value] of Object.entries(impressionData.data.persistent)) {
|
||||
console.log('persistentState set', variable, '=', value);
|
||||
persistentState[variable] = value;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function applyPlaybackImpression(segmentId) {
|
||||
let moments = momentsBySegment[segmentId];
|
||||
|
||||
if (!moments) {
|
||||
console.log('warning - no moments');
|
||||
return;
|
||||
}
|
||||
|
||||
for (moment of moments) {
|
||||
if (moment.type != 'notification:playbackImpression') {
|
||||
continue;
|
||||
}
|
||||
|
||||
applyImpression(moment);
|
||||
}
|
||||
}
|
||||
|
||||
function playSegment(segmentId) {
|
||||
clearTimeout(timerId);
|
||||
if (!segmentId || segmentId == "undefined")
|
||||
segmentId = '1A';
|
||||
console.log('playSegment', segmentId);
|
||||
applyPlaybackImpression(segmentId);
|
||||
location.hash = segmentId;
|
||||
document.title = 'Bandersnatch - Chapter ' + segmentId;
|
||||
var ms = getSegmentMs(segmentId);
|
||||
seek(ms);
|
||||
}
|
||||
229
assets/styles.css
Normal file
229
assets/styles.css
Normal file
|
|
@ -0,0 +1,229 @@
|
|||
body {
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
|
||||
}
|
||||
|
||||
.main {
|
||||
background: #ddd;
|
||||
}
|
||||
|
||||
video {
|
||||
width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
.controls {
|
||||
margin: auto;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
ul {
|
||||
font: 20px sans-serif;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
justify-content: space-around;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
flex: 0 1 auto;
|
||||
list-style-type: none;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background: #0403031f;
|
||||
display: table;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
width: 50%;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
li:first-child {
|
||||
background: #ffffff45;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#progress {
|
||||
background-color: #ff00007d;
|
||||
width: 0%;
|
||||
height: 29px;
|
||||
margin: auto;
|
||||
border-radius: 4px;
|
||||
position: relative;
|
||||
top: 0;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
|
||||
|
||||
#choiceCaption,
|
||||
#interactionZones,
|
||||
#nextSegments,
|
||||
#nextSegment {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* comment to show links */
|
||||
a {
|
||||
color: #ffffffa6;
|
||||
text-decoration: none;
|
||||
text-shadow: 0px 0px 10px #000;
|
||||
animation: choices 3s forwards;
|
||||
font-size: 4em;
|
||||
/* display: block; */
|
||||
/* margin: 50%; */
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: white;
|
||||
}
|
||||
|
||||
a:active,
|
||||
a:focus {
|
||||
color: white;
|
||||
text-decoration: underline solid white
|
||||
}
|
||||
|
||||
@keyframes choices {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
video::cue {
|
||||
font: 60% sans-serif;
|
||||
color: white;
|
||||
background: none;
|
||||
text-shadow: 0px 0px 10px #000;
|
||||
}
|
||||
|
||||
#c {
|
||||
margin: auto;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#c:-webkit-full-screen {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
#c:-moz-full-screen {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
#c:-ms-fullscreen {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
#c:fullscreen {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
section[role="banner"] {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#wrapper-video {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#wrapper-video video {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
min-width: 50%;
|
||||
min-height: 50%;
|
||||
}
|
||||
|
||||
video::-webkit-media-controls-panel {
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
#file-selector {
|
||||
display: none;
|
||||
background: #00000073;
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
display: table;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.file-area {
|
||||
position: relative;
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.file-area input[type=file] {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.file-area .file-dummy {
|
||||
width: 100%;
|
||||
padding: 50px 30px;
|
||||
border: 2px dashed #ccc;
|
||||
background-color: #fff;
|
||||
text-align: center;
|
||||
transition: background 0.3s ease-in-out;
|
||||
margin: 0 auto;
|
||||
width: 50%;
|
||||
height: 25%;
|
||||
font-size: 8em;
|
||||
padding: 9%;
|
||||
}
|
||||
|
||||
.file-area .file-dummy .success {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.file-area:hover .file-dummy {
|
||||
border: 2px dashed #1abc9c;
|
||||
}
|
||||
|
||||
.file-area input[type=file]:valid+.file-dummy {
|
||||
border-color: #1abc9c;
|
||||
}
|
||||
|
||||
.file-area input[type=file]:valid+.file-dummy .success {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.file-area input[type=file]:valid+.file-dummy .default {
|
||||
display: inline-block;
|
||||
}
|
||||
49
index.html
Normal file
49
index.html
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<title>Bandersnatch Interactive</title>
|
||||
<script src="assets/bandersnatch.js"></script>
|
||||
<script src="assets/SegmentMap.js"></script>
|
||||
<script src="assets/scripts.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="assets/styles.css">
|
||||
<link </head> <body onload=onload()>
|
||||
<div>
|
||||
<div id="c">
|
||||
<section role="banner">
|
||||
<div id="file-selector">
|
||||
<div class="file-area">
|
||||
<input id="fileinput" type="file">
|
||||
<div class="file-dummy">
|
||||
<span class="default">Select video file </span>
|
||||
<span class="success">Great, your file is selected</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div id="wrapper-video">
|
||||
<video id="video" src="">
|
||||
|
||||
</video>
|
||||
<div class="controls">
|
||||
<div id="choiceCaption"></div>
|
||||
<div id="progress"></div>
|
||||
<div class="buttons">
|
||||
<ul id="choices"></ul>
|
||||
<ul id="interactionZones"></ul>
|
||||
<ul id="nextSegments"></ul>
|
||||
<ul id="nextSegment"></ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue