@tiledev/sdk-apptile-live-selling 0.1.0

package/dist/react/useLiveSession.js

@@ -0,0 +1,876 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLiveSession = useLiveSession;
+exports.LiveSessionProvider = LiveSessionProvider;
+/**
+ * `LiveSessionProvider` / `useLiveSession` — the assembled session.
+ *
+ * This is the layer that turns the engine's event stream plus the polled record into one renderable
+ * state. It owns the two clocks (the elapsed/prune tick and the faster auction tick), the
+ * picture-in-picture mode machine, product resolution through the commerce adapter, and every action
+ * a live screen fires.
+ *
+ * **Mount it above your navigator.** The Zego engine holds exactly one room, and two places usually
+ * render the same stream — a home-screen card and the full-screen player. Owning the session per
+ * screen means whichever unmounts first tears the other's video down; surfaces bind themselves as
+ * render targets instead (see `LiveVideoTarget`).
+ *
+ * `createElement` rather than JSX, like `LiveSellingProvider`, so this stays a plain `.ts` and needs
+ * no JSX runtime configured in a consumer's build.
+ */
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const client_1 = require("../client");
+const liveSelling_1 = require("../liveSelling");
+const pip_1 = require("../pip");
+const session_1 = require("../session");
+const useStreamInfo_1 = require("./useStreamInfo");
+/** The elapsed timer and the transient-card pruning share one tick. */
+const TICK_MS = 1000;
+/**
+ * The auction clock runs faster than the session tick. Seconds are the unit a bidder acts on, and a
+ * 1s tick aliases against the deadline badly enough to show the same second twice and skip another.
+ */
+const AUCTION_TICK_MS = 200;
+/**
+ * How long past the deadline to wait before closing the round ourselves.
+ *
+ * The host normally closes it. This only covers the case where nothing arrives, and the delay is what
+ * stops a slow last-instant bid — which also extends the clock — from landing after the bar has
+ * already given up.
+ */
+const AUCTION_GRACE_MS = 1000;
+const LiveSessionContext = (0, react_1.createContext)(null);
+/**
+ * Reads the shared live session.
+ *
+ * `TRaw` is your catalogue's own product type — whatever the commerce adapter put on `LiveProduct.raw`.
+ * Pass it and `session.products[n].raw` comes back typed, with no cast at the call site:
+ * `useLiveSession<ShopifyProduct>()`.
+ */
+function useLiveSession() {
+    const session = (0, react_1.useContext)(LiveSessionContext);
+    if (!session)
+        throw new Error('useLiveSession must be used within a LiveSessionProvider');
+    return session;
+}
+function useSessionValue(props) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+    const { streamingId, viewerName: viewerNameInput, onPipRestore } = props;
+    const [state, dispatch] = (0, react_1.useReducer)(session_1.sessionReducer, session_1.initialSessionState);
+    const [joining, setJoining] = (0, react_1.useState)(false);
+    const [error, setError] = (0, react_1.useState)(null);
+    const [now, setNow] = (0, react_1.useState)(() => Date.now());
+    const [muted, setMuted] = (0, react_1.useState)(false);
+    const [pipMode, setPipMode] = (0, react_1.useState)('none');
+    /**
+     * Whether the system PIP window is *this session's*.
+     *
+     * The native module reports the activity's own transitions, and on Android the window IS the
+     * activity — so anything else handing itself over fires the same events, with nothing in the
+     * payload to say whose window it was. Read through a ref because the listeners below subscribe once
+     * per stream and would otherwise close over a stale `pipMode`.
+     */
+    const pipModeRef = (0, react_1.useRef)('none');
+    pipModeRef.current = pipMode;
+    const viewerIdRef = (0, react_1.useRef)(null);
+    const logger = (0, client_1.getLogger)();
+    const identity = (0, client_1.getIdentity)();
+    const commerce = (0, client_1.getCommerce)();
+    /**
+     * What this device comments under.
+     *
+     * The prop wins, then a name typed on this device, then the signed-in customer's own. The typed
+     * name comes before the customer because typing it here is the more explicit act; the customer's
+     * name is consulted at all so a signed-in bidder is never asked to invent one.
+     */
+    const [chosenName, setChosenName] = (0, react_1.useState)(() => liveSelling_1.liveSelling.viewer.cachedName());
+    const accountName = (viewerNameInput === null || viewerNameInput === void 0 ? void 0 : viewerNameInput.trim()) || null;
+    (0, react_1.useEffect)(() => {
+        if (accountName || chosenName)
+            return;
+        let alive = true;
+        void liveSelling_1.liveSelling.viewer.loadName().then((stored) => {
+            if (alive && stored)
+                setChosenName(stored);
+        });
+        return () => {
+            alive = false;
+        };
+    }, [accountName, chosenName]);
+    const customerName = (_b = (_a = identity === null || identity === void 0 ? void 0 : identity.customerName) === null || _a === void 0 ? void 0 : _a.call(identity)) !== null && _b !== void 0 ? _b : null;
+    const namedBy = (_c = accountName !== null && accountName !== void 0 ? accountName : chosenName) !== null && _c !== void 0 ? _c : ((customerName === null || customerName === void 0 ? void 0 : customerName.trim()) || null);
+    const viewerName = namedBy !== null && namedBy !== void 0 ? namedBy : 'Anonymous';
+    /**
+     * Pushed to the engine rather than passed at join: the room is entered once, and a name given
+     * mid-show must not cost a rejoin — that interrupts the video for everyone watching on this device.
+     * Comments and reactions carry the author in their own payload.
+     */
+    (0, react_1.useEffect)(() => {
+        liveSelling_1.liveSelling.engine.setViewerName(namedBy);
+    }, [namedBy]);
+    /**
+     * The auction clock, separate from `now` so a 200ms tick does not redraw the comment pane five
+     * times a second on an ordinary live stream. This one only runs while a round is open.
+     */
+    const [auctionNow, setAuctionNow] = (0, react_1.useState)(() => Date.now());
+    // Poll so a stream ending (or the host swapping the product set) is noticed without a manual
+    // refresh. The engine's channels cover in-stream changes; this covers the record itself. With no
+    // `streamingId` it follows whichever stream is on air.
+    const { stream, refresh: refreshStreamInfo } = (0, useStreamInfo_1.useStreamInfo)(streamingId);
+    const watching = streamingId !== null && streamingId !== void 0 ? streamingId : stream === null || stream === void 0 ? void 0 : stream.streamingId;
+    (0, react_1.useEffect)(() => {
+        dispatch({ kind: 'reset' });
+        setError(null);
+    }, [watching]);
+    (0, react_1.useEffect)(() => liveSelling_1.liveSelling.engine.subscribe((event) => {
+        dispatch({ kind: 'event', event, at: Date.now() });
+    }), []);
+    (0, react_1.useEffect)(() => {
+        if (!stream || stream.status !== 'live')
+            return;
+        // A guest holds the room login while co-hosting — one session per engine, and the publish
+        // privilege is in their token. Joining as a viewer would evict them. When guest mode ends this
+        // effect re-runs and the viewer session takes the room back.
+        if (state.guestMode)
+            return;
+        /**
+         * Off-device the engine is the no-op build, so a join would *succeed* — every stubbed call
+         * resolves — and then no room state would ever arrive, leaving the status on `connecting` for
+         * ever. An honest dead end beats a convincing one.
+         */
+        if (react_native_1.Platform.OS === 'web') {
+            setError('Live shopping is only available in the app.');
+            return;
+        }
+        let cancelled = false;
+        void (async () => {
+            try {
+                setJoining(true);
+                const viewerId = await liveSelling_1.liveSelling.viewer.id();
+                viewerIdRef.current = viewerId;
+                const token = await liveSelling_1.liveSelling.streams.zegoToken(viewerId, stream.streamingId);
+                if (!token)
+                    throw new Error('Could not get a stream token');
+                if (cancelled)
+                    return;
+                await liveSelling_1.liveSelling.engine.join({
+                    streamingId: stream.streamingId,
+                    roomId: stream.roomId,
+                    mixedStreamId: stream.mixedStreamId,
+                    viewerId,
+                    viewerName,
+                    token,
+                    mutedDeviceIds: stream.mutedDeviceIds,
+                });
+            }
+            catch (caught) {
+                logger.error(caught, { at: 'liveSession.join', streamingId: watching });
+                if (!cancelled)
+                    setError('Could not join the live stream');
+            }
+            finally {
+                if (!cancelled)
+                    setJoining(false);
+            }
+        })();
+        return () => {
+            cancelled = true;
+            // Releases the room but leaves the engine alive, so playback can continue behind other screens.
+            liveSelling_1.liveSelling.engine
+                .leave()
+                .catch((caught) => logger.error(caught, { at: 'liveSession.leave' }));
+        };
+        // viewerName is intentionally excluded: it changes when the customer loads, and rejoining the
+        // room mid-stream to relabel comments is not worth a video interruption.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [stream === null || stream === void 0 ? void 0 : stream.streamingId, stream === null || stream === void 0 ? void 0 : stream.status, state.guestMode]);
+    /**
+     * Keep the muted list in step with the polled record.
+     *
+     * The join seeds it once; this covers changes made while nothing was broadcasting to us — most
+     * importantly an *unmute*, which is otherwise invisible until the app restarts. Keyed on the joined
+     * ids because the array is a fresh object on every poll.
+     */
+    const mutedKey = ((_d = stream === null || stream === void 0 ? void 0 : stream.mutedDeviceIds) !== null && _d !== void 0 ? _d : []).join(',');
+    (0, react_1.useEffect)(() => {
+        if (!stream)
+            return;
+        liveSelling_1.liveSelling.engine.setMutedDeviceIds(mutedKey ? mutedKey.split(',') : []);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [mutedKey]);
+    const status = (0, session_1.deriveStatus)(state, !!stream, joining, error, (stream === null || stream === void 0 ? void 0 : stream.status) === 'live');
+    // A PIP surface outlives the screen that opened it, so nothing else would take it down when the
+    // host ends the stream — it would sit there over the app showing a frozen last frame.
+    (0, react_1.useEffect)(() => {
+        if (pipMode === 'none')
+            return;
+        if (status === 'ended' || status === 'error')
+            setPipMode('none');
+    }, [status, pipMode]);
+    // The host's end broadcast reaches us long before the polled record catches up. Stop the picture,
+    // then force a refetch so every poll-driven surface drops the stream instead of waiting out the
+    // interval.
+    (0, react_1.useEffect)(() => {
+        if (status !== 'ended')
+            return;
+        liveSelling_1.liveSelling.engine
+            .stopPlayback()
+            .catch((caught) => logger.error(caught, { at: 'liveSession.stopOnEnd' }));
+        (0, useStreamInfo_1.refreshStreamRecords)();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [status]);
+    // Arming is what makes minimising the app hand over to a system PIP window: the OS starts it
+    // itself, with no JavaScript involved at that moment. Arming while an in-app surface is up — rather
+    // than waiting for a background event, which arrives too late — is what makes it seamless.
+    (0, react_1.useEffect)(() => {
+        if (!pip_1.isLivePipSupported)
+            return;
+        const armed = pipMode !== 'none';
+        void pip_1.livePip.setArmed(armed);
+        liveSelling_1.liveSelling.engine
+            .setBackgroundVideoEnabled(armed)
+            .catch((caught) => logger.error(caught, { at: 'liveSession.backgroundVideo' }));
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [pipMode]);
+    (0, react_1.useEffect)(() => {
+        if (!pip_1.isLivePipSupported)
+            return;
+        /**
+         * Only ours if this session had its own surface up first. Anything else minimising into a system
+         * window raises the same event, and taking it means the live session believes it is in a PIP
+         * window it never opened.
+         */
+        const offStart = pip_1.livePip.addListener('onPipStart', () => {
+            if (pipModeRef.current !== 'inapp')
+                return;
+            setPipMode('system');
+        });
+        // Expanding and closing both end in `onPipStop`; `restored` is the only thing that tells them
+        // apart, and the expand path is handled by `onPipRestore` instead.
+        const offStop = pip_1.livePip.addListener('onPipStop', ({ restored }) => {
+            if (restored)
+                return;
+            if (pipModeRef.current !== 'system')
+                return;
+            setPipMode('none');
+            liveSelling_1.liveSelling.engine
+                .stopPlayback()
+                .catch((caught) => logger.error(caught, { at: 'liveSession.pipDismissed' }));
+        });
+        const offRestore = pip_1.livePip.addListener('onPipRestore', () => {
+            if (pipModeRef.current !== 'system')
+                return;
+            setPipMode('none');
+            onPipRestore === null || onPipRestore === void 0 ? void 0 : onPipRestore(watching);
+        });
+        const offError = pip_1.livePip.addListener('onPipError', ({ message }) => logger.error(new Error(message), { at: 'liveSession.pipError' }));
+        return () => {
+            offStart === null || offStart === void 0 ? void 0 : offStart();
+            offStop === null || offStop === void 0 ? void 0 : offStop();
+            offRestore === null || offRestore === void 0 ? void 0 : offRestore();
+            offError === null || offError === void 0 ? void 0 : offError();
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [watching, onPipRestore]);
+    // Anything that takes the app out of the foreground tears down the video surface without ending
+    // the session. The engine reconnects the room on its own, but the render target has to be re-issued.
+    (0, react_1.useEffect)(() => {
+        const subscription = react_native_1.AppState.addEventListener('change', (next) => {
+            if (next !== 'active')
+                return;
+            liveSelling_1.liveSelling.engine
+                .refreshPlayback()
+                .catch((caught) => logger.error(caught, { at: 'liveSession.refreshPlayback' }));
+        });
+        return () => subscription.remove();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    (0, react_1.useEffect)(() => {
+        if (status !== 'playing' && state.sold.length === 0 && state.reactions.length === 0)
+            return;
+        const timer = setInterval(() => {
+            const at = Date.now();
+            setNow(at);
+            dispatch({ kind: 'prune', now: at });
+        }, TICK_MS);
+        return () => clearInterval(timer);
+    }, [status, state.sold.length, state.reactions.length]);
+    /**
+     * The auction clock. Only runs while a round is open, so it costs nothing on a normal live stream.
+     * It also owns the fallback close: past the deadline plus the grace period with no word from the
+     * host, the round is over as far as this device is concerned.
+     */
+    const { biddingOpen, endsAtMs, serverOffsetMs } = state;
+    (0, react_1.useEffect)(() => {
+        if (!biddingOpen)
+            return;
+        const timer = setInterval(() => {
+            const at = Date.now();
+            setAuctionNow(at);
+            // Destructured rather than read off `state`, so the closure cannot go stale against a deadline
+            // a late bid has already moved — the deps re-arm it when one does.
+            if (endsAtMs - (at + serverOffsetMs) < -AUCTION_GRACE_MS) {
+                dispatch({ kind: 'auctionExpired' });
+            }
+        }, AUCTION_TICK_MS);
+        return () => clearInterval(timer);
+    }, [biddingOpen, endsAtMs, serverOffsetMs]);
+    /**
+     * Giveaway state off the polled record.
+     *
+     * The realtime start only reaches viewers already in the room, so without this a viewer who joined
+     * mid-giveaway would see no nudge at all — and one returning to the screen would be invited to
+     * enter a giveaway they are already in.
+     */
+    const activeGiveaway = (0, react_1.useMemo)(() => { var _a; return (_a = stream === null || stream === void 0 ? void 0 : stream.giveaways.find((giveaway) => giveaway.status === 'active')) !== null && _a !== void 0 ? _a : null; }, [stream]);
+    const bidderId = (_f = (_e = identity === null || identity === void 0 ? void 0 : identity.bidderId) === null || _e === void 0 ? void 0 : _e.call(identity)) !== null && _f !== void 0 ? _f : null;
+    const customerRef = (_h = (_g = identity === null || identity === void 0 ? void 0 : identity.customerRef) === null || _g === void 0 ? void 0 : _g.call(identity)) !== null && _h !== void 0 ? _h : null;
+    /**
+     * Closes the gap between the realtime giveaway start and the polled record it depends on.
+     *
+     * The reducer knows the lot the instant the event lands, but `giveaway.active` below still needs a
+     * matching entry in the record. One fetch, not a poll: the record and the event are written by the
+     * same host action, so a single re-read right after the event is the fix.
+     */
+    const giveawayKnown = (0, react_1.useMemo)(() => !state.giveawayStoreProductId ||
+        !!(stream === null || stream === void 0 ? void 0 : stream.giveaways.some((giveaway) => giveaway.storeProductId === state.giveawayStoreProductId)), [state.giveawayStoreProductId, stream]);
+    (0, react_1.useEffect)(() => {
+        if (giveawayKnown)
+            return;
+        void refreshStreamInfo();
+    }, [giveawayKnown, refreshStreamInfo]);
+    (0, react_1.useEffect)(() => {
+        if (!activeGiveaway)
+            return;
+        const entries = activeGiveaway.entries.filter((entry) => entry.active);
+        dispatch({
+            kind: 'giveawaySynced',
+            storeProductId: activeGiveaway.storeProductId,
+            entryCount: entries.length,
+            registered: !!bidderId && entries.some((entry) => entry.userId === bidderId),
+        });
+    }, [activeGiveaway, bidderId]);
+    // Host order first, then anything added mid-stream, minus anything withdrawn.
+    const storeProductIds = (0, react_1.useMemo)(() => {
+        if (!stream)
+            return [];
+        const merged = stream.products.map((product) => product.storeProductId);
+        for (const id of state.extraStoreProductIds) {
+            if (!merged.includes(id))
+                merged.push(id);
+        }
+        return merged.filter((id) => !state.removedStoreProductIds.includes(id));
+    }, [stream, state.extraStoreProductIds, state.removedStoreProductIds]);
+    /**
+     * Resolved through the commerce adapter, keyed on the joined ids so a mid-stream product add
+     * refetches and an unchanged set does not.
+     */
+    const [products, setProducts] = (0, react_1.useState)([]);
+    const productKey = storeProductIds.join(',');
+    (0, react_1.useEffect)(() => {
+        if (!productKey || !commerce) {
+            setProducts([]);
+            return;
+        }
+        let alive = true;
+        void commerce
+            .productsByIds(productKey.split(','))
+            .then((next) => {
+            if (alive)
+                setProducts(next);
+        })
+            .catch((caught) => logger.error(caught, { at: 'liveSession.products' }));
+        return () => {
+            alive = false;
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [productKey]);
+    const activeProduct = (0, react_1.useMemo)(() => {
+        var _a, _b, _c, _d, _e, _f, _g;
+        if (!products.length)
+            return null;
+        const preferred = (_c = (_a = state.activeStoreProductId) !== null && _a !== void 0 ? _a : (_b = stream === null || stream === void 0 ? void 0 : stream.products.find((product) => product.isCurrent)) === null || _b === void 0 ? void 0 : _b.storeProductId) !== null && _c !== void 0 ? _c : (_d = stream === null || stream === void 0 ? void 0 : stream.products[0]) === null || _d === void 0 ? void 0 : _d.storeProductId;
+        if (!preferred)
+            return (_e = products[0]) !== null && _e !== void 0 ? _e : null;
+        return (_g = (_f = products.find((product) => product.storeProductId === preferred)) !== null && _f !== void 0 ? _f : products[0]) !== null && _g !== void 0 ? _g : null;
+    }, [products, state.activeStoreProductId, stream]);
+    const multiplier = (_k = (_j = state.multiplierOverride) !== null && _j !== void 0 ? _j : stream === null || stream === void 0 ? void 0 : stream.viewerMultiplier) !== null && _k !== void 0 ? _k : 1;
+    const elapsedMs = (stream === null || stream === void 0 ? void 0 : stream.startedAtMs) ? Math.max(0, now - stream.startedAtMs) : 0;
+    /**
+     * Percentages come off the raw counts, so the multiplier cannot skew them — it inflates only the
+     * total on display, exactly as the host's own dashboard does.
+     */
+    const poll = (0, react_1.useMemo)(() => {
+        var _a, _b;
+        if (!state.poll)
+            return null;
+        const rawTotal = (_b = (_a = state.pollResults) === null || _a === void 0 ? void 0 : _a.totalVotes) !== null && _b !== void 0 ? _b : 0;
+        return {
+            pollUuid: state.poll.pollUuid,
+            question: state.poll.question,
+            choices: state.poll.options.map((option) => {
+                var _a, _b;
+                const votes = (_b = (_a = state.pollResults) === null || _a === void 0 ? void 0 : _a.votes[option.optionId]) !== null && _b !== void 0 ? _b : 0;
+                return {
+                    ...option,
+                    votes,
+                    percent: rawTotal > 0 ? Math.round((votes / rawTotal) * 100) : 0,
+                };
+            }),
+            totalVotes: Math.round(rawTotal * multiplier),
+            votedOptionId: state.votedOptionId,
+        };
+    }, [state.poll, state.pollResults, state.votedOptionId, multiplier]);
+    /**
+     * What `voteInPoll` reads at the moment it fires.
+     *
+     * Through a ref rather than a dependency so the action stays identity-stable: `actions` goes into
+     * effect dependency arrays, and rebuilding it when a poll opens would re-run them — including the
+     * one that binds the video, which is a real `startPlayingStream`.
+     */
+    const voteContextRef = (0, react_1.useRef)({
+        poll: state.poll,
+        votedOptionId: state.votedOptionId,
+        streamingId: stream === null || stream === void 0 ? void 0 : stream.streamingId,
+    });
+    voteContextRef.current = {
+        poll: state.poll,
+        votedOptionId: state.votedOptionId,
+        streamingId: stream === null || stream === void 0 ? void 0 : stream.streamingId,
+    };
+    /**
+     * The poll this install has already submitted for, set synchronously.
+     *
+     * `voteContextRef` is only as fresh as the last committed render, so two taps in one frame both
+     * read "not voted yet". The reducer ignores the second, but the request had already gone out — two
+     * votes on the server from one device, which the multiplier then doubles again.
+     */
+    const submittedPollRef = (0, react_1.useRef)(null);
+    /**
+     * Reads back a vote cast in an earlier session.
+     *
+     * The room is re-joined on far more than a fresh install — a relaunch, a long spell in the
+     * background, a Fast Refresh — and each starts this reducer from nothing while the poll on the wire
+     * carries on. Without this the viewer is re-offered a poll they answered, and the service, which
+     * does not dedupe, would count them twice.
+     */
+    (0, react_1.useEffect)(() => {
+        var _a;
+        const pollUuid = (_a = state.poll) === null || _a === void 0 ? void 0 : _a.pollUuid;
+        if (!pollUuid || state.votedOptionId)
+            return;
+        let alive = true;
+        void liveSelling_1.liveSelling.polls
+            .loadVotedOption(pollUuid)
+            .then((optionId) => {
+            if (!alive || !optionId)
+                return;
+            submittedPollRef.current = pollUuid;
+            dispatch({ kind: 'restoreVote', pollUuid, optionId });
+        })
+            .catch((caught) => logger.error(caught, { at: 'liveSession.votedOption' }));
+        return () => {
+            alive = false;
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [(_l = state.poll) === null || _l === void 0 ? void 0 : _l.pollUuid]);
+    const bindVideoView = (0, react_1.useCallback)((reactTag, force = false) => {
+        liveSelling_1.liveSelling.engine
+            .bindView(reactTag, force)
+            .catch((caught) => (0, client_1.getLogger)().error(caught, { at: 'liveSession.bindView' }));
+    }, []);
+    const sendComment = (0, react_1.useCallback)(async (text) => {
+        var _a;
+        if (!text.trim())
+            return;
+        try {
+            // The host mutes by device; a per-install viewer id is the same granularity.
+            const deviceId = (_a = viewerIdRef.current) !== null && _a !== void 0 ? _a : (await liveSelling_1.liveSelling.viewer.id());
+            const own = await liveSelling_1.liveSelling.engine.sendComment(text, deviceId);
+            if (own)
+                dispatch({ kind: 'ownComment', comment: own });
+        }
+        catch (caught) {
+            (0, client_1.getLogger)().error(caught, { at: 'liveSession.sendComment' });
+        }
+    }, []);
+    const sendReaction = (0, react_1.useCallback)(async (reactionUrl) => {
+        try {
+            await liveSelling_1.liveSelling.engine.sendReaction(reactionUrl);
+        }
+        catch (caught) {
+            (0, client_1.getLogger)().error(caught, { at: 'liveSession.sendReaction' });
+        }
+    }, []);
+    const announceAddToCart = (0, react_1.useCallback)(async (productTitle) => {
+        try {
+            await liveSelling_1.liveSelling.engine.sendCartAnnouncement(productTitle);
+        }
+        catch (caught) {
+            (0, client_1.getLogger)().error(caught, { at: 'liveSession.announceAddToCart' });
+        }
+    }, []);
+    /**
+     * Add to cart, then tell the room — and only in that order.
+     *
+     * A refused line (out of stock, or a hold someone else owns) must not be announced: that card is
+     * what everyone else in the room reads as "it is going".
+     */
+    const addToCart = (0, react_1.useCallback)(async (variantId, productTitle) => {
+        const adapter = (0, client_1.getCommerce)();
+        if (!(adapter === null || adapter === void 0 ? void 0 : adapter.addLine))
+            return false;
+        try {
+            const landed = await adapter.addLine(variantId, 1);
+            if (!landed)
+                return false;
+            await liveSelling_1.liveSelling.engine.sendCartAnnouncement(productTitle);
+            return true;
+        }
+        catch (caught) {
+            (0, client_1.getLogger)().error(caught, { at: 'liveSession.addToCart', variantId });
+            return false;
+        }
+    }, []);
+    const voteInPoll = (0, react_1.useCallback)(async (optionId) => {
+        var _a, _b, _c;
+        const { poll, votedOptionId, streamingId: current } = voteContextRef.current;
+        // One vote per install per poll. The tally is only revealed by voting, so a second tap is a
+        // double tap rather than a change of mind — and the endpoint cannot retract one.
+        if (!poll || votedOptionId || submittedPollRef.current === poll.pollUuid)
+            return;
+        const forStream = (_a = poll.streamingId) !== null && _a !== void 0 ? _a : current;
+        if (!forStream)
+            return;
+        // Claimed before anything awaits, so a second tap in the same frame cannot get past the guard.
+        submittedPollRef.current = poll.pollUuid;
+        dispatch({ kind: 'vote', optionId });
+        try {
+            const viewerId = (_b = viewerIdRef.current) !== null && _b !== void 0 ? _b : (await liveSelling_1.liveSelling.viewer.id());
+            await liveSelling_1.liveSelling.polls.vote({
+                streamingId: forStream,
+                pollUuid: poll.pollUuid,
+                viewerId,
+                optionId: (_c = poll.wireOptionIds[optionId]) !== null && _c !== void 0 ? _c : optionId,
+            });
+            // Written only once the service has counted it, so a failed request leaves no trace.
+            await liveSelling_1.liveSelling.polls.rememberVote(poll.pollUuid, optionId);
+        }
+        catch (caught) {
+            // Put it back the way it was: a vote that never landed must not look counted, or the viewer is
+            // locked out of the poll by a failure they cannot see.
+            submittedPollRef.current = null;
+            dispatch({ kind: 'voteFailed', optionId });
+            void liveSelling_1.liveSelling.polls.forgetVote(poll.pollUuid).catch(() => undefined);
+            (0, client_1.getLogger)().error(caught, { at: 'liveSession.voteInPoll' });
+        }
+    }, []);
+    /** Kept for the whole stint because the invite token is the only credential the leave endpoint has. */
+    const inviteTokenRef = (0, react_1.useRef)(null);
+    const joinAsGuest = (0, react_1.useCallback)(async (params) => {
+        const credentials = await liveSelling_1.liveSelling.guest.acceptInvite(params);
+        if (!credentials)
+            throw new Error('That invite could not be redeemed');
+        inviteTokenRef.current = params.inviteToken;
+        await liveSelling_1.liveSelling.engine.joinAsGuest(credentials, params.previewTag);
+        return credentials;
+    }, []);
+    const leaveGuest = (0, react_1.useCallback)(async () => {
+        const inviteToken = inviteTokenRef.current;
+        inviteTokenRef.current = null;
+        // Engine first, REST second, and the REST failure is swallowed: a stale slot server-side is
+        // recoverable (the host can remove it), whereas leaving the room joined is not — it would keep
+        // publishing this camera after the screen is gone.
+        await liveSelling_1.liveSelling.engine.leaveGuest();
+        if (!inviteToken)
+            return;
+        try {
+            await liveSelling_1.liveSelling.guest.leaveSlot(inviteToken);
+        }
+        catch (caught) {
+            (0, client_1.getLogger)().error(caught, { at: 'liveSession.leaveGuestSlot' });
+        }
+    }, []);
+    const setGuestMicMuted = (0, react_1.useCallback)((next) => liveSelling_1.liveSelling.engine.setGuestMicMuted(next), []);
+    const setGuestCameraOff = (0, react_1.useCallback)((off) => liveSelling_1.liveSelling.engine.setGuestCameraOff(off), []);
+    const flipGuestCamera = (0, react_1.useCallback)((front) => liveSelling_1.liveSelling.engine.flipGuestCamera(front), []);
+    const bindGuestPreview = (0, react_1.useCallback)((reactTag) => {
+        liveSelling_1.liveSelling.engine
+            .bindGuestPreview(reactTag)
+            .catch((caught) => (0, client_1.getLogger)().error(caught, { at: 'liveSession.bindGuestPreview' }));
+    }, []);
+    const bindGuestHostView = (0, react_1.useCallback)((reactTag) => {
+        liveSelling_1.liveSelling.engine
+            .bindGuestHostView(reactTag)
+            .catch((caught) => (0, client_1.getLogger)().error(caught, { at: 'liveSession.bindGuestHostView' }));
+    }, []);
+    const chooseViewerName = (0, react_1.useCallback)(async (raw) => {
+        const saved = await liveSelling_1.liveSelling.viewer.saveName(raw);
+        if (saved)
+            setChosenName(saved);
+        return saved;
+    }, []);
+    const applyMuted = (0, react_1.useCallback)((next) => {
+        setMuted(next);
+        liveSelling_1.liveSelling.engine.setMuted(next);
+    }, []);
+    const enterPip = (0, react_1.useCallback)(() => setPipMode('inapp'), []);
+    const exitPip = (0, react_1.useCallback)((options) => {
+        setPipMode('none');
+        if (!(options === null || options === void 0 ? void 0 : options.stopVideo))
+            return;
+        liveSelling_1.liveSelling.engine
+            .stopPlayback()
+            .catch((caught) => (0, client_1.getLogger)().error(caught, { at: 'liveSession.exitPip' }));
+    }, []);
+    /**
+     * The lot under the hammer.
+     *
+     * The host names it when opening the round, and that wins over the featured product: the host opens
+     * a round on the lot it means to sell, while a viewer's product-change may not have landed yet.
+     * Bidding on the wrong lot because the card had not caught up is the failure this avoids.
+     */
+    const biddingLot = (0, react_1.useMemo)(() => {
+        var _a, _b;
+        const id = state.biddingStoreProductId;
+        if (!stream)
+            return null;
+        if (id)
+            return (_a = stream.products.find((product) => product.storeProductId === id)) !== null && _a !== void 0 ? _a : null;
+        return (_b = stream.products.find((product) => product.isCurrent)) !== null && _b !== void 0 ? _b : null;
+    }, [stream, state.biddingStoreProductId]);
+    /**
+     * The bidder, as the host will see them.
+     *
+     * `bidderId` and not the viewer id, because the host attributes the win to a customer and turns it
+     * into a cart. It is also what comes back on the host's broadcast, so `isLeading` compares like
+     * with like. Null when signed out, which is exactly when bidding is not offered.
+     */
+    const bidderEmail = (_o = (_m = identity === null || identity === void 0 ? void 0 : identity.customerEmail) === null || _m === void 0 ? void 0 : _m.call(identity)) !== null && _o !== void 0 ? _o : null;
+    const bidder = (0, react_1.useMemo)(() => (bidderId ? { userId: bidderId, userName: viewerName, email: bidderEmail } : null), [bidderId, viewerName, bidderEmail]);
+    const auction = (0, react_1.useMemo)(() => {
+        var _a, _b, _c, _d, _e, _f, _g;
+        // Falls back to the lot's opening price: until the first bid lands the host sends no next bid,
+        // and a slide-to-bid showing zero is worse than useless.
+        const nextBid = state.nextBid || (biddingLot === null || biddingLot === void 0 ? void 0 : biddingLot.baseBidPrice) || 0;
+        return {
+            biddingOpen: state.biddingOpen,
+            highestBid: state.highestBid,
+            nextBid,
+            timeLeftMs: (0, session_1.timeLeftMs)(state, auctionNow),
+            isLeading: !!bidder && ((_a = state.bidLeader) === null || _a === void 0 ? void 0 : _a.userId) === bidder.userId,
+            leaderName: (_c = (_b = state.bidLeader) === null || _b === void 0 ? void 0 : _b.userName) !== null && _c !== void 0 ? _c : null,
+            extended: state.auctionExtended,
+            storeProductId: (_e = (_d = state.biddingStoreProductId) !== null && _d !== void 0 ? _d : biddingLot === null || biddingLot === void 0 ? void 0 : biddingLot.storeProductId) !== null && _e !== void 0 ? _e : null,
+            lastWin: state.lastWin,
+            bidCap: (_f = stream === null || stream === void 0 ? void 0 : stream.bidCap) !== null && _f !== void 0 ? _f : null,
+            extendedBiddingMs: (_g = stream === null || stream === void 0 ? void 0 : stream.extendedBiddingMs) !== null && _g !== void 0 ? _g : 0,
+        };
+    }, [state, auctionNow, biddingLot, bidder, stream]);
+    const giveaway = (0, react_1.useMemo)(() => {
+        var _a, _b;
+        const result = state.giveawayResult;
+        // Entrant names come off the record's roster rather than the event, which carries only the
+        // winner. A draw the record has not caught up with still celebrates, with fewer names in it.
+        const settled = result
+            ? stream === null || stream === void 0 ? void 0 : stream.giveaways.find((item) => item.storeProductId === result.storeProductId && item.status === 'ended')
+            : undefined;
+        return {
+            active: state.giveawayStoreProductId
+                ? ((_a = stream === null || stream === void 0 ? void 0 : stream.giveaways.find((item) => item.storeProductId === state.giveawayStoreProductId)) !== null && _a !== void 0 ? _a : null)
+                : null,
+            entryCount: state.giveawayEntryCount,
+            registered: state.giveawayRegistered,
+            result: result
+                ? { winnerName: result.winnerName, entrantNames: (_b = settled === null || settled === void 0 ? void 0 : settled.entrantNames) !== null && _b !== void 0 ? _b : [] }
+                : null,
+        };
+    }, [
+        state.giveawayStoreProductId,
+        state.giveawayEntryCount,
+        state.giveawayRegistered,
+        state.giveawayResult,
+        stream,
+    ]);
+    /**
+     * The round, the stream and the bidder, for the actions to read when they fire.
+     *
+     * Through refs rather than dependencies, and that is not an optimisation: `actions` has to keep a
+     * stable identity, because callers put it in effect dependency arrays and one of those effects
+     * rebinds the video. Depending on the round directly would mint a new `placeBid`, and so a new
+     * `actions`, on every comment and every viewer-count update.
+     */
+    const roundRef = (0, react_1.useRef)({ auction, moderatorId: state.moderatorId, endsAtMs, serverOffsetMs });
+    roundRef.current = { auction, moderatorId: state.moderatorId, endsAtMs, serverOffsetMs };
+    const streamRef = (0, react_1.useRef)(stream);
+    streamRef.current = stream;
+    const bidderRef = (0, react_1.useRef)(bidder);
+    bidderRef.current = bidder;
+    const giveawayLotRef = (0, react_1.useRef)(state.giveawayStoreProductId);
+    giveawayLotRef.current = state.giveawayStoreProductId;
+    const customerRefRef = (0, react_1.useRef)(customerRef);
+    customerRefRef.current = customerRef;
+    const viewerNameRef = (0, react_1.useRef)(viewerName);
+    viewerNameRef.current = viewerName;
+    /**
+     * Offers a bid to the moderator and records it.
+     *
+     * Both paths run, and the order matters: the engine first because that is what moves the round,
+     * REST second because that is what survives. A REST failure is logged rather than surfaced — the
+     * bid is already in flight, and telling the bidder it failed when the host has accepted it would be
+     * a lie.
+     */
+    const placeBid = (0, react_1.useCallback)(async (options) => {
+        var _a, _b;
+        const round = roundRef.current;
+        const current = streamRef.current;
+        const who = bidderRef.current;
+        if (!current || !who)
+            return;
+        const amount = (_a = options === null || options === void 0 ? void 0 : options.amount) !== null && _a !== void 0 ? _a : round.auction.nextBid;
+        if (!amount || amount <= 0)
+            return;
+        try {
+            await liveSelling_1.liveSelling.engine.sendBid({
+                bidAmount: amount,
+                bidder: who,
+                moderatorId: round.moderatorId,
+                // Where in the round the bid landed, on the host's clock — the host uses it to order bids
+                // that arrive within the same instant.
+                placedAtMs: round.endsAtMs - Math.max(0, round.endsAtMs - (Date.now() + round.serverOffsetMs)),
+                variantId: (_b = options === null || options === void 0 ? void 0 : options.variantId) !== null && _b !== void 0 ? _b : null,
+            });
+        }
+        catch (caught) {
+            (0, client_1.getLogger)().error(caught, { at: 'liveSession.placeBid', amount });
+        }
+        try {
+            await liveSelling_1.liveSelling.auctions.recordBid({
+                streamingId: current.streamingId,
+                amount,
+                bidderId: who.userId,
+                bidderName: who.userName,
+                storeProductId: round.auction.storeProductId,
+            });
+        }
+        catch (caught) {
+            (0, client_1.getLogger)().error(caught, { at: 'liveSession.recordBid', amount });
+        }
+    }, []);
+    const enterGiveaway = (0, react_1.useCallback)(async () => {
+        var _a;
+        const lot = giveawayLotRef.current;
+        const current = streamRef.current;
+        const customer = customerRefRef.current;
+        if (!current || !lot || !customer)
+            return;
+        try {
+            const viewerId = (_a = viewerIdRef.current) !== null && _a !== void 0 ? _a : (await liveSelling_1.liveSelling.viewer.id());
+            const entered = await liveSelling_1.liveSelling.auctions.enterGiveaway({
+                streamingId: current.streamingId,
+                storeProductId: lot,
+                customerGid: customer,
+                displayName: viewerNameRef.current,
+                viewerId,
+            });
+            // Only on the host's confirmation. The entry count follows from its own push, so nothing here
+            // guesses at it.
+            if (entered)
+                dispatch({ kind: 'giveawayRegistered' });
+        }
+        catch (caught) {
+            (0, client_1.getLogger)().error(caught, { at: 'liveSession.enterGiveaway' });
+        }
+    }, []);
+    const dismissAuctionWin = (0, react_1.useCallback)(() => dispatch({ kind: 'dismissWin' }), []);
+    const dismissGiveawayResult = (0, react_1.useCallback)(() => dispatch({ kind: 'dismissGiveawayResult' }), []);
+    // Every callback above is identity-stable, so this object is minted once. That is deliberate:
+    // callers put `actions` in effect dependency arrays, and a fresh object each render makes those
+    // effects re-run every render — which meant re-binding the video on every state tick.
+    const actions = (0, react_1.useMemo)(() => ({
+        bindVideoView,
+        sendComment,
+        sendReaction,
+        announceAddToCart,
+        addToCart,
+        voteInPoll,
+        chooseViewerName,
+        joinAsGuest,
+        leaveGuest,
+        setGuestMicMuted,
+        setGuestCameraOff,
+        flipGuestCamera,
+        bindGuestPreview,
+        bindGuestHostView,
+        setMuted: applyMuted,
+        enterPip,
+        exitPip,
+        placeBid,
+        enterGiveaway,
+        dismissAuctionWin,
+        dismissGiveawayResult,
+    }), [
+        bindVideoView,
+        sendComment,
+        sendReaction,
+        announceAddToCart,
+        addToCart,
+        voteInPoll,
+        chooseViewerName,
+        joinAsGuest,
+        leaveGuest,
+        setGuestMicMuted,
+        setGuestCameraOff,
+        flipGuestCamera,
+        bindGuestPreview,
+        bindGuestHostView,
+        applyMuted,
+        enterPip,
+        exitPip,
+        placeBid,
+        enterGiveaway,
+        dismissAuctionWin,
+        dismissGiveawayResult,
+    ]);
+    return {
+        status,
+        stream: stream !== null && stream !== void 0 ? stream : null,
+        viewerCount: Math.round(state.rawViewerCount * multiplier),
+        rawViewerCount: state.rawViewerCount,
+        comments: state.comments,
+        activeProduct,
+        products,
+        sold: state.sold,
+        reactions: state.reactions,
+        poll,
+        viewerName: namedBy,
+        guest: {
+            mode: state.guestMode,
+            status: state.guestStatus,
+            slot: state.guestSlot,
+            mutedByHost: state.guestMutedByHost,
+            cameraOffByHost: state.guestCameraOffByHost,
+            mixerLayout: state.mixerLayout,
+        },
+        muted,
+        videoTag: state.videoTag,
+        elapsedMs,
+        pipMode,
+        auction,
+        giveaway,
+        error,
+        actions,
+    };
+}
+/**
+ * Holds one live session for the whole app. Nothing is joined while no stream is live, so the engine
+ * stays idle on an ordinary session.
+ *
+ * Goes *inside* `LiveSellingProvider`, which is what configures the client.
+ */
+function LiveSessionProvider({ children, ...props }) {
+    const session = useSessionValue(props);
+    return (0, react_1.createElement)(LiveSessionContext.Provider, { value: session }, children);
+}
+//# sourceMappingURL=useLiveSession.js.map