@moviie/player-expo 0.4.0

package/src/components/moviie-skin-custom-fullscreen-modal.tsx

@@ -0,0 +1,232 @@
+import {
+  forwardRef,
+  type ReactNode,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+} from 'react'
+import { Modal, Platform, StyleSheet, useWindowDimensions, View } from 'react-native'
+import Animated, {
+  runOnJS,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated'
+import { SafeAreaProvider, useSafeAreaInsets } from 'react-native-safe-area-context'
+import { moviieSetStatusBarHidden } from '../lib/optional-status-bar'
+
+import {
+  MOVIIE_SKIN_CUSTOM_FULLSCREEN_ENTER_SCALE_START,
+  MOVIIE_SKIN_CUSTOM_FULLSCREEN_ROTATE_Z_DEGREES,
+  MOVIIE_SKIN_CUSTOM_FULLSCREEN_STAGE_BACKGROUND_HEX,
+  MOVIIE_SKIN_CUSTOM_FULLSCREEN_STAGE_OVERSCAN_PX,
+  MOVIIE_SKIN_CUSTOM_FULLSCREEN_TRANSITION_MS,
+} from '../constants'
+import { computeCustomFullscreenStageDimensions } from '../lib/compute-custom-fullscreen-stage-dimensions'
+import { subscribeCustomFullscreenNativeOrientation } from '../lib/custom-fullscreen-native-orientation'
+import { ReanimatedView } from '../lib/jsx-native-bridge'
+import { resolveOrientationLockValueForRotateZDeg } from '../lib/resolve-orientation-lock-for-rotate-z-deg'
+
+const CUSTOM_FULLSCREEN_TIMING = {
+  duration: MOVIIE_SKIN_CUSTOM_FULLSCREEN_TRANSITION_MS,
+} as const
+
+/**
+ * Em iOS/Android o fullscreen usa `expo-screen-orientation`: o referencial da janela passa a landscape.
+ * Rotação Z adicional somaria com a orientação nativa e invertia o resultado.
+ * Na web mantemos rotação só em JS (sem lock nativo fiável no nosso fluxo).
+ */
+const CUSTOM_FULLSCREEN_USE_JS_STAGE_ROTATION = Platform.OS === 'web'
+
+export type MoviieSkinCustomFullscreenModalHandle = {
+  animateExit: () => void
+}
+
+export type MoviieSkinCustomFullscreenModalProps = {
+  visible: boolean
+  onExitComplete: () => void
+  children: ReactNode
+}
+
+const MoviieSkinCustomFullscreenModalInner = forwardRef<
+  MoviieSkinCustomFullscreenModalHandle,
+  MoviieSkinCustomFullscreenModalProps
+>(function MoviieSkinCustomFullscreenModalInner(props, ref) {
+  const orientationFinishRef = useRef<(() => Promise<void>) | null>(null)
+
+  const insets = useSafeAreaInsets()
+  const { height: winH, width: winW } = useWindowDimensions()
+
+  const { longSide, shortSide } = useMemo(
+    () =>
+      computeCustomFullscreenStageDimensions({
+        windowHeight: winH,
+        safeInsets: insets,
+        stageOverscanPx: MOVIIE_SKIN_CUSTOM_FULLSCREEN_STAGE_OVERSCAN_PX,
+        windowWidth: winW,
+      }),
+    [winW, winH, insets.bottom, insets.left, insets.right, insets.top]
+  )
+
+  const rotateZDeg = useSharedValue(0)
+  const scale = useSharedValue(1)
+
+  const emitExitComplete = useCallback(() => {
+    props.onExitComplete()
+  }, [props.onExitComplete])
+
+  const completeExitAfterNativeOrientationRestore = useCallback(() => {
+    void (async () => {
+      await orientationFinishRef.current?.()
+      emitExitComplete()
+    })()
+  }, [emitExitComplete])
+
+  const animateExit = useCallback(() => {
+    scale.value = withTiming(
+      MOVIIE_SKIN_CUSTOM_FULLSCREEN_ENTER_SCALE_START,
+      CUSTOM_FULLSCREEN_TIMING,
+      (finishedScale) => {
+        if (!CUSTOM_FULLSCREEN_USE_JS_STAGE_ROTATION && finishedScale) {
+          runOnJS(completeExitAfterNativeOrientationRestore)()
+        }
+      }
+    )
+
+    if (CUSTOM_FULLSCREEN_USE_JS_STAGE_ROTATION) {
+      rotateZDeg.value = withTiming(0, CUSTOM_FULLSCREEN_TIMING, (finished) => {
+        if (finished) {
+          runOnJS(emitExitComplete)()
+        }
+      })
+      return
+    }
+
+    rotateZDeg.value = 0
+  }, [completeExitAfterNativeOrientationRestore, emitExitComplete, rotateZDeg, scale])
+
+  useImperativeHandle(ref, () => ({ animateExit }), [animateExit])
+
+  useEffect(() => {
+    if (!props.visible) {
+      return
+    }
+    rotateZDeg.value = 0
+    scale.value = MOVIIE_SKIN_CUSTOM_FULLSCREEN_ENTER_SCALE_START
+    if (CUSTOM_FULLSCREEN_USE_JS_STAGE_ROTATION) {
+      rotateZDeg.value = withTiming(
+        MOVIIE_SKIN_CUSTOM_FULLSCREEN_ROTATE_Z_DEGREES,
+        CUSTOM_FULLSCREEN_TIMING
+      )
+    }
+    scale.value = withTiming(1, CUSTOM_FULLSCREEN_TIMING)
+  }, [props.visible, rotateZDeg, scale])
+
+  useEffect(() => {
+    if (!props.visible) {
+      return
+    }
+    moviieSetStatusBarHidden(true, 'fade')
+    return () => {
+      moviieSetStatusBarHidden(false, 'fade')
+    }
+  }, [props.visible])
+
+  useEffect(() => {
+    if (!props.visible || CUSTOM_FULLSCREEN_USE_JS_STAGE_ROTATION) {
+      orientationFinishRef.current = null
+      return
+    }
+
+    const targetLock = resolveOrientationLockValueForRotateZDeg(
+      MOVIIE_SKIN_CUSTOM_FULLSCREEN_ROTATE_Z_DEGREES
+    )
+    const sub = subscribeCustomFullscreenNativeOrientation(targetLock)
+    orientationFinishRef.current = () => sub.finish()
+
+    return () => {
+      orientationFinishRef.current = null
+      void sub.finish()
+    }
+  }, [props.visible])
+
+  const animatedStyle = useAnimatedStyle(() => {
+    if (CUSTOM_FULLSCREEN_USE_JS_STAGE_ROTATION) {
+      return {
+        transform: [{ rotateZ: `${rotateZDeg.value}deg` }, { scale: scale.value }],
+      }
+    }
+
+    return {
+      transform: [{ scale: scale.value }],
+    }
+  })
+
+  const stageStaticStyle = useMemo(
+    () => ({
+      height: shortSide,
+      width: longSide,
+    }),
+    [longSide, shortSide]
+  )
+
+  return (
+    <View
+      style={[styles.root, { backgroundColor: MOVIIE_SKIN_CUSTOM_FULLSCREEN_STAGE_BACKGROUND_HEX }]}
+    >
+      <View style={styles.centerSheet}>
+        <ReanimatedView style={[styles.rotatingStage, stageStaticStyle, animatedStyle]}>
+          {props.children}
+        </ReanimatedView>
+      </View>
+    </View>
+  )
+})
+
+export const MoviieSkinCustomFullscreenModal = forwardRef<
+  MoviieSkinCustomFullscreenModalHandle,
+  MoviieSkinCustomFullscreenModalProps
+>(function MoviieSkinCustomFullscreenModal(props, ref) {
+  return (
+    <Modal
+      animationType="none"
+      hardwareAccelerated={Platform.OS === 'android'}
+      onRequestClose={() => {
+        if (ref != null && typeof ref !== 'function') {
+          ref.current?.animateExit()
+        }
+      }}
+      presentationStyle="fullScreen"
+      statusBarTranslucent={Platform.OS === 'android'}
+      supportedOrientations={[
+        'portrait',
+        'portrait-upside-down',
+        'landscape',
+        'landscape-left',
+        'landscape-right',
+      ]}
+      visible={props.visible}
+    >
+      <SafeAreaProvider>
+        <MoviieSkinCustomFullscreenModalInner ref={ref} {...props} />
+      </SafeAreaProvider>
+    </Modal>
+  )
+})
+
+const styles = StyleSheet.create({
+  root: {
+    flex: 1,
+  },
+  centerSheet: {
+    alignItems: 'center',
+    flex: 1,
+    justifyContent: 'center',
+    overflow: 'visible',
+  },
+  rotatingStage: {
+    position: 'relative',
+  },
+})

package/src/components/moviie-video-props.ts

@@ -0,0 +1,134 @@
+import type { ReactNode } from 'react'
+
+import type { VideoPlayer, VideoViewProps } from 'expo-video'
+
+import type { MoviiePlaybackData } from '@moviie/player-sdk'
+
+import type { MoviieCastAdapter } from '../lib/moviie-cast-adapter'
+import type {
+  MoviieTelemetryOnError,
+  MoviieTelemetryOnEvent,
+} from '../lib/moviie-telemetry-callbacks'
+
+/**
+ * Subconjunto do elemento iframe usado na integração web (embed watch).
+ * Evita acoplar o pacote à lib DOM completa no tsconfig.
+ */
+export type MoviieWatchEmbedIframeHandle = {
+  readonly contentWindow: {
+    postMessage(message: unknown, targetOrigin: string): void
+  } | null
+}
+
+export type MoviieWatchEmbedIframeRefCallback = (
+  iframe: MoviieWatchEmbedIframeHandle | null
+) => void
+
+export type MoviieVideoProps = Omit<VideoViewProps, 'player'> & {
+  /**
+   * Instância `VideoPlayer` do expo-video (iOS / Android).
+   * Na web, `useMoviiePlayer` devolve `null` e `MoviieVideo` usa iframe do embed.
+   */
+  player: VideoPlayer | null
+  nativeControls?: boolean
+  /**
+   * When `true`, uses the platform `VideoView` chrome. When `false` or omitted, uses the Moviie custom chrome (default).
+   */
+  native?: boolean
+  playback?: MoviiePlaybackData | null
+  /**
+   * Optional override: when set, replaces embed `showPip` for PiP capability (with {@link pictureInPictureAutoStart}).
+   * Raw `VideoView` props (`allowsPictureInPicture`, …) still win when passed explicitly.
+   */
+  pictureInPicture?: boolean
+  /**
+   * Optional override for auto-start PiP. Embed has no field for this; omit for `false` unless set here or on the hook.
+   */
+  pictureInPictureAutoStart?: boolean
+  /**
+   * Ignorado quando `native` é omitido ou `false`: o chrome Moviie não usa temporizador para ocultar.
+   */
+  controlsAutoHideMs?: number
+  controlsVisibleByDefault?: boolean
+  children?: ReactNode
+  /**
+   * Web: callback com referência ao iframe após montagem, para `Moviie.getPlayer(iframe)` (`embed.js`).
+   */
+  onEmbedIframeRef?: MoviieWatchEmbedIframeRefCallback
+  /**
+   * Web: injeta `<script src="{watchOrigin}/embed.js">` uma vez. Ignorado em nativo. Default `true`.
+   */
+  loadEmbedScript?: boolean
+  /**
+   * Erro vindo de `useMoviiePlayer`/`useMoviiePlayback`. Quando preenchido (e sem `playback`),
+   * a shell built-in mostra feedback de erro com CTA mapeado por código.
+   */
+  error?: Error | null
+  /**
+   * Indica que o fetch de playback está em curso. Quando `true` (e sem `playback`), a shell
+   * built-in mostra estado de carregamento.
+   */
+  isLoading?: boolean
+  /**
+   * Aspect ratio do container reservado pelo player enquanto não há dimensões intrínsecas do
+   * vídeo. Default `16/9`. Após `playback` chegar, o container passa a usar `videoWidthPx/videoHeightPx`.
+   */
+  aspectRatio?: number
+  /**
+   * Callback opcional para erros transientes (network/rate_limit). Override do retry built-in.
+   * Tem precedência sobre {@link retry}.
+   */
+  onRetry?: () => void
+  /**
+   * Função de retry built-in fornecida por `useMoviiePlayer().retry`. Aceita o spread do hook
+   * sem boilerplate. Quando `onRetry` é fornecido, este é ignorado.
+   */
+  retry?: () => void
+  /**
+   * Adapter opcional para cast (Chromecast). Crie via factory do subpath
+   * `@moviie/player-expo/cast` (`createGoogleCastAdapter()`) e passe aqui.
+   *
+   * Quando omitido, o botão de cast não aparece. Se o embed pede cast
+   * (`playback.controls.chromecast === true`) e o adapter não foi fornecido,
+   * dispara um `console.warn` único com instruções.
+   */
+  castAdapter?: MoviieCastAdapter | null
+  /**
+   * Override explícito do flag `playback.controls.chromecast`. Quando definido,
+   * vence o painel:
+   *  - `true`: força exibir botão (se adapter estiver disponível);
+   *  - `false`: força esconder e silencia warning;
+   *  - omitido: usa o flag do painel.
+   */
+  cast?: boolean
+  /**
+   * Callback opt-in invocado quando um erro relevante ocorre — para integração
+   * com Sentry/PostHog/Datadog do consumer.
+   *
+   * Não substitui nem expande a telemetria interna enviada ao backend Moviie.
+   * Exceções lançadas dentro do callback são engolidas e logged via warn.
+   *
+   * @example
+   * ```tsx
+   * <MoviieVideo
+   *   {...moviie}
+   *   onTelemetryError={(error, ctx) => Sentry.captureException(error, { tags: ctx })}
+   * />
+   * ```
+   */
+  onTelemetryError?: MoviieTelemetryOnError
+  /**
+   * Callback opt-in invocado em eventos de ciclo de vida do player
+   * (play, pause, seek, fullscreen, cast). Útil para correlacionar UX com erros
+   * em ferramentas de observability do consumer.
+   *
+   * @example
+   * ```tsx
+   * <MoviieVideo
+   *   {...moviie}
+   *   onTelemetryEvent={(e) => posthog.capture(`player.${e.name}`, e)}
+   * />
+   * ```
+   */
+  onTelemetryEvent?: MoviieTelemetryOnEvent
+}