/* global React */
/* ════════════════════════════════════════════════════════════════
BLOCO DE COLOR — compartilhado
--------------------------------------------------------------
Usado por:
• video.html — abaixo da descrição do trabalho
• shortform-section.jsx — dentro do modal do short-form
Alimentado pelo campo `color` do item (videos.js / shortform.js):
before / after → frames pro comparador arrastável
nodes → print da árvore de nodes
powergrade/lut → créditos da base usada
breakdown → vídeo do processo ({ streamId } ou { youtubeId })
Some inteiro quando nada foi preenchido; o que faltar dentro de um
bloco já iniciado aparece como espaço reservado.
Expõe window.ColorSection({ color, isMobile, lang }).
════════════════════════════════════════════════════════════════ */
const CS_TH = window.THEME;
const CS_PALETTE = CS_TH.palette;
const CS_FONTS = CS_TH.fonts;
// Rótulo pequeno acima de cada moldura
const CS_LABEL = { ...CS_TH.label, marginBottom: 8 };
// Descobre a proporção real da imagem. Assim a moldura se molda ao
// arquivo em vez de recortá-lo: frame vertical, print de node largo,
// cada um entra inteiro sem precisar de configuração.
function useImageRatio(src, fallback) {
const [ratio, setRatio] = React.useState(null);
React.useEffect(() => {
setRatio(null);
if (!src) return;
let vivo = true;
const im = new Image();
im.onload = () => { if (vivo && im.naturalHeight) setRatio(im.naturalWidth / im.naturalHeight); };
im.src = src;
return () => { vivo = false; };
}, [src]);
return ratio || fallback;
}
// Limita a altura pra um frame vertical não virar uma coluna gigante.
function molduraFluida(ratio) {
return {
width: '100%',
maxWidth: `min(100%, calc(78vh * ${ratio}))`,
aspectRatio: String(ratio),
margin: '0 auto',
};
}
// Moldura com legenda em cima. Mostra a imagem ou o espaço vazio.
function ColorSlot({ label, src, alt, ratio, isMobile, soonLabel, fit }) {
const real = useImageRatio(src, null);
const usada = real || ratio;
return (
{label}
{src ? (
) : (
{soonLabel}
)}
);
}
// Comparador antes/depois: as duas imagens sobrepostas, com uma divisória
// arrastável. A da esquerda é o "antes", recortada até a posição da alça.
function BeforeAfterSlider({ before, after, labelBefore, labelAfter, isMobile }) {
const [pos, setPos] = React.useState(50);
// O ref é a fonte da verdade do arrasto; o state só muda o cursor.
// Depender do state aqui abriria uma corrida: entre soltar e o React
// re-renderizar, o listener antigo ainda pegaria um pointermove.
const draggingRef = React.useRef(false);
const [dragging, setDragging] = React.useState(false);
const boxRef = React.useRef(null);
const posFromX = React.useCallback((clientX) => {
const el = boxRef.current;
if (!el) return;
const r = el.getBoundingClientRect();
setPos(Math.min(100, Math.max(0, ((clientX - r.left) / r.width) * 100)));
}, []);
React.useEffect(() => {
const move = (e) => { if (draggingRef.current) posFromX(e.clientX); };
const stop = () => { draggingRef.current = false; setDragging(false); };
window.addEventListener('pointermove', move);
window.addEventListener('pointerup', stop);
window.addEventListener('pointercancel', stop);
return () => {
window.removeEventListener('pointermove', move);
window.removeEventListener('pointerup', stop);
window.removeEventListener('pointercancel', stop);
};
}, [posFromX]);
const onKeyDown = (e) => {
const passo = e.shiftKey ? 10 : 2;
if (e.key === 'ArrowLeft') { setPos((p) => Math.max(0, p - passo)); e.preventDefault(); }
if (e.key === 'ArrowRight') { setPos((p) => Math.min(100, p + passo)); e.preventDefault(); }
if (e.key === 'Home') { setPos(0); e.preventDefault(); }
if (e.key === 'End') { setPos(100); e.preventDefault(); }
};
// A moldura assume a proporção do arquivo — serve frame 16:9 e vertical
// sem recortar nenhum dos dois.
const ratio = useImageRatio(after, null) || 16 / 9;
const imgStyle = {
position: 'absolute', inset: 0, width: '100%', height: '100%',
objectFit: 'cover', userSelect: 'none', pointerEvents: 'none',
};
const tag = (lado) => ({
...CS_TH.pill,
position: 'absolute', top: 12, [lado]: 12,
background: 'rgba(245,244,240,0.9)',
borderColor: 'transparent',
backdropFilter: 'blur(6px)', WebkitBackdropFilter: 'blur(6px)',
pointerEvents: 'none',
});
return (
{ draggingRef.current = true; setDragging(true); posFromX(e.clientX); }}
onKeyDown={onKeyDown}
style={{
position: 'relative',
...molduraFluida(ratio),
background: '#000',
border: `1px solid ${CS_PALETTE.line}`,
overflow: 'hidden',
cursor: dragging ? 'grabbing' : 'ew-resize',
// pan-y deixa o dedo rolar a página na vertical e só captura o
// arrasto horizontal, que é o que a divisória usa.
touchAction: 'pan-y',
outline: 'none',
}}
>
{/* Depois — base, ocupa tudo */}
{/* Antes — por cima, recortada até a divisória */}
{labelBefore}
{labelAfter}
{/* Divisória */}
{/* Alça */}
‹›
);
}
// Linha de crédito da base usada no tratamento (PowerGrade, LUT...).
// Some quando o campo não foi preenchido; vira link quando tem url.
function CreditoBase({ label, item, primeiro }) {
if (!item || !item.name) return null;
return (
);
}
// compact = dentro do modal do short-form, onde o espaço é menor.
function ColorSection({ color, isMobile, lang, compact }) {
const T = (window.I18N && window.I18N[lang]) || window.I18N.pt;
if (!color) return null;
const breakdown = color.breakdown;
// Comparações. Um look aplicado a várias câmeras vira uma lista em
// `comparisons`, cada uma com rótulo; o par solto before/after continua
// valendo como o caso de uma só.
const comparacoes = (color.comparisons && color.comparisons.length)
? color.comparisons
: [{ label: '', before: color.before, after: color.after }];
const temComparacao = comparacoes.some((c) => c.before || c.after);
const temAlgo = !!(temComparacao || color.nodes || window.hasMedia(breakdown));
if (!temAlgo) return null;
const t = T.colorGrade;
return (
{t.label}
{t.heading}
{/* Antes / depois, uma comparação por câmera. Com as duas imagens
vira comparador arrastável; faltando alguma, cai nas molduras
lado a lado pra mostrar o que ainda não foi preenchido. */}
{comparacoes.map((cmp, i) => {
return (
) : (