use update ui for installer
This commit is contained in:
parent
118a8e7371
commit
72e5cbd0ec
5 changed files with 181 additions and 59 deletions
|
@ -1,10 +1,11 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<title>Open Media Library</title>
|
||||
<meta charset="UTF-8"/>
|
||||
<link href="/png/oml.png" rel="icon" type="image/png">
|
||||
<script src="/js/install.js" type="text/javascript"></script>
|
||||
<meta name="google" value="notranslate"/>
|
||||
</head>
|
||||
<body>
|
||||
Installing Open Media Library...<br>
|
||||
<div id="status"></div>
|
||||
<script src="js/install.js"></script>
|
||||
</body>
|
||||
<body></body>
|
||||
</html>
|
||||
|
|
|
@ -40,6 +40,13 @@ class Handler(SimpleHTTPServer.SimpleHTTPRequestHandler):
|
|||
with open(path) as fd:
|
||||
content = fd.read()
|
||||
self.send_response(200, 'OK')
|
||||
content_type = {
|
||||
'html': 'text/html',
|
||||
'png': 'image/png',
|
||||
'svg': 'image/svg+xml',
|
||||
'txt': 'text/plain',
|
||||
}.get(path.split('.')[-1], 'txt')
|
||||
self.send_header('Content-Type', content_type)
|
||||
else:
|
||||
self.send_response(404, 'not found')
|
||||
content = '404 not found'
|
||||
|
@ -68,33 +75,28 @@ class Install(Thread):
|
|||
os.chdir(target)
|
||||
release = self.get_release()
|
||||
self.status["release"] = release
|
||||
for module in release['modules']:
|
||||
self.status["step"] = 'downloading %s' % module
|
||||
self.status["progress"] = 0
|
||||
self.status["size"] = 0
|
||||
self.status["step"] = 'Downloading...'
|
||||
self.status["progress"] = 0
|
||||
for module in sorted(release['modules']):
|
||||
package_tar = release['modules'][module]['name']
|
||||
url = self.release_url.replace('release.json', package_tar)
|
||||
self.download(url, package_tar)
|
||||
self.status["step"] = 'extracting %s' % module
|
||||
self.status["progress"] = 0
|
||||
self.status["step"] = 'Installing...'
|
||||
for module in sorted(release['modules']):
|
||||
package_tar = release['modules'][module]['name']
|
||||
tar = tarfile.open(package_tar)
|
||||
tar.extractall()
|
||||
tar.close()
|
||||
os.unlink(package_tar)
|
||||
os.symlink('openmedialibrary/ctl', 'ctl')
|
||||
self.status["progress"] = 0
|
||||
self.status["step"] = "setup"
|
||||
os.system("./ctl setup")
|
||||
self.status["progress"] = 1
|
||||
makedirs('data')
|
||||
with open('data/release.json', 'w') as fd:
|
||||
json.dump(release, fd, indent=2)
|
||||
self.status = {"installation finished. starting...": True}
|
||||
self.status = {"relaunch": True}
|
||||
os.system("./ctl start &")
|
||||
time.sleep(1)
|
||||
time.sleep(5)
|
||||
self.httpd.shutdown()
|
||||
|
||||
|
||||
def download(self, url, filename):
|
||||
dirname = os.path.dirname(filename)
|
||||
if dirname:
|
||||
|
@ -118,7 +120,6 @@ class Install(Thread):
|
|||
return data
|
||||
|
||||
|
||||
|
||||
if __name__ == '__main__':
|
||||
if len(sys.argv) == 1:
|
||||
target = os.path.expanduser("~/Library/Application Support/Open Media Library")
|
||||
|
|
|
@ -1,43 +1,147 @@
|
|||
function load() {
|
||||
var base = '//127.0.0.1:9842',
|
||||
ws = new WebSocket('ws:' + base + '/ws');
|
||||
ws.onopen = function(event) {
|
||||
document.location.href = 'http:' + base;
|
||||
};
|
||||
ws.onerror = function(event) {
|
||||
ws.close();
|
||||
setTimeout(load, 500);
|
||||
};
|
||||
ws.onclose = function(event) {
|
||||
setTimeout(load, 500);
|
||||
};
|
||||
}
|
||||
'use strict';
|
||||
|
||||
function update() {
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.onload = function() {
|
||||
var response = JSON.parse(this.responseText);
|
||||
if (response.step) {
|
||||
var status = response.step;
|
||||
if (response.progress) {
|
||||
status = parseInt(response.progress * 100) + '% ' + status;
|
||||
}
|
||||
document.getElementById('status').innerHTML = status;
|
||||
setTimeout(update, 1000);
|
||||
} else {
|
||||
document.getElementById('status').innerHTML = 'done';
|
||||
setTimeout(load, 500);
|
||||
}
|
||||
};
|
||||
xhr.onerror = function() {
|
||||
var status = document.getElementById('status').innerHTML;
|
||||
if (['done', 'setup'].indexOf(status) == -1) {
|
||||
document.getElementById('status').innerHTML = 'error';
|
||||
}
|
||||
load();
|
||||
(function() {
|
||||
|
||||
loadImages(function(images) {
|
||||
loadScreen(images);
|
||||
initUpdate();
|
||||
});
|
||||
|
||||
function initUpdate(browserSupported) {
|
||||
window.update = {};
|
||||
update.status = document.createElement('div');
|
||||
update.status.className = 'OxElement';
|
||||
update.status.style.position = 'absolute';
|
||||
update.status.style.left = '16px';
|
||||
update.status.style.top = '336px';
|
||||
update.status.style.right = 0;
|
||||
update.status.style.bottom = 0;
|
||||
update.status.style.width = '512px';
|
||||
update.status.style.height = '16px';
|
||||
update.status.style.margin = 'auto';
|
||||
update.status.style.textAlign = 'center';
|
||||
update.status.style.color = 'rgb(16, 16, 16)';
|
||||
update.status.style.fontFamily = 'Lucida Grande, Segoe UI, DejaVu Sans, Lucida Sans Unicode, Helvetica, Arial, sans-serif';
|
||||
update.status.style.fontSize = '11px';
|
||||
document.querySelector('#loadingScreen').appendChild(update.status);
|
||||
updateStatus();
|
||||
}
|
||||
xhr.open('get', '/status');
|
||||
xhr.send();
|
||||
}
|
||||
|
||||
update();
|
||||
function load() {
|
||||
var base = '//127.0.0.1:9842',
|
||||
ws = new WebSocket('ws:' + base + '/ws');
|
||||
ws.onopen = function(event) {
|
||||
document.location.href = 'http:' + base;
|
||||
};
|
||||
ws.onerror = function(event) {
|
||||
ws.close();
|
||||
setTimeout(load, 500);
|
||||
};
|
||||
ws.onclose = function(event) {
|
||||
setTimeout(load, 500);
|
||||
};
|
||||
}
|
||||
|
||||
function loadImages(callback) {
|
||||
var images = {};
|
||||
images.logo = document.createElement('img');
|
||||
images.logo.onload = function() {
|
||||
images.logo.style.position = 'absolute';
|
||||
images.logo.style.left = 0;
|
||||
images.logo.style.top = 0;
|
||||
images.logo.style.right = 0;
|
||||
images.logo.style.bottom = '96px';
|
||||
images.logo.style.width = '256px';
|
||||
images.logo.style.height = '256px';
|
||||
images.logo.style.margin = 'auto';
|
||||
images.logo.style.MozUserSelect = 'none';
|
||||
images.logo.style.MSUserSelect = 'none';
|
||||
images.logo.style.OUserSelect = 'none';
|
||||
images.logo.style.WebkitUserSelect = 'none';
|
||||
images.loadingIcon = document.createElement('img');
|
||||
images.loadingIcon.setAttribute('id', 'loadingIcon');
|
||||
images.loadingIcon.style.position = 'absolute';
|
||||
images.loadingIcon.style.left = '16px';
|
||||
images.loadingIcon.style.top = '256px'
|
||||
images.loadingIcon.style.right = 0;
|
||||
images.loadingIcon.style.bottom = 0;
|
||||
images.loadingIcon.style.width = '32px';
|
||||
images.loadingIcon.style.height = '32px';
|
||||
images.loadingIcon.style.margin = 'auto';
|
||||
images.loadingIcon.style.MozUserSelect = 'none';
|
||||
images.loadingIcon.style.MSUserSelect = 'none';
|
||||
images.loadingIcon.style.OUserSelect = 'none';
|
||||
images.loadingIcon.style.WebkitUserSelect = 'none';
|
||||
images.loadingIcon.src = '/svg/symbolLoading.svg';
|
||||
callback(images);
|
||||
};
|
||||
images.logo.src = '/png/oml.png';
|
||||
}
|
||||
|
||||
function loadScreen(images) {
|
||||
var loadingScreen = document.createElement('div');
|
||||
loadingScreen.setAttribute('id', 'loadingScreen');
|
||||
loadingScreen.className = 'OxScreen';
|
||||
loadingScreen.style.position = 'absolute';
|
||||
loadingScreen.style.width = '100%';
|
||||
loadingScreen.style.height = '100%';
|
||||
loadingScreen.style.backgroundColor = 'rgb(224, 224, 224)';
|
||||
loadingScreen.style.zIndex = '1002';
|
||||
loadingScreen.appendChild(images.logo);
|
||||
loadingScreen.appendChild(images.loadingIcon);
|
||||
// FF3.6 document.body can be undefined here
|
||||
window.onload = function() {
|
||||
document.body.style.margin = 0;
|
||||
document.body.appendChild(loadingScreen);
|
||||
startAnimation();
|
||||
};
|
||||
// IE8 does not call onload if already loaded before set
|
||||
document.body && window.onload();
|
||||
}
|
||||
|
||||
|
||||
function startAnimation() {
|
||||
var css, deg = 0, loadingIcon = document.getElementById('loadingIcon'),
|
||||
previousTime = +new Date();
|
||||
var 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 updateStatus() {
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.onload = function() {
|
||||
var response = JSON.parse(this.responseText);
|
||||
if (response.step) {
|
||||
var status = response.step;
|
||||
if (response.progress) {
|
||||
status = parseInt(response.progress * 100) + '% ' + status;
|
||||
}
|
||||
update.status.innerHTML = status;
|
||||
setTimeout(updateStatus, 1000);
|
||||
} else {
|
||||
update.status.innerHTML = 'Relaunching...';
|
||||
setTimeout(load, 500);
|
||||
}
|
||||
};
|
||||
xhr.onerror = function() {
|
||||
var status = update.status.innerHTML;
|
||||
if (['Relaunching...'].indexOf(status) == -1) {
|
||||
update.status.innerHTML = 'Installation failed';
|
||||
}
|
||||
load();
|
||||
}
|
||||
xhr.open('get', '/status');
|
||||
xhr.send();
|
||||
}
|
||||
|
||||
}());
|
||||
|
|
BIN
Open Media Library/Resources/png/oml.png
Normal file
BIN
Open Media Library/Resources/png/oml.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 33 KiB |
16
Open Media Library/Resources/svg/symbolLoading.svg
Normal file
16
Open Media Library/Resources/svg/symbolLoading.svg
Normal file
|
@ -0,0 +1,16 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256">
|
||||
<g transform="translate(128, 128)" stroke="#808080" stroke-linecap="round" stroke-width="28">
|
||||
<line x1="0" y1="-114" x2="0" y2="-70" transform="rotate(0)" opacity="1"/>
|
||||
<line x1="0" y1="-114" x2="0" y2="-70" transform="rotate(30)" opacity="0.083333"/>
|
||||
<line x1="0" y1="-114" x2="0" y2="-70" transform="rotate(60)" opacity="0.166667"/>
|
||||
<line x1="0" y1="-114" x2="0" y2="-70" transform="rotate(90)" opacity="0.25"/>
|
||||
<line x1="0" y1="-114" x2="0" y2="-70" transform="rotate(120)" opacity="0.333333"/>
|
||||
<line x1="0" y1="-114" x2="0" y2="-70" transform="rotate(150)" opacity="0.416667"/>
|
||||
<line x1="0" y1="-114" x2="0" y2="-70" transform="rotate(180)" opacity="0.5"/>
|
||||
<line x1="0" y1="-114" x2="0" y2="-70" transform="rotate(210)" opacity="0.583333"/>
|
||||
<line x1="0" y1="-114" x2="0" y2="-70" transform="rotate(240)" opacity="0.666667"/>
|
||||
<line x1="0" y1="-114" x2="0" y2="-70" transform="rotate(270)" opacity="0.75"/>
|
||||
<line x1="0" y1="-114" x2="0" y2="-70" transform="rotate(300)" opacity="0.833333"/>
|
||||
<line x1="0" y1="-114" x2="0" y2="-70" transform="rotate(330)" opacity="0.916667"/>
|
||||
</g>
|
||||
</svg>
|
After Width: | Height: | Size: 1.2 KiB |
Loading…
Reference in a new issue