openmedialibrary/static/html/load.html

105 lines
3.5 KiB
HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Open Media Library</title>
<link href="../../../oxjs/min/UI/css/UI.css" rel="stylesheet" type="text/css" />
<style>
#logo {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 96px;
width: 256px;
height: 256px;
margin: auto;
moz-user-select: none;
ms-user-select: none;
o-user-select: none;
webkit-user-select: none;
}
#loadingIcon {
position: absolute;
left: 16px;
top: 256px;
right: 0;
bottom: 0;
width: 32px;
height: 32px;
margin: auto;
moz-user-select: none;
ms-user-select: none;
o-user-select: none;
webkit-user-select: none;
}
#error {
position: absolute;
left: 16px;
top: 256px;
right: 0;
bottom: 0;
width: 240px;
height: 32px;
margin: auto;
padding-bottom: 16px;
text-align: center;
display: none;
}
</style>
</head>
<body class="OxThemeOxlight">
<img id="logo" src="../png/oml.png" style="">
<img id="loadingIcon" src="../../../oxjs/min/UI/themes/oxlight/svg/symbolLoading.svg">
<div id="error">Failed to launch Open Media Library</div>
<script>
(function() {
var animationInterval;
function load() {
var port = document.location.hash.length
? document.location.hash.slice(1)
: '9842',
base = '//127.0.0.1:' + port,
ws = new WebSocket('ws:' + base + '/ws');
ws.onopen = function(event) {
document.location.href = 'http:' + base;
};
ws.onerror = function(event) {
ws.close();
};
ws.onclose = function(event) {
setTimeout(load, 500);
};
};
function startAnimation() {
var css, deg = 0,
loadingIcon = document.getElementById('loadingIcon'),
previousTime = +new Date();
animationInterval = setInterval(function() {
var currentTime = +new Date(),
delta = (currentTime - previousTime) / 1000;
previousTime = currentTime;
deg = Math.round((deg + delta * 360) % 360 / 30) * 30;
css = 'rotate(' + deg + 'deg)';
loadingIcon.style.MozTransform = css;
loadingIcon.style.MSTransform = css;
loadingIcon.style.OTransform = css;
loadingIcon.style.WebkitTransform = css;
loadingIcon.style.transform = css;
}, 83);
}
function stopAnimation() {
clearInterval(animationInterval);
}
startAnimation();
load();
setTimeout(function() {
stopAnimation();
document.getElementById('loadingIcon').style.display = 'none';
document.getElementById('error').style.display = 'block';
}, 60000);
}());
</script>
</body>
</html>