147 lines
5.3 KiB
HTML
Executable File
147 lines
5.3 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>
|
|
<script type="application/javascript" src="{{ STATIC_PREFIX }}js/is-cron-now.js"></script>
|
|
</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") }}";
|
|
var firstSlide = document.getElementById('FirstSlide');
|
|
var secondSlide = document.getElementById('SecondSlide');
|
|
|
|
function main() {
|
|
preloadSlide('SecondSlide')
|
|
}
|
|
|
|
function loadContent(element, callbackReady) {
|
|
switch (items.loop[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.loop[curUrl].location}"></iframe>`;
|
|
callbackReady(function () {});
|
|
}
|
|
|
|
function loadPicture(element, callbackReady) {
|
|
element.innerHTML = `<img src="${items.loop[curUrl].location}" alt="" />`;
|
|
callbackReady(function () {});
|
|
}
|
|
|
|
function loadVideo(element, callbackReady) {
|
|
element.innerHTML = `<video><source src=${items.loop[curUrl].location} type="video/mp4" /></video>`;
|
|
var video = element.querySelector('video');
|
|
video.addEventListener('loadedmetadata', function () {
|
|
items.loop[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.loop[curUrl].duration * 1.5));
|
|
});
|
|
}
|
|
|
|
function preloadSlide(slide) {
|
|
var element = document.getElementById(slide);
|
|
var callbackReady = function (onSlideStart) {
|
|
var move = function () {
|
|
if (nextReady) {
|
|
moveToSlide(slide);
|
|
onSlideStart();
|
|
} else {
|
|
setTimeout(move, 1000);
|
|
}
|
|
}
|
|
|
|
setTimeout(move, duration);
|
|
};
|
|
|
|
loadContent(element, callbackReady);
|
|
}
|
|
|
|
function moveToSlide(slide) {
|
|
var nextSlide = document.getElementById(slide);
|
|
var curSlide = nextSlide == firstSlide ? secondSlide : firstSlide;
|
|
|
|
duration = items.loop[curUrl].duration * 1000;
|
|
curUrl = (curUrl + 1) === items.loop.length ? 0 : curUrl + 1;
|
|
|
|
nextSlide.style.zIndex = 1000;
|
|
curSlide.style.zIndex = 500;
|
|
|
|
if (animate) {
|
|
nextSlide.classList.add('animate__animated', animate_transitions[0], animate_speed);
|
|
nextSlide.onanimationend = () => {
|
|
nextSlide.classList.remove(animate_transitions[0], animate_speed);
|
|
preloadSlide(curSlide.attributes['id'].value);
|
|
};
|
|
curSlide.classList.add('animate__animated', animate_transitions[1], animate_speed);
|
|
curSlide.onanimationend = () => {
|
|
curSlide.classList.remove(animate_transitions[1], animate_speed);
|
|
};
|
|
} else {
|
|
preloadSlide(curSlide.attributes['id'].value);
|
|
}
|
|
}
|
|
|
|
main();
|
|
</script>
|
|
</body>
|
|
</html>
|