videopdf/static/videoOverlay.js
2013-02-12 19:00:50 +05:30

133 lines
6.4 KiB
JavaScript

window.addEventListener('message', function(event) {
if (event.origin != 'null' && event.data) {
var data = JSON.parse(event.data);
if (data.event == 'close') {
var e = document.getElementById(data.id);
Array.prototype.forEach.call(e.parentElement.getElementsByClassName('button'), function(e) {
e.style.display = 'block';
});
e.parentElement.removeChild(e);
}
}
});
function getEmbedURL(id, videoURL) {
var parsed = Ox.parseURL(videoURL),
parts = parsed.pathname.split('/'),
item = parts[1],
points = parts[parts.length - 1].split(','),
outPoint = points.pop(),
inPoint = points.pop();
return parsed.origin + '/' + item + '/embed?view=player&id=' + id
+ '&in=' + inPoint + '&out=' + outPoint
+ '&paused=false&showCloseButton=true';
}
function getVideoOverlay(page) {
return (editable || videoOverlay[page]) ? {
beginLayout: function() {
this.counter = 0;
//console.log('lets beging');
},
endLayout: function() {
//console.log('lets end it here');
},
appendImage: function(image) {
this.counter++;
var id = this.counter;
if (editable || videoOverlay[page][id]) {
var div = document.createElement('div');
div.style.left = image.left + 'px';
div.style.top = image.top + 'px';
div.style.width = image.width + 'px';
div.style.height = image.height + 'px';
if (videoOverlay[page] && videoOverlay[page][id]) {
div.className = 'interface video';
div.title = 'Click to play video';
div.onclick = function(event) {
event.preventDefault();
event.stopPropagation();
var iframe = document.createElement('iframe');
iframe.width = '100%';
iframe.height = '100%';
iframe.setAttribute('frameborder', '0');
iframe.id = 'video' + page + id;
iframe.src = getEmbedURL(iframe.id, videoOverlay[page][id]);
div.appendChild(iframe);
Array.prototype.forEach.call(div.getElementsByClassName('button'), function(e) {
e.style.display = 'none';
});
return false;
};
var img = document.createElement('img');
img.className = 'button playButton';
img.src = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNTYiIGhlaWdodD0iMjU2Ij48cG9seWdvbiBwb2ludHM9IjU2LDMyIDI0OCwxMjggNTYsMjI0IiBmaWxsPSIjRkZGRkZGIi8+PC9zdmc+PCEtLXsiY29sb3IiOiJ2aWRlbyIsIm5hbWUiOiJzeW1ib2xQbGF5IiwidGhlbWUiOiJveGRhcmsifS0tPg==';
div.appendChild(img);
} else {
div.className = 'interface';
}
if (editable) {
var img = document.createElement('img');
img.className = 'button editButton';
img.src = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNTYiIGhlaWdodD0iMjU2Ij48cG9seWdvbiBwb2ludHM9IjMyLDIyNCA2NCwxNjAgOTYsMTkyIiBmaWxsPSIjRkZGRkZGIi8+PGxpbmUgeDE9Ijg4IiB5MT0iMTY4IiB4Mj0iMTg0IiB5Mj0iNzIiIHN0cm9rZT0iI0ZGRkZGRiIgc3Ryb2tlLXdpZHRoPSI0OCIvPjxsaW5lIHgxPSIxOTIiIHkxPSI2NCIgeDI9IjIwOCIgeTI9IjQ4IiBzdHJva2U9IiNGRkZGRkYiIHN0cm9rZS13aWR0aD0iNDgiLz48bGluZSB4MT0iMTEyIiB5MT0iMjIwIiB4Mj0iMjI0IiB5Mj0iMjIwIiBzdHJva2U9IiNGRkZGRkYiIHN0cm9rZS13aWR0aD0iOCIvPjxsaW5lIHgxPSIxMjgiIHkxPSIyMDQiIHgyPSIyMjQiIHkyPSIyMDQiIHN0cm9rZT0iI0ZGRkZGRiIgc3Ryb2tlLXdpZHRoPSI4Ii8+PGxpbmUgeDE9IjE0NCIgeTE9IjE4OCIgeDI9IjIyNCIgeTI9IjE4OCIgc3Ryb2tlPSIjRkZGRkZGIiBzdHJva2Utd2lkdGg9IjgiLz48L3N2Zz4=';
img.title = videoOverlay[page] && videoOverlay[page][id]
? 'Click to edit or remove video' : 'Click to add video';
img.onclick = function(event) {
event.preventDefault();
event.stopPropagation();
if (!videoOverlay[page]) {
videoOverlay[page] = {}
}
if (!videoOverlay[page][id]) {
videoOverlay[page][id] = '';
}
console.log('EDIT');
var message = 'Please enter a pan.do/ra video URL, like\n'
+ 'http://pad.ma/A/editor/00:00:00,00:01:00,00:02:00'
+ (videoOverlay[page][id] ? '\n\nTo remove the video, just remove the URL.' : ''),
url = prompt(message, videoOverlay[page][id]);
if (url !== null) {
videoOverlay[page][id] = url;
saveVideoOverlay();
}
return false;
}
div.appendChild(img);
}
this.div.appendChild(div);
}
}
} : null;
}
function saveVideoOverlay() {
var request = new XMLHttpRequest(),
id = document.location.pathname.substring(1),
formData = new FormData();
request.addEventListener('load', function (evt) {
console.log(evt);
});
formData.append('data', JSON.stringify({
'id': id,
'overlay': videoOverlay
}));
request.open('POST', '/save');
request.setRequestHeader("X-CSRFToken", getCookie('csrftoken'));
request.send(formData);
function getCookie(name) {
var cookieValue = null;
if (document.cookie && document.cookie != '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = cookies[i].trim();
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) == (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
}