62 lines
2.5 KiB
JavaScript
62 lines
2.5 KiB
JavaScript
window.onload = function() {
|
|
var crt = document.getElementById("CRT_BOX")
|
|
var urlParams = new URLSearchParams(window.location.search)
|
|
var cast = urlParams.get("cast") != null ? urlParams.get("cast") : "index"
|
|
var speed = urlParams.get("speed") == null ? " speed=\"1\" " : " speed=\"" + urlParams.get("speed") + "\" "
|
|
var bg = urlParams.get("bg")
|
|
var autoplay = urlParams.get("autoplay") === "false" ? "" : " autoplay=\"true\" "
|
|
var loop = urlParams.get("loop") === "false" ? "" : " loop=\"true\" "
|
|
var preload = urlParams.get("preload") === "false" ? "" : " preload=\"true\" "
|
|
var fontsize = urlParams.get("fontsize") == null ? " fontsize=\"small\" " : " fontsize=\"" + urlParams.get("fontsize") + "\" "
|
|
|
|
crt.innerHTML = "<asciinema-player id=\"asciinema-player\" src=\"cast/" + cast + ".cast\"" + fontsize + autoplay + loop + preload + speed + "></asciinema-player>"
|
|
|
|
var player = document.getElementsByTagName("asciinema-player")[0]
|
|
|
|
var background = document.createElement("img")
|
|
background.classList.add("bg_image")
|
|
|
|
if (bg != null) {
|
|
background.src = "img/" + bg
|
|
document.body.append(background)
|
|
}
|
|
|
|
window.addEventListener('resize', function() {
|
|
var wrapper = document.getElementsByClassName("asciinema-player-wrapper")[0]
|
|
if (wrapper != null) {
|
|
var control_bar_offset = 23;
|
|
var scale = (document.body.clientHeight / (wrapper.clientHeight + control_bar_offset));
|
|
if (wrapper.clientWidth * scale < document.body.clientWidth) {
|
|
crt.style.transform = "scale("+scale+") translate(-50%, 0%)";
|
|
crt.classList.add("crt_wide")
|
|
background.classList.remove("bg_raised")
|
|
} else {
|
|
scale = (document.body.clientWidth / (wrapper.clientWidth));
|
|
crt.style.transform = "scale("+scale+")";
|
|
crt.classList.remove("crt_wide")
|
|
background.classList.add("bg_raised")
|
|
}
|
|
}
|
|
});
|
|
window.dispatchEvent(new Event('resize'));
|
|
setInterval(function(){window.dispatchEvent(new Event('resize'));}, 1000)
|
|
|
|
var playing = true;
|
|
let drag = false;
|
|
|
|
// Click anywhere to play/pause
|
|
// Allow selecting/dragging text without affecting play/pause
|
|
document.addEventListener('mousedown', () => drag = false);
|
|
document.addEventListener('mousemove', () => drag = true);
|
|
document.addEventListener('mouseup', function() {
|
|
if(!drag){
|
|
if (playing) {
|
|
player.pause()
|
|
playing = false
|
|
} else {
|
|
player.play()
|
|
playing = true
|
|
}
|
|
}
|
|
})
|
|
}
|