@oxy.so/bloom 2.9.0 → 2.10.0

package/src/media-controls/SpinnerRing.tsx

@@ -0,0 +1,51 @@
+import React, { useEffect } from 'react';
+import { View } from 'react-native';
+import Animated, {
+  Easing,
+  cancelAnimation,
+  useAnimatedStyle,
+  useSharedValue,
+  withRepeat,
+  withTiming,
+} from 'react-native-reanimated';
+
+/**
+ * A ring with one bright quarter, turning once every 800ms. Internal to the
+ * family (`PlayButton`'s `loading`). It keeps turning under reduced motion: it
+ * is a status, not decoration, and a still ring would read as "stalled".
+ */
+export function SpinnerRing({ size, color }: { size: number; color: string }) {
+  const rotation = useSharedValue(0);
+
+  useEffect(() => {
+    rotation.value = 0;
+    rotation.value = withRepeat(withTiming(360, { duration: 800, easing: Easing.linear }), -1, false);
+    return () => cancelAnimation(rotation);
+  }, [rotation]);
+
+  const animated = useAnimatedStyle(
+    () => ({ transform: [{ rotate: `${rotation.value}deg` }] }),
+    [rotation],
+  );
+
+  const stroke = Math.max(2, Math.round(size / 10));
+  const ring = { width: size, height: size, borderRadius: size / 2, borderWidth: stroke } as const;
+  return (
+    <View pointerEvents="none" style={{ width: size, height: size }}>
+      {/* The track: the whole ring, faint. Opacity rather than an alpha colour. */}
+      <View style={[ring, { position: 'absolute', borderColor: color, opacity: 0.3 }]} />
+      <Animated.View
+        style={[
+          ring,
+          {
+            borderTopColor: 'transparent',
+            borderRightColor: 'transparent',
+            borderBottomColor: 'transparent',
+            borderLeftColor: color,
+          },
+          animated,
+        ]}
+      />
+    </View>
+  );
+}

package/src/media-controls/VolumeControl.tsx

@@ -0,0 +1,140 @@
+import React, { memo, useCallback, useEffect, useMemo, useState } from 'react';
+import { Pressable, View } from 'react-native';
+
+import { webDataSet } from '../checkbox/shared';
+import { RiVolumeDownLine } from '../icons/remix/RiVolumeDownLine';
+import { RiVolumeMuteLine } from '../icons/remix/RiVolumeMuteLine';
+import { RiVolumeUpLine } from '../icons/remix/RiVolumeUpLine';
+import { adoptStyleSheet } from '../styles/adopt-style-sheet';
+import { borderRadius } from '../styles/tokens';
+import type { WebCssStyle } from '../styles/web-view-style';
+import { useTheme } from '../theme/use-theme';
+import { MediaTrack } from './MediaTrack';
+import {
+  IS_WEB,
+  MEDIA_CONTROLS_CSS,
+  MEDIA_CONTROLS_STYLE_ID,
+  clamp,
+  resolveMediaControlsPaint,
+} from './shared';
+import type { VolumeControlProps } from './types';
+
+/** The speaker glyph for a level: muted or 0 → mute, under 0.5 → down, else up. */
+export function volumeIconFor(volume: number, muted: boolean) {
+  if (muted || volume <= 0) return RiVolumeMuteLine;
+  return volume < 0.5 ? RiVolumeDownLine : RiVolumeUpLine;
+}
+
+/**
+ * A speaker button that mutes, beside a short volume slider.
+ *
+ *   button   32 round, 20px glyph, muted neutral; hover: text colour on a
+ *            neutral-100 (dark neutral-800) wash
+ *   slider   the family's 4px rail, `sliderWidth` wide (96), 4px after the button
+ *
+ * The glyph follows the level: `RiVolumeMuteLine` (muted or 0),
+ * `RiVolumeDownLine` (under 50%), `RiVolumeUpLine`. While muted the slider draws
+ * 0; moving it calls `onMutedChange(false)` as well as `onVolumeChange`.
+ *
+ * `sliderVisibility="hover"` hides the slider on web until the control is
+ * hovered or holds keyboard focus (its width stays reserved, so nothing moves);
+ * a device without hover, and native, always shows it.
+ *
+ * Accessibility: the button is named by the action ("Mute" / "Unmute"); the
+ * slider is a `slider` named "Volume" with `aria-valuetext` "40%". Arrows step
+ * 5%.
+ */
+function VolumeControlComponent({
+  volume,
+  onVolumeChange,
+  muted = false,
+  onMutedChange,
+  sliderWidth = 96,
+  sliderVisibility = 'always',
+  disabled = false,
+  muteLabel = 'Mute',
+  unmuteLabel = 'Unmute',
+  accessibilityLabel = 'Volume',
+  style,
+  testID,
+}: VolumeControlProps) {
+  const theme = useTheme();
+  useEffect(() => {
+    adoptStyleSheet(MEDIA_CONTROLS_STYLE_ID, MEDIA_CONTROLS_CSS);
+  }, []);
+  const paint = useMemo(() => resolveMediaControlsPaint(theme), [theme]);
+  const [hovered, setHovered] = useState(false);
+
+  const level = clamp(volume, 0, 1);
+  const drawn = muted ? 0 : level;
+  const Glyph = volumeIconFor(level, muted);
+
+  const change = useCallback(
+    (next: number) => {
+      const rounded = Math.round(clamp(next, 0, 1) * 100) / 100;
+      if (muted && rounded > 0) onMutedChange?.(false);
+      onVolumeChange(rounded);
+    },
+    [muted, onMutedChange, onVolumeChange],
+  );
+  const valueText = useCallback((v: number) => `${Math.round(v * 100)}%`, []);
+
+  const buttonStyle: WebCssStyle = {
+    width: 32,
+    height: 32,
+    borderRadius: borderRadius.full,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: hovered && !disabled ? paint.wash : undefined,
+    '--bloom-media-ring': paint.ring,
+  };
+
+  return (
+    <View
+      {...webDataSet({
+        bloomVolumeControl: '',
+        bloomVolumeReveal: IS_WEB ? sliderVisibility : 'always',
+      })}
+      style={[
+        { flexDirection: 'row', alignItems: 'center', gap: 4, opacity: disabled ? 0.5 : 1 },
+        style,
+      ]}
+      testID={testID}
+    >
+      <Pressable
+        {...webDataSet({ bloomMediaFocusable: '' })}
+        role="button"
+        accessibilityLabel={muted ? unmuteLabel : muteLabel}
+        aria-disabled={disabled || undefined}
+        accessibilityState={{ disabled }}
+        disabled={disabled}
+        onHoverIn={() => setHovered(true)}
+        onHoverOut={() => setHovered(false)}
+        onPress={() => onMutedChange?.(!muted)}
+        style={buttonStyle}
+        testID={testID ? `${testID}-mute` : undefined}
+      >
+        <View pointerEvents="none" style={{ width: 20, height: 20 }}>
+          <Glyph width={20} height={20} fill={hovered && !disabled ? paint.text : paint.textMuted} />
+        </View>
+      </Pressable>
+      <View {...webDataSet({ bloomVolumeSlider: '' })} style={{ width: sliderWidth, flexDirection: 'row' }}>
+        <MediaTrack
+          value={drawn}
+          max={1}
+          onPreview={change}
+          onCommit={change}
+          step={0.05}
+          disabled={disabled}
+          accessibilityLabel={accessibilityLabel}
+          valueText={valueText}
+          style={{ flexGrow: 1 }}
+          testID={testID ? `${testID}-slider` : undefined}
+        />
+      </View>
+    </View>
+  );
+}
+
+export const VolumeControl = memo(VolumeControlComponent);
+VolumeControl.displayName = 'VolumeControl';

package/src/media-controls/index.ts

@@ -0,0 +1,21 @@
+export { PlayButton } from './PlayButton';
+export { LikeButton } from './LikeButton';
+export { ExplicitBadge } from './ExplicitBadge';
+export { NowPlayingIndicator } from './NowPlayingIndicator';
+export { PlaybackProgress } from './PlaybackProgress';
+export { VolumeControl } from './VolumeControl';
+export { formatDuration } from './shared';
+export type {
+  ExplicitBadgeProps,
+  ExplicitBadgeSize,
+  LikeButtonProps,
+  LikeButtonSize,
+  NowPlayingIndicatorProps,
+  PlayButtonProps,
+  PlayButtonSize,
+  PlayButtonVariant,
+  PlaybackProgressProps,
+  PlaybackProgressTimes,
+  VolumeControlProps,
+  VolumeSliderVisibility,
+} from './types';

package/src/media-controls/shared.ts

@@ -0,0 +1,122 @@
+import { Platform } from 'react-native';
+
+import { mixColor, resolveButtonRamps } from '../button/shared';
+import type { Theme } from '../theme/types';
+
+export const IS_WEB = Platform.OS === 'web';
+
+/**
+ * Seconds as a clock: `m:ss` under an hour, `h:mm:ss` from an hour. Fractions
+ * are floored (a player at 59.9s has not reached 1:00). Negative, `NaN` and
+ * infinite input draw `0:00`.
+ */
+export function formatDuration(seconds: number): string {
+  const total = Number.isFinite(seconds) && seconds > 0 ? Math.floor(seconds) : 0;
+  const h = Math.floor(total / 3600);
+  const m = Math.floor((total % 3600) / 60);
+  const s = total % 60;
+  const ss = String(s).padStart(2, '0');
+  return h > 0 ? `${h}:${String(m).padStart(2, '0')}:${ss}` : `${m}:${ss}`;
+}
+
+export function clamp(v: number, min: number, max: number): number {
+  return Math.min(max, Math.max(min, v));
+}
+
+/** Every colour the family paints, from the theme only. */
+export interface MediaControlsPaint {
+  accent: string;
+  accentHover: string;
+  accentPressed: string;
+  onAccent: string;
+  inverse: string;
+  inverseHover: string;
+  onInverse: string;
+  text: string;
+  textMuted: string;
+  /** A neutral wash behind a glyph-only control under the pointer. */
+  wash: string;
+  rail: string;
+  buffered: string;
+  badge: string;
+  onBadge: string;
+  ring: string;
+}
+
+export function resolveMediaControlsPaint(theme: Theme): MediaControlsPaint {
+  const { accent, neutral: n } = resolveButtonRamps(theme);
+  const dark = theme.isDark;
+  const { colors } = theme;
+  return {
+    accent: accent[500],
+    accentHover: dark ? accent[400] : accent[600],
+    accentPressed: dark ? accent[300] : accent[700],
+    onAccent: colors.primaryForeground,
+    inverse: colors.text,
+    inverseHover: mixColor(colors.text, colors.background, 0.16),
+    onInverse: colors.background,
+    text: colors.text,
+    textMuted: dark ? n[400] : n[500],
+    wash: dark ? n[800] : n[100],
+    rail: dark ? n[700] : n[200],
+    buffered: dark ? n[500] : n[300],
+    badge: dark ? n[400] : n[500],
+    onBadge: colors.background,
+    ring: accent[500],
+  };
+}
+
+// ---------------------------------------------------------------------------
+//  Web CSS — focus rings and the hover reveal have no inline-style spelling, so
+//  they hang off `dataSet` attributes in one adopted sheet.
+// ---------------------------------------------------------------------------
+
+export const MEDIA_CONTROLS_STYLE_ID = 'bloom-media-controls-web-css';
+
+const FOCUSABLE = '[data-bloom-media-focusable]';
+const THUMB = '[data-bloom-media-thumb]';
+const TRACK = '[data-bloom-media-track]';
+const VOLUME = '[data-bloom-volume-control]';
+const VOLUME_SLIDER = '[data-bloom-volume-slider]';
+
+export const MEDIA_CONTROLS_CSS = `
+${FOCUSABLE} {
+  outline: none;
+  cursor: pointer;
+}
+${FOCUSABLE}[aria-disabled="true"] {
+  cursor: default;
+}
+${FOCUSABLE}:focus-visible {
+  outline: 2px solid var(--bloom-media-ring, currentColor);
+  outline-offset: 2px;
+}
+${TRACK}:focus-visible {
+  outline-offset: 4px;
+  border-radius: 4px;
+}
+${TRACK}:focus-visible ${THUMB} {
+  opacity: 1 !important;
+}
+${TRACK}:focus-visible [data-bloom-media-fill] {
+  background-color: var(--bloom-media-accent) !important;
+}
+${VOLUME}[data-bloom-volume-reveal="hover"] ${VOLUME_SLIDER} {
+  opacity: 0;
+  transition: opacity 150ms ease-out;
+}
+${VOLUME}[data-bloom-volume-reveal="hover"]:hover ${VOLUME_SLIDER},
+${VOLUME}[data-bloom-volume-reveal="hover"]:focus-within ${VOLUME_SLIDER} {
+  opacity: 1;
+}
+@media (hover: none) {
+  ${VOLUME}[data-bloom-volume-reveal="hover"] ${VOLUME_SLIDER} {
+    opacity: 1;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  ${VOLUME} ${VOLUME_SLIDER} {
+    transition: none;
+  }
+}
+`;

package/src/media-controls/types.ts

@@ -0,0 +1,144 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+
+/** `small` 32, `medium` 48 (default), `large` 56 — the diameter of the button. */
+export type PlayButtonSize = 'small' | 'medium' | 'large';
+
+/**
+ * `accent` — a filled accent circle (the main transport button).
+ * `inverse` — a circle in the text colour (black in light mode, white in dark).
+ * `plain` — the glyph alone, for a row of tracks.
+ */
+export type PlayButtonVariant = 'accent' | 'inverse' | 'plain';
+
+export interface PlayButtonProps {
+  /** Whether the media is playing: draws the pause glyph and is named "Pause". */
+  playing: boolean;
+  /** Called on press. The button does not toggle anything itself. */
+  onPress?: () => void;
+  /** Default `medium`. */
+  size?: PlayButtonSize;
+  /** Default `accent`. */
+  variant?: PlayButtonVariant;
+  /** Replaces the glyph with a spinning ring and sets `aria-busy`. Still pressable. */
+  loading?: boolean;
+  disabled?: boolean;
+  /** What plays, appended to the name: `"Night Drive"` → "Play Night Drive". */
+  subject?: string;
+  /** Name while paused. Default `"Play"`. */
+  playLabel?: string;
+  /** Name while playing. Default `"Pause"`. */
+  pauseLabel?: string;
+  /** Replaces the composed name entirely. */
+  accessibilityLabel?: string;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+/** Glyph size: `small` 16, `medium` 20 (default), `large` 24. The hit area is never under 32. */
+export type LikeButtonSize = 'small' | 'medium' | 'large';
+
+export interface LikeButtonProps {
+  liked: boolean;
+  /** Called with the next state. */
+  onLikedChange: (liked: boolean) => void;
+  /** Default `medium`. */
+  size?: LikeButtonSize;
+  /** The liked heart's colour. Default: the theme accent. */
+  activeColor?: string;
+  disabled?: boolean;
+  /**
+   * The toggle's name. Default `"Save to Your Library"`. It stays the same in
+   * both states — `aria-pressed` carries the state; a name that also flipped
+   * would be announced as "Remove from Your Library, pressed".
+   */
+  accessibilityLabel?: string;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+/** `small` 14, `medium` 16 (default) square. */
+export type ExplicitBadgeSize = 'small' | 'medium';
+
+export interface ExplicitBadgeProps {
+  /** Default `medium`. */
+  size?: ExplicitBadgeSize;
+  /** The drawn letter. Default `"E"`. */
+  letter?: string;
+  /** The accessible name. Default `"Explicit"`. */
+  label?: string;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+export interface NowPlayingIndicatorProps {
+  /** Animates the bars. `false` draws them still. Default `true`. */
+  playing?: boolean;
+  /** Width and height of the square it draws in. Default `16`. */
+  size?: number;
+  /** Number of bars. Default `4`. */
+  bars?: 3 | 4;
+  /** Bar colour. Default: the theme accent. */
+  color?: string;
+  /** The accessible name. Default `"Now playing"`. */
+  label?: string;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+/** Where `PlaybackProgress` draws its times: beside the track (default) or under both ends. */
+export type PlaybackProgressTimes = 'inline' | 'below';
+
+export interface PlaybackProgressProps {
+  /** Position, in seconds. */
+  value: number;
+  /** Length, in seconds. */
+  duration: number;
+  /** How far the media has loaded, in seconds. */
+  buffered?: number;
+  /** Called once, with the position in seconds, when a drag is released or a key is pressed. */
+  onSeek?: (seconds: number) => void;
+  /** Called while dragging, with the position under the pointer. */
+  onSeekPreview?: (seconds: number) => void;
+  /** Draws the elapsed and total (or remaining) time. Default `false`. */
+  showTimes?: boolean;
+  /** The right-hand label counts down ("−2:22") instead of showing the length. */
+  showRemaining?: boolean;
+  /** Default `inline`. */
+  timesPosition?: PlaybackProgressTimes;
+  /** Seconds one arrow key moves. Default `5`. */
+  keyboardStep?: number;
+  disabled?: boolean;
+  /** The slider's name. Default `"Seek"`. */
+  accessibilityLabel?: string;
+  /** The announced value. Default: "1:23 of 3:45". */
+  formatValueText?: (seconds: number, duration: number) => string;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+/** `always` (default) or `hover`: on web the slider fades in on hover or keyboard focus. Native always shows it. */
+export type VolumeSliderVisibility = 'always' | 'hover';
+
+export interface VolumeControlProps {
+  /** Level, `0`..`1`. */
+  volume: number;
+  /** Called while dragging and on each key press, with a level in `0`..`1`. */
+  onVolumeChange: (volume: number) => void;
+  /** Whether sound is muted. The slider draws 0 while muted. */
+  muted?: boolean;
+  /** Called by the speaker button, and with `false` when the slider is moved while muted. */
+  onMutedChange?: (muted: boolean) => void;
+  /** Width of the slider. Default `96`. */
+  sliderWidth?: number;
+  /** Default `always`. */
+  sliderVisibility?: VolumeSliderVisibility;
+  disabled?: boolean;
+  /** Button name while sounding. Default `"Mute"`. */
+  muteLabel?: string;
+  /** Button name while muted. Default `"Unmute"`. */
+  unmuteLabel?: string;
+  /** The slider's name. Default `"Volume"`. */
+  accessibilityLabel?: string;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}

package/src/media-header/ArtistAbout.tsx

@@ -0,0 +1,91 @@
+import React, { memo } from 'react';
+import { Image, StyleSheet, View } from 'react-native';
+
+import { Text } from '../typography';
+import { ArtistStats } from './ArtistStats';
+import { ClampedText, useImageUri, useMediaHeaderPaint } from './parts';
+import { gradientStyle } from './shared';
+import type { ArtistAboutProps } from './types';
+
+/**
+ * The "About" section of an artist page.
+ *
+ *   heading    title-1-bold
+ *   card       radius 16, `card` fill; with `image` a 16:9 photo on top of it
+ *   bio        body-regular, clamped to `bioLines` with "Show more"
+ *   stats      `ArtistStats` (followers, monthly listeners)
+ *   cities     "Where people listen": city headline-semibold · count body-regular muted
+ */
+
+function ArtistAboutComponent({
+  image,
+  bio,
+  bioLines = 3,
+  stats,
+  cities,
+  title = 'About',
+  showMoreLabel,
+  showLessLabel,
+  style,
+  testID,
+}: ArtistAboutProps) {
+  const paint = useMediaHeaderPaint();
+  const uri = useImageUri(image, 'large');
+  return (
+    <View style={[{ gap: 12 }, style]} testID={testID}>
+      <Text variant="title-1-bold" role="heading" aria-level={2} style={{ color: paint.text }}>
+        {title}
+      </Text>
+      <View style={{ borderRadius: 16, overflow: 'hidden', backgroundColor: paint.card }}>
+        {uri ? (
+          <View style={{ width: '100%', aspectRatio: 16 / 9 }}>
+            <Image source={{ uri }} style={StyleSheet.absoluteFill} resizeMode="cover" />
+            <View
+              pointerEvents="none"
+              style={[StyleSheet.absoluteFill, gradientStyle(['rgba(0, 0, 0, 0) 60%', 'rgba(0, 0, 0, 0.35) 100%'])]}
+            />
+          </View>
+        ) : null}
+        <View style={{ padding: 16, gap: 20 }}>
+          <ClampedText
+            lines={bioLines}
+            color={paint.text}
+            linkColor={paint.text}
+            ring={paint.ring}
+            showMoreLabel={showMoreLabel}
+            showLessLabel={showLessLabel}
+            testID={testID ? `${testID}-bio` : undefined}
+          >
+            {bio}
+          </ClampedText>
+          {stats && stats.length > 0 ? (
+            <ArtistStats stats={stats} testID={testID ? `${testID}-stats` : undefined} />
+          ) : null}
+          {cities && cities.length > 0 ? (
+            <View role="list" style={{ gap: 12 }} testID={testID ? `${testID}-cities` : undefined}>
+              {cities.map((city, i) => (
+                <View
+                  role="listitem"
+                  key={`${city.city}-${i}`}
+                  accessible
+                  accessibilityLabel={`${city.city}, ${city.count}`}
+                  style={{ gap: 0 }}
+                >
+                  <Text variant="headline-semibold" style={{ color: paint.text }}>
+                    {city.city}
+                  </Text>
+                  <Text variant="body-regular" style={{ color: paint.textMuted }}>
+                    {city.count}
+                  </Text>
+                </View>
+              ))}
+            </View>
+          ) : null}
+        </View>
+      </View>
+    </View>
+  );
+}
+
+export const ArtistAbout = memo(ArtistAboutComponent);
+ArtistAbout.displayName = 'ArtistAbout';

package/src/media-header/ArtistHero.tsx

@@ -0,0 +1,116 @@
+import React, { memo } from 'react';
+import { Image, StyleSheet, View } from 'react-native';
+
+import { RiVerifiedBadgeFill } from '../icons/remix/RiVerifiedBadgeFill';
+import { Text } from '../typography';
+import { Cover, HeaderTitle, MediaHeaderFrame, useImageUri, useMediaHeaderPaint } from './parts';
+import { gradientStyle, selectTitleVariant } from './shared';
+import type { ArtistHeroProps } from './types';
+
+/**
+ * The top of an artist page.
+ *
+ * With `banner`: the image fills the band (wide 400 tall, narrow 300) under a
+ * bottom scrim — transparent to 60% black — and the text is white, because it
+ * sits on a photo, not on the theme.
+ *
+ * Without: the band is tinted from `artworkColor` and a round `avatar` (232 wide,
+ * 160 centred on narrow) stands beside the text, which takes the band's text colour.
+ *
+ *   verified   RiVerifiedBadgeFill (accent disc, white tick) + "Verified artist"
+ *   name       large-title … display-4 bold by length and width
+ *   listeners  body-medium
+ *
+ * The `actions` area (Play, Follow pill, shuffle, more) fades into the page under it.
+ */
+
+const SCRIM = ['rgba(0, 0, 0, 0) 0%', 'rgba(0, 0, 0, 0.12) 45%', 'rgba(0, 0, 0, 0.62) 100%'];
+
+function ArtistHeroComponent({
+  name,
+  banner,
+  avatar,
+  verified = false,
+  verifiedLabel = 'Verified artist',
+  listeners,
+  artworkColor,
+  actions,
+  headingLevel = 1,
+  style,
+  testID,
+}: ArtistHeroProps) {
+  const paint = useMediaHeaderPaint(artworkColor);
+  const bannerUri = useImageUri(banner, 'large');
+  const onPhoto = !!bannerUri;
+  const fg = onPhoto ? '#ffffff' : paint.onBand;
+  const fgMuted = onPhoto ? '#ffffff' : paint.onBandMuted;
+
+  return (
+    <MediaHeaderFrame
+      paint={paint}
+      style={style}
+      testID={testID}
+      actions={actions}
+      actionsFade={onPhoto ? [paint.background, paint.background] : undefined}
+      centerCoverOnNarrow
+      coverWidth={(wide) => (onPhoto ? 0 : wide ? 232 : 160)}
+      backdrop={
+        onPhoto ? (
+          <View pointerEvents="none" style={StyleSheet.absoluteFill} testID={testID ? `${testID}-banner` : undefined}>
+            <Image source={{ uri: bannerUri }} style={StyleSheet.absoluteFill} resizeMode="cover" />
+            <View style={[StyleSheet.absoluteFill, gradientStyle(SCRIM)]} />
+          </View>
+        ) : undefined
+      }
+      cover={
+        onPhoto
+          ? undefined
+          : ({ wide }) => (
+              <Cover
+                source={avatar}
+                size={wide ? 232 : 160}
+                shape="round"
+                paint={paint}
+                testID={testID ? `${testID}-avatar` : undefined}
+              />
+            )
+      }
+    >
+      {({ wide, textWidth }) => (
+        <View style={{ gap: 4, minHeight: onPhoto ? (wide ? 304 : 220) : undefined, justifyContent: 'flex-end' }}>
+          {verified ? (
+            <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }} testID={testID ? `${testID}-verified` : undefined}>
+              <View style={{ width: 24, height: 24, alignItems: 'center', justifyContent: 'center' }}>
+                {/* The tick is a cut-out; a white disc under it keeps it white on any band or photo. */}
+                <View style={{ position: 'absolute', width: 12, height: 12, borderRadius: 6, backgroundColor: '#ffffff' }} />
+                <View style={{ width: 24, height: 24 }}>
+                  <RiVerifiedBadgeFill width={24} height={24} fill={paint.accent} />
+                </View>
+              </View>
+              <Text variant="body-medium" style={{ color: fg }}>
+                {verifiedLabel}
+              </Text>
+            </View>
+          ) : null}
+          <HeaderTitle
+            variant={selectTitleVariant(name, textWidth)}
+            color={fg}
+            level={headingLevel}
+            numberOfLines={2}
+            testID={testID ? `${testID}-name` : undefined}
+          >
+            {name}
+          </HeaderTitle>
+          {listeners ? (
+            <Text variant="body-medium" style={{ color: fgMuted }} testID={testID ? `${testID}-listeners` : undefined}>
+              {listeners}
+            </Text>
+          ) : null}
+        </View>
+      )}
+    </MediaHeaderFrame>
+  );
+}
+
+export const ArtistHero = memo(ArtistHeroComponent);
+ArtistHero.displayName = 'ArtistHero';