reused svg thumbnails for better performance and consistency

copyparty/httpcli.py

@@ -5282,10 +5282,11 @@ class HttpCli(object):
         # chrome cannot handle more than ~2000 unique SVGs
         # so url-param "raster" returns a png/webp instead
         # (useragent-sniffing kinshi due to caching proxies)
-        mime, ico = self.conn.hsrv.ico.get(txt, not small, "raster" in self.uparam, self.uparam.get('a'))
+        # mime, ico = self.conn.hsrv.ico.get(txt, not small, "raster" in self.uparam, self.uparam.get('a'))
 
         lm = formatdate(self.E.t0)
-        self.reply(ico, mime=mime, headers={"Last-Modified": lm})
+        # self.reply(ico, mime=mime, headers={"Last-Modified": lm})
+        self.reply('', headers={"Last-Modified": lm})
         return True
 
     def tx_qr(self):

copyparty/ico.py

@@ -35,7 +35,7 @@ class Ico(object):
             sw, sh = self.args.th_size.split("x")
             h = int(100.0 / (float(sw) / float(sh)))
 
-        if chrome:
+        if chrome & 0:
             # cannot handle more than ~2000 unique SVGs
             if HAVE_PILF:
                 # pillow 10.1 made this the default font;

copyparty/web/browser.css

@@ -955,9 +955,18 @@ tr.play td:nth-child(1) a {
 	border-color: var(--g-f-b1);
 	box-shadow: 0 .1em .3em var(--g-sh);
 }
+#ggrid>a svg {
+	position: absolute;
+	max-width: 10em;
+	max-width: calc(var(--grid-sz) - 4px);
+	max-height: 8em;
+	max-height: calc(var(--grid-sz)/1.25);
+	display: block;
+	width: 100%;
+	height: 100%;
+}
 #ggrid>a img {
 	z-index: 1;
-	background: var(--bg);
 	border-radius: 5px;
 	border-radius: calc(var(--radius) / 3 * 2);
 	max-width: 10em;
@@ -997,6 +1006,17 @@ tr.play td:nth-child(1) a {
 	margin: -3px -2px;
 	padding: 4px 3px;
 }
+.th_ext {
+	position: absolute;
+	text-align: center;
+	width: 100%;
+	width: calc(100% - 8px);;
+	top: 50%;
+	top: calc(55% - .5em);
+	color: var(--a);
+	text-shadow: none;
+	font-family: monospace;
+}
 .sel .gselchk,
 .imgcontainer:hover .gselchk {
 	display: block;

copyparty/web/browser.html

@@ -162,6 +162,34 @@
 		</div>
 	</div>
 
+	<!-- define symbol in hidden svg document -->
+	<svg style="display: none" version="1.1">
+		<defs>
+			<symbol id="folder-icon" viewBox="0 0 24 24">
+				<path fill-rule="evenodd" clip-rule="evenodd" d="M3 7C3 5.89543 3.89543 5 5 5L8.67157 5C9.20201 5 9.71071 5.21071 10.0858 5.58579L10.9142 6.41421C11.2893 6.78929 11.798 7 12.3284 7H19C20.1046 7 21 7.89543 21 9V17C21 18.1046 20.1046 19 19 19H5C3.89543 19 3 18.1046 3 17V7Z" 
+					fill="var(--a)"/>
+			</symbol>
+			<symbol id="file-icon" viewBox="0 0 48 48">
+				<path
+					fill="currentColor"
+					opacity=".7"
+					d="m 28.22643,4.6905246 0.0063,9.1096644 a 1.6331061,1.6331061 43.698111 0 0 1.649296,1.632007 l 9.339558,-0.09259 z"/>
+				<path
+					class="a"
+					d="M39.5,15.5h-9a2,2,0,0,1-2-2v-9h-18a2,2,0,0,0-2,2v35a2,2,0,0,0,2,2h27a2,2,0,0,0,2-2Z"
+					id="path1" 
+					stroke-width="1" fill="none" stroke="var(--a)" stroke-linecap="round" stroke-linejoin="round" />
+				<line
+					class="a"
+					x1="28.5"
+					y1="4.5"
+					x2="39.5"
+					y2="15.5"
+					stroke-width="1" fill="none" stroke="var(--a)" stroke-linecap="round" stroke-linejoin="round" />
+			</symbol>
+		</defs>
+	</svg>
+
 	<div id="wtc" class="ghead"></div>
 	<table id="files">
 		<thead>

copyparty/web/browser.js

@@ -6462,8 +6462,13 @@ var thegrid = (function () {
 				'" class="' + ac + '" ttt="' + esc(name) + '">' +
 				'<div class="imgcontainer">' +
 				'<input type="checkbox" class="gselchk"></input>' +
+				'<svg class="thumb" width="100%" height="100%" version="1.1"><use href="#' + 
+					(isdir ? 'folder' : 'file') + '-icon" color="#' + 
+					(ext == 'unk' || ext.startsWith('/') ? '0000' : intToRGB(hashCode(ext))) + '"/></svg>' +
+				(isdir || ext == 'unk' || ext.startsWith('/') ? '' : '<span class="th_ext" style="font-size:calc(var(--grid-sz) / 5 * ' + 
+					(ext.length > 3 ? 1 / (3 + ext.length * .4) * 3 : 1) + ')">' + ext + '</span>') +
 				'<img style="height:' +
-				(r.sz / 1.25) + 'em" loading="lazy" onload="th_onload(this)" src="' +
+				(r.sz / 1.25) + 'em" loading="lazy" onload="th_onload(this)" onerror="th_onerror(this)" src="' +
 				ihref + '" /></div><span class="' + ac + '">' + ao.innerHTML + '</span></a>');
 		}
 		ggrid.innerHTML = html.join('\n');
@@ -6503,6 +6508,21 @@ var thegrid = (function () {
 		drag.initgrid();
 	}
 
+	function hashCode (str) {
+		let hash = 0;
+		for(var i = 0; i < str.length; i++){
+			hash = str.charCodeAt(i) + 2026 * ((hash << 5) - hash);
+		}
+		return hash
+	}
+	function intToRGB(i){
+		var c = (i & 0x00FFFFFF)
+			.toString(16)
+			.toUpperCase();
+
+		return "00000".substring(0, 6 - c.length) + c;
+	}
+
 	r.bagit = function (isrc) {
 		if (!window.baguetteBox)
 			return;
@@ -6655,6 +6675,11 @@ function th_onload(el) {
 	el.style.height = '';
 }
 
+function th_onerror(el) {
+	el.style.opacity = '0'
+	el.style.pointerEvents = 'none'
+}
+
 
 function tree_scrollto(e) {
 	ev(e);