@oxy.so/bloom 2.9.0 → 2.11.0

package/lib/commonjs/media-header/EpisodeHeader.js

@@ -0,0 +1,188 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EpisodeHeader = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _RiAddCircleLine = require("../icons/remix/RiAddCircleLine.js");
+var _RiCheckboxCircleFill = require("../icons/remix/RiCheckboxCircleFill.js");
+var _RiShareForwardLine = require("../icons/remix/RiShareForwardLine.js");
+var _PlayButton = require("../media-controls/PlayButton.js");
+var _index = require("../typography/index.js");
+var _MediaActionBar = require("./MediaActionBar.js");
+var _parts = require("./parts.js");
+var _shared = require("./shared.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/**
+ * The header of one podcast episode.
+ *
+ *   band     cover 160 (narrow 120, left), radius 8 · show link (headline-semibold)
+ *            · title (display-3 … title-1) · "Podcast episode"
+ *   row      PlayButton large · date · duration · progress (bar 120 + "23 min
+ *            left") · save toggle · share · download · more
+ *
+ * Save is a toggle named `saveLabel` ("Save episode") with `aria-pressed`;
+ * saved draws the accent check circle.
+ */
+
+function EpisodeHeaderComponent({
+  title,
+  cover,
+  showTitle,
+  onShowPress,
+  date,
+  duration,
+  playing,
+  onPlayPress,
+  progress,
+  remainingLabel,
+  saved = false,
+  onSavedChange,
+  saveLabel = 'Save episode',
+  onSharePress,
+  shareLabel = 'Share',
+  download = 'idle',
+  downloadProgress,
+  onDownloadPress,
+  onMorePress,
+  typeLabel = 'Podcast episode',
+  artworkColor,
+  actions,
+  headingLevel = 1,
+  style,
+  testID
+}) {
+  const paint = (0, _parts.useMediaHeaderPaint)(artworkColor);
+  const row = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: {
+      gap: 16
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        alignItems: 'center',
+        columnGap: 16,
+        rowGap: 8
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_PlayButton.PlayButton, {
+        playing: playing,
+        onPress: onPlayPress,
+        size: "large",
+        subject: title,
+        testID: testID ? `${testID}-play` : undefined
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_parts.MetaLine, {
+        segments: [date, duration],
+        color: paint.text,
+        mutedColor: paint.textMuted,
+        ring: paint.ring
+      }), progress !== undefined ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: {
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap: 8
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_parts.ProgressBar, {
+          value: progress,
+          label: "Listening progress",
+          fill: paint.accent,
+          rail: paint.rail,
+          width: 120,
+          testID: testID ? `${testID}-progress` : undefined
+        }), remainingLabel ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Text, {
+          variant: "body-2-medium",
+          style: {
+            color: paint.textMuted
+          },
+          children: remainingLabel
+        }) : null]
+      }) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: {
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap: 4
+        },
+        children: [onSavedChange ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_MediaActionBar.MediaIconButton, {
+          icon: saved ? _RiCheckboxCircleFill.RiCheckboxCircleFill : _RiAddCircleLine.RiAddCircleLine,
+          size: 28,
+          pressed: saved,
+          accessibilityLabel: saveLabel,
+          onPress: () => onSavedChange(!saved),
+          testID: testID ? `${testID}-save` : undefined
+        }) : null, onSharePress ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_MediaActionBar.MediaIconButton, {
+          icon: _RiShareForwardLine.RiShareForwardLine,
+          size: 24,
+          accessibilityLabel: shareLabel,
+          onPress: onSharePress,
+          testID: testID ? `${testID}-share` : undefined
+        }) : null, onDownloadPress ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_MediaActionBar.DownloadButton, {
+          state: download,
+          progress: downloadProgress,
+          onPress: onDownloadPress,
+          testID: testID ? `${testID}-download` : undefined
+        }) : null, onMorePress ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_MediaActionBar.MediaMoreButton, {
+          onPress: onMorePress,
+          testID: testID ? `${testID}-more` : undefined
+        }) : null]
+      })]
+    }), actions]
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_parts.MediaHeaderFrame, {
+    paint: paint,
+    style: style,
+    testID: testID,
+    actions: row,
+    centerCoverOnNarrow: false,
+    coverWidth: wide => wide ? 160 : 120,
+    cover: ({
+      wide
+    }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_parts.Cover, {
+      source: cover,
+      size: wide ? 160 : 120,
+      radius: 8,
+      paint: paint,
+      testID: testID ? `${testID}-cover` : undefined
+    }),
+    children: ({
+      textWidth
+    }) => {
+      // An episode title is a sentence — start two steps down.
+      const variant = (0, _shared.selectTitleVariant)(title, textWidth);
+      const capped = variant === 'large-title-bold' || variant === 'display-1-bold' || variant === 'display-2-bold' ? 'display-3-bold' : variant;
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: {
+            flexDirection: 'row'
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_parts.InlineLink, {
+            label: showTitle,
+            onPress: onShowPress,
+            color: paint.onBand,
+            variant: "headline-semibold",
+            ring: paint.ring,
+            testID: testID ? `${testID}-show` : undefined
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_parts.HeaderTitle, {
+          variant: capped,
+          color: paint.onBand,
+          level: headingLevel,
+          numberOfLines: 3,
+          testID: testID ? `${testID}-title` : undefined,
+          children: title
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Text, {
+          variant: "body-medium",
+          style: {
+            color: paint.onBandMuted
+          },
+          children: typeLabel
+        })]
+      });
+    }
+  });
+}
+const EpisodeHeader = exports.EpisodeHeader = /*#__PURE__*/(0, _react.memo)(EpisodeHeaderComponent);
+EpisodeHeader.displayName = 'EpisodeHeader';
+//# sourceMappingURL=EpisodeHeader.js.map

package/lib/commonjs/media-header/EpisodeHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_RiAddCircleLine","_RiCheckboxCircleFill","_RiShareForwardLine","_PlayButton","_index","_MediaActionBar","_parts","_shared","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","EpisodeHeaderComponent","title","cover","showTitle","onShowPress","date","duration","playing","onPlayPress","progress","remainingLabel","saved","onSavedChange","saveLabel","onSharePress","shareLabel","download","downloadProgress","onDownloadPress","onMorePress","typeLabel","artworkColor","actions","headingLevel","style","testID","paint","useMediaHeaderPaint","row","jsxs","View","gap","children","flexDirection","flexWrap","alignItems","columnGap","rowGap","jsx","PlayButton","onPress","size","subject","undefined","MetaLine","segments","color","text","mutedColor","textMuted","ring","ProgressBar","value","label","fill","accent","rail","width","Text","variant","MediaIconButton","icon","RiCheckboxCircleFill","RiAddCircleLine","pressed","accessibilityLabel","RiShareForwardLine","DownloadButton","state","MediaMoreButton","MediaHeaderFrame","centerCoverOnNarrow","coverWidth","wide","Cover","source","radius","textWidth","selectTitleVariant","capped","Fragment","InlineLink","onBand","HeaderTitle","level","numberOfLines","onBandMuted","EpisodeHeader","exports","memo","displayName"],"sourceRoot":"../../../src","sources":["media-header/EpisodeHeader.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/media-header/MediaActionBar.js

@@ -0,0 +1,477 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ShuffleButton = exports.MediaMoreButton = exports.MediaIconButton = exports.MediaActionBar = exports.FollowButton = exports.DownloadButton = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _reactNativeSvg = _interopRequireWildcard(require("react-native-svg"));
+var _useInteractionState = require("../hooks/use-interaction-state.js");
+var _RiArrowDownCircleFill = require("../icons/remix/RiArrowDownCircleFill.js");
+var _RiDownload2Line = require("../icons/remix/RiDownload2Line.js");
+var _RiListUnordered = require("../icons/remix/RiListUnordered.js");
+var _RiListView = require("../icons/remix/RiListView.js");
+var _RiMoreFill = require("../icons/remix/RiMoreFill.js");
+var _RiSearchLine = require("../icons/remix/RiSearchLine.js");
+var _RiShuffleLine = require("../icons/remix/RiShuffleLine.js");
+var _button = require("../button");
+var _LikeButton = require("../media-controls/LikeButton.js");
+var _PlayButton = require("../media-controls/PlayButton.js");
+var _tokens = require("../styles/tokens.js");
+var _index = require("../typography/index.js");
+var _parts = require("./parts.js");
+var _shared = require("./shared.js");
+var _clamp = require("../styles/clamp.js");
+var _webData = require("../styles/web-data.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/**
+ * The row of controls under a media header.
+ *
+ *   left    PlayButton large (56) accent · shuffle · heart or outline pill ·
+ *           download · more — 16 apart, each only when its handler is given
+ *   right   search · list / compact view · `trailing`
+ *
+ * The glyph controls are 40 boxes with a muted glyph that turns the text colour
+ * on hover; an active toggle is accent with a 4px dot under the glyph. Colour
+ * change only — no scale.
+ */
+
+function stop(event) {
+  if (_shared.IS_WEB) {
+    event.preventDefault?.();
+    event.stopPropagation?.();
+  }
+}
+
+/**
+ * A glyph-only control; a toggle when `pressed` is given.
+ *
+ * `button/GlyphButton` at this bar's 40 box (`max(40, size + 12)` — the glyph is
+ * the caller's, the TARGET is never under 40) with no fill in any state, plus
+ * the 4px accent dot an active toggle carries.
+ */
+function MediaIconButtonComponent({
+  icon: Icon,
+  accessibilityLabel,
+  onPress,
+  size = 24,
+  pressed,
+  color,
+  disabled = false,
+  style,
+  testID,
+  'aria-expanded': ariaExpanded,
+  'aria-haspopup': ariaHaspopup
+}) {
+  const paint = (0, _parts.useMediaHeaderPaint)();
+  const box = Math.max(40, size + 12);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.GlyphButton, {
+    icon: Icon,
+    size: box,
+    glyphSize: size,
+    accessibilityLabel: accessibilityLabel,
+    disabled: disabled,
+    pressed: pressed,
+    color: color ?? paint.textMuted,
+    hoverColor: paint.text,
+    activeColor: paint.accent,
+    activeHoverColor: paint.accent,
+    fill: "transparent",
+    hoverFill: "transparent",
+    ring: paint.ring,
+    "aria-expanded": ariaExpanded,
+    "aria-haspopup": ariaHaspopup,
+    onPress: event => {
+      stop(event);
+      onPress?.();
+    },
+    style: style,
+    testID: testID,
+    decoration: pressed ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      pointerEvents: "none",
+      style: {
+        position: 'absolute',
+        bottom: 1,
+        width: 4,
+        height: 4,
+        borderRadius: 2,
+        backgroundColor: paint.accent
+      }
+    }) : null
+  });
+}
+const MediaIconButton = exports.MediaIconButton = /*#__PURE__*/(0, _react.memo)(MediaIconButtonComponent);
+MediaIconButton.displayName = 'MediaIconButton';
+function ShuffleButtonComponent({
+  shuffle,
+  onShuffleChange,
+  size = 28,
+  accessibilityLabel = 'Shuffle',
+  ...rest
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(MediaIconButton, {
+    icon: _RiShuffleLine.RiShuffleLine,
+    size: size,
+    pressed: shuffle,
+    accessibilityLabel: accessibilityLabel,
+    onPress: () => onShuffleChange(!shuffle),
+    ...rest
+  });
+}
+const ShuffleButton = exports.ShuffleButton = /*#__PURE__*/(0, _react.memo)(ShuffleButtonComponent);
+ShuffleButton.displayName = 'ShuffleButton';
+function MediaMoreButtonComponent({
+  onPress,
+  accessibilityLabel = 'More options',
+  size = 28,
+  ...rest
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(MediaIconButton, {
+    icon: _RiMoreFill.RiMoreFill,
+    size: size,
+    accessibilityLabel: accessibilityLabel,
+    onPress: onPress,
+    ...rest
+  });
+}
+const MediaMoreButton = exports.MediaMoreButton = /*#__PURE__*/(0, _react.memo)(MediaMoreButtonComponent);
+MediaMoreButton.displayName = 'MediaMoreButton';
+
+/**
+ * Download toggle.
+ *
+ *   idle         outline arrow, muted
+ *   downloading  a ring filling in accent around a small arrow; the ring is a
+ *                `progressbar` with its own name and value
+ *   downloaded   filled accent circle with the arrow
+ *
+ * One name in every state ("Download"); `aria-pressed` is `true` once
+ * downloaded, `aria-busy` while downloading.
+ */
+function DownloadButtonComponent({
+  state,
+  progress = 0,
+  onPress,
+  size = 28,
+  disabled = false,
+  accessibilityLabel = 'Download',
+  progressLabel = 'Download progress',
+  style,
+  testID
+}) {
+  const paint = (0, _parts.useMediaHeaderPaint)();
+  const {
+    state: hovered,
+    onIn,
+    onOut
+  } = (0, _useInteractionState.useInteractionState)();
+  const box = Math.max(40, size + 12);
+  const downloaded = state === 'downloaded';
+  const downloading = state === 'downloading';
+  const idleColor = hovered && !disabled ? paint.text : paint.textMuted;
+  const root = {
+    width: box,
+    height: box,
+    borderRadius: _tokens.borderRadius.full,
+    alignItems: 'center',
+    justifyContent: 'center',
+    opacity: disabled ? _tokens.DISABLED_OPACITY : 1,
+    '--bloom-media-header-ring': paint.ring
+  };
+  const stroke = 2.5;
+  const r = (size - stroke) / 2;
+  const circumference = 2 * Math.PI * r;
+  const value = (0, _clamp.clamp01)(progress);
+  const inner = Math.round(size * 0.55);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [{
+      alignItems: 'center',
+      justifyContent: 'center'
+    }, style],
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+      ...(0, _webData.webDataSet)({
+        bloomMediaHeaderPress: ''
+      }),
+      role: "button",
+      accessibilityLabel: accessibilityLabel,
+      "aria-pressed": downloaded,
+      "aria-busy": downloading || undefined,
+      "aria-disabled": disabled || undefined,
+      accessibilityState: {
+        selected: downloaded,
+        busy: downloading,
+        disabled
+      },
+      disabled: disabled,
+      onHoverIn: onIn,
+      onHoverOut: onOut,
+      onPress: event => {
+        stop(event);
+        onPress();
+      },
+      style: root,
+      testID: testID,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        pointerEvents: "none",
+        style: {
+          width: size,
+          height: size,
+          alignItems: 'center',
+          justifyContent: 'center'
+        },
+        children: downloaded ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_RiArrowDownCircleFill.RiArrowDownCircleFill, {
+          width: size,
+          height: size,
+          fill: paint.accent
+        }) : downloading ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeSvg.default, {
+            width: size,
+            height: size,
+            style: {
+              position: 'absolute',
+              transform: [{
+                rotate: '-90deg'
+              }]
+            },
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Circle, {
+              cx: size / 2,
+              cy: size / 2,
+              r: r,
+              stroke: paint.border,
+              strokeWidth: stroke,
+              fill: "none"
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Circle, {
+              cx: size / 2,
+              cy: size / 2,
+              r: r,
+              stroke: paint.accent,
+              strokeWidth: stroke,
+              fill: "none",
+              strokeLinecap: "round",
+              strokeDasharray: `${circumference} ${circumference}`,
+              strokeDashoffset: circumference * (1 - value)
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_RiDownload2Line.RiDownload2Line, {
+            width: inner,
+            height: inner,
+            fill: paint.accent
+          })]
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_RiDownload2Line.RiDownload2Line, {
+          width: size,
+          height: size,
+          fill: idleColor
+        })
+      })
+    }), downloading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      role: "progressbar",
+      accessibilityLabel: progressLabel,
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      "aria-valuenow": Math.round(value * 100),
+      pointerEvents: "none",
+      style: {
+        position: 'absolute',
+        width: 1,
+        height: 1,
+        overflow: 'hidden',
+        opacity: 0
+      },
+      testID: testID ? `${testID}-progress` : undefined
+    }) : null]
+  });
+}
+const DownloadButton = exports.DownloadButton = /*#__PURE__*/(0, _react.memo)(DownloadButtonComponent);
+DownloadButton.displayName = 'DownloadButton';
+
+/**
+ * The outline pill: "Follow" → "Following", "Save" → "Saved". A toggle with
+ * one name (`label`) and `aria-pressed`.
+ */
+function FollowButtonComponent({
+  following,
+  onFollowChange,
+  label = 'Follow',
+  followingLabel = 'Following',
+  color,
+  size = 'small',
+  disabled = false,
+  style,
+  testID
+}) {
+  const paint = (0, _parts.useMediaHeaderPaint)();
+  const {
+    state: hovered,
+    onIn,
+    onOut
+  } = (0, _useInteractionState.useInteractionState)();
+  const fg = color ?? paint.text;
+  const active = hovered && !disabled;
+  const root = {
+    height: size === 'medium' ? 36 : 32,
+    paddingLeft: 16,
+    paddingRight: 16,
+    borderRadius: _tokens.borderRadius.full,
+    borderWidth: 1,
+    borderColor: active ? fg : color ? fg : paint.border,
+    alignItems: 'center',
+    justifyContent: 'center',
+    opacity: disabled ? _tokens.DISABLED_OPACITY : 1,
+    '--bloom-media-header-ring': paint.ring,
+    ...(_shared.IS_WEB ? {
+      transitionProperty: 'border-color',
+      transitionDuration: '150ms'
+    } : null)
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+    ...(0, _webData.webDataSet)({
+      bloomMediaHeaderPress: ''
+    }),
+    role: "button",
+    accessibilityLabel: label,
+    "aria-pressed": following,
+    "aria-disabled": disabled || undefined,
+    accessibilityState: {
+      selected: following,
+      disabled
+    },
+    disabled: disabled,
+    onHoverIn: onIn,
+    onHoverOut: onOut,
+    onPress: event => {
+      stop(event);
+      onFollowChange(!following);
+    },
+    style: [root, style],
+    testID: testID,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Text, {
+      variant: "body-semibold",
+      style: {
+        color: fg
+      },
+      numberOfLines: 1,
+      children: following ? followingLabel : label
+    })
+  });
+}
+const FollowButton = exports.FollowButton = /*#__PURE__*/(0, _react.memo)(FollowButtonComponent);
+FollowButton.displayName = 'FollowButton';
+function MediaActionBarComponent({
+  playing,
+  onPlayPress,
+  playSubject,
+  playDisabled,
+  shuffle = false,
+  onShuffleChange,
+  liked = false,
+  onLikedChange,
+  following = false,
+  onFollowChange,
+  followLabel,
+  followingLabel,
+  download = 'idle',
+  downloadProgress,
+  onDownloadPress,
+  onMorePress,
+  more,
+  onSearchPress,
+  searchLabel = 'Search in playlist',
+  compactViewLabel = 'Compact view',
+  view = 'list',
+  onViewChange,
+  trailing,
+  style,
+  testID
+}) {
+  const hasRight = onSearchPress || onViewChange || trailing;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [{
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      gap: 8
+    }, style],
+    testID: testID,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 8,
+        flexShrink: 1,
+        flexWrap: 'wrap'
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_PlayButton.PlayButton, {
+        playing: playing,
+        onPress: onPlayPress,
+        size: "large",
+        subject: playSubject,
+        disabled: playDisabled,
+        style: {
+          marginRight: 8
+        },
+        testID: testID ? `${testID}-play` : undefined
+      }), onShuffleChange ? /*#__PURE__*/(0, _jsxRuntime.jsx)(ShuffleButton, {
+        shuffle: shuffle,
+        onShuffleChange: onShuffleChange,
+        testID: testID ? `${testID}-shuffle` : undefined
+      }) : null, onLikedChange ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_LikeButton.LikeButton, {
+        liked: liked,
+        onLikedChange: onLikedChange,
+        size: "large",
+        testID: testID ? `${testID}-like` : undefined
+      }) : null, onFollowChange ? /*#__PURE__*/(0, _jsxRuntime.jsx)(FollowButton, {
+        following: following,
+        onFollowChange: onFollowChange,
+        label: followLabel,
+        followingLabel: followingLabel,
+        style: {
+          marginLeft: 4,
+          marginRight: 4
+        },
+        testID: testID ? `${testID}-follow` : undefined
+      }) : null, onDownloadPress ? /*#__PURE__*/(0, _jsxRuntime.jsx)(DownloadButton, {
+        state: download,
+        progress: downloadProgress,
+        onPress: onDownloadPress,
+        testID: testID ? `${testID}-download` : undefined
+      }) : null, more ?
+      /*#__PURE__*/
+      // A menu trigger wraps its child in an anchor that aligns itself to the
+      // start; a fixed-height box keeps the slot on the row's centre line.
+      (0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: {
+          height: 40,
+          justifyContent: 'center'
+        },
+        children: more
+      }) : onMorePress ? /*#__PURE__*/(0, _jsxRuntime.jsx)(MediaMoreButton, {
+        onPress: onMorePress,
+        testID: testID ? `${testID}-more` : undefined
+      }) : null]
+    }), hasRight ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 4
+      },
+      children: [onSearchPress ? /*#__PURE__*/(0, _jsxRuntime.jsx)(MediaIconButton, {
+        icon: _RiSearchLine.RiSearchLine,
+        size: 20,
+        accessibilityLabel: searchLabel,
+        onPress: onSearchPress,
+        testID: testID ? `${testID}-search` : undefined
+      }) : null, onViewChange ? /*#__PURE__*/(0, _jsxRuntime.jsx)(MediaIconButton, {
+        icon: view === 'compact' ? _RiListView.RiListView : _RiListUnordered.RiListUnordered,
+        size: 20,
+        accessibilityLabel: compactViewLabel,
+        pressed: view === 'compact',
+        onPress: () => onViewChange(view === 'compact' ? 'list' : 'compact'),
+        testID: testID ? `${testID}-view` : undefined
+      }) : null, trailing]
+    }) : null]
+  });
+}
+const MediaActionBar = exports.MediaActionBar = /*#__PURE__*/(0, _react.memo)(MediaActionBarComponent);
+MediaActionBar.displayName = 'MediaActionBar';
+//# sourceMappingURL=MediaActionBar.js.map