add now-playing clipboard meme

README.md

@@ -10,7 +10,7 @@ turn your phone or raspi into a portable file server with resumable uploads/down
 
 * server runs on anything with `py2.7` or `py3.3+`
 * browse/upload with IE4 / netscape4.0 on win3.11 (heh)
-* *resumable* uploads need `firefox 34+` / `chrome 37+` / `safari 7+`
+* *resumable* uploads need `firefox 34+` / `chrome 37+` / `safari 7+` for full speed
 * code standard: `black`
 
 📷 screenshots: [browser](#the-browser) // [upload](#uploading) // [md-viewer](#markdown-viewer) // [search](#searching) // [fsearch](#file-search) // [zip-DL](#zip-downloads) // [ie4](#browser-support)

copyparty/web/browser.css

@@ -281,29 +281,48 @@ a, #files tbody div a:last-child {
 	padding: .2em 0 0 .07em;
 	color: #fff;
 }
-#wzip {
+#wzip, #wnp {
 	display: none;
 	margin-right: .3em;
 	padding-right: .3em;
 	border-right: .1em solid #555;
 }
+#wnp a {
+	position: relative;
+	font-size: .47em;
+	margin: 0 .1em;
+	top: -.4em;
+}
+#wnp a+a {
+	margin-left: .33em;
+}
 #wtoggle,
 #wtoggle * {
 	line-height: 1em;
 }
+#wtoggle.np {
+	width: 5.5em;
+}
 #wtoggle.sel {
 	width: 6.4em;
 }
-#wtoggle.sel #wzip {
+#wtoggle.sel #wzip,
+#wtoggle.np #wnp {
 	display: inline-block;
 }
-#wtoggle.sel #wzip a {
+#wtoggle.sel.np #wnp {
+	display: none;
+}
+#wzip a {
 	font-size: .4em;
 	padding: 0 .3em;
 	margin: -.3em .2em;
 	position: relative;
 	display: inline-block;
 }
+#wzip a+a {
+	margin-left: .8em;
+}
 #wtoggle.sel #wzip #selzip {
 	top: -.6em;
 	padding: .4em .3em;

copyparty/web/browser.html

@@ -114,22 +114,7 @@
     <div id="srv_info"><span>{{ srv_info }}</span></div>
     {%- endif %}
 
-    <div id="widget">
+    <div id="widget"></div>
-        <div id="wtoggle">
-            <span id="wzip">
-                <a href="#" id="selall">sel.<br />all</a>
-                <a href="#" id="selinv">sel.<br />inv.</a>
-                <a href="#" id="selzip">zip</a>
-            </span><a
-                href="#" id="wtico">♫</a>
-        </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>
-            <canvas id="barpos"></canvas>
-            <canvas id="barbuf"></canvas>
-        </div>
-    </div>
 
     <script>
         var tag_order_cfg = {{ tag_order }};

copyparty/web/browser.js

@@ -7,6 +7,28 @@ function dbg(msg) {
 }
 
 
+// add widget buttons
+ebi('widget').innerHTML = (
+	'<div id="wtoggle">' +
+	'<span id="wzip"><a' +
+	' href="#" id="selall">sel.<br />all</a><a' +
+	' href="#" id="selinv">sel.<br />inv.</a><a' +
+	' href="#" id="selzip">zip</a>' +
+	'</span><span id="wnp"><a' +
+	' href="#" id="npirc">📋irc</a><a' +
+	' href="#" id="nptxt">📋txt</a>' +
+	'</span><a' +
+	'	href="#" id="wtico">♫</a>' +
+	'</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>' +
+	'	<canvas id="barpos"></canvas>' +
+	'	<canvas id="barbuf"></canvas>' +
+	'</div>'
+);
+
+
 // extract songs + add play column
 function MPlayer() {
 	this.id = Date.now();
@@ -79,6 +101,8 @@ var widget = (function () {
 	var ret = {},
 		widget = ebi('widget'),
 		wtico = ebi('wtico'),
+		nptxt = ebi('nptxt'),
+		npirc = ebi('npirc'),
 		touchmode = false,
 		side_open = false,
 		was_paused = true;
@@ -116,6 +140,35 @@ var widget = (function () {
 
 		return false;
 	};
+	npirc.onclick = nptxt.onclick = function (e) {
+		ev(e);
+		var th = ebi('files').tHead.rows[0].cells,
+			tr = QS('#files tr.play').cells,
+			irc = this.getAttribute('id') == 'npirc',
+			ck = irc ? '06' : '',
+			cv = irc ? '07' : '',
+			m = ck + 'np: ' + cv;
+
+		for (var a = 1, aa = th.length; a < aa; a++) {
+			var tk = a == 1 ? '' : th[a].getAttribute('name').split('/').slice(-1)[0];
+			var tv = tr[a].getAttribute('html') || tr[a].textContent;
+			m += tk + '(' + cv + tv + ck + ') // ';
+		}
+
+		m += '[' + cv + s2ms(mp.au.currentTime) + ck + '/' + cv + s2ms(mp.au.duration) + ck + ']';
+
+		var o = document.createElement('input');
+		o.style.cssText = 'position:fixed;top:45%;left:48%;padding:1em';
+		o.value = m;
+		document.body.appendChild(o);
+		o.focus();
+		o.select();
+		document.execCommand("copy");
+		o.value = 'copied to clipboard ';
+		setTimeout(function () {
+			document.body.removeChild(o);
+		}, 500);
+	};
 	return ret;
 })();
 
@@ -513,6 +566,7 @@ function play(tid, seek, call_depth) {
 		clmod(trs[a], 'play');
 	}
 	ebi(oid).parentElement.parentElement.className += ' play';
+	clmod(ebi('wtoggle'), 'np', 1);
 
 	try {
 		if (attempt_play)