diff --git a/copyparty/httpconn.py b/copyparty/httpconn.py index bc56e8d9..0f8c5dcd 100644 --- a/copyparty/httpconn.py +++ b/copyparty/httpconn.py @@ -28,13 +28,11 @@ class HttpConn(object): self.log_func = log_func self.log_src = "{} \033[36m{}".format(addr[0], addr[1]).ljust(26) - self.tpl_mounts = self.load_tpl("splash.html") - self.tpl_browser = self.load_tpl("browser.html") - self.tpl_msg = self.load_tpl("msg.html") - - def load_tpl(self, fn): - with open(self.respath(fn), "rb") as f: - return jinja2.Template(f.read().decode("utf-8")) + env = jinja2.Environment() + env.loader = jinja2.FileSystemLoader(os.path.join(E.mod, "web")) + self.tpl_mounts = env.get_template("splash.html") + self.tpl_browser = env.get_template("browser.html") + self.tpl_msg = env.get_template("msg.html") def respath(self, res_name): return os.path.join(E.mod, "web", res_name) diff --git a/copyparty/web/browser.css b/copyparty/web/browser.css index ff34ee5e..7a2e7381 100644 --- a/copyparty/web/browser.css +++ b/copyparty/web/browser.css @@ -54,51 +54,51 @@ a { color: #fff; background: #161616; } -thead a { +#files thead a { color: #999; font-weight: normal; } -tr:hover { +#files tr:hover { background: #1c1c1c; } -thead th { +#files thead th { padding: .5em 1.3em .3em 1.3em; } -thead th:last-child { +#files thead th:last-child { background: #444; border-radius: .7em 0 0 0; } -thead th:first-child { +#files thead th:first-child { background: #222; } -tbody, -thead th:nth-child(2) { +#files tbody, +#files thead th:nth-child(2) { background: #222; border-radius: 0 .7em 0 0; } -td { +#files td { margin: 0; padding: 0 .5em; } -tbody td:nth-child(3) { +#files tbody td:nth-child(3) { font-family: monospace; font-size: 1.3em; text-align: right; padding-right: 1em; white-space: nowrap; } -tbody td:first-child { +#files tbody td:first-child { padding-left: 1.5em; color: #888; } -tbody tr:first-child td { +#files tbody tr:first-child td { padding-top: .9em; } -tbody tr:last-child td { +#files tbody tr:last-child td { padding-bottom: 1.3em; border-bottom: .5em solid #444; } -thead th[style] { +#files thead th[style] { width: auto !important; } #path a { @@ -255,13 +255,3 @@ a.play.act { width: calc(100% - 10.5em); background: rgba(0,0,0,0.2); } -#bup { - padding: .5em .5em .5em .3em; - background: #2d2d2d; - border-radius: 0 0 1em 0; - border-right: .3em solid #3a3a3a; - max-width: 40em; -} -#bup input { - margin: .5em; -} diff --git a/copyparty/web/browser.html b/copyparty/web/browser.html index f7dfda68..b76aa10a 100644 --- a/copyparty/web/browser.html +++ b/copyparty/web/browser.html @@ -7,17 +7,14 @@ + {%- if can_upload %} + + {%- endif %} {%- if can_upload %} -
-
- -
- -
-
+ {%- include 'upload.html' %} {%- endif %}

@@ -44,7 +41,7 @@ - +

control-panel

@@ -57,6 +54,9 @@
+ {%- if can_upload %} + + {%- endif %} \ No newline at end of file diff --git a/copyparty/web/browser.js b/copyparty/web/browser.js index 477570c7..5b703262 100644 --- a/copyparty/web/browser.js +++ b/copyparty/web/browser.js @@ -381,7 +381,7 @@ var vbar = (function () { Math.round(mul * 1000) / 1000); */ - mp.au.currentTime = Math.round(mp.au.duration * mul); + mp.au.currentTime = mp.au.duration * mul; if (mp.au === mp.au_native) // hack: ogv.js breaks on .play() during playback diff --git a/copyparty/web/up2k.js b/copyparty/web/up2k.js new file mode 100644 index 00000000..2867089b --- /dev/null +++ b/copyparty/web/up2k.js @@ -0,0 +1,55 @@ +// error handler for mobile devices +function hcroak(msg) { + document.body.innerHTML = msg; + window.onerror = undefined; + throw 'fatal_err'; +} +function croak(msg) { + document.body.textContent = msg; + window.onerror = undefined; + throw msg; +} +function esc(txt) { + return txt.replace(/[&"<>]/g, function (c) { + return { + '&': '&', + '"': '"', + '<': '<', + '>': '>' + }[c]; + }); +} +window.onerror = function (msg, url, lineNo, columnNo, error) { + window.onerror = undefined; + var html = ['

you hit a bug!

please screenshot this error and send me a copy arigathanks gozaimuch (ed/irc.rizon.net or ed#2644)

', + esc(String(msg)), '

', esc(url + ' @' + lineNo + ':' + columnNo), '

']; + + if (error) { + var find = ['desc', 'stack', 'trace']; + for (var a = 0; a < find.length; a++) + if (String(error[find[a]]) !== 'undefined') + html.push('

' + find[a] + '

' + + esc(String(error[find[a]])).replace(/\n/g, '
\n')); + } + document.body.style.fontSize = '0.8em'; + hcroak(html.join('\n')); +}; + +function ebi(id) { + return document.getElementById(id); +} + +ebi('up2k').style.display = 'block'; +ebi('bup').style.display = 'none'; + +ebi('u2tgl').onclick = function (e) { + e.preventDefault(); + ebi('u2tgl').style.display = 'none'; + ebi('u2body').style.display = 'block'; +} + +ebi('u2nope').onclick = function (e) { + e.preventDefault(); + ebi('up2k').style.display = 'none'; + ebi('bup').style.display = 'block'; +} diff --git a/copyparty/web/upload.css b/copyparty/web/upload.css new file mode 100644 index 00000000..2dbe99a4 --- /dev/null +++ b/copyparty/web/upload.css @@ -0,0 +1,125 @@ +#bup { + padding: .5em .5em .5em .3em; + background: #2d2d2d; + border-radius: 0 0 1em 0; + border-right: .3em solid #3a3a3a; + max-width: 40em; +} +#bup input { + margin: .5em; +} +#up2k { + display: none; +} +#u2tgl { + display: block; + color: #fc5; + background: #444; + width: 14em; + font-size: 1.5em; + padding: 1em 1em .25em 1em; + border-bottom: 2px solid #2c2c2c; + border-radius: 0 0 .3em 0; +} +#u2body { + display: none; +} +#u2form { + width: 2px; + height: 2px; + overflow: hidden; +} +#u2btn { + color: #eee; + background: #555; + background: -moz-linear-gradient(top, #367 0%, #489 50%, #38788a 51%, #367 100%); + background: -webkit-linear-gradient(top, #367 0%, #489 50%, #38788a 51%, #367 100%); + background: linear-gradient(to bottom, #367 0%, #489 50%, #38788a 51%, #367 100%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#489', endColorstr='#38788a', GradientType=0); + text-decoration: none; + line-height: 1.5em; + border: 1px solid #222; + border-radius: .4em; + text-align: center; + font-size: 2em; + margin: 1em auto; + padding: 1em 0; + width: 15em; + cursor: pointer; + box-shadow: .4em .4em 0 #111; +} +#u2tab { + margin: 3em auto; + width: calc(100% - 2em); + max-width: 100em; +} +#u2tab td { + border: 1px solid #ccc; + border-width: 0 0px 1px 0; + padding: .1em .3em; +} +#u2tab td:nth-child(2) { + width: 5em; +} +#u2tab td:nth-child(3) { + width: 40%; +} +#u2tab tr+tr:hover td { + background: #fea; +} +#u2conf { + margin: 1em auto; + width: 30em; +} +#u2conf * { + text-align: center; + line-height: 1em; + margin: 0; + padding: 0; + border: none; + outline: none; +} +#u2conf input { + width: 4em; + color: #fff; + background: #444; + border: 1px solid #777; + font-size: 1.2em; + padding: .15em 0; +} +#u2conf a { + color: #fff; + background: #c38; + text-decoration: none; + border-radius: .1em; + font-size: 1.5em; + padding: .1em 0; + margin: 0 -.25em; + width: 1.5em; + height: 1em; + display: inline-block; + position: relative; + line-height: 1em; + bottom: -.08em; +} +#u2conf input+a { + background: #d80; +} +.prog>div { + display: inline-block; + position: relative; + overflow: hidden; + margin: 0; + padding: 0; + height: 1.1em; + margin-bottom: -.15em; + box-shadow: -.1em -.1em .2em inset rgba(0,0,0,0.2); +} +.prog>div>div { + width: 0%; + position: absolute; + left: 0; + top: 0; + bottom: 0; + background: #0a0; +} diff --git a/copyparty/web/upload.html b/copyparty/web/upload.html new file mode 100644 index 00000000..37f85e84 --- /dev/null +++ b/copyparty/web/upload.html @@ -0,0 +1,50 @@ +
+
+ +
+ +
+
+ +
+ + upload + +
+
+ + + + + + + + + + +
parallel uploadsfile split (megabyte)
+ – + + + + + – + + + +
+ +
+ drop files here
+ (or click me) +
+ + + + + + + +
filenamestatusprogress
+ + switch to the basic uploader +
+