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

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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tiledev/sdk-apptile-live-selling",
-  "version": "0.13.0",
-  "description": "Live selling, auctions and giveaways for React Native — the Apptile live-selling gateway as a typed singleton, a Zego room engine behind a platform boundary, an assembled session state machine, and system picture-in-picture with its own config plugin. Commerce comes from an adapter.",
+  "version": "0.14.0",
+  "description": "Live selling, auctions and giveaways for React Native — the Apptile live-selling gateway as a typed singleton, a Zego room engine behind a platform boundary, an assembled session state machine, system picture-in-picture with its own config plugin, and the Live and Replay page models with their floating bubbles (`/ui`). Commerce comes from an adapter.",
   "license": "UNLICENSED",
   "private": false,
   "sideEffects": false,
@@ -17,6 +17,10 @@
       "types": "./dist/types.d.ts",
       "default": "./dist/types.js"
     },
+    "./ui": {
+      "types": "./dist/ui.d.ts",
+      "default": "./dist/ui.js"
+    },
     "./package.json": "./package.json",
     "./*": {
       "types": "./dist/*.d.ts",
@@ -27,6 +31,7 @@
     "dist",
     "types",
     "session",
+    "ui",
     "README.md"
   ],
   "scripts": {
@@ -53,22 +58,48 @@
     "access": "public"
   },
   "peerDependencies": {
-    "@tiledev/sdk-shopify": ">=0.10.0 <1",
+    "@expo/vector-icons": ">=15.0.0",
+    "@react-native-async-storage/async-storage": ">=2.0.0 <3",
+    "@react-navigation/native": ">=7.0.0 <8",
+    "@tiledev/react-native-performant-image": ">=0.3.0 <1",
+    "@tiledev/sdk-analytics-core": ">=0.3.2 <1",
+    "@tiledev/sdk-shopify": ">=0.21.0 <1",
+    "expo-keep-awake": ">=15.0.0",
+    "expo-video": ">=3.0.0",
     "react": ">=17",
     "react-native": ">=0.71",
+    "react-native-safe-area-context": ">=5.0.0",
     "zego-express-engine-reactnative": ">=3.0.0"
   },
   "peerDependenciesMeta": {
+    "@expo/vector-icons": {
+      "optional": true
+    },
+    "@tiledev/react-native-performant-image": {
+      "optional": true
+    },
+    "react-native-safe-area-context": {
+      "optional": true
+    },
     "zego-express-engine-reactnative": {
       "optional": true
     }
   },
   "devDependencies": {
-    "typescript": "^5.0.0",
-    "react": "^18.2.0",
+    "@expo/vector-icons": "^15.1.1",
+    "@react-native-async-storage/async-storage": "^2.2.0",
+    "@react-navigation/native": "^7.5.1",
+    "@tiledev/react-native-performant-image": "^0.3.0",
+    "@tiledev/sdk-analytics-core": "^0.3.3",
+    "@tiledev/sdk-shopify": "^0.21.0",
     "@types/react": "^18.2.0",
     "expo": "^54.0.0",
+    "expo-keep-awake": "~15.0.8",
+    "expo-video": "~3.0.16",
+    "react": "^18.2.0",
     "react-native": "^0.76.0",
+    "react-native-safe-area-context": "~5.6.0",
+    "typescript": "^5.0.0",
     "zego-express-engine-reactnative": "^3.22.0"
   },
   "dependencies": {

package/ui/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../dist/ui.js",
+  "module": "../dist/ui.js",
+  "types": "../dist/ui.d.ts",
+  "sideEffects": false
+}