@oxy.so/bloom 2.8.0 → 2.10.0

package/lib/module/media-header/PodcastShowHeader.js

@@ -0,0 +1,243 @@
+"use strict";
+
+import React, { memo } from 'react';
+import { Pressable, View } from 'react-native';
+import { Chip } from "../chip/index.js";
+import { useInteractionState } from "../hooks/use-interaction-state.js";
+import { PlayButton } from "../media-controls/PlayButton.js";
+import { Rating } from "../rating/index.js";
+import { Text } from "../typography/index.js";
+import { FollowButton } from "./MediaActionBar.js";
+import { ClampedText, Cover, HeaderTitle, InlineLink, MediaHeaderFrame, useMediaHeaderPaint } from "./parts.js";
+import { selectTitleVariant, webData } from "./shared.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * The header of a podcast show.
+ *
+ *   band       cover 232 (narrow 200 centred), radius 12 · "Podcast" · title
+ *              (display steps) · publisher link (title-3-semibold)
+ *   below      rating · category chips · Follow pill · `actions`
+ *              description (clamped, "Show more") · "Latest episode" callout
+ *
+ * The callout is a card (radius 16) with the episode's date · duration, title,
+ * two lines of description and a small play button.
+ */
+
+function LatestEpisodeCard({
+  episode,
+  label,
+  paint,
+  testID
+}) {
+  const {
+    state: hovered,
+    onIn,
+    onOut
+  } = useInteractionState();
+  const card = {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 16,
+    padding: 16,
+    borderRadius: 16,
+    backgroundColor: hovered && episode.onPress ? paint.wash : paint.card,
+    '--bloom-media-header-ring': paint.ring
+  };
+  const meta = [episode.date, episode.duration].filter(Boolean).join(' · ');
+  const content = /*#__PURE__*/_jsxs(View, {
+    style: {
+      flex: 1,
+      minWidth: 0,
+      gap: 4
+    },
+    children: [/*#__PURE__*/_jsx(Text, {
+      variant: "caption-1-semibold",
+      style: {
+        color: paint.accent
+      },
+      children: label
+    }), /*#__PURE__*/_jsx(Text, {
+      variant: "headline-semibold",
+      numberOfLines: 2,
+      style: {
+        color: paint.text
+      },
+      children: episode.title
+    }), episode.description ? /*#__PURE__*/_jsx(Text, {
+      variant: "body-regular",
+      numberOfLines: 2,
+      style: {
+        color: paint.textMuted
+      },
+      children: episode.description
+    }) : null, meta ? /*#__PURE__*/_jsx(Text, {
+      variant: "body-2-medium",
+      style: {
+        color: paint.textMuted
+      },
+      children: meta
+    }) : null]
+  });
+  return /*#__PURE__*/_jsxs(View, {
+    style: {
+      position: 'relative'
+    },
+    testID: testID,
+    children: [episode.onPress ? /*#__PURE__*/_jsx(Pressable, {
+      ...webData({
+        bloomMediaHeaderPress: ''
+      }),
+      role: "button",
+      accessibilityLabel: `${label}: ${episode.title}`,
+      onPress: episode.onPress,
+      onHoverIn: onIn,
+      onHoverOut: onOut,
+      style: [card, {
+        paddingRight: episode.onPlayPress ? 80 : 16
+      }],
+      children: content
+    }) : /*#__PURE__*/_jsx(View, {
+      style: [card, {
+        paddingRight: episode.onPlayPress ? 80 : 16
+      }],
+      children: content
+    }), episode.onPlayPress ? /*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        right: 16,
+        top: 0,
+        bottom: 0,
+        justifyContent: 'center'
+      },
+      children: /*#__PURE__*/_jsx(PlayButton, {
+        playing: episode.playing ?? false,
+        onPress: episode.onPlayPress,
+        subject: episode.title,
+        testID: testID ? `${testID}-play` : undefined
+      })
+    }) : null]
+  });
+}
+function PodcastShowHeaderComponent({
+  title,
+  cover,
+  publisher,
+  onPublisherPress,
+  rating,
+  ratingCount,
+  categories,
+  onCategoryPress,
+  following = false,
+  onFollowChange,
+  description,
+  descriptionLines = 3,
+  latestEpisode,
+  typeLabel = 'Podcast',
+  latestEpisodeLabel = 'Latest episode',
+  showMoreLabel,
+  showLessLabel,
+  artworkColor,
+  actions,
+  headingLevel = 1,
+  style,
+  testID
+}) {
+  const paint = useMediaHeaderPaint(artworkColor);
+  const hasRatingRow = rating !== undefined || categories && categories.length > 0 || onFollowChange;
+  const below = /*#__PURE__*/_jsxs(View, {
+    style: {
+      gap: 16
+    },
+    children: [hasRatingRow ? /*#__PURE__*/_jsxs(View, {
+      style: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        alignItems: 'center',
+        gap: 8
+      },
+      children: [rating !== undefined ? /*#__PURE__*/_jsx(Rating, {
+        value: rating,
+        count: ratingCount,
+        testID: testID ? `${testID}-rating` : undefined
+      }) : null, (categories ?? []).map(category => /*#__PURE__*/_jsx(Chip, {
+        size: "small",
+        variant: "outlined",
+        color: "default",
+        onPress: onCategoryPress ? () => onCategoryPress(category) : undefined,
+        accessibilityLabel: category,
+        children: category
+      }, category)), onFollowChange ? /*#__PURE__*/_jsx(FollowButton, {
+        following: following,
+        onFollowChange: onFollowChange,
+        style: {
+          marginLeft: 4
+        },
+        testID: testID ? `${testID}-follow` : undefined
+      }) : null]
+    }) : null, actions, description ? /*#__PURE__*/_jsx(ClampedText, {
+      lines: descriptionLines,
+      color: paint.text,
+      linkColor: paint.text,
+      ring: paint.ring,
+      showMoreLabel: showMoreLabel,
+      showLessLabel: showLessLabel,
+      testID: testID ? `${testID}-description` : undefined,
+      children: description
+    }) : null, latestEpisode ? /*#__PURE__*/_jsx(LatestEpisodeCard, {
+      episode: latestEpisode,
+      label: latestEpisodeLabel,
+      paint: paint,
+      testID: testID ? `${testID}-latest` : undefined
+    }) : null]
+  });
+  return /*#__PURE__*/_jsx(MediaHeaderFrame, {
+    paint: paint,
+    style: style,
+    testID: testID,
+    actions: below,
+    coverWidth: wide => wide ? 232 : 200,
+    cover: ({
+      wide
+    }) => /*#__PURE__*/_jsx(Cover, {
+      source: cover,
+      size: wide ? 232 : 200,
+      radius: 12,
+      paint: paint,
+      testID: testID ? `${testID}-cover` : undefined
+    }),
+    children: ({
+      textWidth
+    }) => /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(Text, {
+        variant: "body-medium",
+        style: {
+          color: paint.onBand
+        },
+        children: typeLabel
+      }), /*#__PURE__*/_jsx(HeaderTitle, {
+        variant: selectTitleVariant(title, textWidth),
+        color: paint.onBand,
+        level: headingLevel,
+        numberOfLines: 3,
+        testID: testID ? `${testID}-title` : undefined,
+        children: title
+      }), publisher ? /*#__PURE__*/_jsx(View, {
+        style: {
+          flexDirection: 'row',
+          marginTop: 4
+        },
+        children: /*#__PURE__*/_jsx(InlineLink, {
+          label: publisher,
+          onPress: onPublisherPress,
+          color: paint.onBand,
+          variant: "title-3-semibold",
+          ring: paint.ring,
+          testID: testID ? `${testID}-publisher` : undefined
+        })
+      }) : null]
+    })
+  });
+}
+export const PodcastShowHeader = /*#__PURE__*/memo(PodcastShowHeaderComponent);
+PodcastShowHeader.displayName = 'PodcastShowHeader';
+//# sourceMappingURL=PodcastShowHeader.js.map

package/lib/module/media-header/PodcastShowHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","memo","Pressable","View","Chip","useInteractionState","PlayButton","Rating","Text","FollowButton","ClampedText","Cover","HeaderTitle","InlineLink","MediaHeaderFrame","useMediaHeaderPaint","selectTitleVariant","webData","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","LatestEpisodeCard","episode","label","paint","testID","state","hovered","onIn","onOut","card","flexDirection","alignItems","gap","padding","borderRadius","backgroundColor","onPress","wash","ring","meta","date","duration","filter","Boolean","join","content","style","flex","minWidth","children","variant","color","accent","numberOfLines","text","title","description","textMuted","position","bloomMediaHeaderPress","role","accessibilityLabel","onHoverIn","onHoverOut","paddingRight","onPlayPress","right","top","bottom","justifyContent","playing","subject","undefined","PodcastShowHeaderComponent","cover","publisher","onPublisherPress","rating","ratingCount","categories","onCategoryPress","following","onFollowChange","descriptionLines","latestEpisode","typeLabel","latestEpisodeLabel","showMoreLabel","showLessLabel","artworkColor","actions","headingLevel","hasRatingRow","length","below","flexWrap","value","count","map","category","size","marginLeft","lines","linkColor","coverWidth","wide","source","radius","textWidth","onBand","level","marginTop","PodcastShowHeader","displayName"],"sourceRoot":"../../../src","sources":["media-header/PodcastShowHeader.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/media-header/PopularTracks.js

@@ -0,0 +1,238 @@
+"use strict";
+
+import React, { memo, useState } from 'react';
+import { Image, Pressable, View } from 'react-native';
+import { useInteractionState } from "../hooks/use-interaction-state.js";
+import { RiMusic2Line } from "../icons/remix/RiMusic2Line.js";
+import { ExplicitBadge } from "../media-controls/ExplicitBadge.js";
+import { NowPlayingIndicator } from "../media-controls/NowPlayingIndicator.js";
+import { Text } from "../typography/index.js";
+import { useImageUri, useMediaHeaderPaint } from "./parts.js";
+import { webData } from "./shared.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * An artist's most played tracks: five rows, "See more" shows ten.
+ *
+ *   row        56 high, radius 6, hover wash
+ *   index      body-medium muted, 24 wide; the current track shows the
+ *              now-playing bars instead
+ *   image      40, radius 4
+ *   title      body-medium (accent when current) + explicit badge
+ *   plays      body-regular muted — hidden under 480 wide
+ *   duration   body-regular muted, tabular
+ *
+ * Each row is a button named by its title. The rows are internal to this part;
+ * a full track list belongs to its own family.
+ */
+
+function TrackRow({
+  track,
+  index,
+  active,
+  playing,
+  compact,
+  paint,
+  onPress
+}) {
+  const {
+    state: hovered,
+    onIn,
+    onOut
+  } = useInteractionState();
+  const uri = useImageUri(track.image, 'thumb');
+  const row = {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 12,
+    height: 56,
+    paddingLeft: 12,
+    paddingRight: 12,
+    borderRadius: 6,
+    backgroundColor: hovered ? paint.wash : 'transparent',
+    '--bloom-media-header-ring': paint.ring
+  };
+  return /*#__PURE__*/_jsxs(Pressable, {
+    ...webData({
+      bloomMediaHeaderPress: 'inset'
+    }),
+    role: "button",
+    accessibilityLabel: track.title,
+    "aria-current": active || undefined,
+    onPress: onPress,
+    onHoverIn: onIn,
+    onHoverOut: onOut,
+    style: row,
+    children: [/*#__PURE__*/_jsx(View, {
+      style: {
+        width: 24,
+        alignItems: 'center'
+      },
+      children: active ? /*#__PURE__*/_jsx(NowPlayingIndicator, {
+        playing: playing,
+        size: 14
+      }) : /*#__PURE__*/_jsx(Text, {
+        variant: "body-medium",
+        style: {
+          color: paint.textMuted,
+          fontVariant: ['tabular-nums']
+        },
+        children: String(index + 1)
+      })
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        width: 40,
+        height: 40,
+        borderRadius: 4,
+        overflow: 'hidden',
+        backgroundColor: paint.placeholder,
+        alignItems: 'center',
+        justifyContent: 'center'
+      },
+      children: uri ? /*#__PURE__*/_jsx(Image, {
+        source: {
+          uri
+        },
+        style: {
+          width: 40,
+          height: 40
+        }
+      }) : /*#__PURE__*/_jsx(RiMusic2Line, {
+        width: 18,
+        height: 18,
+        fill: paint.placeholderGlyph
+      })
+    }), /*#__PURE__*/_jsxs(View, {
+      style: {
+        flex: 1,
+        minWidth: 0,
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 6
+      },
+      children: [/*#__PURE__*/_jsx(Text, {
+        variant: "body-medium",
+        numberOfLines: 1,
+        style: {
+          flexShrink: 1,
+          color: active ? paint.accent : paint.text
+        },
+        children: track.title
+      }), track.explicit ? /*#__PURE__*/_jsx(ExplicitBadge, {
+        size: "small"
+      }) : null]
+    }), track.plays && !compact ? /*#__PURE__*/_jsx(Text, {
+      variant: "body-regular",
+      numberOfLines: 1,
+      style: {
+        width: 120,
+        textAlign: 'right',
+        color: paint.textMuted
+      },
+      children: track.plays
+    }) : null, track.duration ? /*#__PURE__*/_jsx(Text, {
+      variant: "body-regular",
+      style: {
+        minWidth: 44,
+        textAlign: 'right',
+        color: paint.textMuted,
+        fontVariant: ['tabular-nums']
+      },
+      children: track.duration
+    }) : null]
+  });
+}
+function PopularTracksComponent({
+  tracks,
+  title = 'Popular',
+  collapsedCount = 5,
+  expandedCount = 10,
+  expanded: expandedProp,
+  onExpandedChange,
+  showMoreLabel = 'See more',
+  showLessLabel = 'Show less',
+  activeTrackId,
+  playing = false,
+  onTrackPress,
+  style,
+  testID
+}) {
+  const paint = useMediaHeaderPaint();
+  const [expandedState, setExpandedState] = useState(false);
+  const expanded = expandedProp ?? expandedState;
+  const [width, setWidth] = useState(720);
+  const {
+    state: hovered,
+    onIn,
+    onOut
+  } = useInteractionState();
+  const shown = tracks.slice(0, expanded ? expandedCount : collapsedCount);
+  const canExpand = tracks.length > collapsedCount;
+  const toggle = () => {
+    const next = !expanded;
+    if (expandedProp === undefined) setExpandedState(next);
+    onExpandedChange?.(next);
+  };
+  const toggleStyle = {
+    alignSelf: 'flex-start',
+    marginLeft: 12,
+    marginTop: 8,
+    borderRadius: 4,
+    '--bloom-media-header-ring': paint.ring
+  };
+  return /*#__PURE__*/_jsxs(View, {
+    style: [{
+      gap: 8
+    }, style],
+    onLayout: e => setWidth(Math.round(e.nativeEvent.layout.width)),
+    testID: testID,
+    children: [/*#__PURE__*/_jsx(Text, {
+      variant: "title-1-bold",
+      role: "heading",
+      "aria-level": 2,
+      style: {
+        color: paint.text
+      },
+      children: title
+    }), /*#__PURE__*/_jsx(View, {
+      role: "list",
+      children: shown.map((track, i) => /*#__PURE__*/_jsx(View, {
+        role: "listitem",
+        testID: testID ? `${testID}-row-${i}` : undefined,
+        children: /*#__PURE__*/_jsx(TrackRow, {
+          track: track,
+          index: i,
+          active: track.id === activeTrackId,
+          playing: playing,
+          compact: width < 480,
+          paint: paint,
+          onPress: onTrackPress ? () => onTrackPress(track, i) : undefined
+        })
+      }, track.id))
+    }), canExpand ? /*#__PURE__*/_jsx(Pressable, {
+      ...webData({
+        bloomMediaHeaderPress: ''
+      }),
+      role: "button",
+      accessibilityLabel: expanded ? showLessLabel : showMoreLabel,
+      "aria-expanded": expanded,
+      accessibilityState: {
+        expanded
+      },
+      onPress: toggle,
+      onHoverIn: onIn,
+      onHoverOut: onOut,
+      style: toggleStyle,
+      testID: testID ? `${testID}-toggle` : undefined,
+      children: /*#__PURE__*/_jsx(Text, {
+        variant: "body-semibold",
+        style: {
+          color: hovered ? paint.text : paint.textMuted
+        },
+        children: expanded ? showLessLabel : showMoreLabel
+      })
+    }) : null]
+  });
+}
+export const PopularTracks = /*#__PURE__*/memo(PopularTracksComponent);
+PopularTracks.displayName = 'PopularTracks';
+//# sourceMappingURL=PopularTracks.js.map

package/lib/module/media-header/PopularTracks.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","memo","useState","Image","Pressable","View","useInteractionState","RiMusic2Line","ExplicitBadge","NowPlayingIndicator","Text","useImageUri","useMediaHeaderPaint","webData","jsx","_jsx","jsxs","_jsxs","TrackRow","track","index","active","playing","compact","paint","onPress","state","hovered","onIn","onOut","uri","image","row","flexDirection","alignItems","gap","height","paddingLeft","paddingRight","borderRadius","backgroundColor","wash","ring","bloomMediaHeaderPress","role","accessibilityLabel","title","undefined","onHoverIn","onHoverOut","style","children","width","size","variant","color","textMuted","fontVariant","String","overflow","placeholder","justifyContent","source","fill","placeholderGlyph","flex","minWidth","numberOfLines","flexShrink","accent","text","explicit","plays","textAlign","duration","PopularTracksComponent","tracks","collapsedCount","expandedCount","expanded","expandedProp","onExpandedChange","showMoreLabel","showLessLabel","activeTrackId","onTrackPress","testID","expandedState","setExpandedState","setWidth","shown","slice","canExpand","length","toggle","next","toggleStyle","alignSelf","marginLeft","marginTop","onLayout","e","Math","round","nativeEvent","layout","map","i","id","accessibilityState","PopularTracks","displayName"],"sourceRoot":"../../../src","sources":["media-header/PopularTracks.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/media-header/ProfileHeader.js

@@ -0,0 +1,118 @@
+"use strict";
+
+import React, { memo } from 'react';
+import { View } from 'react-native';
+import { Button } from '../button';
+import { Text } from "../typography/index.js";
+import { FollowButton, MediaMoreButton } from "./MediaActionBar.js";
+import { Cover, Dot, HeaderTitle, InlineLink, MediaHeaderFrame, useMediaHeaderPaint } from "./parts.js";
+import { selectTitleVariant } from "./shared.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * A listener's profile.
+ *
+ *   band     round avatar 232 (narrow 160 centred) · "Profile" · name (display
+ *            steps) · counts: "12 public playlists • 48 followers • 30 following",
+ *            each a link when it has `onPress`
+ *   row      Follow pill (another listener) or "Edit profile" (your own) · more
+ */
+
+function ProfileHeaderComponent({
+  name,
+  avatar,
+  typeLabel = 'Profile',
+  stats,
+  following = false,
+  onFollowChange,
+  onEditPress,
+  editLabel = 'Edit profile',
+  onMorePress,
+  artworkColor,
+  actions,
+  headingLevel = 1,
+  style,
+  testID
+}) {
+  const paint = useMediaHeaderPaint(artworkColor);
+  const hasRow = onFollowChange || onEditPress || onMorePress || actions;
+  const row = hasRow ? /*#__PURE__*/_jsxs(View, {
+    style: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 12,
+      flexWrap: 'wrap'
+    },
+    children: [onFollowChange ? /*#__PURE__*/_jsx(FollowButton, {
+      following: following,
+      onFollowChange: onFollowChange,
+      size: "medium",
+      testID: testID ? `${testID}-follow` : undefined
+    }) : null, onEditPress ? /*#__PURE__*/_jsx(Button, {
+      variant: "secondary",
+      size: "medium",
+      onPress: onEditPress,
+      testID: testID ? `${testID}-edit` : undefined,
+      children: editLabel
+    }) : null, onMorePress ? /*#__PURE__*/_jsx(MediaMoreButton, {
+      onPress: onMorePress,
+      testID: testID ? `${testID}-more` : undefined
+    }) : null, actions]
+  }) : undefined;
+  return /*#__PURE__*/_jsx(MediaHeaderFrame, {
+    paint: paint,
+    style: style,
+    testID: testID,
+    actions: row,
+    coverWidth: wide => wide ? 232 : 160,
+    cover: ({
+      wide
+    }) => /*#__PURE__*/_jsx(Cover, {
+      source: avatar,
+      size: wide ? 232 : 160,
+      shape: "round",
+      paint: paint,
+      testID: testID ? `${testID}-avatar` : undefined
+    }),
+    children: ({
+      textWidth
+    }) => /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(Text, {
+        variant: "body-medium",
+        style: {
+          color: paint.onBand
+        },
+        children: typeLabel
+      }), /*#__PURE__*/_jsx(HeaderTitle, {
+        variant: selectTitleVariant(name, textWidth),
+        color: paint.onBand,
+        level: headingLevel,
+        numberOfLines: 2,
+        testID: testID ? `${testID}-name` : undefined,
+        children: name
+      }), stats && stats.length > 0 ? /*#__PURE__*/_jsx(View, {
+        style: {
+          flexDirection: 'row',
+          flexWrap: 'wrap',
+          alignItems: 'center',
+          columnGap: 4,
+          marginTop: 4
+        },
+        testID: testID ? `${testID}-stats` : undefined,
+        children: stats.map((stat, i) => /*#__PURE__*/_jsxs(React.Fragment, {
+          children: [i > 0 ? /*#__PURE__*/_jsx(Dot, {
+            color: paint.onBandMuted
+          }) : null, /*#__PURE__*/_jsx(InlineLink, {
+            label: stat.label,
+            onPress: stat.onPress,
+            color: stat.onPress ? paint.onBand : paint.onBandMuted,
+            variant: "body-medium",
+            ring: paint.ring
+          })]
+        }, `${stat.label}-${i}`))
+      }) : null]
+    })
+  });
+}
+export const ProfileHeader = /*#__PURE__*/memo(ProfileHeaderComponent);
+ProfileHeader.displayName = 'ProfileHeader';
+//# sourceMappingURL=ProfileHeader.js.map

package/lib/module/media-header/ProfileHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","memo","View","Button","Text","FollowButton","MediaMoreButton","Cover","Dot","HeaderTitle","InlineLink","MediaHeaderFrame","useMediaHeaderPaint","selectTitleVariant","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","ProfileHeaderComponent","name","avatar","typeLabel","stats","following","onFollowChange","onEditPress","editLabel","onMorePress","artworkColor","actions","headingLevel","style","testID","paint","hasRow","row","flexDirection","alignItems","gap","flexWrap","children","size","undefined","variant","onPress","coverWidth","wide","cover","source","shape","textWidth","color","onBand","level","numberOfLines","length","columnGap","marginTop","map","stat","i","onBandMuted","label","ring","ProfileHeader","displayName"],"sourceRoot":"../../../src","sources":["media-header/ProfileHeader.tsx"],"mappings":"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","ignoreList":[]}