const { MicroText, KinoTape, IconStrip, Timecode, Button } = window.DASKINODesignSystem_5a312e;
const { EdRule, EdKicker, EdHead, EdDek, EdBody, EdDropCap, EdCaption, EdSection, EdFolio, EdSpecs } = window;
/* A FICHA como abertura de matéria: o título não fica estampado sobre a foto,
fica numa página de abertura própria — folio, rubrica, manchete, olho, ficha
técnica — e a imagem vem DEPOIS, com legenda. É a diferença entre uma capa
de álbum e uma página de revista, e é o que o v1 não fazia. */
function V2Project({ slug, go }) {
const i = Math.max(0, window.FILMS.findIndex(f => f.slug === slug));
const f = window.FILMS[i];
const next = window.FILMS[(i + 1) % window.FILMS.length];
const wide = f.motion.filter(m => !m.vertical);
const tall = f.motion.filter(m => m.vertical);
const pad = "clamp(20px,4vw,56px)";
return (
{/* ABERTURA. A entrega como rúbrica, o título em serif, a linha do
projeto como olho — e a ficha técnica em mono embaixo. */}
{f.entrega}{f.title}
{f.subtitle && {f.subtitle}}
{f.line}{f.sub}
{/* A imagem, limpa. */}
{/* A palavra em fita, preservada do modelo antigo — mas como assinatura
da matéria, na sua própria linha, e não estampada na foto. */}
{f.motion.length > 0 && (
{/* 16:9 e 9:16 nunca na mesma grade — alturas de 152 e 480 lado a
lado deixam meia seção vazia. Duas famílias, duas grades. */}
{wide.length > 0 && (
{wide.map((m, n) => )}
)}
{tall.length > 0 && (
{tall.map((m, n) => )}
)}
)}
{f.signatures.length > 0 && (
MARCAS DO CLIENTE} />
{/* A régua vive em cada peça, não no fundo do contêiner: fundo de
contêiner em flex-wrap vaza cinza em toda área não preenchida. */}
{f.signatures.map((s, n) => (
))}
)}
{/* FOTOGRAFIA. */}
} />
{f.photos.length > 0 ? (
/* A primeira foto ganha largura dupla — uma abertura, não uma fila de
iguais. É o gesto mais barato que existe para dar hierarquia a uma
grade, e o que separa uma página composta de um contact sheet. */
);
}
/* PLACA DE MOVIMENTO.
Os originais do deck têm de 17 a 52 MB. Quatro numa seção são 150 MB, e uma
página que tenta abrir isso de uma vez simplesmente não abre — foi o que
deixou a placa da página 24 em branco na primeira montagem.
Então: o frame parado carrega primeiro (o próprio Drive redimensiona, ~100 KB)
e a animação só é buscada quando o leitor clica. O peso vai escrito no botão.
Onde já existe uma versão comprimida — os seis projetos do primeiro lote —
nada disso é preciso e a peça roda direto. */
function MotionPlate({ m, idx, title, ratio, bare }) {
const [play, setPlay] = React.useState(!m.heavy);
const [loading, setLoading] = React.useState(false);
React.useEffect(() => {
if (!play || !m.heavy) return;
setLoading(true);
const i = new Image();
i.onload = i.onerror = () => setLoading(false);
i.src = m.src[m.src.length - 1];
}, [play]);
const plate = (
{!play && (
)}
{loading && (
CARREGANDO…
)}
);
return plate;
}
/* PLACA DE ASSINATURA.
Dois problemas de uma vez, e os dois vinham de tratar toda marca como igual:
1. POLARIDADE. As logos embutidas no deck foram desenhadas para slides
pretos — a maioria é artwork BRANCO sobre transparência. Numa placa branca
elas desaparecem por completo, e foi o que aconteceu em nove dos onze
projetos. A placa agora MEDE a imagem: amostra os pixels opacos num canvas
e escolhe o chão pela luminância do artwork. Marca clara ganha fundo
escuro, marca escura ganha fundo branco.
Medir exige CORS, e aí está a sutileza: o servidor das marcas do site v1
não libera leitura de pixel, o do Drive libera. Então a medição é uma
TENTATIVA, e o palpite de reserva é CHÃO ESCURO para todas — porque todas
saem do mesmo lugar, slides pretos de uma apresentação. As marcas do v1
têm exatamente as mesmas dimensões das do Drive (200×200, 512×512): são o
mesmo artwork, extraído duas vezes. Tratar as não-mensuráveis como escuras
seria repetir o erro numa fonte só.
2. PROPORÇÃO. Um lockup retrato (800×1131) numa caixa de 96 px de altura
sobra 54 px de logo. As dimensões são legíveis mesmo sem CORS, então a
caixa cresce sempre que a imagem é mais alta que larga. */
function MarkPlate({ src, drive }) {
const list = Array.isArray(src) ? src : [src];
const [n, setN] = React.useState(0);
const [dead, setDead] = React.useState(false);
/* Começa assumindo artwork claro — a regra do acervo, não a exceção. */
const [light, setLight] = React.useState(true);
const [tall, setTall] = React.useState(false);
const url = list[n];
React.useEffect(() => {
setLight(true);
/* Passada 1 — dimensões. Funciona em qualquer origem. */
const plain = new Image();
plain.referrerPolicy = "no-referrer";
plain.onload = () => setTall(plain.naturalHeight > plain.naturalWidth * 1.15);
plain.src = url;
/* Passada 2 — luminância. Só onde o servidor permite ler os pixels. */
const probe = new Image();
probe.crossOrigin = "anonymous";
probe.referrerPolicy = "no-referrer";
probe.onload = () => {
try {
const s = 40, c = document.createElement("canvas");
c.width = s; c.height = s;
const x = c.getContext("2d");
x.drawImage(probe, 0, 0, s, s);
const d = x.getImageData(0, 0, s, s).data;
let sum = 0, count = 0;
for (let i = 0; i < d.length; i += 4) {
if (d[i + 3] < 40) continue; /* ignora transparência */
sum += 0.299 * d[i] + 0.587 * d[i + 1] + 0.114 * d[i + 2];
count++;
}
if (count) setLight(sum / count > 165);
} catch (e) { /* CORS fechado: fica o palpite da origem */ }
};
probe.src = url;
}, [url]);
if (dead) return null;
return (