ux

copyparty/httpcli.py

@@ -426,9 +426,16 @@ class HttpCli(object):
             else:
                 files.append(item)
 
+        ts = ""
+        # ts = "?{}".format(time.time())
+
         dirs.extend(files)
         html = self.conn.tpl_browser.render(
-            vdir=self.vpath, vpnodes=vpnodes, files=dirs, can_upload=self.writable
+            vdir=self.vpath,
+            vpnodes=vpnodes,
+            files=dirs,
+            can_upload=self.writable,
+            ts=ts,
         )
         self.reply(html.encode("utf-8", "replace"))
         return True

copyparty/web/browser.css

@@ -11,6 +11,7 @@ html {
 	background: #333;
 	font-family: sans-serif;
 	text-shadow: 1px 1px 0px #000;
+	line-height: 1.3em;
 }
 html, body {
 	margin: 0;
@@ -19,6 +20,11 @@ html, body {
 body {
 	padding-bottom: 5em;
 }
+#path,
+#path * {
+	font-size: 1em;
+	line-height: 1em;
+}
 #path {
 	color: #aca;
 	text-shadow: 1px 1px 0 #000;
@@ -26,7 +32,7 @@ body {
 	font-weight: normal;
 	background: #4c4c4c;
 	display: inline-block;
-	padding: .2em .5em .2em 1em;
+	padding: .35em .5em .2em 1em;
 	border-radius: 0 .3em .3em 0;
 	box-shadow: .1em .1em .4em #222;
 	margin: 1em 0;
@@ -191,7 +197,7 @@ a.play.act {
 }
 #wtoggle {
 	position: absolute;
-	top: -1em;
+	top: -1.2em;
 	right: 0;
 	width: 1.2em;
 	height: 1em;
@@ -202,7 +208,7 @@ a.play.act {
 	background: #3c3c3c;
 	box-shadow: 0 0 .5em #222;
 	border-radius: .3em 0 0 0;
-	padding-left: .07em;
+	padding: .2em 0 0 .07em;
 	color: #fff;
 }
 #barpos,

copyparty/web/browser.html

@@ -48,7 +48,7 @@
     <h2><a href="?h">control-panel</a></h2>
 
     <div id="widget">
-        <div id="wtoggle">=</div>
+        <div id="wtoggle">♫</div>
         <div id="widgeti">
             <div id="pctl"><a href="#" id="bprev">⏮</a><a href="#" id="bplay">▶</a><a href="#" id="bnext">⏭</a></div>
             <canvas id="pvol" width="288" height="38"></canvas>
@@ -56,7 +56,7 @@
             <canvas id="barbuf"></canvas>
         </div>
     </div>
-    <script src="/.cpr/browser.js"></script>
+    <script src="/.cpr/browser.js{{ ts }}"></script>
 </body>
 
 </html>

copyparty/web/browser.js

@@ -65,6 +65,10 @@ function ebi(id) {
 	return document.getElementById(id);
 }
 
+function dbg(msg) {
+	ebi('path').innerHTML = msg;
+}
+
 
 // extract songs + add play column
 var mp = (function () {
@@ -359,13 +363,26 @@ var vbar = (function () {
 		bskip(1);
 	};
 	ebi('barpos').onclick = function (e) {
-		if (!mp.au)
+		if (!mp.au) {
+			//dbg((new Date()).getTime());
 			return play(0);
+		}
 
 		var rect = pbar.pcan.getBoundingClientRect();
 		var x = e.clientX - rect.left;
 		var mul = x * 1.0 / rect.width;
-		mp.au.currentTime = mp.au.duration * mul;
+
+		/*
+		dbg(//Math.round(rect.width) + 'x' + Math.round(rect.height) + '+' +
+			//Math.round(rect.left) + '+' + Math.round(rect.top) + ', ' +
+			//Math.round(e.clientX) + 'x' + Math.round(e.clientY) + ', ' +
+			Math.round(mp.au.currentTime * 10) / 10 + ', ' +
+			Math.round(mp.au.duration * 10) / 10 + '*' +
+			Math.round(mul * 1000) / 1000);
+		*/
+
+		mp.au.currentTime = Math.round(mp.au.duration * mul);
+
 		if (mp.au === mp.au_native)
 			// hack: ogv.js breaks on .play() during playback
 			mp.au.play();

copyparty/web/msg.html

@@ -37,7 +37,7 @@
     <script>
         setTimeout(function() {
             window.location.replace("{{ redir }}");
-        }, 500);
+        }, 1000);
     </script>
     {%- endif %}
 </body>