videopdf/static/videoOverlay.js

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();
                        div.innerHTML = videoOverlay[page][id];
                        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();
                        console.log('EDIT');
                        return false;
                    }
                    div.appendChild(img);
                }
                this.div.appendChild(div);
            }
        }
    } : null;
}