@oxy.so/bloom 2.8.0 → 2.10.0

package/lib/module/media-player/MiniPlayer.js

@@ -0,0 +1,238 @@
+"use strict";
+
+import React, { memo, useContext, useMemo, useRef } from 'react';
+import { PanResponder, Pressable, View } from 'react-native';
+import { mixColor, resolveButtonRamps } from "../button/shared.js";
+import { webDataSet } from "../checkbox/shared.js";
+import { LikeButton } from "../media-controls/LikeButton.js";
+import { PlayButton } from "../media-controls/PlayButton.js";
+import { clamp, resolveMediaControlsPaint } from "../media-controls/shared.js";
+import { resolveMenuPalette } from "../floating/menu-palette.js";
+import { useTheme } from "../theme/use-theme.js";
+import { Text } from "../typography/index.js";
+import { BloomThemeContext } from "../theme/BloomThemeProvider.js";
+import { DEVICE_GLYPHS } from "./device-icons.js";
+import { ImmersiveTheme, immersiveDarkTheme } from "./ImmersiveTheme.js";
+import { Artwork } from "./TrackText.js";
+import { artistNames, IS_WEB, resolveArtworkTint } from "./shared.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+export const MINI_PLAYER_HEIGHT = 56;
+/** Horizontal travel that counts as a swipe (native). */
+export const MINI_PLAYER_SWIPE = 48;
+/**
+ * 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, preset, artworkColor) {
+  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
+}) {
+  const theme = useTheme();
+  const paint = useMemo(() => resolveMediaControlsPaint(theme), [theme]);
+  const {
+    accent
+  } = useMemo(() => resolveButtonRamps(theme), [theme]);
+  const id = part => 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 /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs(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'),
+      children: [/*#__PURE__*/_jsx(Artwork, {
+        source: track.artwork,
+        size: 40,
+        radius: 8
+      }), /*#__PURE__*/_jsxs(View, {
+        style: {
+          flex: 1,
+          minWidth: 0
+        },
+        children: [/*#__PURE__*/_jsx(Text, {
+          variant: "body-2-semibold",
+          numberOfLines: 1,
+          style: {
+            color: paint.text
+          },
+          children: track.title
+        }), /*#__PURE__*/_jsxs(View, {
+          style: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: 4,
+            minWidth: 0
+          },
+          children: [deviceName ? /*#__PURE__*/_jsx(View, {
+            pointerEvents: "none",
+            testID: id('device'),
+            children: /*#__PURE__*/_jsx(DeviceGlyph, {
+              width: 12,
+              height: 12,
+              fill: deviceColor
+            })
+          }) : null, /*#__PURE__*/_jsx(Text, {
+            variant: "caption-1-regular",
+            numberOfLines: 1,
+            style: {
+              color: deviceName ? deviceColor : paint.textMuted,
+              flexShrink: 1
+            },
+            children: secondary
+          })]
+        })]
+      })]
+    }), onLikedChange ? /*#__PURE__*/_jsx(LikeButton, {
+      liked: liked,
+      onLikedChange: onLikedChange,
+      testID: id('like')
+    }) : null, /*#__PURE__*/_jsx(PlayButton, {
+      playing: playing,
+      onPress: onPlayPause,
+      variant: "plain",
+      size: "small",
+      subject: track.title,
+      style: {
+        marginRight: 8
+      },
+      testID: id('play')
+    }), /*#__PURE__*/_jsx(View, {
+      pointerEvents: "none",
+      "aria-hidden": true,
+      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'),
+      children: /*#__PURE__*/_jsx(View, {
+        style: {
+          width: `${progress * 100}%`,
+          height: 2,
+          backgroundColor: paint.text
+        },
+        testID: id('progress-fill')
+      })
+    })]
+  });
+}
+
+/**
+ * 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) {
+  const theme = useTheme();
+  const ctx = useContext(BloomThemeContext);
+  const surface = useMemo(() => resolveMiniPlayerSurface(theme, ctx?.colorPreset ?? 'oxy', props.artworkColor), [theme, ctx?.colorPreset, props.artworkColor]);
+  return /*#__PURE__*/_jsx(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,
+    children: /*#__PURE__*/_jsx(ImmersiveTheme, {
+      enabled: surface.tinted,
+      children: /*#__PURE__*/_jsx(MiniPlayerContent, {
+        ...props,
+        ...surface
+      })
+    })
+  });
+}
+export const MiniPlayer = /*#__PURE__*/memo(MiniPlayerComponent);
+MiniPlayer.displayName = 'MiniPlayer';
+//# sourceMappingURL=MiniPlayer.js.map

package/lib/module/media-player/MiniPlayer.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","memo","useContext","useMemo","useRef","PanResponder","Pressable","View","mixColor","resolveButtonRamps","webDataSet","LikeButton","PlayButton","clamp","resolveMediaControlsPaint","resolveMenuPalette","useTheme","Text","BloomThemeContext","DEVICE_GLYPHS","ImmersiveTheme","immersiveDarkTheme","Artwork","artistNames","IS_WEB","resolveArtworkTint","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","MINI_PLAYER_HEIGHT","MINI_PLAYER_SWIPE","resolveMiniPlayerSurface","theme","preset","artworkColor","dark","darkPaint","tint","text","textMuted","background","tinted","border","menu","surface","MiniPlayerContent","track","playing","onPlayPause","onPress","position","duration","liked","onLikedChange","deviceName","onNext","onPrevious","openLabel","testID","paint","accent","id","part","undefined","progress","deviceColor","isDark","DeviceGlyph","speaker","swipe","current","pan","create","onMoveShouldSetPanResponder","_e","g","Math","abs","dx","dy","onPanResponderRelease","swipeable","secondary","artists","name","title","children","role","accessibilityLabel","panHandlers","style","flex","minWidth","flexDirection","alignItems","gap","alignSelf","paddingLeft","source","artwork","size","radius","variant","numberOfLines","color","pointerEvents","width","height","fill","flexShrink","subject","marginRight","importantForAccessibility","left","right","bottom","borderRadius","overflow","backgroundColor","MiniPlayerComponent","props","ctx","colorPreset","bloomMiniPlayer","marginLeft","borderWidth","borderColor","enabled","MiniPlayer","displayName"],"sourceRoot":"../../../src","sources":["media-player/MiniPlayer.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/media-player/NowPlayingBar.js

@@ -0,0 +1,258 @@
+"use strict";
+
+import React, { memo, useMemo, useState } from 'react';
+import { useWindowDimensions, View } from 'react-native';
+import { resolveButtonRamps } from "../button/shared.js";
+import { webDataSet } from "../checkbox/shared.js";
+import { RiFullscreenLine } from "../icons/remix/RiFullscreenLine.js";
+import { RiMicLine } from "../icons/remix/RiMicLine.js";
+import { RiPlayListLine } from "../icons/remix/RiPlayListLine.js";
+import { ExplicitBadge } from "../media-controls/ExplicitBadge.js";
+import { LikeButton } from "../media-controls/LikeButton.js";
+import { PlaybackProgress } from "../media-controls/PlaybackProgress.js";
+import { VolumeControl } from "../media-controls/VolumeControl.js";
+import { resolveMediaControlsPaint } from "../media-controls/shared.js";
+import { Popover, PopoverContent, PopoverTrigger } from '../popover';
+import { useTheme } from "../theme/use-theme.js";
+import { DEVICE_GLYPHS } from "./device-icons.js";
+import { PlayerIconButton } from "./PlayerIconButton.js";
+import { Artwork, TrackText } from "./TrackText.js";
+import { TransportControls } from "./TransportControls.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 function nowPlayingBarLayout(width) {
+  if (width >= NOW_PLAYING_BAR_WIDE) return 'wide';
+  if (width >= NOW_PLAYING_BAR_MEDIUM) return 'medium';
+  return 'narrow';
+}
+const DEFAULT_LABELS = {
+  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
+}) {
+  const theme = useTheme();
+  const window = useWindowDimensions();
+  const [width, setWidth] = useState(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 => testID ? `${testID}-${part}` : undefined;
+  const casting = !!deviceName;
+  const narrow = layout === 'narrow';
+  const deviceButton = /*#__PURE__*/_jsx(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 /*#__PURE__*/_jsxs(View, {
+    onLayout: e => 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
+    }),
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: {
+        flexGrow: 1,
+        flexShrink: 1,
+        flexBasis: 0,
+        maxWidth: narrow ? undefined : '30%',
+        minWidth: 0,
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 12
+      },
+      testID: id('track'),
+      children: [/*#__PURE__*/_jsx(Artwork, {
+        source: track.artwork,
+        size: 56,
+        radius: 8
+      }), /*#__PURE__*/_jsx(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 ? /*#__PURE__*/_jsx(ExplicitBadge, {
+          size: "small"
+        }) : null,
+        testID: id('track')
+      }), onLikedChange ? /*#__PURE__*/_jsx(LikeButton, {
+        liked: liked,
+        onLikedChange: onLikedChange,
+        size: "small",
+        testID: id('like')
+      }) : null]
+    }), /*#__PURE__*/_jsxs(View, {
+      style: {
+        flexGrow: narrow ? 1.4 : 2,
+        flexShrink: 1,
+        flexBasis: 0,
+        maxWidth: 722,
+        minWidth: 240,
+        alignItems: 'center',
+        gap: 4
+      },
+      testID: id('center'),
+      children: [/*#__PURE__*/_jsx(TransportControls, {
+        ...transport,
+        subject: transport.subject ?? track.title,
+        size: "compact",
+        testID: id('transport')
+      }), /*#__PURE__*/_jsx(PlaybackProgress, {
+        value: position,
+        duration: duration,
+        buffered: buffered,
+        onSeek: onSeek,
+        onSeekPreview: onSeekPreview,
+        showTimes: !narrow,
+        disabled: transport.disabled,
+        style: {
+          alignSelf: 'stretch'
+        },
+        testID: id('progress')
+      })]
+    }), /*#__PURE__*/_jsxs(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'),
+      children: [onLyricsChange && !narrow ? /*#__PURE__*/_jsx(PlayerIconButton, {
+        icon: RiMicLine,
+        glyph: 20,
+        box: 32,
+        pressed: lyricsActive,
+        accessibilityLabel: labels.lyrics,
+        onPress: () => onLyricsChange(!lyricsActive),
+        testID: id('lyrics')
+      }) : null, onQueueChange ? /*#__PURE__*/_jsx(PlayerIconButton, {
+        icon: RiPlayListLine,
+        glyph: 20,
+        box: 32,
+        pressed: queueActive,
+        accessibilityLabel: labels.queue,
+        onPress: () => onQueueChange(!queueActive),
+        testID: id('queue')
+      }) : null, showDevice ? devicePicker ? /*#__PURE__*/_jsxs(Popover, {
+        open: devicePickerOpen,
+        onOpenChange: onDevicePickerOpenChange,
+        children: [/*#__PURE__*/_jsx(PopoverTrigger, {
+          asChild: true,
+          label: labels.devices,
+          children: deviceButton
+        }), /*#__PURE__*/_jsx(PopoverContent, {
+          label: labels.devices,
+          side: "top",
+          align: "end",
+          style: {
+            width: 320
+          },
+          children: devicePicker
+        })]
+      }) : deviceButton : null, onVolumeChange && !narrow ? /*#__PURE__*/_jsx(VolumeControl, {
+        volume: volume,
+        onVolumeChange: onVolumeChange,
+        muted: muted,
+        onMutedChange: onMutedChange,
+        sliderWidth: layout === 'wide' ? 96 : 64,
+        testID: id('volume')
+      }) : null, onFullscreenPress && layout === 'wide' ? /*#__PURE__*/_jsx(PlayerIconButton, {
+        icon: RiFullscreenLine,
+        glyph: 20,
+        box: 32,
+        accessibilityLabel: labels.fullscreen,
+        onPress: onFullscreenPress,
+        testID: id('fullscreen')
+      }) : null]
+    })]
+  });
+}
+export const NowPlayingBar = /*#__PURE__*/memo(NowPlayingBarComponent);
+NowPlayingBar.displayName = 'NowPlayingBar';
+//# sourceMappingURL=NowPlayingBar.js.map

package/lib/module/media-player/NowPlayingBar.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","memo","useMemo","useState","useWindowDimensions","View","resolveButtonRamps","webDataSet","RiFullscreenLine","RiMicLine","RiPlayListLine","ExplicitBadge","LikeButton","PlaybackProgress","VolumeControl","resolveMediaControlsPaint","Popover","PopoverContent","PopoverTrigger","useTheme","DEVICE_GLYPHS","PlayerIconButton","Artwork","TrackText","TransportControls","jsx","_jsx","jsxs","_jsxs","NOW_PLAYING_BAR_HEIGHT","NOW_PLAYING_BAR_WIDE","NOW_PLAYING_BAR_MEDIUM","nowPlayingBarLayout","width","DEFAULT_LABELS","lyrics","queue","devices","fullscreen","NowPlayingBarComponent","track","onTitlePress","onArtistPress","liked","onLikedChange","transport","position","duration","buffered","onSeek","onSeekPreview","lyricsActive","onLyricsChange","queueActive","onQueueChange","deviceName","onDevicePress","devicePicker","devicePickerOpen","onDevicePickerOpenChange","volume","onVolumeChange","muted","onMutedChange","onFullscreenPress","labels","labelOverrides","style","testID","theme","window","setWidth","layout","paint","neutral","id","part","undefined","casting","narrow","deviceButton","icon","speaker","glyph","box","active","accessibilityLabel","onPress","showDevice","onLayout","e","nativeEvent","height","flexDirection","alignItems","gap","paddingLeft","paddingRight","backgroundColor","colors","background","borderTopWidth","borderTopColor","isDark","bloomPlayerLayout","children","flexGrow","flexShrink","flexBasis","maxWidth","minWidth","source","artwork","size","radius","titleVariant","artistVariant","titleColor","text","artistColor","textMuted","titleLabel","openTrack","trailingTitle","explicit","subject","title","value","showTimes","disabled","alignSelf","justifyContent","pressed","open","onOpenChange","asChild","label","side","align","sliderWidth","NowPlayingBar","displayName"],"sourceRoot":"../../../src","sources":["media-player/NowPlayingBar.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,IAAI,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,OAAO;AACtD,SAASC,mBAAmB,EAAEC,IAAI,QAAgC,cAAc;AAEhF,SAASC,kBAAkB,QAAQ,qBAAkB;AACrD,SAASC,UAAU,QAAQ,uBAAoB;AAC/C,SAASC,gBAAgB,QAAQ,oCAAiC;AAClE,SAASC,SAAS,QAAQ,6BAA0B;AACpD,SAASC,cAAc,QAAQ,kCAA+B;AAC9D,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,SAASC,UAAU,QAAQ,iCAA8B;AACzD,SAASC,gBAAgB,QAAQ,uCAAoC;AACrE,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,SAASC,yBAAyB,QAAQ,6BAA0B;AACpE,SAASC,OAAO,EAAEC,cAAc,EAAEC,cAAc,QAAQ,YAAY;AACpE,SAASC,QAAQ,QAAQ,uBAAoB;AAC7C,SAASC,aAAa,QAAQ,mBAAgB;AAC9C,SAASC,gBAAgB,QAAQ,uBAAoB;AACrD,SAASC,OAAO,EAAEC,SAAS,QAAQ,gBAAa;AAChD,SAASC,iBAAiB,QAAQ,wBAAqB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAGxD,OAAO,MAAMC,sBAAsB,GAAG,EAAE;AACxC;AACA,OAAO,MAAMC,oBAAoB,GAAG,IAAI;AACxC;AACA,OAAO,MAAMC,sBAAsB,GAAG,GAAG;AAIzC,OAAO,SAASC,mBAAmBA,CAACC,KAAa,EAAuB;EACtE,IAAIA,KAAK,IAAIH,oBAAoB,EAAE,OAAO,MAAM;EAChD,IAAIG,KAAK,IAAIF,sBAAsB,EAAE,OAAO,QAAQ;EACpD,OAAO,QAAQ;AACjB;AAEA,MAAMG,cAAmC,GAAG;EAC1CC,MAAM,EAAE,QAAQ;EAChBC,KAAK,EAAE,OAAO;EACdC,OAAO,EAAE,qBAAqB;EAC9BC,UAAU,EAAE;AACd,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,sBAAsBA,CAAC;EAC9BC,KAAK;EACLC,YAAY;EACZC,aAAa;EACbC,KAAK,GAAG,KAAK;EACbC,aAAa;EACbC,SAAS;EACTC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,MAAM;EACNC,aAAa;EACbC,YAAY,GAAG,KAAK;EACpBC,cAAc;EACdC,WAAW,GAAG,KAAK;EACnBC,aAAa;EACbC,UAAU;EACVC,aAAa;EACbC,YAAY;EACZC,gBAAgB;EAChBC,wBAAwB;EACxBC,MAAM,GAAG,CAAC;EACVC,cAAc;EACdC,KAAK;EACLC,aAAa;EACbC,iBAAiB;EACjBC,MAAM,EAAEC,cAAc;EACtBC,KAAK;EACLC;AACkB,CAAC,EAAE;EACrB,MAAMC,KAAK,GAAGlD,QAAQ,CAAC,CAAC;EACxB,MAAMmD,MAAM,GAAGlE,mBAAmB,CAAC,CAAC;EACpC,MAAM,CAAC6B,KAAK,EAAEsC,QAAQ,CAAC,GAAGpE,QAAQ,CAASmE,MAAM,CAACrC,KAAK,CAAC;EACxD,MAAMuC,MAAM,GAAGxC,mBAAmB,CAACC,KAAK,CAAC;EACzC,MAAMgC,MAAM,GAAG;IAAE,GAAG/B,cAAc;IAAE,GAAGgC;EAAe,CAAC;EACvD,MAAMO,KAAK,GAAGvE,OAAO,CAAC,MAAMa,yBAAyB,CAACsD,KAAK,CAAC,EAAE,CAACA,KAAK,CAAC,CAAC;EACtE,MAAM;IAAEK;EAAQ,CAAC,GAAGxE,OAAO,CAAC,MAAMI,kBAAkB,CAAC+D,KAAK,CAAC,EAAE,CAACA,KAAK,CAAC,CAAC;EACrE,MAAMM,EAAE,GAAIC,IAAY,IAAMR,MAAM,GAAG,GAAGA,MAAM,IAAIQ,IAAI,EAAE,GAAGC,SAAU;EACvE,MAAMC,OAAO,GAAG,CAAC,CAACvB,UAAU;EAC5B,MAAMwB,MAAM,GAAGP,MAAM,KAAK,QAAQ;EAElC,MAAMQ,YAAY,gBAChBtD,IAAA,CAACL,gBAAgB;IACf4D,IAAI,EAAE7D,aAAa,CAAC8D,OAAQ;IAC5BC,KAAK,EAAE,EAAG;IACVC,GAAG,EAAE,EAAG;IACRC,MAAM,EAAEP,OAAQ;IAChBQ,kBAAkB,EAAER,OAAO,GAAG,GAAGb,MAAM,CAAC5B,OAAO,KAAKkB,UAAU,EAAE,GAAGU,MAAM,CAAC5B,OAAQ;IAClFkD,OAAO,EAAE9B,YAAY,GAAGoB,SAAS,GAAGrB,aAAc;IAClDY,MAAM,EAAEO,EAAE,CAAC,SAAS;EAAE,CACvB,CACF;EACD,MAAMa,UAAU,GAAG,CAAC,CAAC,CAAC/B,YAAY,IAAI,CAAC,CAACD,aAAa,MAAM,CAACuB,MAAM,IAAID,OAAO,CAAC;EAE9E,oBACElD,KAAA,CAACvB,IAAI;IACHoF,QAAQ,EAAGC,CAAoB,IAAKnB,QAAQ,CAACmB,CAAC,CAACC,WAAW,CAACnB,MAAM,CAACvC,KAAK,CAAE;IACzEkC,KAAK,EAAE,CACL;MACElC,KAAK,EAAE,MAAM;MACb2D,MAAM,EAAE/D,sBAAsB;MAC9BgE,aAAa,EAAE,KAAK;MACpBC,UAAU,EAAE,QAAQ;MACpBC,GAAG,EAAE,EAAE;MACPC,WAAW,EAAE,EAAE;MACfC,YAAY,EAAE,EAAE;MAChBC,eAAe,EAAE7B,KAAK,CAAC8B,MAAM,CAACC,UAAU;MACxCC,cAAc,EAAE,CAAC;MACjBC,cAAc,EAAEjC,KAAK,CAACkC,MAAM,GAAG7B,OAAO,CAAC,GAAG,CAAC,GAAGA,OAAO,CAAC,GAAG;IAC3D,CAAC,EACDP,KAAK,CACL;IACFC,MAAM,EAAEA,MAAO;IAAA,GACX7D,UAAU,CAAC;MAAEiG,iBAAiB,EAAEhC;IAAO,CAAC,CAAC;IAAAiC,QAAA,gBAE7C7E,KAAA,CAACvB,IAAI;MACH8D,KAAK,EAAE;QACLuC,QAAQ,EAAE,CAAC;QACXC,UAAU,EAAE,CAAC;QACbC,SAAS,EAAE,CAAC;QACZC,QAAQ,EAAE9B,MAAM,GAAGF,SAAS,GAAG,KAAK;QACpCiC,QAAQ,EAAE,CAAC;QACXjB,aAAa,EAAE,KAAK;QACpBC,UAAU,EAAE,QAAQ;QACpBC,GAAG,EAAE;MACP,CAAE;MACF3B,MAAM,EAAEO,EAAE,CAAC,OAAO,CAAE;MAAA8B,QAAA,gBAEpB/E,IAAA,CAACJ,OAAO;QAACyF,MAAM,EAAEvE,KAAK,CAACwE,OAAQ;QAACC,IAAI,EAAE,EAAG;QAACC,MAAM,EAAE;MAAE,CAAE,CAAC,eACvDxF,IAAA,CAACH,SAAS;QACRiB,KAAK,EAAEA,KAAM;QACb2E,YAAY,EAAC,aAAa;QAC1BC,aAAa,EAAC,mBAAmB;QACjCC,UAAU,EAAE5C,KAAK,CAAC6C,IAAK;QACvBC,WAAW,EAAE9C,KAAK,CAAC+C,SAAU;QAC7B/E,YAAY,EAAEA,YAAa;QAC3BC,aAAa,EAAEA,aAAc;QAC7B+E,UAAU,EAAExD,MAAM,CAACyD,SAAU;QAC7BC,aAAa,EAAEnF,KAAK,CAACoF,QAAQ,gBAAGlG,IAAA,CAACf,aAAa;UAACsG,IAAI,EAAC;QAAO,CAAE,CAAC,GAAG,IAAK;QACtE7C,MAAM,EAAEO,EAAE,CAAC,OAAO;MAAE,CACrB,CAAC,EACD/B,aAAa,gBACZlB,IAAA,CAACd,UAAU;QAAC+B,KAAK,EAAEA,KAAM;QAACC,aAAa,EAAEA,aAAc;QAACqE,IAAI,EAAC,OAAO;QAAC7C,MAAM,EAAEO,EAAE,CAAC,MAAM;MAAE,CAAE,CAAC,GACzF,IAAI;IAAA,CACJ,CAAC,eAEP/C,KAAA,CAACvB,IAAI;MACH8D,KAAK,EAAE;QAAEuC,QAAQ,EAAE3B,MAAM,GAAG,GAAG,GAAG,CAAC;QAAE4B,UAAU,EAAE,CAAC;QAAEC,SAAS,EAAE,CAAC;QAAEC,QAAQ,EAAE,GAAG;QAAEC,QAAQ,EAAE,GAAG;QAAEhB,UAAU,EAAE,QAAQ;QAAEC,GAAG,EAAE;MAAE,CAAE;MAC/H3B,MAAM,EAAEO,EAAE,CAAC,QAAQ,CAAE;MAAA8B,QAAA,gBAErB/E,IAAA,CAACF,iBAAiB;QAAA,GACZqB,SAAS;QACbgF,OAAO,EAAEhF,SAAS,CAACgF,OAAO,IAAIrF,KAAK,CAACsF,KAAM;QAC1Cb,IAAI,EAAC,SAAS;QACd7C,MAAM,EAAEO,EAAE,CAAC,WAAW;MAAE,CACzB,CAAC,eACFjD,IAAA,CAACb,gBAAgB;QACfkH,KAAK,EAAEjF,QAAS;QAChBC,QAAQ,EAAEA,QAAS;QACnBC,QAAQ,EAAEA,QAAS;QACnBC,MAAM,EAAEA,MAAO;QACfC,aAAa,EAAEA,aAAc;QAC7B8E,SAAS,EAAE,CAACjD,MAAO;QACnBkD,QAAQ,EAAEpF,SAAS,CAACoF,QAAS;QAC7B9D,KAAK,EAAE;UAAE+D,SAAS,EAAE;QAAU,CAAE;QAChC9D,MAAM,EAAEO,EAAE,CAAC,UAAU;MAAE,CACxB,CAAC;IAAA,CACE,CAAC,eAEP/C,KAAA,CAACvB,IAAI;MACH8D,KAAK,EAAE;QACL;QACAuC,QAAQ,EAAE3B,MAAM,GAAG,CAAC,GAAG,CAAC;QACxB4B,UAAU,EAAE5B,MAAM,GAAG,CAAC,GAAG,CAAC;QAC1B6B,SAAS,EAAE7B,MAAM,GAAG,MAAM,GAAG,CAAC;QAC9B+B,QAAQ,EAAE,CAAC;QACXjB,aAAa,EAAE,KAAK;QACpBC,UAAU,EAAE,QAAQ;QACpBqC,cAAc,EAAE,UAAU;QAC1BpC,GAAG,EAAE;MACP,CAAE;MACF3B,MAAM,EAAEO,EAAE,CAAC,SAAS,CAAE;MAAA8B,QAAA,GAErBrD,cAAc,IAAI,CAAC2B,MAAM,gBACxBrD,IAAA,CAACL,gBAAgB;QACf4D,IAAI,EAAExE,SAAU;QAChB0E,KAAK,EAAE,EAAG;QACVC,GAAG,EAAE,EAAG;QACRgD,OAAO,EAAEjF,YAAa;QACtBmC,kBAAkB,EAAErB,MAAM,CAAC9B,MAAO;QAClCoD,OAAO,EAAEA,CAAA,KAAMnC,cAAc,CAAC,CAACD,YAAY,CAAE;QAC7CiB,MAAM,EAAEO,EAAE,CAAC,QAAQ;MAAE,CACtB,CAAC,GACA,IAAI,EACPrB,aAAa,gBACZ5B,IAAA,CAACL,gBAAgB;QACf4D,IAAI,EAAEvE,cAAe;QACrByE,KAAK,EAAE,EAAG;QACVC,GAAG,EAAE,EAAG;QACRgD,OAAO,EAAE/E,WAAY;QACrBiC,kBAAkB,EAAErB,MAAM,CAAC7B,KAAM;QACjCmD,OAAO,EAAEA,CAAA,KAAMjC,aAAa,CAAC,CAACD,WAAW,CAAE;QAC3Ce,MAAM,EAAEO,EAAE,CAAC,OAAO;MAAE,CACrB,CAAC,GACA,IAAI,EACPa,UAAU,GACT/B,YAAY,gBACV7B,KAAA,CAACZ,OAAO;QAACqH,IAAI,EAAE3E,gBAAiB;QAAC4E,YAAY,EAAE3E,wBAAyB;QAAA8C,QAAA,gBACtE/E,IAAA,CAACR,cAAc;UAACqH,OAAO;UAACC,KAAK,EAAEvE,MAAM,CAAC5B,OAAQ;UAAAoE,QAAA,EAC3CzB;QAAY,CACC,CAAC,eACjBtD,IAAA,CAACT,cAAc;UAACuH,KAAK,EAAEvE,MAAM,CAAC5B,OAAQ;UAACoG,IAAI,EAAC,KAAK;UAACC,KAAK,EAAC,KAAK;UAACvE,KAAK,EAAE;YAAElC,KAAK,EAAE;UAAI,CAAE;UAAAwE,QAAA,EACjFhD;QAAY,CACC,CAAC;MAAA,CACV,CAAC,GAEVuB,YACD,GACC,IAAI,EACPnB,cAAc,IAAI,CAACkB,MAAM,gBACxBrD,IAAA,CAACZ,aAAa;QACZ8C,MAAM,EAAEA,MAAO;QACfC,cAAc,EAAEA,cAAe;QAC/BC,KAAK,EAAEA,KAAM;QACbC,aAAa,EAAEA,aAAc;QAC7B4E,WAAW,EAAEnE,MAAM,KAAK,MAAM,GAAG,EAAE,GAAG,EAAG;QACzCJ,MAAM,EAAEO,EAAE,CAAC,QAAQ;MAAE,CACtB,CAAC,GACA,IAAI,EACPX,iBAAiB,IAAIQ,MAAM,KAAK,MAAM,gBACrC9C,IAAA,CAACL,gBAAgB;QACf4D,IAAI,EAAEzE,gBAAiB;QACvB2E,KAAK,EAAE,EAAG;QACVC,GAAG,EAAE,EAAG;QACRE,kBAAkB,EAAErB,MAAM,CAAC3B,UAAW;QACtCiD,OAAO,EAAEvB,iBAAkB;QAC3BI,MAAM,EAAEO,EAAE,CAAC,YAAY;MAAE,CAC1B,CAAC,GACA,IAAI;IAAA,CACJ,CAAC;EAAA,CACH,CAAC;AAEX;AAEA,OAAO,MAAMiE,aAAa,gBAAG3I,IAAI,CAACsC,sBAAsB,CAAC;AACzDqG,aAAa,CAACC,WAAW,GAAG,eAAe","ignoreList":[]}

package/lib/module/media-player/PlaybackSpeedMenu.js

@@ -0,0 +1,93 @@
+"use strict";
+
+import React, { memo } from 'react';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuTrigger } from '../dropdown-menu';
+import { RiCheckLine } from "../icons/remix/RiCheckLine.js";
+import { useTheme } from "../theme/use-theme.js";
+import { PlayerIconButton } from "./PlayerIconButton.js";
+import { formatPlaybackRate, PLAYBACK_RATES, TRANSPORT_GEOMETRY } from "./shared.js";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/** 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
+}) {
+  const theme = useTheme();
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(DropdownMenuLabel, {
+      children: label
+    }), /*#__PURE__*/_jsx(DropdownMenuRadioGroup, {
+      value: String(rate),
+      onValueChange: v => onRateChange(Number(v)),
+      children: rates.map(r => /*#__PURE__*/_jsx(DropdownMenuRadioItem, {
+        value: String(r),
+        indicator: /*#__PURE__*/_jsx(RiCheckLine, {
+          width: 16,
+          height: 16,
+          fill: theme.colors.text
+        }),
+        indicatorPosition: "trailing",
+        testID: testID ? `${testID}-rate-${r}` : undefined,
+        children: formatRate(r)
+      }, r))
+    })]
+  });
+}
+
+/**
+ * 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
+}) {
+  const g = TRANSPORT_GEOMETRY[size];
+  return /*#__PURE__*/_jsxs(DropdownMenu, {
+    open: open,
+    onOpenChange: onOpenChange,
+    children: [/*#__PURE__*/_jsx(DropdownMenuTrigger, {
+      asChild: true,
+      label: `${label}, ${formatRate(rate)}`,
+      disabled: disabled,
+      children: children ?? /*#__PURE__*/_jsx(PlayerIconButton, {
+        text: formatRate(rate),
+        glyph: g.glyph,
+        box: g.box,
+        active: rate !== 1,
+        disabled: disabled,
+        testID: testID ? `${testID}-trigger` : undefined
+      })
+    }), /*#__PURE__*/_jsx(DropdownMenuContent, {
+      label: label,
+      align: "center",
+      minWidth: 180,
+      testID: testID,
+      children: /*#__PURE__*/_jsx(PlaybackSpeedRows, {
+        rate: rate,
+        onRateChange: onRateChange,
+        rates: rates,
+        formatRate: formatRate,
+        label: label,
+        testID: testID
+      })
+    })]
+  });
+}
+export const PlaybackSpeedMenu = /*#__PURE__*/memo(PlaybackSpeedMenuComponent);
+PlaybackSpeedMenu.displayName = 'PlaybackSpeedMenu';
+//# sourceMappingURL=PlaybackSpeedMenu.js.map

package/lib/module/media-player/PlaybackSpeedMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","memo","DropdownMenu","DropdownMenuContent","DropdownMenuLabel","DropdownMenuRadioGroup","DropdownMenuRadioItem","DropdownMenuTrigger","RiCheckLine","useTheme","PlayerIconButton","formatPlaybackRate","PLAYBACK_RATES","TRANSPORT_GEOMETRY","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","PlaybackSpeedRows","rate","onRateChange","rates","formatRate","label","testID","theme","children","value","String","onValueChange","v","Number","map","r","indicator","width","height","fill","colors","text","indicatorPosition","undefined","PlaybackSpeedMenuComponent","open","onOpenChange","size","disabled","g","asChild","glyph","box","active","align","minWidth","PlaybackSpeedMenu","displayName"],"sourceRoot":"../../../src","sources":["media-player/PlaybackSpeedMenu.tsx"],"mappings":"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","ignoreList":[]}