Skip to content

Flowchart — Módulo: youtube-player

Gerado pelo Archaeologist (Reversa) em 2026-05-11


Fluxo Geral do Player

flowchart TD
    A([Tela de Música com vídeo]) --> B[YoutubePlayerView renderiza]
    B --> C[usePlayerState: playing, rate, duration, videoHeight]
    B --> D[useLoopControl: loop interval]
    B --> E[useMiniPlayerDrag: posição arrastável]
    C --> F{Modo de exibição}
    F -- Full --> G[Player fullscreen: screenWidth × videoHeight]
    F -- Mini --> H[MiniPlayer: 200×112 + 28 controles]
    G --> I([Controles: play/pause, velocidade, loop, minimizar])
    H --> J([Controles: play/pause, fechar])

Fluxo: useLoopControl

flowchart TD
    A([loopState ativo]) --> B[setInterval 500ms]
    B --> C[player.getCurrentTime]
    C --> D{currentTime >= loopState.end?}
    D -- Sim --> E[player.seekTo loopState.start]
    E --> F([Reinicia do ponto de início])
    D -- Não --> G([Aguarda próximo tick])
    H([duration disponível pela primeira vez]) --> I{loopState.end não definido?}
    I -- Sim --> J[setLoopState.end = duration]
    I -- Não --> K([Manter end existente])

Fluxo: Dimensionamento do Player

flowchart TD
    A([screenWidth, windowHeight disponíveis]) --> B[Calcular videoHeight]
    B --> C[candidato = screenWidth × 9/16]
    C --> D[máximo = windowHeight / 4]
    D --> E[videoHeight = min candidato máximo]
    E --> F([Player renderizado com altura calculada])

Estados do Player

stateDiagram-v2
    [*] --> Fechado
    Fechado --> Full: Usuário abre vídeo
    Full --> Mini: Usuário minimiza
    Mini --> Full: Usuário expande
    Full --> Fechado: Usuário fecha
    Mini --> Fechado: Usuário fecha no mini
    Full --> Full: Muda velocidade / ativa loop
    Full --> Full: Marca início/fim do loop

flowchart LR
    A([Botão mais]) --> B[ModalType: mais]
    C([Botão velocidade]) --> D[ModalType: velocidade]
    E([Botão loop]) --> F[ModalType: repetir]
    B & D & F --> G{Modal ativo?}
    G -- Mesmo tipo --> H[Fecha modal: null]
    G -- Outro tipo --> I[Troca para novo tipo]