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>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title>Open Media Library</title>
|
<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>
|
</head>
|
||||||
<body>
|
<body></body>
|
||||||
Installing Open Media Library...<br>
|
|
||||||
<div id="status"></div>
|
|
||||||
<script src="js/install.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
</html>
|
||||||
|
|
|
@ -40,6 +40,13 @@ class Handler(SimpleHTTPServer.SimpleHTTPRequestHandler):
|
||||||
with open(path) as fd:
|
with open(path) as fd:
|
||||||
content = fd.read()
|
content = fd.read()
|
||||||
self.send_response(200, 'OK')
|
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:
|
else:
|
||||||
self.send_response(404, 'not found')
|
self.send_response(404, 'not found')
|
||||||
content = '404 not found'
|
content = '404 not found'
|
||||||
|
@ -68,33 +75,28 @@ class Install(Thread):
|
||||||
os.chdir(target)
|
os.chdir(target)
|
||||||
release = self.get_release()
|
release = self.get_release()
|
||||||
self.status["release"] = release
|
self.status["release"] = release
|
||||||
for module in release['modules']:
|
self.status["step"] = 'Downloading...'
|
||||||
self.status["step"] = 'downloading %s' % module
|
|
||||||
self.status["progress"] = 0
|
self.status["progress"] = 0
|
||||||
self.status["size"] = 0
|
for module in sorted(release['modules']):
|
||||||
package_tar = release['modules'][module]['name']
|
package_tar = release['modules'][module]['name']
|
||||||
url = self.release_url.replace('release.json', package_tar)
|
url = self.release_url.replace('release.json', package_tar)
|
||||||
self.download(url, package_tar)
|
self.download(url, package_tar)
|
||||||
self.status["step"] = 'extracting %s' % module
|
self.status["step"] = 'Installing...'
|
||||||
self.status["progress"] = 0
|
for module in sorted(release['modules']):
|
||||||
|
package_tar = release['modules'][module]['name']
|
||||||
tar = tarfile.open(package_tar)
|
tar = tarfile.open(package_tar)
|
||||||
tar.extractall()
|
tar.extractall()
|
||||||
tar.close()
|
tar.close()
|
||||||
os.unlink(package_tar)
|
os.unlink(package_tar)
|
||||||
os.symlink('openmedialibrary/ctl', 'ctl')
|
os.symlink('openmedialibrary/ctl', 'ctl')
|
||||||
self.status["progress"] = 0
|
|
||||||
self.status["step"] = "setup"
|
|
||||||
os.system("./ctl setup")
|
|
||||||
self.status["progress"] = 1
|
|
||||||
makedirs('data')
|
makedirs('data')
|
||||||
with open('data/release.json', 'w') as fd:
|
with open('data/release.json', 'w') as fd:
|
||||||
json.dump(release, fd, indent=2)
|
json.dump(release, fd, indent=2)
|
||||||
self.status = {"installation finished. starting...": True}
|
self.status = {"relaunch": True}
|
||||||
os.system("./ctl start &")
|
os.system("./ctl start &")
|
||||||
time.sleep(1)
|
time.sleep(5)
|
||||||
self.httpd.shutdown()
|
self.httpd.shutdown()
|
||||||
|
|
||||||
|
|
||||||
def download(self, url, filename):
|
def download(self, url, filename):
|
||||||
dirname = os.path.dirname(filename)
|
dirname = os.path.dirname(filename)
|
||||||
if dirname:
|
if dirname:
|
||||||
|
@ -118,7 +120,6 @@ class Install(Thread):
|
||||||
return data
|
return data
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
if __name__ == '__main__':
|
if __name__ == '__main__':
|
||||||
if len(sys.argv) == 1:
|
if len(sys.argv) == 1:
|
||||||
target = os.path.expanduser("~/Library/Application Support/Open Media Library")
|
target = os.path.expanduser("~/Library/Application Support/Open Media Library")
|
||||||
|
|
|
@ -1,4 +1,33 @@
|
||||||
function load() {
|
'use strict';
|
||||||
|
|
||||||
|
(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();
|
||||||
|
}
|
||||||
|
|
||||||
|
function load() {
|
||||||
var base = '//127.0.0.1:9842',
|
var base = '//127.0.0.1:9842',
|
||||||
ws = new WebSocket('ws:' + base + '/ws');
|
ws = new WebSocket('ws:' + base + '/ws');
|
||||||
ws.onopen = function(event) {
|
ws.onopen = function(event) {
|
||||||
|
@ -11,9 +40,84 @@ function load() {
|
||||||
ws.onclose = function(event) {
|
ws.onclose = function(event) {
|
||||||
setTimeout(load, 500);
|
setTimeout(load, 500);
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
function update() {
|
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();
|
var xhr = new XMLHttpRequest();
|
||||||
xhr.onload = function() {
|
xhr.onload = function() {
|
||||||
var response = JSON.parse(this.responseText);
|
var response = JSON.parse(this.responseText);
|
||||||
|
@ -22,22 +126,22 @@ function update() {
|
||||||
if (response.progress) {
|
if (response.progress) {
|
||||||
status = parseInt(response.progress * 100) + '% ' + status;
|
status = parseInt(response.progress * 100) + '% ' + status;
|
||||||
}
|
}
|
||||||
document.getElementById('status').innerHTML = status;
|
update.status.innerHTML = status;
|
||||||
setTimeout(update, 1000);
|
setTimeout(updateStatus, 1000);
|
||||||
} else {
|
} else {
|
||||||
document.getElementById('status').innerHTML = 'done';
|
update.status.innerHTML = 'Relaunching...';
|
||||||
setTimeout(load, 500);
|
setTimeout(load, 500);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
xhr.onerror = function() {
|
xhr.onerror = function() {
|
||||||
var status = document.getElementById('status').innerHTML;
|
var status = update.status.innerHTML;
|
||||||
if (['done', 'setup'].indexOf(status) == -1) {
|
if (['Relaunching...'].indexOf(status) == -1) {
|
||||||
document.getElementById('status').innerHTML = 'error';
|
update.status.innerHTML = 'Installation failed';
|
||||||
}
|
}
|
||||||
load();
|
load();
|
||||||
}
|
}
|
||||||
xhr.open('get', '/status');
|
xhr.open('get', '/status');
|
||||||
xhr.send();
|
xhr.send();
|
||||||
}
|
}
|
||||||
|
|
||||||
update();
|
}());
|
||||||
|
|
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