@streamplace/components 0.6.37 → 1.0.0

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

@@ -1,146 +0,0 @@
-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 })),
-        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 })),
-        // * 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 })),
-        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 };
-        }),
-    }));
-};
-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

@@ -1,109 +0,0 @@
-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

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

package/dist/streamplace-provider/index.js

@@ -1,16 +0,0 @@
-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

@@ -1,46 +0,0 @@
-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/index.js

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

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

@@ -1,37 +0,0 @@
-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

@@ -1,47 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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]);
-}

package/src/index.tsx

@@ -1,6 +0,0 @@
-// barrel file :)
-export * from "./livestream-provider";
-export * from "./livestream-store";
-export * from "./player-store";
-export * from "./streamplace-provider";
-export * from "./streamplace-store";

package/src/livestream-provider/index.tsx

@@ -1,37 +0,0 @@
-import React, { useContext, useRef } from "react";
-import { LivestreamContext, makeLivestreamStore } from "../livestream-store";
-import { useLivestreamWebsocket } from "./websocket";
-
-export function LivestreamProvider({
-  children,
-  src,
-}: {
-  children: React.ReactNode;
-  src: string;
-}) {
-  const context = useContext(LivestreamContext);
-  const store = useRef(makeLivestreamStore()).current;
-  if (context) {
-    // this is ok, there's use cases for having one in another
-    // like having a player component that's independently usable
-    // but can also be embedded within an entire livestream page
-    return <>{children}</>;
-  }
-  (window as any).livestreamStore = store;
-  return (
-    <LivestreamContext.Provider value={{ store: store }}>
-      <LivestreamPoller src={src}>{children}</LivestreamPoller>
-    </LivestreamContext.Provider>
-  );
-}
-
-export function LivestreamPoller({
-  children,
-  src,
-}: {
-  children: React.ReactNode;
-  src: string;
-}) {
-  useLivestreamWebsocket(src);
-  return <>{children}</>;
-}

package/src/livestream-provider/websocket.tsx

@@ -1,47 +0,0 @@
-import { useRef } from "react";
-import useWebSocket from "react-use-websocket";
-import { useHandleWebsocketMessages } from "../livestream-store";
-import { useUrl } from "../streamplace-store";
-
-export function useLivestreamWebsocket(src: string) {
-  const url = useUrl();
-  const handleWebSocketMessages = useHandleWebsocketMessages();
-
-  let wsUrl = url.replace(/^http\:/, "ws:");
-  wsUrl = wsUrl.replace(/^https\:/, "wss:");
-
-  const ref = useRef<any[]>([]);
-  const handle = useRef<NodeJS.Timeout | null>(null);
-
-  const { readyState } = useWebSocket(`${wsUrl}/api/websocket/${src}`, {
-    reconnectInterval: 1000,
-    shouldReconnect: () => true,
-
-    onOpen: () => {
-      ref.current = [];
-    },
-
-    onError: (e) => {
-      console.log("onError", e);
-    },
-
-    // spamming the redux store with messages causes a zillion re-renders,
-    // so we batch them up a bit
-    onMessage: (msg) => {
-      try {
-        const data = JSON.parse(msg.data);
-        ref.current.push(data);
-        if (handle.current) {
-          return;
-        }
-        handle.current = setTimeout(() => {
-          handleWebSocketMessages(ref.current);
-          ref.current = [];
-          handle.current = null;
-        }, 250);
-      } catch (e) {
-        console.log("onMessage parse error", e);
-      }
-    },
-  });
-}