YouTube Player — Design Técnico

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

Arquitetura de Componentes

YoutubePlayerView (videoId, onClose)
  ├── playerRef: YoutubeIframeRef
  ├── usePlayerState()       → playing, rate, duration, updateDuration, setPlaying
  ├── useMiniPlayerDrag()    → translatePosition, resetPosition, updateDragOffset, commitDragOffset
  ├── useStopYoutubeVideo()  → para play ao sair da tela
  ├── [comentado] useLoopControl(playerRef, duration)
  ├── [comentado] useModalState()
  ├── isMini: boolean (local state)
  │
  ├── [full mode]  FullPlayerControls
  │    ├── play/pause
  │    ├── minimizar → setIsMini(true)
  │    ├── velocidade (modal)
  │    └── loop (modal)
  │
  └── [mini mode]  YoutubeBarPlayerView / MiniPlayerControls
       ├── GestureDetector (Gesture.pan)
       ├── Animated.View (useAnimatedStyle → translatePosition)
       ├── play/pause
       └── fechar → onClose()

Cálculo de Dimensões

const videoHeight = Math.min(
  screenWidth * (9 / 16), // aspect ratio 16:9
  windowHeight / 4, // max 25% da tela
);

Mini Player

Constante	Valor
WIDTH	200px
HEIGHT	112px (16:9)
CONTROLS_HEIGHT	28px
TOTAL_HEIGHT	140px
INIT_TOP	16px

Posicionado com translateX/Y via react-native-reanimated. Limites calculados via DragLimits para não sair da tela.

Loop Control (useLoopControl) — Atual: Comentado

setInterval(async () => {
  const currentTime = await playerRef.current?.getCurrentTime();
  if (currentTime !== undefined && currentTime >= loopState.end) {
    playerRef.current?.seekTo(loopState.start, true);
  }
}, 500);

Quando duration disponível e loopState.end não definido → setLoopState.end = duration.

Estados do Player

Estado	Transição
Fechado	→ Full ao receber videoId
Full	→ Mini via handleSwitchToMini
Mini	→ Full via tap no mini player
Qualquer	→ Fechado via onClose()

Riscos e Lacunas

• 🟡 useLoopControl e useModalState comentados no código atual — features em desenvolvimento ou pausadas
• 🟡 setInterval de 500ms pode causar bateria/performance em sessões longas
• 🟡 Web: react-native-youtube-iframe usa CJS em web — ver gotcha em /memories/repo/react-native-youtube-iframe-web-cjs-gotcha.md
• 🟡 YoutubeBarPlayerView não lido completamente — controles do mini player não confirmados