@oxy.so/bloom 2.9.0 → 2.11.0

package/lib/module/media-controls/MediaTrack.js

@@ -0,0 +1,257 @@
+"use strict";
+
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { PanResponder, View } from 'react-native';
+import { adoptStyleSheet } from "../styles/adopt-style-sheet.js";
+import { borderRadius, DISABLED_OPACITY } from "../styles/tokens.js";
+import { webDataSet } from "../styles/web-data.js";
+import { clamp } from "../styles/clamp.js";
+import { useTheme } from "../theme/use-theme.js";
+import { IS_WEB, MEDIA_CONTROLS_CSS, MEDIA_CONTROLS_STYLE_ID, resolveMediaControlsPaint } from "./shared.js";
+
+/** Height of the pointer target. The drawn rail is centred in it. */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const MEDIA_TRACK_HIT = 16;
+export const MEDIA_TRACK_RAIL = 4;
+export const MEDIA_TRACK_THUMB = 12;
+
+/** The position under a pointer `x` px into a `width` px track, clamped to `0..max`. */
+export function valueAtPosition(x, width, max) {
+  if (width <= 0 || max <= 0) return 0;
+  return clamp(x / width, 0, 1) * max;
+}
+/**
+ * The scrubber shared by `PlaybackProgress` and `VolumeControl`: a 4px pill
+ * rail (neutral-200, dark neutral-700), an optional buffered segment
+ * (neutral-300, dark neutral-500), and the fill — the text colour at rest,
+ * the accent under the pointer, while dragging or with keyboard focus
+ * (`:focus-visible`, in the adopted sheet, so a click leaves nothing lit). The
+ * 12px thumb (text colour) only shows in those same states.
+ *
+ * Gestures use RN's `PanResponder` (native, and web through react-native-web).
+ * The element is a `slider` (`accessibilityRole="adjustable"`) carrying flat
+ * `aria-value*` props; on web it takes focus and answers arrows (±`step`),
+ * Home and End; on native the `increment`/`decrement` actions.
+ */
+export function MediaTrack({
+  value,
+  max,
+  buffered,
+  onPreview,
+  onCommit,
+  step,
+  disabled,
+  accessibilityLabel,
+  valueText,
+  onDragChange,
+  style,
+  testID
+}) {
+  const theme = useTheme();
+  useEffect(() => {
+    adoptStyleSheet(MEDIA_CONTROLS_STYLE_ID, MEDIA_CONTROLS_CSS);
+  }, []);
+  const paint = useMemo(() => resolveMediaControlsPaint(theme), [theme]);
+  const [width, setWidth] = useState(0);
+  const [dragValue, setDragValue] = useState(null);
+  const [hovered, setHovered] = useState(false);
+  const safeMax = max > 0 ? max : 0;
+  const shown = clamp(dragValue ?? value, 0, safeMax);
+  const stateRef = useRef({
+    width,
+    max: safeMax,
+    disabled,
+    value: shown
+  });
+  stateRef.current = {
+    width,
+    max: safeMax,
+    disabled,
+    value: shown
+  };
+  const callbacksRef = useRef({
+    onPreview,
+    onCommit,
+    onDragChange
+  });
+  callbacksRef.current = {
+    onPreview,
+    onCommit,
+    onDragChange
+  };
+  const dragRef = useRef({
+    startX: 0,
+    current: 0
+  });
+  const panResponder = useMemo(() => PanResponder.create({
+    onStartShouldSetPanResponder: () => !stateRef.current.disabled && stateRef.current.max > 0,
+    onMoveShouldSetPanResponder: () => !stateRef.current.disabled && stateRef.current.max > 0,
+    onPanResponderTerminationRequest: () => false,
+    onPanResponderGrant: e => {
+      const s = stateRef.current;
+      const x = e.nativeEvent.locationX;
+      const next = valueAtPosition(x, s.width, s.max);
+      dragRef.current = {
+        startX: x,
+        current: next
+      };
+      setDragValue(next);
+      callbacksRef.current.onDragChange?.(next);
+      callbacksRef.current.onPreview?.(next);
+    },
+    onPanResponderMove: (_e, g) => {
+      const s = stateRef.current;
+      const next = valueAtPosition(dragRef.current.startX + g.dx, s.width, s.max);
+      if (next === dragRef.current.current) return;
+      dragRef.current.current = next;
+      setDragValue(next);
+      callbacksRef.current.onDragChange?.(next);
+      callbacksRef.current.onPreview?.(next);
+    },
+    onPanResponderRelease: () => {
+      setDragValue(null);
+      callbacksRef.current.onDragChange?.(null);
+      callbacksRef.current.onCommit?.(dragRef.current.current);
+    },
+    onPanResponderTerminate: () => {
+      setDragValue(null);
+      callbacksRef.current.onDragChange?.(null);
+      callbacksRef.current.onCommit?.(dragRef.current.current);
+    }
+  }), []);
+  const onLayout = useCallback(e => {
+    setWidth(e.nativeEvent.layout.width);
+  }, []);
+  const stepBy = useCallback(target => {
+    if (disabled || safeMax <= 0) return;
+    const next = clamp(target, 0, safeMax);
+    if (next !== value) onCommit?.(next);
+  }, [disabled, safeMax, value, onCommit]);
+  const onAccessibilityAction = useCallback(e => {
+    if (e.nativeEvent.actionName === 'increment') stepBy(value + step);else if (e.nativeEvent.actionName === 'decrement') stepBy(value - step);
+  }, [stepBy, value, step]);
+  const webProps = IS_WEB ? {
+    tabIndex: disabled ? -1 : 0,
+    onPointerEnter: () => setHovered(true),
+    onPointerLeave: () => setHovered(false),
+    onKeyDown: e => {
+      switch (e.key) {
+        case 'ArrowRight':
+        case 'ArrowUp':
+          e.preventDefault();
+          stepBy(value + step);
+          break;
+        case 'ArrowLeft':
+        case 'ArrowDown':
+          e.preventDefault();
+          stepBy(value - step);
+          break;
+        case 'Home':
+          e.preventDefault();
+          stepBy(0);
+          break;
+        case 'End':
+          e.preventDefault();
+          stepBy(safeMax);
+          break;
+        default:
+          break;
+      }
+    }
+  } : {};
+  const active = !disabled && (hovered || dragValue !== null);
+  const fraction = safeMax > 0 ? shown / safeMax : 0;
+  const bufferedFraction = buffered != null && safeMax > 0 ? clamp(buffered / safeMax, 0, 1) : 0;
+  const railTop = (MEDIA_TRACK_HIT - MEDIA_TRACK_RAIL) / 2;
+  const rootStyle = {
+    position: 'relative',
+    height: MEDIA_TRACK_HIT,
+    minWidth: 0,
+    opacity: disabled ? DISABLED_OPACITY : 1,
+    '--bloom-media-ring': paint.ring,
+    '--bloom-media-accent': paint.accent,
+    ...(IS_WEB ? {
+      touchAction: 'none'
+    } : null)
+  };
+  return /*#__PURE__*/_jsxs(View, {
+    ...panResponder.panHandlers,
+    ...webProps,
+    ...webDataSet({
+      bloomMediaFocusable: '',
+      bloomMediaTrack: ''
+    }),
+    accessibilityRole: "adjustable",
+    accessibilityLabel: accessibilityLabel,
+    "aria-valuemin": 0,
+    "aria-valuemax": safeMax,
+    "aria-valuenow": shown,
+    "aria-valuetext": valueText(shown),
+    "aria-disabled": disabled || undefined,
+    accessibilityActions: [{
+      name: 'increment'
+    }, {
+      name: 'decrement'
+    }],
+    onAccessibilityAction: onAccessibilityAction,
+    onLayout: onLayout,
+    style: [rootStyle, style],
+    testID: testID,
+    children: [/*#__PURE__*/_jsxs(View, {
+      pointerEvents: "none",
+      style: {
+        position: 'absolute',
+        left: 0,
+        right: 0,
+        top: railTop,
+        height: MEDIA_TRACK_RAIL,
+        borderRadius: borderRadius.full,
+        backgroundColor: paint.rail,
+        overflow: 'hidden'
+      },
+      children: [bufferedFraction > 0 && /*#__PURE__*/_jsx(View, {
+        testID: testID ? `${testID}-buffered` : undefined,
+        style: {
+          position: 'absolute',
+          left: 0,
+          top: 0,
+          bottom: 0,
+          width: `${bufferedFraction * 100}%`,
+          backgroundColor: paint.buffered
+        }
+      }), /*#__PURE__*/_jsx(View, {
+        testID: testID ? `${testID}-fill` : undefined,
+        ...webDataSet({
+          bloomMediaFill: ''
+        }),
+        style: {
+          position: 'absolute',
+          left: 0,
+          top: 0,
+          bottom: 0,
+          width: `${fraction * 100}%`,
+          borderRadius: borderRadius.full,
+          backgroundColor: active ? paint.accent : paint.text
+        }
+      })]
+    }), /*#__PURE__*/_jsx(View, {
+      pointerEvents: "none",
+      ...webDataSet({
+        bloomMediaThumb: ''
+      }),
+      style: {
+        position: 'absolute',
+        top: (MEDIA_TRACK_HIT - MEDIA_TRACK_THUMB) / 2,
+        left: `${fraction * 100}%`,
+        marginLeft: -MEDIA_TRACK_THUMB / 2,
+        width: MEDIA_TRACK_THUMB,
+        height: MEDIA_TRACK_THUMB,
+        borderRadius: borderRadius.full,
+        backgroundColor: paint.text,
+        boxShadow: '0 1px 2px rgba(0, 0, 0, 0.24)',
+        opacity: active ? 1 : 0
+      }
+    })]
+  });
+}
+//# sourceMappingURL=MediaTrack.js.map

package/lib/module/media-controls/MediaTrack.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useCallback","useEffect","useMemo","useRef","useState","PanResponder","View","adoptStyleSheet","borderRadius","DISABLED_OPACITY","webDataSet","clamp","useTheme","IS_WEB","MEDIA_CONTROLS_CSS","MEDIA_CONTROLS_STYLE_ID","resolveMediaControlsPaint","jsx","_jsx","jsxs","_jsxs","MEDIA_TRACK_HIT","MEDIA_TRACK_RAIL","MEDIA_TRACK_THUMB","valueAtPosition","x","width","max","MediaTrack","value","buffered","onPreview","onCommit","step","disabled","accessibilityLabel","valueText","onDragChange","style","testID","theme","paint","setWidth","dragValue","setDragValue","hovered","setHovered","safeMax","shown","stateRef","current","callbacksRef","dragRef","startX","panResponder","create","onStartShouldSetPanResponder","onMoveShouldSetPanResponder","onPanResponderTerminationRequest","onPanResponderGrant","e","s","nativeEvent","locationX","next","onPanResponderMove","_e","g","dx","onPanResponderRelease","onPanResponderTerminate","onLayout","layout","stepBy","target","onAccessibilityAction","actionName","webProps","tabIndex","onPointerEnter","onPointerLeave","onKeyDown","key","preventDefault","active","fraction","bufferedFraction","railTop","rootStyle","position","height","minWidth","opacity","ring","accent","touchAction","panHandlers","bloomMediaFocusable","bloomMediaTrack","accessibilityRole","undefined","accessibilityActions","name","children","pointerEvents","left","right","top","full","backgroundColor","rail","overflow","bottom","bloomMediaFill","text","bloomMediaThumb","marginLeft","boxShadow"],"sourceRoot":"../../../src","sources":["media-controls/MediaTrack.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/media-controls/NowPlayingIndicator.js

@@ -0,0 +1,98 @@
+"use strict";
+
+import React, { memo, useEffect, useMemo } from 'react';
+import { View } from 'react-native';
+import Animated, { Easing, cancelAnimation, useAnimatedStyle, useReducedMotion, useSharedValue, withRepeat, withSequence, withTiming } from 'react-native-reanimated';
+import { useTheme } from "../theme/use-theme.js";
+import { resolveMediaControlsPaint } from "./shared.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * The equalizer bars beside the row that is playing.
+ *
+ * Bars are 20% of `size` wide (at least 2px) with rounded tops, bottom-aligned.
+ * Playing, each bar swings between its own low and high height on its own
+ * period, so the group never repeats in step. Paused — or with reduced motion
+ * on — the bars stand still at their resting heights, which still reads as
+ * "this one". Colour: the theme accent.
+ *
+ * Accessibility: one `img` named "Now playing".
+ */
+
+/** [rest, low, high, period ms] per bar, as fractions of `size`. */
+const BAR_MOTION = [[0.55, 0.25, 0.9, 420], [0.9, 0.4, 1, 540], [0.4, 0.2, 0.75, 360], [0.7, 0.3, 0.95, 480]];
+function Bar({
+  size,
+  width,
+  color,
+  motion,
+  animate
+}) {
+  const [rest, low, high, period] = motion;
+  const fraction = useSharedValue(rest);
+  useEffect(() => {
+    cancelAnimation(fraction);
+    if (!animate) {
+      fraction.value = rest;
+      return;
+    }
+    const easing = Easing.inOut(Easing.quad);
+    fraction.value = withRepeat(withSequence(withTiming(high, {
+      duration: period / 2,
+      easing
+    }), withTiming(low, {
+      duration: period / 2,
+      easing
+    })), -1, false);
+    return () => cancelAnimation(fraction);
+  }, [animate, fraction, rest, low, high, period]);
+  const animated = useAnimatedStyle(() => ({
+    height: Math.max(width, fraction.value * size)
+  }), [fraction, width, size]);
+  return /*#__PURE__*/_jsx(Animated.View, {
+    style: [{
+      width,
+      backgroundColor: color,
+      borderTopLeftRadius: width / 2,
+      borderTopRightRadius: width / 2
+    }, animated]
+  });
+}
+function NowPlayingIndicatorComponent({
+  playing = true,
+  size = 16,
+  bars = 4,
+  color,
+  label = 'Now playing',
+  style,
+  testID
+}) {
+  const theme = useTheme();
+  const paint = useMemo(() => resolveMediaControlsPaint(theme), [theme]);
+  const reducedMotion = useReducedMotion();
+  const animate = playing && !reducedMotion;
+  const barWidth = Math.max(2, Math.round(size * 0.2));
+  return /*#__PURE__*/_jsx(View, {
+    role: "img",
+    accessibilityLabel: label,
+    style: [{
+      width: size,
+      height: size,
+      flexDirection: 'row',
+      alignItems: 'flex-end',
+      justifyContent: 'space-between',
+      paddingLeft: bars === 3 ? Math.round(size * 0.1) : 0,
+      paddingRight: bars === 3 ? Math.round(size * 0.1) : 0
+    }, style],
+    testID: testID,
+    children: BAR_MOTION.slice(0, bars).map((motion, index) => /*#__PURE__*/_jsx(Bar, {
+      size: size,
+      width: barWidth,
+      color: color ?? paint.accent,
+      motion: motion,
+      animate: animate
+    }, index))
+  });
+}
+export const NowPlayingIndicator = /*#__PURE__*/memo(NowPlayingIndicatorComponent);
+NowPlayingIndicator.displayName = 'NowPlayingIndicator';
+//# sourceMappingURL=NowPlayingIndicator.js.map

package/lib/module/media-controls/NowPlayingIndicator.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","memo","useEffect","useMemo","View","Animated","Easing","cancelAnimation","useAnimatedStyle","useReducedMotion","useSharedValue","withRepeat","withSequence","withTiming","useTheme","resolveMediaControlsPaint","jsx","_jsx","BAR_MOTION","Bar","size","width","color","motion","animate","rest","low","high","period","fraction","value","easing","inOut","quad","duration","animated","height","Math","max","style","backgroundColor","borderTopLeftRadius","borderTopRightRadius","NowPlayingIndicatorComponent","playing","bars","label","testID","theme","paint","reducedMotion","barWidth","round","role","accessibilityLabel","flexDirection","alignItems","justifyContent","paddingLeft","paddingRight","children","slice","map","index","accent","NowPlayingIndicator","displayName"],"sourceRoot":"../../../src","sources":["media-controls/NowPlayingIndicator.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/media-controls/PauseGlyph.js

@@ -0,0 +1,29 @@
+"use strict";
+
+import { createSinglePathSVG } from "../icons/TEMPLATE.js";
+
+/**
+ * Bloom's pause glyph — the play triangle's WEIGHT, in two bars.
+ *
+ * Measured in the shared 24 viewBox (`scripts/…` is not needed; the numbers are
+ * the paths' own):
+ *
+ *   play triangle    (8, 4) · (8, 20) · (20, 12), corners rounded   95.5 units²
+ *   two bars 2 × 14  the stock media pause                          56.0 units²  0.59 ×
+ *   two bars 3 × 16  this                                           96.0 units²  1.005 ×
+ *
+ * At 0.59 the pause read a full step lighter than the play it replaces, at every
+ * size, so a transport button changed WEIGHT as it toggled — the one thing a
+ * play/pause pair must not do, since the two are the same control. Ink area is
+ * the match that matters here: same vertical extent (y 4 → 20, the triangle's
+ * own), bars widened from 2 to 3, and the gap left at 6 so the pair still reads
+ * as two bars rather than a block.
+ *
+ * Bloom-LOCAL rather than an edit to `icons/remix/RiPauseFill`: that file is
+ * generated, and the stock weight is right for a 16px list glyph. This is the
+ * one for a filled transport button.
+ */
+export const PauseGlyph = createSinglePathSVG({
+  path: 'M6 4H9V20H6V4ZM15 4H18V20H15V4Z'
+});
+//# sourceMappingURL=PauseGlyph.js.map

package/lib/module/media-controls/PauseGlyph.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["createSinglePathSVG","PauseGlyph","path"],"sourceRoot":"../../../src","sources":["media-controls/PauseGlyph.tsx"],"mappings":";;AAAA,SAASA,mBAAmB,QAAQ,sBAAmB;;AAEvD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,UAAU,GAAGD,mBAAmB,CAAC;EAC5CE,IAAI,EAAE;AACR,CAAC,CAAC","ignoreList":[]}

package/lib/module/media-controls/PlayButton.js

@@ -0,0 +1,178 @@
+"use strict";
+
+import React, { memo, useEffect, useMemo, useState } from 'react';
+import { Pressable, View } from 'react-native';
+import { RiPlayFill } from "../icons/remix/RiPlayFill.js";
+import { borderRadius, DISABLED_OPACITY } from "../styles/tokens.js";
+import { adoptStyleSheet } from "../styles/adopt-style-sheet.js";
+import { webDataSet } from "../styles/web-data.js";
+import { useTheme } from "../theme/use-theme.js";
+import { IS_WEB, MEDIA_CONTROLS_CSS, MEDIA_CONTROLS_STYLE_ID, resolveMediaControlsPaint } from "./shared.js";
+import { PauseGlyph } from "./PauseGlyph.js";
+import { SpinnerRing } from "./SpinnerRing.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * The round play / pause button.
+ *
+ *            diameter   glyph
+ *   small    32         16
+ *   medium   48         24
+ *   large    56         28
+ *
+ *   accent    accent-500 fill, primaryForeground glyph; hover accent-600
+ *             (dark 400), press accent-700 (dark 300)
+ *   inverse   text-colour fill, background-colour glyph; hover mixes 16% of
+ *             the background in
+ *   plain     the glyph alone in the text colour; hover turns it accent
+ *
+ * Colour change only — no scale. `RiPlayFill`'s triangle already sits right of
+ * its box's centre (the path spans x 8..19.6 of 24), which puts its visual
+ * weight on the circle's centre, so no further nudge is applied.
+ *
+ * The pause glyph is Bloom's own (`PauseGlyph`), not the stock media one: the
+ * stock two-bar pause carries 0.59 × the triangle's ink, so the button changed
+ * WEIGHT as it toggled at every size. The measurement and the widened path are
+ * in `PauseGlyph.tsx`.
+ *
+ * Accessibility: a plain `button` whose NAME is the action ("Play Night Drive"
+ * / "Pause Night Drive"). It deliberately carries no `aria-pressed`: a toggle
+ * button keeps one name and flips its pressed state, whereas this names what
+ * pressing does next, and a name that changes AND a pressed state would announce
+ * "Pause, pressed" — two answers to one question. `loading` sets `aria-busy`
+ * (React Native folds it into `accessibilityState.busy`).
+ */
+
+const SIZE_CONFIG = {
+  small: {
+    box: 32,
+    glyph: 16
+  },
+  medium: {
+    box: 48,
+    glyph: 24
+  },
+  large: {
+    box: 56,
+    glyph: 28
+  }
+};
+function PlayButtonComponent({
+  playing,
+  onPress,
+  interactive = true,
+  size = 'medium',
+  variant = 'accent',
+  loading = false,
+  disabled = false,
+  subject,
+  playLabel = 'Play',
+  pauseLabel = 'Pause',
+  accessibilityLabel,
+  style,
+  testID
+}) {
+  const theme = useTheme();
+  useEffect(() => {
+    adoptStyleSheet(MEDIA_CONTROLS_STYLE_ID, MEDIA_CONTROLS_CSS);
+  }, []);
+  const paint = useMemo(() => resolveMediaControlsPaint(theme), [theme]);
+  const [hovered, setHovered] = useState(false);
+  const [pressed, setPressed] = useState(false);
+  const {
+    box,
+    glyph
+  } = SIZE_CONFIG[size];
+  const action = playing ? pauseLabel : playLabel;
+  const name = accessibilityLabel ?? (subject ? `${action} ${subject}` : action);
+  const active = !disabled && (pressed || hovered);
+  let fill;
+  let glyphColor;
+  if (variant === 'accent') {
+    fill = !disabled && pressed ? paint.accentPressed : active ? paint.accentHover : paint.accent;
+    glyphColor = paint.onAccent;
+  } else if (variant === 'inverse') {
+    fill = active ? paint.inverseHover : paint.inverse;
+    glyphColor = paint.onInverse;
+  } else {
+    fill = undefined;
+    glyphColor = active ? paint.accent : paint.text;
+  }
+  const Glyph = playing ? PauseGlyph : RiPlayFill;
+  const rootStyle = {
+    width: box,
+    height: box,
+    borderRadius: borderRadius.full,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: fill,
+    opacity: disabled ? DISABLED_OPACITY : 1,
+    '--bloom-media-ring': paint.ring,
+    ...(IS_WEB ? {
+      transitionProperty: 'background-color',
+      transitionDuration: '150ms'
+    } : null)
+  };
+  const glyphBox = /*#__PURE__*/_jsx(View, {
+    pointerEvents: "none",
+    style: {
+      width: glyph,
+      height: glyph
+    },
+    children: loading ? /*#__PURE__*/_jsx(SpinnerRing, {
+      size: glyph,
+      color: glyphColor
+    }) : /*#__PURE__*/_jsx(Glyph, {
+      width: glyph,
+      height: glyph,
+      fill: glyphColor
+    })
+  });
+
+  // `interactive={false}` makes this DECORATION — the poster frame or the row around it
+  // is the press target, and a second `role="button"` inside one is invalid HTML
+  // (react-dom says so out loud) and a second stop for a screen reader on the
+  // same action. It keeps its box and its fill; it just stops claiming to be a
+  // control. An explicit `accessibilityLabel` still names it, for the rare case
+  // where the glyph is the only thing saying what state the media is in.
+  if (!interactive) {
+    return /*#__PURE__*/_jsx(View, {
+      ...webDataSet({
+        bloomPlayButton: variant
+      }),
+      role: accessibilityLabel ? 'img' : undefined,
+      accessibilityLabel: accessibilityLabel,
+      "aria-hidden": accessibilityLabel ? undefined : true,
+      importantForAccessibility: accessibilityLabel ? 'yes' : 'no-hide-descendants',
+      accessibilityElementsHidden: !accessibilityLabel,
+      style: [rootStyle, style],
+      testID: testID,
+      children: glyphBox
+    });
+  }
+  return /*#__PURE__*/_jsx(Pressable, {
+    ...webDataSet({
+      bloomMediaFocusable: '',
+      bloomPlayButton: variant
+    }),
+    role: "button",
+    accessibilityLabel: name,
+    "aria-busy": loading || undefined,
+    "aria-disabled": disabled || undefined,
+    accessibilityState: {
+      busy: loading,
+      disabled
+    },
+    disabled: disabled,
+    onPress: onPress,
+    onHoverIn: () => setHovered(true),
+    onHoverOut: () => setHovered(false),
+    onPressIn: () => setPressed(true),
+    onPressOut: () => setPressed(false),
+    style: [rootStyle, style],
+    testID: testID,
+    children: glyphBox
+  });
+}
+export const PlayButton = /*#__PURE__*/memo(PlayButtonComponent);
+PlayButton.displayName = 'PlayButton';
+//# sourceMappingURL=PlayButton.js.map

package/lib/module/media-controls/PlayButton.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","memo","useEffect","useMemo","useState","Pressable","View","RiPlayFill","borderRadius","DISABLED_OPACITY","adoptStyleSheet","webDataSet","useTheme","IS_WEB","MEDIA_CONTROLS_CSS","MEDIA_CONTROLS_STYLE_ID","resolveMediaControlsPaint","PauseGlyph","SpinnerRing","jsx","_jsx","SIZE_CONFIG","small","box","glyph","medium","large","PlayButtonComponent","playing","onPress","interactive","size","variant","loading","disabled","subject","playLabel","pauseLabel","accessibilityLabel","style","testID","theme","paint","hovered","setHovered","pressed","setPressed","action","name","active","fill","glyphColor","accentPressed","accentHover","accent","onAccent","inverseHover","inverse","onInverse","undefined","text","Glyph","rootStyle","width","height","full","alignItems","justifyContent","backgroundColor","opacity","ring","transitionProperty","transitionDuration","glyphBox","pointerEvents","children","color","bloomPlayButton","role","importantForAccessibility","accessibilityElementsHidden","bloomMediaFocusable","accessibilityState","busy","onHoverIn","onHoverOut","onPressIn","onPressOut","PlayButton","displayName"],"sourceRoot":"../../../src","sources":["media-controls/PlayButton.tsx"],"mappings":"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","ignoreList":[]}