// CTox EAD — curso em layout de 3 colunas (rail · player · progresso). // Mantém: travamento progressivo, conclusão ao assistir até o fim, player sem // adiantar (sem seek/velocidade/PiP), localStorage e teste/certificado. // Paleta clara (casa com o teste/certificado) const LBG = '#F1EEE6', LCARD = '#fff', LMUTED = '#7c8a84', LINK = '#22302b', LBORD = '#e6e1d6', LBORD2 = '#ece7dc', ANNO = '#ff5a3c'; // ── Supabase (cadastro + validação) ───────────────────────────────────────── const SUPABASE_URL = 'https://xzkkwsxfwjlobxgrvjzr.supabase.co'; const SUPABASE_ANON = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Inh6a2t3c3hmd2psb2J4Z3J2anpyIiwicm9sZSI6ImFub24iLCJpYXQiOjE3OTA4Nzk0NDAsImV4cCI6MjEwNjQ1NTQ0MH0.O-8wtKo4xZbvJXk9liZuywP2OGqRq0ArNON_UURTS3s'; const REG_KEY = 'ctox-registro'; const readReg = () => { try { return JSON.parse(localStorage.getItem(REG_KEY) || 'null'); } catch { return null; } }; const saveReg = (r) => { try { localStorage.setItem(REG_KEY, JSON.stringify(r)); } catch {} }; async function supaRpc(fn, body) { const r = await fetch(SUPABASE_URL + '/rest/v1/rpc/' + fn, { method: 'POST', headers: { apikey: SUPABASE_ANON, Authorization: 'Bearer ' + SUPABASE_ANON, 'Content-Type': 'application/json' }, body: JSON.stringify(body), }); if (!r.ok) throw new Error('Supabase ' + r.status + ': ' + (await r.text())); const t = await r.text(); return t ? JSON.parse(t) : null; } const soDigitos = (s) => (s || '').replace(/\D/g, ''); const maskCPF = (s) => { s = soDigitos(s).slice(0, 11); return s.replace(/(\d{3})(\d)/, '$1.$2').replace(/(\d{3})(\d)/, '$1.$2').replace(/(\d{3})(\d{1,2})$/, '$1-$2'); }; const maskCNPJ = (s) => { s = soDigitos(s).slice(0, 14); return s.replace(/(\d{2})(\d)/, '$1.$2').replace(/(\d{3})(\d)/, '$1.$2').replace(/(\d{3})(\d)/, '$1/$2').replace(/(\d{4})(\d{1,2})$/, '$1-$2'); }; // Lista de módulos — fonte única da estrutura do curso (15 módulos, 4 etapas). const MODS = [ { n: '01', title: 'Tela Inicial e Avisos', sub: 'Primeiro acesso, login, pop-up de avisos e sininho de mensagens.' }, { n: '02', title: 'Aba de Coletas — Status', sub: 'O painel do posto, os status de cada amostra e o menu de ações.' }, { n: '03', title: 'Coletores, Testemunhas e Usuários', sub: 'Quem pode coletar e quem pode testemunhar uma coleta.' }, { n: '04', title: 'Dashboard de Acompanhamento', sub: 'Visão gráfica do volume de coletas do posto.' }, { n: '05', title: 'Cadastro de Nova Coleta', sub: 'O fluxo completo da nova coleta, passo a passo.' }, { n: '06', title: 'Receituário Médico', sub: 'Como documentar o uso de medicamentos declarado pelo doador.' }, { n: '07', title: 'Formas de Pagamento', sub: 'Cartão, PIX, boleto, dinheiro e faturamento.' }, { n: '08', title: 'Voucher (CNH e CLT)', sub: 'O vale-exame: tipos, validação e quando perguntar.' }, { n: '09', title: 'Finalidades: CNH, CLT, Outros e Menor', sub: 'Regras, prazos e documentos de cada finalidade.' }, { n: '10', title: 'Concurso Público', sub: 'O nível mais alto de responsabilidade do posto.' }, { n: '11', title: 'Logística — Criação de Lote', sub: 'Criar o lote de envio para a retirada das amostras.' }, { n: '12', title: 'Recoleta', sub: 'Quando acontece, como resolver e como evitar.' }, { n: '13', title: 'Contraprova', sub: 'O direito do doador de contestar um resultado.' }, { n: '14', title: 'Pontos Importantes e LGPD', sub: 'Onde sai o resultado, proteção de dados e boas práticas.' }, { n: '15', title: 'Módulo Financeiro (ADM)', sub: 'Repasses, fechamento mensal e inadimplência — perfil administrativo.' }, ]; const TRILHAS = [ { id: 'A', name: 'Fundamentos', sub: 'Primeiro acesso e leitura do sistema', mods: ['01', '02', '03', '04'] }, { id: 'B', name: 'Cadastro de Coleta', sub: 'O fluxo completo da nova coleta', mods: ['05', '06', '07', '08', '09', '10'] }, { id: 'C', name: 'Operação e Encerramento', sub: 'Logística, recoleta, contraprova e boas práticas', mods: ['11', '12', '13', '14'] }, { id: 'D', name: 'Financeiro', sub: 'Repasses e fechamento (perfil administrativo)', mods: ['15'] }, ]; const ETAPA_NUM = { A: 1, B: 2, C: 3, D: 4 }; const ALL = MODS; const byNum = (n) => ALL.find((m) => m.n === n); const ORDER = ALL.map((m) => m.n); const STORE_KEY = 'ctox-course-done'; const readDone = () => { try { return JSON.parse(localStorage.getItem(STORE_KEY) || '[]'); } catch { return []; } }; const isUnlocked = (n, done) => { const i = ORDER.indexOf(n); return i <= 0 ? true : done.includes(ORDER[i - 1]); }; const nextOf = (n) => { const i = ORDER.indexOf(n); return (i >= 0 && i < ORDER.length - 1) ? ORDER[i + 1] : null; }; const TRILHA_POR_ULTIMO = {}; TRILHAS.forEach((t) => { TRILHA_POR_ULTIMO[t.mods[t.mods.length - 1]] = t; }); const trilhaDe = (n) => TRILHAS.find((t) => t.mods.includes(n)); const etapaLabel = (n) => { const t = trilhaDe(n); return t ? 'Etapa ' + ETAPA_NUM[t.id] : ''; }; const firstToWatch = (done) => { for (const n of ORDER) if (!done.includes(n) && isUnlocked(n, done)) return n; return ORDER[ORDER.length - 1]; }; // Módulo 15 (Financeiro) é só para o perfil administrativo: liberado por senha. // O certificado/teste libera ao concluir os módulos comuns (01–14), sem exigir o 15. const ADM_MOD = '15'; const COMMON = ORDER.filter((n) => n !== ADM_MOD); const commonDone = (done) => COMMON.every((n) => done.includes(n)); const ADM_OK_KEY = 'ctox-adm-ok'; const readAdmOk = () => { try { return localStorage.getItem(ADM_OK_KEY) === '1'; } catch { return false; } }; // Hash SHA-256 da senha dos ADMs (a senha em texto não fica no repositório). // Para trocar a senha, me mande a nova que eu regenero este hash. const SENHA_ADM_SHA256 = 'eecace72d45b6b0b8429c16a452a9b63c060aa022acc6da8b4829e301a62d935'; async function sha256hex(s) { const b = new TextEncoder().encode(s); const h = await crypto.subtle.digest('SHA-256', b); return Array.from(new Uint8Array(h)).map((x) => x.toString(16).padStart(2, '0')).join(''); } // Acesso a um módulo: sequência normal; o 15 exige também a senha de ADM liberada. const canAccess = (n, done, admOk) => isUnlocked(n, done) && (n !== ADM_MOD || admOk); // ── Descrições no estilo da apostila (Etapa 1 semeada; demais caem no sub) ──── // paras: parágrafos (aceita **negrito**). prints: telas refeitas em verde c/ marcação. const DESCRICOES = { '01': { paras: [ 'O acesso ao CTox é feito com **CPF e senha do próprio profissional** (o sistema também aceita CNPJ ou e-mail). **Prefira o CPF** — é ele que identifica com clareza quem realizou cada ação. Cada pessoa usa o seu login, nunca um código genérico do posto.', 'Ao entrar, o sistema exibe um **pop-up de avisos e comunicados**. Leia **antes de iniciar qualquer ação**: é ali que a Synvia publica mudanças de regra, orientações e avisos importantes para a operação do posto.', 'Fique atento ao **sininho de mensagens** no topo da tela. Por ele chegam as notificações do posto — como **avisos de recoleta** e recados direcionados. Confira todos os dias.', 'Desde a primeira tela você já lida com **dados sensíveis de doadores**. Sigilo é regra desde o começo — a **LGPD** é detalhada no módulo final.', ], prints: [{ src: 'prints/mod01-avisos.png', ring: { x: '22%', y: '20%', w: '61%', h: '68%' }, badge: { x: '19.5%', y: '16.5%', n: '1' }, cap: '**① Pop-up de avisos:** aparece ao entrar no CTox. Leia antes de qualquer ação. As mensagens individuais do posto (recoleta, recados) chegam pelo **sininho** no topo.', }] }, '02': { paras: [ 'A **aba de Coletas** lista todas as coletas do posto com o respectivo **status**. Entender cada status evita erro de interpretação de resultado.', 'Atenção ao **"Aguardando Confirmatório"**: significa que a triagem detectou algo que precisa de análise confirmatória — **não é um resultado positivo**. Só o laudo final confirma.', 'Os **dados de contato** cadastrados na coleta devem ser sempre **do doador**, nunca do posto — é por eles que o titular recebe o laudo.', 'No **ícone de três pontos** (Ações) de cada coleta abrem-se funções conforme o **perfil do seu login**: **Ver mais** (dados do cadastro da amostra), **Ver FCC** (conferir e imprimir a ficha de cadeia de custódia), **Nota fiscal** (visualizar e baixar a NF) e **Deletar** (excluir uma amostra cadastrada por engano).', ], prints: [{ src: 'prints/mod02-coletas.png', ring: { x: '19%', y: '37%', w: '15%', h: '46%' }, badge: { x: '16%', y: '33.5%', n: '1' }, cap: '**① Situação da Análise:** a coluna onde você acompanha o status de cada amostra. Lembre: *Aguardando* / *Em Confirmatório* **não** é resultado positivo.', }] }, '03': { paras: [ 'Um **coletor** só fica habilitado reunindo **seis condições**: ter **vínculo empregatício** com o posto; ser **maior de idade**; assistir ao **vídeo oficial** de treinamento pelo próprio login; ser **aprovado na prova** de aptidão; solicitar o **certificado** de coleta emitido pela Synvia; e manter a habilitação **válida — vale 1 ano** e precisa ser renovada.', 'A **testemunha** também precisa ser **maior de idade** e ter vínculo empregatício com o posto. **Nunca** pode ser familiar, amigo ou conhecido do doador, e deve permanecer na sala durante todo o procedimento.', 'Na aba de **Usuários** ficam todas as pessoas vinculadas ao CNPJ do posto — onde se edita dados cadastrais e se redefinem senhas.', ], prints: [{ src: 'prints/mod03-coletor-testemunha.png', ring: { x: '50%', y: '36%', w: '44%', h: '44%' }, badge: { x: '47%', y: '32%', n: '1' }, cap: '**① Testemunha:** cadastrada a cada nova coleta. Maior de idade, com vínculo empregatício, e nunca familiar, amigo ou conhecido do doador.', }] }, '04': { paras: [ 'O **Dashboard de Acompanhamento** dá a visão geral do posto: volumes, status e evolução das coletas ao longo do tempo.', 'Use-o para acompanhar pendências e conferir se as coletas estão fluindo até o envio das amostras.', ], prints: [{ src: 'prints/mod04-dashboard.png', ring: { x: '9%', y: '27%', w: '82%', h: '16%' }, badge: { x: '6.5%', y: '23%', n: '1' }, cap: '**① Resumo do período:** total, máximo, mínimo e média de coletas — a leitura rápida do desempenho do posto. Alterne entre Ano, Mês, Semana e Dia.', }] }, '05': { paras: [ 'O cadastro de uma nova coleta começa em **Coletas → Nova Coleta**. O sistema abre um assistente em etapas: Laboratório, Coletor, Finalidade, Doador, Pagamento, Testemunha e Amostra. Preencha na ordem, conferindo cada campo antes de avançar.', 'Na etapa **Finalidade**, informe o responsável pelo atendimento e selecione a finalidade correta conforme o objetivo do doador (CNH, CLT, CLT + CNH, Outros ou Concurso).', ], prints: [{ src: 'prints/mod05-finalidade.png', arrow: { x: '4%', y: '40%', w: '22%', h: '26%', d: 'M92 6 Q40 20 16 78', head: 'M16 78 l14 -6 M16 78 l4 -14' }, badge: { x: '9%', y: '58%', n: '1' }, cap: '**① Ponto destacado:** a finalidade **CNH** aparece com o anel de destaque e o balão de instrução — um dos frames que serão animados no vídeo.', }] }, '06': { paras: [ 'Quando o doador declara uso de **qualquer medicamento** — contínuo ou recente — é obrigatório **documentar com a receita**. Não citamos marcas nem tipos de remédio: o que vale é registrar o que foi declarado e anexar o documento.', 'A receita precisa ter **data anterior à data da coleta** e trazer a **assinatura e o carimbo do médico**. Sem esses elementos, o documento não é válido para o médico revisor da Synvia.', 'Anexe a receita **digitalmente no sistema**, no momento do cadastro, e preencha substância, período e frequência de uso. Receita apenas física, enviada junto com a amostra mas **sem o anexo digital**, não permite o vínculo e pode comprometer o laudo.', ], prints: [{ src: 'prints/mod06-receituario.png', ring: { x: '69%', y: '47%', w: '29%', h: '10%' }, badge: { x: '66.5%', y: '44%', n: '1' }, cap: '**① + Adicionar Receita:** é por aqui que a receita é anexada digitalmente, no próprio cadastro. Antes de anexar, confira data anterior à coleta, assinatura e carimbo do médico.', }] }, '07': { paras: [ 'Depois de preencher os dados do cadastro, escolha a **forma de pagamento**. Cada modalidade tem regras próprias que precisam ser seguidas à risca.', '**Cartão:** link por e-mail/SMS, pago no momento da coleta. **PIX:** chave gerada na hora, com confirmação automática — aguarde confirmar antes de liberar. **Boleto:** usado quando o **próprio doador paga o valor integral**; vence em **3 dias úteis** e, após vencer, **não** pode ser reemitido pelo posto (acione a Synvia). O boleto pode aparecer no **DDA** do banco e em plataformas como a **Serasa**, sempre **no nome do doador**. **Dinheiro:** o posto recebe o valor e repassa à Synvia semanalmente (ver Módulo 15). **Faturamento Laboratório:** quando há empresa parceira, o PCL emite a nota fiscal, recebe da empresa e repassa à Synvia o valor do exame (fechamento mensal).', ], prints: [{ src: 'prints/mod07-pagamento.png', ring: { x: '6%', y: '54%', w: '40%', h: '22%' }, badge: { x: '3.5%', y: '50%', n: '1' }, cap: '**① Forma de Pagamento:** cartão, boleto, dinheiro ou PIX. O **boleto** sai no nome do doador (3 dias úteis) e o **PIX** exige aguardar a confirmação. O **Faturamento Laboratório** (empresa parceira) é tratado à parte.', }] }, '08': { paras: [ 'O **voucher** é um vale-exame que cobre o custo da coleta. Há dois tipos. O **voucher de CNH** é **comprado pelo doador no site da Synvia** e usado na coleta. O **voucher de CLT** chega pelo **sistema de empresas** — a empresa o disponibiliza ao funcionário.', 'Pergunte **antes** de selecionar a forma de pagamento se o doador tem voucher: a preferência do cadastro é pelo **código do voucher**, e **não dá para incluí-lo depois** de finalizar o cadastro. O exame pago com voucher **não gera cobrança ao doador**.', ], prints: [{ src: 'prints/mod08-voucher.png', ring: { x: '66%', y: '44%', w: '32%', h: '14%' }, badge: { x: '63.5%', y: '41%', n: '1' }, cap: '**① Vale-exame:** marque **Sim** e informe o **Nº do Vale Exame** ainda na etapa de Finalidade — antes de escolher a forma de pagamento.', }] }, '09': { paras: [ 'A **finalidade** define as regras do exame. **CNH:** motoristas (categorias C, D, E e primeira habilitação A/B); a inclusão no Renach é automática. **CLT:** o pagamento é **sempre do empregador**, nunca do empregado — cadastre nome e CNPJ da empresa.', '**CLT + CNH:** finalidade dupla, com inclusão no Renach e laudo no nome da empresa. **Outros:** casos sem órgão regulador (particular, judicial) — exige ficha de anamnese assinada.', '**Menor de idade:** o **doador é o próprio menor** — cadastre os **dados do menor**. Envie, junto com a amostra, os **documentos do menor e do responsável legal** e, quando houver, o **termo de guarda**. **Só o responsável legal assina** (pai/mãe ou guarda formalizada); o menor **não assina**. Avós, tios e padrastos **não podem** sem guarda formal.', ], prints: [{ src: 'prints/mod09-finalidade.png', ring: { x: '10.5%', y: '60%', w: '46%', h: '20%' }, badge: { x: '8%', y: '56%', n: '1' }, cap: '**① Finalidade:** cada opção tem regras próprias de pagamento, órgão e documentação. Selecione conforme o objetivo do doador.', }] }, '10': { paras: [ 'Concurso público é o **nível mais alto de responsabilidade** do posto. Um erro de procedimento pode gerar **ação judicial por "perda de chance"**, movida pelo candidato prejudicado, com responsabilização do posto e da Synvia e **indenizações milionárias**.', '**Antes de aceitar:** receba o edital com a data de apresentação à banca e **envie à Synvia** para análise (resposta em até 24h). Só **agende após a aprovação formal** — nunca colete um exame de concurso sem essa aprovação.', '**No ato da coleta:** busque o nome exato do edital aprovado, **imprima e colha a assinatura do Termo de Ciência** (obrigatório) e confira material, FCC, numeração e envelopes. Fique atento ao **escopo** exigido (padrão ou 50+) e ao laudo lacrado, se pedido.', '**Regra de ouro:** o laudo de concurso **não admite recoleta corretiva** dentro do prazo da banca — um erro aqui costuma ser irreversível.', ], prints: [{ src: 'prints/mod10-concurso.png', ring: { x: '43%', y: '58%', w: '13%', h: '22%' }, badge: { x: '40.5%', y: '54%', n: '1' }, cap: '**① Concurso:** selecione esta finalidade somente depois da aprovação formal da Synvia sobre o edital.', }] }, '11': { paras: [ 'Ao final de cada dia de coletas é **obrigatório criar um lote** no sistema para a logística agendar a retirada. **Sem o lote, a transportadora não passa.**', '**Passo a passo:** aba **Enviar Amostras → Novo Pacote (BAG) → Incluir Pendente**, selecione as amostras do dia, **Incluir**, informe o número da BAG e **Concluir**. Sem BAG física, informe "sem BAG" e o sistema gera um número (anote também no envelope).', 'O lote **não é só operacional** — é exigência normativa de **rastreabilidade**: saber quais amostras estão em trânsito, com qual transportadora e destino. Coletas até as **17h** são programadas para o próximo dia útil.', 'Qualquer problema na retirada, fale com o **atendimento Synvia** — nunca diretamente com a transportadora.', ], prints: [{ src: 'prints/mod11-lote.png', ring: { x: '82.5%', y: '2%', w: '16%', h: '6.5%' }, badge: { x: '80%', y: '0.5%', n: '1' }, cap: '**① Novo Pacote (BAG):** ao fim do dia, crie o lote aqui — sem ele a transportadora não retira as amostras.', }] }, '12': { paras: [ '**Recoleta** é quando uma amostra enviada tem um erro que, por norma, impede a análise — é sempre o **pior cenário** para todos.', '**Causas comuns:** erro na FCC; **divergência** entre o número do sistema e o dos envelopes/FCC; material insuficiente; dados do doador errados. **A falta de receita médica não gera recoleta.** A Synvia **avisa por e-mail** qual amostra, qual o erro e o que corrigir — confira o e-mail diariamente.', '**Como fazer:** na aba **Recoleta**, informe o número da amostra com erro e confirme. O sistema gera um **novo kit, com nova numeração**, **vinculado ao pagamento da primeira coleta**. A re-coleta **não tem custo adicional** para o doador nem para o posto.', 'A re-coleta exige **coletar novo material do doador**, o que nem sempre é simples de repetir. Uma coleta correta na origem garante o laudo no prazo. Na dúvida, fale com o atendimento Synvia **antes de finalizar** o cadastro.', ], prints: [{ src: 'prints/mod12-recoleta.png', ring: { x: '48.5%', y: '9%', w: '16%', h: '6%' }, badge: { x: '46%', y: '6.5%', n: '1' }, cap: '**① Aba Recoletas:** informe o número da amostra com erro e gere um novo kit — nova numeração, vinculado ao pagamento da 1ª coleta, sem custo extra.', }] }, '13': { paras: [ 'A **contraprova** é um **direito do doador**: se ele quiser contestar um resultado, pode solicitar uma **nova análise do material já coletado**.', 'O doador **preenche um requerimento** e o posto **envia ao Atendimento da Synvia**. A análise é feita em **até 5 dias úteis a partir do envio** do requerimento.', 'O **laudo da contraprova vai por e-mail** ao doador e **não aparece no sistema** do posto. Oriente o doador sobre o prazo e o canal.', ] }, '14': { paras: [ '**Onde sai o resultado:** o doador acompanha e acessa o laudo pelo site **resultado.ctox.io** (https://resultado.ctox.io/). Oriente sempre o doador a acompanhar por lá — o acompanhamento ativo evita atrasos. Este módulo é liberado a **todos os participantes**.', '**LGPD — o laudo só vai para o doador.** O exame contém dados sensíveis. É **proibido** enviar o laudo por WhatsApp ou entregá-lo a pais, filhos, cônjuge, empresa ou terceiros. **Permitido** apenas ao **doador** (e-mail do titular ou pelo sistema).', '**CLT:** o empregador acessa só o **laudo médico** (positivo/negativo) — nunca as substâncias, quantidades ou o laudo toxicológico completo.', '**Erro comum na CNH:** muitos fazem o toxicológico **antes** de iniciar o processo da CNH, e aí o exame não aparece no BCA/SENATRAN nem entra no Renach. **Sempre pergunte** se o doador já iniciou o processo. Ordem correta: início do processo → taxas → exames iniciais → toxicológico.', '**Boas práticas:** explique o processo com clareza, nunca diga "é automático", revise o cadastro antes de finalizar e trate cada coleta como crítica. Normativos: CONTRAN 923/2022, NIT DICLA 069 e Portaria MTE 612/2024.', ], prints: [{ src: 'prints/mod14-lgpd.png', ring: { x: '6%', y: '25%', w: '43%', h: '26%' }, badge: { x: '3.5%', y: '21.5%', n: '1' }, cap: '**① Proibido:** o laudo nunca vai por WhatsApp nem a terceiros — somente ao próprio doador.', }] }, '15': { paras: [ '**Módulo administrativo.** O financeiro controla o repasse entre o posto e a Synvia e normalmente é operado pelo **perfil administrativo** do posto.', 'A tela do financeiro tem **três partes**. **1) Boletos semanais** (modalidade dinheiro): trazem o valor, o período e o **relatório** das amostras pagas em dinheiro, com **download**; o boleto vence toda terça. **2) Fechamento mensal:** mostra o **valor a receber**, o **valor a pagar**, o **valor da nota fiscal** e o **botão de upload** da NF. **3) Relatórios por método de pagamento:** para conferência (cartão, boleto, PIX, faturamento).', 'No fechamento mensal, o relatório fica disponível até o **2º dia útil**. Confira **como o cálculo é feito** e **como se chega ao valor final da NF**, **anexe a nota fiscal** pelo botão de upload e envie. A Synvia repassa em até **5 dias úteis** após receber a NF.', '**Inadimplência:** **dois boletos em aberto** bloqueiam a modalidade dinheiro — e eles **não precisam ser consecutivos**. A partir daí, só o **PIX** fica disponível para novos cadastros.', ], prints: [{ src: 'prints/mod15-financeiro.png', ring: { x: '57%', y: '14%', w: '41%', h: '13%' }, badge: { x: '54.5%', y: '11%', n: '1' }, cap: '**① Nota Fiscal:** no fechamento mensal, anexe a NF em PDF pelo botão **Adicionar Nota Fiscal** (ou veja a já enviada). É assim que o repasse é liberado. Inadimplência: 2 boletos em aberto — não precisam ser consecutivos.', }] }, }; // ── helpers de render ──────────────────────────────────────────────────────── function RT({ t }) { const parts = String(t).split('**'); return parts.map((p, i) => i % 2 ? {p} : {p}); } function PrintAnotado({ src, ring, arrow, badge, cap }) { return (
{ring &&
} {arrow && } {badge &&
{badge.n}
}
{cap &&

}
); } // ── Player de vídeo sem adiantar (sem seek/velocidade/PiP) ─────────────────── function VideoModulo({ src, poster, allowSeek, onEnded, onError }) { const ref = React.useRef(null); const maxRef = React.useRef(0); const [playing, setPlaying] = React.useState(false); const [muted, setMuted] = React.useState(false); const [cur, setCur] = React.useState(0); const [dur, setDur] = React.useState(0); const fmt = (t) => { t = Math.max(0, t | 0); return `${(t / 60) | 0}:${String(t % 60).padStart(2, '0')}`; }; // Pausa o vídeo quando a aba perde o foco / o app vai pro fundo (celular). React.useEffect(() => { const onHide = () => { const v = ref.current; if (v && document.hidden && !v.paused) v.pause(); }; document.addEventListener('visibilitychange', onHide); window.addEventListener('pagehide', onHide); window.addEventListener('blur', onHide); return () => { document.removeEventListener('visibilitychange', onHide); window.removeEventListener('pagehide', onHide); window.removeEventListener('blur', onHide); }; }, []); const toggle = () => { const v = ref.current; if (!v) return; v.paused ? v.play() : v.pause(); }; const onTime = () => { const v = ref.current; if (!v) return; if (v.currentTime > maxRef.current) maxRef.current = v.currentTime; setCur(v.currentTime); }; // Sem adiantar durante o curso; após concluir (allowSeek) libera navegar no tempo. const blockSeek = () => { const v = ref.current; if (!v || allowSeek) return; if (v.currentTime > maxRef.current + 0.4) v.currentTime = maxRef.current; }; const seek = (e) => { if (!allowSeek) return; const v = ref.current; if (!v || !dur) return; const r = e.currentTarget.getBoundingClientRect(); v.currentTime = Math.min(1, Math.max(0, (e.clientX - r.left) / r.width)) * dur; }; return (