@oxy.so/bloom 2.9.0 → 2.11.0

package/lib/module/media-card/FriendActivityCard.js

@@ -0,0 +1,228 @@
+"use strict";
+
+import React, { memo, useMemo } from 'react';
+import { View } from 'react-native';
+import { RiDiscFill } from "../icons/remix/RiDiscFill.js";
+import { RiMusic2Fill } from "../icons/remix/RiMusic2Fill.js";
+import { RiUser3Fill } from "../icons/remix/RiUser3Fill.js";
+import { NowPlayingIndicator } from "../media-controls/index.js";
+import { Box as SkeletonBox, Circle as SkeletonCircle } from "../skeleton/index.js";
+import { borderRadius } from "../styles/tokens.js";
+import { webDataSet } from "../styles/web-data.js";
+import { useTheme } from "../theme/use-theme.js";
+import { Text } from "../typography/index.js";
+import { Artwork, CardLink, useMediaCardCss } from "./parts.js";
+import { composeName, resolveMediaCardPaint, ROW_PADDING, ROW_RADIUS } from "./shared.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const AVATAR = 40;
+const DOT = 12;
+
+/**
+ * What a friend is listening to.
+ *
+ *   avatar   40 round; `live` adds a 12 accent dot ringed 2px in the page
+ *            colour at its bottom-right
+ *   line 1   the name (body-semibold) · right: the relative `time`, or — live —
+ *            the moving now-playing bars
+ *   line 2   "Track — Artist" (body-2-regular)
+ *   line 3   a note (playlist) or disc (album) glyph and the context (caption)
+ *
+ * A row with the same wash, padding and link-under-content as the other cards.
+ *
+ * Name: "Maya Ortiz, Listening now, Night Drive by Mara Vell, Late Hours".
+ */
+function FriendActivityCardComponent({
+  name,
+  avatar,
+  track,
+  artist,
+  context,
+  contextType = 'playlist',
+  live = false,
+  time,
+  liveLabel = 'Listening now',
+  onPress,
+  href,
+  selected = false,
+  skeleton = false,
+  accessibilityLabel,
+  style,
+  testID
+}) {
+  const theme = useTheme();
+  useMediaCardCss();
+  const paint = useMemo(() => resolveMediaCardPaint(theme), [theme]);
+  if (skeleton) {
+    return /*#__PURE__*/_jsxs(View, {
+      "aria-busy": true,
+      accessibilityLabel: "Loading",
+      style: [{
+        flexDirection: 'row',
+        gap: 12,
+        padding: ROW_PADDING
+      }, style],
+      testID: testID,
+      children: [/*#__PURE__*/_jsx(SkeletonCircle, {
+        size: AVATAR
+      }), /*#__PURE__*/_jsxs(View, {
+        style: {
+          flex: 1,
+          gap: 8,
+          justifyContent: 'center'
+        },
+        children: [/*#__PURE__*/_jsx(SkeletonBox, {
+          width: "35%",
+          height: 12,
+          borderRadius: 4
+        }), /*#__PURE__*/_jsx(SkeletonBox, {
+          width: "60%",
+          height: 10,
+          borderRadius: 4
+        })]
+      })]
+    });
+  }
+  const label = accessibilityLabel ?? composeName([name, live ? liveLabel : time, `${track} by ${artist}`, context]);
+  const ContextGlyph = contextType === 'album' ? RiDiscFill : RiMusic2Fill;
+  const rootStyle = {
+    position: 'relative',
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    gap: 12,
+    paddingLeft: ROW_PADDING,
+    paddingRight: ROW_PADDING,
+    paddingTop: ROW_PADDING,
+    paddingBottom: ROW_PADDING,
+    borderRadius: ROW_RADIUS,
+    backgroundColor: selected ? paint.selected : undefined,
+    '--bloom-media-card-hover': selected ? paint.selectedHover : paint.hover
+  };
+  return /*#__PURE__*/_jsxs(View, {
+    ...webDataSet({
+      bloomMediaCard: 'activity',
+      ...(onPress || href ? {
+        bloomMediaCardHover: ''
+      } : null)
+    }),
+    style: [rootStyle, style],
+    testID: testID,
+    children: [/*#__PURE__*/_jsx(CardLink, {
+      name: label,
+      onPress: onPress,
+      href: href,
+      selected: selected,
+      radius: ROW_RADIUS,
+      paint: paint,
+      testID: testID
+    }), /*#__PURE__*/_jsxs(View, {
+      pointerEvents: "none",
+      style: {
+        width: AVATAR,
+        height: AVATAR
+      },
+      children: [/*#__PURE__*/_jsx(Artwork, {
+        source: avatar,
+        width: AVATAR,
+        height: AVATAR,
+        round: true,
+        radius: 0,
+        icon: RiUser3Fill,
+        paint: paint
+      }), live ? /*#__PURE__*/_jsx(View, {
+        testID: testID ? `${testID}-live-dot` : undefined,
+        style: {
+          position: 'absolute',
+          right: -2,
+          bottom: -2,
+          width: DOT + 4,
+          height: DOT + 4,
+          borderRadius: borderRadius.full,
+          backgroundColor: paint.surface,
+          alignItems: 'center',
+          justifyContent: 'center'
+        },
+        children: /*#__PURE__*/_jsx(View, {
+          style: {
+            width: DOT,
+            height: DOT,
+            borderRadius: borderRadius.full,
+            backgroundColor: paint.accent
+          }
+        })
+      }) : null]
+    }), /*#__PURE__*/_jsxs(View, {
+      pointerEvents: "none",
+      style: {
+        flex: 1,
+        minWidth: 0,
+        gap: 2
+      },
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: {
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap: 8
+        },
+        children: [/*#__PURE__*/_jsx(Text, {
+          variant: "body-semibold",
+          numberOfLines: 1,
+          style: {
+            flex: 1,
+            minWidth: 0,
+            color: paint.text
+          },
+          children: name
+        }), live ? /*#__PURE__*/_jsx(NowPlayingIndicator, {
+          size: 12,
+          label: liveLabel,
+          testID: testID ? `${testID}-live` : undefined
+        }) : time ? /*#__PURE__*/_jsx(Text, {
+          variant: "caption-1-regular",
+          numberOfLines: 1,
+          style: {
+            color: paint.textSecondary
+          },
+          children: time
+        }) : null]
+      }), /*#__PURE__*/_jsxs(Text, {
+        variant: "body-2-regular",
+        numberOfLines: 1,
+        style: {
+          color: paint.textSecondary
+        },
+        children: [/*#__PURE__*/_jsx(Text, {
+          variant: "body-2-medium",
+          style: {
+            color: paint.text
+          },
+          children: track
+        }), ` — ${artist}`]
+      }), context ? /*#__PURE__*/_jsxs(View, {
+        style: {
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap: 4
+        },
+        children: [/*#__PURE__*/_jsx(View, {
+          "aria-hidden": true,
+          children: /*#__PURE__*/_jsx(ContextGlyph, {
+            width: 12,
+            height: 12,
+            fill: paint.textSecondary
+          })
+        }), /*#__PURE__*/_jsx(Text, {
+          variant: "caption-1-regular",
+          numberOfLines: 1,
+          style: {
+            flexShrink: 1,
+            color: paint.textSecondary
+          },
+          children: context
+        })]
+      }) : null]
+    })]
+  });
+}
+export const FriendActivityCard = /*#__PURE__*/memo(FriendActivityCardComponent);
+FriendActivityCard.displayName = 'FriendActivityCard';
+//# sourceMappingURL=FriendActivityCard.js.map

package/lib/module/media-card/FriendActivityCard.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","memo","useMemo","View","RiDiscFill","RiMusic2Fill","RiUser3Fill","NowPlayingIndicator","Box","SkeletonBox","Circle","SkeletonCircle","borderRadius","webDataSet","useTheme","Text","Artwork","CardLink","useMediaCardCss","composeName","resolveMediaCardPaint","ROW_PADDING","ROW_RADIUS","jsx","_jsx","jsxs","_jsxs","AVATAR","DOT","FriendActivityCardComponent","name","avatar","track","artist","context","contextType","live","time","liveLabel","onPress","href","selected","skeleton","accessibilityLabel","style","testID","theme","paint","flexDirection","gap","padding","children","size","flex","justifyContent","width","height","label","ContextGlyph","rootStyle","position","alignItems","paddingLeft","paddingRight","paddingTop","paddingBottom","backgroundColor","undefined","selectedHover","hover","bloomMediaCard","bloomMediaCardHover","radius","pointerEvents","source","round","icon","right","bottom","full","surface","accent","minWidth","variant","numberOfLines","color","text","textSecondary","fill","flexShrink","FriendActivityCard","displayName"],"sourceRoot":"../../../src","sources":["media-card/FriendActivityCard.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/media-card/GenreCard.js

@@ -0,0 +1,142 @@
+"use strict";
+
+import React, { memo, useMemo } from 'react';
+import { Image, View } from 'react-native';
+import { useImageResolver } from "../image-resolver/context.js";
+import { Box as SkeletonBox } from "../skeleton/index.js";
+import { webDataSet } from "../styles/web-data.js";
+import { useTheme } from "../theme/use-theme.js";
+import { Text } from "../typography/index.js";
+import { mixColor } from "../button/shared.js";
+import { CardLink, useMediaCardCss } from "./parts.js";
+import { GENRE_ARTWORK_ROTATION, GENRE_RADIUS, resolveArtworkUri, resolveCoverTint, resolveMediaCardPaint, TILE_ARTWORK } from "./shared.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const TITLE = {
+  large: 'title-2-bold',
+  medium: 'title-3-bold',
+  small: 'headline-bold'
+};
+/** The peeking cover's side. */
+export const GENRE_PEEK = {
+  large: 96,
+  medium: 80,
+  small: 60
+};
+
+/**
+ * A browse category: a solid tile (radius 8) in `color` — stepped down its own
+ * ramp until the bold light title clears 4.5:1, neutral without a colour — the
+ * title top-left, and a cover rotated 25° peeking out of the bottom-right
+ * corner, clipped by the tile. Square at 200 / 160 / 120; pass
+ * `style={{ width: '100%' }}` in a grid (the tile keeps its 1:1 ratio).
+ * Hover (web) mixes 12% black-side of the ramp in — colour only.
+ *
+ * Name: the title.
+ */
+function GenreCardComponent({
+  title,
+  color,
+  artwork,
+  artworkVariant,
+  size = 'medium',
+  onPress,
+  href,
+  skeleton = false,
+  accessibilityLabel,
+  style,
+  testID
+}) {
+  const theme = useTheme();
+  useMediaCardCss();
+  const resolver = useImageResolver();
+  const paint = useMemo(() => resolveMediaCardPaint(theme), [theme]);
+  const tint = useMemo(() => resolveCoverTint(theme, color), [theme, color]);
+  const side = TILE_ARTWORK[size];
+  const peek = GENRE_PEEK[size];
+  const pad = size === 'small' ? 12 : 16;
+  if (skeleton) {
+    return /*#__PURE__*/_jsx(View, {
+      "aria-busy": true,
+      accessibilityLabel: "Loading",
+      style: [{
+        width: side,
+        aspectRatio: 1
+      }, style],
+      testID: testID,
+      children: /*#__PURE__*/_jsx(SkeletonBox, {
+        width: "100%",
+        height: "100%",
+        borderRadius: GENRE_RADIUS
+      })
+    });
+  }
+  const uri = resolveArtworkUri(artwork, resolver, artworkVariant);
+  const rootStyle = {
+    position: 'relative',
+    width: side,
+    aspectRatio: 1,
+    borderRadius: GENRE_RADIUS,
+    overflow: 'hidden',
+    backgroundColor: tint.top,
+    '--bloom-media-card-hover': mixColor(tint.top, tint.bottom, 0.5)
+  };
+  return /*#__PURE__*/_jsxs(View, {
+    ...webDataSet({
+      bloomMediaCard: 'genre',
+      ...(onPress || href ? {
+        bloomMediaCardHover: ''
+      } : null)
+    }),
+    style: [rootStyle, style],
+    testID: testID,
+    children: [/*#__PURE__*/_jsx(CardLink, {
+      name: accessibilityLabel ?? title,
+      onPress: onPress,
+      href: href,
+      radius: GENRE_RADIUS,
+      paint: paint,
+      testID: testID
+    }), /*#__PURE__*/_jsxs(View, {
+      pointerEvents: "none",
+      style: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0
+      },
+      children: [/*#__PURE__*/_jsx(Text, {
+        variant: TITLE[size],
+        numberOfLines: 2,
+        style: {
+          position: 'absolute',
+          top: pad,
+          left: pad,
+          right: pad,
+          color: tint.text
+        },
+        children: title
+      }), uri ? /*#__PURE__*/_jsx(Image, {
+        source: {
+          uri
+        },
+        resizeMode: "cover",
+        testID: testID ? `${testID}-artwork` : undefined,
+        style: {
+          position: 'absolute',
+          width: peek,
+          height: peek,
+          right: -Math.round(peek * 0.18),
+          bottom: -Math.round(peek * 0.06),
+          borderRadius: 4,
+          transform: [{
+            rotate: `${GENRE_ARTWORK_ROTATION}deg`
+          }]
+        }
+      }) : null]
+    })]
+  });
+}
+export const GenreCard = /*#__PURE__*/memo(GenreCardComponent);
+GenreCard.displayName = 'GenreCard';
+//# sourceMappingURL=GenreCard.js.map

package/lib/module/media-card/GenreCard.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","memo","useMemo","Image","View","useImageResolver","Box","SkeletonBox","webDataSet","useTheme","Text","mixColor","CardLink","useMediaCardCss","GENRE_ARTWORK_ROTATION","GENRE_RADIUS","resolveArtworkUri","resolveCoverTint","resolveMediaCardPaint","TILE_ARTWORK","jsx","_jsx","jsxs","_jsxs","TITLE","large","medium","small","GENRE_PEEK","GenreCardComponent","title","color","artwork","artworkVariant","size","onPress","href","skeleton","accessibilityLabel","style","testID","theme","resolver","paint","tint","side","peek","pad","width","aspectRatio","children","height","borderRadius","uri","rootStyle","position","overflow","backgroundColor","top","bottom","bloomMediaCard","bloomMediaCardHover","name","radius","pointerEvents","left","right","variant","numberOfLines","text","source","resizeMode","undefined","Math","round","transform","rotate","GenreCard","displayName"],"sourceRoot":"../../../src","sources":["media-card/GenreCard.tsx"],"mappings":"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","ignoreList":[]}