fix zip touch events on iOS

README.md

@@ -199,25 +199,28 @@ copyparty can invoke external programs to collect additional metadata for files
 
 # browser support
 
-| feature         | ie6 | ie9 | ie10 | ie11 | ff 52+ | chr 49+ |
+`ie`internet-explorer, `ff`firefox, `chr`chrome, `iOS`iPhone/iPad, `Andr`Android
-| --------------- | --- | --- | ---- | ---- | ------ | ------- |
+
-| browse files    | yep | yep | yep  | yep  | yep    | yep     |
+| feature         | ie6 | ie9 | ie10 | ie11 | ff 52+ | chr 49+ | iOS | Andr |
-| basic uploader  | yep | yep | yep  | yep  | yep    | yep     |
+| --------------- | --- | --- | ---- | ---- | ------ | ------- | --- | ---- |
-| make directory  | yep | yep | yep  | yep  | yep    | yep     |
+| browse files    | yep | yep | yep  | yep  | yep    | yep     | yep | yep  |
-| send message    | yep | yep | yep  | yep  | yep    | yep     |
+| basic uploader  | yep | yep | yep  | yep  | yep    | yep     | yep | yep  |
-| set sort order  |  -  | yep | yep  | yep  | yep    | yep     |
+| make directory  | yep | yep | yep  | yep  | yep    | yep     | yep | yep  |
-| zip selection   |  -  | yep | yep  | yep  | yep    | yep     |
+| send message    | yep | yep | yep  | yep  | yep    | yep     | yep | yep  |
-| directory tree  |  -  |  -  | `*1` | yep  | yep    | yep     |
+| set sort order  |  -  | yep | yep  | yep  | yep    | yep     | yep | yep  |
-| up2k            |  -  |  -  | yep  | yep  | yep    | yep     |
+| zip selection   |  -  | yep | yep  | yep  | yep    | yep     | yep | yep  |
-| icons work      |  -  |  -  | yep  | yep  | yep    | yep     |
+| directory tree  |  -  |  -  | `*1` | yep  | yep    | yep     | yep | yep  |
-| markdown editor |  -  |  -  | yep  | yep  | yep    | yep     |
+| up2k            |  -  |  -  | yep  | yep  | yep    | yep     | yep | yep  |
-| markdown viewer |  -  |  -  | yep  | yep  | yep    | yep     |
+| icons work      |  -  |  -  | yep  | yep  | yep    | yep     | yep | yep  |
-| play mp3/mp4    |  -  | yep | yep  | yep  | yep    | yep     |
+| markdown editor |  -  |  -  | yep  | yep  | yep    | yep     | yep | yep  |
-| play ogg/opus   |  -  |  -  |  -   |  -   | yep    | yep     |
+| markdown viewer |  -  |  -  | yep  | yep  | yep    | yep     | yep | yep  |
+| play mp3/m4a    |  -  | yep | yep  | yep  | yep    | yep     | yep | yep  |
+| play ogg/opus   |  -  |  -  |  -   |  -   | yep    | yep     | `*2` | yep |
 
 * internet explorer 6 to 8 (and netscape 4.0) behave the same
 * firefox 52 and chrome 49 are the last winxp versions
 * `*1` only public folders (login session is dropped) and no history / back-button
+* `*2` using a wasm decoder which can sometimes get stuck and consumes a bit more power
 
 
 # client examples

copyparty/web/browser.css

@@ -243,7 +243,7 @@ a, #files tbody div a:last-child {
 	height: 100%;
 	background: #3c3c3c;
 }
-#wtoggle {
+#wtico {
 	cursor: url(/.cpr/dd/1.png), pointer;
 	animation: cursor 500ms infinite;
 }
@@ -273,24 +273,32 @@ a, #files tbody div a:last-child {
 	padding: .2em 0 0 .07em;
 	color: #fff;
 }
-#wtoggle>span {
+#wzip {
 	display: none;
+	margin-right: .3em;
+	padding-right: .3em;
+	border-right: .1em solid #555;
+}
+#wtoggle,
+#wtoggle * {
+	line-height: 1em;
 }
 #wtoggle.sel {
-	width: 4.27em;
+	width: 6em;
 }
-#wtoggle.sel>span {
+#wtoggle.sel #wzip {
 	display: inline-block;
-	line-height: 0;
 }
-#wtoggle.sel>span a {
+#wtoggle.sel #wzip a {
 	font-size: .4em;
-	margin: -.3em 0;
+	padding: 0 .3em;
+	margin: -.3em .2em;
 	position: relative;
 	display: inline-block;
 }
-#wtoggle.sel>span #selzip {
+#wtoggle.sel #wzip #selzip {
 	top: -.6em;
+	padding: .4em .3em;
 }
 #barpos,
 #barbuf {

copyparty/web/browser.html

@@ -113,12 +113,12 @@
 
     <div id="widget">
         <div id="wtoggle">
-            <span>
+            <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>

copyparty/web/browser.js

@@ -75,7 +75,7 @@ makeSortable(ebi('files'), mp.read_order.bind(mp));
 var widget = (function () {
 	var ret = {};
 	var widget = ebi('widget');
-	var wtoggle = ebi('wtoggle');
+	var wtico = ebi('wtico');
 	var touchmode = false;
 	var side_open = false;
 	var was_paused = true;
@@ -113,14 +113,7 @@ var widget = (function () {
 
 		return false;
 	};
-	if (window.Touch) {
+	wtico.onclick = click_handler;
-		var touch_handler = function (e) {
-			touchmode = true;
-			return ret.toggle(e);
-		};
-		wtoggle.addEventListener('touchstart', touch_handler, false);
-	}
-	wtoggle.onclick = click_handler;
 	return ret;
 })();
 

copyparty/web/util.js

@@ -6,6 +6,9 @@ if (!window['console'])
     };
 
 
+var clickev = window.Touch ? 'touchstart' : 'click';
+
+
 // error handler for mobile devices
 function hcroak(msg) {
     document.body.innerHTML = msg;