@moviie/player-expo 0.4.0

package/src/components/controls/moviie-bottom-timeline.tsx

@@ -0,0 +1,477 @@
+import { useCallback, useEffect, useMemo, useRef } from "react"
+import { StyleSheet, View, type LayoutChangeEvent } from "react-native"
+import { Gesture, GestureDetector } from "react-native-gesture-handler"
+import {
+  runOnJS,
+  useDerivedValue,
+  useAnimatedStyle,
+  useSharedValue,
+} from "react-native-reanimated"
+
+import {
+  MOVIIE_SKIN_CHROME_FOREGROUND_HEX,
+  MOVIIE_SKIN_TIMELINE_BUFFER_LAYER_RGBA,
+  MOVIIE_SKIN_TIMELINE_RAIL_BACKGROUND_RGBA,
+  MOVIIE_SKIN_TIMELINE_SCRUB_HIT_SLOP_BOTTOM_DP,
+  MOVIIE_SKIN_TIMELINE_SCRUB_HIT_SLOP_HORIZONTAL_DP,
+  MOVIIE_SKIN_TIMELINE_SCRUB_HIT_SLOP_TOP_DP,
+  MOVIIE_SKIN_TIMELINE_THUMB_BORDER_RGBA,
+  MOVIIE_SKIN_TIMELINE_THUMB_DRAG_DIAMETER_MULTIPLIER,
+  MOVIIE_SKIN_TIMELINE_TOUCH_EXPANSION_VERTICAL_DP,
+} from "../../constants"
+import type { MoviieSkinLayoutMetrics } from "../../lib/build-moviie-skin-layout-metrics"
+import { clampUnitInterval } from "../../lib/clamp-unit-interval"
+import { computePlaybackProgressRatio } from "../../lib/compute-playback-progress-ratio"
+import { computeTimelineScrubCommitTime } from "../../lib/compute-timeline-scrub-commit-time"
+import { ReanimatedView } from "../../lib/jsx-native-bridge"
+import { resolveSkinAccentColor } from "../../lib/resolve-skin-accent-color"
+
+import { useMoviieSkinChrome } from "./moviie-skin-chrome-context"
+
+function createMoviieSkinBottomTimelineStyles(layout: MoviieSkinLayoutMetrics) {
+  return StyleSheet.create({
+    root: {
+      bottom: 0,
+      left: 0,
+      overflow: "visible",
+      pointerEvents: "box-none",
+      position: "absolute",
+      right: 0,
+      zIndex: 24,
+    },
+    touchExpansion: {
+      overflow: "visible",
+      paddingBottom: 0,
+      paddingTop:
+        layout.timelineTouchPaddingVerticalPx +
+        MOVIIE_SKIN_TIMELINE_TOUCH_EXPANSION_VERTICAL_DP,
+      position: "relative",
+    },
+    trackStack: {
+      overflow: "visible",
+      width: "100%",
+    },
+    thumbBase: {
+      borderColor: MOVIIE_SKIN_TIMELINE_THUMB_BORDER_RGBA,
+      borderWidth: 1,
+      elevation: 8,
+      position: "absolute",
+      zIndex: 10,
+    },
+    unifiedBarSlot: {
+      overflow: "visible",
+      position: "relative",
+      width: "100%",
+    },
+    railLayer: {
+      backgroundColor: MOVIIE_SKIN_TIMELINE_RAIL_BACKGROUND_RGBA,
+      bottom: 0,
+      height: layout.timelineBarHeightPx,
+      left: 0,
+      position: "absolute",
+      right: 0,
+      zIndex: 0,
+    },
+    bufferLayer: {
+      backgroundColor: MOVIIE_SKIN_TIMELINE_BUFFER_LAYER_RGBA,
+      bottom: 0,
+      height: layout.timelineBarHeightPx,
+      left: 0,
+      position: "absolute",
+      zIndex: 1,
+    },
+    progressLayer: {
+      bottom: 0,
+      height: layout.timelineBarHeightPx,
+      left: 0,
+      position: "absolute",
+      zIndex: 2,
+    },
+  })
+}
+
+export function MoviieSkinBottomTimeline() {
+  const {
+    playback,
+    chromeVisible,
+    layout,
+    player,
+    setTimelineScrubClockSeconds,
+    ui,
+  } = useMoviieSkinChrome()
+
+  const styles = useMemo(
+    () => createMoviieSkinBottomTimelineStyles(layout),
+    [layout]
+  )
+
+  const { controls } = playback
+  const accent = resolveSkinAccentColor(playback.branding.primaryColor)
+  const foreground = MOVIIE_SKIN_CHROME_FOREGROUND_HEX
+
+  const durationOk =
+    controls.showProgress &&
+    Number.isFinite(ui.duration) &&
+    ui.duration > 0 &&
+    !player.isLive
+
+  const progressRatioLive = computePlaybackProgressRatio({
+    currentTime: ui.currentTime,
+    duration: ui.duration,
+    durationOk,
+    playing: ui.playing,
+  })
+
+  const bufferRatioLive =
+    durationOk &&
+    Number.isFinite(ui.bufferedPosition) &&
+    ui.bufferedPosition >= 0
+      ? clampUnitInterval(ui.bufferedPosition / ui.duration)
+      : 0
+
+  // ── Shared values (UI thread) ─────────────────────────────────────────────
+  const isDraggingSV = useSharedValue(false)
+  const awaitingUnlockSV = useSharedValue(false)
+  const scrubRatioSV = useSharedValue(0)
+  const progressRatioSV = useSharedValue(progressRatioLive)
+  const bufferRatioSV = useSharedValue(bufferRatioLive)
+  const trackWidthSV = useSharedValue(0)
+  const durationSV = useSharedValue(ui.duration)
+  const chromeVisibleSV = useSharedValue(chromeVisible)
+  const timelineAccentEngagedSV = useSharedValue(false)
+  const thumbBaseDiamSV = useSharedValue(layout.timelineThumbDiameterPx)
+  const barHeightSV = useSharedValue(layout.timelineBarHeightPx)
+
+  // ── JS refs ────────────────────────────────────────────────────────────────
+  const isDraggingRef = useRef(false)
+  // shouldResumeRef permanece true até playingChange confirmar que o player retomou.
+  // Isso permite retry via statusChange caso player.play() seja chamado enquanto o seek
+  // ainda está em curso (expo-video pode ignorar play() durante loading).
+  const shouldResumeRef = useRef(false)
+  const progressRatioLiveRef = useRef(progressRatioLive)
+  progressRatioLiveRef.current = progressRatioLive
+  const chaptersRef = useRef(playback.chapters)
+  chaptersRef.current = playback.chapters
+  const chromeVisibleRef = useRef(chromeVisible)
+  chromeVisibleRef.current = chromeVisible
+
+  // ── Sync JS → shared values ────────────────────────────────────────────────
+  useEffect(() => {
+    if (!isDraggingRef.current) {
+      progressRatioSV.value = progressRatioLive
+    }
+  }, [progressRatioLive, progressRatioSV])
+
+  useEffect(() => {
+    bufferRatioSV.value = bufferRatioLive
+  }, [bufferRatioLive, bufferRatioSV])
+
+  useEffect(() => {
+    durationSV.value = ui.duration
+  }, [ui.duration, durationSV])
+
+  useEffect(() => {
+    thumbBaseDiamSV.value = layout.timelineThumbDiameterPx
+    barHeightSV.value = layout.timelineBarHeightPx
+  }, [
+    layout.timelineThumbDiameterPx,
+    layout.timelineBarHeightPx,
+    thumbBaseDiamSV,
+    barHeightSV,
+  ])
+
+  useEffect(() => {
+    chromeVisibleSV.value = chromeVisible
+    if (chromeVisible) {
+      timelineAccentEngagedSV.value = false
+      awaitingUnlockSV.value = false
+    }
+  }, [
+    chromeVisible,
+    chromeVisibleSV,
+    timelineAccentEngagedSV,
+    awaitingUnlockSV,
+  ])
+
+  // Retry em cada readyToPlay enquanto !dragging + shouldResume.
+  // Sem live seeks, este evento só pode vir do seek do commit → sem ambiguidade.
+  useEffect(() => {
+    const sub = player.addListener("statusChange", ({ status }) => {
+      if (shouldResumeRef.current && status === "readyToPlay" && !isDraggingRef.current) {
+        player.play()
+      }
+    })
+    return () => sub.remove()
+  }, [player])
+
+  // playingChange com isPlaying true é a confirmação autoritativa que o play() funcionou.
+  useEffect(() => {
+    const sub = player.addListener("playingChange", ({ isPlaying }) => {
+      if (isPlaying && !isDraggingRef.current) {
+        shouldResumeRef.current = false
+      }
+    })
+    return () => sub.remove()
+  }, [player])
+
+  // ── Derived values ─────────────────────────────────────────────────────────
+  const effectiveRatioSV = useDerivedValue(() =>
+    isDraggingSV.value ? scrubRatioSV.value : progressRatioSV.value
+  )
+
+  const showAccentSV = useDerivedValue(
+    () =>
+      chromeVisibleSV.value ||
+      isDraggingSV.value ||
+      timelineAccentEngagedSV.value
+  )
+
+  const showThumbSV = useDerivedValue(
+    () =>
+      chromeVisibleSV.value ||
+      isDraggingSV.value ||
+      timelineAccentEngagedSV.value
+  )
+
+  const thumbDiamSV = useDerivedValue(() =>
+    isDraggingSV.value
+      ? Math.round(
+          thumbBaseDiamSV.value * MOVIIE_SKIN_TIMELINE_THUMB_DRAG_DIAMETER_MULTIPLIER
+        )
+      : thumbBaseDiamSV.value
+  )
+
+  // ── Animated styles ────────────────────────────────────────────────────────
+  const progressBarStyle = useAnimatedStyle(() => ({
+    backgroundColor: showAccentSV.value ? accent : foreground,
+    width: `${effectiveRatioSV.value * 100}%`,
+  }))
+
+  const bufferBarStyle = useAnimatedStyle(() => ({
+    width: `${bufferRatioSV.value * 100}%`,
+  }))
+
+  const thumbStyle = useAnimatedStyle(() => {
+    if (!showThumbSV.value) {
+      return { opacity: 0 }
+    }
+    const diameter = thumbDiamSV.value
+    const radius = diameter / 2
+    const w = trackWidthSV.value
+    const left =
+      w > 0
+        ? Math.min(w - diameter, Math.max(0, effectiveRatioSV.value * w - radius))
+        : 0
+    const bh = barHeightSV.value
+    return {
+      opacity: 1,
+      backgroundColor: showAccentSV.value ? accent : foreground,
+      left,
+      width: diameter,
+      height: diameter,
+      borderRadius: radius,
+      bottom: bh / 2 - radius,
+    }
+  })
+
+  // ── JS callbacks ───────────────────────────────────────────────────────────
+  const onScrubBegin = useCallback(() => {
+    isDraggingRef.current = true
+    // Herda shouldResume de um commit anterior se o player ainda não retomou,
+    // senão usa o estado actual do player.
+    if (!shouldResumeRef.current) {
+      shouldResumeRef.current = player.playing
+    }
+  }, [player])
+
+  const onScrubUpdate = useCallback(
+    (ratio: number) => {
+      // Sem live seek: a barra anima via Reanimated (UI thread), o frame do vídeo
+      // só é actualizado no commit. Evita seeks concorrentes que interferem com o resume.
+      setTimelineScrubClockSeconds(ratio * durationSV.value)
+    },
+    [setTimelineScrubClockSeconds, durationSV]
+  )
+
+  const onScrubCommit = useCallback(
+    (ratio: number) => {
+      isDraggingRef.current = false
+      setTimelineScrubClockSeconds(null)
+      const dur = durationSV.value
+      if (!Number.isFinite(dur) || dur <= 0) return
+      const targetTime = computeTimelineScrubCommitTime({
+        ratio,
+        durationSeconds: dur,
+        chapters: chaptersRef.current,
+      })
+      player.currentTime = targetTime
+      // player.play() imediato pode ser ignorado se o seek ainda está em curso.
+      // O listener statusChange(readyToPlay) faz o retry enquanto shouldResumeRef=true.
+      // playingChange com isPlaying confirma e zera shouldResumeRef.
+      if (shouldResumeRef.current) {
+        player.play()
+      }
+    },
+    [setTimelineScrubClockSeconds, player, durationSV]
+  )
+
+  const onScrubCancel = useCallback(() => {
+    isDraggingRef.current = false
+    setTimelineScrubClockSeconds(null)
+    progressRatioSV.value = progressRatioLiveRef.current
+    // Cancel não faz seek — shouldResumeRef não muda.
+    // Se shouldResume=true (estava a tocar), o playingChange listener vai limpar quando
+    // o player retomar normalmente (ou o utilizador faz outro scrub).
+  }, [setTimelineScrubClockSeconds, progressRatioSV])
+
+  const onAccentEngage = useCallback(() => {
+    timelineAccentEngagedSV.value = true
+  }, [timelineAccentEngagedSV])
+
+  const onAccentDisengageCancel = useCallback(() => {
+    timelineAccentEngagedSV.value = false
+  }, [timelineAccentEngagedSV])
+
+  // ── Gesture ────────────────────────────────────────────────────────────────
+  // activeOffsetX: ativa só após 8 dp horizontal — evita conflito com ScrollView vertical.
+  // failOffsetY: cancela se o utilizador scrollar mais de 15 dp — devolve gesto ao ScrollView.
+  const panGesture = useMemo(
+    () =>
+      Gesture.Pan()
+        .activeOffsetX([-8, 8])
+        .failOffsetY([-15, 15])
+        .enabled(durationOk)
+        .onBegin(() => {
+          "worklet"
+          if (!chromeVisibleSV.value && !timelineAccentEngagedSV.value) {
+            awaitingUnlockSV.value = true
+            runOnJS(onAccentEngage)()
+          }
+        })
+        .onStart((e) => {
+          "worklet"
+          if (awaitingUnlockSV.value) {
+            // Primeira activação após accent-engage — aguarda onUpdate
+            return
+          }
+          isDraggingSV.value = true
+          runOnJS(onScrubBegin)()
+          const w = trackWidthSV.value
+          if (w <= 0) return
+          const ratio = Math.max(0, Math.min(1, e.x / w))
+          scrubRatioSV.value = ratio
+          runOnJS(onScrubUpdate)(ratio)
+        })
+        .onUpdate((e) => {
+          "worklet"
+          const w = trackWidthSV.value
+          if (w <= 0) return
+          const ratio = Math.max(0, Math.min(1, e.x / w))
+          if (awaitingUnlockSV.value) {
+            awaitingUnlockSV.value = false
+            isDraggingSV.value = true
+            runOnJS(onScrubBegin)()
+          }
+          if (!isDraggingSV.value) return
+          scrubRatioSV.value = ratio
+          runOnJS(onScrubUpdate)(ratio)
+        })
+        .onEnd(() => {
+          "worklet"
+          if (awaitingUnlockSV.value) {
+            awaitingUnlockSV.value = false
+            runOnJS(onAccentDisengageCancel)()
+            return
+          }
+          if (!isDraggingSV.value) return
+          const committed = scrubRatioSV.value
+          // Actualiza progressRatioSV ANTES de desactivar isDragging para evitar
+          // que effectiveRatioSV salte de volta para a posição antiga (visual "pause").
+          progressRatioSV.value = committed
+          isDraggingSV.value = false
+          scrubRatioSV.value = 0
+          runOnJS(onScrubCommit)(committed)
+        })
+        .onFinalize(() => {
+          "worklet"
+          if (awaitingUnlockSV.value) {
+            awaitingUnlockSV.value = false
+            runOnJS(onAccentDisengageCancel)()
+            return
+          }
+          if (isDraggingSV.value) {
+            isDraggingSV.value = false
+            scrubRatioSV.value = 0
+            runOnJS(onScrubCancel)()
+          }
+        }),
+    [
+      durationOk,
+      isDraggingSV,
+      awaitingUnlockSV,
+      scrubRatioSV,
+      progressRatioSV,
+      trackWidthSV,
+      chromeVisibleSV,
+      timelineAccentEngagedSV,
+      onAccentEngage,
+      onAccentDisengageCancel,
+      onScrubBegin,
+      onScrubUpdate,
+      onScrubCommit,
+      onScrubCancel,
+    ]
+  )
+
+  const onTrackLayout = useCallback(
+    (event: LayoutChangeEvent) => {
+      trackWidthSV.value = event.nativeEvent.layout.width
+    },
+    [trackWidthSV]
+  )
+
+  if (!durationOk) {
+    return null
+  }
+
+  const unifiedSlotHeightPx = Math.max(
+    layout.timelineThumbDiameterPx,
+    Math.round(
+      layout.timelineThumbDiameterPx * MOVIIE_SKIN_TIMELINE_THUMB_DRAG_DIAMETER_MULTIPLIER
+    )
+  )
+
+  const scrubHitSlop = {
+    top: MOVIIE_SKIN_TIMELINE_SCRUB_HIT_SLOP_TOP_DP,
+    bottom: MOVIIE_SKIN_TIMELINE_SCRUB_HIT_SLOP_BOTTOM_DP,
+    left: MOVIIE_SKIN_TIMELINE_SCRUB_HIT_SLOP_HORIZONTAL_DP,
+    right: MOVIIE_SKIN_TIMELINE_SCRUB_HIT_SLOP_HORIZONTAL_DP,
+  }
+
+  return (
+    <View pointerEvents="box-none" style={styles.root}>
+      <GestureDetector gesture={panGesture}>
+        <View hitSlop={scrubHitSlop} pointerEvents="auto" style={styles.touchExpansion}>
+          <View style={styles.trackStack}>
+            <View
+              accessibilityRole="progressbar"
+              accessibilityValue={{
+                max: 1,
+                min: 0,
+                now: progressRatioLive,
+              }}
+              collapsable={false}
+              style={[styles.unifiedBarSlot, { height: unifiedSlotHeightPx }]}
+              onLayout={onTrackLayout}
+            >
+              <View style={styles.railLayer} />
+              <ReanimatedView style={[styles.bufferLayer, bufferBarStyle]} />
+              <ReanimatedView style={[styles.progressLayer, progressBarStyle]} />
+              <ReanimatedView style={[styles.thumbBase, thumbStyle]} />
+            </View>
+          </View>
+        </View>
+      </GestureDetector>
+    </View>
+  )
+}

package/src/components/controls/moviie-cast-buttons.tsx

@@ -0,0 +1,96 @@
+import type { PressableProps, ViewStyle } from 'react-native'
+import type { ReactNode } from 'react'
+import { Pressable, View } from 'react-native'
+
+import {
+  MOVIIE_SKIN_CHROME_CONTROL_PRESSED_OPACITY,
+  MOVIIE_SKIN_CHROME_CONTROL_REST_OPACITY,
+  MOVIIE_SKIN_CHROME_FOREGROUND_HEX,
+  MOVIIE_SKIN_FLOATING_HUD_TRAILING_HIT_SLOP_PX,
+  MOVIIE_SKIN_TOP_ICON_CAST_VISUAL_SCALE,
+} from '../../constants'
+import type { MoviieSkinLayoutMetrics } from '../../lib/build-moviie-skin-layout-metrics'
+import { EmbedMediaIconCast, EmbedMediaIconCastConnected } from '../icons/embed-media-icons'
+
+function pressOpacity(pressed: boolean): Pick<ViewStyle, 'opacity'> {
+  return {
+    opacity: pressed
+      ? MOVIIE_SKIN_CHROME_CONTROL_PRESSED_OPACITY
+      : MOVIIE_SKIN_CHROME_CONTROL_REST_OPACITY,
+  }
+}
+
+function ScrimPad(props: {
+  accessibilityLabel: string
+  hitSlop?: PressableProps['hitSlop']
+  onPress: () => void
+  chromeScrimBaseStyle: object
+  style: object
+  children: ReactNode
+  selected: boolean
+}) {
+  return (
+    <Pressable
+      accessibilityLabel={props.accessibilityLabel}
+      accessibilityRole="button"
+      accessibilityState={{ selected: props.selected }}
+      hitSlop={props.hitSlop}
+      onPress={props.onPress}
+      style={(state) => [props.chromeScrimBaseStyle, props.style, pressOpacity(state.pressed)]}
+    >
+      {props.children}
+    </Pressable>
+  )
+}
+
+export function MoviieSkinCastCircleButton(props: {
+  castConnected: boolean
+  chromeScrimBaseStyle: object
+  circleScrimStyle: object
+  layout: MoviieSkinLayoutMetrics
+  onPress: () => void
+}) {
+  const Icon = props.castConnected ? EmbedMediaIconCastConnected : EmbedMediaIconCast
+  return (
+    <ScrimPad
+      accessibilityLabel={props.castConnected ? 'Encerrar transmissão' : 'Transmitir'}
+      chromeScrimBaseStyle={props.chromeScrimBaseStyle}
+      hitSlop={MOVIIE_SKIN_FLOATING_HUD_TRAILING_HIT_SLOP_PX}
+      onPress={props.onPress}
+      selected={props.castConnected}
+      style={props.circleScrimStyle}
+    >
+      <Icon
+        color={MOVIIE_SKIN_CHROME_FOREGROUND_HEX}
+        size={props.layout.floatingHudFullscreenIconPx}
+      />
+    </ScrimPad>
+  )
+}
+
+export function MoviieSkinCastTopBareButton(props: {
+  castConnected: boolean
+  layout: MoviieSkinLayoutMetrics
+  onPress: () => void
+}) {
+  const Icon = props.castConnected ? EmbedMediaIconCastConnected : EmbedMediaIconCast
+  return (
+    <Pressable
+      accessibilityLabel={props.castConnected ? 'Encerrar transmissão' : 'Transmitir'}
+      accessibilityRole="button"
+      accessibilityState={{ selected: props.castConnected }}
+      hitSlop={MOVIIE_SKIN_FLOATING_HUD_TRAILING_HIT_SLOP_PX}
+      onPress={props.onPress}
+      style={(state) => pressOpacity(state.pressed)}
+    >
+      <View>
+        <Icon
+          color={MOVIIE_SKIN_CHROME_FOREGROUND_HEX}
+          size={
+            props.layout.floatingHudFullscreenTopIconPx * MOVIIE_SKIN_TOP_ICON_CAST_VISUAL_SCALE
+          }
+        />
+      </View>
+    </Pressable>
+  )
+}