@moviie/player-expo 0.4.0

package/src/components/moviie-video.web.tsx

@@ -0,0 +1,167 @@
+import {
+  createElement,
+  forwardRef,
+  useCallback,
+  useEffect,
+  useMemo,
+  type ForwardedRef,
+} from "react"
+import { View } from "react-native"
+
+import {
+  MOVIIE_PLAYER_EXPO_EMBED_JS_MARKER_ATTR,
+  MOVIIE_WATCH_EMBED_JS_PATH,
+} from "../constants"
+import { resolveMoviieWatchOrigin } from "../lib/build-moviie-watch-embed-url"
+import { resolveWebEmbedIframeSrc } from "../lib/resolve-web-embed-iframe-src"
+
+import type { MoviieVideoProps, MoviieWatchEmbedIframeHandle } from "./moviie-video-props"
+import type { MoviieVideoSurfaceRef } from "./controls/moviie-controls"
+
+function assignForwardedRef<T>(
+  forwarded: ForwardedRef<T>,
+  instance: T | null
+): void {
+  if (typeof forwarded === "function") {
+    forwarded(instance)
+    return
+  }
+  if (forwarded) {
+    forwarded.current = instance
+  }
+}
+
+function toEmbedIframeHandle(
+  node: HTMLIFrameElement | null
+): MoviieWatchEmbedIframeHandle | null {
+  if (node == null) {
+    return null
+  }
+  return {
+    get contentWindow() {
+      const win = node.contentWindow
+      if (win == null) {
+        return null
+      }
+      return {
+        postMessage(message: unknown, targetOrigin: string): void {
+          win.postMessage(message, targetOrigin)
+        },
+      }
+    },
+  }
+}
+
+const WEB_VIDEO_SURFACE_STUB: MoviieVideoSurfaceRef = {
+  async enterFullscreen(): Promise<void> {
+    /* iframe UI gerido pelo embed */
+  },
+  async exitFullscreen(): Promise<void> {
+    /* iframe UI gerido pelo embed */
+  },
+  async startPictureInPicture(): Promise<void> {
+    /* não aplicável ao stub web */
+  },
+  async stopPictureInPicture(): Promise<void> {
+    /* não aplicável ao stub web */
+  },
+}
+
+export const MoviieVideo = forwardRef<MoviieVideoSurfaceRef, MoviieVideoProps>(
+  function MoviieVideo(props, forwardedRef) {
+    const {
+      player: _player,
+      playback = null,
+      children,
+      style,
+      loadEmbedScript = true,
+      onEmbedIframeRef,
+      nativeControls: _nativeControls,
+      native: _native,
+      controlsAutoHideMs: _controlsAutoHideMs,
+      controlsVisibleByDefault: _controlsVisibleByDefault,
+      pictureInPicture: _pictureInPicture,
+      pictureInPictureAutoStart: _pictureInPictureAutoStart,
+    } = props
+
+    useEffect(() => {
+      assignForwardedRef(forwardedRef, WEB_VIDEO_SURFACE_STUB)
+      return () => {
+        assignForwardedRef(forwardedRef, null)
+      }
+    }, [forwardedRef])
+
+    useEffect(() => {
+      if (!loadEmbedScript) {
+        return
+      }
+      if (typeof document === "undefined") {
+        return
+      }
+      const origin = resolveMoviieWatchOrigin()
+      const scriptSrc = `${origin}${MOVIIE_WATCH_EMBED_JS_PATH}`
+      const selector = `script[${MOVIIE_PLAYER_EXPO_EMBED_JS_MARKER_ATTR}]`
+      if (document.querySelector(selector) != null) {
+        return
+      }
+      const s = document.createElement("script")
+      s.setAttribute(MOVIIE_PLAYER_EXPO_EMBED_JS_MARKER_ATTR, "1")
+      s.src = scriptSrc
+      s.async = true
+      document.head.appendChild(s)
+    }, [loadEmbedScript])
+
+    const iframeSrc = useMemo(
+      () => resolveWebEmbedIframeSrc(playback),
+      [playback]
+    )
+
+    const iframeTitle = playback?.title ?? "Vídeo"
+
+    const bridgeIframeRef = useCallback(
+      (node: HTMLIFrameElement | null) => {
+        onEmbedIframeRef?.(toEmbedIframeHandle(node))
+      },
+      [onEmbedIframeRef]
+    )
+
+    const iframeStyle = useMemo(
+      () => ({
+        borderWidth: 0,
+        flexGrow: 1,
+        width: "100%" as const,
+        height: "100%" as const,
+      }),
+      []
+    )
+
+    if (iframeSrc == null) {
+      if (__DEV__) {
+        console.warn(
+          "[@moviie/player-expo] MoviieVideo (web) precisa de `playback.embedId` — obtenha `playback` com `useMoviiePlayer`."
+        )
+      }
+      return (
+        <View style={[{ flexGrow: 1, alignSelf: "stretch" }, style]}>
+          {children}
+        </View>
+      )
+    }
+
+    return (
+      <View style={[{ flexGrow: 1, alignSelf: "stretch" }, style]}>
+        {createElement("iframe", {
+          ref: bridgeIframeRef,
+          src: iframeSrc,
+          title: iframeTitle,
+          allow:
+            "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen",
+          allowFullScreen: true,
+          loading: "lazy",
+          style: iframeStyle,
+        })}
+        {children}
+      </View>
+    )
+  }
+)

package/src/components/overlays/moviie-watermark.tsx

@@ -0,0 +1,53 @@
+import { useCallback } from "react"
+import { Linking, Pressable, StyleSheet, Text, View } from "react-native"
+
+import type { MoviiePlaybackData } from "@moviie/player-sdk"
+
+import { MOVIIE_SKIN_WATERMARK_OPACITY } from "../../constants"
+import { buildMoviieBrandingMarketingUrl } from "../../lib/build-moviie-branding-marketing-url"
+
+export function MoviieWatermark({ playback }: { playback: MoviiePlaybackData }) {
+  if (!playback.branding.showWatermark) {
+    return null
+  }
+
+  const openMarketingSite = useCallback(() => {
+    void Linking.openURL(buildMoviieBrandingMarketingUrl())
+  }, [])
+
+  return (
+    <View style={styles.host} pointerEvents="box-none">
+      <Pressable
+        accessibilityRole="link"
+        accessibilityHint="Abre o site da Moviie no navegador"
+        accessibilityLabel="Marca Moviie"
+        onPress={openMarketingSite}
+        style={styles.mark}
+      >
+        <Text style={styles.markText}>Moviie</Text>
+      </Pressable>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  host: {
+    ...StyleSheet.absoluteFillObject,
+    justifyContent: "flex-end",
+    alignItems: "flex-end",
+    padding: 12,
+    pointerEvents: "box-none",
+  },
+  mark: {
+    opacity: MOVIIE_SKIN_WATERMARK_OPACITY,
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    borderRadius: 6,
+    backgroundColor: "rgba(0,0,0,0.35)",
+  },
+  markText: {
+    color: "#ffffff",
+    fontSize: 12,
+    fontWeight: "600",
+  },
+})

package/src/constants.ts

@@ -0,0 +1,374 @@
+export const MOVIIE_PLAYER_EXPO_PKG_VERSION = '0.4.0' as const
+
+export const MOVIIE_PLAYBACK_MEMORY_CACHE_TTL_MS = 5 * 60 * 1000
+
+/** Playback profile strings returned by the playback API (aligned with web embed). */
+export const MOVIIE_PLAYBACK_PROFILE = {
+  VSL: 'vsl',
+  CUSTOM: 'custom',
+} as const
+
+/**
+ * Smart Progress curve — mirrors {@link SMART_PROGRESS_CONFIG} on the web embed
+ * (`apps/web/src/app/embed/[id]/constants.ts`).
+ */
+export const MOVIIE_SMART_PROGRESS_CONFIG = {
+  R1: 0.18,
+  P1: 0.62,
+  R2: 0.8,
+  P2: 0.95,
+  P_MAX_BEFORE_END: 0.99,
+} as const
+
+/** Fill animation duration (ms); aligns with web `.moviie-smart-progress-fill` transition. */
+export const MOVIIE_SMART_PROGRESS_FILL_TRANSITION_MS = 150 as const
+
+/** Absolute bottom bar height (dp) for native Smart Progress strip. */
+export const MOVIIE_SMART_PROGRESS_BAR_HEIGHT_DP = 12 as const
+
+export const MOVIIE_SMART_PROGRESS_Z_INDEX = 34 as const
+
+/**
+ * SecureStore key prefix for resume position (`{prefix}{embedId}`).
+ * Embed IDs are UUIDs from the API.
+ */
+export const MOVIIE_REMEMBER_POSITION_STORAGE_PREFIX = 'moviie.resume_position.' as const
+
+/** Debounce interval before persisting resume position while playing. */
+export const MOVIIE_REMEMBER_POSITION_DEBOUNCE_MS = 5000 as const
+
+/** Matches embed/web framing defaults when `contentFit` is omitted on `MoviieVideo`. */
+export const MOVIIE_VIDEO_DEFAULT_CONTENT_FIT = {
+  VERTICAL: 'contain',
+  HORIZONTAL: 'cover',
+} as const
+
+export const MOVIIE_BRANDING_MARKETING_ORIGIN = 'https://moviie.ai' as const
+
+/** Origin público da página watch/embed (sem barra final). Override: `EXPO_PUBLIC_MOVIIE_WATCH_ORIGIN`. */
+export const MOVIIE_WATCH_ORIGIN_DEFAULT = 'https://watch.moviie.ai' as const
+
+/**
+ * Variável `EXPO_PUBLIC_*` para override do origin watch/embed em Expo Web (`resolveMoviieWatchOrigin`).
+ */
+export const EXPO_PUBLIC_MOVIIE_WATCH_ORIGIN_ENV = 'EXPO_PUBLIC_MOVIIE_WATCH_ORIGIN' as const
+
+/** Path público do script da API JS do embed (relativo ao watch origin). */
+export const MOVIIE_WATCH_EMBED_JS_PATH = '/embed.js' as const
+
+/**
+ * Atributo único no `<script>` injectado em Expo Web para evitar duplicar `embed.js`
+ * quando há vários `MoviieVideo` montados.
+ */
+export const MOVIIE_PLAYER_EXPO_EMBED_JS_MARKER_ATTR = 'data-moviie-player-expo-embed-js' as const
+
+/**
+ * Variável `EXPO_PUBLIC_*` que override a base da API Moviie em **dev only**.
+ * O Metro inlina qualquer `EXPO_PUBLIC_*` em build time, sem precisar de
+ * `expo-constants`. Em produção o SDK usa sempre o default `https://api.moviie.ai/v1`.
+ *
+ * Exemplo `.env.local`:
+ *   EXPO_PUBLIC_MOVIIE_API_BASE_URL=http://localhost:3000/api/v1
+ */
+export const EXPO_PUBLIC_MOVIIE_API_BASE_URL_ENV = 'EXPO_PUBLIC_MOVIIE_API_BASE_URL' as const
+
+/**
+ * Variável `EXPO_PUBLIC_*` que override a base de telemetria em **dev only**.
+ * Caso omitida, deriva-se de `{origin}/telemetry/v1` a partir de `apiBaseUrl`.
+ */
+export const EXPO_PUBLIC_MOVIIE_EVENTS_BASE_URL_ENV = 'EXPO_PUBLIC_MOVIIE_EVENTS_BASE_URL' as const
+
+export const MOVIIE_BRANDING_UTM_PARAM_SOURCE = 'utm_source' as const
+export const MOVIIE_BRANDING_UTM_PARAM_MEDIUM = 'utm_medium' as const
+export const MOVIIE_BRANDING_UTM_PARAM_CAMPAIGN = 'utm_campaign' as const
+
+export const MOVIIE_BRANDING_UTM_SOURCE_VALUE = 'player-expo' as const
+export const MOVIIE_BRANDING_UTM_MEDIUM_VALUE = 'branding' as const
+
+/** Espelha `PLAYER_EMBED_BRAND_UTM` do embed web (`apps/web/src/app/embed/[id]/constants.ts`). */
+export const MOVIIE_EMBED_BRAND_UTM = {
+  SOURCE: 'moviie_embed_player',
+  MEDIUM: 'video_control_bar',
+  CAMPAIGN: 'logo_click',
+} as const
+
+export const MOVIIE_SKIN_DEFAULT_ACCENT_HEX = '#6366f1' as const
+
+/**
+ * Valor legado para a prop `controlsAutoHideMs` / `autoHideMs`: o chrome da skin Moviie já não
+ * usa temporizador para ocultar — só ao toque fora ou ações (play, seek).
+ */
+export const MOVIIE_SKIN_CONTROLS_AUTO_HIDE_MS = 3000 as const
+
+export const MOVIIE_SKIN_CONTROLS_FADE_MS = 240 as const
+
+export const MOVIIE_SKIN_WATERMARK_OPACITY = 0.7 as const
+
+export const MOVIIE_SKIN_CONTROL_ICON_PX = 22 as const
+
+/**
+ * Largura lógica de referência do layout da skin (ex.: frame Figma / iPhone ~390pt).
+ * Dimensões em `MOVIIE_SKIN_*_AT_REFERENCE` / tokens da timeline escalam com `windowWidth`.
+ */
+export const MOVIIE_SKIN_LAYOUT_REFERENCE_WIDTH_PT = 390 as const
+
+/** Limite inferior do factor de escala (telefones mais estreitos). */
+export const MOVIIE_SKIN_LAYOUT_SCALE_MIN = 0.72 as const
+
+/**
+ * Limite superior do factor de escala: não aumenta além do design de referência em ecrãs largos.
+ */
+export const MOVIIE_SKIN_LAYOUT_SCALE_MAX = 1 as const
+
+/**
+ * Distância do HUD inferior (tempo, marca) às bordas laterais do vídeo e ao padding interno do relógio —
+ * valor na largura de referência ({@link MOVIIE_SKIN_LAYOUT_REFERENCE_WIDTH_PT}).
+ */
+export const MOVIIE_SKIN_FLOATING_HUD_EDGE_INSET_PX = 6 as const
+
+/**
+ * Espaço entre a linha do relógio/marca e o topo da área da timeline — referência.
+ * Separado de {@link MOVIIE_SKIN_FLOATING_HUD_EDGE_INSET_PX} para poder encostar ao footer sem afetar margens horizontais.
+ * Valor 0 = máximo colado (útil para experimentar layout).
+ */
+export const MOVIIE_SKIN_FLOATING_HUD_ABOVE_TIMELINE_GAP_AT_REFERENCE_PT = 0 as const
+
+/** Hit slop do wordmark e do fullscreen substituto no HUD inferior — px (valor físico independente da escala do layout). */
+export const MOVIIE_SKIN_FLOATING_HUD_TRAILING_HIT_SLOP_PX = 8 as const
+
+/**
+ * Diâmetro da película circular dos botões do HUD inferior (fullscreen, PiP, cast) — referência.
+ */
+export const MOVIIE_SKIN_FLOATING_FULLSCREEN_SCRIM_DIAMETER_AT_REFERENCE_PT = 44 as const
+
+/**
+ * Tamanho do ícone dentro dessa película — referência.
+ */
+export const MOVIIE_SKIN_FLOATING_FULLSCREEN_ICON_AT_REFERENCE_PT = 26 as const
+
+/**
+ * Ícones do canto superior (cast, PiP, fullscreen) sem película, com marca visível — referência.
+ * Cada ícone aplica seu próprio fator de compensação visual sobre este valor, pois os
+ * paths SVG têm densidades de preenchimento diferentes dentro do viewBox.
+ */
+export const MOVIIE_SKIN_FLOATING_FULLSCREEN_TOP_ICON_AT_REFERENCE_PT = 36 as const
+
+/**
+ * Fatores de escala visual por ícone do canto superior.
+ * Cast/PiP usam viewBox 0 0 24 24 (Material); Fullscreen usa viewBox 0 0 32 32 (media-icons 1.1.5).
+ * As densidades de preenchimento são semelhantes entre si, mas Cast (Material 24px) ocupa mais
+ * área visual que Fullscreen (32px com cantos L), daí o cast ter escala ligeiramente menor.
+ */
+export const MOVIIE_SKIN_TOP_ICON_CAST_VISUAL_SCALE = 0.65 as const
+export const MOVIIE_SKIN_TOP_ICON_PIP_VISUAL_SCALE = 0.8 as const
+export const MOVIIE_SKIN_TOP_ICON_FULLSCREEN_VISUAL_SCALE = 0.8 as const
+
+/**
+ * Espaço entre botões da linha direita do HUD (cast, PiP, fullscreen) — referência.
+ * Maior que {@link MOVIIE_SKIN_FLOATING_HUD_EDGE_INSET_PX} para evitar toques acidentais
+ * em botões adjacentes.
+ */
+export const MOVIIE_SKIN_FLOATING_HUD_BUTTON_GAP_AT_REFERENCE_PT = 10 as const
+
+/** Raio dos cantos do indicador de tempo — valor na largura de referência. */
+export const MOVIIE_SKIN_FLOATING_HUD_CLOCK_CORNER_RADIUS_PX = 6 as const
+
+/** Opacidade da película preta detrás dos botões de chrome (0–1). */
+export const MOVIIE_SKIN_CHROME_SCRIM_BLACK_ALPHA = 0.5 as const
+
+/** Película preta por detrás dos elementos de chrome (timing, ícones). */
+export const MOVIIE_SKIN_CHROME_SCRIM_BLACK_RGBA =
+  `rgba(0,0,0,${MOVIIE_SKIN_CHROME_SCRIM_BLACK_ALPHA})` as const
+
+/** Opacidade dos controlos do chrome no estado normal (repouso). */
+export const MOVIIE_SKIN_CHROME_CONTROL_REST_OPACITY = 1 as const
+
+/**
+ * Opacidade dos controlos do chrome ao premir — feedback visual (seek, play, fullscreen).
+ */
+export const MOVIIE_SKIN_CHROME_CONTROL_PRESSED_OPACITY = 0.72 as const
+
+/** Preto nos stops do degradê vertical da skin (opacidade via `stopOpacity`). */
+export const MOVIIE_SKIN_CHROME_GRADIENT_BLACK_HEX = '#000000' as const
+
+/** Opacidade na borda “cheia” do degradê (outro extremo é totalmente transparente). */
+export const MOVIIE_SKIN_CHROME_GRADIENT_EDGE_ALPHA = 0.62 as const
+
+/**
+ * Altura da faixa reservada ao degradê nas bordas — referência (maior = mais “respiro” transparente).
+ * O escuro concentra-se junto à borda via {@link MOVIIE_SKIN_CHROME_EDGE_GRADIENT_EDGE_SOLID_FADE_END_FRACTION}.
+ * O inferior acrescenta a altura da timeline quando a barra de progresso está visível.
+ */
+export const MOVIIE_SKIN_CHROME_EDGE_GRADIENT_HEIGHT_AT_REFERENCE_PT = 104 as const
+
+/**
+ * Ao longo da faixa, fração [0–1] medida a partir da borda escura até estar 100% transparente.
+ * Ex.: 0.48 → ~48% da altura da faixa com degradê; o resto é totalmente transparente (valor intermédio entre faixa longa e lábio rente à borda).
+ */
+export const MOVIIE_SKIN_CHROME_EDGE_GRADIENT_EDGE_SOLID_FADE_END_FRACTION = 0.48 as const
+
+/**
+ * Altura mínima transparente entre faixa superior e inferior após escalar somas —
+ * evita sobreposição das duas faixas (“película” em todo o vídeo).
+ */
+export const MOVIIE_SKIN_CHROME_EDGE_GRADIENT_MIN_CLEAR_MIDDLE_PX = 56 as const
+
+/** IDs estáveis para `LinearGradient` em SVG (skin chrome). */
+export const MOVIIE_SKIN_CHROME_SVG_GRADIENT_BOTTOM_EDGE_ID =
+  'moviie_skin_chrome_gradient_bottom_edge' as const
+
+export const MOVIIE_SKIN_CHROME_SVG_GRADIENT_TOP_EDGE_ID =
+  'moviie_skin_chrome_gradient_top_edge' as const
+
+/** Volume normalizado (0–1) abaixo disto usa o ícone `volume-low` como no Vidstack. */
+export const MOVIIE_SKIN_VOLUME_LOW_ICON_THRESHOLD = 0.45 as const
+
+/** Foreground dos ícones e texto da skin (branco sólido). */
+export const MOVIIE_SKIN_CHROME_FOREGROUND_HEX = '#ffffff' as const
+
+/**
+ * Espelha valores numéricos de `OrientationLock` do pacote `expo-screen-orientation` (SDK 52).
+ * Mantidos aqui para funções puras e testes Vitest sem resolver o entry nativo do Expo.
+ */
+export const MOVIIE_EXPO_SCREEN_ORIENTATION_LOCK_VALUE = {
+  LANDSCAPE: 5,
+  LANDSCAPE_LEFT: 6,
+  LANDSCAPE_RIGHT: 7,
+} as const
+
+export type MoviieExpoOrientationLockValue =
+  (typeof MOVIIE_EXPO_SCREEN_ORIENTATION_LOCK_VALUE)[keyof typeof MOVIIE_EXPO_SCREEN_ORIENTATION_LOCK_VALUE]
+
+/** Duração da transição (rotação + escala) do fullscreen JS na skin Moviie. */
+export const MOVIIE_SKIN_CUSTOM_FULLSCREEN_TRANSITION_MS = 420 as const
+
+/**
+ * Rotação final em graus no eixo Z (sentido horário no React Native): vídeo + chrome giram juntos.
+ */
+export const MOVIIE_SKIN_CUSTOM_FULLSCREEN_ROTATE_Z_DEGREES = 90 as const
+
+/** Escala inicial ao entrar em fullscreen (anima até 1). Saída anima de 1 até este valor. */
+export const MOVIIE_SKIN_CUSTOM_FULLSCREEN_ENTER_SCALE_START = 0.78 as const
+
+/**
+ * `contentFit` no fullscreen rotacionado: preenche a altura útil do palco; barras laterais ficam a preto do palco.
+ */
+export const MOVIIE_SKIN_CUSTOM_FULLSCREEN_VIDEO_CONTENT_FIT = 'contain' as const
+
+/** Fundo do palco em fullscreen JS e placeholder inline durante o modo expandido. */
+export const MOVIIE_SKIN_CUSTOM_FULLSCREEN_STAGE_BACKGROUND_HEX = '#000000' as const
+
+/**
+ * Margem extra (dp/pt) para dentro dos safe area insets no palco fullscreen rotacionado —
+ * evita cortar chrome por cantos redondos / overshoot da animação.
+ */
+export const MOVIIE_SKIN_CUSTOM_FULLSCREEN_STAGE_OVERSCAN_PX = 12 as const
+
+/**
+ * Reforço da margem do HUD/timeline em fullscreen rotacionado (escala com {@link MOVIIE_SKIN_LAYOUT_REFERENCE_WIDTH_PT}).
+ */
+export const MOVIIE_SKIN_CUSTOM_FULLSCREEN_HUD_EDGE_BOOST_REFERENCE_PT = 14 as const
+
+/** Margem de buffer (s) abaixo da cabeça de reprodução para detetar stalls em HLS. */
+export const MOVIIE_SKIN_BUFFER_UNDERRUN_LEAD_SECONDS = 0.35 as const
+
+export const MOVIIE_SKIN_SEEK_JUMP_SECONDS = 10 as const
+
+export const MOVIIE_SKIN_CENTER_PLAY_ICON_PX = 40 as const
+
+/**
+ * Diâmetro da película circular do play/pause central — referência.
+ * Entre o círculo compacto (~52) e o layout antigo (~108 na referência).
+ */
+export const MOVIIE_SKIN_CENTER_PLAY_SCRIM_DIAMETER_AT_REFERENCE_PT = 80 as const
+
+/**
+ * Diâmetro da película circular dos botões seek (±10 s) junto ao play — referência.
+ * Compacto em torno do ícone ({@link MOVIIE_SKIN_SEEK_ICON_PX}); inferior ao play.
+ */
+export const MOVIIE_SKIN_CENTER_SEEK_SCRIM_DIAMETER_AT_REFERENCE_PT = 46 as const
+
+/** Ícone seek ±10 s no cluster central — referência (escala com layout). */
+export const MOVIIE_SKIN_SEEK_ICON_PX = 28 as const
+
+/** Espaço horizontal entre botões do cluster central — valor na largura de referência. */
+export const MOVIIE_SKIN_CENTER_CLUSTER_COLUMN_GAP_PX = 12 as const
+
+/** Tamanho do texto do relógio — valor na largura de referência. */
+export const MOVIIE_SKIN_CLOCK_TEXT_FONT_SIZE_AT_REFERENCE_PT = 12 as const
+
+/** Altura da faixa única da timeline — valor na largura de referência. */
+export const MOVIIE_SKIN_TIMELINE_BAR_HEIGHT_PX = 3 as const
+
+/** Diâmetro do thumb de scrub — valor na largura de referência. */
+export const MOVIIE_SKIN_TIMELINE_THUMB_DIAMETER_PX = 14 as const
+
+/** Padding vertical acima da timeline — referência (0 = mínimo para testes de densidade). */
+export const MOVIIE_SKIN_TIMELINE_TOUCH_PADDING_VERTICAL_PX = 0 as const
+
+/**
+ * Padding vertical mínimo (dp lógico) por cima do rail dentro da área do vídeo — bem menor que antes:
+ * o alvo tátil prioritário é {@link MOVIIE_SKIN_TIMELINE_SCRUB_HIT_SLOP_BOTTOM_DP} por baixo do frame.
+ */
+export const MOVIIE_SKIN_TIMELINE_TOUCH_EXPANSION_VERTICAL_DP = 2 as const
+
+/**
+ * Expansão lateral modesta (`View.hitSlop`) — evita faixa enorme dentro do vídeo.
+ */
+export const MOVIIE_SKIN_TIMELINE_SCRUB_HIT_SLOP_HORIZONTAL_DP = 3 as const
+
+/**
+ * Pouca expansão para cima: apenas cobrir metade superior do thumb / gestos desde logo acima do trilho.
+ */
+export const MOVIIE_SKIN_TIMELINE_SCRUB_HIT_SLOP_TOP_DP = 2 as const
+
+/**
+ * Expansão inferior dominante — cobre o thumb quando ultrapassa o limite inferior do vídeo
+ * (`hitSlop` não ocupa layout dentro do frame; toques contam por baixo da overlay).
+ */
+export const MOVIIE_SKIN_TIMELINE_SCRUB_HIT_SLOP_BOTTOM_DP = 14 as const
+
+/** Trilho base da timeline: branco ~30%. */
+export const MOVIIE_SKIN_TIMELINE_RAIL_BACKGROUND_RGBA = 'rgba(255,255,255,0.3)' as const
+
+/** Camada de buffer sobre o trilho (mesma cor/opacidade que o trilho). */
+export const MOVIIE_SKIN_TIMELINE_BUFFER_LAYER_RGBA = MOVIIE_SKIN_TIMELINE_RAIL_BACKGROUND_RGBA
+
+/** Contorno do thumb da timeline para contraste sobre vídeo claro. */
+export const MOVIIE_SKIN_TIMELINE_THUMB_BORDER_RGBA = 'rgba(0,0,0,0.35)' as const
+
+/** Diâmetro do thumb durante scrub (drag) relativamente ao thumb em repouso. */
+export const MOVIIE_SKIN_TIMELINE_THUMB_DRAG_DIAMETER_MULTIPLIER = 1.65 as const
+
+/**
+ * Segundos antes do fim onde o progresso mostrado fixa em 100% quando não está a reproduzir —
+ * o `currentTime` do motor costuma ficar ligeiramente abaixo de `duration` no fim.
+ */
+export const MOVIIE_SKIN_TIMELINE_END_SNAP_EPSILON_SECONDS = 0.15 as const
+
+/**
+ * Distância máxima (s) entre a posição de release do scrub e um boundary de capítulo
+ * para que o snap automático seja ativado.
+ */
+export const MOVIIE_SKIN_TIMELINE_CHAPTER_SNAP_THRESHOLD_SECONDS = 2 as const
+
+/** Área do `ActivityIndicator` small no overlay de buffering — valor na largura de referência. */
+export const MOVIIE_SKIN_BUFFERING_INDICATOR_SLOT_PX = 28 as const
+
+/** Largura intrínseca do SVG wordmark (viewBox). */
+export const MOVIIE_SKIN_BRAND_MARK_ARTBOARD_WIDTH_PX = 173 as const
+
+/** Altura intrínseca do SVG wordmark (viewBox). */
+export const MOVIIE_SKIN_BRAND_MARK_ARTBOARD_HEIGHT_PX = 46 as const
+
+/**
+ * Largura visual alvo do wordmark quando `windowWidth` = {@link MOVIIE_SKIN_LAYOUT_REFERENCE_WIDTH_PT}
+ * (entre o tamanho compacto antigo e o artboard completo).
+ */
+export const MOVIIE_SKIN_BRAND_MARK_TARGET_WIDTH_AT_REFERENCE_PT = 68 as const
+
+/** ViewBox do SVG wordmark Moviie (173×46). */
+export const MOVIIE_EMBED_BRAND_VIEW_BOX = '0 0 173 46' as const
+
+/** Espessura do traço das letras “ii” no wordmark (coordenadas do viewBox). */
+export const MOVIIE_EMBED_BRAND_LETTERMARK_STROKE_WIDTH = 3 as const

package/src/hooks/use-moviie-event.ts

@@ -0,0 +1,103 @@
+import { useEffect } from "react"
+
+import type { VideoPlayer } from "expo-video"
+import { PLAYER_API_EVENTS } from "@moviie/player-types"
+
+type PublicPlayerEvent =
+  (typeof PLAYER_API_EVENTS)[keyof typeof PLAYER_API_EVENTS]
+
+export function useMoviieEvent(
+  player: VideoPlayer | null,
+  eventName: PublicPlayerEvent,
+  handler: () => void
+): void {
+  useEffect(() => {
+    if (!player) {
+      return
+    }
+
+    if (eventName === PLAYER_API_EVENTS.TIME_UPDATE) {
+      const previousInterval = player.timeUpdateEventInterval
+      if (player.timeUpdateEventInterval <= 0) {
+        player.timeUpdateEventInterval = 0.25
+      }
+      const sub = player.addListener("timeUpdate", () => {
+        handler()
+      })
+      return () => {
+        sub.remove()
+        player.timeUpdateEventInterval = previousInterval
+      }
+    }
+
+    if (eventName === PLAYER_API_EVENTS.PLAY) {
+      const sub = player.addListener("playingChange", ({ isPlaying }) => {
+        if (isPlaying) {
+          handler()
+        }
+      })
+      return () => {
+        sub.remove()
+      }
+    }
+
+    if (eventName === PLAYER_API_EVENTS.PAUSE) {
+      const sub = player.addListener("playingChange", ({ isPlaying }) => {
+        if (!isPlaying) {
+          handler()
+        }
+      })
+      return () => {
+        sub.remove()
+      }
+    }
+
+    if (eventName === PLAYER_API_EVENTS.ENDED) {
+      const sub = player.addListener("playToEnd", () => {
+        handler()
+      })
+      return () => {
+        sub.remove()
+      }
+    }
+
+    if (eventName === PLAYER_API_EVENTS.DURATION_CHANGE) {
+      const sub = player.addListener("sourceChange", () => {
+        handler()
+      })
+      return () => {
+        sub.remove()
+      }
+    }
+
+    if (eventName === PLAYER_API_EVENTS.VOLUME_CHANGE) {
+      const sub = player.addListener("volumeChange", () => {
+        handler()
+      })
+      return () => {
+        sub.remove()
+      }
+    }
+
+    if (eventName === PLAYER_API_EVENTS.READY) {
+      const sub = player.addListener("statusChange", ({ status }) => {
+        if (status === "readyToPlay") {
+          handler()
+        }
+      })
+      return () => {
+        sub.remove()
+      }
+    }
+
+    if (
+      typeof __DEV__ !== "undefined" &&
+      __DEV__
+    ) {
+      console.warn(
+        `[@moviie/player-expo] useMoviieEvent: "${eventName}" não tem mapeamento para expo-video nesta versão`
+      )
+    }
+    return undefined
+  }, [player, eventName, handler])
+}