@moviie/player-expo 0.4.0

package/src/components/controls/moviie-skin-chrome-context.tsx

@@ -0,0 +1,374 @@
+import {
+  createContext,
+  type ReactNode,
+  type RefObject,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react"
+import { Animated, Easing, useWindowDimensions } from "react-native"
+
+import type { VideoPlayer } from "expo-video"
+
+import type { MoviiePlaybackData } from "@moviie/player-sdk"
+
+import {
+  MOVIIE_SKIN_CONTROLS_FADE_MS,
+  MOVIIE_SKIN_SEEK_JUMP_SECONDS,
+} from "../../constants"
+import {
+  buildMoviieSkinLayoutMetrics,
+  type MoviieSkinLayoutMetrics,
+} from "../../lib/build-moviie-skin-layout-metrics"
+import { computeMoviiePlaybackEnded } from "../../lib/compute-moviie-playback-ended"
+import { computePlaybackBuffering } from "../../lib/compute-playback-buffering"
+
+/** Subconjunto do VideoView nativo usado pela skin (tipagens expo-video × React). */
+export type MoviieVideoSurfaceRef = {
+  enterFullscreen?: () => Promise<void>
+  exitFullscreen?: () => Promise<void>
+  startPictureInPicture?: () => Promise<void>
+  stopPictureInPicture?: () => Promise<void>
+}
+
+export function usePlaybackUiSync(player: VideoPlayer): {
+  bufferedPosition: number
+  currentTime: number
+  duration: number
+  playing: boolean
+  status: string
+} {
+  const [snapshot, setSnapshot] = useState({
+    bufferedPosition: player.bufferedPosition,
+    currentTime: player.currentTime,
+    duration: player.duration,
+    playing: player.playing,
+    status: player.status,
+  })
+
+  useEffect(() => {
+    const subscriptions = [
+      player.addListener("timeUpdate", ({ currentTime }) => {
+        setSnapshot((previous) => ({
+          ...previous,
+          bufferedPosition: player.bufferedPosition,
+          currentTime,
+          duration: player.duration,
+          status: player.status,
+        }))
+      }),
+      player.addListener("playingChange", ({ isPlaying }) => {
+        setSnapshot((previous) => ({
+          ...previous,
+          playing: isPlaying,
+          bufferedPosition: player.bufferedPosition,
+          status: player.status,
+        }))
+      }),
+      player.addListener("sourceChange", () => {
+        setSnapshot({
+          bufferedPosition: player.bufferedPosition,
+          currentTime: player.currentTime,
+          duration: player.duration,
+          playing: player.playing,
+          status: player.status,
+        })
+      }),
+      player.addListener("statusChange", ({ status }) => {
+        setSnapshot((previous) => ({
+          ...previous,
+          bufferedPosition: player.bufferedPosition,
+          status,
+        }))
+      }),
+      player.addListener("playToEnd", () => {
+        setSnapshot((previous) => ({
+          ...previous,
+          playing: false,
+          bufferedPosition: player.bufferedPosition,
+          currentTime: player.currentTime,
+          duration: player.duration,
+          status: player.status,
+        }))
+      }),
+    ]
+
+    return () => {
+      for (const sub of subscriptions) {
+        sub.remove()
+      }
+    }
+  }, [player])
+
+  return snapshot
+}
+
+export type { MoviieSkinLayoutMetrics }
+
+export interface MoviieSkinChromeContextValue {
+  playback: MoviiePlaybackData
+  player: VideoPlayer
+  videoViewRef: RefObject<MoviieVideoSurfaceRef | null>
+  chromeVisible: boolean
+  chromeOpacity: Animated.Value
+  /** Posição (s) reflectida no relógio durante scrub; `null` = usar tempo do player. */
+  timelineScrubClockSeconds: number | null
+  setTimelineScrubClockSeconds: (seconds: number | null) => void
+  bumpChromeInteraction: () => void
+  dismissChrome: () => void
+  ui: ReturnType<typeof usePlaybackUiSync>
+  isBuffering: boolean
+  layout: MoviieSkinLayoutMetrics
+  togglePlay: () => void
+  seekBack: () => void
+  seekForward: () => void
+  /** Fullscreen da skin Moviie em JS (modal): alterna entrar/sair; não usa `VideoView.enterFullscreen`. */
+  toggleFullscreen: () => void
+  isCustomFullscreen: boolean
+  pictureInPictureControlEnabled: boolean
+  pictureInPictureActive: boolean
+  togglePictureInPicture: () => void
+  castControlEnabled: boolean
+  castConnected: boolean
+  openCastPicker: () => void
+}
+
+const MoviieSkinChromeContext = createContext<MoviieSkinChromeContextValue | null>(
+  null
+)
+
+export function useMoviieSkinChrome(): MoviieSkinChromeContextValue {
+  const ctx = useContext(MoviieSkinChromeContext)
+  if (ctx == null) {
+    throw new Error("useMoviieSkinChrome must be used within MoviieSkinChromeProvider")
+  }
+  return ctx
+}
+
+export interface MoviieSkinChromeProviderProps {
+  children: ReactNode
+  player: VideoPlayer
+  playback: MoviiePlaybackData
+  videoViewRef: RefObject<MoviieVideoSurfaceRef | null>
+  /** Quando definido com {@link onRequestExitCustomFullscreenAnimated}, o chrome usa fullscreen JS em vez de `VideoView.enterFullscreen`. */
+  customFullscreen?: boolean
+  /**
+   * Largura lógica para {@link buildMoviieSkinLayoutMetrics} (ex.: lado maior do ecrã no fullscreen rotacionado).
+   */
+  skinLayoutMetricsWidth?: number
+  onRequestEnterCustomFullscreen?: () => void
+  onRequestExitCustomFullscreenAnimated?: () => void
+  /**
+   * Ignorado: o chrome só oculta ao toque fora / comando (play, seek).
+   * Mantido por compatibilidade com chamadas existentes.
+   */
+  autoHideMs?: number
+  visibleByDefault?: boolean
+  pictureInPictureControlEnabled?: boolean
+  pictureInPictureActive?: boolean
+  togglePictureInPicture?: () => void
+  castControlEnabled?: boolean
+  castConnected?: boolean
+  openCastPicker?: () => void
+}
+
+export function MoviieSkinChromeProvider({
+  children,
+  player,
+  playback,
+  videoViewRef,
+  customFullscreen = false,
+  skinLayoutMetricsWidth,
+  onRequestEnterCustomFullscreen,
+  onRequestExitCustomFullscreenAnimated,
+  autoHideMs: _unusedAutoHideMs,
+  visibleByDefault = true,
+  pictureInPictureControlEnabled = false,
+  pictureInPictureActive = false,
+  togglePictureInPicture: togglePictureInPictureProp,
+  castControlEnabled = false,
+  castConnected = false,
+  openCastPicker: openCastPickerProp,
+}: MoviieSkinChromeProviderProps) {
+  void _unusedAutoHideMs
+
+  const noopPictureInPicture = useCallback(() => {}, [])
+
+  const togglePictureInPicture =
+    togglePictureInPictureProp ?? noopPictureInPicture
+
+  const noopOpenCastPicker = useCallback(() => {}, [])
+
+  const openCastPicker = openCastPickerProp ?? noopOpenCastPicker
+
+  const { width: windowWidth } = useWindowDimensions()
+  const layoutBasisWidth = skinLayoutMetricsWidth ?? windowWidth
+  const layout = useMemo(
+    () =>
+      buildMoviieSkinLayoutMetrics(layoutBasisWidth, {
+        fullscreenHudProtection: customFullscreen,
+      }),
+    [customFullscreen, layoutBasisWidth]
+  )
+
+  const ui = usePlaybackUiSync(player)
+
+  const [chromeVisible, setChromeVisible] = useState(visibleByDefault)
+  const [timelineScrubClockSeconds, setTimelineScrubClockSeconds] =
+    useState<number | null>(null)
+
+  const playbackEndedForChrome = useMemo(
+    () =>
+      computeMoviiePlaybackEnded({
+        playing: ui.playing,
+        currentTime: ui.currentTime,
+        duration: ui.duration,
+        isLive: player.isLive,
+        loop: player.loop,
+      }),
+    [ui.playing, ui.currentTime, ui.duration, player.isLive, player.loop]
+  )
+
+  useEffect(() => {
+    if (playbackEndedForChrome) {
+      setChromeVisible(true)
+    }
+  }, [playbackEndedForChrome])
+
+  const chromeOpacity = useRef(new Animated.Value(visibleByDefault ? 1 : 0)).current
+
+  useEffect(() => {
+    Animated.timing(chromeOpacity, {
+      duration: MOVIIE_SKIN_CONTROLS_FADE_MS,
+      easing: Easing.out(Easing.quad),
+      toValue: chromeVisible ? 1 : 0,
+      useNativeDriver: true,
+    }).start()
+  }, [chromeOpacity, chromeVisible])
+
+  const bumpChromeInteraction = useCallback(() => {
+    setChromeVisible(true)
+  }, [])
+
+  const dismissChrome = useCallback(() => {
+    setChromeVisible(false)
+  }, [])
+
+  const togglePlay = useCallback(() => {
+    if (player.playing) {
+      player.pause()
+      return
+    }
+    if (
+      computeMoviiePlaybackEnded({
+        playing: false,
+        currentTime: player.currentTime,
+        duration: player.duration,
+        isLive: player.isLive,
+        loop: player.loop,
+      })
+    ) {
+      player.currentTime = 0
+    }
+    player.play()
+    setChromeVisible(false)
+  }, [player])
+
+  const seekBack = useCallback(() => {
+    void player.seekBy(-MOVIIE_SKIN_SEEK_JUMP_SECONDS)
+    setChromeVisible(false)
+  }, [player])
+
+  const seekForward = useCallback(() => {
+    void player.seekBy(MOVIIE_SKIN_SEEK_JUMP_SECONDS)
+    setChromeVisible(false)
+  }, [player])
+
+  const toggleFullscreen = useCallback(() => {
+    if (customFullscreen) {
+      onRequestExitCustomFullscreenAnimated?.()
+      return
+    }
+    setChromeVisible(false)
+    if (onRequestEnterCustomFullscreen != null) {
+      onRequestEnterCustomFullscreen()
+      return
+    }
+    void videoViewRef.current?.enterFullscreen?.().catch(() => undefined)
+  }, [
+    customFullscreen,
+    onRequestEnterCustomFullscreen,
+    onRequestExitCustomFullscreenAnimated,
+    videoViewRef,
+  ])
+
+  const isBuffering = useMemo(
+    () =>
+      computePlaybackBuffering({
+        ...ui,
+        isLive: player.isLive,
+        loop: player.loop,
+      }),
+    [ui, player.isLive, player.loop]
+  )
+
+  const value = useMemo(
+    (): MoviieSkinChromeContextValue => ({
+      playback,
+      player,
+      videoViewRef,
+      chromeVisible,
+      chromeOpacity,
+      timelineScrubClockSeconds,
+      setTimelineScrubClockSeconds,
+      bumpChromeInteraction,
+      dismissChrome,
+      ui,
+      isBuffering,
+      layout,
+      togglePlay,
+      seekBack,
+      seekForward,
+      toggleFullscreen,
+      isCustomFullscreen: customFullscreen,
+      pictureInPictureActive,
+      pictureInPictureControlEnabled,
+      togglePictureInPicture,
+      castControlEnabled,
+      castConnected,
+      openCastPicker,
+    }),
+    [
+      playback,
+      player,
+      videoViewRef,
+      chromeVisible,
+      chromeOpacity,
+      timelineScrubClockSeconds,
+      setTimelineScrubClockSeconds,
+      bumpChromeInteraction,
+      dismissChrome,
+      ui,
+      isBuffering,
+      layout,
+      togglePlay,
+      seekBack,
+      seekForward,
+      toggleFullscreen,
+      customFullscreen,
+      pictureInPictureActive,
+      pictureInPictureControlEnabled,
+      togglePictureInPicture,
+      castControlEnabled,
+      castConnected,
+      openCastPicker,
+    ]
+  )
+
+  return (
+    <MoviieSkinChromeContext.Provider value={value}>{children}</MoviieSkinChromeContext.Provider>
+  )
+}

package/src/components/controls/moviie-skin-smart-progress.tsx

@@ -0,0 +1,157 @@
+import { useCallback, useEffect, useRef, useState } from "react"
+import { Animated, StyleSheet, View } from "react-native"
+
+import {
+  MOVIIE_SMART_PROGRESS_BAR_HEIGHT_DP,
+  MOVIIE_SMART_PROGRESS_FILL_TRANSITION_MS,
+  MOVIIE_SMART_PROGRESS_Z_INDEX,
+} from "../../constants"
+import { computePlaybackProgressRatio } from "../../lib/compute-playback-progress-ratio"
+import { mapSmartProgressRawRatio } from "../../lib/map-smart-progress-display-ratio"
+import { resolveSkinAccentColor } from "../../lib/resolve-skin-accent-color"
+
+import { useMoviieSkinChrome } from "./moviie-skin-chrome-context"
+
+const styles = StyleSheet.create({
+  container: {
+    bottom: 0,
+    height: MOVIIE_SMART_PROGRESS_BAR_HEIGHT_DP,
+    left: 0,
+    overflow: "hidden",
+    position: "absolute",
+    right: 0,
+    zIndex: MOVIIE_SMART_PROGRESS_Z_INDEX,
+  },
+  fill: {
+    bottom: 0,
+    height: "100%",
+    left: 0,
+    position: "absolute",
+    top: 0,
+  },
+})
+
+export function MoviieSkinSmartProgress() {
+  const { playback, player, timelineScrubClockSeconds, ui } = useMoviieSkinChrome()
+
+  const accent = resolveSkinAccentColor(playback.branding.primaryColor)
+
+  const durationOk =
+    playback.smartProgressEnabled &&
+    Number.isFinite(ui.duration) &&
+    ui.duration > 0 &&
+    !player.isLive
+
+  const [barVisible, setBarVisible] = useState(() => !player.muted)
+  const hasUserInteractedRef = useRef(!player.muted)
+  const lastDisplayedRef = useRef(0)
+  const progressAnim = useRef(new Animated.Value(0)).current
+
+  const syncMutedVisibility = useCallback(() => {
+    const muted = player.muted
+    if (!muted) {
+      hasUserInteractedRef.current = true
+      setBarVisible(true)
+      return
+    }
+    if (!hasUserInteractedRef.current) {
+      setBarVisible(false)
+    }
+  }, [player])
+
+  useEffect(() => {
+    syncMutedVisibility()
+    const subMuted = player.addListener("mutedChange", syncMutedVisibility)
+    const subVolume = player.addListener("volumeChange", syncMutedVisibility)
+    return () => {
+      subMuted.remove()
+      subVolume.remove()
+    }
+  }, [player, syncMutedVisibility])
+
+  useEffect(() => {
+    lastDisplayedRef.current = 0
+    progressAnim.setValue(0)
+  }, [playback.embedId, progressAnim])
+
+  useEffect(() => {
+    if (!durationOk || !barVisible) {
+      return
+    }
+
+    const scrubbing = timelineScrubClockSeconds != null
+    const clockSeconds = scrubbing ? timelineScrubClockSeconds : ui.currentTime
+
+    const realRatio = computePlaybackProgressRatio({
+      currentTime: clockSeconds,
+      duration: ui.duration,
+      durationOk: true,
+      playing: ui.playing,
+    })
+
+    const mapped = mapSmartProgressRawRatio(realRatio)
+    const next = scrubbing
+      ? mapped
+      : Math.max(mapped, lastDisplayedRef.current)
+
+    lastDisplayedRef.current = next
+
+    Animated.timing(progressAnim, {
+      duration: MOVIIE_SMART_PROGRESS_FILL_TRANSITION_MS,
+      toValue: next,
+      useNativeDriver: false,
+    }).start()
+  }, [
+    barVisible,
+    durationOk,
+    progressAnim,
+    timelineScrubClockSeconds,
+    ui.currentTime,
+    ui.duration,
+    ui.playing,
+  ])
+
+  useEffect(() => {
+    if (!durationOk || !barVisible) {
+      return
+    }
+
+    const sub = player.addListener("playToEnd", () => {
+      lastDisplayedRef.current = 1
+      Animated.timing(progressAnim, {
+        duration: MOVIIE_SMART_PROGRESS_FILL_TRANSITION_MS,
+        toValue: 1,
+        useNativeDriver: false,
+      }).start()
+    })
+    return () => sub.remove()
+  }, [barVisible, durationOk, player, progressAnim])
+
+  if (!playback.smartProgressEnabled || !durationOk) {
+    return null
+  }
+
+  if (!barVisible) {
+    return null
+  }
+
+  const widthInterpolated = progressAnim.interpolate({
+    extrapolate: "clamp",
+    inputRange: [0, 1],
+    outputRange: ["0%", "100%"],
+  })
+
+  return (
+    <View pointerEvents="none" style={styles.container}>
+      <Animated.View
+        style={[
+          styles.fill,
+          {
+            backgroundColor: accent,
+            width: widthInterpolated,
+          },
+        ]}
+      />
+    </View>
+  )
+}