@streamplace/components 0.7.18 → 0.7.21

package/dist/livestream-store/stream-key.js

@@ -0,0 +1,88 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStreamKey = void 0;
+const crypto_1 = require("@atproto/crypto");
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const accounts_1 = require("viem/accounts");
+const browser_1 = require("../lib/browser");
+const xrpc_1 = require("../streamplace-store/xrpc");
+const livestream_store_1 = require("./livestream-store");
+const useStreamKey = () => {
+    const pdsAgent = (0, xrpc_1.usePDSAgent)();
+    const streamKey = (0, livestream_store_1.useLivestreamStore)((state) => state.streamKey);
+    const setStreamKey = (0, livestream_store_1.useLivestreamStore)((state) => state.setStreamKey);
+    const [key, setKey] = (0, react_1.useState)(streamKey ? JSON.parse(streamKey) : null);
+    const [error, setError] = (0, react_1.useState)(null);
+    (0, react_1.useEffect)(() => {
+        if (key)
+            return; // already have key
+        const generateKey = async () => {
+            if (!pdsAgent) {
+                setError("PDS Agent is not available");
+                return;
+            }
+            let did = pdsAgent.did;
+            if (!did) {
+                setError("PDS Agent did is not available (not logged in?)");
+                return;
+            }
+            const keypair = await crypto_1.Secp256k1Keypair.create({ exportable: true });
+            const exportedKey = await keypair.export();
+            const didBytes = new TextEncoder().encode(did);
+            const combinedKey = new Uint8Array([...exportedKey, ...didBytes]);
+            const multibaseKey = (0, crypto_1.bytesToMultibase)(combinedKey, "base58btc");
+            const hexKey = Array.from(exportedKey)
+                .map((b) => b.toString(16).padStart(2, "0"))
+                .join("");
+            const account = (0, accounts_1.privateKeyToAccount)(`0x${hexKey}`);
+            const newKey = {
+                privateKey: multibaseKey,
+                did: keypair.did(),
+                address: account.address.toLowerCase(),
+            };
+            let platform = react_native_1.Platform.OS;
+            if (react_native_1.Platform.OS === "web" &&
+                typeof window !== "undefined" &&
+                window.navigator) {
+                if (window.navigator.userAgent.includes("streamplace-desktop")) {
+                    platform = "Desktop";
+                }
+                else {
+                    platform = (0, browser_1.getBrowserName)(window.navigator.userAgent);
+                    if (platform !== "unknown") {
+                        platform = platform;
+                    }
+                }
+            }
+            else if (platform === "android") {
+                platform = "Android";
+            }
+            else if (platform === "ios") {
+                platform = "iOS";
+            }
+            else if (platform === "macos") {
+                platform = "macOS";
+            }
+            else if (platform === "windows") {
+                platform = "Windows";
+            }
+            const record = {
+                signingKey: keypair.did(),
+                createdAt: new Date().toISOString(),
+                createdBy: "Streamplace on " + platform,
+            };
+            await pdsAgent.com.atproto.repo.createRecord({
+                repo: did,
+                collection: "place.stream.key",
+                record,
+            });
+            setStreamKey(JSON.stringify(newKey));
+            setKey(newKey);
+        };
+        generateKey();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [key, setStreamKey]);
+    return { streamKey: key, error };
+};
+exports.useStreamKey = useStreamKey;

package/dist/livestream-store/websocket-consumer.js

@@ -0,0 +1,94 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.handleWebSocketMessages = void 0;
+const api_1 = require("@atproto/api");
+const streamplace_1 = require("streamplace");
+const system_messages_1 = require("../lib/system-messages");
+const chat_1 = require("./chat");
+const problems_1 = require("./problems");
+const MAX_RECENT_SEGMENTS = 10;
+const handleWebSocketMessages = (state, messages) => {
+    for (const message of messages) {
+        if (streamplace_1.PlaceStreamLivestream.isLivestreamView(message)) {
+            const newLivestream = message;
+            const oldLivestream = state.livestream;
+            // check if this is actually new
+            if (!oldLivestream || oldLivestream.uri !== newLivestream.uri) {
+                const streamTitle = newLivestream.record.title || "something cool!";
+                const systemMessage = system_messages_1.SystemMessages.streamStart(streamTitle);
+                // set proper times
+                systemMessage.indexedAt = newLivestream.indexedAt;
+                systemMessage.record.createdAt = newLivestream.record.createdAt;
+                state = (0, chat_1.reduceChat)(state, [systemMessage], []);
+            }
+            state = {
+                ...state,
+                livestream: newLivestream,
+            };
+        }
+        else if (streamplace_1.PlaceStreamLivestream.isViewerCount(message)) {
+            state = {
+                ...state,
+                viewers: message.count,
+            };
+        }
+        else if (streamplace_1.PlaceStreamChatDefs.isMessageView(message)) {
+            // Explicitly map MessageView to MessageViewHydrated
+            const hydrated = {
+                uri: message.uri,
+                cid: message.cid,
+                author: message.author,
+                record: message.record,
+                indexedAt: message.indexedAt,
+                chatProfile: message.chatProfile,
+                replyTo: message.replyTo,
+                deleted: message.deleted,
+            };
+            state = (0, chat_1.reduceChat)(state, [hydrated], [], []);
+        }
+        else if (streamplace_1.PlaceStreamSegment.isRecord(message)) {
+            const newRecentSegments = [...state.recentSegments];
+            newRecentSegments.unshift(message);
+            if (newRecentSegments.length > MAX_RECENT_SEGMENTS) {
+                newRecentSegments.pop();
+            }
+            state = {
+                ...state,
+                segment: message,
+                recentSegments: newRecentSegments,
+                problems: (0, problems_1.findProblems)(newRecentSegments),
+            };
+        }
+        else if (streamplace_1.PlaceStreamDefs.isBlockView(message)) {
+            const block = message;
+            state = (0, chat_1.reduceChat)(state, [], [block], []);
+        }
+        else if (streamplace_1.PlaceStreamDefs.isRenditions(message)) {
+            state = {
+                ...state,
+                renditions: message.renditions,
+            };
+        }
+        else if (api_1.AppBskyActorDefs.isProfileViewBasic(message)) {
+            state = {
+                ...state,
+                profile: message,
+            };
+        }
+        else if (streamplace_1.PlaceStreamChatGate.isRecord(message)) {
+            const hideRecord = message;
+            const hiddenMessageUri = hideRecord.hiddenMessage;
+            const newPendingHides = [...state.pendingHides];
+            if (!newPendingHides.includes(hiddenMessageUri)) {
+                newPendingHides.push(hiddenMessageUri);
+            }
+            state = {
+                ...state,
+                pendingHides: newPendingHides,
+            };
+            state = (0, chat_1.reduceChat)(state, [], [], [hiddenMessageUri]);
+        }
+    }
+    return (0, chat_1.reduceChat)(state, [], [], []);
+};
+exports.handleWebSocketMessages = handleWebSocketMessages;

package/dist/player-store/context.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PlayerContext = void 0;
+const react_1 = require("react");
+exports.PlayerContext = (0, react_1.createContext)(null);

package/dist/player-store/index.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+// barrel file :)
+tslib_1.__exportStar(require("./context"), exports);
+tslib_1.__exportStar(require("./player-provider"), exports);
+tslib_1.__exportStar(require("./player-state"), exports);
+tslib_1.__exportStar(require("./player-store"), exports);
+tslib_1.__exportStar(require("./single-player-provider"), exports);

package/dist/player-store/player-provider.js

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PlayerProvider = void 0;
+exports.withPlayerProvider = withPlayerProvider;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const crypto_1 = require("crypto");
+const react_1 = require("react");
+const context_1 = require("./context");
+const player_store_1 = require("./player-store");
+const PlayerProvider = ({ children, initialPlayers = [], defaultId = Math.random().toString(36).slice(8), }) => {
+    const [players, setPlayers] = (0, react_1.useState)(() => {
+        // Initialize with any initial player IDs provided
+        const initialPlayerStores = {};
+        for (const playerId of initialPlayers) {
+            initialPlayerStores[playerId] = (0, player_store_1.makePlayerStore)(playerId);
+        }
+        // Always create at least one player by default
+        if (initialPlayers.length === 0) {
+            initialPlayerStores[defaultId] = (0, player_store_1.makePlayerStore)(defaultId);
+        }
+        return initialPlayerStores;
+    });
+    const createPlayer = (0, react_1.useCallback)((id) => {
+        const playerId = id || (0, crypto_1.randomUUID)();
+        const playerStore = (0, player_store_1.makePlayerStore)(playerId);
+        setPlayers((prev) => ({
+            ...prev,
+            [playerId]: playerStore,
+        }));
+        return playerId;
+    }, []);
+    const removePlayer = (0, react_1.useCallback)((id) => {
+        setPlayers((prev) => {
+            // Don't remove the last player
+            if (Object.keys(prev).length <= 1) {
+                console.warn("Cannot remove the last player");
+                return prev;
+            }
+            const newPlayers = { ...prev };
+            delete newPlayers[id];
+            return newPlayers;
+        });
+    }, []);
+    const contextValue = (0, react_1.useMemo)(() => ({
+        players,
+        createPlayer,
+        removePlayer,
+    }), [players, createPlayer, removePlayer]);
+    return ((0, jsx_runtime_1.jsx)(context_1.PlayerContext.Provider, { value: contextValue, children: children }));
+};
+exports.PlayerProvider = PlayerProvider;
+// HOC to wrap components that need player context
+function withPlayerProvider(Component) {
+    return function WithPlayerProvider(props) {
+        const { initialPlayers, ...componentProps } = props;
+        return ((0, jsx_runtime_1.jsx)(exports.PlayerProvider, { initialPlayers: initialPlayers, children: (0, jsx_runtime_1.jsx)(Component, { ...componentProps }) }));
+    };
+}

package/dist/player-store/player-state.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IngestMediaSource = exports.PlayerStatus = exports.PlayerProtocol = void 0;
+var PlayerProtocol;
+(function (PlayerProtocol) {
+    PlayerProtocol["WEBRTC"] = "webrtc";
+    PlayerProtocol["HLS"] = "hls";
+    PlayerProtocol["PROGRESSIVE_MP4"] = "progressive-mp4";
+    PlayerProtocol["PROGRESSIVE_WEBM"] = "progressive-webm";
+})(PlayerProtocol || (exports.PlayerProtocol = PlayerProtocol = {}));
+var PlayerStatus;
+(function (PlayerStatus) {
+    PlayerStatus["START"] = "start";
+    PlayerStatus["PLAYING"] = "playing";
+    PlayerStatus["STALLED"] = "stalled";
+    PlayerStatus["SUSPEND"] = "suspend";
+    PlayerStatus["WAITING"] = "waiting";
+    PlayerStatus["PAUSE"] = "pause";
+    PlayerStatus["MUTE"] = "mute";
+})(PlayerStatus || (exports.PlayerStatus = PlayerStatus = {}));
+var IngestMediaSource;
+(function (IngestMediaSource) {
+    IngestMediaSource["USER"] = "user";
+    IngestMediaSource["DISPLAY"] = "display";
+})(IngestMediaSource || (exports.IngestMediaSource = IngestMediaSource = {}));

package/dist/player-store/player-store.js

@@ -0,0 +1,201 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useOffline = exports.intoPlayerProtocol = exports.usePlayerProtocol = exports.makePlayerStore = void 0;
+exports.usePlayerContext = usePlayerContext;
+exports.getPlayerStoreById = getPlayerStoreById;
+exports.getFirstPlayerID = getFirstPlayerID;
+exports.getPlayerStoreFromContext = getPlayerStoreFromContext;
+exports.usePlayerStore = usePlayerStore;
+const react_1 = require("react");
+const zustand_1 = require("zustand");
+const livestream_store_1 = require("../livestream-store");
+const context_1 = require("./context");
+const player_state_1 = require("./player-state");
+const makePlayerStore = (id) => {
+    return (0, zustand_1.createStore)()((set) => ({
+        id: id || Math.random().toString(36).slice(8),
+        selectedRendition: "source",
+        setSelectedRendition: (rendition) => set((state) => ({ ...state, selectedRendition: rendition })),
+        protocol: player_state_1.PlayerProtocol.WEBRTC,
+        setProtocol: (protocol) => set((state) => ({ ...state, protocol: protocol })),
+        src: "",
+        setSrc: (src) => set(() => ({ src })),
+        ingestStarting: false,
+        setIngestStarting: (ingestStarting) => set(() => ({ ingestStarting })),
+        ingestMediaSource: undefined,
+        setIngestMediaSource: (ingestMediaSource) => set(() => ({ ingestMediaSource })),
+        ingestCamera: "user",
+        setIngestCamera: (ingestCamera) => set(() => ({ ingestCamera })),
+        ingestConnectionState: null,
+        setIngestConnectionState: (ingestConnectionState) => set(() => ({ ingestConnectionState })),
+        ingestAutoStart: false,
+        setIngestAutoStart: (ingestAutoStart) => set(() => ({ ingestAutoStart })),
+        ingestStarted: null,
+        setIngestStarted: (timestamp) => set(() => ({ ingestStarted: timestamp })),
+        muted: false,
+        setMuted: (isMuted) => set(() => ({ muted: isMuted, muteWasForced: false })),
+        volume: 1.0,
+        setVolume: (volume) => set(() => ({ volume, muteWasForced: false })),
+        fullscreen: false,
+        setFullscreen: (isFullscreen) => set(() => ({ fullscreen: isFullscreen })),
+        status: player_state_1.PlayerStatus.START,
+        setStatus: (status) => set(() => ({ status })),
+        playTime: 0,
+        setPlayTime: (playTime) => set(() => ({ playTime })),
+        videoRef: undefined,
+        setVideoRef: (videoRef) => set(() => ({ videoRef })),
+        pipMode: false,
+        setPipMode: (pipMode) => set(() => ({ pipMode })),
+        // Picture-in-Picture action function (set by player component)
+        pipAction: undefined,
+        setPipAction: (action) => set(() => ({ pipAction: action })),
+        // Player element width/height setters for global sync
+        playerWidth: undefined,
+        setPlayerWidth: (playerWidth) => set(() => ({ playerWidth })),
+        playerHeight: undefined,
+        setPlayerHeight: (playerHeight) => set(() => ({ playerHeight })),
+        // * Whether mute was forced by the browser or not for autoplay
+        // * Will get set to 'false' if the user has interacted with the volume
+        muteWasForced: false,
+        setMuteWasForced: (muteWasForced) => set(() => ({ muteWasForced })),
+        autoplayFailed: false,
+        setAutoplayFailed: (autoplayFailed) => set(() => ({ autoplayFailed })),
+        embedded: false,
+        setEmbedded: (embedded) => set(() => ({ embedded })),
+        showControls: true,
+        controlsTimeout: undefined,
+        setShowControls: (showControls) => set({ showControls, controlsTimeout: undefined }),
+        telemetry: true,
+        setTelemetry: (telemetry) => set(() => ({ telemetry })),
+        ingestLive: false,
+        setIngestLive: (ingestLive) => set(() => ({ ingestLive })),
+        reportingURL: null,
+        setReportingURL: (reportingURL) => set(() => ({ reportingURL })),
+        playerEvent: async (url, time, eventType, meta) => set((x) => {
+            const data = {
+                time: time,
+                playerId: x.id,
+                eventType: eventType,
+                meta: {
+                    ...meta,
+                },
+            };
+            try {
+                // fetch url from sp provider
+                const reportingURL = x.reportingURL ?? `${url}/api/player-event`;
+                fetch(reportingURL, {
+                    method: "POST",
+                    body: JSON.stringify(data),
+                });
+            }
+            catch (e) {
+                console.error("error sending player telemetry", e);
+            }
+            return {};
+        }),
+        // Clear the controls timeout, if it exists.
+        // Should be called on player unmount.
+        clearControlsTimeout: () => set((state) => {
+            if (state.controlsTimeout) {
+                clearTimeout(state.controlsTimeout);
+            }
+            return { controlsTimeout: undefined };
+        }),
+        setUserInteraction: () => set((p) => {
+            // controls timeout
+            if (p.controlsTimeout) {
+                clearTimeout(p.controlsTimeout);
+            }
+            let controlsTimeout = setTimeout(() => p.setShowControls(false), 1000);
+            return { showControls: true, controlsTimeout };
+        }),
+        showDebugInfo: false,
+        setShowDebugInfo: (showDebugInfo) => set(() => ({ showDebugInfo })),
+        modMessage: null,
+        setModMessage: (modMessage) => set(() => ({ modMessage })),
+        reportModalOpen: false,
+        setReportModalOpen: (reportModalOpen) => set(() => ({ reportModalOpen })),
+        reportSubject: null,
+        setReportSubject: (subject) => set(() => ({ reportSubject: subject })),
+    }));
+};
+exports.makePlayerStore = makePlayerStore;
+function usePlayerContext() {
+    const context = (0, react_1.useContext)(context_1.PlayerContext);
+    if (!context) {
+        throw new Error("usePlayerContext must be used within a PlayerProvider");
+    }
+    return context;
+}
+// Get a specific player store by ID
+function getPlayerStoreById(id) {
+    const { players } = usePlayerContext();
+    const playerStore = players[id];
+    if (!playerStore) {
+        throw new Error(`No player found with ID: ${id}`);
+    }
+    return playerStore;
+}
+// Will get the first player ID in the context
+function getFirstPlayerID() {
+    const { players } = usePlayerContext();
+    const playerIds = Object.keys(players);
+    if (playerIds.length === 0) {
+        throw new Error("No players found in context");
+    }
+    return playerIds[0];
+}
+function getPlayerStoreFromContext() {
+    console.warn("getPlayerStoreFromContext is deprecated. Use getPlayerStoreById instead.");
+    const { players } = usePlayerContext();
+    const playerIds = Object.keys(players);
+    if (playerIds.length === 0) {
+        throw new Error("No players found in context");
+    }
+    return players[playerIds[0]];
+}
+// Use a specific player store by ID
+// If no ID is provided, it will use the first player in the context
+function usePlayerStore(selector, playerId) {
+    if (!playerId) {
+        playerId = Object.keys(usePlayerContext().players)[0];
+    }
+    const store = getPlayerStoreById(playerId);
+    return (0, zustand_1.useStore)(store, selector);
+}
+/* Convenience selectors/hooks */
+const usePlayerProtocol = (playerId) => usePlayerStore((x) => [x.protocol, x.setProtocol], playerId);
+exports.usePlayerProtocol = usePlayerProtocol;
+const intoPlayerProtocol = (protocol) => {
+    switch (protocol) {
+        case "hls":
+            return player_state_1.PlayerProtocol.HLS;
+        case "progressive-mp4":
+            return player_state_1.PlayerProtocol.PROGRESSIVE_MP4;
+        case "progressive-webm":
+            return player_state_1.PlayerProtocol.PROGRESSIVE_WEBM;
+        default:
+            return player_state_1.PlayerProtocol.WEBRTC;
+    }
+};
+exports.intoPlayerProtocol = intoPlayerProtocol;
+// returns true if the livestream has been offline for more than 10 seconds and we're not playing
+const useOffline = () => {
+    const status = usePlayerStore((x) => x.status);
+    const segment = (0, livestream_store_1.useLivestreamStore)((x) => x.segment);
+    const [now, setNow] = (0, react_1.useState)(Date.now());
+    (0, react_1.useEffect)(() => {
+        const interval = setInterval(() => {
+            setNow(Date.now());
+        }, 500);
+        return () => clearInterval(interval);
+    }, []);
+    if (status === player_state_1.PlayerStatus.PLAYING) {
+        return false;
+    }
+    if (!segment?.startTime) {
+        return false;
+    }
+    return now - Date.parse(segment.startTime) > 10000;
+};
+exports.useOffline = useOffline;

package/dist/player-store/single-player-provider.js

@@ -0,0 +1,121 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SinglePlayerProvider = void 0;
+exports.useSinglePlayerContext = useSinglePlayerContext;
+exports.useCurrentPlayerId = useCurrentPlayerId;
+exports.useCurrentPlayerStore = useCurrentPlayerStore;
+exports.useCurrentPlayerProtocol = useCurrentPlayerProtocol;
+exports.useCurrentPlayerRendition = useCurrentPlayerRendition;
+exports.useCurrentPlayerIngest = useCurrentPlayerIngest;
+exports.withSinglePlayer = withSinglePlayer;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = tslib_1.__importStar(require("react"));
+const zustand_1 = require("zustand");
+const player_store_1 = require("../player-store");
+const player_state_1 = require("./player-state");
+const SinglePlayerContext = (0, react_1.createContext)(null);
+/**
+ * Provider component for a single player that creates a scoped context
+ * This allows components to access a specific player's state without passing IDs around
+ */
+const SinglePlayerProvider = ({ children, playerId: providedPlayerId, protocol = player_state_1.PlayerProtocol.WEBRTC, rendition = "auto", }) => {
+    const { players, createPlayer } = (0, player_store_1.usePlayerContext)();
+    // Create or get a player ID
+    const playerId = (0, react_1.useMemo)(() => {
+        // If a player ID is provided and exists, use it
+        if (providedPlayerId && players[providedPlayerId]) {
+            return providedPlayerId;
+        }
+        // If a player ID is provided but doesn't exist, create it
+        if (providedPlayerId) {
+            return createPlayer(providedPlayerId);
+        }
+        // Otherwise create a new player
+        return createPlayer();
+    }, [providedPlayerId, players, createPlayer]);
+    // Get the player store
+    const playerStore = (0, react_1.useMemo)(() => {
+        return players[playerId];
+    }, [players, playerId]);
+    // Set initial protocol and rendition if provided
+    react_1.default.useEffect(() => {
+        if (protocol) {
+            playerStore.setState((state) => ({
+                ...state,
+                protocol,
+            }));
+        }
+        if (rendition) {
+            playerStore.setState((state) => ({
+                ...state,
+                selectedRendition: rendition,
+            }));
+        }
+    }, [playerStore, protocol, rendition]);
+    // Create context value
+    const contextValue = (0, react_1.useMemo)(() => ({
+        playerId,
+        playerStore,
+    }), [playerId, playerStore]);
+    return ((0, jsx_runtime_1.jsx)(SinglePlayerContext.Provider, { value: contextValue, children: children }));
+};
+exports.SinglePlayerProvider = SinglePlayerProvider;
+/**
+ * Hook to access the current single player context
+ */
+function useSinglePlayerContext() {
+    const context = (0, react_1.useContext)(SinglePlayerContext);
+    if (!context) {
+        throw new Error("useSinglePlayerContext must be used within a SinglePlayerProvider");
+    }
+    return context;
+}
+/**
+ * Hook to access the current player ID from the single player context
+ */
+function useCurrentPlayerId() {
+    const { playerId } = useSinglePlayerContext();
+    return playerId;
+}
+/**
+ * Hook to access state from the current player without needing to specify the ID
+ */
+function useCurrentPlayerStore(selector) {
+    const { playerStore } = useSinglePlayerContext();
+    return (0, zustand_1.useStore)(playerStore, selector);
+}
+/**
+ * Hook to get the protocol of the current player
+ */
+function useCurrentPlayerProtocol() {
+    return useCurrentPlayerStore((state) => [state.protocol, state.setProtocol]);
+}
+/**
+ * Hook to get the selected rendition of the current player
+ */
+function useCurrentPlayerRendition() {
+    return useCurrentPlayerStore((state) => [state.selectedRendition, state.setSelectedRendition]);
+}
+/**
+ * Hook to get the ingest state of the current player
+ */
+function useCurrentPlayerIngest() {
+    return useCurrentPlayerStore((state) => ({
+        starting: state.ingestStarting,
+        setStarting: state.setIngestStarting,
+        connectionState: state.ingestConnectionState,
+        setConnectionState: state.setIngestConnectionState,
+        startedTimestamp: state.ingestStarted,
+        setStartedTimestamp: state.setIngestStarted,
+    }));
+}
+/**
+ * HOC to wrap components with a SinglePlayerProvider
+ */
+function withSinglePlayer(Component) {
+    return function WithSinglePlayer(props) {
+        const { playerId, protocol, rendition, ...componentProps } = props;
+        return ((0, jsx_runtime_1.jsx)(exports.SinglePlayerProvider, { playerId: playerId, protocol: protocol, rendition: rendition, children: (0, jsx_runtime_1.jsx)(Component, { ...componentProps }) }));
+    };
+}

package/dist/streamplace-provider/context.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StreamplaceContext = void 0;
+const react_1 = require("react");
+exports.StreamplaceContext = (0, react_1.createContext)(null);

package/dist/streamplace-provider/index.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StreamplaceProvider = StreamplaceProvider;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const streamplace_store_1 = require("../streamplace-store/streamplace-store");
+const context_1 = require("./context");
+const poller_1 = tslib_1.__importDefault(require("./poller"));
+function StreamplaceProvider({ children, url, oauthSession, }) {
+    // todo: handle url changes?
+    const store = (0, react_1.useRef)((0, streamplace_store_1.makeStreamplaceStore)({ url })).current;
+    (0, react_1.useEffect)(() => {
+        store.setState({ url });
+    }, [url]);
+    (0, react_1.useEffect)(() => {
+        store.setState({ oauthSession });
+    }, [oauthSession]);
+    return ((0, jsx_runtime_1.jsx)(context_1.StreamplaceContext.Provider, { value: { store: store }, children: (0, jsx_runtime_1.jsx)(poller_1.default, { children: children }) }));
+}