@moviie/player-expo 0.4.0

package/src/components/controls/moviie-chrome-edge-gradients.tsx

@@ -0,0 +1,162 @@
+/**
+ * Vertical chrome gradients (black → transparent).
+ * Svg primitives use `jsx-native-bridge` for TS 5.9 compatibility with class-based RN SVG exports.
+ */
+
+import type { ReactNode } from "react"
+import { useCallback, useMemo, useState } from "react"
+import type { LayoutChangeEvent } from "react-native"
+import { StyleSheet, View } from "react-native"
+import Svg, { Defs, LinearGradient, Rect, Stop } from "../../lib/jsx-native-bridge"
+
+import {
+  MOVIIE_SKIN_CHROME_EDGE_GRADIENT_EDGE_SOLID_FADE_END_FRACTION,
+  MOVIIE_SKIN_CHROME_EDGE_GRADIENT_MIN_CLEAR_MIDDLE_PX,
+  MOVIIE_SKIN_CHROME_GRADIENT_BLACK_HEX,
+  MOVIIE_SKIN_CHROME_GRADIENT_EDGE_ALPHA,
+  MOVIIE_SKIN_CHROME_SVG_GRADIENT_BOTTOM_EDGE_ID,
+  MOVIIE_SKIN_CHROME_SVG_GRADIENT_TOP_EDGE_ID,
+} from "../../constants"
+import type { MoviieSkinLayoutMetrics } from "../../lib/build-moviie-skin-layout-metrics"
+
+export function MoviieSkinChromeEdgeGradients(props: {
+  layout: MoviieSkinLayoutMetrics
+  showProgress: boolean
+}): ReactNode {
+  const [hostWidth, setHostWidth] = useState(0)
+  const [hostHeight, setHostHeight] = useState(0)
+
+  const onHostLayout = useCallback((event: LayoutChangeEvent) => {
+    const { height, width } = event.nativeEvent.layout
+    setHostWidth(width)
+    setHostHeight(height)
+  }, [])
+
+  const rawTopPx = props.layout.chromeEdgeGradientHeightPx
+  const rawBottomPx =
+    props.layout.chromeEdgeGradientHeightPx +
+    (props.showProgress ? props.layout.timelineStackHeightChromeVisiblePx : 0)
+
+  const { effBottomPx, effTopPx, svgWidthPx } = useMemo(() => {
+    if (hostWidth <= 0 || hostHeight <= 0) {
+      return { effBottomPx: 0, effTopPx: 0, svgWidthPx: 0 }
+    }
+
+    const svgWidthPx = hostWidth
+    const maxTotalPx = Math.max(
+      0,
+      hostHeight - MOVIIE_SKIN_CHROME_EDGE_GRADIENT_MIN_CLEAR_MIDDLE_PX
+    )
+
+    const rawSum = rawTopPx + rawBottomPx
+    const scale =
+      rawSum > maxTotalPx && maxTotalPx > 0 && rawSum > 0 ? maxTotalPx / rawSum : 1
+
+    return {
+      effBottomPx: rawBottomPx * scale,
+      effTopPx: rawTopPx * scale,
+      svgWidthPx,
+    }
+  }, [hostHeight, hostWidth, rawBottomPx, rawTopPx])
+
+  const topFillUrl = `url(#${MOVIIE_SKIN_CHROME_SVG_GRADIENT_TOP_EDGE_ID})`
+  const bottomFillUrl = `url(#${MOVIIE_SKIN_CHROME_SVG_GRADIENT_BOTTOM_EDGE_ID})`
+
+  const layoutReady = hostWidth > 0 && hostHeight > 0 && svgWidthPx > 0
+
+  const fadeEndOffset = String(MOVIIE_SKIN_CHROME_EDGE_GRADIENT_EDGE_SOLID_FADE_END_FRACTION)
+
+  return (
+    <View
+      accessibilityElementsHidden
+      importantForAccessibility="no-hide-descendants"
+      onLayout={onHostLayout}
+      pointerEvents="none"
+      style={StyleSheet.absoluteFillObject}
+      testID="moviie-chrome-edge-gradients"
+    >
+      {layoutReady && effTopPx > 0 ? (
+        <View
+          accessibilityElementsHidden
+          importantForAccessibility="no-hide-descendants"
+          pointerEvents="none"
+          style={{
+            height: effTopPx,
+            left: 0,
+            overflow: "hidden",
+            position: "absolute",
+            top: 0,
+            width: hostWidth,
+          }}
+        >
+          <Svg accessibilityElementsHidden height={effTopPx} width={svgWidthPx}>
+            <Defs>
+              <LinearGradient
+                gradientUnits="objectBoundingBox"
+                id={MOVIIE_SKIN_CHROME_SVG_GRADIENT_TOP_EDGE_ID}
+                x1="0"
+                x2="0"
+                y1="0"
+                y2="1"
+              >
+                <Stop
+                  offset="0"
+                  stopColor={MOVIIE_SKIN_CHROME_GRADIENT_BLACK_HEX}
+                  stopOpacity={MOVIIE_SKIN_CHROME_GRADIENT_EDGE_ALPHA}
+                />
+                <Stop
+                  offset={fadeEndOffset}
+                  stopColor={MOVIIE_SKIN_CHROME_GRADIENT_BLACK_HEX}
+                  stopOpacity={0}
+                />
+                <Stop offset="1" stopColor={MOVIIE_SKIN_CHROME_GRADIENT_BLACK_HEX} stopOpacity={0} />
+              </LinearGradient>
+            </Defs>
+            <Rect fill={topFillUrl} height={effTopPx} width={svgWidthPx} />
+          </Svg>
+        </View>
+      ) : null}
+      {layoutReady && effBottomPx > 0 ? (
+        <View
+          accessibilityElementsHidden
+          importantForAccessibility="no-hide-descendants"
+          pointerEvents="none"
+          style={{
+            bottom: 0,
+            height: effBottomPx,
+            left: 0,
+            overflow: "hidden",
+            position: "absolute",
+            width: hostWidth,
+          }}
+        >
+          <Svg accessibilityElementsHidden height={effBottomPx} width={svgWidthPx}>
+            <Defs>
+              <LinearGradient
+                gradientUnits="objectBoundingBox"
+                id={MOVIIE_SKIN_CHROME_SVG_GRADIENT_BOTTOM_EDGE_ID}
+                x1="0"
+                x2="0"
+                y1="1"
+                y2="0"
+              >
+                <Stop
+                  offset="0"
+                  stopColor={MOVIIE_SKIN_CHROME_GRADIENT_BLACK_HEX}
+                  stopOpacity={MOVIIE_SKIN_CHROME_GRADIENT_EDGE_ALPHA}
+                />
+                <Stop
+                  offset={fadeEndOffset}
+                  stopColor={MOVIIE_SKIN_CHROME_GRADIENT_BLACK_HEX}
+                  stopOpacity={0}
+                />
+                <Stop offset="1" stopColor={MOVIIE_SKIN_CHROME_GRADIENT_BLACK_HEX} stopOpacity={0} />
+              </LinearGradient>
+            </Defs>
+            <Rect fill={bottomFillUrl} height={effBottomPx} width={svgWidthPx} />
+          </Svg>
+        </View>
+      ) : null}
+    </View>
+  )
+}