191 lines
6.7 KiB
HTML
Executable File
191 lines
6.7 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<title>Obscreen</title>
|
|
<meta name="robots" content="noindex, nofollow">
|
|
<meta name="google" content="notranslate">
|
|
<link rel="stylesheet" href="{{ STATIC_PREFIX }}css/animate.min.css" />
|
|
<style>
|
|
html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; background-color: white; display: flex; flex-direction: row; justify-content: center; align-items: center; }
|
|
.slide { display: flex; flex-direction: row; justify-content: center; align-items: center; background: black; }
|
|
.slide, iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; padding-top: 0; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }
|
|
.slide iframe { background: white; }
|
|
.slide img { height: 100%; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="FirstSlide" class="slide" style="z-index: 1000;">
|
|
<iframe src="/player/default"></iframe>
|
|
</div>
|
|
<div id="SecondSlide" class="slide" style="z-index: 500">
|
|
<iframe src="/player/default"></iframe>
|
|
</div>
|
|
<script type="text/javascript">
|
|
var items = {{items | safe}};
|
|
var duration = 3000 / 1;
|
|
var playlistCheck = 10 * 1000; // 10 seconds check
|
|
var curUrl = 0;
|
|
var nextReady = true;
|
|
var itemCheck = setInterval(function () {
|
|
fetch('player/playlist').then(function(response) {
|
|
if (response.ok) {
|
|
return response.json();
|
|
}
|
|
}).then(function(data) {
|
|
items = data;
|
|
}).catch(function(err) {
|
|
console.error(err);
|
|
});
|
|
}, playlistCheck);
|
|
|
|
var animate = {{ 'true' if slide_animation_enabled.eval() else 'false' }};
|
|
var animate_transitions = [
|
|
"animate__{{ slide_animation_entrance_effect.eval()|default("fadeIn") }}",
|
|
"animate__{{ slide_animation_exit_effect.eval()|default("none") }}"
|
|
];
|
|
var animate_speed = "animate__{{ slide_animation_speed.eval()|default("normal") }}";
|
|
|
|
function main() {
|
|
preloadIntoSecondSlide();
|
|
}
|
|
|
|
function loadContent(element, callbackReady) {
|
|
switch (items[curUrl].type) {
|
|
case 'url':
|
|
loadUrl(element, callbackReady);
|
|
break;
|
|
case 'picture':
|
|
loadPicture(element, callbackReady);
|
|
break;
|
|
case 'video':
|
|
loadVideo(element, callbackReady);
|
|
break;
|
|
default:
|
|
loadUrl(element, callbackReady);
|
|
break;
|
|
}
|
|
}
|
|
|
|
function loadUrl(element, callbackReady) {
|
|
element.innerHTML = `<iframe src="${items[curUrl].location}"></iframe>`;
|
|
callbackReady(function () {});
|
|
}
|
|
|
|
function loadPicture(element, callbackReady) {
|
|
element.innerHTML = `<img src="${items[curUrl].location}" alt="" />`;
|
|
callbackReady(function () {});
|
|
}
|
|
|
|
function loadVideo(element, callbackReady) {
|
|
element.innerHTML = `<video><source src=${items[curUrl].location} type="video/mp4" /></video>`;
|
|
var video = element.querySelector('video');
|
|
video.addEventListener('loadedmetadata', function () {
|
|
items[curUrl].duration = Math.ceil(video.duration);
|
|
});
|
|
|
|
callbackReady(function () {
|
|
nextReady = false;
|
|
video.play();
|
|
video.addEventListener('ended', function () {
|
|
nextReady = true;
|
|
});
|
|
setTimeout(function () {
|
|
nextReady = true;
|
|
}, Math.ceil(items[curUrl].duration * 1.5));
|
|
});
|
|
}
|
|
|
|
function preloadIntoFirstSlide() {
|
|
//console.log('preloadIntoFirstSlide', items[curUrl]);
|
|
var element = document.getElementById('FirstSlide');
|
|
var callbackReady = function (onSlideStart) {
|
|
var move = function () {
|
|
if (nextReady) {
|
|
moveToFirstSlide();
|
|
onSlideStart();
|
|
} else {
|
|
setTimeout(move, 1000);
|
|
}
|
|
}
|
|
|
|
setTimeout(move, duration);
|
|
};
|
|
|
|
loadContent(element, callbackReady);
|
|
}
|
|
|
|
function moveToFirstSlide() {
|
|
//console.log('moveToFirstSlide', items[curUrl]);
|
|
var firstSlide = document.querySelector('#FirstSlide');
|
|
var secondSlide = document.querySelector('#SecondSlide');
|
|
|
|
duration = items[curUrl].duration * 1000;
|
|
curUrl = (curUrl + 1) === items.length ? 0 : curUrl + 1;
|
|
|
|
firstSlide.style.zIndex = 1000;
|
|
secondSlide.style.zIndex = 500;
|
|
|
|
if (animate) {
|
|
firstSlide.classList.add('animate__animated', animate_transitions[0], animate_speed);
|
|
firstSlide.onanimationend = () => {
|
|
firstSlide.classList.remove(animate_transitions[0], animate_speed);
|
|
preloadIntoSecondSlide();
|
|
};
|
|
secondSlide.classList.add('animate__animated', animate_transitions[1], animate_speed);
|
|
secondSlide.onanimationend = () => {
|
|
secondSlide.classList.remove(animate_transitions[1], animate_speed);
|
|
};
|
|
} else {
|
|
preloadIntoSecondSlide();
|
|
}
|
|
}
|
|
|
|
function preloadIntoSecondSlide() {
|
|
//console.log('preloadIntoSecondSlide', items[curUrl]);
|
|
var element = document.getElementById('SecondSlide');
|
|
var callbackReady = function (onSlideStart) {
|
|
var move = function () {
|
|
if (nextReady) {
|
|
moveToSecondSlide();
|
|
onSlideStart();
|
|
} else {
|
|
setTimeout(move, 1000);
|
|
}
|
|
}
|
|
|
|
setTimeout(move, duration);
|
|
};
|
|
|
|
loadContent(element, callbackReady);
|
|
}
|
|
|
|
function moveToSecondSlide() {
|
|
//console.log('moveToSecondSlide', items[curUrl]);
|
|
var firstSlide = document.querySelector('#FirstSlide');
|
|
var secondSlide = document.querySelector('#SecondSlide');
|
|
duration = items[curUrl].duration * 1000;
|
|
curUrl = (curUrl + 1) === items.length ? 0 : curUrl + 1;
|
|
|
|
secondSlide.style.zIndex = 1000;
|
|
firstSlide.style.zIndex = 500;
|
|
|
|
if (animate) {
|
|
secondSlide.classList.add('animate__animated', animate_transitions[0], animate_speed);
|
|
secondSlide.onanimationend = () => {
|
|
secondSlide.classList.remove(animate_transitions[0], animate_speed);
|
|
preloadIntoFirstSlide();
|
|
};
|
|
firstSlide.classList.add('animate__animated', animate_transitions[1], animate_speed);
|
|
firstSlide.onanimationend = () => {
|
|
firstSlide.classList.remove(animate_transitions[1], animate_speed);
|
|
};
|
|
} else {
|
|
preloadIntoFirstSlide();
|
|
}
|
|
}
|
|
|
|
main();
|
|
</script>
|
|
</body>
|
|
</html>
|