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

use update ui for installer

Browse source
This commit is contained in:
j 2016-01-21 14:02:26 +05:30
parent 118a8e7371
commit 72e5cbd0ec
5 changed files with 181 additions and 59 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
Open Media Library/Resources/index.html
View file

@ -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>

27
Open Media Library/Resources/install.py
View file

@ -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["step"] = 'Downloading...'
self.status["progress"] = 0
self.status["size"] = 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")

120
Open Media Library/Resources/js/install.js
View file

@ -1,3 +1,32 @@
'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',
ws = new WebSocket('ws:' + base + '/ws');
@ -13,7 +42,82 @@ function load() {
};
}
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();
xhr.onload = function() {
var response = JSON.parse(this.responseText);
@ -22,17 +126,17 @@ function update() {
if (response.progress) {
status = parseInt(response.progress * 100) + '% ' + status;
}
document.getElementById('status').innerHTML = status;
setTimeout(update, 1000);
update.status.innerHTML = status;
setTimeout(updateStatus, 1000);
} else {
document.getElementById('status').innerHTML = 'done';
update.status.innerHTML = 'Relaunching...';
setTimeout(load, 500);
}
};
xhr.onerror = function() {
var status = document.getElementById('status').innerHTML;
if (['done', 'setup'].indexOf(status) == -1) {
document.getElementById('status').innerHTML = 'error';
var status = update.status.innerHTML;
if (['Relaunching...'].indexOf(status) == -1) {
update.status.innerHTML = 'Installation failed';
}
load();
}
@ -40,4 +144,4 @@ function update() {
xhr.send();
}
update();
}());

BIN
Open Media Library/Resources/png/oml.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 33 KiB

16
Open Media Library/Resources/svg/symbolLoading.svg Normal file
View 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>
Side by side

After

Width:  |  Height:  |  Size: 1.2 KiB