@streamplace/components 0.0.1 → 0.7.0

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

@@ -0,0 +1,159 @@
+import { useContext } from "react";
+import { createStore, useStore } from "zustand";
+import { PlayerContext } from "./context";
+import { PlayerProtocol, PlayerStatus, } from "./player-state";
+export const makePlayerStore = (id) => {
+    return createStore()((set) => ({
+        id: id || Math.random().toString(36).slice(8),
+        selectedRendition: "source",
+        setSelectedRendition: (rendition) => set((state) => ({ ...state, selectedRendition: rendition })),
+        protocol: 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: PlayerStatus.START,
+        setStatus: (status) => set(() => ({ status })),
+        playTime: 0,
+        setPlayTime: (playTime) => set(() => ({ playTime })),
+        offline: false,
+        setOffline: (offline) => set(() => ({ offline })),
+        videoRef: undefined,
+        setVideoRef: (videoRef) => set(() => ({ videoRef })),
+        pipMode: false,
+        setPipMode: (pipMode) => set(() => ({ pipMode })),
+        // 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 })),
+        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 })),
+        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
+                fetch(`${url}/api/player-event`, {
+                    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 })),
+    }));
+};
+export function usePlayerContext() {
+    const context = useContext(PlayerContext);
+    if (!context) {
+        throw new Error("usePlayerContext must be used within a PlayerProvider");
+    }
+    return context;
+}
+// Get a specific player store by ID
+export 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
+export 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];
+}
+export 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
+export function usePlayerStore(selector, playerId) {
+    if (!playerId) {
+        playerId = Object.keys(usePlayerContext().players)[0];
+    }
+    const store = getPlayerStoreById(playerId);
+    return useStore(store, selector);
+}
+/* Convenience selectors/hooks */
+export const usePlayerProtocol = (playerId) => usePlayerStore((x) => [x.protocol, x.setProtocol], playerId);
+export const intoPlayerProtocol = (protocol) => {
+    switch (protocol) {
+        case "hls":
+            return PlayerProtocol.HLS;
+        case "progressive-mp4":
+            return PlayerProtocol.PROGRESSIVE_MP4;
+        case "progressive-webm":
+            return PlayerProtocol.PROGRESSIVE_WEBM;
+        default:
+            return PlayerProtocol.WEBRTC;
+    }
+};

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

@@ -0,0 +1,109 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { createContext, useContext, useMemo } from "react";
+import { useStore } from "zustand";
+import { usePlayerContext } from "../player-store";
+import { PlayerProtocol } from "./player-state";
+const SinglePlayerContext = 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
+ */
+export const SinglePlayerProvider = ({ children, playerId: providedPlayerId, protocol = PlayerProtocol.WEBRTC, rendition = "auto", }) => {
+    const { players, createPlayer } = usePlayerContext();
+    // Create or get a player ID
+    const playerId = 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 = useMemo(() => {
+        return players[playerId];
+    }, [players, playerId]);
+    // Set initial protocol and rendition if provided
+    React.useEffect(() => {
+        if (protocol) {
+            playerStore.setState((state) => ({
+                ...state,
+                protocol,
+            }));
+        }
+        if (rendition) {
+            playerStore.setState((state) => ({
+                ...state,
+                selectedRendition: rendition,
+            }));
+        }
+    }, [playerStore, protocol, rendition]);
+    // Create context value
+    const contextValue = useMemo(() => ({
+        playerId,
+        playerStore,
+    }), [playerId, playerStore]);
+    return (_jsx(SinglePlayerContext.Provider, { value: contextValue, children: children }));
+};
+/**
+ * Hook to access the current single player context
+ */
+export function useSinglePlayerContext() {
+    const context = 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
+ */
+export function useCurrentPlayerId() {
+    const { playerId } = useSinglePlayerContext();
+    return playerId;
+}
+/**
+ * Hook to access state from the current player without needing to specify the ID
+ */
+export function useCurrentPlayerStore(selector) {
+    const { playerStore } = useSinglePlayerContext();
+    return useStore(playerStore, selector);
+}
+/**
+ * Hook to get the protocol of the current player
+ */
+export function useCurrentPlayerProtocol() {
+    return useCurrentPlayerStore((state) => [state.protocol, state.setProtocol]);
+}
+/**
+ * Hook to get the selected rendition of the current player
+ */
+export function useCurrentPlayerRendition() {
+    return useCurrentPlayerStore((state) => [state.selectedRendition, state.setSelectedRendition]);
+}
+/**
+ * Hook to get the ingest state of the current player
+ */
+export 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
+ */
+export function withSinglePlayer(Component) {
+    return function WithSinglePlayer(props) {
+        const { playerId, protocol, rendition, ...componentProps } = props;
+        return (_jsx(SinglePlayerProvider, { playerId: playerId, protocol: protocol, rendition: rendition, children: _jsx(Component, { ...componentProps }) }));
+    };
+}

package/dist/streamplace-provider/context.js

@@ -0,0 +1,2 @@
+import { createContext } from "react";
+export const StreamplaceContext = createContext(null);

package/dist/streamplace-provider/index.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { makeStreamplaceStore } from "../streamplace-store/streamplace-store";
+import { StreamplaceContext } from "./context";
+import Poller from "./poller";
+export function StreamplaceProvider({ children, url, oauthSession, }) {
+    // todo: handle url changes?
+    const store = useRef(makeStreamplaceStore({ url })).current;
+    useEffect(() => {
+        store.setState({ url });
+    }, [url]);
+    useEffect(() => {
+        store.setState({ oauthSession });
+    }, [oauthSession]);
+    return (_jsx(StreamplaceContext.Provider, { value: { store: store }, children: _jsx(Poller, { children: children }) }));
+}

package/dist/streamplace-provider/poller.js

@@ -0,0 +1,46 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { useEffect } from "react";
+import { StreamplaceAgent } from "streamplace";
+import { useDID, useGetBskyProfile, useGetChatProfile, useStreamplaceStore, } from "../streamplace-store";
+import { usePDSAgent } from "../streamplace-store/xrpc";
+export default function Poller({ children }) {
+    const url = useStreamplaceStore((state) => state.url);
+    const setLiveUsers = useStreamplaceStore((state) => state.setLiveUsers);
+    const did = useDID();
+    const pdsAgent = usePDSAgent();
+    const getChatProfile = useGetChatProfile();
+    const getBskyProfile = useGetBskyProfile();
+    const liveUserRefresh = useStreamplaceStore((state) => state.liveUsersRefresh);
+    useEffect(() => {
+        if (pdsAgent && did) {
+            getChatProfile();
+            getBskyProfile();
+        }
+    }, [pdsAgent, did]);
+    useEffect(() => {
+        const agent = new StreamplaceAgent(url);
+        const go = async () => {
+            setLiveUsers({
+                liveUsersLoading: true,
+            });
+            try {
+                const res = await agent.place.stream.live.getLiveUsers();
+                setLiveUsers({
+                    liveUsers: res.data.streams || [],
+                    liveUsersLoading: false,
+                    liveUsersError: null,
+                });
+            }
+            catch (e) {
+                setLiveUsers({
+                    liveUsersLoading: false,
+                    liveUsersError: e.message,
+                });
+            }
+        };
+        go();
+        const handle = setInterval(go, 3000);
+        return () => clearInterval(handle);
+    }, [url, liveUserRefresh]);
+    return _jsx(_Fragment, { children: children });
+}

package/dist/streamplace-store/block.js

@@ -0,0 +1,23 @@
+import { usePDSAgent } from "./xrpc";
+export function useCreateBlockRecord() {
+    let agent = usePDSAgent();
+    return async (subjectDID) => {
+        if (!agent) {
+            throw new Error("No PDS agent found");
+        }
+        if (!agent.did) {
+            throw new Error("No user DID found, assuming not logged in");
+        }
+        const record = {
+            $type: "app.bsky.graph.block",
+            subject: subjectDID,
+            createdAt: new Date().toISOString(),
+        };
+        return await agent.com.atproto.repo.createRecord({
+            repo: agent.did,
+            collection: "app.bsky.graph.block",
+            record,
+        });
+        return record;
+    };
+}

package/dist/streamplace-store/index.js

@@ -0,0 +1,3 @@
+export * from "./stream";
+export * from "./streamplace-store";
+export * from "./user";

package/dist/streamplace-store/stream.js

@@ -0,0 +1,193 @@
+import { RichText } from "@atproto/api";
+import { useUrl } from "./streamplace-store";
+import { usePDSAgent } from "./xrpc";
+const uploadThumbnail = async (pdsAgent, customThumbnail) => {
+    if (customThumbnail) {
+        let tries = 0;
+        try {
+            let thumbnail = await pdsAgent.uploadBlob(customThumbnail);
+            while (thumbnail.data.blob.size === 0 &&
+                customThumbnail.size !== 0 &&
+                tries < 3) {
+                console.warn("Reuploading blob as blob sizes don't match! Blob size recieved is", thumbnail.data.blob.size, "and sent blob size is", customThumbnail.size);
+                thumbnail = await pdsAgent.uploadBlob(customThumbnail);
+            }
+            if (tries === 3) {
+                throw new Error("Could not successfully upload blob (tried thrice)");
+            }
+            if (thumbnail.success) {
+                console.log("Successfully uploaded thumbnail");
+                return thumbnail.data.blob;
+            }
+        }
+        catch (e) {
+            throw new Error("Error uploading thumbnail: " + e);
+        }
+    }
+};
+async function createNewPost(agent, record) {
+    try {
+        const post = await agent.post(record);
+        return { uri: post.uri, cid: post.cid };
+    }
+    catch (error) {
+        console.error("Error creating new post:", error);
+        throw error;
+    }
+}
+function buildGoLivePost(text, url, profile, params, thumbnail) {
+    const now = new Date();
+    const linkUrl = `${url.protocol}//${url.host}/${profile.handle}?${params.toString()}`;
+    const prefix = `🔴 LIVE `;
+    const textUrl = `${url.protocol}//${url.host}/${profile.handle}`;
+    const suffix = ` ${text}`;
+    const content = prefix + textUrl + suffix;
+    const rt = new RichText({ text: content });
+    rt.detectFacetsWithoutResolution();
+    const record = {
+        $type: "app.bsky.feed.post",
+        text: content,
+        "place.stream.livestream": {
+            url: linkUrl,
+            title: text,
+        },
+        facets: rt.facets,
+        createdAt: now.toISOString(),
+    };
+    record.embed = {
+        $type: "app.bsky.embed.external",
+        external: {
+            description: text,
+            thumb: thumbnail,
+            title: `@${profile.handle} is 🔴LIVE on ${url.host}!`,
+            uri: linkUrl,
+        },
+    };
+    return record;
+}
+export function useCreateStreamRecord() {
+    let agent = usePDSAgent();
+    let url = useUrl();
+    return async (title, customThumbnail, submitPost = true) => {
+        if (!agent) {
+            throw new Error("No PDS agent found");
+        }
+        if (!agent.did) {
+            throw new Error("No user DID found, assuming not logged in");
+        }
+        let thumbnail = undefined;
+        const u = new URL(url);
+        if (customThumbnail) {
+            try {
+                thumbnail = await uploadThumbnail(agent, customThumbnail);
+            }
+            catch (e) {
+                throw new Error(`Custom thumbnail upload failed ${e}`);
+            }
+        }
+        else {
+            // No custom thumbnail: fetch the server-side image and upload it
+            // try thrice lel
+            let tries = 0;
+            try {
+                for (; tries < 3; tries++) {
+                    try {
+                        console.log(`Fetching thumbnail from ${u.protocol}//${u.host}/api/playback/${agent.did}/stream.png`);
+                        const thumbnailRes = await fetch(`${u.protocol}//${u.host}/api/playback/${agent.did}/stream.png`);
+                        if (!thumbnailRes.ok) {
+                            throw new Error(`Failed to fetch thumbnail: ${thumbnailRes.status})`);
+                        }
+                        const thumbnailBlob = await thumbnailRes.blob();
+                        console.log(thumbnailBlob);
+                        thumbnail = await uploadThumbnail(agent, thumbnailBlob);
+                    }
+                    catch (e) {
+                        console.warn(`Failed to fetch thumbnail, retrying (${tries + 1}/3): ${e}`);
+                        // Wait 1 second before retrying
+                        await new Promise((resolve) => setTimeout(resolve, 2000));
+                        if (tries === 2) {
+                            throw new Error(`Failed to fetch thumbnail after 3 tries: ${e}`);
+                        }
+                    }
+                }
+            }
+            catch (e) {
+                throw new Error(`Thumbnail upload failed ${e}`);
+            }
+        }
+        let newPost = undefined;
+        if (submitPost) {
+            const did = agent.did;
+            const profile = await agent.getProfile({ actor: did });
+            if (!profile) {
+                throw new Error("No profile found for the user DID");
+            }
+            const params = new URLSearchParams({
+                did: did,
+                time: new Date().toISOString(),
+            });
+            let post = buildGoLivePost(title, u, profile.data, params, thumbnail);
+            newPost = await createNewPost(agent, post);
+            if (!newPost.uri || !newPost.cid) {
+                throw new Error("Cannot read properties of undefined (reading 'uri' or 'cid')");
+            }
+        }
+        const record = {
+            title: title,
+            url: url,
+            createdAt: new Date().toISOString(),
+            post: newPost,
+            thumb: thumbnail,
+        };
+        await agent.com.atproto.repo.createRecord({
+            repo: agent.did,
+            collection: "place.stream.livestream",
+            record,
+        });
+        return record;
+    };
+}
+export function useUpdateStreamRecord() {
+    let agent = usePDSAgent();
+    let url = useUrl();
+    return async (title, livestream, customThumbnail) => {
+        if (!agent) {
+            throw new Error("No PDS agent found");
+        }
+        if (!agent.did) {
+            throw new Error("No user DID found, assuming not logged in");
+        }
+        if (!livestream) {
+            throw new Error("No latest record");
+        }
+        let rkey = livestream.uri.split("/").pop();
+        let oldRecordValue = livestream.record;
+        if (!rkey) {
+            throw new Error("No rkey?");
+        }
+        let thumbnail = oldRecordValue.thumb;
+        // update thumbnail if a new one is provided
+        if (customThumbnail) {
+            try {
+                thumbnail = await uploadThumbnail(agent, customThumbnail);
+            }
+            catch (e) {
+                throw new Error(`Custom thumbnail upload failed ${e}`);
+            }
+        }
+        const record = {
+            title: title,
+            url: url,
+            createdAt: new Date().toISOString(),
+            post: oldRecordValue.post,
+            thumb: thumbnail,
+        };
+        await agent.com.atproto.repo.putRecord({
+            repo: agent.did,
+            collection: "place.stream.livestream",
+            rkey,
+            record,
+        });
+        return record;
+    };
+}

package/dist/streamplace-store/streamplace-store.js

@@ -0,0 +1,37 @@
+import { useContext } from "react";
+import { createStore, useStore } from "zustand";
+import { StreamplaceContext } from "../streamplace-provider/context";
+export const makeStreamplaceStore = ({ url, }) => {
+    return createStore()((set) => ({
+        url,
+        liveUsers: null,
+        setLiveUsers: (opts) => {
+            set({
+                ...opts,
+            });
+        },
+        liveUsersRefresh: 0,
+        liveUsersLoading: true,
+        liveUsersError: null,
+        oauthSession: null,
+        handle: null,
+        chatProfile: null,
+    }));
+};
+export function getStreamplaceStoreFromContext() {
+    const context = useContext(StreamplaceContext);
+    if (!context) {
+        throw new Error("useStreamplaceStore must be used within a StreamplaceProvider");
+    }
+    return context.store;
+}
+export function useStreamplaceStore(selector) {
+    return useStore(getStreamplaceStoreFromContext(), selector);
+}
+export const useUrl = () => useStreamplaceStore((x) => x.url);
+export const useDID = () => useStreamplaceStore((x) => x.oauthSession?.did);
+export const useHandle = () => useStreamplaceStore((x) => x.handle);
+export const useSetHandle = () => {
+    const store = getStreamplaceStoreFromContext();
+    return (handle) => store.setState({ handle });
+};

package/dist/streamplace-store/user.js

@@ -0,0 +1,47 @@
+import { PlaceStreamChatProfile } from "streamplace";
+import { getStreamplaceStoreFromContext, useDID, useStreamplaceStore, } from "./streamplace-store";
+import { usePDSAgent } from "./xrpc";
+export function useGetChatProfile() {
+    const did = useDID();
+    const pdsAgent = usePDSAgent();
+    const store = getStreamplaceStoreFromContext();
+    return async () => {
+        if (!did || !pdsAgent) {
+            throw new Error("No DID or PDS agent");
+        }
+        const res = await pdsAgent.com.atproto.repo.getRecord({
+            repo: did,
+            collection: "place.stream.chat.profile",
+            rkey: "self",
+        });
+        if (!res.success) {
+            throw new Error("Failed to get chat profile record");
+        }
+        if (PlaceStreamChatProfile.isRecord(res.data.value)) {
+            store.setState({ chatProfile: res.data.value });
+        }
+        else {
+            console.log("not a record", res.data.value);
+        }
+    };
+}
+export function useGetBskyProfile() {
+    const did = useDID();
+    const pdsAgent = usePDSAgent();
+    const store = getStreamplaceStoreFromContext();
+    return async () => {
+        if (!did || !pdsAgent) {
+            throw new Error("No DID or PDS agent");
+        }
+        const res = await pdsAgent.app.bsky.actor.getProfile({
+            actor: did,
+        });
+        if (!res.success) {
+            throw new Error("Failed to get chat profile record");
+        }
+        store.setState({ handle: res.data.handle });
+    };
+}
+export function useChatProfile() {
+    return useStreamplaceStore((x) => x.chatProfile);
+}

package/dist/streamplace-store/xrpc.js

@@ -0,0 +1,12 @@
+import { useMemo } from "react";
+import { StreamplaceAgent } from "streamplace";
+import { useStreamplaceStore } from ".";
+export function usePDSAgent() {
+    const oauthSession = useStreamplaceStore((state) => state.oauthSession);
+    return useMemo(() => {
+        if (!oauthSession) {
+            return null;
+        }
+        return new StreamplaceAgent(oauthSession);
+    }, [oauthSession]);
+}