@moviie/player-expo 0.4.0

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

@@ -0,0 +1,585 @@
+import type { ReactNode } from 'react'
+import { useCallback, useMemo } from 'react'
+import type { PressableProps } from 'react-native'
+import {
+  ActivityIndicator,
+  Animated,
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
+  type ViewStyle,
+} from 'react-native'
+
+import {
+  MOVIIE_SKIN_CHROME_CONTROL_PRESSED_OPACITY,
+  MOVIIE_SKIN_CHROME_CONTROL_REST_OPACITY,
+  MOVIIE_SKIN_CHROME_FOREGROUND_HEX,
+  MOVIIE_SKIN_CHROME_SCRIM_BLACK_RGBA,
+  MOVIIE_SKIN_FLOATING_HUD_TRAILING_HIT_SLOP_PX,
+  MOVIIE_SKIN_TOP_ICON_FULLSCREEN_VISUAL_SCALE,
+  MOVIIE_SKIN_TOP_ICON_PIP_VISUAL_SCALE,
+} from '../../constants'
+import type { MoviieSkinLayoutMetrics } from '../../lib/build-moviie-skin-layout-metrics'
+import { computeMoviiePlaybackEnded } from '../../lib/compute-moviie-playback-ended'
+import { formatPlaybackClock } from '../../lib/format-playback-clock'
+import { AnimatedView } from '../../lib/jsx-native-bridge'
+import {
+  EmbedMediaIconFullscreen,
+  EmbedMediaIconFullscreenExit,
+  EmbedMediaIconPause,
+  EmbedMediaIconPictureInPicture,
+  EmbedMediaIconPlay,
+  EmbedMediaIconReplay,
+  EmbedMediaIconSeekBackward10,
+  EmbedMediaIconSeekForward10,
+} from '../icons/embed-media-icons'
+import { MoviieEmbedBrandMark } from '../icons/moviie-embed-brand-mark'
+
+import { MoviieSkinCastCircleButton, MoviieSkinCastTopBareButton } from './moviie-cast-buttons'
+import { MoviieSkinChromeEdgeGradients } from './moviie-chrome-edge-gradients'
+import { MoviieSkinChromeProvider, useMoviieSkinChrome } from './moviie-skin-chrome-context'
+import { MoviieSkinBottomTimeline } from './moviie-bottom-timeline'
+import { MoviieSkinSmartProgress } from './moviie-skin-smart-progress'
+
+export type { MoviieVideoSurfaceRef } from './moviie-skin-chrome-context'
+
+export { MoviieSkinChromeProvider }
+
+export { useMoviieSkinChrome } from './moviie-skin-chrome-context'
+
+function resolveChromeControlPressOpacityStyle(pressed: boolean): Pick<ViewStyle, 'opacity'> {
+  return {
+    opacity: pressed
+      ? MOVIIE_SKIN_CHROME_CONTROL_PRESSED_OPACITY
+      : MOVIIE_SKIN_CHROME_CONTROL_REST_OPACITY,
+  }
+}
+
+function createMoviieSkinOverlayStyles(layout: MoviieSkinLayoutMetrics) {
+  return StyleSheet.create({
+    chromeScrimBase: {
+      backgroundColor: MOVIIE_SKIN_CHROME_SCRIM_BLACK_RGBA,
+    },
+    floatingHud: {
+      bottom: 0,
+      left: 0,
+      pointerEvents: 'box-none',
+      position: 'absolute',
+      right: 0,
+    },
+    floatingHudInner: {
+      alignItems: 'center',
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      paddingBottom: layout.floatingHudAboveTimelineGapPx,
+      paddingHorizontal: layout.hudEdgeInsetPx,
+    },
+    floatingLeftSpacer: {
+      flex: 1,
+    },
+    floatingRight: {
+      alignItems: 'center',
+      columnGap: layout.floatingHudButtonGapPx,
+      flexDirection: 'row',
+      flexShrink: 0,
+    },
+    clockScrim: {
+      borderRadius: layout.hudClockCornerRadiusPx,
+      overflow: 'hidden',
+      paddingHorizontal: layout.hudEdgeInsetPx,
+      paddingVertical: layout.hudEdgeInsetPx,
+    },
+    clockText: {
+      color: MOVIIE_SKIN_CHROME_FOREGROUND_HEX,
+      fontSize: layout.clockTextFontSizePx,
+      fontVariant: ['tabular-nums'],
+    },
+    centerCluster: {
+      ...StyleSheet.absoluteFillObject,
+      alignItems: 'center',
+      justifyContent: 'center',
+      pointerEvents: 'box-none',
+    },
+    centerClusterRow: {
+      alignItems: 'center',
+      columnGap: layout.centerClusterColumnGapPx,
+      flexDirection: 'row',
+      justifyContent: 'center',
+    },
+    seekCircularScrim: {
+      alignItems: 'center',
+      borderRadius: layout.seekScrimOuterDiameterPx / 2,
+      height: layout.seekScrimOuterDiameterPx,
+      justifyContent: 'center',
+      overflow: 'hidden',
+      width: layout.seekScrimOuterDiameterPx,
+    },
+    playScrim: {
+      alignItems: 'center',
+      borderRadius: layout.playScrimOuterDiameterPx / 2,
+      height: layout.playScrimOuterDiameterPx,
+      justifyContent: 'center',
+      overflow: 'hidden',
+      width: layout.playScrimOuterDiameterPx,
+    },
+    playPlaceholder: {
+      height: layout.playScrimOuterDiameterPx,
+      width: layout.playScrimOuterDiameterPx,
+    },
+    fullscreenHudCircleScrim: {
+      alignItems: 'center',
+      borderRadius: layout.floatingHudFullscreenScrimDiameterPx / 2,
+      height: layout.floatingHudFullscreenScrimDiameterPx,
+      justifyContent: 'center',
+      overflow: 'hidden',
+      width: layout.floatingHudFullscreenScrimDiameterPx,
+    },
+    topFullscreenCorner: {
+      alignItems: 'center',
+      columnGap: layout.floatingHudButtonGapPx,
+      flexDirection: 'row',
+      pointerEvents: 'box-none',
+      position: 'absolute',
+      right: layout.hudEdgeInsetPx,
+      top: layout.hudEdgeInsetPx,
+      zIndex: 8,
+    },
+  })
+}
+
+function ChromeScrimPad(props: {
+  accessibilityLabel?: string
+  accessibilityRole?: 'button' | 'link'
+  children: ReactNode
+  chromeScrimBaseStyle: object
+  hitSlop?: PressableProps['hitSlop']
+  onPress?: () => void
+  style?: object
+}) {
+  const padStyle = [props.chromeScrimBaseStyle, props.style]
+  if (props.onPress != null) {
+    return (
+      <Pressable
+        accessibilityLabel={props.accessibilityLabel}
+        accessibilityRole={props.accessibilityRole ?? 'button'}
+        hitSlop={props.hitSlop}
+        onPress={props.onPress}
+        style={(state) => [
+          props.chromeScrimBaseStyle,
+          props.style,
+          resolveChromeControlPressOpacityStyle(state.pressed),
+        ]}
+      >
+        {props.children}
+      </Pressable>
+    )
+  }
+  return <View style={padStyle}>{props.children}</View>
+}
+
+function MoviieSkinPictureInPictureCircleButton(props: {
+  layout: MoviieSkinLayoutMetrics
+  onPress: () => void
+  pictureInPictureActive: boolean
+  styles: ReturnType<typeof createMoviieSkinOverlayStyles>
+}) {
+  return (
+    <ChromeScrimPad
+      accessibilityLabel={
+        props.pictureInPictureActive ? 'Fechar imagem no imagem' : 'Imagem no imagem'
+      }
+      chromeScrimBaseStyle={props.styles.chromeScrimBase}
+      hitSlop={MOVIIE_SKIN_FLOATING_HUD_TRAILING_HIT_SLOP_PX}
+      onPress={props.onPress}
+      style={props.styles.fullscreenHudCircleScrim}
+    >
+      <EmbedMediaIconPictureInPicture
+        color={MOVIIE_SKIN_CHROME_FOREGROUND_HEX}
+        size={props.layout.floatingHudFullscreenIconPx}
+      />
+    </ChromeScrimPad>
+  )
+}
+
+function MoviieSkinPictureInPictureTopBareButton(props: {
+  layout: MoviieSkinLayoutMetrics
+  onPress: () => void
+  pictureInPictureActive: boolean
+}) {
+  return (
+    <Pressable
+      accessibilityLabel={
+        props.pictureInPictureActive ? 'Fechar imagem no imagem' : 'Imagem no imagem'
+      }
+      accessibilityRole="button"
+      hitSlop={MOVIIE_SKIN_FLOATING_HUD_TRAILING_HIT_SLOP_PX}
+      onPress={props.onPress}
+      style={(state) => resolveChromeControlPressOpacityStyle(state.pressed)}
+    >
+      <EmbedMediaIconPictureInPicture
+        color={MOVIIE_SKIN_CHROME_FOREGROUND_HEX}
+        size={props.layout.floatingHudFullscreenTopIconPx * MOVIIE_SKIN_TOP_ICON_PIP_VISUAL_SCALE}
+      />
+    </Pressable>
+  )
+}
+
+function MoviieSkinFullscreenCircleButton(props: {
+  layout: MoviieSkinLayoutMetrics
+  onPress: () => void
+  styles: ReturnType<typeof createMoviieSkinOverlayStyles>
+  isFullscreen: boolean
+}) {
+  return (
+    <ChromeScrimPad
+      accessibilityLabel={props.isFullscreen ? 'Sair de ecrã inteiro' : 'Ecrã inteiro'}
+      chromeScrimBaseStyle={props.styles.chromeScrimBase}
+      hitSlop={MOVIIE_SKIN_FLOATING_HUD_TRAILING_HIT_SLOP_PX}
+      onPress={props.onPress}
+      style={props.styles.fullscreenHudCircleScrim}
+    >
+      {props.isFullscreen ? (
+        <EmbedMediaIconFullscreenExit
+          color={MOVIIE_SKIN_CHROME_FOREGROUND_HEX}
+          size={props.layout.floatingHudFullscreenIconPx}
+        />
+      ) : (
+        <EmbedMediaIconFullscreen
+          color={MOVIIE_SKIN_CHROME_FOREGROUND_HEX}
+          size={props.layout.floatingHudFullscreenIconPx}
+        />
+      )}
+    </ChromeScrimPad>
+  )
+}
+
+function MoviieSkinFullscreenTopBareButton(props: {
+  layout: MoviieSkinLayoutMetrics
+  onPress: () => void
+  isFullscreen: boolean
+}) {
+  const size =
+    props.layout.floatingHudFullscreenTopIconPx * MOVIIE_SKIN_TOP_ICON_FULLSCREEN_VISUAL_SCALE
+  return (
+    <Pressable
+      accessibilityLabel={props.isFullscreen ? 'Sair de ecrã inteiro' : 'Ecrã inteiro'}
+      accessibilityRole="button"
+      hitSlop={MOVIIE_SKIN_FLOATING_HUD_TRAILING_HIT_SLOP_PX}
+      onPress={props.onPress}
+      style={(state) => resolveChromeControlPressOpacityStyle(state.pressed)}
+    >
+      {props.isFullscreen ? (
+        <EmbedMediaIconFullscreenExit color={MOVIIE_SKIN_CHROME_FOREGROUND_HEX} size={size} />
+      ) : (
+        <EmbedMediaIconFullscreen color={MOVIIE_SKIN_CHROME_FOREGROUND_HEX} size={size} />
+      )}
+    </Pressable>
+  )
+}
+
+function MoviieSkinBufferingIndicator() {
+  const { isBuffering, layout } = useMoviieSkinChrome()
+
+  const bufferingHudStyle = useMemo(
+    () => ({
+      alignItems: 'center' as const,
+      height: layout.bufferingIndicatorSlotPx,
+      justifyContent: 'center' as const,
+      left: layout.hudEdgeInsetPx,
+      position: 'absolute' as const,
+      top: layout.hudEdgeInsetPx,
+      width: layout.bufferingIndicatorSlotPx,
+      zIndex: 16,
+    }),
+    [layout]
+  )
+
+  if (!isBuffering) {
+    return null
+  }
+
+  return (
+    <View pointerEvents="none" style={bufferingHudStyle}>
+      <ActivityIndicator
+        accessibilityLabel="A carregar vídeo"
+        color={MOVIIE_SKIN_CHROME_FOREGROUND_HEX}
+        size="small"
+      />
+    </View>
+  )
+}
+
+export function MoviieSkinVideoOverlay() {
+  const {
+    chromeOpacity,
+    chromeVisible,
+    bumpChromeInteraction,
+    castConnected,
+    castControlEnabled,
+    dismissChrome,
+    isCustomFullscreen,
+    openCastPicker,
+    pictureInPictureActive,
+    pictureInPictureControlEnabled,
+    toggleFullscreen,
+    togglePictureInPicture,
+    layout,
+    playback,
+    player,
+    seekBack,
+    seekForward,
+    timelineScrubClockSeconds,
+    togglePlay,
+    ui,
+  } = useMoviieSkinChrome()
+
+  const handlePictureInPicturePress = useCallback(() => {
+    togglePictureInPicture()
+    dismissChrome()
+  }, [togglePictureInPicture, dismissChrome])
+
+  const handleCastPress = useCallback(() => {
+    // Dismiss chrome first so the overlay doesn't interfere with the native dialog presentation.
+    dismissChrome()
+    // Defer picker slightly to let the chrome animation settle before the native sheet presents.
+    setTimeout(() => openCastPicker(), 150)
+  }, [openCastPicker, dismissChrome])
+
+  const styles = useMemo(() => createMoviieSkinOverlayStyles(layout), [layout])
+
+  const { controls } = playback
+  const fg = MOVIIE_SKIN_CHROME_FOREGROUND_HEX
+
+  const clockDisplaySeconds = timelineScrubClockSeconds ?? ui.currentTime
+
+  const playbackEndedForUi = useMemo(
+    () =>
+      computeMoviiePlaybackEnded({
+        playing: ui.playing,
+        currentTime: clockDisplaySeconds,
+        duration: ui.duration,
+        isLive: player.isLive,
+        loop: player.loop,
+      }),
+    [ui.playing, clockDisplaySeconds, ui.duration, player.isLive, player.loop]
+  )
+
+  const { centerSeekBackwardEnabled, centerSeekForwardEnabled } = useMemo(() => {
+    const alignSeekButtonsWithPlay = controls.showPlay && !player.isLive
+    const hideSeekClusterAtEnd = playbackEndedForUi
+    return {
+      centerSeekBackwardEnabled:
+        !hideSeekClusterAtEnd && (controls.seekBackwardEnabled || alignSeekButtonsWithPlay),
+      centerSeekForwardEnabled:
+        !hideSeekClusterAtEnd && (controls.seekForwardEnabled || alignSeekButtonsWithPlay),
+    }
+  }, [
+    controls.seekBackwardEnabled,
+    controls.seekForwardEnabled,
+    controls.showPlay,
+    player.isLive,
+    playbackEndedForUi,
+  ])
+
+  const centerPlayShowsReplay = playbackEndedForUi
+
+  const centerPlayAccessibilityLabel = ui.playing
+    ? 'Pausar'
+    : centerPlayShowsReplay
+      ? 'Começar novamente'
+      : 'Reproduzir'
+
+  const clockLabel =
+    controls.showCurrentTime || controls.showDuration
+      ? formatPlaybackClock(clockDisplaySeconds, ui.duration)
+      : null
+
+  const showSeekCluster = centerSeekBackwardEnabled || centerSeekForwardEnabled || controls.showPlay
+
+  const seekSlot = layout.seekScrimOuterDiameterPx
+
+  const showPictureInPictureTrailing = pictureInPictureControlEnabled
+  const showCastTrailing = castControlEnabled
+
+  const hasFloatingHudTrailing =
+    playback.branding.showWatermark ||
+    (!playback.branding.showWatermark &&
+      (controls.showFullscreen || showPictureInPictureTrailing || showCastTrailing))
+
+  const showFloatingHud = clockLabel != null || hasFloatingHudTrailing
+
+  const showFullscreenBottomTrailing = controls.showFullscreen && !playback.branding.showWatermark
+
+  const showTopCornerChrome =
+    playback.branding.showWatermark &&
+    (controls.showFullscreen || showPictureInPictureTrailing || showCastTrailing)
+
+  return (
+    <View pointerEvents="box-none" style={StyleSheet.absoluteFillObject}>
+      <Pressable
+        accessibilityLabel={
+          chromeVisible
+            ? 'Área do vídeo — toque para esconder os controles'
+            : 'Mostrar controles do vídeo'
+        }
+        accessibilityRole="button"
+        onPress={chromeVisible ? dismissChrome : bumpChromeInteraction}
+        style={[StyleSheet.absoluteFillObject, { zIndex: 0 }]}
+      />
+
+      <AnimatedView
+        pointerEvents={!chromeVisible ? 'none' : 'box-none'}
+        style={[
+          StyleSheet.absoluteFillObject,
+          {
+            opacity: chromeOpacity,
+            zIndex: 2,
+          },
+        ]}
+      >
+        <MoviieSkinChromeEdgeGradients layout={layout} showProgress={controls.showProgress} />
+
+        {showTopCornerChrome ? (
+          <View pointerEvents="box-none" style={styles.topFullscreenCorner}>
+            {showCastTrailing ? (
+              <MoviieSkinCastTopBareButton
+                castConnected={castConnected}
+                layout={layout}
+                onPress={handleCastPress}
+              />
+            ) : null}
+            {showPictureInPictureTrailing ? (
+              <MoviieSkinPictureInPictureTopBareButton
+                layout={layout}
+                pictureInPictureActive={pictureInPictureActive}
+                onPress={handlePictureInPicturePress}
+              />
+            ) : null}
+            {controls.showFullscreen ? (
+              <MoviieSkinFullscreenTopBareButton
+                isFullscreen={isCustomFullscreen}
+                layout={layout}
+                onPress={toggleFullscreen}
+              />
+            ) : null}
+          </View>
+        ) : null}
+
+        {showFloatingHud ? (
+          <View
+            pointerEvents="box-none"
+            style={[
+              styles.floatingHud,
+              controls.showProgress ? { bottom: layout.timelineStackHeightChromeVisiblePx } : null,
+            ]}
+          >
+            <View style={styles.floatingHudInner}>
+              {clockLabel ? (
+                <ChromeScrimPad
+                  chromeScrimBaseStyle={styles.chromeScrimBase}
+                  style={styles.clockScrim}
+                >
+                  <Text accessibilityLabel={`Tempo ${clockLabel}`} style={styles.clockText}>
+                    {clockLabel}
+                  </Text>
+                </ChromeScrimPad>
+              ) : (
+                <View style={styles.floatingLeftSpacer} />
+              )}
+
+              <View style={styles.floatingRight}>
+                {playback.branding.showWatermark ? (
+                  <MoviieEmbedBrandMark />
+                ) : (
+                  <>
+                    {showCastTrailing ? (
+                      <MoviieSkinCastCircleButton
+                        castConnected={castConnected}
+                        chromeScrimBaseStyle={styles.chromeScrimBase}
+                        circleScrimStyle={styles.fullscreenHudCircleScrim}
+                        layout={layout}
+                        onPress={handleCastPress}
+                      />
+                    ) : null}
+                    {showPictureInPictureTrailing ? (
+                      <MoviieSkinPictureInPictureCircleButton
+                        layout={layout}
+                        pictureInPictureActive={pictureInPictureActive}
+                        onPress={handlePictureInPicturePress}
+                        styles={styles}
+                      />
+                    ) : null}
+                    {showFullscreenBottomTrailing ? (
+                      <MoviieSkinFullscreenCircleButton
+                        isFullscreen={isCustomFullscreen}
+                        layout={layout}
+                        onPress={toggleFullscreen}
+                        styles={styles}
+                      />
+                    ) : null}
+                  </>
+                )}
+              </View>
+            </View>
+          </View>
+        ) : null}
+
+        {showSeekCluster ? (
+          <View pointerEvents="box-none" style={styles.centerCluster}>
+            <View style={styles.centerClusterRow}>
+              {centerSeekBackwardEnabled ? (
+                <ChromeScrimPad
+                  accessibilityLabel="Retroceder 10 segundos"
+                  chromeScrimBaseStyle={styles.chromeScrimBase}
+                  onPress={seekBack}
+                  style={styles.seekCircularScrim}
+                >
+                  <EmbedMediaIconSeekBackward10 color={fg} size={layout.seekIconPx} />
+                </ChromeScrimPad>
+              ) : (
+                <View style={{ height: seekSlot, width: seekSlot }} />
+              )}
+
+              {controls.showPlay ? (
+                <ChromeScrimPad
+                  accessibilityLabel={centerPlayAccessibilityLabel}
+                  chromeScrimBaseStyle={styles.chromeScrimBase}
+                  onPress={togglePlay}
+                  style={styles.playScrim}
+                >
+                  {ui.playing ? (
+                    <EmbedMediaIconPause color={fg} size={layout.centerPlayIconPx} />
+                  ) : centerPlayShowsReplay ? (
+                    <EmbedMediaIconReplay color={fg} size={layout.centerPlayIconPx} />
+                  ) : (
+                    <EmbedMediaIconPlay color={fg} size={layout.centerPlayIconPx} />
+                  )}
+                </ChromeScrimPad>
+              ) : (
+                <View style={styles.playPlaceholder} />
+              )}
+
+              {centerSeekForwardEnabled ? (
+                <ChromeScrimPad
+                  accessibilityLabel="Avançar 10 segundos"
+                  chromeScrimBaseStyle={styles.chromeScrimBase}
+                  onPress={seekForward}
+                  style={styles.seekCircularScrim}
+                >
+                  <EmbedMediaIconSeekForward10 color={fg} size={layout.seekIconPx} />
+                </ChromeScrimPad>
+              ) : (
+                <View style={{ height: seekSlot, width: seekSlot }} />
+              )}
+            </View>
+          </View>
+        ) : null}
+      </AnimatedView>
+
+      <MoviieSkinBufferingIndicator />
+      <MoviieSkinSmartProgress />
+      <MoviieSkinBottomTimeline />
+    </View>
+  )
+}