@tiledev/sdk-apptile-live-selling 0.12.1 → 0.14.0

package/dist/ui/BubbleFrame.d.ts

@@ -0,0 +1,38 @@
+import type { ReactNode } from 'react';
+import { View } from 'react-native';
+/**
+ * The ✕ and expand chips' backing when the app passes none: a dark wash. amore-v2 drew its theme's
+ * `colors.scrim` (Amore's warm `rgba(28,23,20,0.45)`; K-Marie's and Sparkl's are this one), so an app
+ * passes its own to keep its look.
+ */
+export declare const BUBBLE_CHIP_COLOR = "rgba(0,0,0,0.45)";
+export interface BubbleFrameProps {
+    /** The show's poster, under the video, so the bubble isn't black while the picture arrives. */
+    posterUrl: string | null;
+    /** A tap on the bubble: back to the show's screen. */
+    onOpen: () => void;
+    /** ✕: the show stops and the bubble closes. */
+    onClose: () => void;
+    /** Screen-reader words for the tap and for ✕. */
+    openLabel: string;
+    closeLabel: string;
+    /** Behind the ✕ and the expand mark: the app's scrim colour (amore-v2's theme `colors.scrim`). Default `BUBBLE_CHIP_COLOR`. */
+    chipColor?: string;
+    /** The video. Drawn under the tap, which it must not take (it is wrapped in a view that lets touches through). */
+    children: ReactNode;
+}
+/**
+ * The floating bubble's frame. Each bubble draws its own video inside it and says what a tap and ✕
+ * do; the frame does the rest, the same for both. An app overlay beside the navigator, not a tile:
+ * mount it over the whole app (a full-screen parent), inside `SafeAreaProvider`.
+ *
+ * - **Draggable**, and on release it snaps to the nearer side, kept clear of the safe areas and the
+ *   tab bar. It starts at the bottom right each time it opens: mount it only while the bubble is up.
+ * - **A tap** calls `onOpen`; **✕** calls `onClose`. An expand mark in the opposite corner says the
+ *   whole bubble opens the show.
+ * - The poster sits under the video, so the bubble isn't black while it loads.
+ * - Hidden, and letting touches through, until the overlay has been measured and the bubble is in its
+ *   corner.
+ */
+export declare function BubbleFrame({ posterUrl, onOpen, onClose, openLabel, closeLabel, chipColor, children }: BubbleFrameProps): import("react").CElement<import("react-native").ViewProps, View>;
+//# sourceMappingURL=BubbleFrame.d.ts.map

package/dist/ui/BubbleFrame.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BubbleFrame.d.ts","sourceRoot":"","sources":["../../src/ui/BubbleFrame.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAiD,IAAI,EAAE,MAAM,cAAc,CAAC;AAenF;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,qBAAqB,CAAC;AAIpD,MAAM,WAAW,gBAAgB;IAC/B,+FAA+F;IAC/F,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,sDAAsD;IACtD,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,+CAA+C;IAC/C,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,iDAAiD;IACjD,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,+HAA+H;IAC/H,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kHAAkH;IAClH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,WAAW,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,SAA6B,EAAE,QAAQ,EAAE,EAAE,gBAAgB,oEAyI3I"}

package/dist/ui/BubbleFrame.js

@@ -0,0 +1,181 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BUBBLE_CHIP_COLOR = void 0;
+exports.BubbleFrame = BubbleFrame;
+/**
+ * The floating bubble's frame (0.14.0, moved from amore-v2's `src/core/overlays/bubbleFrame.tsx`: the
+ * old app's `PipBubbleFrame`, rebuilt), shared by `ReplayBubble` and `LiveBubble`.
+ *
+ * `createElement` rather than JSX, like the rest of the package, so this stays a plain `.ts`.
+ */
+const vector_icons_1 = require("@expo/vector-icons");
+const react_native_performant_image_1 = require("@tiledev/react-native-performant-image");
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const react_native_safe_area_context_1 = require("react-native-safe-area-context");
+/** The bubble: 128 wide, portrait 9:16, the shape the hosts record in. */
+const WIDTH = 128;
+const HEIGHT = Math.round((WIDTH * 16) / 9);
+/** From the screen's edges, the safe areas and the tab bar. */
+const MARGIN = 12;
+/** Room kept for the tab bar at the bottom (the safe area's inset doesn't include it). */
+const TAB_BAR_ROOM = 56;
+/** A finger that moves this far is dragging the bubble, not tapping it. */
+const DRAG_START = 6;
+/** White on the video, as the Replay and Live screens' buttons. */
+const ON_VIDEO = '#FFFFFF';
+/**
+ * The ✕ and expand chips' backing when the app passes none: a dark wash. amore-v2 drew its theme's
+ * `colors.scrim` (Amore's warm `rgba(28,23,20,0.45)`; K-Marie's and Sparkl's are this one), so an app
+ * passes its own to keep its look.
+ */
+exports.BUBBLE_CHIP_COLOR = 'rgba(0,0,0,0.45)';
+const clamp = (value, low, high) => Math.min(Math.max(value, low), high);
+/**
+ * The floating bubble's frame. Each bubble draws its own video inside it and says what a tap and ✕
+ * do; the frame does the rest, the same for both. An app overlay beside the navigator, not a tile:
+ * mount it over the whole app (a full-screen parent), inside `SafeAreaProvider`.
+ *
+ * - **Draggable**, and on release it snaps to the nearer side, kept clear of the safe areas and the
+ *   tab bar. It starts at the bottom right each time it opens: mount it only while the bubble is up.
+ * - **A tap** calls `onOpen`; **✕** calls `onClose`. An expand mark in the opposite corner says the
+ *   whole bubble opens the show.
+ * - The poster sits under the video, so the bubble isn't black while it loads.
+ * - Hidden, and letting touches through, until the overlay has been measured and the bubble is in its
+ *   corner.
+ */
+function BubbleFrame({ posterUrl, onOpen, onClose, openLabel, closeLabel, chipColor = exports.BUBBLE_CHIP_COLOR, children }) {
+    const insets = (0, react_native_safe_area_context_1.useSafeAreaInsets)();
+    /**
+     * The room the bubble moves in, from the overlay's own layout rather than `Dimensions` (production
+     * found `Dimensions` stale after a system picture-in-picture window on Android). None until the first
+     * layout, and the bubble stays hidden till then.
+     */
+    const [frame, setFrame] = (0, react_1.useState)(null);
+    const edges = (0, react_1.useMemo)(() => {
+        var _a, _b;
+        const top = insets.top + MARGIN;
+        const right = ((_a = frame === null || frame === void 0 ? void 0 : frame.width) !== null && _a !== void 0 ? _a : 0) - WIDTH - MARGIN;
+        const bottom = ((_b = frame === null || frame === void 0 ? void 0 : frame.height) !== null && _b !== void 0 ? _b : 0) - insets.bottom - TAB_BAR_ROOM - HEIGHT - MARGIN;
+        // Never inverted, so the clamps below stay sane on a window smaller than the bubble.
+        return { left: MARGIN, right: Math.max(MARGIN, right), top, bottom: Math.max(top, bottom) };
+    }, [frame === null || frame === void 0 ? void 0 : frame.width, frame === null || frame === void 0 ? void 0 : frame.height, insets.top, insets.bottom]);
+    // Where the bubble rests: held here as well as in the animated value, which can't be read back.
+    const resting = (0, react_1.useRef)({ x: edges.right, y: edges.bottom });
+    const position = (0, react_1.useRef)(new react_native_1.Animated.ValueXY(resting.current)).current;
+    // The gesture is made once; it reads the edges from here, at the moment it fires.
+    const edgesNow = (0, react_1.useRef)(edges);
+    edgesNow.current = edges;
+    /** The shopper has put it somewhere: a new layout keeps it there, pulled inside the new edges. */
+    const moved = (0, react_1.useRef)(false);
+    /**
+     * A drag is under way or has just ended. On web the mouse's release over the bubble, which followed
+     * it, is also a click on it, and opened the show at the end of every drag (seen in the preview).
+     */
+    const dragging = (0, react_1.useRef)(false);
+    // A new layout (the first one, a rotation): the bubble goes to its corner, or stays where the shopper
+    // put it. Before paint, so it is never seen where it was.
+    (0, react_1.useLayoutEffect)(() => {
+        const next = moved.current
+            ? { x: clamp(resting.current.x, edges.left, edges.right), y: clamp(resting.current.y, edges.top, edges.bottom) }
+            : { x: edges.right, y: edges.bottom };
+        if (next.x === resting.current.x && next.y === resting.current.y)
+            return;
+        resting.current = next;
+        position.setValue(next);
+    }, [edges, position]);
+    const drag = (0, react_1.useMemo)(() => {
+        // After the click that may follow the release, which comes in the same turn.
+        const dragEnded = () => setTimeout(() => {
+            dragging.current = false;
+        }, 0);
+        return react_native_1.PanResponder.create({
+            // Only once it is clearly a drag, so a tap still reaches the bubble's button.
+            onMoveShouldSetPanResponder: (_event, gesture) => Math.abs(gesture.dx) > DRAG_START || Math.abs(gesture.dy) > DRAG_START,
+            onPanResponderGrant: () => {
+                dragging.current = true;
+                position.setOffset(resting.current);
+                position.setValue({ x: 0, y: 0 });
+            },
+            onPanResponderMove: react_native_1.Animated.event([null, { dx: position.x, dy: position.y }], { useNativeDriver: false }),
+            onPanResponderRelease: (_event, gesture) => {
+                position.flattenOffset();
+                moved.current = true;
+                const { left, right, top, bottom } = edgesNow.current;
+                const x = resting.current.x + gesture.dx;
+                const y = resting.current.y + gesture.dy;
+                // The nearer side: the bubble's middle against the middle of the room it moves in.
+                const snapped = { x: x + WIDTH / 2 < (left + right + WIDTH) / 2 ? left : right, y: clamp(y, top, bottom) };
+                resting.current = snapped;
+                react_native_1.Animated.spring(position, { toValue: snapped, useNativeDriver: false, friction: 8, tension: 70 }).start();
+                dragEnded();
+            },
+            onPanResponderTerminate: () => {
+                dragEnded();
+                position.flattenOffset();
+                react_native_1.Animated.spring(position, { toValue: resting.current, useNativeDriver: false, friction: 8, tension: 70 }).start();
+            },
+        });
+    }, [position]);
+    // The picture is clipped to the rounded corners inside; the shadow is drawn outside, where a clip would cut it off.
+    const picture = (0, react_1.createElement)(react_native_1.View, { style: styles.picture }, posterUrl ? (0, react_1.createElement)(react_native_performant_image_1.Image, { source: { uri: posterUrl }, style: react_native_1.StyleSheet.absoluteFill, resizeMode: 'cover', transition: 0 }) : null, (0, react_1.createElement)(react_native_1.Pressable, {
+        accessibilityRole: 'button',
+        accessibilityLabel: openLabel,
+        onPress: () => {
+            if (!dragging.current)
+                onOpen();
+        },
+        style: react_native_1.StyleSheet.absoluteFill,
+    }, 
+    // Not touchable, or the native video view keeps the tap meant for the bubble.
+    (0, react_1.createElement)(react_native_1.View, { pointerEvents: 'none', style: react_native_1.StyleSheet.absoluteFill }, children)), (0, react_1.createElement)(react_native_1.Pressable, {
+        accessibilityRole: 'button',
+        accessibilityLabel: closeLabel,
+        hitSlop: 8,
+        onPress: onClose,
+        style: ({ pressed }) => [styles.chip, styles.close, { backgroundColor: chipColor }, pressed && styles.pressed],
+    }, (0, react_1.createElement)(vector_icons_1.Ionicons, { name: 'close', size: 14, color: ON_VIDEO })), 
+    // Says a tap opens it; not a button of its own, as the whole bubble is.
+    (0, react_1.createElement)(react_native_1.View, { pointerEvents: 'none', style: [styles.chip, styles.openHint, { backgroundColor: chipColor }] }, (0, react_1.createElement)(vector_icons_1.Ionicons, { name: 'expand', size: 13, color: ON_VIDEO })));
+    return (0, react_1.createElement)(react_native_1.View, {
+        pointerEvents: 'box-none',
+        style: react_native_1.StyleSheet.absoluteFill,
+        onLayout: (event) => {
+            const next = event.nativeEvent.layout;
+            setFrame((current) => ((current === null || current === void 0 ? void 0 : current.width) === next.width && (current === null || current === void 0 ? void 0 : current.height) === next.height ? current : next));
+        },
+    }, 
+    // Drawn from the first render, so the video view is up in the same commit as the bubble (on web the
+    // replay player seeks and plays the views it has then); hidden until the room is measured and it is
+    // in its corner.
+    (0, react_1.createElement)(react_native_1.Animated.View, {
+        ...drag.panHandlers,
+        pointerEvents: frame ? 'auto' : 'none',
+        style: [styles.bubble, !frame && styles.notPlacedYet, { transform: position.getTranslateTransform() }],
+    }, picture));
+}
+const styles = react_native_1.StyleSheet.create({
+    bubble: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        width: WIDTH,
+        height: HEIGHT,
+        borderRadius: 12,
+        backgroundColor: '#000000',
+        // Production's, tuned on a device: any lighter and the bubble reads as part of the screen behind it.
+        shadowColor: '#000000',
+        shadowOpacity: 0.35,
+        shadowRadius: 12,
+        shadowOffset: { width: 0, height: 4 },
+        elevation: 8,
+    },
+    picture: { ...react_native_1.StyleSheet.absoluteFillObject, borderRadius: 12, overflow: 'hidden', backgroundColor: '#000000' },
+    chip: { position: 'absolute', width: 22, height: 22, borderRadius: 11, alignItems: 'center', justifyContent: 'center' },
+    // Opposite corners, so a thumb reaching for one is nowhere near the other.
+    close: { top: 4, right: 4 },
+    openHint: { bottom: 4, right: 4 },
+    pressed: { opacity: 0.5 },
+    notPlacedYet: { opacity: 0 },
+});
+//# sourceMappingURL=BubbleFrame.js.map

package/dist/ui/BubbleFrame.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BubbleFrame.js","sourceRoot":"","sources":["../../src/ui/BubbleFrame.ts"],"names":[],"mappings":";;;AA+DA,kCAyIC;AAxMD;;;;;GAKG;AACH,qDAA8C;AAC9C,0FAA+D;AAC/D,iCAAkF;AAElF,+CAAmF;AAEnF,mFAAmE;AAEnE,0EAA0E;AAC1E,MAAM,KAAK,GAAG,GAAG,CAAC;AAClB,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,KAAK,GAAG,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;AAC5C,+DAA+D;AAC/D,MAAM,MAAM,GAAG,EAAE,CAAC;AAClB,0FAA0F;AAC1F,MAAM,YAAY,GAAG,EAAE,CAAC;AACxB,2EAA2E;AAC3E,MAAM,UAAU,GAAG,CAAC,CAAC;AACrB,mEAAmE;AACnE,MAAM,QAAQ,GAAG,SAAS,CAAC;AAC3B;;;;GAIG;AACU,QAAA,iBAAiB,GAAG,kBAAkB,CAAC;AAEpD,MAAM,KAAK,GAAG,CAAC,KAAa,EAAE,GAAW,EAAE,IAAY,EAAE,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,GAAG,CAAC,EAAE,IAAI,CAAC,CAAC;AAkBjG;;;;;;;;;;;;GAYG;AACH,SAAgB,WAAW,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,GAAG,yBAAiB,EAAE,QAAQ,EAAoB;IAC1I,MAAM,MAAM,GAAG,IAAA,kDAAiB,GAAE,CAAC;IAEnC;;;;OAIG;IACH,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,IAAA,gBAAQ,EAAyB,IAAI,CAAC,CAAC;IACjE,MAAM,KAAK,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;;QACzB,MAAM,GAAG,GAAG,MAAM,CAAC,GAAG,GAAG,MAAM,CAAC;QAChC,MAAM,KAAK,GAAG,CAAC,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,KAAK,mCAAI,CAAC,CAAC,GAAG,KAAK,GAAG,MAAM,CAAC;QACnD,MAAM,MAAM,GAAG,CAAC,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,mCAAI,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,GAAG,YAAY,GAAG,MAAM,GAAG,MAAM,CAAC;QACrF,qFAAqF;QACrF,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,CAAC,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,MAAM,CAAC,EAAE,CAAC;IAC9F,CAAC,EAAE,CAAC,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,KAAK,EAAE,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,EAAE,MAAM,CAAC,GAAG,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC;IAE7D,gGAAgG;IAChG,MAAM,OAAO,GAAG,IAAA,cAAM,EAAC,EAAE,CAAC,EAAE,KAAK,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,CAAC,MAAM,EAAE,CAAC,CAAC;IAC5D,MAAM,QAAQ,GAAG,IAAA,cAAM,EAAC,IAAI,uBAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC;IACvE,kFAAkF;IAClF,MAAM,QAAQ,GAAG,IAAA,cAAM,EAAC,KAAK,CAAC,CAAC;IAC/B,QAAQ,CAAC,OAAO,GAAG,KAAK,CAAC;IACzB,kGAAkG;IAClG,MAAM,KAAK,GAAG,IAAA,cAAM,EAAC,KAAK,CAAC,CAAC;IAC5B;;;OAGG;IACH,MAAM,QAAQ,GAAG,IAAA,cAAM,EAAC,KAAK,CAAC,CAAC;IAE/B,sGAAsG;IACtG,0DAA0D;IAC1D,IAAA,uBAAe,EAAC,GAAG,EAAE;QACnB,MAAM,IAAI,GAAG,KAAK,CAAC,OAAO;YACxB,CAAC,CAAC,EAAE,CAAC,EAAE,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,EAAE,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC,EAAE,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,EAAE,KAAK,CAAC,GAAG,EAAE,KAAK,CAAC,MAAM,CAAC,EAAE;YAChH,CAAC,CAAC,EAAE,CAAC,EAAE,KAAK,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,CAAC,MAAM,EAAE,CAAC;QACxC,IAAI,IAAI,CAAC,CAAC,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;YAAE,OAAO;QACzE,OAAO,CAAC,OAAO,GAAG,IAAI,CAAC;QACvB,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;IAC1B,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEtB,MAAM,IAAI,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QACxB,6EAA6E;QAC7E,MAAM,SAAS,GAAG,GAAG,EAAE,CACrB,UAAU,CAAC,GAAG,EAAE;YACd,QAAQ,CAAC,OAAO,GAAG,KAAK,CAAC;QAC3B,CAAC,EAAE,CAAC,CAAC,CAAC;QACR,OAAO,2BAAY,CAAC,MAAM,CAAC;YACzB,8EAA8E;YAC9E,2BAA2B,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC,GAAG,UAAU,IAAI,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC,GAAG,UAAU;YACxH,mBAAmB,EAAE,GAAG,EAAE;gBACxB,QAAQ,CAAC,OAAO,GAAG,IAAI,CAAC;gBACxB,QAAQ,CAAC,SAAS,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;gBACpC,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;YACpC,CAAC;YACD,kBAAkB,EAAE,uBAAQ,CAAC,KAAK,CAAC,CAAC,IAAI,EAAE,EAAE,EAAE,EAAE,QAAQ,CAAC,CAAC,EAAE,EAAE,EAAE,QAAQ,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,eAAe,EAAE,KAAK,EAAE,CAAC;YAC1G,qBAAqB,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,EAAE;gBACzC,QAAQ,CAAC,aAAa,EAAE,CAAC;gBACzB,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC;gBACrB,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,QAAQ,CAAC,OAAO,CAAC;gBACtD,MAAM,CAAC,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC,GAAG,OAAO,CAAC,EAAE,CAAC;gBACzC,MAAM,CAAC,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC,GAAG,OAAO,CAAC,EAAE,CAAC;gBACzC,mFAAmF;gBACnF,MAAM,OAAO,GAAG,EAAE,CAAC,EAAE,CAAC,GAAG,KAAK,GAAG,CAAC,GAAG,CAAC,IAAI,GAAG,KAAK,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,CAAC,CAAC,EAAE,GAAG,EAAE,MAAM,CAAC,EAAE,CAAC;gBAC3G,OAAO,CAAC,OAAO,GAAG,OAAO,CAAC;gBAC1B,uBAAQ,CAAC,MAAM,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,CAAC,KAAK,EAAE,CAAC;gBAC1G,SAAS,EAAE,CAAC;YACd,CAAC;YACD,uBAAuB,EAAE,GAAG,EAAE;gBAC5B,SAAS,EAAE,CAAC;gBACZ,QAAQ,CAAC,aAAa,EAAE,CAAC;gBACzB,uBAAQ,CAAC,MAAM,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,OAAO,CAAC,OAAO,EAAE,eAAe,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,CAAC,KAAK,EAAE,CAAC;YACpH,CAAC;SACF,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,oHAAoH;IACpH,MAAM,OAAO,GAAG,IAAA,qBAAa,EAC3B,mBAAI,EACJ,EAAE,KAAK,EAAE,MAAM,CAAC,OAAO,EAAE,EACzB,SAAS,CAAC,CAAC,CAAC,IAAA,qBAAa,EAAC,qCAAK,EAAE,EAAE,MAAM,EAAE,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,KAAK,EAAE,yBAAU,CAAC,YAAY,EAAE,UAAU,EAAE,OAAO,EAAE,UAAU,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,EAC3I,IAAA,qBAAa,EACX,wBAAS,EACT;QACE,iBAAiB,EAAE,QAAQ;QAC3B,kBAAkB,EAAE,SAAS;QAC7B,OAAO,EAAE,GAAG,EAAE;YACZ,IAAI,CAAC,QAAQ,CAAC,OAAO;gBAAE,MAAM,EAAE,CAAC;QAClC,CAAC;QACD,KAAK,EAAE,yBAAU,CAAC,YAAY;KAC/B;IACD,8EAA8E;IAC9E,IAAA,qBAAa,EAAC,mBAAI,EAAE,EAAE,aAAa,EAAE,MAAM,EAAE,KAAK,EAAE,yBAAU,CAAC,YAAY,EAAE,EAAE,QAAQ,CAAC,CACzF,EACD,IAAA,qBAAa,EACX,wBAAS,EACT;QACE,iBAAiB,EAAE,QAAQ;QAC3B,kBAAkB,EAAE,UAAU;QAC9B,OAAO,EAAE,CAAC;QACV,OAAO,EAAE,OAAO;QAChB,KAAK,EAAE,CAAC,EAAE,OAAO,EAAwB,EAAE,EAAE,CAAC,CAAC,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,KAAK,EAAE,EAAE,eAAe,EAAE,SAAS,EAAE,EAAE,OAAO,IAAI,MAAM,CAAC,OAAO,CAAC;KACrI,EACD,IAAA,qBAAa,EAAC,uBAAQ,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC,CACtE;IACD,wEAAwE;IACxE,IAAA,qBAAa,EACX,mBAAI,EACJ,EAAE,aAAa,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,QAAQ,EAAE,EAAE,eAAe,EAAE,SAAS,EAAE,CAAC,EAAE,EAChG,IAAA,qBAAa,EAAC,uBAAQ,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC,CACvE,CACF,CAAC;IAEF,OAAO,IAAA,qBAAa,EAClB,mBAAI,EACJ;QACE,aAAa,EAAE,UAAU;QACzB,KAAK,EAAE,yBAAU,CAAC,YAAY;QAC9B,QAAQ,EAAE,CAAC,KAAmD,EAAE,EAAE;YAChE,MAAM,IAAI,GAAG,KAAK,CAAC,WAAW,CAAC,MAAM,CAAC;YACtC,QAAQ,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,KAAK,MAAK,IAAI,CAAC,KAAK,IAAI,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,MAAM,MAAK,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;QAC7G,CAAC;KACF;IACD,oGAAoG;IACpG,oGAAoG;IACpG,iBAAiB;IACjB,IAAA,qBAAa,EACX,uBAAQ,CAAC,IAAI,EACb;QACE,GAAG,IAAI,CAAC,WAAW;QACnB,aAAa,EAAE,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;QACtC,KAAK,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC,KAAK,IAAI,MAAM,CAAC,YAAY,EAAE,EAAE,SAAS,EAAE,QAAQ,CAAC,qBAAqB,EAAE,EAAE,CAAC;KACvG,EACD,OAAO,CACR,CACF,CAAC;AACJ,CAAC;AAED,MAAM,MAAM,GAAG,yBAAU,CAAC,MAAM,CAAC;IAC/B,MAAM,EAAE;QACN,QAAQ,EAAE,UAAU;QACpB,GAAG,EAAE,CAAC;QACN,IAAI,EAAE,CAAC;QACP,KAAK,EAAE,KAAK;QACZ,MAAM,EAAE,MAAM;QACd,YAAY,EAAE,EAAE;QAChB,eAAe,EAAE,SAAS;QAC1B,qGAAqG;QACrG,WAAW,EAAE,SAAS;QACtB,aAAa,EAAE,IAAI;QACnB,YAAY,EAAE,EAAE;QAChB,YAAY,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE;QACrC,SAAS,EAAE,CAAC;KACb;IACD,OAAO,EAAE,EAAE,GAAG,yBAAU,CAAC,kBAAkB,EAAE,YAAY,EAAE,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,eAAe,EAAE,SAAS,EAAE;IAC/G,IAAI,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,YAAY,EAAE,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,cAAc,EAAE,QAAQ,EAAE;IACvH,2EAA2E;IAC3E,KAAK,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE;IAC3B,QAAQ,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE;IACjC,OAAO,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE;IACzB,YAAY,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE;CAC7B,CAAC,CAAC"}

package/dist/ui/LiveBubble.d.ts

@@ -0,0 +1,37 @@
+import { View } from 'react-native';
+export interface LiveBubbleProps {
+    /** A tap on the bubble. Default: back to the Live screen for the show (`LiveSellingProvider`'s `routes.openLive`). */
+    onOpen?: (streamId: string) => void;
+    /** Behind the ✕ and the expand mark: the app's scrim colour. Default `BUBBLE_CHIP_COLOR`. */
+    chipColor?: string;
+    /** Screen-reader words for the tap and for ✕. Default "Back to the live show", "Close the live show". */
+    openLabel?: string;
+    closeLabel?: string;
+}
+/**
+ * The live show's floating bubble. An app overlay beside the navigator, not a tile, so it outlives the
+ * Live screen that shrank the show: mount it once over the whole app, inside `LiveSessionProvider`
+ * (`ShopifyLiveSessionProvider`) and `SafeAreaProvider`. Shown while the session's picture is in the
+ * app's bubble (`pipMode` `inapp`): the Live screen's back (while the show plays or waits for the
+ * host), picture-in-picture and cart buttons put it there.
+ *
+ * - **The show's own picture**: `LiveVideoTarget`, which claims the room's video while the bubble is
+ *   up, at the shopper's own sound setting, over the show's poster.
+ * - **A tap** goes back to the Live screen already open, or a new one (`routes.openLive`, or `onOpen`),
+ *   which ends the bubble as it arrives. **✕** stops the show and lets the session follow whatever is
+ *   on air again. The show ending closes it (the session leaves `inapp` itself).
+ * - **The screen stays on** while it shows, under its own hold (`useKeepScreenAwake`'s tag).
+ * - **One shrunk show at a time**: the Live screen stops a replay's bubble as it opens, and the Replay
+ *   screen this one.
+ * - **The phone's own floating window** (`pipMode` `system`). Putting the app away with the bubble up
+ *   hands the show to it (the session arms it while the bubble shows a playing show), and coming back
+ *   puts it in the bubble again.
+ *   - **iOS** draws that window itself. When it came from the bubble, the bubble stays drawn behind it,
+ *     its video view still bound, so coming back finds the same picture with no new binding and no
+ *     black frame. When it came from the Live screen, nothing is drawn here.
+ *   - **Android**'s window is the app, scaled down, so the picture fills it here, over the show's
+ *     poster (Freckled Poppy's), whichever surface it came from.
+ * - **On the web** the session is idle, so nothing is ever drawn.
+ */
+export declare function LiveBubble({ onOpen, chipColor, openLabel, closeLabel }?: LiveBubbleProps): import("react").CElement<import("react-native").ViewProps, View> | import("react").FunctionComponentElement<import("./BubbleFrame").BubbleFrameProps> | null;
+//# sourceMappingURL=LiveBubble.d.ts.map

package/dist/ui/LiveBubble.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LiveBubble.d.ts","sourceRoot":"","sources":["../../src/ui/LiveBubble.ts"],"names":[],"mappings":"AAQA,OAAO,EAAwB,IAAI,EAAE,MAAM,cAAc,CAAC;AAc1D,MAAM,WAAW,eAAe;IAC9B,sHAAsH;IACtH,MAAM,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,6FAA6F;IAC7F,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yGAAyG;IACzG,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,UAAU,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,SAAsB,EAAE,UAAwB,EAAE,GAAE,eAAoB,gKAqDvH"}

package/dist/ui/LiveBubble.js

@@ -0,0 +1,101 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LiveBubble = LiveBubble;
+/**
+ * The live show's floating bubble (0.14.0, moved from amore-v2's `src/core/overlays/liveBubble.tsx`:
+ * Freckled Poppy's `LivePipBubble`, in the frame the replay's bubble uses).
+ *
+ * `createElement` rather than JSX, like the rest of the package, so this stays a plain `.ts`.
+ */
+const react_native_performant_image_1 = require("@tiledev/react-native-performant-image");
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const LiveSellingProvider_1 = require("../react/LiveSellingProvider");
+const platformSession_1 = require("../react/platformSession");
+const useKeepScreenAwake_1 = require("../react/useKeepScreenAwake");
+const BubbleFrame_1 = require("./BubbleFrame");
+/** Screen-reader words, Freckled Poppy's. */
+const WORDS = {
+    open: 'Back to the live show',
+    close: 'Close the live show',
+};
+/**
+ * The live show's floating bubble. An app overlay beside the navigator, not a tile, so it outlives the
+ * Live screen that shrank the show: mount it once over the whole app, inside `LiveSessionProvider`
+ * (`ShopifyLiveSessionProvider`) and `SafeAreaProvider`. Shown while the session's picture is in the
+ * app's bubble (`pipMode` `inapp`): the Live screen's back (while the show plays or waits for the
+ * host), picture-in-picture and cart buttons put it there.
+ *
+ * - **The show's own picture**: `LiveVideoTarget`, which claims the room's video while the bubble is
+ *   up, at the shopper's own sound setting, over the show's poster.
+ * - **A tap** goes back to the Live screen already open, or a new one (`routes.openLive`, or `onOpen`),
+ *   which ends the bubble as it arrives. **✕** stops the show and lets the session follow whatever is
+ *   on air again. The show ending closes it (the session leaves `inapp` itself).
+ * - **The screen stays on** while it shows, under its own hold (`useKeepScreenAwake`'s tag).
+ * - **One shrunk show at a time**: the Live screen stops a replay's bubble as it opens, and the Replay
+ *   screen this one.
+ * - **The phone's own floating window** (`pipMode` `system`). Putting the app away with the bubble up
+ *   hands the show to it (the session arms it while the bubble shows a playing show), and coming back
+ *   puts it in the bubble again.
+ *   - **iOS** draws that window itself. When it came from the bubble, the bubble stays drawn behind it,
+ *     its video view still bound, so coming back finds the same picture with no new binding and no
+ *     black frame. When it came from the Live screen, nothing is drawn here.
+ *   - **Android**'s window is the app, scaled down, so the picture fills it here, over the show's
+ *     poster (Freckled Poppy's), whichever surface it came from.
+ * - **On the web** the session is idle, so nothing is ever drawn.
+ */
+function LiveBubble({ onOpen, chipColor, openLabel = WORDS.open, closeLabel = WORDS.close } = {}) {
+    var _a;
+    const { pipMode, status, stream, actions } = (0, platformSession_1.useLiveSession)();
+    const { routes } = (0, LiveSellingProvider_1.useLivePageOptions)();
+    // Where the picture was before the phone's window took it: the bubble (`inapp`) or the Live screen
+    // (`none`). Kept from the last render outside the window, and updated during the render rather than in
+    // an effect: an effect would leave the window's first render with the wrong answer, and on iOS that
+    // render would take the bubble's video view down.
+    const [lastPlaceOutsideTheWindow, setLastPlaceOutsideTheWindow] = (0, react_1.useState)(pipMode);
+    if (pipMode !== 'system' && pipMode !== lastPlaceOutsideTheWindow)
+        setLastPlaceOutsideTheWindow(pipMode);
+    const windowCameFromTheBubble = pipMode === 'system' && lastPlaceOutsideTheWindow === 'inapp';
+    // Android's window is the app itself: the picture fills it.
+    const fillsAndroidWindow = pipMode === 'system' && react_native_1.Platform.OS === 'android';
+    // The session leaves `inapp` itself when the show ends; `status` covers the moment in between.
+    const showIsUp = status !== 'ended' && status !== 'error';
+    const bubbleShown = showIsUp && !fillsAndroidWindow && (pipMode === 'inapp' || windowCameFromTheBubble);
+    (0, useKeepScreenAwake_1.useKeepScreenAwake)(bubbleShown || fillsAndroidWindow, 'live-bubble');
+    const posterUrl = (_a = stream === null || stream === void 0 ? void 0 : stream.thumbnailUrl) !== null && _a !== void 0 ? _a : null;
+    if (fillsAndroidWindow) {
+        return (0, react_1.createElement)(react_native_1.View, { pointerEvents: 'none', style: styles.systemWindow }, 
+        // Under the picture, as in the bubble: a moment without frames shows the show, not black.
+        posterUrl ? (0, react_1.createElement)(react_native_performant_image_1.Image, { source: { uri: posterUrl }, style: react_native_1.StyleSheet.absoluteFill, resizeMode: 'cover', transition: 0 }) : null, (0, react_1.createElement)(platformSession_1.LiveVideoTarget, { active: true, style: styles.video }));
+    }
+    if (!bubbleShown)
+        return null;
+    const streamId = stream === null || stream === void 0 ? void 0 : stream.streamingId;
+    return (0, react_1.createElement)(BubbleFrame_1.BubbleFrame, {
+        posterUrl,
+        onOpen: () => {
+            if (!streamId)
+                return;
+            if (onOpen)
+                onOpen(streamId);
+            else
+                routes.openLive(streamId);
+        },
+        onClose: () => {
+            // Stopped outright, not handed back: without `stopVideo` the room plays on with no surface.
+            actions.exitPip({ stopVideo: true });
+            actions.releaseStream();
+        },
+        openLabel,
+        closeLabel,
+        chipColor,
+        // No `muted`: the shopper is still watching, so the bubble plays their own sound setting.
+        children: (0, react_1.createElement)(platformSession_1.LiveVideoTarget, { active: true, style: styles.video }),
+    });
+}
+const styles = react_native_1.StyleSheet.create({
+    video: { ...react_native_1.StyleSheet.absoluteFillObject },
+    /** Fills the app, which is the picture-in-picture window on Android. Black around a picture that doesn't fit. */
+    systemWindow: { ...react_native_1.StyleSheet.absoluteFillObject, backgroundColor: '#000000', zIndex: 200 },
+});
+//# sourceMappingURL=LiveBubble.js.map

package/dist/ui/LiveBubble.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LiveBubble.js","sourceRoot":"","sources":["../../src/ui/LiveBubble.ts"],"names":[],"mappings":"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"}

package/dist/ui/ReplayBubble.d.ts

@@ -0,0 +1,23 @@
+export interface ReplayBubbleProps {
+    /** A tap on the bubble. Default: back to the recording's Replay screen (`LiveSellingProvider`'s `routes.openReplay`). */
+    onOpen?: (feedId: string) => void;
+    /** Behind the ✕ and the expand mark: the app's scrim colour. Default `BUBBLE_CHIP_COLOR`. */
+    chipColor?: string;
+    /** Screen-reader words for the tap and for ✕. Default "Back to the replay", "Close the replay". */
+    openLabel?: string;
+    closeLabel?: string;
+}
+/**
+ * The replay's floating bubble. An app overlay beside the navigator, not a tile: it belongs to no
+ * screen and stays over every one. Mount it once over the whole app, inside `ReplayPlayerProvider` and
+ * `SafeAreaProvider`. Shown while the recording is in the bubble (`useReplayPlayer().bubbleShown`): the
+ * Replay screen's picture-in-picture or cart button put it there. It plays the same player at the same
+ * moment, with the same sound setting.
+ *
+ * The frame (drag and snap, the poster, ✕ and the expand mark) is `BubbleFrame`, shared with the live
+ * show's bubble (`LiveBubble`). Here: **a tap** goes back to the recording's Replay screen
+ * (`routes.openReplay`, or `onOpen`: the one already in the stack, never a second over the first),
+ * which closes the bubble as it arrives; **✕** stops the video and closes the bubble.
+ */
+export declare function ReplayBubble({ onOpen, chipColor, openLabel, closeLabel }?: ReplayBubbleProps): import("react").FunctionComponentElement<import("./BubbleFrame").BubbleFrameProps> | null;
+//# sourceMappingURL=ReplayBubble.d.ts.map

package/dist/ui/ReplayBubble.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReplayBubble.d.ts","sourceRoot":"","sources":["../../src/ui/ReplayBubble.ts"],"names":[],"mappings":"AAoBA,MAAM,WAAW,iBAAiB;IAChC,yHAAyH;IACzH,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,6FAA6F;IAC7F,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mGAAmG;IACnG,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,YAAY,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,SAAsB,EAAE,UAAwB,EAAE,GAAE,iBAAsB,6FA4B3H"}

package/dist/ui/ReplayBubble.js

@@ -0,0 +1,65 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ReplayBubble = ReplayBubble;
+/**
+ * The replay's floating bubble (0.14.0, moved from amore-v2's `src/core/overlays/replayBubble.tsx`: the
+ * old app's `ReplayPipBubble`, rebuilt; decided 2026-10-05, amore-v2's Head of Engineering).
+ *
+ * `createElement` rather than JSX, like the rest of the package, so this stays a plain `.ts`.
+ */
+const expo_video_1 = require("expo-video");
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const LiveSellingProvider_1 = require("../react/LiveSellingProvider");
+const replayPlayer_1 = require("../react/replayPlayer");
+const BubbleFrame_1 = require("./BubbleFrame");
+/** Screen-reader words, the old app's. */
+const WORDS = {
+    open: 'Back to the replay',
+    close: 'Close the replay',
+};
+/**
+ * The replay's floating bubble. An app overlay beside the navigator, not a tile: it belongs to no
+ * screen and stays over every one. Mount it once over the whole app, inside `ReplayPlayerProvider` and
+ * `SafeAreaProvider`. Shown while the recording is in the bubble (`useReplayPlayer().bubbleShown`): the
+ * Replay screen's picture-in-picture or cart button put it there. It plays the same player at the same
+ * moment, with the same sound setting.
+ *
+ * The frame (drag and snap, the poster, ✕ and the expand mark) is `BubbleFrame`, shared with the live
+ * show's bubble (`LiveBubble`). Here: **a tap** goes back to the recording's Replay screen
+ * (`routes.openReplay`, or `onOpen`: the one already in the stack, never a second over the first),
+ * which closes the bubble as it arrives; **✕** stops the video and closes the bubble.
+ */
+function ReplayBubble({ onOpen, chipColor, openLabel = WORDS.open, closeLabel = WORDS.close } = {}) {
+    const { recording, bubbleShown, player, stop, markVideoReady } = (0, replayPlayer_1.useReplayPlayer)();
+    const { routes } = (0, LiveSellingProvider_1.useLivePageOptions)();
+    if (!bubbleShown || !recording)
+        return null;
+    const recordingId = recording.id;
+    return (0, react_1.createElement)(BubbleFrame_1.BubbleFrame, {
+        posterUrl: recording.thumbnailUrl,
+        onOpen: () => {
+            if (onOpen)
+                onOpen(recordingId);
+            else
+                routes.openReplay(recordingId);
+        },
+        onClose: stop,
+        openLabel,
+        closeLabel,
+        chipColor,
+        children: (0, react_1.createElement)(expo_video_1.VideoView, {
+            player,
+            // A width and height, not just the edges: on web the video is an element that otherwise keeps its own size.
+            style: styles.video,
+            contentFit: 'cover',
+            nativeControls: false,
+            allowsPictureInPicture: false,
+            onFirstFrameRender: markVideoReady,
+        }),
+    });
+}
+const styles = react_native_1.StyleSheet.create({
+    video: { position: 'absolute', top: 0, left: 0, width: '100%', height: '100%' },
+});
+//# sourceMappingURL=ReplayBubble.js.map

package/dist/ui/ReplayBubble.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReplayBubble.js","sourceRoot":"","sources":["../../src/ui/ReplayBubble.ts"],"names":[],"mappings":";;AA0CA,oCA4BC;AAtED;;;;;GAKG;AACH,2CAAuC;AACvC,iCAAsC;AACtC,+CAA0C;AAE1C,sEAAkE;AAClE,wDAAwD;AACxD,+CAA4C;AAE5C,0CAA0C;AAC1C,MAAM,KAAK,GAAG;IACZ,IAAI,EAAE,oBAAoB;IAC1B,KAAK,EAAE,kBAAkB;CAC1B,CAAC;AAYF;;;;;;;;;;;GAWG;AACH,SAAgB,YAAY,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,GAAG,KAAK,CAAC,IAAI,EAAE,UAAU,GAAG,KAAK,CAAC,KAAK,KAAwB,EAAE;IAC1H,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,EAAE,IAAI,EAAE,cAAc,EAAE,GAAG,IAAA,8BAAe,GAAE,CAAC;IACnF,MAAM,EAAE,MAAM,EAAE,GAAG,IAAA,wCAAkB,GAAE,CAAC;IACxC,IAAI,CAAC,WAAW,IAAI,CAAC,SAAS;QAAE,OAAO,IAAI,CAAC;IAC5C,MAAM,WAAW,GAAG,SAAS,CAAC,EAAE,CAAC;IACjC,OAAO,IAAA,qBAAa,EAClB,yBAAW,EACX;QACE,SAAS,EAAE,SAAS,CAAC,YAAY;QACjC,MAAM,EAAE,GAAG,EAAE;YACX,IAAI,MAAM;gBAAE,MAAM,CAAC,WAAW,CAAC,CAAC;;gBAC3B,MAAM,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC;QACtC,CAAC;QACD,OAAO,EAAE,IAAI;QACb,SAAS;QACT,UAAU;QACV,SAAS;QACT,QAAQ,EAAE,IAAA,qBAAa,EAAC,sBAAS,EAAE;YACjC,MAAM;YACN,4GAA4G;YAC5G,KAAK,EAAE,MAAM,CAAC,KAAK;YACnB,UAAU,EAAE,OAAO;YACnB,cAAc,EAAE,KAAK;YACrB,sBAAsB,EAAE,KAAK;YAC7B,kBAAkB,EAAE,cAAc;SACnC,CAAC;KACH,CACF,CAAC;AACJ,CAAC;AAED,MAAM,MAAM,GAAG,yBAAU,CAAC,MAAM,CAAC;IAC/B,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE;CAChF,CAAC,CAAC"}

package/dist/ui.d.ts

@@ -0,0 +1,27 @@
+/**
+ * `@tiledev/sdk-apptile-live-selling/ui` (0.14.0): the components this package draws, beside the
+ * headless root. Today the floating bubbles, moved from amore-v2's `src/core/overlays`: the live show's
+ * (`LiveBubble`), the replay's (`ReplayBubble`) and the frame they share (`BubbleFrame`).
+ *
+ * An entry of its own so the root loads none of what only these draw (`@expo/vector-icons`,
+ * `react-native-safe-area-context`, `@tiledev/react-native-performant-image`, optional peers): an app
+ * that doesn't draw a bubble needs none of them. Reachable without the `exports` map too (the package's
+ * `ui/` folder), for a resolver that ignores it.
+ *
+ * ```tsx
+ * import { LiveBubble, ReplayBubble } from '@tiledev/sdk-apptile-live-selling/ui';
+ *
+ * <ReplayPlayerProvider>
+ *   <AppNavigator />
+ *   <ReplayBubble chipColor={scrim} />
+ *   <LiveBubble chipColor={scrim} />
+ * </ReplayPlayerProvider>
+ * ```
+ *
+ * A tap goes where `LiveSellingProvider`'s `routes` say (`openLive`, `openReplay`) unless the bubble
+ * is given its own `onOpen`.
+ */
+export { BubbleFrame, BUBBLE_CHIP_COLOR, type BubbleFrameProps } from './ui/BubbleFrame';
+export { LiveBubble, type LiveBubbleProps } from './ui/LiveBubble';
+export { ReplayBubble, type ReplayBubbleProps } from './ui/ReplayBubble';
+//# sourceMappingURL=ui.d.ts.map

package/dist/ui.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui.d.ts","sourceRoot":"","sources":["../src/ui.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,OAAO,EAAE,WAAW,EAAE,iBAAiB,EAAE,KAAK,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AACzF,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,iBAAiB,CAAC;AACnE,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/ui.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ReplayBubble = exports.LiveBubble = exports.BUBBLE_CHIP_COLOR = exports.BubbleFrame = void 0;
+/**
+ * `@tiledev/sdk-apptile-live-selling/ui` (0.14.0): the components this package draws, beside the
+ * headless root. Today the floating bubbles, moved from amore-v2's `src/core/overlays`: the live show's
+ * (`LiveBubble`), the replay's (`ReplayBubble`) and the frame they share (`BubbleFrame`).
+ *
+ * An entry of its own so the root loads none of what only these draw (`@expo/vector-icons`,
+ * `react-native-safe-area-context`, `@tiledev/react-native-performant-image`, optional peers): an app
+ * that doesn't draw a bubble needs none of them. Reachable without the `exports` map too (the package's
+ * `ui/` folder), for a resolver that ignores it.
+ *
+ * ```tsx
+ * import { LiveBubble, ReplayBubble } from '@tiledev/sdk-apptile-live-selling/ui';
+ *
+ * <ReplayPlayerProvider>
+ *   <AppNavigator />
+ *   <ReplayBubble chipColor={scrim} />
+ *   <LiveBubble chipColor={scrim} />
+ * </ReplayPlayerProvider>
+ * ```
+ *
+ * A tap goes where `LiveSellingProvider`'s `routes` say (`openLive`, `openReplay`) unless the bubble
+ * is given its own `onOpen`.
+ */
+var BubbleFrame_1 = require("./ui/BubbleFrame");
+Object.defineProperty(exports, "BubbleFrame", { enumerable: true, get: function () { return BubbleFrame_1.BubbleFrame; } });
+Object.defineProperty(exports, "BUBBLE_CHIP_COLOR", { enumerable: true, get: function () { return BubbleFrame_1.BUBBLE_CHIP_COLOR; } });
+var LiveBubble_1 = require("./ui/LiveBubble");
+Object.defineProperty(exports, "LiveBubble", { enumerable: true, get: function () { return LiveBubble_1.LiveBubble; } });
+var ReplayBubble_1 = require("./ui/ReplayBubble");
+Object.defineProperty(exports, "ReplayBubble", { enumerable: true, get: function () { return ReplayBubble_1.ReplayBubble; } });
+//# sourceMappingURL=ui.js.map

package/dist/ui.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui.js","sourceRoot":"","sources":["../src/ui.ts"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,gDAAyF;AAAhF,0GAAA,WAAW,OAAA;AAAE,gHAAA,iBAAiB,OAAA;AACvC,8CAAmE;AAA1D,wGAAA,UAAU,OAAA;AACnB,kDAAyE;AAAhE,4GAAA,YAAY,OAAA"}