@streamplace/components 0.6.37 → 1.0.0

package/src/player-store/player-store.tsx

@@ -1,217 +0,0 @@
-import { useContext } from "react";
-import { createStore, StoreApi, useStore } from "zustand";
-import { PlayerContext } from "./context";
-import {
-  IngestMediaSource,
-  PlayerEvent,
-  PlayerProtocol,
-  PlayerState,
-  PlayerStatus,
-} from "./player-state";
-
-export type PlayerStore = StoreApi<PlayerState>;
-
-export const makePlayerStore = (id?: string): StoreApi<PlayerState> => {
-  return createStore<PlayerState>()((set) => ({
-    id: id || Math.random().toString(36).slice(8),
-    selectedRendition: "source",
-    setSelectedRendition: (rendition: string) =>
-      set((state) => ({ ...state, selectedRendition: rendition })),
-    protocol: PlayerProtocol.WEBRTC,
-    setProtocol: (protocol: PlayerProtocol) =>
-      set((state) => ({ ...state, protocol: protocol })),
-
-    src: "",
-    setSrc: (src: string) => set(() => ({ src })),
-
-    ingestStarting: false,
-    setIngestStarting: (ingestStarting: boolean) =>
-      set(() => ({ ingestStarting })),
-
-    ingestMediaSource: undefined,
-    setIngestMediaSource: (ingestMediaSource: IngestMediaSource | undefined) =>
-      set(() => ({ ingestMediaSource })),
-
-    ingestConnectionState: null,
-    setIngestConnectionState: (
-      ingestConnectionState: RTCPeerConnectionState | null,
-    ) => set(() => ({ ingestConnectionState })),
-
-    ingestAutoStart: false,
-    setIngestAutoStart: (ingestAutoStart: boolean) =>
-      set(() => ({ ingestAutoStart })),
-
-    ingestStarted: null,
-    setIngestStarted: (timestamp: number | null) =>
-      set(() => ({ ingestStarted: timestamp })),
-
-    muted: false,
-    setMuted: (isMuted: boolean) =>
-      set(() => ({ muted: isMuted, muteWasForced: false })),
-
-    volume: 1.0,
-    setVolume: (volume: number) =>
-      set(() => ({ volume, muteWasForced: false })),
-
-    fullscreen: false,
-    setFullscreen: (isFullscreen: boolean) =>
-      set(() => ({ fullscreen: isFullscreen })),
-
-    status: PlayerStatus.START,
-    setStatus: (status: PlayerStatus) => set(() => ({ status })),
-
-    playTime: 0,
-    setPlayTime: (playTime: number) => set(() => ({ playTime })),
-
-    offline: false,
-    setOffline: (offline: boolean) => set(() => ({ offline })),
-
-    videoRef: undefined,
-    setVideoRef: (
-      videoRef:
-        | React.MutableRefObject<HTMLVideoElement | null>
-        | ((instance: HTMLVideoElement | null) => void)
-        | null
-        | undefined,
-    ) => set(() => ({ videoRef })),
-
-    pipMode: false,
-    setPipMode: (pipMode: boolean) => 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: boolean) =>
-      set(() => ({ muteWasForced })),
-
-    embedded: false,
-    setEmbedded: (embedded: boolean) => set(() => ({ embedded })),
-
-    showControls: true,
-    controlsTimeout: undefined,
-    setShowControls: (showControls: boolean) =>
-      set({ showControls, controlsTimeout: undefined }),
-
-    telemetry: true,
-    setTelemetry: (telemetry: boolean) => set(() => ({ telemetry })),
-
-    playerEvent: async (
-      url: string,
-      time: string,
-      eventType: string,
-      meta: { [key: string]: any },
-    ) =>
-      set((x) => {
-        const data: PlayerEvent = {
-          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: string): PlayerStore {
-  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(): string {
-  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(): PlayerStore {
-  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<U>(
-  selector: (state: PlayerState) => U,
-  playerId?: string,
-): U {
-  if (!playerId) {
-    playerId = Object.keys(usePlayerContext().players)[0];
-  }
-  const store = getPlayerStoreById(playerId);
-  return useStore(store, selector);
-}
-
-/* Convenience selectors/hooks */
-export const usePlayerProtocol = (
-  playerId?: string,
-): [PlayerProtocol, (protocol: PlayerProtocol) => void] =>
-  usePlayerStore((x) => [x.protocol, x.setProtocol], playerId);
-
-export const intoPlayerProtocol = (protocol: string): PlayerProtocol => {
-  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/src/player-store/single-player-provider.tsx

@@ -1,181 +0,0 @@
-import React, { createContext, useContext, useMemo } from "react";
-import { StoreApi, useStore } from "zustand";
-import { usePlayerContext } from "../player-store";
-import { PlayerProtocol, PlayerState } from "./player-state";
-
-// Context for a single player
-interface SinglePlayerContextType {
-  playerId: string;
-  playerStore: StoreApi<PlayerState>;
-}
-
-const SinglePlayerContext = createContext<SinglePlayerContextType | null>(null);
-
-interface SinglePlayerProviderProps {
-  children: React.ReactNode;
-  playerId?: string;
-  protocol?: PlayerProtocol;
-  rendition?: string;
-}
-
-/**
- * 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: React.FC<SinglePlayerProviderProps> = ({
-  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 (
-    <SinglePlayerContext.Provider value={contextValue}>
-      {children}
-    </SinglePlayerContext.Provider>
-  );
-};
-
-/**
- * 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(): string {
-  const { playerId } = useSinglePlayerContext();
-  return playerId;
-}
-
-/**
- * Hook to access state from the current player without needing to specify the ID
- */
-export function useCurrentPlayerStore<U>(
-  selector: (state: PlayerState) => U,
-): U {
-  const { playerStore } = useSinglePlayerContext();
-  return useStore(playerStore, selector);
-}
-
-/**
- * Hook to get the protocol of the current player
- */
-export function useCurrentPlayerProtocol(): [
-  PlayerProtocol,
-  (protocol: PlayerProtocol) => void,
-] {
-  return useCurrentPlayerStore(
-    (state) => [state.protocol, state.setProtocol] as const,
-  );
-}
-
-/**
- * Hook to get the selected rendition of the current player
- */
-export function useCurrentPlayerRendition(): [
-  string,
-  (rendition: string) => void,
-] {
-  return useCurrentPlayerStore(
-    (state) => [state.selectedRendition, state.setSelectedRendition] as const,
-  );
-}
-
-/**
- * Hook to get the ingest state of the current player
- */
-export function useCurrentPlayerIngest(): {
-  starting: boolean;
-  setStarting: (starting: boolean) => void;
-  connectionState: RTCPeerConnectionState | null;
-  setConnectionState: (state: RTCPeerConnectionState | null) => void;
-  startedTimestamp: number | null;
-  setStartedTimestamp: (timestamp: number | null) => void;
-} {
-  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<P extends object>(
-  Component: React.ComponentType<P>,
-): React.FC<P & SinglePlayerProviderProps> {
-  return function WithSinglePlayer(props: P & SinglePlayerProviderProps) {
-    const { playerId, protocol, rendition, ...componentProps } = props;
-    return (
-      <SinglePlayerProvider
-        playerId={playerId}
-        protocol={protocol}
-        rendition={rendition}
-      >
-        <Component {...(componentProps as P)} />
-      </SinglePlayerProvider>
-    );
-  };
-}

package/src/streamplace-provider/context.tsx

@@ -1,10 +0,0 @@
-import { createContext } from "react";
-import { StreamplaceStore } from "../streamplace-store/streamplace-store";
-
-type StreamplaceContextType = {
-  store: StreamplaceStore;
-};
-
-export const StreamplaceContext = createContext<StreamplaceContextType | null>(
-  null,
-);

package/src/streamplace-provider/index.tsx

@@ -1,32 +0,0 @@
-import { SessionManager } from "@atproto/api/dist/session-manager";
-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,
-}: {
-  children: React.ReactNode;
-  url: string;
-  oauthSession?: SessionManager;
-}) {
-  // todo: handle url changes?
-  const store = useRef(makeStreamplaceStore({ url })).current;
-
-  useEffect(() => {
-    store.setState({ url });
-  }, [url]);
-
-  useEffect(() => {
-    store.setState({ oauthSession });
-  }, [oauthSession]);
-
-  return (
-    <StreamplaceContext.Provider value={{ store: store }}>
-      <Poller>{children}</Poller>
-    </StreamplaceContext.Provider>
-  );
-}

package/src/streamplace-provider/poller.tsx

@@ -1,55 +0,0 @@
-import React, { 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 }: { children: React.ReactNode }) {
-  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 <>{children}</>;
-}

package/src/streamplace-store/index.tsx

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

package/src/streamplace-store/streamplace-store.tsx

@@ -1,89 +0,0 @@
-import { SessionManager } from "@atproto/api/dist/session-manager";
-import { useContext } from "react";
-import { PlaceStreamChatProfile, PlaceStreamLivestream } from "streamplace";
-import { createStore, StoreApi, useStore } from "zustand";
-import { StreamplaceContext } from "../streamplace-provider/context";
-
-// there are three categories of XRPC that we need to handle:
-// 1. Public (probably) OAuth XRPC to the users' PDS for apps that use this API.
-// 2. Confidental OAuth to the Streamplace server for doing things that require
-//    server-side authentication. This isn't very much stuff yet, but you need
-//    to log into Streamplace to do things like have Streamplace update your
-//    activity status.
-// 3. Anonymous XRPC to the Streamplace server for stuff like `getLiveUsers`. This
-//    is easy to handle internal to this library.
-// For the Streamplace app itself, all three are the same. For apps that aren't
-// doing OAuth through the Streamplace node, we need to expose an interface that
-// allows them to use atcute or whatever for 1.
-
-export interface StreamplaceState {
-  url: string;
-  liveUsers: PlaceStreamLivestream.LivestreamView[] | null;
-  setLiveUsers: (opts: {
-    liveUsers?: PlaceStreamLivestream.LivestreamView[];
-    liveUsersLoading?: boolean;
-    liveUsersError?: string | null;
-    liveUsersRefresh?: number;
-  }) => void;
-  liveUsersRefresh: number;
-  liveUsersLoading: boolean;
-  liveUsersError: string | null;
-  oauthSession: SessionManager | null;
-  handle: string | null;
-  chatProfile: PlaceStreamChatProfile.Record | null;
-}
-
-export type StreamplaceStore = StoreApi<StreamplaceState>;
-
-export const makeStreamplaceStore = ({
-  url,
-}: {
-  url: string;
-}): StoreApi<StreamplaceState> => {
-  return createStore<StreamplaceState>()((set) => ({
-    url,
-    liveUsers: null,
-    setLiveUsers: (opts: {
-      liveUsers?: PlaceStreamLivestream.LivestreamView[];
-      liveUsersLoading?: boolean;
-      liveUsersError?: string | null;
-      liveUsersRefresh?: number;
-    }) => {
-      set({
-        ...opts,
-      });
-    },
-    liveUsersRefresh: 0,
-    liveUsersLoading: true,
-    liveUsersError: null,
-    oauthSession: null,
-    handle: null,
-    chatProfile: null,
-  }));
-};
-
-export function getStreamplaceStoreFromContext(): StreamplaceStore {
-  const context = useContext(StreamplaceContext);
-  if (!context) {
-    throw new Error(
-      "useStreamplaceStore must be used within a StreamplaceProvider",
-    );
-  }
-  return context.store;
-}
-
-export function useStreamplaceStore<U>(
-  selector: (state: StreamplaceState) => U,
-): U {
-  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 = (): ((handle: string) => void) => {
-  const store = getStreamplaceStoreFromContext();
-  return (handle: string) => store.setState({ handle });
-};

package/src/streamplace-store/user.tsx

@@ -1,57 +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/src/streamplace-store/xrpc.tsx

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

package/tsconfig.json

@@ -1,9 +0,0 @@
-{
-  "extends": "../app/tsconfig.base.json",
-  "compilerOptions": {
-    "rootDir": "./src",
-    "outDir": "./dist",
-    "jsx": "react-jsx"
-  },
-  "include": ["./src"]
-}