100 lines
2.8 KiB
JavaScript
100 lines
2.8 KiB
JavaScript
function videoOverlay(url) {
|
|
var overlay = getDefaultOverlay();
|
|
|
|
var video = document.createElement("video");
|
|
video.onclick = function() {event.stopPropagation();}
|
|
video.src = url;
|
|
video.controls = true;
|
|
video.autoplay = true;
|
|
video.type = "video/mp4";
|
|
|
|
video.style.margin = "auto";
|
|
video.style.backgroundColor = "black";
|
|
|
|
video.onloadedmetadata = function() {
|
|
if((video.videoHeight/video.videoWidth) > (window.innerHeight/window.innerWidth)) {
|
|
video.style.height = (window.innerHeight * 0.9).toString() + "px";
|
|
} else {
|
|
video.style.width = (window.innerWidth * 0.9).toString() + "px";
|
|
}
|
|
}
|
|
|
|
var div = document.createElement("div");
|
|
div.style.margin = "auto";
|
|
div.style.gridRow = "1";
|
|
div.style.gridColumn = "1";
|
|
div.appendChild(video);
|
|
overlay.appendChild(div);
|
|
|
|
var close = getClose();
|
|
overlay.appendChild(close);
|
|
|
|
document.getElementsByTagName("body")[0].appendChild(overlay);
|
|
setTimeout(function() {
|
|
overlay.style.opacity = "1";
|
|
}, 10);
|
|
}
|
|
|
|
function audioOverlay(url) {
|
|
var overlay = getDefaultOverlay();
|
|
var audio = document.createElement("audio");
|
|
audio.onclick = function() {event.stopPropagation();}
|
|
audio.src = url;
|
|
audio.controls = true;
|
|
audio.autoplay = true;
|
|
|
|
audio.style.margin = "auto";
|
|
audio.style.width = (window.innerWidth * 0.9).toString() + "px";
|
|
|
|
var div = document.createElement("div");
|
|
div.style.margin = "auto";
|
|
div.style.gridRow = "1";
|
|
div.style.gridColumn = "1";
|
|
div.appendChild(audio);
|
|
overlay.appendChild(div);
|
|
|
|
var close = getClose();
|
|
overlay.appendChild(close);
|
|
|
|
document.getElementsByTagName("body")[0].appendChild(overlay);
|
|
setTimeout(function() {
|
|
overlay.style.opacity = "1";
|
|
}, 10);
|
|
}
|
|
|
|
|
|
function imageOverlay(url) {
|
|
var overlay = getDefaultOverlay();
|
|
var img = new Image();
|
|
img.src = url;
|
|
img.style.margin = "auto";
|
|
|
|
var image = document.createElement("img");
|
|
image.src = url;
|
|
img.onload = function() {
|
|
var height = img.height;
|
|
var width = img.width;
|
|
|
|
|
|
if((height/width) > (window.innerHeight/window.innerWidth)) {
|
|
image.style.height = (window.innerHeight * 0.9).toString() + "px";
|
|
} else {
|
|
image.style.width = (window.innerWidth * 0.9).toString() + "px";
|
|
}
|
|
};
|
|
|
|
var div = document.createElement("div");
|
|
div.style.margin = "auto";
|
|
div.style.gridRow = "1";
|
|
div.style.gridColumn = "1";
|
|
div.appendChild(image);
|
|
overlay.appendChild(div);
|
|
|
|
var close = getClose();
|
|
overlay.appendChild(close);
|
|
|
|
document.getElementsByTagName("body")[0].appendChild(overlay);
|
|
setTimeout(function() {
|
|
overlay.style.opacity = "1";
|
|
}, 10);
|
|
} |