@oxy.so/bloom 2.8.0 → 2.10.0

package/src/music-library/BrowseGrid.tsx

@@ -0,0 +1,168 @@
+import React, { Children, memo, useEffect, useMemo, useState } from 'react';
+import { Image, Pressable, View } from 'react-native';
+
+import { mixColor } from '../button/shared';
+import { webDataSet } from '../checkbox/shared';
+import { useImageResolver } from '../image-resolver/context';
+import { adoptStyleSheet } from '../styles/adopt-style-sheet';
+import type { WebCssStyle } from '../styles/web-view-style';
+import { useTheme } from '../theme/use-theme';
+import { Text } from '../typography';
+import { isUrl } from './Cover';
+import {
+  IS_WEB,
+  MUSIC_LIBRARY_CSS,
+  MUSIC_LIBRARY_STYLE_ID,
+  TILE_LIGHT_TEXT,
+  browseTilePaint,
+  gridColumns,
+  resolveMusicLibraryPaint,
+} from './shared';
+import type { BrowseGridProps, BrowseTile } from './types';
+
+/**
+ * The browse page's grid of genre and mood tiles.
+ *
+ *   columns   as many as fit at `minTileWidth` (default 128), from the
+ *             measured width; 16 gap (12 under 480 wide)
+ *   tile      12 radius, 1.6 : 1, the tile's own colour; 16 padding;
+ *             title title-2-bold, top-left, two lines at most
+ *   image     40% of the tile's height, 6 radius, tilted 25° and tucked into
+ *             the bottom-right corner, clipped by the tile
+ *   hover     the fill moves 12% toward the title colour's opposite (colour only)
+ *
+ * The title is white or near-black, whichever clears 4.5:1 on the tile colour;
+ * a mid-grey that neither clears is darkened until white does
+ * (`browseTilePaint`), so any backend colour stays readable. Children replace the colour tiles: each child is one cell.
+ */
+
+const TILE_RATIO = 1.6;
+
+function Tile({
+  item,
+  width,
+  onPress,
+  testID,
+}: {
+  item: BrowseTile;
+  width: number;
+  onPress?: (item: BrowseTile) => void;
+  testID?: string;
+}) {
+  const theme = useTheme();
+  const libraryPaint = useMemo(() => resolveMusicLibraryPaint(theme), [theme]);
+  const resolver = useImageResolver();
+  const [hovered, setHovered] = useState(false);
+  const paint = useMemo(
+    () => browseTilePaint(item.color, { background: libraryPaint.selected, text: libraryPaint.text }),
+    [item.color, libraryPaint],
+  );
+  const height = Math.round(width / TILE_RATIO);
+  const imageSize = Math.round(height * 0.4 * 1.15);
+  const uri = item.image ? (isUrl(item.image) ? item.image : resolver?.(item.image) ?? undefined) : undefined;
+  const hoverFill = mixColor(paint.background, paint.text === TILE_LIGHT_TEXT ? '#000000' : '#ffffff', 0.12);
+
+  const style: WebCssStyle = {
+    width,
+    height,
+    borderRadius: 12,
+    overflow: 'hidden',
+    padding: 16,
+    backgroundColor: hovered ? hoverFill : paint.background,
+    '--bloom-music-ring': libraryPaint.ring,
+    ...(IS_WEB ? { transitionProperty: 'background-color', transitionDuration: '150ms' } : null),
+  };
+
+  return (
+    <Pressable
+      {...webDataSet({ bloomMusicFocusable: '' })}
+      role="button"
+      accessibilityLabel={item.title}
+      onPress={onPress ? () => onPress(item) : undefined}
+      onHoverIn={() => setHovered(true)}
+      onHoverOut={() => setHovered(false)}
+      style={style}
+      testID={testID}
+    >
+      <Text
+        variant={width < 180 ? 'headline-bold' : 'title-2-bold'}
+        numberOfLines={2}
+        style={{ color: paint.text, paddingRight: imageSize * 0.35 }}
+      >
+        {item.title}
+      </Text>
+      {uri ? (
+        <Image
+          source={{ uri }}
+          aria-hidden
+          style={{
+            position: 'absolute',
+            width: imageSize,
+            height: imageSize,
+            right: -Math.round(imageSize * 0.18),
+            bottom: -Math.round(imageSize * 0.08),
+            borderRadius: 6,
+            transform: [{ rotate: '25deg' }],
+          }}
+          resizeMode="cover"
+        />
+      ) : null}
+    </Pressable>
+  );
+}
+
+function BrowseGridComponent({
+  items,
+  children,
+  onItemPress,
+  minTileWidth = 128,
+  gap: gapProp,
+  title,
+  style,
+  testID,
+}: BrowseGridProps) {
+  const theme = useTheme();
+  useEffect(() => {
+    adoptStyleSheet(MUSIC_LIBRARY_STYLE_ID, MUSIC_LIBRARY_CSS);
+  }, []);
+  const [width, setWidth] = useState(0);
+  const gap = gapProp ?? (width > 0 && width < 480 ? 12 : 16);
+  const columns = gridColumns(width, minTileWidth, gap);
+  const cell = width > 0 ? Math.floor((width - gap * (columns - 1)) / columns) : minTileWidth;
+
+  const cells = children
+    ? Children.toArray(children).map((child, index) => (
+        <View key={index} style={{ width: cell }}>
+          {child}
+        </View>
+      ))
+    : (items ?? []).map((item) => (
+        <Tile
+          key={item.id}
+          item={item}
+          width={cell}
+          onPress={onItemPress}
+          testID={testID ? `${testID}-${item.id}` : undefined}
+        />
+      ));
+
+  return (
+    <View style={[{ gap: 16 }, style]} testID={testID}>
+      {title ? (
+        <Text variant="title-2-bold" role="heading" style={{ color: theme.colors.text }}>
+          {title}
+        </Text>
+      ) : null}
+      <View
+        onLayout={(event) => setWidth(Math.floor(event.nativeEvent.layout.width))}
+        style={{ flexDirection: 'row', flexWrap: 'wrap', gap }}
+        testID={testID ? `${testID}-grid` : undefined}
+      >
+        {cells}
+      </View>
+    </View>
+  );
+}
+
+export const BrowseGrid = memo(BrowseGridComponent);
+BrowseGrid.displayName = 'BrowseGrid';

package/src/music-library/Cover.tsx

@@ -0,0 +1,83 @@
+import React, { useState, type ComponentType } from 'react';
+import { Image, View, type StyleProp, type ViewStyle } from 'react-native';
+
+import { RiBookOpenLine } from '../icons/remix/RiBookOpenLine';
+import { RiFolderLine } from '../icons/remix/RiFolderLine';
+import { RiMic2Line } from '../icons/remix/RiMic2Line';
+import { RiMusic2Line } from '../icons/remix/RiMusic2Line';
+import { RiUserLine } from '../icons/remix/RiUserLine';
+import { useImageResolver } from '../image-resolver/context';
+import type { LibraryItemKind } from './types';
+
+// ---------------------------------------------------------------------------
+//  Cover
+// ---------------------------------------------------------------------------
+
+export function isUrl(value: string): boolean {
+  return /^(https?:|data:|blob:|file:)/.test(value);
+}
+
+type Glyph = ComponentType<{ width?: number; height?: number; fill?: string }>;
+
+const KIND_GLYPH: Record<LibraryItemKind | 'song' | 'profile' | 'episode', Glyph> = {
+  playlist: RiMusic2Line,
+  album: RiMusic2Line,
+  song: RiMusic2Line,
+  artist: RiUserLine,
+  profile: RiUserLine,
+  podcast: RiMic2Line,
+  episode: RiMic2Line,
+  audiobook: RiBookOpenLine,
+  folder: RiFolderLine,
+};
+
+export interface CoverProps {
+  source?: string | null;
+  size: number;
+  round?: boolean;
+  radius?: number;
+  kind: keyof typeof KIND_GLYPH;
+  placeholder: string;
+  glyphColor: string;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+/** Artwork, decorative (the row names itself). A neutral tile with the kind's glyph when empty. */
+export function Cover({ source, size, round, radius = 4, kind, placeholder, glyphColor, style, testID }: CoverProps) {
+  const resolver = useImageResolver();
+  const [failed, setFailed] = useState(false);
+  const uri = source ? (isUrl(source) ? source : resolver?.(source) ?? undefined) : undefined;
+  const Glyph = KIND_GLYPH[kind];
+  const glyph = Math.round(size * 0.45);
+  return (
+    <View
+      testID={testID}
+      aria-hidden
+      style={[
+        {
+          width: size,
+          height: size,
+          borderRadius: round ? size / 2 : radius,
+          backgroundColor: placeholder,
+          overflow: 'hidden',
+          alignItems: 'center',
+          justifyContent: 'center',
+          flexShrink: 0,
+        },
+        style,
+      ]}
+    >
+      {uri && !failed ? (
+        <Image
+          source={{ uri }}
+          onError={() => setFailed(true)}
+          style={{ width: size, height: size }}
+          resizeMode="cover"
+        />
+      ) : (
+        <Glyph width={glyph} height={glyph} fill={glyphColor} />
+      )}
+    </View>
+  );
+}

package/src/music-library/GlyphButton.tsx

@@ -0,0 +1,67 @@
+import React, { useState } from 'react';
+import { Pressable } from 'react-native';
+
+import { webDataSet } from '../checkbox/shared';
+import { borderRadius } from '../styles/tokens';
+import type { WebCssStyle } from '../styles/web-view-style';
+
+/**
+ * The family's round glyph-only control: transparent (or `fill`) at rest,
+ * `hoverFill` under the pointer — a colour change only. With `pressedState` it
+ * is a toggle and carries `aria-pressed` (web) and `accessibilityState.selected`
+ * (native).
+ */
+export function GlyphButton({
+  label,
+  onPress,
+  size,
+  children,
+  fill,
+  hoverFill,
+  pressedState,
+  ring,
+  testID,
+  disabled,
+}: {
+  label: string;
+  onPress?: () => void;
+  size: number;
+  children: React.ReactNode;
+  fill: string;
+  hoverFill: string;
+  pressedState?: boolean;
+  ring: string;
+  testID?: string;
+  disabled?: boolean;
+}) {
+  const [hovered, setHovered] = useState(false);
+  const style: WebCssStyle = {
+    width: size,
+    height: size,
+    borderRadius: borderRadius.full,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: hovered ? hoverFill : fill,
+    '--bloom-music-ring': ring,
+  };
+  const toggle = pressedState !== undefined;
+  return (
+    <Pressable
+      {...webDataSet({ bloomMusicFocusable: '' })}
+      role="button"
+      accessibilityLabel={label}
+      aria-pressed={toggle ? pressedState : undefined}
+      accessibilityState={toggle ? { selected: pressedState } : undefined}
+      onPress={onPress}
+      disabled={disabled}
+      aria-disabled={disabled || undefined}
+      onHoverIn={() => setHovered(true)}
+      onHoverOut={() => setHovered(false)}
+      style={style}
+      testID={testID}
+    >
+      {children}
+    </Pressable>
+  );
+}
+

package/src/music-library/LibraryItem.tsx

@@ -0,0 +1,271 @@
+import React, { memo, useEffect, useMemo, useState } from 'react';
+import { Pressable, View, type ViewStyle } from 'react-native';
+
+import { webDataSet } from '../checkbox/shared';
+import { ContextMenu, ContextMenuContent, ContextMenuTrigger } from '../context-menu';
+import { RiArrowDownCircleFill } from '../icons/remix/RiArrowDownCircleFill';
+import { RiPushpinFill } from '../icons/remix/RiPushpinFill';
+import { NowPlayingIndicator } from '../media-controls';
+import { adoptStyleSheet } from '../styles/adopt-style-sheet';
+import type { WebCssStyle } from '../styles/web-view-style';
+import { useTheme } from '../theme/use-theme';
+import { Tooltip, TooltipTextBubble, TooltipTrigger } from '../tooltip';
+import { Text } from '../typography';
+import { Cover } from './Cover';
+import {
+  DEFAULT_KIND_LABELS,
+  IS_WEB,
+  MUSIC_LIBRARY_CSS,
+  MUSIC_LIBRARY_STYLE_ID,
+  libraryMeta,
+  resolveMusicLibraryPaint,
+} from './shared';
+import type { LibraryItemProps } from './types';
+
+/**
+ * One entry of Your Library.
+ *
+ *   list      8 padding · 48 cover · 12 · title body-medium over a caption meta
+ *             line ("Playlist · Maya") led by the pinned and downloaded glyphs
+ *             (14, accent) · the now-playing bars (14) on the right
+ *   compact   6/8 padding · title · meta on one line, no cover
+ *   grid      a tile: square cover filling the width · title · meta
+ *   rail      the 48 cover alone (the now-playing bars on its corner); on web a
+ *             tooltip names it on hover
+ *
+ * Covers are 4px rounded squares, circles for artists. Rows are 8px rounded;
+ * hover and press fill them (a colour change only), the open page keeps a
+ * stronger fill. The playing context's title turns accent.
+ *
+ * Accessibility: a `button` whose name is the whole row read aloud —
+ * "Night Drive, Playlist · Maya, Pinned, Downloaded, Now playing" — since the
+ * glyphs carry state no text does. The open page is `aria-current="page"` on
+ * web and `accessibilityState.selected` on native. With `contextMenu` the row
+ * is also a context-menu trigger (right-click / long press).
+ */
+
+const LIST_COVER = 48;
+const INLINE_GLYPH = 14;
+
+function LibraryItemComponent({
+  item,
+  variant = 'list',
+  selected = false,
+  nowPlaying = false,
+  paused = false,
+  onPress,
+  contextMenu,
+  kindLabels,
+  pinnedLabel = 'Pinned',
+  downloadedLabel = 'Downloaded',
+  nowPlayingLabel = 'Now playing',
+  style,
+  testID,
+}: LibraryItemProps) {
+  const theme = useTheme();
+  useEffect(() => {
+    adoptStyleSheet(MUSIC_LIBRARY_STYLE_ID, MUSIC_LIBRARY_CSS);
+  }, []);
+  const paint = useMemo(() => resolveMusicLibraryPaint(theme), [theme]);
+  const [hovered, setHovered] = useState(false);
+  const [pressed, setPressed] = useState(false);
+  const [tileWidth, setTileWidth] = useState(0);
+
+  const labels = useMemo(() => ({ ...DEFAULT_KIND_LABELS, ...kindLabels }), [kindLabels]);
+  const meta = libraryMeta(item, labels);
+  const round = item.kind === 'artist';
+  const name = [
+    item.title,
+    meta,
+    item.pinned ? pinnedLabel : null,
+    item.downloaded ? downloadedLabel : null,
+    nowPlaying ? nowPlayingLabel : null,
+  ]
+    .filter(Boolean)
+    .join(', ');
+
+  const fill = selected ? paint.selected : hovered || pressed ? paint.hover : 'transparent';
+  const titleColor = nowPlaying ? paint.accent : paint.text;
+
+  const flags =
+    item.pinned || item.downloaded ? (
+      <>
+        {item.pinned ? (
+          <RiPushpinFill width={INLINE_GLYPH} height={INLINE_GLYPH} fill={paint.accent} />
+        ) : null}
+        {item.downloaded ? (
+          <RiArrowDownCircleFill width={INLINE_GLYPH} height={INLINE_GLYPH} fill={paint.accent} />
+        ) : null}
+      </>
+    ) : null;
+
+  const indicator = nowPlaying ? (
+    <NowPlayingIndicator playing={!paused} size={14} label={nowPlayingLabel} />
+  ) : null;
+
+  const cover = (size: number) => (
+    <Cover
+      source={item.cover}
+      size={size}
+      round={round}
+      radius={variant === 'grid' ? 6 : 4}
+      kind={item.kind}
+      placeholder={paint.placeholder}
+      glyphColor={paint.textMuted}
+      testID={testID ? `${testID}-cover` : undefined}
+    />
+  );
+
+  let body: React.ReactNode;
+  const rowStyle: WebCssStyle = {
+    borderRadius: 8,
+    backgroundColor: fill,
+    '--bloom-music-ring': paint.ring,
+    ...(IS_WEB ? { transitionProperty: 'background-color', transitionDuration: '120ms' } : null),
+  };
+
+  if (variant === 'rail') {
+    Object.assign(rowStyle, { padding: 8, alignSelf: 'flex-start' } satisfies ViewStyle);
+    body = (
+      <>
+        {cover(LIST_COVER)}
+        {nowPlaying ? (
+          // The rail has no title to turn accent, so the bars sit on the cover's
+          // corner in a surface-coloured disc.
+          <View
+            style={{
+              position: 'absolute',
+              right: 10,
+              bottom: 10,
+              width: 24,
+              height: 24,
+              borderRadius: 12,
+              backgroundColor: paint.surface,
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}
+          >
+            {indicator}
+          </View>
+        ) : null}
+      </>
+    );
+  } else if (variant === 'grid') {
+    Object.assign(rowStyle, { padding: 8, gap: 8 } satisfies ViewStyle);
+    body = (
+      <>
+        <View
+          style={{ width: '100%', aspectRatio: 1 }}
+          onLayout={(event) => setTileWidth(Math.round(event.nativeEvent.layout.width))}
+        >
+          {tileWidth > 0 ? cover(tileWidth) : null}
+        </View>
+        <View style={{ gap: 2 }}>
+          <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
+            <Text variant="body-medium" numberOfLines={1} style={{ color: titleColor, flexShrink: 1 }}>
+              {item.title}
+            </Text>
+            {indicator}
+          </View>
+          <View style={{ flexDirection: 'row', alignItems: 'center', gap: 4 }}>
+            {flags}
+            <Text variant="caption-1-regular" numberOfLines={1} style={{ color: paint.textMuted, flexShrink: 1 }}>
+              {meta}
+            </Text>
+          </View>
+        </View>
+      </>
+    );
+  } else if (variant === 'compact') {
+    Object.assign(rowStyle, {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 6,
+      paddingTop: 6,
+      paddingBottom: 6,
+      paddingLeft: 8,
+      paddingRight: 8,
+    } satisfies ViewStyle);
+    body = (
+      <>
+        {flags}
+        <Text variant="body-medium" numberOfLines={1} style={{ color: titleColor, flexShrink: 1 }}>
+          {item.title}
+        </Text>
+        <Text variant="caption-1-regular" numberOfLines={1} style={{ color: paint.textMuted, flexShrink: 100 }}>
+          {`· ${meta}`}
+        </Text>
+        <View style={{ flexGrow: 1 }} />
+        {indicator}
+      </>
+    );
+  } else {
+    Object.assign(rowStyle, {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 12,
+      padding: 8,
+    } satisfies ViewStyle);
+    body = (
+      <>
+        {cover(LIST_COVER)}
+        <View style={{ flex: 1, minWidth: 0, gap: 2 }}>
+          <Text variant="body-medium" numberOfLines={1} style={{ color: titleColor }}>
+            {item.title}
+          </Text>
+          <View style={{ flexDirection: 'row', alignItems: 'center', gap: 4 }}>
+            {flags}
+            <Text variant="caption-1-regular" numberOfLines={1} style={{ color: paint.textMuted, flexShrink: 1 }}>
+              {meta}
+            </Text>
+          </View>
+        </View>
+        {indicator}
+      </>
+    );
+  }
+
+  let node = (
+    <Pressable
+      {...webDataSet({ bloomMusicFocusable: '', bloomLibraryItem: variant })}
+      {...(IS_WEB && selected ? { 'aria-current': 'page' } : null)}
+      role="button"
+      accessibilityLabel={name}
+      accessibilityState={{ selected }}
+      onPress={onPress ? () => onPress(item) : undefined}
+      onHoverIn={() => setHovered(true)}
+      onHoverOut={() => setHovered(false)}
+      onPressIn={() => setPressed(true)}
+      onPressOut={() => setPressed(false)}
+      style={[rowStyle, style]}
+      testID={testID}
+    >
+      {body}
+    </Pressable>
+  );
+
+  if (contextMenu) {
+    node = (
+      <ContextMenu>
+        <ContextMenuTrigger asChild style={{ alignSelf: variant === 'rail' ? 'flex-start' : 'stretch' }}>
+          {node}
+        </ContextMenuTrigger>
+        <ContextMenuContent label={item.title}>{contextMenu}</ContextMenuContent>
+      </ContextMenu>
+    );
+  }
+
+  if (variant === 'rail' && IS_WEB) {
+    return (
+      <Tooltip visible={hovered} onVisibleChange={setHovered} position="bottom">
+        <TooltipTrigger>{node}</TooltipTrigger>
+        <TooltipTextBubble>{`${item.title} · ${meta}`}</TooltipTextBubble>
+      </Tooltip>
+    );
+  }
+
+  return node;
+}
+
+export const LibraryItem = memo(LibraryItemComponent);
+LibraryItem.displayName = 'LibraryItem';