videopdf/static/videoOverlay.js

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) {
    return '';
}

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.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\nhttp://pad.ma/A/editor/00:00:00,00:01:00,00:02:00';
                        var 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;
    }
}