@oxy.so/bloom 2.8.0 → 2.10.0

package/src/media-player/PlayerIconButton.tsx

@@ -0,0 +1,145 @@
+import React, { forwardRef, useEffect, useMemo, useState } from 'react';
+import { Pressable, View, type GestureResponderEvent, type StyleProp, type ViewStyle } from 'react-native';
+
+import { webDataSet } from '../checkbox/shared';
+import {
+  MEDIA_CONTROLS_CSS,
+  MEDIA_CONTROLS_STYLE_ID,
+  resolveMediaControlsPaint,
+} from '../media-controls/shared';
+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 { Text } from '../typography';
+
+/** A glyph component (any `Ri*` icon). */
+export type PlayerGlyph = React.ComponentType<{ width?: number; height?: number; fill?: string }>;
+
+/** The dot under an active glyph. */
+export const ACTIVE_DOT = 4;
+
+export interface PlayerIconButtonProps {
+  icon?: PlayerGlyph;
+  /** Draws text instead of a glyph ("1.5×"). */
+  text?: string;
+  glyph: number;
+  box: number;
+  accessibilityLabel?: string;
+  onPress?: (event: GestureResponderEvent) => void;
+  /**
+   * A TOGGLE: carries `aria-pressed` (web) and `accessibilityState.selected`
+   * (native), and paints accent + dot when true. Leave undefined for a plain
+   * button.
+   */
+  pressed?: boolean;
+  /** Accent + dot without toggle semantics (a menu trigger whose menu has a value set). */
+  active?: boolean;
+  disabled?: boolean;
+  'aria-expanded'?: boolean;
+  'aria-haspopup'?: boolean | 'menu' | 'dialog' | 'listbox' | 'tree' | 'grid' | 'true' | 'false';
+  /** Foreground at rest. Default the family's muted neutral. */
+  restColor?: string;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+/**
+ * The glyph-only button every player control uses: shuffle, repeat, previous,
+ * next, lyrics, queue, devices, fullscreen, the speed and sleep triggers.
+ *
+ *   rest     muted neutral glyph (`restColor` for previous / next: the text colour)
+ *   hover    text colour on a neutral-100 (dark neutral-800) round wash
+ *   active   accent glyph + a 4px accent dot under it
+ *   disabled 50% opacity
+ *
+ * Colour change only. Forwards the trigger props `asChild` hands it
+ * (`aria-expanded`, `aria-haspopup`, `onPress`, the name).
+ */
+export const PlayerIconButton = forwardRef<View, PlayerIconButtonProps>(function PlayerIconButton(
+  {
+    icon: Icon,
+    text,
+    glyph,
+    box,
+    accessibilityLabel,
+    onPress,
+    pressed,
+    active,
+    disabled = false,
+    restColor,
+    style,
+    testID,
+    ...aria
+  },
+  ref,
+) {
+  const theme = useTheme();
+  useEffect(() => {
+    adoptStyleSheet(MEDIA_CONTROLS_STYLE_ID, MEDIA_CONTROLS_CSS);
+  }, []);
+  const paint = useMemo(() => resolveMediaControlsPaint(theme), [theme]);
+  const [hovered, setHovered] = useState(false);
+  const lit = pressed === true || active === true;
+  const hover = hovered && !disabled;
+  const color = lit ? (hover ? paint.accentHover : paint.accent) : hover ? paint.text : (restColor ?? paint.textMuted);
+
+  const rootStyle: WebCssStyle = {
+    minWidth: box,
+    height: box,
+    paddingLeft: text ? 6 : 0,
+    paddingRight: text ? 6 : 0,
+    borderRadius: borderRadius.full,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: hover ? paint.wash : undefined,
+    opacity: disabled ? 0.5 : 1,
+    '--bloom-media-ring': paint.ring,
+  };
+
+  const toggle = pressed !== undefined;
+
+  return (
+    <Pressable
+      ref={ref}
+      {...webDataSet({ bloomMediaFocusable: '', bloomPlayerButton: lit ? 'active' : '' })}
+      role="button"
+      accessibilityLabel={accessibilityLabel}
+      aria-pressed={toggle ? pressed : undefined}
+      accessibilityState={toggle ? { selected: pressed, disabled } : { disabled }}
+      aria-disabled={disabled || undefined}
+      aria-expanded={aria['aria-expanded']}
+      aria-haspopup={aria['aria-haspopup']}
+      disabled={disabled}
+      onHoverIn={() => setHovered(true)}
+      onHoverOut={() => setHovered(false)}
+      onPress={onPress}
+      style={[rootStyle, style]}
+      testID={testID}
+    >
+      <View pointerEvents="none" style={{ alignItems: 'center', justifyContent: 'center' }}>
+        {Icon ? (
+          <Icon width={glyph} height={glyph} fill={color} />
+        ) : (
+          <Text variant={glyph >= 20 ? 'body-semibold' : 'caption-1-semibold'} style={{ color }}>
+            {text ?? ''}
+          </Text>
+        )}
+      </View>
+      {lit ? (
+        <View
+          pointerEvents="none"
+          testID={testID ? `${testID}-dot` : undefined}
+          style={{
+            position: 'absolute',
+            bottom: box >= 40 ? 2 : 0,
+            width: ACTIVE_DOT,
+            height: ACTIVE_DOT,
+            borderRadius: ACTIVE_DOT / 2,
+            backgroundColor: paint.accent,
+          }}
+        />
+      ) : null}
+    </Pressable>
+  );
+});

package/src/media-player/SleepTimerMenu.tsx

@@ -0,0 +1,110 @@
+import React, { memo } from 'react';
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '../dropdown-menu';
+import { RiCheckLine } from '../icons/remix/RiCheckLine';
+import { RiTimerLine } from '../icons/remix/RiTimerLine';
+import { useTheme } from '../theme/use-theme';
+import { PlayerIconButton } from './PlayerIconButton';
+import { parseSleepTimerKey, SLEEP_TIMER_MINUTES, sleepTimerKey, TRANSPORT_GEOMETRY } from './shared';
+import type { SleepTimerMenuProps } from './types';
+
+const defaultMinutes = (m: number) => (m === 60 ? '1 hour' : `${m} minutes`);
+const defaultRemaining = (r: string) => `Stops in ${r}`;
+
+/** The heading, the time left and the radio rows. */
+export function SleepTimerRows({
+  value,
+  onValueChange,
+  minutes = SLEEP_TIMER_MINUTES,
+  remaining,
+  label = 'Sleep timer',
+  offLabel = 'Off',
+  endLabel = 'End of episode',
+  formatMinutes = defaultMinutes,
+  formatRemaining = defaultRemaining,
+  testID,
+}: Omit<SleepTimerMenuProps, 'children' | 'open' | 'onOpenChange' | 'size' | 'disabled'>) {
+  const theme = useTheme();
+  const check = <RiCheckLine width={16} height={16} fill={theme.colors.text} />;
+  const row = (key: string, text: string) => (
+    <DropdownMenuRadioItem
+      key={key}
+      value={key}
+      indicator={check}
+      indicatorPosition="trailing"
+      testID={testID ? `${testID}-${key}` : undefined}
+    >
+      {text}
+    </DropdownMenuRadioItem>
+  );
+  const active = value !== 'off';
+  return (
+    <>
+      <DropdownMenuLabel>
+        {active && remaining ? `${label} · ${formatRemaining(remaining)}` : label}
+      </DropdownMenuLabel>
+      <DropdownMenuRadioGroup
+        value={sleepTimerKey(value)}
+        onValueChange={(key) => onValueChange(parseSleepTimerKey(key))}
+      >
+        {row('off', offLabel)}
+        <DropdownMenuSeparator />
+        {minutes.map((m) => row(sleepTimerKey(m), formatMinutes(m)))}
+        {row('end', endLabel)}
+      </DropdownMenuRadioGroup>
+    </>
+  );
+}
+
+/**
+ * The sleep-timer menu: a timer glyph (accent + dot while a timer runs)
+ * opening a `DropdownMenu` of Off, the minute options and "End of episode".
+ * The time left arrives pre-formatted (`remaining`) and shows in the heading
+ * and the trigger's name.
+ */
+function SleepTimerMenuComponent({
+  children,
+  open,
+  onOpenChange,
+  size = 'regular',
+  disabled,
+  ...rows
+}: SleepTimerMenuProps) {
+  const g = TRANSPORT_GEOMETRY[size];
+  const label = rows.label ?? 'Sleep timer';
+  const active = rows.value !== 'off';
+  const name =
+    active && rows.remaining
+      ? `${label}, ${(rows.formatRemaining ?? defaultRemaining)(rows.remaining)}`
+      : label;
+  return (
+    <DropdownMenu open={open} onOpenChange={onOpenChange}>
+      <DropdownMenuTrigger asChild label={name} disabled={disabled}>
+        {children ?? (
+          <PlayerIconButton
+            icon={RiTimerLine}
+            glyph={g.glyph}
+            box={g.box}
+            active={active}
+            disabled={disabled}
+            testID={rows.testID ? `${rows.testID}-trigger` : undefined}
+          />
+        )}
+      </DropdownMenuTrigger>
+      <DropdownMenuContent label={label} align="end" minWidth={220} testID={rows.testID}>
+        <SleepTimerRows {...rows} />
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+export const SleepTimerMenu = memo(SleepTimerMenuComponent);
+SleepTimerMenu.displayName = 'SleepTimerMenu';

package/src/media-player/TrackText.tsx

@@ -0,0 +1,152 @@
+import React, { useEffect, useMemo } from 'react';
+import { Image, View, type StyleProp, type ViewStyle } from 'react-native';
+
+import { resolveButtonRamps } from '../button/shared';
+import { webDataSet } from '../checkbox/shared';
+import { adoptStyleSheet } from '../styles/adopt-style-sheet';
+import { useImageResolver } from '../image-resolver/context';
+import { RiMusic2Line } from '../icons/remix/RiMusic2Line';
+import type { TypeScaleVariant } from '../typography/scale';
+import { useTheme } from '../theme/use-theme';
+import { Text } from '../typography';
+import { isUrl, MEDIA_PLAYER_CSS, MEDIA_PLAYER_STYLE_ID } from './shared';
+import type { MediaArtist, MediaPlayerTrack } from './types';
+
+/** The cover: an `Image` for a URL or a resolved id, a neutral well with a note glyph otherwise. */
+export function Artwork({
+  source,
+  size,
+  radius,
+  style,
+  testID,
+}: {
+  source?: string;
+  size: number | '100%';
+  radius: number;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}) {
+  const theme = useTheme();
+  const resolver = useImageResolver();
+  const { neutral } = useMemo(() => resolveButtonRamps(theme), [theme]);
+  const uri = source ? (isUrl(source) ? source : resolver?.(source)) : undefined;
+  const box: ViewStyle =
+    size === '100%' ? { width: '100%', aspectRatio: 1 } : { width: size, height: size };
+  return (
+    <View
+      style={[
+        box,
+        {
+          borderRadius: radius,
+          overflow: 'hidden',
+          backgroundColor: theme.isDark ? neutral[800] : neutral[100],
+          alignItems: 'center',
+          justifyContent: 'center',
+        },
+        style,
+      ]}
+      testID={testID}
+    >
+      {uri ? (
+        <Image
+          source={{ uri }}
+          accessibilityIgnoresInvertColors
+          style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }}
+          resizeMode="cover"
+        />
+      ) : (
+        <View pointerEvents="none">
+          <RiMusic2Line width={24} height={24} fill={theme.isDark ? neutral[500] : neutral[400]} />
+        </View>
+      )}
+    </View>
+  );
+}
+
+/**
+ * Title over the artist credits, each line ONE text node so it truncates as a
+ * whole. The title is a link when `onTitlePress` is given; each credit is a
+ * nested link when `onArtistPress` is given (and `artists` is a list). On web
+ * a link underlines under the pointer and on keyboard focus through the
+ * adopted sheet.
+ */
+export function TrackText({
+  track,
+  titleVariant,
+  artistVariant,
+  titleColor,
+  artistColor,
+  onTitlePress,
+  onArtistPress,
+  titleLabel,
+  trailingTitle,
+  testID,
+}: {
+  track: MediaPlayerTrack;
+  titleVariant: TypeScaleVariant;
+  artistVariant: TypeScaleVariant;
+  titleColor: string;
+  artistColor: string;
+  onTitlePress?: () => void;
+  onArtistPress?: (artist: MediaArtist, index: number) => void;
+  titleLabel?: string;
+  trailingTitle?: React.ReactNode;
+  testID?: string;
+}) {
+  useEffect(() => {
+    adoptStyleSheet(MEDIA_PLAYER_STYLE_ID, MEDIA_PLAYER_CSS);
+  }, []);
+  const artists: MediaArtist[] =
+    typeof track.artists === 'string' ? [{ name: track.artists }] : track.artists;
+  const pressArtists = typeof track.artists !== 'string' && !!onArtistPress;
+  return (
+    <View style={{ minWidth: 0, flexShrink: 1 }}>
+      <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6, minWidth: 0 }}>
+        <Text
+          variant={titleVariant}
+          numberOfLines={1}
+          style={{ color: titleColor, flexShrink: 1 }}
+          {...(onTitlePress
+            ? {
+                role: 'link' as const,
+                accessibilityLabel: titleLabel ?? track.title,
+                onPress: onTitlePress,
+                ...webDataSet({ bloomPlayerLink: '' }),
+              }
+            : null)}
+          testID={testID ? `${testID}-title` : undefined}
+        >
+          {track.title}
+        </Text>
+        {trailingTitle}
+      </View>
+      <Text
+        variant={artistVariant}
+        numberOfLines={1}
+        style={{ color: artistColor }}
+        testID={testID ? `${testID}-artists` : undefined}
+      >
+        {artists.map((artist, i) => (
+          <React.Fragment key={artist.id ?? `${artist.name}-${i}`}>
+            {i > 0 ? ', ' : null}
+            {pressArtists ? (
+              <Text
+                variant={artistVariant}
+                role="link"
+                accessibilityLabel={artist.name}
+                onPress={() => onArtistPress?.(artist, i)}
+                style={{ color: artistColor }}
+                {...webDataSet({ bloomPlayerLink: '' })}
+                testID={testID ? `${testID}-artist-${i}` : undefined}
+              >
+                {artist.name}
+              </Text>
+            ) : (
+              artist.name
+            )}
+          </React.Fragment>
+        ))}
+      </Text>
+    </View>
+  );
+}

package/src/media-player/TransportControls.tsx

@@ -0,0 +1,235 @@
+import React, { memo, useMemo } from 'react';
+import { View } from 'react-native';
+
+import { RiArrowGoBackLine } from '../icons/remix/RiArrowGoBackLine';
+import { RiArrowGoForwardLine } from '../icons/remix/RiArrowGoForwardLine';
+import { RiForward10Line } from '../icons/remix/RiForward10Line';
+import { RiForward15Line } from '../icons/remix/RiForward15Line';
+import { RiForward30Line } from '../icons/remix/RiForward30Line';
+import { RiForward5Line } from '../icons/remix/RiForward5Line';
+import { RiRepeatLine } from '../icons/remix/RiRepeatLine';
+import { RiRepeatOneLine } from '../icons/remix/RiRepeatOneLine';
+import { RiReplay10Line } from '../icons/remix/RiReplay10Line';
+import { RiReplay15Line } from '../icons/remix/RiReplay15Line';
+import { RiReplay30Line } from '../icons/remix/RiReplay30Line';
+import { RiReplay5Line } from '../icons/remix/RiReplay5Line';
+import { RiShuffleLine } from '../icons/remix/RiShuffleLine';
+import { RiSkipBackFill } from '../icons/remix/RiSkipBackFill';
+import { RiSkipForwardFill } from '../icons/remix/RiSkipForwardFill';
+import { PlayButton } from '../media-controls/PlayButton';
+import { useTheme } from '../theme/use-theme';
+import { PlaybackSpeedMenu } from './PlaybackSpeedMenu';
+import { PlayerIconButton, type PlayerGlyph } from './PlayerIconButton';
+import { nextRepeatMode, TRANSPORT_GEOMETRY } from './shared';
+import type { TransportControlsLabels, TransportControlsProps } from './types';
+
+export const DEFAULT_TRANSPORT_LABELS: TransportControlsLabels = {
+  shuffle: 'Shuffle',
+  previous: 'Previous',
+  next: 'Next',
+  play: 'Play',
+  pause: 'Pause',
+  repeat: 'Repeat',
+  repeatOne: 'Repeat one',
+  skipBack: (s) => `Back ${s} seconds`,
+  skipForward: (s) => `Forward ${s} seconds`,
+};
+
+const REPLAY_GLYPHS: Record<number, PlayerGlyph> = {
+  5: RiReplay5Line,
+  10: RiReplay10Line,
+  15: RiReplay15Line,
+  30: RiReplay30Line,
+};
+const FORWARD_GLYPHS: Record<number, PlayerGlyph> = {
+  5: RiForward5Line,
+  10: RiForward10Line,
+  15: RiForward15Line,
+  30: RiForward30Line,
+};
+
+/** The numbered skip glyph for 5 / 10 / 15 / 30 seconds; a plain curved arrow for any other count. */
+export function skipGlyphFor(direction: 'back' | 'forward', seconds: number): PlayerGlyph {
+  if (direction === 'back') return REPLAY_GLYPHS[seconds] ?? RiArrowGoBackLine;
+  return FORWARD_GLYPHS[seconds] ?? RiArrowGoForwardLine;
+}
+
+/**
+ * The transport row.
+ *
+ *   music     shuffle · previous · PLAY · next · repeat
+ *   podcast   speed · back N · PLAY · forward N · trailing
+ *
+ *              play   glyph   prev/next   hit box   gap
+ *   compact    32     16      20          32        8
+ *   regular    48     20      24          32        16
+ *   large      56     24      32          40        24
+ *
+ * The play button is `PlayButton` `inverse`. Previous / next rest in the text
+ * colour; the toggles rest muted and turn accent with a 4px dot when on.
+ * Optional buttons (shuffle, repeat, speed) keep their slot when absent, so
+ * the play button stays centred.
+ *
+ * Repeat cycles `off` → `all` → `one`: `onRepeatChange` receives the NEXT mode.
+ * It is a toggle (`aria-pressed` true for `all` and `one`) named "Repeat", or
+ * "Repeat one" while repeating one — the pressed state says whether it is on,
+ * the name which repeat.
+ */
+function TransportControlsComponent({
+  playing,
+  onPlayPause,
+  loading,
+  subject,
+  variant = 'music',
+  size = 'regular',
+  onPrevious,
+  onNext,
+  previousDisabled,
+  nextDisabled,
+  shuffle = false,
+  onShuffleChange,
+  repeat = 'off',
+  onRepeatChange,
+  skipBackSeconds = 15,
+  skipForwardSeconds = 30,
+  onSkipBack,
+  onSkipForward,
+  playbackRate = 1,
+  onPlaybackRateChange,
+  trailing,
+  disabled = false,
+  labels: labelOverrides,
+  style,
+  testID,
+}: TransportControlsProps) {
+  const theme = useTheme();
+  const labels = useMemo(() => ({ ...DEFAULT_TRANSPORT_LABELS, ...labelOverrides }), [labelOverrides]);
+  const g = TRANSPORT_GEOMETRY[size];
+  const id = (part: string) => (testID ? `${testID}-${part}` : undefined);
+  const slot = { width: g.box, height: g.box, alignItems: 'center', justifyContent: 'center' } as const;
+
+  const play = (
+    <PlayButton
+      playing={playing}
+      onPress={onPlayPause}
+      size={g.play}
+      variant="inverse"
+      loading={loading}
+      disabled={disabled}
+      subject={subject}
+      playLabel={labels.play}
+      pauseLabel={labels.pause}
+      testID={id('play')}
+    />
+  );
+
+  let children: React.ReactNode;
+  if (variant === 'podcast') {
+    children = (
+      <>
+        <View style={{ minWidth: g.box, height: g.box, alignItems: 'center', justifyContent: 'center' }}>
+          {onPlaybackRateChange ? (
+            <PlaybackSpeedMenu
+              rate={playbackRate}
+              onRateChange={onPlaybackRateChange}
+              size={size}
+              disabled={disabled}
+              testID={id('speed')}
+            />
+          ) : null}
+        </View>
+        <PlayerIconButton
+          icon={skipGlyphFor('back', skipBackSeconds)}
+          glyph={g.skipGlyph}
+          box={g.box}
+          restColor={theme.colors.text}
+          accessibilityLabel={labels.skipBack(skipBackSeconds)}
+          onPress={onSkipBack}
+          disabled={disabled || !onSkipBack}
+          testID={id('skip-back')}
+        />
+        {play}
+        <PlayerIconButton
+          icon={skipGlyphFor('forward', skipForwardSeconds)}
+          glyph={g.skipGlyph}
+          box={g.box}
+          restColor={theme.colors.text}
+          accessibilityLabel={labels.skipForward(skipForwardSeconds)}
+          onPress={onSkipForward}
+          disabled={disabled || !onSkipForward}
+          testID={id('skip-forward')}
+        />
+        <View style={{ minWidth: g.box, height: g.box, alignItems: 'center', justifyContent: 'center' }}>
+          {trailing}
+        </View>
+      </>
+    );
+  } else {
+    const repeating = repeat !== 'off';
+    children = (
+      <>
+        <View style={slot}>
+          {onShuffleChange ? (
+            <PlayerIconButton
+              icon={RiShuffleLine}
+              glyph={g.glyph}
+              box={g.box}
+              pressed={shuffle}
+              accessibilityLabel={labels.shuffle}
+              onPress={() => onShuffleChange(!shuffle)}
+              disabled={disabled}
+              testID={id('shuffle')}
+            />
+          ) : null}
+        </View>
+        <PlayerIconButton
+          icon={RiSkipBackFill}
+          glyph={g.skipGlyph}
+          box={g.box}
+          restColor={theme.colors.text}
+          accessibilityLabel={labels.previous}
+          onPress={onPrevious}
+          disabled={disabled || previousDisabled || !onPrevious}
+          testID={id('previous')}
+        />
+        {play}
+        <PlayerIconButton
+          icon={RiSkipForwardFill}
+          glyph={g.skipGlyph}
+          box={g.box}
+          restColor={theme.colors.text}
+          accessibilityLabel={labels.next}
+          onPress={onNext}
+          disabled={disabled || nextDisabled || !onNext}
+          testID={id('next')}
+        />
+        <View style={slot}>
+          {onRepeatChange ? (
+            <PlayerIconButton
+              icon={repeat === 'one' ? RiRepeatOneLine : RiRepeatLine}
+              glyph={g.glyph}
+              box={g.box}
+              pressed={repeating}
+              accessibilityLabel={repeat === 'one' ? labels.repeatOne : labels.repeat}
+              onPress={() => onRepeatChange(nextRepeatMode(repeat))}
+              disabled={disabled}
+              testID={id('repeat')}
+            />
+          ) : null}
+        </View>
+      </>
+    );
+  }
+
+  return (
+    <View
+      style={[{ flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: g.gap }, style]}
+      testID={testID}
+    >
+      {children}
+    </View>
+  );
+}
+
+export const TransportControls = memo(TransportControlsComponent);
+TransportControls.displayName = 'TransportControls';

package/src/media-player/device-icons.ts

@@ -0,0 +1,21 @@
+import { RiCarLine } from '../icons/remix/RiCarLine';
+import { RiComputerLine } from '../icons/remix/RiComputerLine';
+import { RiHeadphoneLine } from '../icons/remix/RiHeadphoneLine';
+import { RiSmartphoneLine } from '../icons/remix/RiSmartphoneLine';
+import { RiSpeaker3Line } from '../icons/remix/RiSpeaker3Line';
+import { RiSpeakerLine } from '../icons/remix/RiSpeakerLine';
+import { RiTabletLine } from '../icons/remix/RiTabletLine';
+import { RiTvLine } from '../icons/remix/RiTvLine';
+import type { PlayerGlyph } from './PlayerIconButton';
+import type { PlaybackDeviceKind } from './types';
+
+export const DEVICE_GLYPHS: Record<PlaybackDeviceKind, PlayerGlyph> = {
+  computer: RiComputerLine,
+  phone: RiSmartphoneLine,
+  tablet: RiTabletLine,
+  speaker: RiSpeakerLine,
+  tv: RiTvLine,
+  car: RiCarLine,
+  headphones: RiHeadphoneLine,
+  group: RiSpeaker3Line,
+};

package/src/media-player/index.ts

@@ -0,0 +1,36 @@
+export { TransportControls } from './TransportControls';
+export { NowPlayingBar } from './NowPlayingBar';
+export { MiniPlayer } from './MiniPlayer';
+export { FullScreenPlayer } from './FullScreenPlayer';
+export { PlaybackSpeedMenu } from './PlaybackSpeedMenu';
+export { SleepTimerMenu } from './SleepTimerMenu';
+export { DevicePicker } from './DevicePicker';
+export { ConnectBanner } from './ConnectBanner';
+export {
+  nextRepeatMode,
+  resolveArtworkTint,
+  PLAYBACK_RATES,
+  SLEEP_TIMER_MINUTES,
+} from './shared';
+export type {
+  ConnectBannerProps,
+  DevicePickerProps,
+  FullScreenPlayerLabels,
+  FullScreenPlayerProps,
+  LyricsPreview,
+  MediaArtist,
+  MediaPlayerTrack,
+  MiniPlayerProps,
+  NowPlayingBarLabels,
+  NowPlayingBarProps,
+  PlaybackDevice,
+  PlaybackDeviceKind,
+  PlaybackSpeedMenuProps,
+  RepeatMode,
+  SleepTimerMenuProps,
+  SleepTimerValue,
+  TransportControlsLabels,
+  TransportControlsProps,
+  TransportControlsSize,
+  TransportControlsVariant,
+} from './types';