0x2620/openmedialibrary
1
0
Fork 0
Code Issues 131 Pull requests Releases Wiki Activity

better pre-loading screen

Browse source
This commit is contained in:
Rolux 2016-01-08 09:03:55 +05:30
parent 39a9fc535e
commit 6c0e81ae91
1 changed files with 89 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

119
static/html/load.html
View file

@ -5,41 +5,100 @@
<title>Open Media Library</title>
<link href="../../../oxjs/min/UI/css/UI.css" rel="stylesheet" type="text/css" />
<style>
#loading {
text-align: center;
padding-top: 24px;
#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;
}
#status {
#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>
<script>
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);
};
};
load();
setTimeout(function() {
document.querySelector('#status').innerHTML = 'Failed to start Open Media Library';
}, 20000);
</script>
</head>
<body class="OxThemeOxlight">
<div id="loading">
<div id="status">Starting Open Media Library</div>
<img src="../png/oml.png">
</div>
<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';
}, 20000);
}());
</script>
</body>
</html>