@oxy.so/bloom 2.8.0 → 2.10.0

package/src/media-card/PlaylistCard.tsx

@@ -0,0 +1,104 @@
+import React, { memo, useMemo } from 'react';
+import { View } from 'react-native';
+
+import { RiMusic2Fill } from '../icons/remix/RiMusic2Fill';
+import { RiTeamLine } from '../icons/remix/RiTeamLine';
+import { useTheme } from '../theme/use-theme';
+import { Text } from '../typography';
+import { MediaCard, SUBTITLE_VARIANT } from './MediaCard';
+import { Mosaic } from './parts';
+import { joinMeta, resolveMediaCardPaint } from './shared';
+import type { PlaylistCardProps } from './types';
+
+/**
+ * Which cover a playlist draws: its own `artwork`, else a 2×2 `mosaic` of up
+ * to four track covers, else a gradient generated from `artworkColor` (neutral
+ * without one) with a music note.
+ */
+export function playlistCoverKind(
+  artwork: string | undefined,
+  mosaic: ReadonlyArray<string> | undefined,
+): 'artwork' | 'mosaic' | 'generated' {
+  if (artwork) return 'artwork';
+  if (mosaic && mosaic.filter(Boolean).length > 0) return 'mosaic';
+  return 'generated';
+}
+
+/**
+ * A playlist: square cover (artwork → mosaic → generated), the title, and
+ * "By Maya · 42 songs" — with a shared-playlist glyph first when
+ * `collaborative`.
+ *
+ * Name: "Late Hours, Playlist, Collaborative, By Maya · 42 songs".
+ */
+function PlaylistCardComponent({
+  title,
+  owner,
+  ownerPrefix = 'By',
+  trackCount,
+  mosaic,
+  collaborative = false,
+  collaborativeLabel = 'Collaborative',
+  typeLabel = 'Playlist',
+  artwork,
+  artworkColor,
+  layout = 'tile',
+  size = 'medium',
+  testID,
+  ...rest
+}: PlaylistCardProps) {
+  const theme = useTheme();
+  const paint = useMemo(() => resolveMediaCardPaint(theme), [theme]);
+  const row = layout === 'row';
+  const line = joinMeta([row ? typeLabel : undefined, owner ? `${ownerPrefix} ${owner}` : undefined, trackCount]);
+  const kind = playlistCoverKind(artwork, mosaic);
+  const variant = row ? 'body-2-regular' : SUBTITLE_VARIANT[size];
+
+  const subtitle = collaborative ? (
+    <View style={{ flexDirection: 'row', alignItems: 'center', gap: 4 }}>
+      <View aria-hidden style={{ flexShrink: 0 }}>
+        <RiTeamLine width={14} height={14} fill={paint.textSecondary} />
+      </View>
+      <Text variant={variant} numberOfLines={1} style={{ flexShrink: 1, color: paint.textSecondary }}>
+        {line || collaborativeLabel}
+      </Text>
+    </View>
+  ) : (
+    line
+  );
+
+  return (
+    <MediaCard
+      {...rest}
+      title={title}
+      layout={layout}
+      size={size}
+      testID={testID}
+      artwork={artwork}
+      artworkColor={artworkColor}
+      typeLabel={typeLabel}
+      subtitle={subtitle}
+      placeholderIcon={RiMusic2Fill}
+      accessibilityLabel={
+        rest.accessibilityLabel ??
+        [title, typeLabel, collaborative ? collaborativeLabel : null, line || null].filter(Boolean).join(', ')
+      }
+      renderArtwork={
+        kind === 'mosaic'
+          ? (box) => (
+              <Mosaic
+                sources={(mosaic ?? []).filter(Boolean)}
+                width={box.width}
+                height={box.height}
+                paint={paint}
+                testID={testID ? `${testID}-mosaic` : undefined}
+              />
+            )
+          : undefined
+      }
+    />
+  );
+}
+
+export const PlaylistCard = memo(PlaylistCardComponent);
+PlaylistCard.displayName = 'PlaylistCard';

package/src/media-card/PodcastCard.tsx

@@ -0,0 +1,32 @@
+import React, { memo } from 'react';
+
+import { RiMic2Fill } from '../icons/remix/RiMic2Fill';
+import { MediaCard } from './MediaCard';
+import { joinMeta, PODCAST_RADIUS } from './shared';
+import type { PodcastCardProps } from './types';
+
+/**
+ * A show: a rounded-square cover — radius 12 (8 in a row), rounder than an
+ * album's so a shelf of shows reads apart from a shelf of albums — the title
+ * and the publisher.
+ *
+ * Name: "Slow Signals, Podcast, Harbor Audio".
+ */
+function PodcastCardComponent({ title, publisher, typeLabel = 'Podcast', layout = 'tile', ...rest }: PodcastCardProps) {
+  const row = layout === 'row';
+  return (
+    <MediaCard
+      {...rest}
+      layout={layout}
+      title={title}
+      typeLabel={typeLabel}
+      subtitle={row ? joinMeta([typeLabel, publisher]) : publisher}
+      accessibilityLabel={rest.accessibilityLabel ?? [title, typeLabel, publisher].filter(Boolean).join(', ')}
+      artworkRadius={row ? 8 : PODCAST_RADIUS}
+      placeholderIcon={RiMic2Fill}
+    />
+  );
+}
+
+export const PodcastCard = memo(PodcastCardComponent);
+PodcastCard.displayName = 'PodcastCard';

package/src/media-card/ProfileCard.tsx

@@ -0,0 +1,48 @@
+import React, { memo } from 'react';
+import { View } from 'react-native';
+
+import { RiUser3Fill } from '../icons/remix/RiUser3Fill';
+import { MediaCard } from './MediaCard';
+import { joinMeta } from './shared';
+import type { ProfileCardProps } from './types';
+
+/**
+ * A listener's profile (a follower, a friend): a round avatar, the name,
+ * "Profile · Follows you", an optional follower count, and `action` (the
+ * follow button) — under the text in a tile, trailing in a row.
+ *
+ * Name: "Maya Ortiz, Profile, Follows you, 214 followers".
+ */
+function ProfileCardComponent({
+  name,
+  followsYou = false,
+  typeLabel = 'Profile',
+  followsYouLabel = 'Follows you',
+  followers,
+  action,
+  layout = 'tile',
+  ...rest
+}: ProfileCardProps) {
+  const row = layout === 'row';
+  const line = joinMeta([typeLabel, followsYou ? followsYouLabel : undefined]);
+  return (
+    <MediaCard
+      {...rest}
+      layout={layout}
+      title={name}
+      artworkShape="round"
+      placeholderIcon={RiUser3Fill}
+      subtitle={line}
+      meta={followers ? [followers] : undefined}
+      accessibilityLabel={
+        rest.accessibilityLabel ??
+        [name, typeLabel, followsYou ? followsYouLabel : null, followers].filter(Boolean).join(', ')
+      }
+      trailing={row ? action : undefined}
+      footer={!row && action ? <View style={{ alignItems: 'flex-start' }} pointerEvents="box-none">{action}</View> : undefined}
+    />
+  );
+}
+
+export const ProfileCard = memo(ProfileCardComponent);
+ProfileCard.displayName = 'ProfileCard';

package/src/media-card/QuickAccessTile.tsx

@@ -0,0 +1,139 @@
+import React, { memo, useMemo } from 'react';
+import { View } from 'react-native';
+
+import { RiMusic2Fill } from '../icons/remix/RiMusic2Fill';
+import { NowPlayingIndicator, PlayButton } from '../media-controls';
+import { Box as SkeletonBox } from '../skeleton';
+import type { WebCssStyle } from '../styles/web-view-style';
+import { useTheme } from '../theme/use-theme';
+import { Text } from '../typography';
+import { Artwork, CardLink, useMediaCardCss } from './parts';
+import {
+  composeName,
+  IS_WEB,
+  QUICK_TILE_HEIGHT,
+  QUICK_TILE_RADIUS,
+  resolveMediaCardPaint,
+  resolvePlayVisibility,
+  webData,
+} from './shared';
+import type { QuickAccessTileProps } from './types';
+
+/**
+ * The compact home-screen shortcut, laid out 2–4 to a row.
+ *
+ *   56 tall, radius 6, clipped; the cover flush left (56 square — or a 40
+ *   round photo inset 8 for an artist), 12 to the title (body-semibold, up to
+ *   2 lines), then one 32 slot at the trailing edge: the accent play button,
+ *   revealed on hover (web). While `current` the slot shows the now-playing
+ *   bars instead, swapped for the pause button under the pointer or focus on
+ *   web; native shows the button (or the bars without `onPlay`).
+ *
+ *   rest    text over background at 7% (dark 10%)
+ *   hover   at 12% (dark 16%) — colour only
+ *
+ * It stretches to its column: give it a width through `style` or its parent.
+ *
+ * Name: "Late Hours, Playlist".
+ */
+function QuickAccessTileComponent({
+  title,
+  artwork,
+  artworkVariant,
+  artworkColor,
+  round = false,
+  typeLabel,
+  onPress,
+  href,
+  onPlay,
+  playing = false,
+  loading = false,
+  current = false,
+  selected = false,
+  skeleton = false,
+  accessibilityLabel,
+  style,
+  testID,
+}: QuickAccessTileProps) {
+  const theme = useTheme();
+  useMediaCardCss();
+  const paint = useMemo(() => resolveMediaCardPaint(theme), [theme]);
+
+  if (skeleton) {
+    return (
+      <View aria-busy accessibilityLabel="Loading" style={style} testID={testID}>
+        <SkeletonBox width="100%" height={QUICK_TILE_HEIGHT} borderRadius={QUICK_TILE_RADIUS} />
+      </View>
+    );
+  }
+
+  const visibility = resolvePlayVisibility({ hasOnPlay: Boolean(onPlay), playing, loading, current });
+  // On web the current tile shows the bars at rest and swaps them for the
+  // pause button under the pointer or keyboard focus — one slot, never both.
+  const swap = IS_WEB && current && visibility !== 'none' && !loading;
+  const name = accessibilityLabel ?? composeName([title, typeLabel, current && playing ? 'Now playing' : undefined]);
+
+  const rootStyle: WebCssStyle = {
+    position: 'relative',
+    flexDirection: 'row',
+    alignItems: 'center',
+    height: QUICK_TILE_HEIGHT,
+    borderRadius: QUICK_TILE_RADIUS,
+    overflow: 'hidden',
+    backgroundColor: selected ? paint.selected : paint.tile,
+    '--bloom-media-card-hover': paint.tileHover,
+  };
+
+  return (
+    <View
+      {...webData({ bloomMediaCard: 'quick', ...(onPress || href ? { bloomMediaCardHover: '' } : null) })}
+      style={[rootStyle, style]}
+      testID={testID}
+    >
+      <CardLink name={name} onPress={onPress} href={href} selected={selected} radius={QUICK_TILE_RADIUS} paint={paint} testID={testID} />
+      <View pointerEvents="none" style={{ paddingLeft: round ? 8 : 0 }}>
+        <Artwork
+          source={artwork}
+          variant={artworkVariant}
+          color={artworkColor}
+          width={round ? 40 : QUICK_TILE_HEIGHT}
+          height={round ? 40 : QUICK_TILE_HEIGHT}
+          round={round}
+          radius={0}
+          icon={RiMusic2Fill}
+          paint={paint}
+          testID={testID ? `${testID}-artwork` : undefined}
+        />
+      </View>
+      <View pointerEvents="none" style={{ flex: 1, minWidth: 0, marginLeft: 12, marginRight: 8 }}>
+        <Text variant="body-semibold" numberOfLines={2} style={{ color: current ? paint.accent : paint.text }}>
+          {title}
+        </Text>
+      </View>
+      {current || visibility !== 'none' ? (
+        <View
+          style={{ width: 32, height: 32, marginRight: 12, alignItems: 'center', justifyContent: 'center' }}
+          pointerEvents="box-none"
+        >
+          {current && (swap || visibility === 'none') ? (
+            <View pointerEvents="none" {...webData(swap ? { bloomMediaCardConceal: '' } : {})}>
+              <NowPlayingIndicator playing={playing} size={14} testID={testID ? `${testID}-now-playing` : undefined} />
+            </View>
+          ) : null}
+          {visibility !== 'none' ? (
+            <View
+              {...webData(swap || visibility === 'hover' ? { bloomMediaCardReveal: 'hover' } : {})}
+              style={{ position: 'absolute', top: 0, left: 0 }}
+              testID={testID ? `${testID}-play` : undefined}
+            >
+              <PlayButton playing={playing} loading={loading} onPress={onPlay} subject={title} size="small" />
+            </View>
+          ) : null}
+        </View>
+      ) : null}
+    </View>
+  );
+}
+
+export const QuickAccessTile = memo(QuickAccessTileComponent);
+QuickAccessTile.displayName = 'QuickAccessTile';

package/src/media-card/RecapCard.tsx

@@ -0,0 +1,138 @@
+import React, { memo, useMemo, useState } from 'react';
+import { Pressable, View } from 'react-native';
+
+import { mixColor } from '../button/shared';
+import { RiShareForwardLine } from '../icons/remix/RiShareForwardLine';
+import { Box as SkeletonBox } from '../skeleton';
+import { borderRadius } from '../styles/tokens';
+import type { WebCssStyle } from '../styles/web-view-style';
+import { useTheme } from '../theme/use-theme';
+import { Text } from '../typography';
+import { Artwork, CoverGradient, useMediaCardCss } from './parts';
+import { IS_WEB, RECAP_RADIUS, resolveCoverTint, resolveMediaCardPaint, webData, type CoverTint } from './shared';
+import type { RecapCardProps } from './types';
+
+/**
+ * The share pill over a generated cover. Not `Button`: its fill is the cover's
+ * light text colour and its label the cover's own colour, in BOTH modes — a
+ * theme-painted button would be dark-on-dark on a dark cover in dark mode.
+ */
+function SharePill({ label, onPress, tint, testID }: { label: string; onPress: () => void; tint: CoverTint; testID?: string }) {
+  const [hovered, setHovered] = useState(false);
+  const style: WebCssStyle = {
+    flexDirection: 'row',
+    alignItems: 'center',
+    alignSelf: 'flex-start',
+    gap: 6,
+    height: 36,
+    paddingLeft: 14,
+    paddingRight: 16,
+    borderRadius: borderRadius.full,
+    backgroundColor: hovered ? mixColor(tint.text, tint.top, 0.12) : tint.text,
+    ...(IS_WEB ? { transitionProperty: 'background-color', transitionDuration: '150ms' } : null),
+  };
+  return (
+    <Pressable
+      {...webData({ bloomMediaCardShare: '' })}
+      role="button"
+      accessibilityLabel={label}
+      onPress={onPress}
+      onHoverIn={() => setHovered(true)}
+      onHoverOut={() => setHovered(false)}
+      style={style}
+      testID={testID}
+    >
+      <View aria-hidden pointerEvents="none">
+        <RiShareForwardLine width={16} height={16} fill={tint.bottom} />
+      </View>
+      <Text variant="body-semibold" style={{ color: tint.bottom }}>
+        {label}
+      </Text>
+    </Pressable>
+  );
+}
+
+/**
+ * A yearly or monthly listening summary.
+ *
+ *   radius 20, padding 24, a diagonal gradient generated from `artworkColor`
+ *   (stepped dark enough for light text; neutral without it)
+ *   the eyebrow (headline-medium, muted), the number (display-2-bold), the
+ *   unit (title-3-medium); then each highlight — a 56 cover (round for an
+ *   artist) with its label (caption) and title (headline-semibold); then Share
+ *
+ * It stretches to its parent; `style` sets a width.
+ */
+function RecapCardComponent({
+  eyebrow,
+  value,
+  unit,
+  artworkColor,
+  highlights,
+  onShare,
+  shareLabel = 'Share',
+  skeleton = false,
+  style,
+  testID,
+}: RecapCardProps) {
+  const theme = useTheme();
+  useMediaCardCss();
+  const paint = useMemo(() => resolveMediaCardPaint(theme), [theme]);
+  const tint = useMemo(() => resolveCoverTint(theme, artworkColor), [theme, artworkColor]);
+
+  if (skeleton) {
+    return (
+      <View aria-busy accessibilityLabel="Loading" style={style} testID={testID}>
+        <SkeletonBox width="100%" height={360} borderRadius={RECAP_RADIUS} />
+      </View>
+    );
+  }
+
+  return (
+    <View
+      {...webData({ bloomMediaCard: 'recap' })}
+      style={[{ position: 'relative', borderRadius: RECAP_RADIUS, overflow: 'hidden', backgroundColor: tint.top }, style]}
+      testID={testID}
+    >
+      <CoverGradient top={tint.top} bottom={tint.bottom} />
+      <View style={{ paddingLeft: 24, paddingRight: 24, paddingTop: 24, paddingBottom: 24, gap: 20 }}>
+        <View style={{ gap: 4 }}>
+          {eyebrow ? (
+            <Text variant="headline-medium" style={{ color: tint.textMuted }}>
+              {eyebrow}
+            </Text>
+          ) : null}
+          <Text variant="display-2-bold" numberOfLines={1} adjustsFontSizeToFit style={{ color: tint.text }} testID={testID ? `${testID}-value` : undefined}>
+            {value}
+          </Text>
+          {unit ? (
+            <Text variant="title-3-medium" style={{ color: tint.text }}>
+              {unit}
+            </Text>
+          ) : null}
+        </View>
+        {highlights && highlights.length > 0 ? (
+          <View style={{ gap: 12 }}>
+            {highlights.map((item, index) => (
+              <View key={`${index}-${item.title}`} style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>
+                <Artwork source={item.artwork} width={56} height={56} round={item.round} radius={6} paint={paint} />
+                <View style={{ flex: 1, minWidth: 0 }}>
+                  <Text variant="caption-1-medium" numberOfLines={1} style={{ color: tint.textMuted }}>
+                    {item.label}
+                  </Text>
+                  <Text variant="headline-semibold" numberOfLines={1} style={{ color: tint.text }}>
+                    {item.title}
+                  </Text>
+                </View>
+              </View>
+            ))}
+          </View>
+        ) : null}
+        {onShare ? <SharePill label={shareLabel} onPress={onShare} tint={tint} testID={testID ? `${testID}-share` : undefined} /> : null}
+      </View>
+    </View>
+  );
+}
+
+export const RecapCard = memo(RecapCardComponent);
+RecapCard.displayName = 'RecapCard';

package/src/media-card/ShareCard.tsx

@@ -0,0 +1,96 @@
+import React, { memo, useMemo } from 'react';
+import { View } from 'react-native';
+
+import { ExplicitBadge } from '../media-controls';
+import { RiMusic2Fill } from '../icons/remix/RiMusic2Fill';
+import { useTheme } from '../theme/use-theme';
+import { Text } from '../typography';
+import { Artwork, CoverGradient } from './parts';
+import { RECAP_RADIUS, resolveCoverTint, resolveMediaCardPaint, webData } from './shared';
+import type { ShareCardProps } from './types';
+
+/**
+ * A track laid out to be shared as an image.
+ *
+ *   radius 20, padding 24, the gradient generated from `artworkColor` (stepped
+ *   dark enough for light text; neutral without it)
+ *   the cover (full width, square, radius 12); the title (title-2-bold) with
+ *   the explicit badge; the artist (headline-medium, muted); an optional lyrics
+ *   excerpt in a block of the gradient's darker stop (radius 12, padding 16,
+ *   title-3-bold lines); then `footer`
+ *
+ * Default width 320; `style` sets another. Static — nothing in it presses.
+ */
+function ShareCardComponent({
+  title,
+  artist,
+  lyrics,
+  footer,
+  explicit = false,
+  artwork,
+  artworkVariant,
+  artworkColor,
+  style,
+  testID,
+}: ShareCardProps) {
+  const theme = useTheme();
+  const paint = useMemo(() => resolveMediaCardPaint(theme), [theme]);
+  const tint = useMemo(() => resolveCoverTint(theme, artworkColor), [theme, artworkColor]);
+  const [coverWidth, setCoverWidth] = React.useState(0);
+
+  return (
+    <View
+      {...webData({ bloomMediaCard: 'share' })}
+      style={[{ width: 320, borderRadius: RECAP_RADIUS, overflow: 'hidden', backgroundColor: tint.top }, style]}
+      testID={testID}
+    >
+      <CoverGradient top={tint.top} bottom={tint.bottom} />
+      <View style={{ paddingLeft: 24, paddingRight: 24, paddingTop: 24, paddingBottom: 24, gap: 16 }}>
+        <View
+          style={{ width: '100%', aspectRatio: 1 }}
+          onLayout={(event) => setCoverWidth(event.nativeEvent.layout.width)}
+        >
+          {coverWidth > 0 ? (
+            <Artwork
+              source={artwork}
+              variant={artworkVariant}
+              width={coverWidth}
+              height={coverWidth}
+              radius={12}
+              icon={RiMusic2Fill}
+              paint={paint}
+              testID={testID ? `${testID}-artwork` : undefined}
+            />
+          ) : null}
+        </View>
+        <View style={{ gap: 2 }}>
+          <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+            <Text variant="title-2-bold" numberOfLines={2} style={{ flexShrink: 1, color: tint.text }}>
+              {title}
+            </Text>
+            {explicit ? <ExplicitBadge /> : null}
+          </View>
+          <Text variant="headline-medium" numberOfLines={1} style={{ color: tint.textMuted }}>
+            {artist}
+          </Text>
+        </View>
+        {lyrics && lyrics.length > 0 ? (
+          <View
+            style={{ borderRadius: 12, paddingLeft: 16, paddingRight: 16, paddingTop: 16, paddingBottom: 16, backgroundColor: tint.bottom, gap: 4 }}
+            testID={testID ? `${testID}-lyrics` : undefined}
+          >
+            {lyrics.map((line, index) => (
+              <Text key={`${index}-${line}`} variant="title-3-bold" style={{ color: tint.text }}>
+                {line}
+              </Text>
+            ))}
+          </View>
+        ) : null}
+        {footer}
+      </View>
+    </View>
+  );
+}
+
+export const ShareCard = memo(ShareCardComponent);
+ShareCard.displayName = 'ShareCard';

package/src/media-card/SongCard.tsx

@@ -0,0 +1,119 @@
+import React, { memo, useMemo } from 'react';
+import { View } from 'react-native';
+
+import { ExplicitBadge, LikeButton, NowPlayingIndicator } from '../media-controls';
+import { RiMusic2Fill } from '../icons/remix/RiMusic2Fill';
+import { useTheme } from '../theme/use-theme';
+import { Text } from '../typography';
+import { MediaCard, SUBTITLE_VARIANT } from './MediaCard';
+import { IS_WEB, resolveMediaCardPaint, webData } from './shared';
+import type { SongCardArtist, SongCardProps } from './types';
+
+export function normaliseArtists(
+  artists: SongCardProps['artists'],
+): SongCardArtist[] {
+  return (artists ?? []).map((artist) => (typeof artist === 'string' ? { name: artist } : artist));
+}
+
+/**
+ * A track.
+ *
+ *   tile   square cover; the title with the `ExplicitBadge` after it; the
+ *          artists line
+ *   row    + the album line, then `LikeButton` and the duration before
+ *          "More options"
+ *
+ * `current` draws `NowPlayingIndicator` before the title (moving while
+ * `playing`) and paints the title in the accent. With `onPressArtist` each
+ * artist is its own link, drawn over the card's link rather than inside it.
+ *
+ * Name: "Night Drive, Explicit, Song, Mara Vell, Juno Park".
+ */
+function SongCardComponent({
+  title,
+  artists,
+  onPressArtist,
+  album,
+  explicit = false,
+  duration,
+  liked = false,
+  onLikedChange,
+  typeLabel = 'Song',
+  current = false,
+  playing = false,
+  layout = 'tile',
+  size = 'medium',
+  testID,
+  ...rest
+}: SongCardProps) {
+  const theme = useTheme();
+  const paint = useMemo(() => resolveMediaCardPaint(theme), [theme]);
+  const list = normaliseArtists(artists);
+  const names = list.map((artist) => artist.name).join(', ');
+  const row = layout === 'row';
+  const variant = row ? 'body-2-regular' : SUBTITLE_VARIANT[size];
+
+  const subtitle =
+    list.length === 0 ? undefined : onPressArtist ? (
+      <Text variant={variant} numberOfLines={1} style={{ color: paint.textSecondary }}>
+        {list.map((artist, index) => (
+          <React.Fragment key={`${index}-${artist.name}`}>
+            {index > 0 ? ', ' : null}
+            <Text
+              {...webData({ bloomMediaCardArtist: '' })}
+              role="link"
+              accessibilityLabel={artist.name}
+              variant={variant}
+              onPress={() => onPressArtist(artist, index)}
+              style={{ color: paint.textSecondary }}
+              testID={testID ? `${testID}-artist-${index}` : undefined}
+            >
+              {artist.name}
+            </Text>
+          </React.Fragment>
+        ))}
+      </Text>
+    ) : (
+      names
+    );
+
+  const trailing = row ? (
+    <>
+      {onLikedChange ? (
+        <View {...webData(liked ? {} : { bloomMediaCardReveal: IS_WEB ? 'hover' : '' })}>
+          <LikeButton liked={liked} onLikedChange={onLikedChange} size="small" accessibilityLabel={`Save ${title} to Your Library`} />
+        </View>
+      ) : null}
+      {duration ? (
+        <Text variant="body-2-regular" style={{ color: paint.textSecondary, minWidth: 36, textAlign: 'right', fontVariant: ['tabular-nums'] }}>
+          {duration}
+        </Text>
+      ) : null}
+    </>
+  ) : undefined;
+
+  return (
+    <MediaCard
+      {...rest}
+      title={title}
+      typeLabel={typeLabel}
+      subtitle={subtitle}
+      interactiveSubtitle={Boolean(onPressArtist)}
+      meta={row && album ? [album] : undefined}
+      placeholderIcon={RiMusic2Fill}
+      titleLeading={current ? <NowPlayingIndicator playing={playing} size={14} /> : undefined}
+      titleAccessory={explicit ? <ExplicitBadge size="small" /> : undefined}
+      titleAccessoryLabel={explicit ? 'Explicit' : undefined}
+      accessibilityDetail={onPressArtist ? names : undefined}
+      trailing={trailing}
+      current={current}
+      playing={playing}
+      layout={layout}
+      size={size}
+      testID={testID}
+    />
+  );
+}
+
+export const SongCard = memo(SongCardComponent);
+SongCard.displayName = 'SongCard';