@oxy.so/bloom 2.8.0 → 2.10.0

package/src/media-player/MiniPlayer.tsx

@@ -0,0 +1,224 @@
+import React, { memo, useContext, useMemo, useRef } from 'react';
+import { PanResponder, Pressable, View } from 'react-native';
+
+import { mixColor, resolveButtonRamps } from '../button/shared';
+import { webDataSet } from '../checkbox/shared';
+import { LikeButton } from '../media-controls/LikeButton';
+import { PlayButton } from '../media-controls/PlayButton';
+import { clamp, resolveMediaControlsPaint } from '../media-controls/shared';
+import { resolveMenuPalette } from '../floating/menu-palette';
+import { useTheme } from '../theme/use-theme';
+import type { Theme } from '../theme/types';
+import { Text } from '../typography';
+import { BloomThemeContext } from '../theme/BloomThemeProvider';
+import { DEVICE_GLYPHS } from './device-icons';
+import { ImmersiveTheme, immersiveDarkTheme } from './ImmersiveTheme';
+import { Artwork } from './TrackText';
+import { artistNames, IS_WEB, resolveArtworkTint } from './shared';
+import type { MiniPlayerProps } from './types';
+
+export const MINI_PLAYER_HEIGHT = 56;
+/** Horizontal travel that counts as a swipe (native). */
+export const MINI_PLAYER_SWIPE = 48;
+
+export interface MiniPlayerSurface {
+  /** The bar's fill. */
+  background: string;
+  /** Whether it is the artwork tint (content paints with the dark theme) or the neutral fallback. */
+  tinted: boolean;
+  /** The fallback's hairline; `null` on a tint. */
+  border: string | null;
+}
+
+/**
+ * The bar's fill for an artwork colour: the colour darkened until the dark
+ * theme's text AND muted text clear 4.5:1 on it, or — absent or unparseable —
+ * the floating-surface recipe (card with a neutral-200 hairline; dark
+ * neutral-800 with neutral-700) under the app's own theme.
+ */
+export function resolveMiniPlayerSurface(
+  theme: Theme,
+  preset: Parameters<typeof immersiveDarkTheme>[1],
+  artworkColor: string | undefined,
+): MiniPlayerSurface {
+  const dark = immersiveDarkTheme(theme, preset);
+  const darkPaint = resolveMediaControlsPaint(dark);
+  const tint = resolveArtworkTint(artworkColor, darkPaint.text, darkPaint.textMuted);
+  if (tint.background) return { background: tint.background, tinted: true, border: null };
+  const menu = resolveMenuPalette(theme);
+  return { background: menu.surface, tinted: false, border: menu.border };
+}
+
+function MiniPlayerContent({
+  track,
+  playing,
+  onPlayPause,
+  onPress,
+  position,
+  duration,
+  liked = false,
+  onLikedChange,
+  deviceName,
+  onNext,
+  onPrevious,
+  openLabel = 'Open player',
+  testID,
+  tinted,
+  background,
+}: MiniPlayerProps & MiniPlayerSurface) {
+  const theme = useTheme();
+  const paint = useMemo(() => resolveMediaControlsPaint(theme), [theme]);
+  const { accent } = useMemo(() => resolveButtonRamps(theme), [theme]);
+  const id = (part: string) => (testID ? `${testID}-${part}` : undefined);
+  const progress = duration > 0 ? clamp(position / duration, 0, 1) : 0;
+  // On the artwork tint an accent line has no contrast guarantee; the text colour does.
+  const deviceColor = tinted ? paint.text : theme.isDark ? accent[400] : accent[600];
+  const DeviceGlyph = DEVICE_GLYPHS.speaker;
+
+  const swipe = useRef({ onNext, onPrevious });
+  swipe.current = { onNext, onPrevious };
+  const pan = useMemo(
+    () =>
+      PanResponder.create({
+        onMoveShouldSetPanResponder: (_e, g) => Math.abs(g.dx) > 12 && Math.abs(g.dx) > Math.abs(g.dy) * 2,
+        onPanResponderRelease: (_e, g) => {
+          if (g.dx <= -MINI_PLAYER_SWIPE) swipe.current.onNext?.();
+          else if (g.dx >= MINI_PLAYER_SWIPE) swipe.current.onPrevious?.();
+        },
+      }),
+    [],
+  );
+  const swipeable = !IS_WEB && (!!onNext || !!onPrevious);
+
+  const secondary = deviceName ?? artistNames(track.artists);
+  const name = `${openLabel}: ${track.title}, ${artistNames(track.artists)}`;
+
+  return (
+    <>
+      <Pressable
+        role="button"
+        accessibilityLabel={name}
+        onPress={onPress}
+        {...(swipeable ? pan.panHandlers : null)}
+        style={{
+          flex: 1,
+          minWidth: 0,
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap: 10,
+          alignSelf: 'stretch',
+          paddingLeft: 8,
+        }}
+        testID={id('open')}
+      >
+        <Artwork source={track.artwork} size={40} radius={8} />
+        <View style={{ flex: 1, minWidth: 0 }}>
+          <Text variant="body-2-semibold" numberOfLines={1} style={{ color: paint.text }}>
+            {track.title}
+          </Text>
+          <View style={{ flexDirection: 'row', alignItems: 'center', gap: 4, minWidth: 0 }}>
+            {deviceName ? (
+              <View pointerEvents="none" testID={id('device')}>
+                <DeviceGlyph width={12} height={12} fill={deviceColor} />
+              </View>
+            ) : null}
+            <Text
+              variant="caption-1-regular"
+              numberOfLines={1}
+              style={{ color: deviceName ? deviceColor : paint.textMuted, flexShrink: 1 }}
+            >
+              {secondary}
+            </Text>
+          </View>
+        </View>
+      </Pressable>
+      {onLikedChange ? <LikeButton liked={liked} onLikedChange={onLikedChange} testID={id('like')} /> : null}
+      <PlayButton
+        playing={playing}
+        onPress={onPlayPause}
+        variant="plain"
+        size="small"
+        subject={track.title}
+        style={{ marginRight: 8 }}
+        testID={id('play')}
+      />
+      <View
+        pointerEvents="none"
+        aria-hidden
+        importantForAccessibility="no-hide-descendants"
+        style={{
+          position: 'absolute',
+          left: 8,
+          right: 8,
+          bottom: 0,
+          height: 2,
+          borderRadius: 1,
+          overflow: 'hidden',
+          // The rail is the text colour composited at 24% over the bar's own fill.
+          backgroundColor: mixColor(background, paint.text, 0.24),
+        }}
+        testID={id('progress')}
+      >
+        <View
+          style={{ width: `${progress * 100}%`, height: 2, backgroundColor: paint.text }}
+          testID={id('progress-fill')}
+        />
+      </View>
+    </>
+  );
+}
+
+/**
+ * The phone's floating now-playing bar, above the tab bar.
+ *
+ *   56 tall, 12 corner (a panel, not a pill), 8 side margin
+ *   40 cover (8 corner) · title (body-2-semibold) / artist or device line · like · play
+ *   a 2px progress line along the bottom, 8 in from each side
+ *
+ * The fill is the artwork colour darkened for contrast (`resolveArtworkTint`);
+ * the content then paints with the dark theme, so it reads light-on-colour in
+ * a light app too. No colour → the floating surface under the app's theme.
+ *
+ * The cover and text are ONE button ("Open player: Title, Artist"); like and
+ * play are siblings rather than nested inside it. While casting, the artist
+ * line becomes the device, accent with a speaker glyph. On native a horizontal
+ * swipe past 48 calls `onNext` (left) / `onPrevious` (right). Titles truncate
+ * — nothing scrolls.
+ */
+function MiniPlayerComponent(props: MiniPlayerProps) {
+  const theme = useTheme();
+  const ctx = useContext(BloomThemeContext);
+  const surface = useMemo(
+    () => resolveMiniPlayerSurface(theme, ctx?.colorPreset ?? 'oxy', props.artworkColor),
+    [theme, ctx?.colorPreset, props.artworkColor],
+  );
+  return (
+    <View
+      {...webDataSet({ bloomMiniPlayer: surface.tinted ? 'tinted' : 'neutral' })}
+      style={[
+        {
+          height: MINI_PLAYER_HEIGHT,
+          marginLeft: 8,
+          marginRight: 8,
+          borderRadius: 12,
+          overflow: 'hidden',
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap: 4,
+          backgroundColor: surface.background,
+          borderWidth: surface.border ? 1 : 0,
+          borderColor: surface.border ?? undefined,
+        },
+        props.style,
+      ]}
+      testID={props.testID}
+    >
+      <ImmersiveTheme enabled={surface.tinted}>
+        <MiniPlayerContent {...props} {...surface} />
+      </ImmersiveTheme>
+    </View>
+  );
+}
+
+export const MiniPlayer = memo(MiniPlayerComponent);
+MiniPlayer.displayName = 'MiniPlayer';

package/src/media-player/NowPlayingBar.tsx

@@ -0,0 +1,265 @@
+import React, { memo, useMemo, useState } from 'react';
+import { useWindowDimensions, View, type LayoutChangeEvent } from 'react-native';
+
+import { resolveButtonRamps } from '../button/shared';
+import { webDataSet } from '../checkbox/shared';
+import { RiFullscreenLine } from '../icons/remix/RiFullscreenLine';
+import { RiMicLine } from '../icons/remix/RiMicLine';
+import { RiPlayListLine } from '../icons/remix/RiPlayListLine';
+import { ExplicitBadge } from '../media-controls/ExplicitBadge';
+import { LikeButton } from '../media-controls/LikeButton';
+import { PlaybackProgress } from '../media-controls/PlaybackProgress';
+import { VolumeControl } from '../media-controls/VolumeControl';
+import { resolveMediaControlsPaint } from '../media-controls/shared';
+import { Popover, PopoverContent, PopoverTrigger } from '../popover';
+import { useTheme } from '../theme/use-theme';
+import { DEVICE_GLYPHS } from './device-icons';
+import { PlayerIconButton } from './PlayerIconButton';
+import { Artwork, TrackText } from './TrackText';
+import { TransportControls } from './TransportControls';
+import type { NowPlayingBarLabels, NowPlayingBarProps } from './types';
+
+export const NOW_PLAYING_BAR_HEIGHT = 80;
+/** At and above: every control. Below: no fullscreen button, a shorter volume slider. */
+export const NOW_PLAYING_BAR_WIDE = 1024;
+/** Below: no lyrics, device (unless casting) or volume; no times beside the scrubber. */
+export const NOW_PLAYING_BAR_MEDIUM = 768;
+
+export type NowPlayingBarLayout = 'wide' | 'medium' | 'narrow';
+
+export function nowPlayingBarLayout(width: number): NowPlayingBarLayout {
+  if (width >= NOW_PLAYING_BAR_WIDE) return 'wide';
+  if (width >= NOW_PLAYING_BAR_MEDIUM) return 'medium';
+  return 'narrow';
+}
+
+const DEFAULT_LABELS: NowPlayingBarLabels = {
+  lyrics: 'Lyrics',
+  queue: 'Queue',
+  devices: 'Connect to a device',
+  fullscreen: 'Full screen',
+};
+
+/**
+ * The desktop player bar, full width at the bottom of the window.
+ *
+ *   80 tall, 16 side inset, page background, 1px neutral-200 (dark 800) top rule
+ *   left    56 cover (8 corner) · title / artists · like       flex 1, ≤ 30%
+ *   centre  compact transport over the scrubber with times     flex 2, ≤ 722
+ *   right   lyrics · queue · devices · volume · fullscreen     flex 1, end
+ *
+ * The width is MEASURED (seeded from the window) and collapses in two steps:
+ * under 1024 the fullscreen button goes and the volume slider shortens to 64;
+ * under 768 lyrics, volume and the scrubber's times go, and the device button
+ * stays only while casting, and the actions column shrinks to what it draws.
+ * The centre column never shrinks below 240.
+ *
+ * The toggles (lyrics, queue) are `aria-pressed` buttons painted accent + dot
+ * when on; the device button lights the same way while `deviceName` is set.
+ */
+function NowPlayingBarComponent({
+  track,
+  onTitlePress,
+  onArtistPress,
+  liked = false,
+  onLikedChange,
+  transport,
+  position,
+  duration,
+  buffered,
+  onSeek,
+  onSeekPreview,
+  lyricsActive = false,
+  onLyricsChange,
+  queueActive = false,
+  onQueueChange,
+  deviceName,
+  onDevicePress,
+  devicePicker,
+  devicePickerOpen,
+  onDevicePickerOpenChange,
+  volume = 1,
+  onVolumeChange,
+  muted,
+  onMutedChange,
+  onFullscreenPress,
+  labels: labelOverrides,
+  style,
+  testID,
+}: NowPlayingBarProps) {
+  const theme = useTheme();
+  const window = useWindowDimensions();
+  const [width, setWidth] = useState<number>(window.width);
+  const layout = nowPlayingBarLayout(width);
+  const labels = { ...DEFAULT_LABELS, ...labelOverrides };
+  const paint = useMemo(() => resolveMediaControlsPaint(theme), [theme]);
+  const { neutral } = useMemo(() => resolveButtonRamps(theme), [theme]);
+  const id = (part: string) => (testID ? `${testID}-${part}` : undefined);
+  const casting = !!deviceName;
+  const narrow = layout === 'narrow';
+
+  const deviceButton = (
+    <PlayerIconButton
+      icon={DEVICE_GLYPHS.speaker}
+      glyph={20}
+      box={32}
+      active={casting}
+      accessibilityLabel={casting ? `${labels.devices}, ${deviceName}` : labels.devices}
+      onPress={devicePicker ? undefined : onDevicePress}
+      testID={id('devices')}
+    />
+  );
+  const showDevice = (!!devicePicker || !!onDevicePress) && (!narrow || casting);
+
+  return (
+    <View
+      onLayout={(e: LayoutChangeEvent) => setWidth(e.nativeEvent.layout.width)}
+      style={[
+        {
+          width: '100%',
+          height: NOW_PLAYING_BAR_HEIGHT,
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap: 16,
+          paddingLeft: 16,
+          paddingRight: 16,
+          backgroundColor: theme.colors.background,
+          borderTopWidth: 1,
+          borderTopColor: theme.isDark ? neutral[800] : neutral[200],
+        },
+        style,
+      ]}
+      testID={testID}
+      {...webDataSet({ bloomPlayerLayout: layout })}
+    >
+      <View
+        style={{
+          flexGrow: 1,
+          flexShrink: 1,
+          flexBasis: 0,
+          maxWidth: narrow ? undefined : '30%',
+          minWidth: 0,
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap: 12,
+        }}
+        testID={id('track')}
+      >
+        <Artwork source={track.artwork} size={56} radius={8} />
+        <TrackText
+          track={track}
+          titleVariant="body-medium"
+          artistVariant="caption-1-regular"
+          titleColor={paint.text}
+          artistColor={paint.textMuted}
+          onTitlePress={onTitlePress}
+          onArtistPress={onArtistPress}
+          titleLabel={labels.openTrack}
+          trailingTitle={track.explicit ? <ExplicitBadge size="small" /> : null}
+          testID={id('track')}
+        />
+        {onLikedChange ? (
+          <LikeButton liked={liked} onLikedChange={onLikedChange} size="small" testID={id('like')} />
+        ) : null}
+      </View>
+
+      <View
+        style={{ flexGrow: narrow ? 1.4 : 2, flexShrink: 1, flexBasis: 0, maxWidth: 722, minWidth: 240, alignItems: 'center', gap: 4 }}
+        testID={id('center')}
+      >
+        <TransportControls
+          {...transport}
+          subject={transport.subject ?? track.title}
+          size="compact"
+          testID={id('transport')}
+        />
+        <PlaybackProgress
+          value={position}
+          duration={duration}
+          buffered={buffered}
+          onSeek={onSeek}
+          onSeekPreview={onSeekPreview}
+          showTimes={!narrow}
+          disabled={transport.disabled}
+          style={{ alignSelf: 'stretch' }}
+          testID={id('progress')}
+        />
+      </View>
+
+      <View
+        style={{
+          // Narrow: the actions take only what they draw, so the track keeps the room.
+          flexGrow: narrow ? 0 : 1,
+          flexShrink: narrow ? 0 : 1,
+          flexBasis: narrow ? 'auto' : 0,
+          minWidth: 0,
+          flexDirection: 'row',
+          alignItems: 'center',
+          justifyContent: 'flex-end',
+          gap: 4,
+        }}
+        testID={id('actions')}
+      >
+        {onLyricsChange && !narrow ? (
+          <PlayerIconButton
+            icon={RiMicLine}
+            glyph={20}
+            box={32}
+            pressed={lyricsActive}
+            accessibilityLabel={labels.lyrics}
+            onPress={() => onLyricsChange(!lyricsActive)}
+            testID={id('lyrics')}
+          />
+        ) : null}
+        {onQueueChange ? (
+          <PlayerIconButton
+            icon={RiPlayListLine}
+            glyph={20}
+            box={32}
+            pressed={queueActive}
+            accessibilityLabel={labels.queue}
+            onPress={() => onQueueChange(!queueActive)}
+            testID={id('queue')}
+          />
+        ) : null}
+        {showDevice ? (
+          devicePicker ? (
+            <Popover open={devicePickerOpen} onOpenChange={onDevicePickerOpenChange}>
+              <PopoverTrigger asChild label={labels.devices}>
+                {deviceButton}
+              </PopoverTrigger>
+              <PopoverContent label={labels.devices} side="top" align="end" style={{ width: 320 }}>
+                {devicePicker}
+              </PopoverContent>
+            </Popover>
+          ) : (
+            deviceButton
+          )
+        ) : null}
+        {onVolumeChange && !narrow ? (
+          <VolumeControl
+            volume={volume}
+            onVolumeChange={onVolumeChange}
+            muted={muted}
+            onMutedChange={onMutedChange}
+            sliderWidth={layout === 'wide' ? 96 : 64}
+            testID={id('volume')}
+          />
+        ) : null}
+        {onFullscreenPress && layout === 'wide' ? (
+          <PlayerIconButton
+            icon={RiFullscreenLine}
+            glyph={20}
+            box={32}
+            accessibilityLabel={labels.fullscreen}
+            onPress={onFullscreenPress}
+            testID={id('fullscreen')}
+          />
+        ) : null}
+      </View>
+    </View>
+  );
+}
+
+export const NowPlayingBar = memo(NowPlayingBarComponent);
+NowPlayingBar.displayName = 'NowPlayingBar';

package/src/media-player/PlaybackSpeedMenu.tsx

@@ -0,0 +1,95 @@
+import React, { memo } from 'react';
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger,
+} from '../dropdown-menu';
+import { RiCheckLine } from '../icons/remix/RiCheckLine';
+import { useTheme } from '../theme/use-theme';
+import { PlayerIconButton } from './PlayerIconButton';
+import { formatPlaybackRate, PLAYBACK_RATES, TRANSPORT_GEOMETRY } from './shared';
+import type { PlaybackSpeedMenuProps } from './types';
+
+/** The heading and radio rows, shared by the menu and anything that hosts them in its own menu. */
+export function PlaybackSpeedRows({
+  rate,
+  onRateChange,
+  rates = PLAYBACK_RATES,
+  formatRate = formatPlaybackRate,
+  label = 'Playback speed',
+  testID,
+}: Pick<PlaybackSpeedMenuProps, 'rate' | 'onRateChange' | 'rates' | 'formatRate' | 'label' | 'testID'>) {
+  const theme = useTheme();
+  return (
+    <>
+      <DropdownMenuLabel>{label}</DropdownMenuLabel>
+      <DropdownMenuRadioGroup value={String(rate)} onValueChange={(v) => onRateChange(Number(v))}>
+        {rates.map((r) => (
+          <DropdownMenuRadioItem
+            key={r}
+            value={String(r)}
+            indicator={<RiCheckLine width={16} height={16} fill={theme.colors.text} />}
+            indicatorPosition="trailing"
+            testID={testID ? `${testID}-rate-${r}` : undefined}
+          >
+            {formatRate(r)}
+          </DropdownMenuRadioItem>
+        ))}
+      </DropdownMenuRadioGroup>
+    </>
+  );
+}
+
+/**
+ * The playback-speed menu: a text trigger showing the rate ("1.5×", accent +
+ * dot when not 1×) opening a `DropdownMenu` of radio rows with a trailing
+ * check — an anchored dropdown on web, a bottom sheet on native.
+ */
+function PlaybackSpeedMenuComponent({
+  rate,
+  onRateChange,
+  rates,
+  formatRate = formatPlaybackRate,
+  label = 'Playback speed',
+  children,
+  open,
+  onOpenChange,
+  size = 'regular',
+  disabled,
+  testID,
+}: PlaybackSpeedMenuProps) {
+  const g = TRANSPORT_GEOMETRY[size];
+  return (
+    <DropdownMenu open={open} onOpenChange={onOpenChange}>
+      <DropdownMenuTrigger asChild label={`${label}, ${formatRate(rate)}`} disabled={disabled}>
+        {children ?? (
+          <PlayerIconButton
+            text={formatRate(rate)}
+            glyph={g.glyph}
+            box={g.box}
+            active={rate !== 1}
+            disabled={disabled}
+            testID={testID ? `${testID}-trigger` : undefined}
+          />
+        )}
+      </DropdownMenuTrigger>
+      <DropdownMenuContent label={label} align="center" minWidth={180} testID={testID}>
+        <PlaybackSpeedRows
+          rate={rate}
+          onRateChange={onRateChange}
+          rates={rates}
+          formatRate={formatRate}
+          label={label}
+          testID={testID}
+        />
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+export const PlaybackSpeedMenu = memo(PlaybackSpeedMenuComponent);
+PlaybackSpeedMenu.displayName = 'PlaybackSpeedMenu';