v0.13.8

copyparty/__version__.py

@@ -1,8 +1,8 @@
 # coding: utf-8
 
-VERSION = (0, 13, 6)
+VERSION = (0, 13, 8)
 CODENAME = "future-proof"
-BUILD_DT = (2021, 8, 27)
+BUILD_DT = (2021, 8, 29)
 
 S_VERSION = ".".join(map(str, VERSION))
 S_BUILD_DT = "{0:04d}-{1:02d}-{2:02d}".format(*BUILD_DT)

copyparty/web/browser.css

@@ -1,5 +1,6 @@
 :root {
 	--grid-sz: 10em;
+	--grid-ln: 3;
 }
 @font-face {
 	font-family: 'scp';
@@ -212,8 +213,8 @@ a, #files tbody div a:last-child {
 	color: #720;
 	text-shadow: 0 0 .3em #b80;
 }
-#ggrid a.play,
-html.light #ggrid a.play {
+#ggrid>a.play,
+html.light #ggrid>a.play {
 	color: #fff;
 	background: #750;
 	border-color: #c90;
@@ -221,36 +222,38 @@ html.light #ggrid a.play {
 	box-shadow: 0 .1em 1.2em #b83;
 }
 #files tbody tr.sel td,
-#ggrid a.sel,
-html.light #ggrid a.sel {
+#ggrid>a.sel,
+#ggrid>a[tt].sel,
+html.light #ggrid>a.sel,
+html.light #ggrid>a[tt].sel {
 	color: #fff;
 	background: #925;
 	border-color: #c37;
 }
 #files tbody tr.sel:hover td,
 #files tbody tr.sel:focus td,
-#ggrid a.sel:hover,
-html.light #ggrid a.sel:hover {
+#ggrid>a.sel:hover,
+html.light #ggrid>a.sel:hover {
 	color: #fff;
 	background: #d39;
 	border-color: #d48;
 	text-shadow: 1px 1px 0 #804;
 }
-#ggrid a.sel,
-html.light #ggrid a.sel {
+#ggrid>a.sel,
+html.light #ggrid>a.sel {
 	border-top: 1px solid #d48;
 	box-shadow: 0 .1em 1.2em #b36;
 	transition: all 0.2s cubic-bezier(.2, 2.2, .5, 1); /* https://cubic-bezier.com/#.4,2,.7,1 */
 }
-#ggrid a.sel img,
-#ggrid a.play img {
+#ggrid>a.sel img,
+#ggrid>a.play img {
 	opacity: .7;
 	filter: contrast(130%) brightness(107%);
 }
-#ggrid a.sel img {
+#ggrid>a.sel img {
 	box-shadow: 0 0 1em #b36;
 }
-#ggrid a.play img {
+#ggrid>a.play img {
 	box-shadow: 0 0 1em #b83;
 }
 #files tr.sel a {
@@ -314,7 +317,7 @@ html.light #ggrid a.sel {
 }
 #widget {
 	position: fixed;
-	font-size: 1.5em;
+	font-size: 1.4em;
 	left: 0;
 	right: 0;
 	bottom: -6em;
@@ -340,10 +343,11 @@ html.light #ggrid a.sel {
 	cursor: url(/.cpr/dd/4.png), pointer;
 	animation: cursor 500ms;
 	position: relative;
-	top: -.06em;
+	font-size: .9em;
+	top: -.04em;
 }
 #wtgrid {
-	font-size: .8em;
+	font-size: .75em;
 	top: -.12em;
 }
 #wtgrid:hover,
@@ -363,7 +367,8 @@ html.light #ggrid a.sel {
 #wtoggle {
 	position: absolute;
 	white-space: nowrap;
-	top: -1.2em;
+	font-size: .8em;
+	top: -1em;
 	right: 0;
 	height: 1em;
 	font-size: 2em;
@@ -373,7 +378,7 @@ html.light #ggrid a.sel {
 	background: #3c3c3c;
 	box-shadow: 0 0 .5em #222;
 	border-radius: .3em 0 0 0;
-	padding: .2em .2em;
+	padding: 0;
 	color: #fff;
 }
 #wzip, #wnp {
@@ -406,7 +411,7 @@ html.light #ggrid a.sel {
 #wzip a {
 	font-size: .5em;
 	padding: 0 .3em;
-	margin: -.3em .2em;
+	margin: -.3em .1em;
 	position: relative;
 	display: inline-block;
 }
@@ -430,7 +435,7 @@ html.light #wfm a:not(.en) {
 }
 #wzip a {
 	font-size: .4em;
-	margin: -.3em .3em;
+	margin: -.3em .1em;
 }
 #wtoggle.sel #wzip #selzip {
 	top: -.6em;
@@ -867,10 +872,12 @@ input.eq_gain {
 	background: #3c3c3c;
 	border: 1px solid #444;
 	border-radius: .3em;
-	padding: .5em;
+	padding: .2em .5em;
+	line-height: 2.3em;
 	margin: 0 1.5em 1em .4em;
 	position: sticky;
 	top: -.3em;
+	z-index: 1;
 }
 html.light #ghead {
 	background: #f7f7f7;
@@ -880,10 +887,22 @@ html.light #ghead {
 	position: relative;
 	top: 0;
 }
+#ghead>span {
+	white-space: pre;
+	padding-left: .3em;
+}
 #ggrid {
 	padding-top: .5em;
 }
-#ggrid a {
+#ggrid>a>span {
+	overflow: hidden;
+	display: block;
+	display: -webkit-box;
+	-webkit-line-clamp: var(--grid-ln);
+	-webkit-box-orient: vertical;
+	padding-top: .3em;
+}
+#ggrid>a {
 	display: inline-block;
 	width: 10em;
 	width: var(--grid-sz);
@@ -897,7 +916,10 @@ html.light #ghead {
 	padding: .3em;
 	margin: .5em;
 }
-#ggrid a img {
+#ggrid>a[tt] {
+	background: linear-gradient(135deg, #383838 95%, #555 95%);
+}
+#ggrid>a img {
 	border-radius: .2em;
 	max-width: 10em;
 	max-width: var(--grid-sz);
@@ -906,27 +928,33 @@ html.light #ghead {
 	margin: 0 auto;
 	display: block;
 }
-#ggrid a span {
-	padding: .2em .3em;
-	display: block;
-}
-#ggrid span.dir:before {
+#ggrid>a.dir:before {
 	content: '📂';
-	line-height: 0;
-	font-size: 2em;
-	margin: -.7em .1em -.5em -.3em;
 }
-#ggrid a:hover {
+#ggrid>a:before {
+	display: block;
+	position: absolute;
+	padding: .3em 0;
+	margin: -.4em;
+	text-shadow: 0 0 .1em #000;
+	background: linear-gradient(135deg,rgba(255,255,255,0) 50%,rgba(255,255,255,0.2));
+	border-radius: .3em;
+	font-size: 2em;
+}
+#ggrid>a:hover {
 	background: #444;
 	border-color: #555;
 	color: #fd9;
 }
-html.light #ggrid a {
+html.light #ggrid>a {
 	background: #f7f7f7;
 	border-color: #ddd;
 	box-shadow: 0 .1em .2em #ddd;
 }
-html.light #ggrid a:hover {
+html.light #ggrid>a[tt] {
+	background: linear-gradient(135deg, #f7f7f7 95%, #ccc 95%);
+}
+html.light #ggrid>a:hover {
 	background: #fff;
 	border-color: #ccc;
 	color: #015;
@@ -1633,6 +1661,7 @@ html.light #bbox-overlay figcaption a {
 	white-space: nowrap;
 	text-align: center;
 	overflow: hidden;
+	min-width: 24em;
 }
 #u2cards.w {
 	width: 44em;

copyparty/web/browser.js

@@ -32,7 +32,7 @@ ebi('widget').innerHTML = (
 	'<div id="wtoggle">' +
 	'<span id="wfm"><a' +
 	' href="#" id="fren" tt="rename selected item$NHotkey: F2">✎<span>name</span></a><a' +
-	' href="#" id="fdel" tt="delete selected items$NHotkey: ctrl-K">⌫<span>delete</span></a><a' +
+	' href="#" id="fdel" tt="delete selected items$NHotkey: ctrl-K">⌫<span>del.</span></a><a' +
 	' href="#" id="fcut" tt="cut selected items &lt;small&gt;(then paste somewhere else)&lt;/small&gt;$NHotkey: ctrl-X">✂<span>cut</span></a><a' +
 	' href="#" id="fpst" tt="paste a previously cut/copied selection$NHotkey: ctrl-V">📋<span>paste</span></a>' +
 	'</span><span id="wzip"><a' +
@@ -399,6 +399,7 @@ function MPlayer() {
 	r.au_native2 = null;
 	r.au_ogvjs = null;
 	r.au_ogvjs2 = null;
+	r.loading = false;
 	r.tracks = {};
 	r.order = [];
 
@@ -422,18 +423,14 @@ function MPlayer() {
 		}
 	}
 
-	r.vol = sread('vol');
-	if (r.vol !== null)
-		r.vol = parseFloat(r.vol);
-	else
-		r.vol = 0.5;
+	r.vol = clamp(fcfg_get('vol', 0.5), 0, 1);
 
 	r.expvol = function (v) {
 		return 0.5 * v + 0.5 * v * v;
 	};
 
 	r.setvol = function (vol) {
-		r.vol = Math.max(Math.min(vol, 1), 0);
+		r.vol = clamp(vol, 0, 1);
 		swrite('vol', vol);
 		r.stopfade(true);
 
@@ -680,7 +677,7 @@ var pbar = (function () {
 
 		bctx.clearRect(0, 0, bc.w, bc.h);
 
-		if (!mp.au)
+		if (!mp.au || mp.loading)
 			return;
 
 		var sm = bc.w * 1.0 / mp.au.duration,
@@ -702,25 +699,26 @@ var pbar = (function () {
 	r.drawpos = function () {
 		var bc = r.buf,
 			pc = r.pos,
-			pctx = pc.ctx;
+			pctx = pc.ctx,
+			apos, adur;
 
 		pctx.clearRect(0, 0, pc.w, pc.h);
 
-		if (!mp.au || isNaN(mp.au.duration) || isNaN(mp.au.currentTime))
+		if (!mp.au || mp.loading || isNaN(adur = mp.au.duration) || isNaN(apos = mp.au.currentTime))
 			return;  // not-init || unsupp-codec
 
-		var sm = bc.w * 1.0 / mp.au.duration;
+		var sm = bc.w * 1.0 / adur;
 
 		pctx.fillStyle = light ? 'rgba(0,64,0,0.15)' : 'rgba(204,255,128,0.15)';
-		for (var p = 1, mins = mp.au.duration / 10; p <= mins; p++)
+		for (var p = 1, mins = adur / 10; p <= mins; p++)
 			pctx.fillRect(Math.floor(sm * p * 10), 0, 2, pc.h);
 
 		pctx.fillStyle = light ? 'rgba(0,64,0,0.5)' : 'rgba(192,255,96,0.5)';
-		for (var p = 1, mins = mp.au.duration / 60; p <= mins; p++)
+		for (var p = 1, mins = adur / 60; p <= mins; p++)
 			pctx.fillRect(Math.floor(sm * p * 60), 0, 2, pc.h);
 
 		var w = 8,
-			x = sm * mp.au.currentTime;
+			x = sm * apos;
 
 		pctx.fillStyle = '#573'; pctx.fillRect((x - w / 2) - 1, 0, w + 2, pc.h);
 		pctx.fillStyle = '#dfc'; pctx.fillRect((x - w / 2), 0, 8, pc.h);
@@ -731,8 +729,8 @@ var pbar = (function () {
 		pctx.font = '1em sans-serif';
 
 		var m = pctx.measureText.bind(pctx),
-			t1 = s2ms(mp.au.duration),
-			t2 = s2ms(mp.au.currentTime),
+			t1 = s2ms(adur),
+			t2 = s2ms(apos),
 			yt = pc.h / 3 * 2.1,
 			xt1 = pc.w - (m(t1).width + 12),
 			xt2 = x < pc.w / 2 ? (x + 12) : (Math.min(pc.w - m(t1 + ":88").width, x - 12) - m(t2).width);
@@ -965,7 +963,7 @@ var mpui = (function () {
 		}
 
 		// preload next song
-		if (mpl.preload && preloaded != mp.au.src) {
+		if (mpl.preload && !mp.loading && preloaded != mp.au.src) {
 			var pos = mp.au.currentTime,
 				len = mp.au.duration;
 
@@ -1021,6 +1019,21 @@ function need_ogv_for(url) {
 }
 
 
+function start_sinegen() {
+	var af = 'data:audio/wav;base64,UklGRlaxAgBXQVZFZm10IBAAAAABAAEARKwAAIhYAQACABAATElTVBoAAABJTkZPSVNGVA4AAABMYXZmNTguNzYuMTAwAGRhdGEQsQIAAAB',
+		body = 'iArcE8AYCCeEKggzaDeQOmA/0D/QPmQ/kDtsNggzhCgMJ8Qa4BGMCAQCe/Un7EPn+9h/1fvMm8hzxaPAM8AzwZ/Ac8SXyfvMf9f32D/lI+539//9';
+
+	while (af.length < 235304)
+		af += body;
+
+	var au = new Audio(af.slice(0, 235304));
+	au.onplay = au.pause.bind(au);
+	au.volume = 0.5;
+	au.play();
+	return au;
+}
+
+
 var audio_eq = (function () {
 	var r = {
 		"en": false,
@@ -1284,11 +1297,15 @@ function play(tid, is_ev, seek, call_depth) {
 			mp.au = mp.au_ogvjs;
 		}
 		else if (window['OGVPlayer']) {
+			mp.loading = true;
 			mp.au = mp.au_ogvjs = new OGVPlayer();
 			attempt_play = is_ev;
-			mp.au.addEventListener('error', evau_error, true);
-			mp.au.addEventListener('progress', pbar.drawpos);
-			mp.au.addEventListener('ended', next_song);
+			mp.au.onerror = evau_error;
+			mp.au.onprogress = pbar.drawpos;
+			mp.au.onended = next_song;
+			mp.au.onloadedmetadata = mp.au.onloadeddata = function () {
+				mp.loading = false;
+			};
 			widget.open();
 		}
 		else {
@@ -1300,6 +1317,10 @@ function play(tid, is_ev, seek, call_depth) {
 			import_js('/.cpr/deps/ogv.js', function () {
 				toast.hide();
 				play(tid, false, seek, 1);
+
+				var m = /.* Version\/([0-9]+)\.[0-9\.]+ Mobile\/[^ ]+ Safari\/[0-9\.]+$/.exec(navigator.userAgent);
+				if (m && parseInt(m[1]) < 14)
+					toast.err(0, 'because this is an apple device,\nsafari 14 or newer is required\n\nyou are using safari version ' + m[1] + ', so playback of ogg/vorbis/opus files will be buggy\n\nnote: every iOS browser is safari');
 			});
 
 			return;
@@ -1308,18 +1329,26 @@ function play(tid, is_ev, seek, call_depth) {
 	else {
 		if (!mp.au_native) {
 			mp.au = mp.au_native = new Audio();
-			mp.au.addEventListener('error', evau_error, true);
-			mp.au.addEventListener('progress', pbar.drawpos);
-			mp.au.addEventListener('ended', next_song);
+			mp.au.onerror = evau_error;
+			mp.au.onprogress = pbar.drawpos;
+			mp.au.onended = next_song;
 			widget.open();
 		}
 		mp.au = mp.au_native;
+		mp.loading = false;
 	}
 
 	audio_eq.apply();
 
+	url += (url.indexOf('?') < 0 ? '?cache' : '&cache');
+	if (mp.au.src == url)
+		mp.au.currentTime = 0;
+	else {
+		mp.loading = mp.au == mp.au_ogvjs;
+		mp.au.src = url;
+	}
+
 	mp.au.tid = tid;
-	mp.au.src = url + (url.indexOf('?') < 0 ? '?cache' : '&cache');
 	mp.au.volume = mp.expvol(mp.vol);
 	var oid = 'a' + tid;
 	setclass(oid, 'play act');
@@ -1435,9 +1464,16 @@ function autoplay_blocked(seek) {
 	go.textContent = 'Play "' + fn + '"';
 	go.onclick = function (e) {
 		unblocked(e);
+		if (mp.au !== mp.au_ogvjs)
 			// chrome 91 may permanently taint on a failed play()
 			// depending on win10 settings or something? idk
-		mp.au_native = mp.au_ogvjs = null;
+			mp.au_native = null;
+		else
+			// iOS browsers allow playing ogg/vorbis/opus in the background
+			// if there is an <audio> tag which at some point played audio
+			if (!mp.sinegen)
+				mp.sinegen = start_sinegen();
+
 		play(tid, true, seek);
 		mp.fade_in();
 	};
@@ -2153,14 +2189,16 @@ var thegrid = (function () {
 	gfiles.style.display = 'none';
 	gfiles.innerHTML = (
 		'<div id="ghead">' +
-		'<a href="#" class="tgl btn" id="gridsel" tt="enable file selection; ctrl-click a file to override$NHotkey: S">multiselect</a> &nbsp; zoom ' +
+		'<a href="#" class="tgl btn" id="gridsel" tt="enable file selection; ctrl-click a file to override$NHotkey: S">multiselect</a> <span>zoom: ' +
 		'<a href="#" class="btn" z="-1.2" tt="Hotkey: shift-A">&ndash;</a> ' +
-		'<a href="#" class="btn" z="1.2" tt="Hotkey: shift-D">+</a> &nbsp; sort by: ' +
+		'<a href="#" class="btn" z="1.2" tt="Hotkey: shift-D">+</a></span> <span>chop: ' +
+		'<a href="#" class="btn" l="-1" tt="truncate filenames more (show less)">&ndash;</a> ' +
+		'<a href="#" class="btn" l="1" tt="truncate filenames less (show more)">+</a></span> <span>sort by: ' +
 		'<a href="#" s="href">name</a>, ' +
 		'<a href="#" s="sz">size</a>, ' +
 		'<a href="#" s="ts">date</a>, ' +
 		'<a href="#" s="ext">type</a>' +
-		'</div>' +
+		'</span></div>' +
 		'<div id="ggrid"></div>'
 	);
 	lfiles.parentNode.insertBefore(gfiles, lfiles);
@@ -2169,7 +2207,8 @@ var thegrid = (function () {
 		'thumbs': bcfg_get('thumbs', true),
 		'en': bcfg_get('griden', false),
 		'sel': bcfg_get('gridsel', false),
-		'sz': fcfg_get('gridsz', 10),
+		'sz': clamp(fcfg_get('gridsz', 10), 4, 40),
+		'ln': clamp(icfg_get('gridln', 3), 1, 7),
 		'isdirty': true,
 		'bbox': null
 	};
@@ -2189,8 +2228,7 @@ var thegrid = (function () {
 			loadgrid();
 		}
 		else {
-			lfiles.style.display = '';
-			gfiles.style.display = 'none';
+			ungrid();
 		}
 		pbar.onresize();
 		vbar.onresize();
@@ -2199,11 +2237,15 @@ var thegrid = (function () {
 	var btnclick = function (e) {
 		ev(e);
 		var s = this.getAttribute('s'),
-			z = this.getAttribute('z');
+			z = this.getAttribute('z'),
+			l = this.getAttribute('l');
 
 		if (z)
 			return setsz(z > 0 ? r.sz * z : r.sz / (-z));
 
+		if (l)
+			return setln(parseInt(l));
+
 		var t = lfiles.tHead.rows[0].cells;
 		for (var a = 0; a < t.length; a++)
 			if (t[a].getAttribute('name') == s) {
@@ -2214,7 +2256,7 @@ var thegrid = (function () {
 		r.setdirty();
 	};
 
-	var links = QSA('#ghead>a');
+	var links = QSA('#ghead a');
 	for (var a = 0; a < links.length; a++)
 		links[a].onclick = btnclick;
 
@@ -2227,19 +2269,35 @@ var thegrid = (function () {
 
 	r.setvis = function (vis) {
 		(r.en ? gfiles : lfiles).style.display = vis ? '' : 'none';
-	}
+	};
 
 	r.setdirty = function () {
 		r.dirty = true;
 		if (r.en) {
 			loadgrid();
 		}
+	};
+
+	function setln(v) {
+		if (v) {
+			r.ln += v;
+			if (r.ln < 1) r.ln = 1;
+			if (r.ln > 7) r.ln = v < 0 ? 7 : 99;
+			swrite('gridln', r.ln);
+			setTimeout(r.tippen, 20);
 		}
+		try {
+			document.documentElement.style.setProperty('--grid-ln', r.ln);
+		}
+		catch (ex) { }
+	}
+	setln();
 
 	function setsz(v) {
 		if (v !== undefined) {
-			r.sz = v;
+			r.sz = clamp(v, 4, 40);
 			swrite('gridsz', r.sz);
+			setTimeout(r.tippen, 20);
 		}
 		try {
 			document.documentElement.style.setProperty('--grid-sz', r.sz + 'em');
@@ -2297,14 +2355,56 @@ var thegrid = (function () {
 		var ths = QSA('#ggrid>a');
 
 		for (var a = 0, aa = ths.length; a < aa; a++) {
-			var tr = ebi(ths[a].getAttribute('ref')).closest('tr');
-			ths[a].setAttribute('class', tr.getAttribute('class'));
+			var tr = ebi(ths[a].getAttribute('ref')).closest('tr'),
+				cl = tr.getAttribute('class') || '';
+
+			if (ths[a].getAttribute('href').endsWith('/'))
+				cl += ' dir';
+
+			ths[a].setAttribute('class', cl);
 		}
 		var uns = QS('#ggrid a[ref="unsearch"]');
 		if (uns)
 			uns.onclick = function () {
 				ebi('unsearch').click();
 			};
+	};
+
+	r.tippen = function () {
+		var els = QSA('#ggrid>a>span'),
+			aa = els.length;
+
+		if (!aa)
+			return;
+
+		var cs = window.getComputedStyle(els[0]),
+			fs = parseFloat(cs.lineHeight),
+			pad = parseFloat(cs.paddingTop),
+			pels = [],
+			todo = [];
+
+		for (var a = 0; a < aa; a++) {
+			var vis = Math.round((els[a].offsetHeight - pad) / fs),
+				all = Math.round((els[a].scrollHeight - pad) / fs),
+				par = els[a].parentNode;
+
+			pels.push(par);
+			todo.push(vis < all ? par.getAttribute('ttt') : null);
+		}
+
+		for (var a = 0; a < todo.length; a++) {
+			if (todo[a])
+				pels[a].setAttribute('tt', todo[a]);
+			else
+				pels[a].removeAttribute('tt');
+		}
+
+		tt.att(ebi('ggrid'));
+	};
+
+	function ungrid() {
+		lfiles.style.display = '';
+		gfiles.style.display = 'none';
 	}
 
 	function loadgrid() {
@@ -2322,6 +2422,7 @@ var thegrid = (function () {
 		for (var a = 0, aa = files.length; a < aa; a++) {
 			var ao = files[a],
 				href = esc(ao.getAttribute('href')),
+				name = uricom_dec(vsplit(href)[1])[0],
 				ref = ao.getAttribute('id'),
 				isdir = href.split('?')[0].slice(-1)[0] == '/',
 				ac = isdir ? ' class="dir"' : '',
@@ -2354,7 +2455,8 @@ var thegrid = (function () {
 				ihref = '/.cpr/ico/' + ihref.slice(0, -1);
 			}
 
-			html.push('<a href="' + href + '" ref="' + ref + '"><img src="' +
+			html.push('<a href="' + href + '" ref="' + ref +
+				'"' + ac + ' ttt="' + esc(name) + '"><img src="' +
 				ihref + '" /><span' + ac + '>' + ao.innerHTML + '</span></a>');
 		}
 		ebi('ggrid').innerHTML = html.join('\n');
@@ -2366,6 +2468,7 @@ var thegrid = (function () {
 		r.dirty = false;
 		r.bagit();
 		r.loadsel();
+		setTimeout(r.tippen, 20);
 	}
 
 	r.bagit = function () {
@@ -2872,9 +2975,7 @@ var treectl = (function () {
 		prev_winh = null,
 		dyn = bcfg_get('dyntree', true),
 		dots = bcfg_get('dotfiles', false),
-		treesz = icfg_get('treesz', 16);
-
-	treesz = Math.min(Math.max(treesz, 4), 50);
+		treesz = clamp(icfg_get('treesz', 16), 4, 50);
 
 	treectl.entree = function (e) {
 		ev(e);

copyparty/web/msg.css

@@ -11,6 +11,7 @@ html {
 	background: #333;
 	font-family: sans-serif;
 	text-shadow: 1px 1px 0px #000;
+	touch-action: manipulation;
 }
 html, body {
 	margin: 0;

copyparty/web/splash.css

@@ -3,6 +3,9 @@ html, body, #wrap {
 	background: #f7f7f7;
 	font-family: sans-serif;
 }
+html {
+	touch-action: manipulation;
+}
 #wrap {
 	max-width: 40em;
 	margin: 2em auto;

copyparty/web/ui.css

@@ -1,6 +1,11 @@
+html {
+	touch-action: manipulation;
+}
 #tt, #toast {
 	position: fixed;
 	max-width: 34em;
+	max-width: min(34em, 90%);
+	max-width: min(34em, calc(100% - 7em));
 	background: #222;
 	border: 0 solid #777;
 	box-shadow: 0 .2em .5em #222;
@@ -8,8 +13,9 @@
 	z-index: 9001;
 }
 #tt {
+	max-width: min(34em, calc(100% - 3.3em));
 	overflow: hidden;
-	margin-top: 1em;
+	margin: .7em 0;
 	padding: 0 1.3em;
 	height: 0;
 	opacity: .1;

copyparty/web/up2k.js

@@ -1890,10 +1890,6 @@ function up2k_init(subtle) {
     if (o)
         o.addEventListener('click', tgl_fsearch, false);
 
-    var nodes = ebi('u2conf').getElementsByTagName('a');
-    for (var a = nodes.length - 1; a >= 0; a--)
-        nodes[a].addEventListener('touchend', nop, false);
-
     ebi('u2etas').onclick = function () {
         clmod(ebi('u2etas'), 'o', 't');
     };

copyparty/web/util.js

@@ -179,17 +179,26 @@ function crc32(str) {
 
 function clmod(el, cls, add) {
     if (el.classList) {
+        var have = el.classList.contains(cls);
         if (add == 't')
-            add = el.classList.contains(cls) ? 0 : 1;
+            add = !have;
 
-        return el.classList[add ? 'add' : 'remove'](cls);
+        if (add != have)
+            el.classList[add ? 'add' : 'remove'](cls);
+
+        return;
     }
 
-    var re = new RegExp('\\s*\\b' + cls + '\\s*\\b', 'g');
-    if (add == 't')
-        add = !re.test(el.className);
+    var re = new RegExp('\\s*\\b' + cls + '\\s*\\b', 'g'),
+        n1 = el.className;
 
-    el.className = el.className.replace(re, ' ') + (add ? ' ' + cls : '');
+    if (add == 't')
+        add = !re.test(n1);
+
+    var n2 = n1.replace(re, ' ') + (add ? ' ' + cls : '');
+
+    if (n1 != n2)
+        el.className = n2;
 }
 
 
@@ -420,6 +429,11 @@ function humansize(b, terse) {
 }
 
 
+function clamp(v, a, b) {
+    return Math.min(Math.max(v, a), b);
+}
+
+
 function has(haystack, needle) {
     for (var a = 0; a < haystack.length; a++)
         if (haystack[a] == needle)
@@ -578,6 +592,8 @@ var tt = (function () {
             r.skip = false;
             return;
         }
+        if (QS('body.bbox-open'))
+            return;
 
         var cfg = sread('tooltips');
         if (cfg !== null && cfg != '1')
@@ -590,28 +606,39 @@ var tt = (function () {
         r.el = this;
         var pos = this.getBoundingClientRect(),
             dir = this.getAttribute('ttd') || '',
-            left = pos.left < window.innerWidth / 2,
             top = pos.top < window.innerHeight / 2,
             big = this.className.indexOf(' ttb') !== -1;
 
         if (dir.indexOf('u') + 1) top = false;
         if (dir.indexOf('d') + 1) top = true;
-        if (dir.indexOf('l') + 1) left = false;
-        if (dir.indexOf('r') + 1) left = true;
 
         clmod(r.tt, 'b', big);
-        r.tt.style.top = top ? pos.bottom + 'px' : 'auto';
-        r.tt.style.bottom = top ? 'auto' : (window.innerHeight - pos.top) + 'px';
-        r.tt.style.left = left ? pos.left + 'px' : 'auto';
-        r.tt.style.right = left ? 'auto' : (window.innerWidth - pos.right) + 'px';
+        r.tt.style.left = '0';
+        r.tt.style.top = '0';
 
         r.tt.innerHTML = msg.replace(/\$N/g, "<br />");
+        var tw = r.tt.offsetWidth,
+            x = pos.left + (pos.right - pos.left) / 2 - tw / 2;
+
+        if (x < 0)
+            x = 8;
+
+        if (x + tw >= window.innerWidth - 8) {
+            x = window.innerWidth - tw - 8;
+        }
+
+        r.tt.style.left = x + 'px';
+        r.tt.style.top = top ? pos.bottom + 'px' : 'auto';
+        r.tt.style.bottom = top ? 'auto' : (window.innerHeight - pos.top) + 'px';
+
         r.el.addEventListener('mouseleave', r.hide);
+        window.addEventListener('scroll', r.hide);
         clmod(r.tt, 'show', 1);
     };
 
     r.hide = function (e) {
         ev(e);
+        window.removeEventListener('scroll', r.hide);
         clmod(r.tt, 'show');
         if (r.el)
             r.el.removeEventListener('mouseleave', r.hide);
@@ -619,13 +646,23 @@ var tt = (function () {
 
     if (is_touch && IPHONE) {
         var f1 = r.show,
-            f2 = r.hide;
+            f2 = r.hide,
+            q = [];
+
+        // if an onclick-handler creates a new timer,
+        // iOS 13.1.2 delays the entire handler by up to 401ms,
+        // win by using a shared timer instead
+
+        timer.add(function () {
+            while (q.length && Date.now() >= q[0][0])
+                q.shift()[1]();
+        });
 
         r.show = function () {
-            setTimeout(f1.bind(this), 301);
+            q.push([Date.now() + 100, f1.bind(this)]);
         };
         r.hide = function () {
-            setTimeout(f2.bind(this), 301);
+            q.push([Date.now() + 100, f2.bind(this)]);
         };
     }
 

docs/browser-icons.css

@@ -1,36 +1,3 @@
-/* put filetype icons inline with text
-#ggrid>a>span:before,
-#ggrid>a>span.dir:before {
-	display: inline;
-	line-height: 0;
-	font-size: 1.7em;
-	margin: -.7em .1em -.5em -.6em;
-}
-*/
-
-
-/* move folder icons top-left */
-#ggrid>a>span.dir:before {
-	content: initial;
-}
-#ggrid>a[href$="/"]:before {
-	content: '📂';
-}
-
-
-/* put filetype icons top-left */
-#ggrid>a:before {
-    display: block;
-    position: absolute;
-	padding: .3em 0;
-    margin: -.4em;
-    text-shadow: 0 0 .1em #000;
-	background: linear-gradient(135deg,rgba(255,255,255,0) 50%,rgba(255,255,255,0.2));
-	border-radius: .3em;
-    font-size: 2em;
-}
-
-
 /* video */
 #ggrid>a:is(
 [href$=".mkv"i],

docs/notes.sh

@@ -126,6 +126,10 @@ e=6; s=10; d=~/dev/copyparty/srv/aus; n=1; p=0; e=$((e*60)); rm -rf $d; mkdir $d
 -v srv/aus:aus:r:ce2dsa:ce2ts:cmtp=fgsfds=bin/mtag/sleep.py
 sqlite3 .hist/up2k.db 'select * from mt where k="fgsfds" or k="t:mtp"' | tee /dev/stderr | wc -l
 
+# generate the sine meme
+for ((f=420;f<1200;f++)); do sz=$(ffmpeg -y -f lavfi -i sine=frequency=$f:duration=2 -vf volume=0.1 -ac 1 -ar 44100 -f s16le /dev/shm/a.wav 2>/dev/null; base64 -w0 </dev/shm/a.wav | gzip -c | wc -c); printf '%d %d\n' $f $sz; done | tee /dev/stderr | sort -nrk2,2
+ffmpeg -y -f lavfi -i sine=frequency=1050:duration=2 -vf volume=0.1 -ac 1 -ar 44100 /dev/shm/a.wav
+
 
 ##
 ## vscode

scripts/deps-docker/Dockerfile

@@ -3,7 +3,7 @@ WORKDIR /z
 ENV     ver_asmcrypto=5b994303a9d3e27e0915f72a10b6c2c51535a4dc \
         ver_hashwasm=4.7.0 \
         ver_marked=1.1.0 \
-        ver_ogvjs=1.8.0 \
+        ver_ogvjs=1.8.4 \
         ver_mde=2.14.0 \
         ver_codemirror=5.59.3 \
         ver_fontawesome=5.13.0 \
@@ -74,23 +74,16 @@ RUN     cd hash-wasm \
 # build ogvjs
 RUN     cd ogvjs-$ver_ogvjs \
         && cp -pv \
-            ogv.js \
             ogv-worker-audio.js \
             ogv-demuxer-ogg-wasm.js \
             ogv-demuxer-ogg-wasm.wasm \
-            ogv-demuxer-webm-wasm.js \
-            ogv-demuxer-webm-wasm.wasm \
             ogv-decoder-audio-opus-wasm.js \
             ogv-decoder-audio-opus-wasm.wasm \
             ogv-decoder-audio-vorbis-wasm.js \
             ogv-decoder-audio-vorbis-wasm.wasm \
-            /z/dist
-
-#            ogv-demuxer-ogg.js \
-#            ogv-demuxer-webm.js \
-#            ogv-decoder-audio-opus.js \
-#            ogv-decoder-audio-vorbis.js \
-#            dynamicaudio.swf \
+            /z/dist \
+        && cp -pv \
+            ogv-es2017.js /z/dist/ogv.js
 
 
 # build marked

scripts/deps-docker/zopfli.makefile

@@ -2,7 +2,7 @@ all: $(addsuffix .gz, $(wildcard *.*))
 
 %.gz: %
 	#brotli -q 11 $<
-	pigz -11 -J 34 -I 573 $<
+	pigz -11 -I 573 $<
 
 # pigz -11 -J 34 -I 100 -F < $< > $@.first