feat: the preview of a large file says how long is left, not a percentage
All checks were successful
Build and deploy / Validate source (push) Successful in 5s
Build and deploy / Integration suite on a real stack (push) Successful in 3m2s
Build and deploy / Secret scan and release gate (push) Successful in 7s
Build and deploy / Publish images (push) Successful in 1m0s

Reading a large PNG in the browser for its preview showed "gerando a
prévia… 87%". It now shows the time left, worked out from how long the
reading has taken so far: "faltam cerca de 25 s", "faltam cerca de 3 min",
"quase pronto". The bar still fills as it goes.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Cauê Faleiros
2026-09-30 15:18:21 -03:00
parent c5db1375de
commit bee7f8f245
3 changed files with 14 additions and 5 deletions

View File

@@ -131,6 +131,13 @@ const duracao=s=>{
};
const faixaEnvio=bytes=>bytes/ENVIO_RAPIDO<60 ? 'até '+duracao(bytes/ENVIO_LENTO)
: 'de '+duracao(bytes/ENVIO_RAPIDO)+' a '+duracao(bytes/ENVIO_LENTO);
// Quanto falta para ler um arquivo grande no navegador, pelo ritmo até aqui.
// A leitura é quase linear, então o tempo gasto diz o que resta.
function faltaLeitura(l){
if(!l || !(l.p>0.02)) return 'calculando o tempo…';
const s=(Date.now()-l.inicio)/1000*(1-l.p)/l.p;
return s<10 ? 'quase pronto' : s<60 ? 'faltam cerca de '+Math.ceil(s/5)*5+' s' : 'faltam cerca de '+duracao(s);
}
const larguraFilme=()=>MODOS[modo].larg;
// cobrança proporcional: arredonda para cima em 10 cm · 2,75 m vira 2,80 m
const cobrar=m=>Math.max(MINIMO_M, Math.ceil(m*10)/10);

View File

@@ -353,7 +353,7 @@ function medirFolha(file){
}
function textoProgresso(x){
if(x.med && x.med.grande) return 'gerando a prévia e conferindo a arte… '+x.pct+'%';
if(x.med && x.med.grande) return 'gerando a prévia e conferindo a arte · '+faltaLeitura(x.leitura);
return x.pct<50?'lendo o arquivo…':x.pct<70?'medindo a folha…':'conferindo a arte…';
}
// The file card's thumbnail (52 x 96 px, drawn at twice that for sharp screens).
@@ -524,7 +524,7 @@ function pintaProgressoArte(a){
const el=$('lista').querySelector('[data-arte="'+artes.indexOf(a)+'"]');
const barra=el && el.querySelector('.prog i'), texto=el && el.querySelector('.progT');
if(!barra){ pintaArtes(); return; }
barra.style.width=a.lendo+'%'; if(texto) texto.textContent='arquivo grande · gerando a prévia… '+a.lendo+'%';
barra.style.width=a.lendo+'%'; if(texto) texto.textContent='arquivo grande · gerando a prévia · '+faltaLeitura(a.leitura);
}
function pintaArtes(){
invalidaItemAtual();
@@ -538,7 +538,7 @@ function pintaArtes(){
let barra='', dica='', chips='', aviso='', medida='<b class="pede">Informe a largura</b>';
if(a.lendo!=null){
barra='<div class="prog"><i style="width:'+a.lendo+'%"></i></div>'+
'<span class="progT">arquivo grande · gerando a prévia… '+a.lendo+'%</span>';
'<span class="progT">arquivo grande · gerando a prévia · '+faltaLeitura(a.leitura)+'</span>';
}else if(a.decodeError){
aviso='<p class="avisoF"><b>Não conseguimos ler esta imagem.</b> Exporte novamente em PNG ou JPG.</p>';
}else if(a.cm>larguraFilme()){

View File

@@ -65,10 +65,11 @@ function sel(fs){
x.an={dpi:md.dpiFolha, grande:true, artes:0, residuos:0, encostadas:0,
fundoChapado:false, aproveitamento:0, alturaCm:md.alt, fonteDpi:'arquivo'};
if(!/\.png$/i.test(x.f.name)){ x.pct=null; pintaFolha(); return; }
x.pct=60; pintaFolha();
x.pct=60; x.leitura={inicio:Date.now(), p:0}; pintaFolha();
let mostrado=0;
previaPngGrande(x.f, 600, p=>{
const pct=60+Math.floor(p*38);
x.leitura.p=p;
if(pct-mostrado>=1){ mostrado=pct; x.pct=pct; pintaProgressoFolha(x); }
}).then(cv=>{
if(cv && folhas.includes(x)){
@@ -131,10 +132,11 @@ function medir(a){
// JPG and WebP cannot be read in parts: the art is placed by its
// measurements, as a full box, and the team checks it before printing.
if(!/\.png$/i.test(a.f.name)){ a.semPrevia=true; return a; }
a.lendo=0; pintaArtes();
a.lendo=0; a.leitura={inicio:Date.now(), p:0}; pintaArtes();
let mostrado=0;
const cv=await previaPngGrande(a.f, 1200, p=>{
const pct=Math.floor(p*100);
a.leitura.p=p;
if(pct-mostrado>=1){ mostrado=pct; a.lendo=pct; pintaProgressoArte(a); }
}).catch(()=>null);
a.lendo=null;