@moviie/player-expo 0.4.0

package/src/components/moviie-video.tsx

@@ -0,0 +1,568 @@
+import {
+  createElement,
+  forwardRef,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ComponentType,
+  type ForwardedRef,
+} from 'react'
+import { View, StyleSheet, useWindowDimensions } from 'react-native'
+import { Easing, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated'
+import { ReanimatedView } from '../lib/jsx-native-bridge'
+import { SafeAreaProvider, useSafeAreaInsets } from 'react-native-safe-area-context'
+
+import type { VideoContentFit, VideoViewProps } from 'expo-video'
+import { VideoView, isPictureInPictureSupported } from 'expo-video'
+
+import type { MoviieVideoProps } from './moviie-video-props'
+import { safeInvokeMoviieTelemetry } from '../lib/moviie-telemetry-callbacks'
+
+import {
+  MOVIIE_PLAYBACK_PROFILE,
+  MOVIIE_SKIN_CUSTOM_FULLSCREEN_STAGE_BACKGROUND_HEX,
+  MOVIIE_SKIN_CUSTOM_FULLSCREEN_STAGE_OVERSCAN_PX,
+  MOVIIE_SKIN_CUSTOM_FULLSCREEN_VIDEO_CONTENT_FIT,
+  MOVIIE_VIDEO_DEFAULT_CONTENT_FIT,
+} from '../constants'
+import {
+  MOVIIE_SHELL_CROSSFADE_DURATION_MS,
+  MOVIIE_SHELL_DEFAULT_ASPECT_RATIO,
+} from '../lib/moviie-shell-tokens'
+import { partitionMoviieVideoHostStyle } from '../lib/partition-moviie-video-host-style'
+import { computeCustomFullscreenStageDimensions } from '../lib/compute-custom-fullscreen-stage-dimensions'
+import { buildMoviieVideoPresentationProps } from '../lib/build-moviie-video-presentation'
+import type { MoviieCastState } from '../lib/moviie-cast-adapter'
+import { getRegisteredCastAdapter } from '../lib/cast-adapter-registry'
+import { warnOnce } from '../lib/warn-once'
+
+import {
+  MoviieSkinChromeProvider,
+  MoviieSkinVideoOverlay,
+  type MoviieVideoSurfaceRef,
+} from './controls/moviie-controls'
+import {
+  MoviieSkinCustomFullscreenModal,
+  type MoviieSkinCustomFullscreenModalHandle,
+} from './moviie-skin-custom-fullscreen-modal'
+import { MoviiePlayerErrorShell } from './moviie-player-error-shell'
+import { MoviiePlayerLoadingShell } from './moviie-player-loading-shell'
+
+function assignForwardedRef<T>(forwarded: ForwardedRef<T>, instance: T | null): void {
+  if (typeof forwarded === 'function') {
+    forwarded(instance)
+    return
+  }
+  if (forwarded) {
+    forwarded.current = instance
+  }
+}
+
+export type { MoviieVideoProps } from './moviie-video-props'
+
+type VideoHostProps = VideoViewProps & {
+  ref?: (instance: MoviieVideoSurfaceRef | null) => void
+}
+
+const HostVideoView = VideoView as unknown as ComponentType<VideoHostProps>
+
+type ShellState = 'loading' | 'error' | 'ready'
+
+const CROSSFADE_TIMING = {
+  duration: MOVIIE_SHELL_CROSSFADE_DURATION_MS,
+  easing: Easing.out(Easing.quad),
+} as const
+
+export const MoviieVideo = forwardRef<MoviieVideoSurfaceRef, MoviieVideoProps>(
+  function MoviieVideo(props, ref) {
+    return (
+      <SafeAreaProvider>
+        <MoviieVideoImpl ref={ref} {...props} />
+      </SafeAreaProvider>
+    )
+  }
+)
+
+const MoviieVideoImpl = forwardRef<MoviieVideoSurfaceRef, MoviieVideoProps>(
+  function MoviieVideoImpl(props, forwardedRef) {
+    const {
+      player,
+      nativeControls,
+      native = false,
+      playback = null,
+      controlsAutoHideMs,
+      controlsVisibleByDefault,
+      pictureInPicture,
+      pictureInPictureAutoStart,
+      allowsPictureInPicture: passthroughAllowsPictureInPicture,
+      startsPictureInPictureAutomatically: passthroughStartsPictureInPictureAutomatically,
+      requiresLinearPlayback: passthroughRequiresLinearPlayback,
+      onPictureInPictureStart: userOnPictureInPictureStart,
+      onPictureInPictureStop: userOnPictureInPictureStop,
+      children,
+      style,
+      contentFit,
+      error = null,
+      isLoading = false,
+      aspectRatio,
+      onRetry,
+      retry,
+      castAdapter: castAdapterProp,
+      cast,
+      onTelemetryError,
+      onTelemetryEvent,
+      ...videoRest
+    } = props
+
+    // Auto-detect: use explicit prop first, then fall back to side-effect registry
+    // (populated when user imports "@moviie/player-expo/cast" in their app entry).
+    const castAdapter = castAdapterProp ?? getRegisteredCastAdapter()
+
+    // Telemetria opt-in: dispara `onTelemetryError` quando o fetch de playback
+    // falha. Ref garante one-shot por instância de erro (evita duplicar em
+    // re-renders) e `safeInvokeMoviieTelemetry` engole exceções do consumer.
+    const lastReportedErrorRef = useRef<Error | null>(null)
+    useEffect(() => {
+      if (error == null) {
+        lastReportedErrorRef.current = null
+        return
+      }
+      if (lastReportedErrorRef.current === error) {
+        return
+      }
+      lastReportedErrorRef.current = error
+      safeInvokeMoviieTelemetry(onTelemetryError, error, {
+        phase: 'playback_fetch',
+      })
+    }, [error, onTelemetryError])
+
+    // Stub para futuras integrações: o callback de eventos não é disparado
+    // ainda neste ciclo, mas o handle está reservado para wiring posterior
+    // (play/pause/seek/ended). Mantém a API estável.
+    void onTelemetryEvent
+
+    const useMoviieChrome = !native
+
+    const shellState: ShellState = playback != null ? 'ready' : error != null ? 'error' : 'loading'
+
+    const loadingOpacity = useSharedValue(shellState === 'loading' ? 1 : 0)
+    const errorOpacity = useSharedValue(shellState === 'error' ? 1 : 0)
+    const playerOpacity = useSharedValue(shellState === 'ready' ? 1 : 0)
+
+    useEffect(() => {
+      loadingOpacity.value = withTiming(shellState === 'loading' ? 1 : 0, CROSSFADE_TIMING)
+      errorOpacity.value = withTiming(shellState === 'error' ? 1 : 0, CROSSFADE_TIMING)
+      playerOpacity.value = withTiming(shellState === 'ready' ? 1 : 0, CROSSFADE_TIMING)
+    }, [shellState, loadingOpacity, errorOpacity, playerOpacity])
+
+    const loadingAnimatedStyle = useAnimatedStyle(() => ({
+      opacity: loadingOpacity.value,
+    }))
+    const errorAnimatedStyle = useAnimatedStyle(() => ({
+      opacity: errorOpacity.value,
+    }))
+    const playerAnimatedStyle = useAnimatedStyle(() => ({
+      opacity: playerOpacity.value,
+    }))
+
+    const effectiveOnRetry = useMemo(() => {
+      if (onRetry) return onRetry
+      if (retry) return retry
+      return undefined
+    }, [onRetry, retry])
+
+    const nativePresentationVideoProps = useMemo(() => {
+      if (playback != null) {
+        const embedBaseline = buildMoviieVideoPresentationProps({
+          pictureInPicture,
+          pictureInPictureAutoStart,
+          profile: playback.profile,
+          showPip: playback.controls.showPip,
+        })
+        return {
+          allowsPictureInPicture:
+            passthroughAllowsPictureInPicture ?? embedBaseline.allowsPictureInPicture,
+          startsPictureInPictureAutomatically:
+            passthroughStartsPictureInPictureAutomatically ??
+            embedBaseline.startsPictureInPictureAutomatically,
+          requiresLinearPlayback:
+            passthroughRequiresLinearPlayback ?? embedBaseline.requiresLinearPlayback,
+        }
+      }
+      return {
+        allowsPictureInPicture: passthroughAllowsPictureInPicture ?? false,
+        startsPictureInPictureAutomatically:
+          passthroughStartsPictureInPictureAutomatically ?? false,
+        requiresLinearPlayback: passthroughRequiresLinearPlayback ?? false,
+      }
+    }, [
+      playback,
+      pictureInPicture,
+      pictureInPictureAutoStart,
+      passthroughAllowsPictureInPicture,
+      passthroughStartsPictureInPictureAutomatically,
+      passthroughRequiresLinearPlayback,
+    ])
+
+    const pipControlEnabled = useMemo(() => {
+      if (!playback || !useMoviieChrome) {
+        return false
+      }
+      return isPictureInPictureSupported() && nativePresentationVideoProps.allowsPictureInPicture
+    }, [playback, useMoviieChrome, nativePresentationVideoProps.allowsPictureInPicture])
+
+    const innerRef = useRef<MoviieVideoSurfaceRef | null>(null)
+    const fullscreenModalRef = useRef<MoviieSkinCustomFullscreenModalHandle | null>(null)
+    const [customFullscreen, setCustomFullscreen] = useState(false)
+    const [pipActive, setPipActive] = useState(false)
+    const [castState, setCastState] = useState<MoviieCastState>(() =>
+      castAdapter?.isAvailable() ? castAdapter.getState() : 'unavailable'
+    )
+
+    const castDesired = useMemo(() => {
+      if (!playback || !useMoviieChrome) return false
+      if (cast === false) return false
+      if (cast === true) return true
+      return playback.controls.chromecast === true
+    }, [cast, playback, useMoviieChrome])
+
+    const castControlEnabled = useMemo(() => {
+      if (!castDesired) return false
+      return castAdapter?.isAvailable() === true
+    }, [castAdapter, castDesired])
+
+    const castConnected = castState === 'connected'
+
+    const openCastPicker = useCallback(() => {
+      void castAdapter?.showDevicePicker().catch(() => {
+        /* native picker may be unavailable; UX falls back to no-op */
+      })
+    }, [castAdapter])
+
+    // Subscribe to cast state changes when adapter is provided.
+    useEffect(() => {
+      if (!castAdapter?.isAvailable()) {
+        setCastState('unavailable')
+        return
+      }
+      setCastState(castAdapter.getState())
+      const unsubscribe = castAdapter.subscribe((next) => {
+        setCastState(next)
+      })
+      return () => {
+        unsubscribe()
+      }
+    }, [castAdapter])
+
+    // Warn once when embed asks for cast but no adapter is wired.
+    useEffect(() => {
+      if (castDesired && (!castAdapter || !castAdapter.isAvailable())) {
+        warnOnce(
+          'moviie-cast-missing-adapter',
+          '[@moviie/player-expo] O embed habilita Chromecast mas a lib não está disponível. Instale `react-native-google-cast` e adicione `import "@moviie/player-expo/cast"` no seu _layout.tsx (ver docs/player-expo/cast). Para desligar explicitamente, passe `cast={false}` em <MoviieVideo />.'
+        )
+      }
+    }, [castDesired, castAdapter])
+
+    // Hand off media to receiver when connected; pause local playback.
+    useEffect(() => {
+      if (!castAdapter?.isAvailable() || !playback || !player) return
+      if (castState !== 'connected') return
+      const startSeconds = player.currentTime ?? 0
+      void castAdapter
+        .loadMedia({
+          uri: playback.playback.uri,
+          title: playback.title,
+          posterUrl: playback.posterUrl,
+          durationSeconds: playback.durationSeconds ?? null,
+          startSeconds,
+        })
+        .then(() => {
+          try {
+            player.pause()
+          } catch {
+            /* player may be in an unrecoverable state */
+          }
+        })
+        .catch(() => {
+          /* loadMedia failure — keep local player running */
+        })
+    }, [castAdapter, castState, playback, player])
+
+    const { width: winW, height: winH } = useWindowDimensions()
+    const safeAreaInsets = useSafeAreaInsets()
+
+    const fullscreenStageLayout = useMemo(
+      () =>
+        computeCustomFullscreenStageDimensions({
+          windowHeight: winH,
+          safeInsets: safeAreaInsets,
+          stageOverscanPx: MOVIIE_SKIN_CUSTOM_FULLSCREEN_STAGE_OVERSCAN_PX,
+          windowWidth: winW,
+        }),
+      [
+        winW,
+        winH,
+        safeAreaInsets.bottom,
+        safeAreaInsets.left,
+        safeAreaInsets.right,
+        safeAreaInsets.top,
+      ]
+    )
+
+    useEffect(() => {
+      setPipActive(false)
+    }, [playback?.embedId])
+
+    const handleNativePictureInPictureStart = useCallback(() => {
+      if (useMoviieChrome && playback != null) {
+        setPipActive(true)
+      }
+      userOnPictureInPictureStart?.()
+    }, [playback, useMoviieChrome, userOnPictureInPictureStart])
+
+    const handleNativePictureInPictureStop = useCallback(() => {
+      if (useMoviieChrome && playback != null) {
+        setPipActive(false)
+      }
+      userOnPictureInPictureStop?.()
+    }, [playback, useMoviieChrome, userOnPictureInPictureStop])
+
+    const togglePictureInPicture = useCallback(async () => {
+      const surface = innerRef.current
+      if (!surface?.startPictureInPicture) {
+        return
+      }
+      try {
+        if (pipActive) {
+          await surface.stopPictureInPicture?.()
+        } else {
+          await surface.startPictureInPicture()
+        }
+      } catch {
+        /* PiP may be unavailable on device or misconfigured */
+      }
+    }, [pipActive])
+
+    const requestExitCustomFullscreenAnimated = useCallback(() => {
+      fullscreenModalRef.current?.animateExit()
+    }, [])
+
+    const setRefs = useCallback(
+      (node: MoviieVideoSurfaceRef | null) => {
+        innerRef.current = node
+        assignForwardedRef(forwardedRef, node)
+      },
+      [forwardedRef]
+    )
+
+    const resolvedNativeControlsDefault = native
+      ? playback?.profile === MOVIIE_PLAYBACK_PROFILE.VSL
+        ? false
+        : true
+      : false
+
+    const effectiveNativeControls = nativeControls ?? resolvedNativeControlsDefault
+
+    const intrinsicAspectRatio =
+      playback?.videoWidthPx != null &&
+      playback?.videoHeightPx != null &&
+      playback.videoWidthPx > 0 &&
+      playback.videoHeightPx > 0
+        ? playback.videoWidthPx / playback.videoHeightPx
+        : null
+
+    const effectiveAspectRatio =
+      intrinsicAspectRatio ?? aspectRatio ?? MOVIIE_SHELL_DEFAULT_ASPECT_RATIO
+
+    const effectiveContentFit: VideoContentFit | undefined =
+      contentFit ??
+      (playback != null
+        ? playback.isVertical
+          ? MOVIIE_VIDEO_DEFAULT_CONTENT_FIT.VERTICAL
+          : MOVIIE_VIDEO_DEFAULT_CONTENT_FIT.HORIZONTAL
+        : undefined)
+
+    const { columnStyle, surfaceStyle } = partitionMoviieVideoHostStyle(StyleSheet.flatten(style))
+
+    const stageContainerStyle = [
+      styles.videoStage,
+      {
+        width: '100%' as const,
+        aspectRatio: effectiveAspectRatio,
+        alignSelf: 'stretch' as const,
+        flex: 0 as const,
+      },
+      surfaceStyle,
+      useMoviieChrome && playback ? styles.videoStageClipNone : null,
+    ]
+
+    const inlineVideoAndOverlay =
+      player != null ? (
+        useMoviieChrome && playback ? (
+          <>
+            {createElement(HostVideoView, {
+              ...videoRest,
+              ...nativePresentationVideoProps,
+              ref: setRefs,
+              player,
+              nativeControls: effectiveNativeControls,
+              onPictureInPictureStart: handleNativePictureInPictureStart,
+              onPictureInPictureStop: handleNativePictureInPictureStop,
+              ...(effectiveContentFit != null ? { contentFit: effectiveContentFit } : {}),
+              style: styles.videoFill,
+            })}
+            <MoviieSkinVideoOverlay />
+          </>
+        ) : (
+          createElement(HostVideoView, {
+            ...videoRest,
+            ...nativePresentationVideoProps,
+            ref: setRefs,
+            player,
+            nativeControls: effectiveNativeControls,
+            onPictureInPictureStart: handleNativePictureInPictureStart,
+            onPictureInPictureStop: handleNativePictureInPictureStop,
+            ...(effectiveContentFit != null ? { contentFit: effectiveContentFit } : {}),
+            style: styles.videoFill,
+          })
+        )
+      ) : null
+
+    const renderInlineStage = (active: boolean) => {
+      if (!playback || !useMoviieChrome) {
+        return inlineVideoAndOverlay
+      }
+      if (active && !customFullscreen) {
+        return inlineVideoAndOverlay
+      }
+      return (
+        <View
+          style={[
+            styles.videoFill,
+            {
+              backgroundColor: MOVIIE_SKIN_CUSTOM_FULLSCREEN_STAGE_BACKGROUND_HEX,
+            },
+          ]}
+        />
+      )
+    }
+
+    const stageContent = (
+      <View style={stageContainerStyle}>
+        <ReanimatedView
+          style={[StyleSheet.absoluteFillObject, loadingAnimatedStyle, styles.shellLayer]}
+          pointerEvents={shellState === 'loading' ? 'auto' : 'none'}
+        >
+          {shellState === 'loading' || loadingOpacity.value > 0 ? (
+            <MoviiePlayerLoadingShell
+              posterUrl={playback?.posterUrl ?? null}
+              primaryColor={playback?.branding.primaryColor ?? null}
+            />
+          ) : null}
+        </ReanimatedView>
+        <ReanimatedView
+          style={[StyleSheet.absoluteFillObject, errorAnimatedStyle, styles.shellLayer]}
+          pointerEvents={shellState === 'error' ? 'auto' : 'none'}
+        >
+          {error ? <MoviiePlayerErrorShell error={error} onRetry={effectiveOnRetry} /> : null}
+        </ReanimatedView>
+        <ReanimatedView
+          style={[StyleSheet.absoluteFillObject, playerAnimatedStyle]}
+          pointerEvents={shellState === 'ready' ? 'auto' : 'none'}
+        >
+          {renderInlineStage(true)}
+        </ReanimatedView>
+      </View>
+    )
+
+    if (useMoviieChrome && playback && player) {
+      return (
+        <MoviieSkinChromeProvider
+          autoHideMs={controlsAutoHideMs}
+          customFullscreen={customFullscreen}
+          pictureInPictureActive={pipActive}
+          pictureInPictureControlEnabled={pipControlEnabled}
+          togglePictureInPicture={togglePictureInPicture}
+          castControlEnabled={castControlEnabled}
+          castConnected={castConnected}
+          openCastPicker={openCastPicker}
+          onRequestEnterCustomFullscreen={() => setCustomFullscreen(true)}
+          onRequestExitCustomFullscreenAnimated={requestExitCustomFullscreenAnimated}
+          playback={playback}
+          player={player}
+          skinLayoutMetricsWidth={
+            customFullscreen ? fullscreenStageLayout.layoutMetricsBasisWidth : undefined
+          }
+          videoViewRef={innerRef}
+          visibleByDefault={controlsVisibleByDefault}
+        >
+          <>
+            <View style={[styles.column, columnStyle]}>
+              {stageContent}
+              {children}
+            </View>
+            <MoviieSkinCustomFullscreenModal
+              ref={fullscreenModalRef}
+              visible={customFullscreen}
+              onExitComplete={() => setCustomFullscreen(false)}
+            >
+              <View style={styles.fullscreenStage}>
+                {createElement(HostVideoView, {
+                  ...videoRest,
+                  ...nativePresentationVideoProps,
+                  ref: setRefs,
+                  player,
+                  nativeControls: effectiveNativeControls,
+                  onPictureInPictureStart: handleNativePictureInPictureStart,
+                  onPictureInPictureStop: handleNativePictureInPictureStop,
+                  contentFit: MOVIIE_SKIN_CUSTOM_FULLSCREEN_VIDEO_CONTENT_FIT,
+                  style: StyleSheet.absoluteFillObject,
+                })}
+                <MoviieSkinVideoOverlay />
+              </View>
+            </MoviieSkinCustomFullscreenModal>
+          </>
+        </MoviieSkinChromeProvider>
+      )
+    }
+
+    return (
+      <View style={[styles.column, columnStyle]}>
+        {stageContent}
+        {children}
+        {castAdapter?.renderAndroidProxy?.()}
+      </View>
+    )
+  }
+)
+
+const styles = StyleSheet.create({
+  column: {
+    alignSelf: 'stretch',
+    width: '100%',
+  },
+  videoStage: {
+    overflow: 'hidden',
+    position: 'relative',
+    width: '100%',
+  },
+  videoStageClipNone: {
+    overflow: 'visible',
+  },
+  videoFill: {
+    flex: 1,
+    width: '100%',
+    alignSelf: 'stretch',
+  },
+  fullscreenStage: {
+    flex: 1,
+    position: 'relative',
+    width: '100%',
+  },
+  shellLayer: {
+    zIndex: 1,
+  },
+})