v1.0.13

.gitignore

@@ -9,6 +9,7 @@ buildenv/
 build/
 dist/
 sfx/
+py2/
 .venv/
 
 # ide

README.md

@@ -747,7 +747,7 @@ TLDR: yes
 | zip selection   |  -  | yep  | yep  | yep  |  yep  | yep  | yep | yep  |
 | file rename     |  -  | yep  | yep  | yep  |  yep  | yep  | yep | yep  |
 | file cut/paste  |  -  | yep  | yep  | yep  |  yep  | yep  | yep | yep  |
-| navpane         |  -  | `*2` | yep  | yep  |  yep  | yep  | yep | yep  |
+| navpane         |  -  | yep  | yep  | yep  |  yep  | yep  | yep | yep  |
 | image viewer    |  -  | yep  | yep  | yep  |  yep  | yep  | yep | yep  |
 | video player    |  -  | yep  | yep  | yep  |  yep  | yep  | yep | yep  |
 | markdown editor |  -  |  -   | yep  | yep  |  yep  | yep  | yep | yep  |
@@ -759,7 +759,6 @@ TLDR: yes
 * internet explorer 6 to 8 behave the same
 * firefox 52 and chrome 49 are the final winxp versions
 * `*1` yes, but extremely slow (ie10: `1 MiB/s`, ie11: `270 KiB/s`)
-* `*2` causes a full-page refresh on each navigation
 * `*3` using a wasm decoder which consumes a bit more power
 
 quick summary of more eccentric web-browsers trying to view a directory index:

copyparty/__main__.py

@@ -437,7 +437,8 @@ def run_argparse(argv, formatter):
         default=".vq,.aq,vc,ac,res,.fps")
     ap2.add_argument("-mtp", metavar="M=[f,]bin", type=u, action="append", help="read tag M using bin")
 
-    ap2 = ap.add_argument_group('appearance options')
+    ap2 = ap.add_argument_group('ui options')
+    ap2.add_argument("--js-browser", metavar="L", type=u, help="URL to additional JS to include")
     ap2.add_argument("--css-browser", metavar="L", type=u, help="URL to additional CSS to include")
 
     ap2 = ap.add_argument_group('debug options')

copyparty/__version__.py

@@ -1,8 +1,8 @@
 # coding: utf-8
 
-VERSION = (1, 0, 11)
+VERSION = (1, 0, 13)
 CODENAME = "sufficient"
-BUILD_DT = (2021, 10, 18)
+BUILD_DT = (2021, 10, 24)
 
 S_VERSION = ".".join(map(str, VERSION))
 S_BUILD_DT = "{0:04d}-{1:02d}-{2:02d}".format(*BUILD_DT)

copyparty/httpcli.py

@@ -274,6 +274,15 @@ class HttpCli(object):
             except Pebkac:
                 return False
 
+    def permit_caching(self):
+        cache = self.uparam.get("cache")
+        if cache is None:
+            self.out_headers.update(NO_CACHE)
+            return
+
+        n = "604800" if cache == "i" else cache or "69"
+        self.out_headers["Cache-Control"] = "max-age=" + n
+
     def send_headers(self, length, status=200, mime=None, headers=None):
         response = ["{} {} {}".format(self.http_ver, status, HTTPCODE[status])]
 
@@ -1449,10 +1458,8 @@ class HttpCli(object):
 
         if is_compressed:
             self.out_headers["Cache-Control"] = "max-age=573"
-        elif "cache" in self.uparam:
-            self.out_headers["Cache-Control"] = "max-age=69"
         else:
-            self.out_headers.update(NO_CACHE)
+            self.permit_caching()
 
         self.out_headers["Accept-Ranges"] = "bytes"
         self.send_headers(
@@ -1548,6 +1555,7 @@ class HttpCli(object):
         return True
 
     def tx_ico(self, ext, exact=False):
+        self.permit_caching()
         if ext.endswith("/"):
             ext = "folder"
             exact = True
@@ -2216,6 +2224,9 @@ class HttpCli(object):
         if "mth" in vn.flags:
             j2a["def_hcols"] = vn.flags["mth"].split(",")
 
+        if self.args.js_browser:
+            j2a["js"] = self.args.js_browser
+
         if self.args.css_browser:
             j2a["css"] = self.args.css_browser
 

copyparty/up2k.py

@@ -530,7 +530,7 @@ class Up2k(object):
             else:
                 # self.log("file: {}".format(abspath))
                 seen_files[iname] = 1
-                rp = abspath[len(top) + 1 :]
+                rp = abspath[len(top) :].lstrip("/")
                 if WINDOWS:
                     rp = rp.replace("\\", "/").strip("/")
 

copyparty/web/browser.css

@@ -16,7 +16,6 @@ html,body,tr,th,td,#files,a {
 }
 html {
 	color: #ccc;
-	background: #333;
 	font-family: sans-serif;
 	text-shadow: 1px 1px 0px #000;
 }
@@ -36,11 +35,9 @@ pre, code, tt {
 	text-shadow: 1px 1px 0 #000;
 	font-variant: small-caps;
 	font-weight: normal;
-	background: #4c4c4c;
 	display: inline-block;
 	padding: .35em .5em .2em .5em;
 	border-radius: 0 .3em .3em 0;
-	box-shadow: .1em .1em .4em #222;
 	margin: 1.3em 0 0 0;
 	font-size: 1.4em;
 }
@@ -71,7 +68,7 @@ a, #files tbody div a:last-child {
 }
 #files a:hover {
 	color: #fff;
-	background: #161616;
+	background: #111;
 	text-decoration: underline;
 }
 #files thead {
@@ -82,38 +79,23 @@ a, #files tbody div a:last-child {
 	color: #999;
 	font-weight: normal;
 }
-#files tr:hover td {
+#files tbody tr:hover td {
 	background: #1c1c1c;
 }
 #files thead th {
-	padding: .5em .3em .3em .3em;
-	border-right: 2px solid #3c3c3c;
-	border-bottom: 2px solid #444;
-	background: #333;
+	padding: 0 .3em .3em .3em;
+	border-bottom: 1px solid #444;
 	cursor: pointer;
 }
-#files thead th+th {
-	border-left: 2px solid #2a2a2a;
-}
-#files thead th:last-child {
-	border-right: none;
-}
-#files tbody {
-	background: #222;
-}
 #files td {
 	margin: 0;
-	padding: 0 .5em;
-	border-bottom: 1px solid #111;
-	border-left: 1px solid #2c2c2c;
+	padding: .1em .5em;
+	border-left: 1px solid #3c3c3c;
 }
 #files td+td+td {
 	max-width: 30em;
 	overflow: hidden;
 }
-#files tr+tr td {
-	border-top: 1px solid #383838;
-}
 #files tbody td:nth-child(3) {
 	font-family: 'scp', monospace, monospace;
 	text-align: right;
@@ -121,18 +103,15 @@ a, #files tbody div a:last-child {
 	white-space: nowrap;
 }
 #files tbody td:first-child {
-	padding-left: 1.5em;
 	color: #888;
-}
-#files tbody tr:first-child td {
-	padding-top: .9em;
+	text-align: center;
 }
 #files tbody tr:last-child td {
-	padding-bottom: 1.3em;
-	border-bottom: .5em solid #444;
+	border-bottom: 1px solid #444;
 }
 #files tbody tr td:last-child {
 	white-space: nowrap;
+	border-right: 1px solid #3c3c3c;
 }
 #files thead th[style] {
 	width: auto !important;
@@ -163,7 +142,7 @@ a, #files tbody div a:last-child {
 	background: linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,0.2), rgba(0,0,0,0));
 }
 .logue {
-	padding: .2em 1.5em;
+	padding: .2em 0;
 }
 .logue.hidden,
 .logue:empty {
@@ -175,6 +154,21 @@ a, #files tbody div a:last-child {
 #epi.logue {
 	margin: .8em 0;
 }
+#epi.logue.mdo:before {
+	content: 'README.md';
+	text-align: center;
+	display: block;
+	margin-top: -1.5em;
+}
+#epi.logue.mdo {
+	border-top: 1px solid #555;
+	margin-top: 2.5em;
+}
+.mdo>h1:first-child,
+.mdo>h2:first-child,
+.mdo>h3:first-child {
+	margin-top: 1.5rem;
+}
 .mdo {
 	max-width: 52em;
 }
@@ -184,7 +178,6 @@ a, #files tbody div a:last-child {
 }
 #srv_info {
 	color: #a73;
-	background: #333;
 	position: absolute;
 	font-size: .8em;
  	top: .5em;
@@ -286,9 +279,6 @@ html.light #ggrid>a.sel {
 #files tr:focus td:first-child {
 	box-shadow: -.2em .2em 0 #fc0, -.2em -.2em 0 #fc0;
 }
-#files tr:focus+tr td {
-	border-top: 1px solid transparent;
-}
 #widget {
 	position: fixed;
 	font-size: 1.4em;
@@ -310,7 +300,6 @@ html.light #ggrid>a.sel {
 	z-index: 10;
 	width: 100%;
 	height: 100%;
-	background: #3c3c3c;
 }
 #wtgrid,
 #wtico {
@@ -351,7 +340,6 @@ html.light #ggrid>a.sel {
 	line-height: 1em;
 	text-align: center;
 	text-shadow: none;
-	background: #3c3c3c;
 	box-shadow: 0 0 .5em #222;
 	border-radius: .3em 0 0 0;
 	padding: 0 0 0 .1em;
@@ -363,7 +351,7 @@ html.light #ggrid>a.sel {
 #wzip, #wnp {
 	margin-right: .2em;
 	padding-right: .2em;
-	border: 1px solid #555;
+	border: 1px solid #444;
 	border-width: 0 .1em 0 0;
 }
 #wfm.act+#wzip,
@@ -519,36 +507,28 @@ html.light #wfm a:not(.en) {
 	box-shadow: 0 -.15em .2em #000 inset;
 	padding-bottom: .3em;
 }
-#ops,
-.opbox,
-#u2etas {
-	border: 1px solid #3a3a3a;
-	box-shadow: 0 0 1em #222 inset;
-}
 #ops {
-	background: #333;
 	margin: 1.7em 1.5em 0 1.5em;
 	padding: .3em .6em;
 	border-radius: .3em;
-	border-width: .15em 0;
+	border-width: 1px 0;
 	white-space: nowrap;
 }
 .opbox {
-	background: #2d2d2d;
 	margin: 1.5em 0 0 0;
 	padding: .5em;
-	border-radius: 0 1em 1em 0;
-	border-width: .15em .3em .3em 0;
+	border-radius: 0 .3em .3em 0;
+	border-width: 1px 1px 1px 0;
 	max-width: 41em;
+	max-width: min(41em, calc(100% - 2.6em));
 }
 .opbox input {
 	margin: .5em;
 }
 .opview input[type=text] {
-	background: #383838;
 	color: #fff;
 	border: none;
-	box-shadow: 0 0 .3em #222;
+	box-shadow: 0 0 .3em #181818;
 	border-bottom: 1px solid #fc5;
 	border-radius: .2em;
 	padding: .2em .3em;
@@ -565,14 +545,12 @@ html.light .opview input[type="text"].err {
 input[type="checkbox"]+label {
 	color: #f5a;
 }
+input[type="radio"]:checked+label,
 input[type="checkbox"]:checked+label {
 	color: #fc5;
 }
-input[type="radio"]:checked+label {
-	color: #fc0;
-}
-html.light input[type="radio"]:checked+label {
-	color: #07c;
+.opview input.i {
+	width: calc(100% - 16.2em);
 }
 input.eq_gain {
 	width: 3em;
@@ -602,11 +580,6 @@ input.eq_gain {
 
 
 #srch_form {
-	border: 1px solid #3a3a3a;
-	box-shadow: 0 0 1em #222 inset;
-	background: #2d2d2d;
-	border-radius: .4em;
-	margin: 1.4em;
 	margin-bottom: 0;
 	padding: 0 .5em .5em 0;
 }
@@ -663,8 +636,8 @@ input.eq_gain {
 	width: 100%;
 }
 #wrap {
-	margin-top: 2em;
-	min-height: 90vh;
+	margin: 1.8em 1.5em 0 1.5em;
+	min-height: 70vh;
 	padding-bottom: 5em;
 }
 #tree {
@@ -678,19 +651,23 @@ input.eq_gain {
 	-ms-scroll-chaining: none;
 	overscroll-behavior-y: none;
 	scrollbar-color: #eb0 #333;
+	border: 1px solid #333;
+	box-shadow: 0 0 1em #181818;
 }
 #treeh {
-	background: #333;
 	position: sticky;
 	z-index: 1;
 	top: 0;
 	height: 2.2em;
 	line-height: 2.2em;
-	border-bottom: 1px solid #555;
+	border-bottom: 1px solid #111;
 	overflow: hidden;
 }
-#thx_ff {
-	padding: 5em 0;
+#tree, #treeh {
+	border-radius: 0 .3em 0 0;
+}
+.np_open #thx_ff {
+	padding: 4.5em 0;
 	/* widget */
 }
 #tree::-webkit-scrollbar-track,
@@ -711,8 +688,6 @@ input.eq_gain {
 .btn {
 	padding: .2em .4em;
 	font-size: 1.2em;
-	background: #2a2a2a;
-	box-shadow: 0 .1em .2em #222 inset;
 	border-radius: .3em;
 	margin: .2em;
 	white-space: pre;
@@ -741,13 +716,13 @@ input.eq_gain {
 	margin: 0;
 }
 #tree ul {
-	border-left: .2em solid #555;
+	border-left: .2em solid #444;
 }
 #tree li {
 	margin-left: 1em;
 	list-style: none;
-	border-top: 1px solid #4c4c4c;
-	border-bottom: 1px solid #222;
+	border-top: 1px solid #444;
+	border-bottom: 1px solid #111;
 }
 #tree li:last-child {
 	border-bottom: none;
@@ -770,7 +745,7 @@ input.eq_gain {
 	white-space: nowrap;
 }
 #tree.nowrap #treeul a+a:hover {
-	background: rgba(34, 34, 34, 0.67);
+	background: rgba(16, 16, 16, 0.67);
 	min-width: calc(var(--nav-sz) - 2em);
 	width: auto;
 }
@@ -779,7 +754,7 @@ html.light #tree.nowrap #treeul a+a:hover {
 	color: #000;
 }
 #treeul a+a:hover {
-	background: #222;
+	background: #181818;
 	color: #fff;
 }
 #treeul a:first-child {
@@ -818,22 +793,23 @@ html.light #tree.nowrap #treeul a+a:hover {
 #files td:nth-child(2n) {
 	color: #f5a;
 }
-#files tr.play td,
-#files tr.play div a {
+#files tbody tr.play td,
+#files tbody tr.play div a {
 	background: #fc4;
 	border-color: transparent;
 	color: #400;
 	text-shadow: none;
 }
-#files tr.play a {
+#files tbody tr.play a {
 	color: inherit;
 }
-#files tr.play a:hover {
+#files tbody tr.play a:hover {
 	color: #300;
 	background: #fea;
 }
 .opwide,
-#op_unpost {
+#op_unpost,
+#srch_form {
 	max-width: none;
 	margin-right: 1.5em;
 }
@@ -877,12 +853,10 @@ html.light #tree.nowrap #treeul a+a:hover {
 	display: none;
 }
 #ghead {
-	background: #3c3c3c;
-	border: 1px solid #444;
 	border-radius: .3em;
 	padding: .2em .5em;
 	line-height: 2.3em;
-	margin: 0 1.5em 1em .4em;
+	margin-bottom: 1em;
 	position: sticky;
 	top: -.3em;
 	z-index: 1;
@@ -901,6 +875,7 @@ html.light #ghead {
 }
 #ggrid {
 	padding-top: .5em;
+	margin: 0 -.5em;
 }
 #ggrid>a>span {
 	overflow: hidden;
@@ -916,17 +891,10 @@ html.light #ghead {
 	width: var(--grid-sz);
 	vertical-align: top;
 	overflow-wrap: break-word;
-	background: #383838;
-	border: 1px solid #444;
-	border-top: 1px solid #555;
-	box-shadow: 0 .1em .2em #222;
 	border-radius: .3em;
 	padding: .3em;
 	margin: .5em;
 }
-#ggrid>a[tt] {
-	background: linear-gradient(135deg, #383838 95%, #555 95%);
-}
 #ggrid>a img {
 	border-radius: .2em;
 	max-width: 10em;
@@ -949,25 +917,6 @@ html.light #ghead {
 	border-radius: .3em;
 	font-size: 2em;
 }
-#ggrid>a:hover {
-	background: #444;
-	border-color: #555;
-	color: #fd9;
-}
-html.light #ggrid>a {
-	background: #f7f7f7;
-	border-color: #ddd;
-	box-shadow: 0 .1em .2em #ddd;
-}
-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;
-	box-shadow: 0 .1em .5em #aaa;
-}
 #op_unpost {
 	padding: 1em;
 }
@@ -988,7 +937,6 @@ html.light #ggrid>a:hover {
 	max-height: calc(100% - 2em);
 	border-bottom: .5em solid #999;
 	box-shadow: 0 0 5em rgba(0,0,0,0.8);
-	background: #333;
 	padding: 1em;
 	z-index: 765;
 }
@@ -1072,6 +1020,77 @@ a.btn,
 
 
 
+
+
+
+
+
+html,
+#rui,
+#files td,
+#files thead th,
+#bbox-halp,
+#u2notbtn,
+#srv_info {
+	background: #222;
+}
+#ops,
+.opbox,
+#path,
+#srch_form,
+#ghead {
+	background: #2b2b2b;
+	border: 1px solid #333;
+	box-shadow: 0 0 .3em #111;
+}
+#files tr:nth-child(2n+1) td {
+	background: #282828;
+}
+#tree,
+#treeh {
+	background: #2b2b2b;
+}
+#wtoggle,
+#widgeti {
+	background: #333;
+}
+.btn,
+.opview input[type=text] {
+	background: #383838;
+}
+
+
+
+
+
+#ggrid>a {
+	background: #2c2c2c;
+	border: 1px solid #383838;
+	border-top: 1px solid #444;
+	box-shadow: 0 .1em .2em #181818;
+}
+#ggrid>a[tt] {
+	background: linear-gradient(135deg, #2c2c2c 95%, #444 95%);
+}
+#ggrid>a:hover {
+	background: #383838;
+	border-color: #555;
+	color: #fd9;
+}
+html.light #ggrid>a {
+	background: #f7f7f7;
+	border-color: #ddd;
+	box-shadow: 0 .1em .2em #ddd;
+}
+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;
+	box-shadow: 0 .1em .5em #aaa;
+}
 
 
 
@@ -1079,15 +1098,17 @@ a.btn,
 
 html.light {
 	color: #333;
-	background: #eee;
+	background: #eaeaea;
 	text-shadow: none;
 }
 html.light #ops,
 html.light .opbox,
+html.light #path,
 html.light #srch_form,
+html.light #ghead,
 html.light #u2etas {
 	background: #f7f7f7;
-	box-shadow: 0 0 .3em #ddd;
+	box-shadow: 0 0 .3em #ccc;
 	border-color: #f7f7f7;
 }
 html.light #ops a.act {
@@ -1150,25 +1171,19 @@ html.light #ops a,
 html.light #files tbody div a:last-child {
 	color: #06a;
 }
-html.light #files tbody {
+html.light #files thead th {
+	background: #eaeaea;
+	border-color: #ccc;
+}
+html.light #files tbody td {
+	background: #eee;
+	border-color: #ccc;
+}
+html.light #files tr:nth-child(2n+1) td {
 	background: #f7f7f7;
 }
-html.light #files {
-	box-shadow: 0 0 .3em #ccc;
-}
-html.light #files thead th {
-	background: #eee;
-	border: 1px solid #ccc;
-	border-top: none;
-}
-html.light #files thead th+th {
-	border-left: 1px solid #f7f7f7;
-}
-html.light #files td {
-	border-color: #fff #fff #ddd #ddd;
-}
 html.light #files tbody tr:last-child td {
-	border-bottom: .2em solid #ccc;
+	border-bottom: 1px solid #ccc;
 }
 html.light #files tr:focus td {
 	background: #fff;
@@ -1242,6 +1257,10 @@ html.light #files tr.sel a.play.act {
 html.light input[type="checkbox"] + label {
 	color: #333;
 }
+html.light input[type="radio"]:checked + label,
+html.light input[type="checkbox"]:checked + label {
+	color: #07c; 
+}
 html.light .opwide>div {
 	border-color: #ccc;
 }
@@ -1277,20 +1296,24 @@ html.light #files a:hover,
 html.light #files tr.sel a:hover {
 	color: #000;
 	background: #fff;
+	text-decoration: underline;
 }
 html.light #treeh {
-	background: #eee;
+	background: #f7f7f7;
 	border-color: #ddd;
 }
 html.light #tree {
-	scrollbar-color: #a70 #ddd;
+	border-color: #ddd;
+	box-shadow: 0 0 1em #ddd;
+	background: #f7f7f7;
+	scrollbar-color: #490 #ddd;
 }
 html.light #tree::-webkit-scrollbar-track,
 html.light #tree::-webkit-scrollbar {
 	background: #ddd;
 }
-#tree::-webkit-scrollbar-thumb {
-	background: #da0;
+html.light #tree::-webkit-scrollbar-thumb {
+	background: #490;
 }
 
 
@@ -1369,7 +1392,7 @@ html.light #tree::-webkit-scrollbar {
 	box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
 }
 .full-image video {
-	background: #333;
+	background: #222;
 }
 .full-image figcaption {
 	display: block;
@@ -1465,7 +1488,6 @@ html.light #bbox-overlay figcaption a {
 }
 #bbox-halp {
 	color: #fff;
-	background: #333;
 	position: absolute;
 	top: 0;
 	left: 0;
@@ -1673,6 +1695,10 @@ html.light #u2err.err {
 	cursor: pointer;
 	box-shadow: .4em .4em 0 #111;
 }
+#u2conf.ww #u2btn {
+	font-size: 1.3em;
+	margin-right: .5em;
+}
 #op_up2k.srch #u2btn {
 	background: linear-gradient(to bottom, #ca3 0%, #fd8 50%, #fc6 51%, #b92 100%);
 	text-shadow: 1px 1px 1px #fc6;
@@ -1691,7 +1717,6 @@ html.light #u2err.err {
 #u2notbtn {
 	display: none;
 	text-align: center;
-	background: #333;
 	padding-top: 1em;
 }
 #u2notbtn * {
@@ -1724,10 +1749,12 @@ html.light #u2err.err {
 	width: auto;
 }
 #u2tab tbody tr:hover td {
-	background: #222;
+	background: #333;
 }
 #u2etas {
-	background: #333;
+	background: #1c1c1c;
+	border: 1px solid #282828;
+	border-width: .1em 0;
 	padding: .2em .5em;
 	border-radius: .5em;
 	border-width: .25em 0;
@@ -1766,16 +1793,22 @@ html.light #u2err.err {
 	width: 44em;
 	text-align: left;
 }
+#u2cards.ww {
+	display: inline-block;
+}
 #u2etaw.w {
 	width: 52em;
 	text-align: right;
 	margin: 3em auto -2.7em auto;
 }
+#u2etaw.ww {
+	margin: 0 2em 1em 2em;
+}
 #u2cards a {
 	padding: .2em 1em;
 	border: 1px solid #777;
 	border-width: 0 0 1px 0;
-	background: linear-gradient(to bottom, #333, #222);
+	background: linear-gradient(to bottom, #222, #2b2b2b);
 }
 #u2cards a:first-child {
 	border-radius: .4em 0 0 0;
@@ -1788,9 +1821,9 @@ html.light #u2err.err {
 	border-width: 1px 1px .1em 1px;
 	border-radius: .3em .3em 0 0;
 	margin-left: -1px;
-	background: linear-gradient(to bottom, #464, #333 80%);
+	background: linear-gradient(to bottom, #353, #222 80%);
 	box-shadow: 0 -.17em .67em #280;
-	border-color: #7c5 #583 #333 #583;
+	border-color: #7c5 #583 #222 #583;
 	position: relative;
 	color: #fd7;
 }
@@ -1801,10 +1834,17 @@ html.light #u2err.err {
 	margin: 1em auto;
 	width: 30em;
 }
-#u2conf.has_btn {
+#u2conf.w {
 	width: 48em;
 }
-#u2conf * {
+#u2conf.ww {
+	width: 74em;
+}
+#u2conf.ww #u2c3w {
+	width: 29em;
+}
+#u2conf .c,
+#u2conf .c * {
 	text-align: center;
 	line-height: 1em;
 	margin: 0;
@@ -1824,7 +1864,7 @@ html.light #u2err.err {
 #u2conf .txtbox.err {
 	background: #922;
 }
-#u2conf a {
+#u2conf a.b {
 	color: #fff;
 	background: #c38;
 	text-decoration: none;
@@ -1838,10 +1878,10 @@ html.light #u2err.err {
 	position: relative;
 	bottom: -0.08em;
 }
-#u2conf input+a {
+#u2conf input+a.b {
 	background: #d80;
 }
-#u2conf label {
+#u2conf .c label {
 	font-size: 1.6em;
 	width: 2em;
 	height: 1em;

copyparty/web/browser.html

@@ -18,9 +18,9 @@
 
 	<div id="op_search" class="opview">
 		{%- if have_tags_idx %}
-		<div id="srch_form" class="tags"></div>
+		<div id="srch_form" class="tags opbox"></div>
 		{%- else %}
-		<div id="srch_form"></div>
+		<div id="srch_form" class="opbox"></div>
 		{%- endif %}
 		<div id="srch_q"></div>
 	</div>
@@ -31,7 +31,7 @@
 		<div id="u2err"></div>
 		<form method="post" enctype="multipart/form-data" accept-charset="utf-8" action="{{ url_suf }}">
 			<input type="hidden" name="act" value="bput" />
-			<input type="file" name="f" multiple><br />
+			<input type="file" name="f" multiple /><br />
 			<input type="submit" value="start upload">
 		</form>
 	</div>
@@ -39,7 +39,7 @@
 	<div id="op_mkdir" class="opview opbox act">
 		<form method="post" enctype="multipart/form-data" accept-charset="utf-8" action="{{ url_suf }}">
 			<input type="hidden" name="act" value="mkdir" />
-			📂<input type="text" name="name" size="30">
+			📂<input type="text" name="name" class="i">
 			<input type="submit" value="make directory">
 		</form>
 	</div>
@@ -47,15 +47,15 @@
 	<div id="op_new_md" class="opview opbox">
 		<form method="post" enctype="multipart/form-data" accept-charset="utf-8" action="{{ url_suf }}">
 			<input type="hidden" name="act" value="new_md" />
-			📝<input type="text" name="name" size="30">
+			📝<input type="text" name="name" class="i">
 			<input type="submit" value="new markdown doc">
 		</form>
 	</div>
 
 	<div id="op_msg" class="opview opbox act">
 		<form method="post" enctype="application/x-www-form-urlencoded" accept-charset="utf-8" action="{{ url_suf }}">
-			📟<input type="text" name="msg" size="30">
-			<input type="submit" value="send msg to server log">
+			📟<input type="text" name="msg" class="i">
+			<input type="submit" value="send msg to srv log">
 		</form>
 	</div>
 
@@ -141,6 +141,9 @@
 	<script src="/.cpr/util.js?_={{ ts }}"></script>
 	<script src="/.cpr/browser.js?_={{ ts }}"></script>
 	<script src="/.cpr/up2k.js?_={{ ts }}"></script>
+	{%- if js %}
+	<script src="{{ js }}?_={{ ts }}"></script>
+	{%- endif %}
 </body>
 
 </html>

copyparty/web/browser.js

@@ -61,28 +61,29 @@ ebi('op_up2k').innerHTML = (
 
 	'<table id="u2conf">\n' +
 	'	<tr>\n' +
-	'		<td><br />parallel uploads:</td>\n' +
-	'		<td rowspan="2">\n' +
+	'		<td class="c"><br />parallel uploads:</td>\n' +
+	'		<td class="c" rowspan="2">\n' +
 	'			<input type="checkbox" id="multitask" />\n' +
 	'			<label for="multitask" tt="continue hashing other files while uploading">🏃</label>\n' +
 	'		</td>\n' +
-	'		<td rowspan="2">\n' +
+	'		<td class="c" rowspan="2">\n' +
 	'			<input type="checkbox" id="ask_up" />\n' +
 	'			<label for="ask_up" tt="ask for confirmation before upload starts">💭</label>\n' +
 	'		</td>\n' +
 	(have_up2k_idx ? (
-		'		<td data-perm="read" rowspan="2">\n' +
+		'		<td class="c" data-perm="read" rowspan="2">\n' +
 		'			<input type="checkbox" id="fsearch" />\n' +
 		'			<label for="fsearch" tt="don\'t actually upload, instead check if the files already $N exist on the server (will scan all folders you can read)">🔎</label>\n' +
 		'		</td>\n'
 	) : '') +
 	'		<td data-perm="read" rowspan="2" id="u2btn_cw"></td>\n' +
+	'		<td data-perm="read" rowspan="2" id="u2c3w"></td>\n' +
 	'	</tr>\n' +
 	'	<tr>\n' +
-	'		<td>\n' +
-	'			<a href="#" id="nthread_sub">&ndash;</a><input\n' +
+	'		<td class="c">\n' +
+	'			<a href="#" class="b" id="nthread_sub">&ndash;</a><input\n' +
 	'				class="txtbox" id="nthread" value="2" tt="pause uploads by setting it to 0"/><a\n' +
-	'				href="#" id="nthread_add">+</a><br />&nbsp;\n' +
+	'				href="#" class="b" id="nthread_add">+</a><br />&nbsp;\n' +
 	'		</td>\n' +
 	'	</tr>\n' +
 	'</table>\n' +
@@ -98,6 +99,8 @@ ebi('op_up2k').innerHTML = (
 	'	</div>\n' +
 	'</div>\n' +
 
+	'<div id="u2c3t">\n' +
+
 	'<div id="u2etaw"><div id="u2etas"><div class="o">\n' +
 	'	hash: <span id="u2etah" tt="average &lt;em&gt;hashing&lt;/em&gt; speed, and estimated time until finish">(no uploads are queued yet)</span><br />\n' +
 	'	send: <span id="u2etau" tt="average &lt;em&gt;upload&lt;/em&gt; speed and estimated time until finish">(no uploads are queued yet)</span><br />\n' +
@@ -112,6 +115,8 @@ ebi('op_up2k').innerHTML = (
 	'	href="#" act="q" tt="idle, pending">que <span>0</span></a>\n' +
 	'</div>\n' +
 
+	'</div>\n' +
+
 	'<table id="u2tab">\n' +
 	'	<thead>\n' +
 	'		<tr>\n' +
@@ -263,19 +268,42 @@ function goto(dest) {
 }
 
 
-var have_webp = null;
+var have_webp = sread('have_webp');
 (function () {
+	if (have_webp !== null)
+		return;
+
 	var img = new Image();
 	img.onload = function () {
 		have_webp = img.width > 0 && img.height > 0;
+		swrite('have_webp', 'ya');
 	};
 	img.onerror = function () {
 		have_webp = false;
+		swrite('have_webp', '');
 	};
 	img.src = "data:image/webp;base64,UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA==";
 })();
 
 
+function set_files_html(html) {
+	var files = ebi('files');
+	try {
+		files.innerHTML = html;
+		return files;
+	}
+	catch (e) {
+		var par = files.parentNode;
+		par.removeChild(files);
+		files = mknod('div');
+		files.innerHTML = '<table id="files">' + html + '</table>';
+		par.insertBefore(files.childNodes[0], ebi('epi'));
+		files = ebi('files');
+		return files;
+	}
+}
+
+
 var mpl = (function () {
 	var have_mctl = 'mediaSession' in navigator && window.MediaMetadata;
 
@@ -593,6 +621,7 @@ var widget = (function () {
 		if (r.is_open)
 			return false;
 
+		clmod(document.documentElement, 'np_open', 1);
 		widget.className = 'open';
 		r.is_open = true;
 		return true;
@@ -601,6 +630,7 @@ var widget = (function () {
 		if (!r.is_open)
 			return false;
 
+		clmod(document.documentElement, 'np_open');
 		widget.className = '';
 		r.is_open = false;
 		return true;
@@ -1041,8 +1071,8 @@ var need_ogv = true;
 try {
 	need_ogv = new Audio().canPlayType('audio/ogg; codecs=opus') !== 'probably';
 
-	if (/ Edge\//.exec(navigator.userAgent + ''))
-		need_ogv = true;
+	if (document.documentMode)
+		need_ogv = false;  // ie8-11
 }
 catch (ex) { }
 
@@ -2287,15 +2317,6 @@ var thegrid = (function () {
 	for (var a = 0; a < links.length; a++)
 		links[a].onclick = btnclick;
 
-	bcfg_bind(r, 'thumbs', 'thumbs', true, r.setdirty);
-	bcfg_bind(r, 'sel', 'gridsel', false, r.loadsel);
-	bcfg_bind(r, 'en', 'griden', false, function (v) {
-		v ? loadgrid() : ungrid();
-		pbar.onresize();
-		vbar.onresize();
-	});
-	ebi('wtgrid').onclick = ebi('griden').onclick;
-
 	r.setvis = function (vis) {
 		(r.en ? gfiles : lfiles).style.display = vis ? '' : 'none';
 	};
@@ -2348,21 +2369,12 @@ var thegrid = (function () {
 			td = oth.closest('td').nextSibling,
 			tr = td.parentNode;
 
-		if (href.endsWith('/')) {
-			var ta = QSA('#treeul a.hl+ul>li>a+a'),
-				txt = oth.textContent.slice(0, -1);
-
-			for (var a = 0, aa = ta.length; a < aa; a++) {
-				if (ta[a].textContent == txt) {
-					in_tree = ta[a];
-					break;
-				}
-			}
-		}
+		if (href.endsWith('/'))
+			in_tree = treectl.find(oth.textContent.slice(0, -1));
 
 		if (r.sel) {
 			td.click();
-			this.setAttribute('class', tr.getAttribute('class'));
+			clmod(this, 'sel', clgot(tr, 'sel'));
 		}
 		else if (widget.is_open && aplay)
 			aplay.click();
@@ -2485,9 +2497,11 @@ var thegrid = (function () {
 				}
 				ihref = '/.cpr/ico/' + ihref.slice(0, -1);
 			}
+			ihref += (ihref.indexOf('?') > 0 ? '&' : '?') + 'cache=i';
 
 			html.push('<a href="' + ohref + '" ref="' + ref +
-				'"' + ac + ' ttt="' + esc(name) + '"><img src="' +
+				'"' + ac + ' ttt="' + esc(name) + '"><img style="height:' +
+				(r.sz / 1.25) + 'em" onload="th_onload(this)" src="' +
 				ihref + '" /><span' + ac + '>' + ao.innerHTML + '</span></a>');
 		}
 		ebi('ggrid').innerHTML = html.join('\n');
@@ -2525,6 +2539,15 @@ var thegrid = (function () {
 		})[0];
 	};
 
+	bcfg_bind(r, 'thumbs', 'thumbs', true, r.setdirty);
+	bcfg_bind(r, 'sel', 'gridsel', false, r.loadsel);
+	bcfg_bind(r, 'en', 'griden', false, function (v) {
+		v ? loadgrid() : ungrid();
+		pbar.onresize();
+		vbar.onresize();
+	});
+	ebi('wtgrid').onclick = ebi('griden').onclick;
+
 	setTimeout(function () {
 		import_js('/.cpr/baguettebox.js', r.bagit);
 	}, 1);
@@ -2537,6 +2560,11 @@ var thegrid = (function () {
 })();
 
 
+function th_onload(el) {
+	el.style.height = '';
+}
+
+
 function tree_scrollto(e) {
 	ev(e);
 	var act = QS('#treeul a.hl'),
@@ -2936,7 +2964,7 @@ document.onkeydown = function (e) {
 
 		var html = mk_files_header(tagord);
 		html.push('<tbody>');
-		html.push('<tr><td>-</td><td colspan="42"><a href="#" id="unsearch">! close search results</a></td></tr>');
+		html.push('<tr><td>-</td><td colspan="42"><a href="#" id="unsearch"><big style="font-weight:bold">[❌] close search results</big></a></td></tr>');
 		for (var a = 0; a < res.hits.length; a++) {
 			var r = res.hits[a],
 				ts = parseInt(r.ts),
@@ -2973,7 +3001,7 @@ document.onkeydown = function (e) {
 			orig_url = get_evpath();
 		}
 
-		ofiles.innerHTML = html.join('\n');
+		ofiles = set_files_html(html.join('\n'));
 		ofiles.setAttribute("ts", this.ts);
 		ofiles.setAttribute("q_raw", this.q_raw);
 		set_vq();
@@ -2988,7 +3016,7 @@ document.onkeydown = function (e) {
 	function unsearch(e) {
 		ev(e);
 		treectl.show();
-		ebi('files').innerHTML = orig_html;
+		set_files_html(orig_html);
 		ebi('files').removeAttribute('q_raw');
 		orig_html = null;
 		sethash('');
@@ -3051,14 +3079,14 @@ var treectl = (function () {
 		swrite('entreed', 'na');
 
 		treectl.hide();
-		ebi('path').style.display = 'inline-block';
+		ebi('path').style.display = '';
 	}
 
 	treectl.hide = function () {
 		treectl.hidden = true;
 		ebi('path').style.display = 'none';
 		ebi('tree').style.display = 'none';
-		ebi('wrap').style.marginLeft = '0';
+		ebi('wrap').style.marginLeft = '';
 		window.removeEventListener('resize', onresize);
 		window.removeEventListener('scroll', onscroll);
 	}
@@ -3109,7 +3137,7 @@ var treectl = (function () {
 				treeh = winh - atop;
 
 			tree.style.top = top + 'px';
-			tree.style.height = treeh < 10 ? '' : treeh + 'px';
+			tree.style.height = treeh < 10 ? '' : Math.floor(treeh - 2) + 'px';
 		}
 	}
 	timer.add(onscroll2, true);
@@ -3127,20 +3155,30 @@ var treectl = (function () {
 			if (!QS(q))
 				break;
 		}
-		var w = (treesz + Math.max(0, nq)) + 'em';
+		var iw = (treesz + Math.max(0, nq)),
+			w = iw + 'em',
+			w2 = (iw + 2) + 'em';
+
 		try {
 			document.documentElement.style.setProperty('--nav-sz', w);
 		}
 		catch (ex) { }
 		ebi('tree').style.width = w;
-		ebi('wrap').style.marginLeft = w;
+		ebi('wrap').style.marginLeft = w2;
 		onscroll();
 	}
 
+	treectl.find = function (txt) {
+		var ta = QSA('#treeul a.hl+ul>li>a+a');
+		for (var a = 0, aa = ta.length; a < aa; a++)
+			if (ta[a].textContent == txt)
+				return ta[a];
+	};
+
 	treectl.goto = function (url, push) {
 		get_tree("", url, true);
 		reqls(url, push, true);
-	}
+	};
 
 	function get_tree(top, dst, rst) {
 		var xhr = new XMLHttpRequest();
@@ -3352,13 +3390,7 @@ var treectl = (function () {
 		}
 		html.push('</tbody>');
 		html = html.join('\n');
-		try {
-			ebi('files').innerHTML = html;
-		}
-		catch (ex) { //ie9
-			window.location.href = this.top;
-			return;
-		}
+		set_files_html(html);
 
 		if (this.hpush)
 			hist_push(this.top);
@@ -3448,10 +3480,7 @@ var treectl = (function () {
 		treectl.goto(url.pathname);
 	};
 
-	if (window.history && history.pushState) {
-		hist_replace(get_evpath() + window.location.hash);
-	}
-
+	hist_replace(get_evpath() + window.location.hash);
 	treectl.onscroll = onscroll;
 	return treectl;
 })();
@@ -4399,6 +4428,20 @@ function goto_unpost(e) {
 }
 
 
+ebi('files').onclick = function (e) {
+	var tgt = e.target.closest('a[id]');
+	if (!tgt || tgt.getAttribute('id').indexOf('f-') !== 0 || !tgt.textContent.endsWith('/'))
+		return;
+
+	var el = treectl.find(tgt.textContent.slice(0, -1));
+	if (!el)
+		return;
+
+	ev(e);
+	el.click();
+}
+
+
 function reload_mp() {
 	if (mp && mp.au) {
 		mp.au.pause();

copyparty/web/ui.css

@@ -11,9 +11,9 @@ html {
 	max-width: 34em;
 	max-width: min(34em, 90%);
 	max-width: min(34em, calc(100% - 7em));
-	background: #222;
+	background: #333;
 	border: 0 solid #777;
-	box-shadow: 0 .2em .5em #222;
+	box-shadow: 0 .2em .5em #111;
 	border-radius: .4em;
 	z-index: 9001;
 }

copyparty/web/up2k.js

@@ -246,7 +246,7 @@ function U2pvis(act, btns) {
 
         obj.innerHTML = fo.hp;
         obj.style.color = '#fff';
-        obj.style.background = 'linear-gradient(90deg, #025, #06a ' + o1 + '%, #09d ' + o2 + '%, #333 ' + o3 + '%, #333 99%, #777)';
+        obj.style.background = 'linear-gradient(90deg, #025, #06a ' + o1 + '%, #09d ' + o2 + '%, #222 ' + o3 + '%, #222 99%, #555)';
     };
 
     r.prog = function (fobj, nchunk, cbd) {
@@ -303,7 +303,7 @@ function U2pvis(act, btns) {
 
         obj.innerHTML = fo.hp;
         obj.style.color = '#fff';
-        obj.style.background = 'linear-gradient(90deg, #050, #270 ' + o1 + '%, #4b0 ' + o2 + '%, #333 ' + o3 + '%, #333 99%, #777)';
+        obj.style.background = 'linear-gradient(90deg, #050, #270 ' + o1 + '%, #4b0 ' + o2 + '%, #222 ' + o3 + '%, #222 99%, #555)';
     };
 
     r.move = function (nfile, newcat) {
@@ -1827,16 +1827,28 @@ function up2k_init(subtle) {
             wpx = window.innerWidth,
             fpx = parseInt(getComputedStyle(bar)['font-size']),
             wem = wpx * 1.0 / fpx,
-            wide = wem > 54,
-            parent = ebi(wide && has(perms, 'write') ? 'u2btn_cw' : 'u2btn_ct'),
+            wide = wem > 54 ? 'w' : '',
+            write = has(perms, 'write'),
+            parent = ebi(wide && write ? 'u2btn_cw' : 'u2btn_ct'),
             btn = ebi('u2btn');
 
         //console.log([wpx, fpx, wem]);
         if (btn.parentNode !== parent) {
             parent.appendChild(btn);
-            ebi('u2conf').setAttribute('class', wide ? 'has_btn' : '');
-            ebi('u2cards').setAttribute('class', wide ? 'w' : '');
-            ebi('u2etaw').setAttribute('class', wide ? 'w' : '');
+            ebi('u2conf').setAttribute('class', wide);
+            ebi('u2cards').setAttribute('class', wide);
+            ebi('u2etaw').setAttribute('class', wide);
+        }
+
+        wide = wem > 78 ? 'ww' : wide;
+        parent = ebi(wide == 'ww' && write ? 'u2c3w' : 'u2c3t');
+        var its = [ebi('u2etaw'), ebi('u2cards')];
+        if (its[0].parentNode !== parent) {
+            ebi('u2conf').setAttribute('class', wide);
+            for (var a = 0; a < 2; a++) {
+                parent.appendChild(its[a]);
+                its[a].setAttribute('class', wide);
+            }
         }
     }
     window.addEventListener('resize', onresize);
@@ -1849,7 +1861,7 @@ function up2k_init(subtle) {
         setTimeout(onresize, 500);
     }
 
-    var o = QSA('#u2conf *[tt]');
+    var o = QSA('#u2conf .c *[tt]');
     for (var a = o.length - 1; a >= 0; a--) {
         o[a].parentNode.getElementsByTagName('input')[0].setAttribute('tt', o[a].getAttribute('tt'));
     }

copyparty/web/util.js

@@ -146,7 +146,7 @@ function vis_exh(msg, url, lineNo, columnNo, error) {
 
             var s = mknod('style');
             s.innerHTML = (
-                '#exbox{background:#333;color:#ddd;font-family:sans-serif;font-size:0.8em;padding:0 1em 1em 1em;z-index:80386;position:fixed;top:0;left:0;right:0;bottom:0;width:100%;height:100%;overflow:auto;width:calc(100% - 2em)} ' +
+                '#exbox{background:#222;color:#ddd;font-family:sans-serif;font-size:0.8em;padding:0 1em 1em 1em;z-index:80386;position:fixed;top:0;left:0;right:0;bottom:0;width:100%;height:100%;overflow:auto;width:calc(100% - 2em)} ' +
                 '#exbox,#exbox *{line-height:1.5em;overflow-wrap:break-word} ' +
                 '#exbox code{color:#bf7;background:#222;padding:.1em;margin:.2em;font-size:1.1em;font-family:monospace,monospace} ' +
                 '#exbox a{text-decoration:underline;color:#fc0} ' +
@@ -715,12 +715,14 @@ function scfg_bind(obj, oname, cname, defval, cb) {
 
 function hist_push(url) {
     console.log("h-push " + url);
-    history.pushState(url, url, url);
+    if (window.history && history.pushState)
+        history.pushState(url, url, url);
 }
 
 function hist_replace(url) {
     console.log("h-repl " + url);
-    history.replaceState(url, url, url);
+    if (window.history && history.replaceState)
+        history.replaceState(url, url, url);
 }
 
 function sethash(hv) {
@@ -1253,7 +1255,7 @@ var favico = (function () {
         clearTimeout(r.to);
         scfg_bind(r, 'txt', 'icot', '', r.upd);
         scfg_bind(r, 'fg', 'icof', 'fc5', r.upd);
-        scfg_bind(r, 'bg', 'icob', '333', r.upd);
+        scfg_bind(r, 'bg', 'icob', '222', r.upd);
         r.upd();
     };
 

docs/browser.css

@@ -1,11 +1,11 @@
 html {
-    background: #333 url('/wp/wallhaven-mdjrqy.jpg') center / cover no-repeat fixed;
+    background: #222 url('/wp/wallhaven-mdjrqy.jpg') center / cover no-repeat fixed;
 }
 #files th {
     background: rgba(32, 32, 32, 0.9) !important;
 }
 #ops,
-#treeul,
+#tree,
 #files td {
     background: rgba(32, 32, 32, 0.3) !important;
 }
@@ -19,7 +19,7 @@ html.light #files th {
 }
 html.light .logue,
 html.light #ops,
-html.light #treeul,
+html.light #tree,
 html.light #files td {
     background: rgba(248, 248, 248, 0.8) !important;
 }

docs/minimal-up2k.html

@@ -27,7 +27,7 @@
     #u2conf #u2btn, #u2btn {padding:1.5em 0}
 
     /* adjust the button area a bit */
-    #u2conf.has_btn {width: 35em !important; margin: 5em auto}
+    #u2conf.w, #u2conf.ww {width: 35em !important; margin: 5em auto}
 
     /* a */
     #op_up2k {min-height: 0}

tests/test_httpcli.py

@@ -50,6 +50,7 @@ class Cfg(Namespace):
             hist=None,
             no_idx=None,
             no_hash=None,
+            js_browser=None,
             css_browser=None,
             **{k: False for k in "e2d e2ds e2dsa e2t e2ts e2tsr".split()}
         )

tests/test_vfs.py

@@ -25,6 +25,7 @@ class Cfg(Namespace):
             "hist": None,
             "no_idx": None,
             "no_hash": None,
+            "js_browser": None,
             "css_browser": None,
             "no_voldump": True,
             "no_logues": False,