mirror of
https://github.com/9001/copyparty.git
synced 2026-06-18 20:22:27 -06:00
reused svg thumbnails for better performance and consistency
This commit is contained in:
Til Schmitter
parent
e8a9bc2cf4
commit
47be8f9cd0
|
|
@ -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):
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
Loading…
Reference in a new issue