@oxy.so/bloom 2.8.0 → 2.10.0

package/src/media-header/PodcastShowHeader.tsx

@@ -0,0 +1,225 @@
+import React, { memo } from 'react';
+import { Pressable, View } from 'react-native';
+
+import { Chip } from '../chip';
+import { useInteractionState } from '../hooks/use-interaction-state';
+import { PlayButton } from '../media-controls/PlayButton';
+import { Rating } from '../rating';
+import type { WebCssStyle } from '../styles/web-view-style';
+import { Text } from '../typography';
+import { FollowButton } from './MediaActionBar';
+import { ClampedText, Cover, HeaderTitle, InlineLink, MediaHeaderFrame, useMediaHeaderPaint } from './parts';
+import { selectTitleVariant, webData, type MediaHeaderPaint } from './shared';
+import type { LatestEpisode, PodcastShowHeaderProps } from './types';
+
+/**
+ * The header of a podcast show.
+ *
+ *   band       cover 232 (narrow 200 centred), radius 12 · "Podcast" · title
+ *              (display steps) · publisher link (title-3-semibold)
+ *   below      rating · category chips · Follow pill · `actions`
+ *              description (clamped, "Show more") · "Latest episode" callout
+ *
+ * The callout is a card (radius 16) with the episode's date · duration, title,
+ * two lines of description and a small play button.
+ */
+
+function LatestEpisodeCard({
+  episode,
+  label,
+  paint,
+  testID,
+}: {
+  episode: LatestEpisode;
+  label: string;
+  paint: MediaHeaderPaint;
+  testID?: string;
+}) {
+  const { state: hovered, onIn, onOut } = useInteractionState();
+  const card: WebCssStyle = {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 16,
+    padding: 16,
+    borderRadius: 16,
+    backgroundColor: hovered && episode.onPress ? paint.wash : paint.card,
+    '--bloom-media-header-ring': paint.ring,
+  };
+  const meta = [episode.date, episode.duration].filter(Boolean).join(' · ');
+  const content = (
+    <View style={{ flex: 1, minWidth: 0, gap: 4 }}>
+      <Text variant="caption-1-semibold" style={{ color: paint.accent }}>
+        {label}
+      </Text>
+      <Text variant="headline-semibold" numberOfLines={2} style={{ color: paint.text }}>
+        {episode.title}
+      </Text>
+      {episode.description ? (
+        <Text variant="body-regular" numberOfLines={2} style={{ color: paint.textMuted }}>
+          {episode.description}
+        </Text>
+      ) : null}
+      {meta ? (
+        <Text variant="body-2-medium" style={{ color: paint.textMuted }}>
+          {meta}
+        </Text>
+      ) : null}
+    </View>
+  );
+  return (
+    <View style={{ position: 'relative' }} testID={testID}>
+      {episode.onPress ? (
+        <Pressable
+          {...webData({ bloomMediaHeaderPress: '' })}
+          role="button"
+          accessibilityLabel={`${label}: ${episode.title}`}
+          onPress={episode.onPress}
+          onHoverIn={onIn}
+          onHoverOut={onOut}
+          style={[card, { paddingRight: episode.onPlayPress ? 80 : 16 }]}
+        >
+          {content}
+        </Pressable>
+      ) : (
+        <View style={[card, { paddingRight: episode.onPlayPress ? 80 : 16 }]}>{content}</View>
+      )}
+      {episode.onPlayPress ? (
+        <View style={{ position: 'absolute', right: 16, top: 0, bottom: 0, justifyContent: 'center' }}>
+          <PlayButton
+            playing={episode.playing ?? false}
+            onPress={episode.onPlayPress}
+            subject={episode.title}
+            testID={testID ? `${testID}-play` : undefined}
+          />
+        </View>
+      ) : null}
+    </View>
+  );
+}
+
+function PodcastShowHeaderComponent({
+  title,
+  cover,
+  publisher,
+  onPublisherPress,
+  rating,
+  ratingCount,
+  categories,
+  onCategoryPress,
+  following = false,
+  onFollowChange,
+  description,
+  descriptionLines = 3,
+  latestEpisode,
+  typeLabel = 'Podcast',
+  latestEpisodeLabel = 'Latest episode',
+  showMoreLabel,
+  showLessLabel,
+  artworkColor,
+  actions,
+  headingLevel = 1,
+  style,
+  testID,
+}: PodcastShowHeaderProps) {
+  const paint = useMediaHeaderPaint(artworkColor);
+  const hasRatingRow = rating !== undefined || (categories && categories.length > 0) || onFollowChange;
+
+  const below = (
+    <View style={{ gap: 16 }}>
+      {hasRatingRow ? (
+        <View style={{ flexDirection: 'row', flexWrap: 'wrap', alignItems: 'center', gap: 8 }}>
+          {rating !== undefined ? (
+            <Rating value={rating} count={ratingCount} testID={testID ? `${testID}-rating` : undefined} />
+          ) : null}
+          {(categories ?? []).map((category) => (
+            <Chip
+              key={category}
+              size="small"
+              variant="outlined"
+              color="default"
+              onPress={onCategoryPress ? () => onCategoryPress(category) : undefined}
+              accessibilityLabel={category}
+            >
+              {category}
+            </Chip>
+          ))}
+          {onFollowChange ? (
+            <FollowButton
+              following={following}
+              onFollowChange={onFollowChange}
+              style={{ marginLeft: 4 }}
+              testID={testID ? `${testID}-follow` : undefined}
+            />
+          ) : null}
+        </View>
+      ) : null}
+      {actions}
+      {description ? (
+        <ClampedText
+          lines={descriptionLines}
+          color={paint.text}
+          linkColor={paint.text}
+          ring={paint.ring}
+          showMoreLabel={showMoreLabel}
+          showLessLabel={showLessLabel}
+          testID={testID ? `${testID}-description` : undefined}
+        >
+          {description}
+        </ClampedText>
+      ) : null}
+      {latestEpisode ? (
+        <LatestEpisodeCard
+          episode={latestEpisode}
+          label={latestEpisodeLabel}
+          paint={paint}
+          testID={testID ? `${testID}-latest` : undefined}
+        />
+      ) : null}
+    </View>
+  );
+
+  return (
+    <MediaHeaderFrame
+      paint={paint}
+      style={style}
+      testID={testID}
+      actions={below}
+      coverWidth={(wide) => (wide ? 232 : 200)}
+      cover={({ wide }) => (
+        <Cover source={cover} size={wide ? 232 : 200} radius={12} paint={paint} testID={testID ? `${testID}-cover` : undefined} />
+      )}
+    >
+      {({ textWidth }) => (
+        <>
+          <Text variant="body-medium" style={{ color: paint.onBand }}>
+            {typeLabel}
+          </Text>
+          <HeaderTitle
+            variant={selectTitleVariant(title, textWidth)}
+            color={paint.onBand}
+            level={headingLevel}
+            numberOfLines={3}
+            testID={testID ? `${testID}-title` : undefined}
+          >
+            {title}
+          </HeaderTitle>
+          {publisher ? (
+            <View style={{ flexDirection: 'row', marginTop: 4 }}>
+              <InlineLink
+                label={publisher}
+                onPress={onPublisherPress}
+                color={paint.onBand}
+                variant="title-3-semibold"
+                ring={paint.ring}
+                testID={testID ? `${testID}-publisher` : undefined}
+              />
+            </View>
+          ) : null}
+        </>
+      )}
+    </MediaHeaderFrame>
+  );
+}
+
+export const PodcastShowHeader = memo(PodcastShowHeaderComponent);
+PodcastShowHeader.displayName = 'PodcastShowHeader';

package/src/media-header/PopularTracks.tsx

@@ -0,0 +1,207 @@
+import React, { memo, useState } from 'react';
+import { Image, Pressable, View } from 'react-native';
+
+import { useInteractionState } from '../hooks/use-interaction-state';
+import { RiMusic2Line } from '../icons/remix/RiMusic2Line';
+import { ExplicitBadge } from '../media-controls/ExplicitBadge';
+import { NowPlayingIndicator } from '../media-controls/NowPlayingIndicator';
+import type { WebCssStyle } from '../styles/web-view-style';
+import { Text } from '../typography';
+import { useImageUri, useMediaHeaderPaint } from './parts';
+import { webData, type MediaHeaderPaint } from './shared';
+import type { PopularTrack, PopularTracksProps } from './types';
+
+/**
+ * An artist's most played tracks: five rows, "See more" shows ten.
+ *
+ *   row        56 high, radius 6, hover wash
+ *   index      body-medium muted, 24 wide; the current track shows the
+ *              now-playing bars instead
+ *   image      40, radius 4
+ *   title      body-medium (accent when current) + explicit badge
+ *   plays      body-regular muted — hidden under 480 wide
+ *   duration   body-regular muted, tabular
+ *
+ * Each row is a button named by its title. The rows are internal to this part;
+ * a full track list belongs to its own family.
+ */
+
+function TrackRow({
+  track,
+  index,
+  active,
+  playing,
+  compact,
+  paint,
+  onPress,
+}: {
+  track: PopularTrack;
+  index: number;
+  active: boolean;
+  playing: boolean;
+  compact: boolean;
+  paint: MediaHeaderPaint;
+  onPress?: () => void;
+}) {
+  const { state: hovered, onIn, onOut } = useInteractionState();
+  const uri = useImageUri(track.image, 'thumb');
+  const row: WebCssStyle = {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 12,
+    height: 56,
+    paddingLeft: 12,
+    paddingRight: 12,
+    borderRadius: 6,
+    backgroundColor: hovered ? paint.wash : 'transparent',
+    '--bloom-media-header-ring': paint.ring,
+  };
+  return (
+    <Pressable
+      {...webData({ bloomMediaHeaderPress: 'inset' })}
+      role="button"
+      accessibilityLabel={track.title}
+      aria-current={active || undefined}
+      onPress={onPress}
+      onHoverIn={onIn}
+      onHoverOut={onOut}
+      style={row}
+    >
+      <View style={{ width: 24, alignItems: 'center' }}>
+        {active ? (
+          <NowPlayingIndicator playing={playing} size={14} />
+        ) : (
+          <Text variant="body-medium" style={{ color: paint.textMuted, fontVariant: ['tabular-nums'] }}>
+            {String(index + 1)}
+          </Text>
+        )}
+      </View>
+      <View
+        style={{
+          width: 40,
+          height: 40,
+          borderRadius: 4,
+          overflow: 'hidden',
+          backgroundColor: paint.placeholder,
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        {uri ? (
+          <Image source={{ uri }} style={{ width: 40, height: 40 }} />
+        ) : (
+          <RiMusic2Line width={18} height={18} fill={paint.placeholderGlyph} />
+        )}
+      </View>
+      <View style={{ flex: 1, minWidth: 0, flexDirection: 'row', alignItems: 'center', gap: 6 }}>
+        <Text
+          variant="body-medium"
+          numberOfLines={1}
+          style={{ flexShrink: 1, color: active ? paint.accent : paint.text }}
+        >
+          {track.title}
+        </Text>
+        {track.explicit ? <ExplicitBadge size="small" /> : null}
+      </View>
+      {track.plays && !compact ? (
+        <Text variant="body-regular" numberOfLines={1} style={{ width: 120, textAlign: 'right', color: paint.textMuted }}>
+          {track.plays}
+        </Text>
+      ) : null}
+      {track.duration ? (
+        <Text
+          variant="body-regular"
+          style={{ minWidth: 44, textAlign: 'right', color: paint.textMuted, fontVariant: ['tabular-nums'] }}
+        >
+          {track.duration}
+        </Text>
+      ) : null}
+    </Pressable>
+  );
+}
+
+function PopularTracksComponent({
+  tracks,
+  title = 'Popular',
+  collapsedCount = 5,
+  expandedCount = 10,
+  expanded: expandedProp,
+  onExpandedChange,
+  showMoreLabel = 'See more',
+  showLessLabel = 'Show less',
+  activeTrackId,
+  playing = false,
+  onTrackPress,
+  style,
+  testID,
+}: PopularTracksProps) {
+  const paint = useMediaHeaderPaint();
+  const [expandedState, setExpandedState] = useState(false);
+  const expanded = expandedProp ?? expandedState;
+  const [width, setWidth] = useState(720);
+  const { state: hovered, onIn, onOut } = useInteractionState();
+  const shown = tracks.slice(0, expanded ? expandedCount : collapsedCount);
+  const canExpand = tracks.length > collapsedCount;
+
+  const toggle = () => {
+    const next = !expanded;
+    if (expandedProp === undefined) setExpandedState(next);
+    onExpandedChange?.(next);
+  };
+
+  const toggleStyle: WebCssStyle = {
+    alignSelf: 'flex-start',
+    marginLeft: 12,
+    marginTop: 8,
+    borderRadius: 4,
+    '--bloom-media-header-ring': paint.ring,
+  };
+
+  return (
+    <View
+      style={[{ gap: 8 }, style]}
+      onLayout={(e) => setWidth(Math.round(e.nativeEvent.layout.width))}
+      testID={testID}
+    >
+      <Text variant="title-1-bold" role="heading" aria-level={2} style={{ color: paint.text }}>
+        {title}
+      </Text>
+      <View role="list">
+        {shown.map((track, i) => (
+          <View role="listitem" key={track.id} testID={testID ? `${testID}-row-${i}` : undefined}>
+            <TrackRow
+              track={track}
+              index={i}
+              active={track.id === activeTrackId}
+              playing={playing}
+              compact={width < 480}
+              paint={paint}
+              onPress={onTrackPress ? () => onTrackPress(track, i) : undefined}
+            />
+          </View>
+        ))}
+      </View>
+      {canExpand ? (
+        <Pressable
+          {...webData({ bloomMediaHeaderPress: '' })}
+          role="button"
+          accessibilityLabel={expanded ? showLessLabel : showMoreLabel}
+          aria-expanded={expanded}
+          accessibilityState={{ expanded }}
+          onPress={toggle}
+          onHoverIn={onIn}
+          onHoverOut={onOut}
+          style={toggleStyle}
+          testID={testID ? `${testID}-toggle` : undefined}
+        >
+          <Text variant="body-semibold" style={{ color: hovered ? paint.text : paint.textMuted }}>
+            {expanded ? showLessLabel : showMoreLabel}
+          </Text>
+        </Pressable>
+      ) : null}
+    </View>
+  );
+}
+
+export const PopularTracks = memo(PopularTracksComponent);
+PopularTracks.displayName = 'PopularTracks';

package/src/media-header/ProfileHeader.tsx

@@ -0,0 +1,109 @@
+import React, { memo } from 'react';
+import { View } from 'react-native';
+
+import { Button } from '../button';
+import { Text } from '../typography';
+import { FollowButton, MediaMoreButton } from './MediaActionBar';
+import { Cover, Dot, HeaderTitle, InlineLink, MediaHeaderFrame, useMediaHeaderPaint } from './parts';
+import { selectTitleVariant } from './shared';
+import type { ProfileHeaderProps } from './types';
+
+/**
+ * A listener's profile.
+ *
+ *   band     round avatar 232 (narrow 160 centred) · "Profile" · name (display
+ *            steps) · counts: "12 public playlists • 48 followers • 30 following",
+ *            each a link when it has `onPress`
+ *   row      Follow pill (another listener) or "Edit profile" (your own) · more
+ */
+
+function ProfileHeaderComponent({
+  name,
+  avatar,
+  typeLabel = 'Profile',
+  stats,
+  following = false,
+  onFollowChange,
+  onEditPress,
+  editLabel = 'Edit profile',
+  onMorePress,
+  artworkColor,
+  actions,
+  headingLevel = 1,
+  style,
+  testID,
+}: ProfileHeaderProps) {
+  const paint = useMediaHeaderPaint(artworkColor);
+  const hasRow = onFollowChange || onEditPress || onMorePress || actions;
+  const row = hasRow ? (
+    <View style={{ flexDirection: 'row', alignItems: 'center', gap: 12, flexWrap: 'wrap' }}>
+      {onFollowChange ? (
+        <FollowButton
+          following={following}
+          onFollowChange={onFollowChange}
+          size="medium"
+          testID={testID ? `${testID}-follow` : undefined}
+        />
+      ) : null}
+      {onEditPress ? (
+        <Button variant="secondary" size="medium" onPress={onEditPress} testID={testID ? `${testID}-edit` : undefined}>
+          {editLabel}
+        </Button>
+      ) : null}
+      {onMorePress ? <MediaMoreButton onPress={onMorePress} testID={testID ? `${testID}-more` : undefined} /> : null}
+      {actions}
+    </View>
+  ) : undefined;
+
+  return (
+    <MediaHeaderFrame
+      paint={paint}
+      style={style}
+      testID={testID}
+      actions={row}
+      coverWidth={(wide) => (wide ? 232 : 160)}
+      cover={({ wide }) => (
+        <Cover source={avatar} size={wide ? 232 : 160} shape="round" paint={paint} testID={testID ? `${testID}-avatar` : undefined} />
+      )}
+    >
+      {({ textWidth }) => (
+        <>
+          <Text variant="body-medium" style={{ color: paint.onBand }}>
+            {typeLabel}
+          </Text>
+          <HeaderTitle
+            variant={selectTitleVariant(name, textWidth)}
+            color={paint.onBand}
+            level={headingLevel}
+            numberOfLines={2}
+            testID={testID ? `${testID}-name` : undefined}
+          >
+            {name}
+          </HeaderTitle>
+          {stats && stats.length > 0 ? (
+            <View
+              style={{ flexDirection: 'row', flexWrap: 'wrap', alignItems: 'center', columnGap: 4, marginTop: 4 }}
+              testID={testID ? `${testID}-stats` : undefined}
+            >
+              {stats.map((stat, i) => (
+                <React.Fragment key={`${stat.label}-${i}`}>
+                  {i > 0 ? <Dot color={paint.onBandMuted} /> : null}
+                  <InlineLink
+                    label={stat.label}
+                    onPress={stat.onPress}
+                    color={stat.onPress ? paint.onBand : paint.onBandMuted}
+                    variant="body-medium"
+                    ring={paint.ring}
+                  />
+                </React.Fragment>
+              ))}
+            </View>
+          ) : null}
+        </>
+      )}
+    </MediaHeaderFrame>
+  );
+}
+
+export const ProfileHeader = memo(ProfileHeaderComponent);
+ProfileHeader.displayName = 'ProfileHeader';

package/src/media-header/StickyMediaTopBar.tsx

@@ -0,0 +1,106 @@
+import React, { memo, useEffect } from 'react';
+import { View } from 'react-native';
+import Animated, {
+  Easing,
+  useAnimatedStyle,
+  useReducedMotion,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+
+import { PlayButton } from '../media-controls/PlayButton';
+import { Text } from '../typography';
+import { useMediaHeaderPaint } from './parts';
+import { clamp01 } from './shared';
+import type { StickyMediaTopBarProps } from './types';
+
+/** Built once, at module scope, so the fade, `style` and the a11y props share one node. */
+const FadeView = Animated.createAnimatedComponent(View);
+
+/**
+ * The compact bar that takes over when the header scrolls away.
+ *
+ *   height     64 (default)
+ *   fill       the band's top colour (the tinted artwork colour)
+ *   content    leading · PlayButton small accent · title (title-2-bold,
+ *              one line, the band's text colour) · trailing
+ *
+ * Two ways to drive it:
+ *   - `progress` 0..1 — the fill and content take that opacity directly. Feed
+ *     it from `useMediaHeaderScroll` (a `ScrollView`'s `onScroll`, or the
+ *     document scroll on web).
+ *   - `visible` — fades in and out over 200ms; instant under reduced motion.
+ *
+ * The bar does not position itself: put it in an absolutely positioned (or, on
+ * web, `position: sticky` / `fixed`) container over the page. While it is less
+ * than half shown it is hidden from assistive tech and takes no pointer
+ * events, so the header under it stays reachable.
+ */
+
+function StickyMediaTopBarComponent({
+  title,
+  playing,
+  onPlayPress,
+  artworkColor,
+  visible = false,
+  progress,
+  leading,
+  trailing,
+  height = 64,
+  style,
+  testID,
+}: StickyMediaTopBarProps) {
+  const paint = useMediaHeaderPaint(artworkColor);
+  const reducedMotion = useReducedMotion();
+  const driven = progress !== undefined;
+  const target = driven ? clamp01(progress) : visible ? 1 : 0;
+
+  const opacity = useSharedValue(target);
+  useEffect(() => {
+    opacity.value =
+      driven || reducedMotion
+        ? target
+        : withTiming(target, { duration: 200, easing: Easing.bezier(0.25, 0.1, 0.25, 1) });
+  }, [driven, reducedMotion, target, opacity]);
+  const fadeStyle = useAnimatedStyle(() => ({ opacity: opacity.value }), [opacity]);
+
+  const shown = target >= 0.5;
+
+  return (
+    <FadeView
+      pointerEvents={shown ? 'box-none' : 'none'}
+      aria-hidden={!shown}
+      importantForAccessibility={shown ? 'auto' : 'no-hide-descendants'}
+      style={[{ height, width: '100%' }, style, fadeStyle]}
+      testID={testID}
+    >
+      <View
+        style={{
+          flex: 1,
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap: 12,
+          paddingLeft: 16,
+          paddingRight: 16,
+          backgroundColor: paint.bar,
+        }}
+      >
+        {leading}
+        <PlayButton
+          playing={playing}
+          onPress={onPlayPress}
+          size="medium"
+          subject={title}
+          testID={testID ? `${testID}-play` : undefined}
+        />
+        <Text variant="title-2-bold" numberOfLines={1} style={{ flex: 1, color: paint.onBar }}>
+          {title}
+        </Text>
+        {trailing}
+      </View>
+    </FadeView>
+  );
+}
+
+export const StickyMediaTopBar = memo(StickyMediaTopBarComponent);
+StickyMediaTopBar.displayName = 'StickyMediaTopBar';

package/src/media-header/index.ts

@@ -0,0 +1,59 @@
+export { CollectionHeader } from './CollectionHeader';
+export {
+  DownloadButton,
+  FollowButton,
+  MediaActionBar,
+  MediaIconButton,
+  MediaMoreButton,
+  ShuffleButton,
+} from './MediaActionBar';
+export { StickyMediaTopBar } from './StickyMediaTopBar';
+export { mediaHeaderScrollProgress, useMediaHeaderScroll } from './use-media-header-scroll';
+export { ArtistHero } from './ArtistHero';
+export { PopularTracks } from './PopularTracks';
+export { DiscographyFilter, DEFAULT_DISCOGRAPHY_OPTIONS } from './DiscographyFilter';
+export { ArtistPick } from './ArtistPick';
+export { ArtistAbout } from './ArtistAbout';
+export { ArtistStats } from './ArtistStats';
+export { PodcastShowHeader } from './PodcastShowHeader';
+export { EpisodeHeader } from './EpisodeHeader';
+export { ProfileHeader } from './ProfileHeader';
+export { AudiobookHeader } from './AudiobookHeader';
+export {
+  resolveMediaHeaderPaint,
+  selectTitleVariant,
+  TITLE_STEPS,
+} from './shared';
+export type { MediaHeaderPaint } from './shared';
+export type {
+  ArtistAboutProps,
+  ArtistCity,
+  ArtistHeroProps,
+  ArtistPickProps,
+  ArtistStat,
+  ArtistStatsProps,
+  AudiobookHeaderProps,
+  CollectionHeaderProps,
+  CollectionHeaderVariant,
+  DiscographyFilterOption,
+  DiscographyFilterProps,
+  DownloadButtonProps,
+  DownloadState,
+  EpisodeHeaderProps,
+  FollowButtonProps,
+  LatestEpisode,
+  MediaActionBarProps,
+  MediaHeaderPerson,
+  MediaHeaderScrollOptions,
+  MediaIconButtonProps,
+  MediaImageSource,
+  MediaMoreButtonProps,
+  MediaViewMode,
+  PodcastShowHeaderProps,
+  PopularTrack,
+  PopularTracksProps,
+  ProfileHeaderProps,
+  ProfileStat,
+  ShuffleButtonProps,
+  StickyMediaTopBarProps,
+} from './types';