@streamplace/components 0.0.1 → 0.7.0

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

@@ -0,0 +1,187 @@
+import { ChatMessageViewHydrated } from "streamplace";
+
+export enum PlayerProtocol {
+  WEBRTC = "webrtc",
+  HLS = "hls",
+  PROGRESSIVE_MP4 = "progressive-mp4",
+  PROGRESSIVE_WEBM = "progressive-webm",
+}
+
+export enum PlayerStatus {
+  START = "start",
+  PLAYING = "playing",
+  STALLED = "stalled",
+  SUSPEND = "suspend",
+  WAITING = "waiting",
+  PAUSE = "pause",
+  MUTE = "mute",
+}
+
+export type PlayerStatusTracker = Partial<Record<PlayerStatus, number>>;
+
+export enum IngestMediaSource {
+  USER = "user",
+  DISPLAY = "display",
+}
+
+export interface PlayerState {
+  id: string;
+  selectedRendition: string;
+  setSelectedRendition: (rendition: string) => void;
+  protocol: PlayerProtocol;
+  setProtocol: (protocol: PlayerProtocol) => void;
+
+  /** Source */
+  src: string;
+
+  /** Function to set the source URL */
+  setSrc: (src: string) => void;
+
+  /** Flag indicating if ingest (stream input) is currently starting */
+  ingestStarting: boolean;
+
+  /** Function to set the ingestStarting flag */
+  setIngestStarting: (ingestStarting: boolean) => void;
+
+  /** Flag indicating if ingest is live */
+  ingestLive: boolean;
+  setIngestLive: (ingestLive: boolean) => void;
+
+  /** Current connection state of ingest RTP/RTC peer connection */
+  ingestConnectionState: RTCPeerConnectionState | null;
+
+  /** Function to update the ingest connection state */
+  setIngestConnectionState: (state: RTCPeerConnectionState | null) => void;
+
+  ingestMediaSource?: IngestMediaSource;
+  setIngestMediaSource?: (source: IngestMediaSource) => void;
+
+  ingestCamera: "user" | "environment";
+  setIngestCamera: (camera: "user" | "environment") => void;
+
+  ingestAutoStart?: boolean;
+  setIngestAutoStart?: (autoStart: boolean) => void;
+
+  /** Timestamp (number) when ingest started, or null if not started */
+  ingestStarted: number | null;
+
+  /** Function to set the ingestStarted timestamp */
+  setIngestStarted: (timestamp: number | null) => void;
+
+  /** Player muted state */
+  muted: boolean;
+
+  /** Function to set the muted state */
+  setMuted: (isMuted: boolean) => void;
+
+  /** Player volume level (0.0 to 1.0) */
+  volume: number;
+
+  /** Function to set the volume level */
+  setVolume: (volume: number) => void;
+
+  /** Player fullscreen state */
+  fullscreen: boolean;
+
+  /** Function to set the fullscreen state */
+  setFullscreen: (isFullscreen: boolean) => void;
+
+  /** Current player status */
+  status: PlayerStatus;
+
+  /** Function to update the player status */
+  setStatus: (status: PlayerStatus) => void;
+
+  /** Current playback time in seconds */
+  playTime: number;
+
+  /** Function to set the current playback time */
+  setPlayTime: (playTime: number) => void;
+
+  /** Flag indicating if player is in offline state */
+  offline: boolean;
+
+  /** Function to set the offline state */
+  setOffline: (offline: boolean) => void;
+  /** Reference to the video element for direct manipulation (used for PiP) */
+  videoRef:
+    | React.MutableRefObject<HTMLVideoElement | null>
+    | ((instance: HTMLVideoElement | null) => void)
+    | null
+    | undefined;
+
+  /** Function to set the video reference */
+  setVideoRef: (
+    videoRef:
+      | React.MutableRefObject<HTMLVideoElement | null>
+      | ((instance: HTMLVideoElement | null) => void)
+      | null
+      | undefined,
+  ) => void;
+
+  /** Player element width (CSS value or number) */
+  playerWidth?: string | number;
+  /** Function to set the player width */
+  setPlayerWidth: (width: number) => void;
+
+  /** Player element height (CSS value or number) */
+  playerHeight?: string | number;
+  /** Function to set the player height */
+  setPlayerHeight: (height: number) => void;
+
+  /** Flag indicating if player is in Picture-in-Picture mode */
+  pipMode: boolean;
+
+  /** Function to set the Picture-in-Picture mode */
+  setPipMode: (pipMode: boolean) => void;
+
+  /** Flag indicating if mute was forced by system (e.g., autoplay policy) */
+  muteWasForced: boolean;
+
+  /** Function to set the muteWasForced flag */
+  setMuteWasForced: (muteWasForced: boolean) => void;
+
+  /** Flag indicating if the player is embedded in another context */
+  embedded: boolean;
+
+  /** Function to set the embedded flag */
+  setEmbedded: (embedded: boolean) => void;
+
+  /** Flag indicating if player controls should be shown */
+  showControls: boolean;
+  controlsTimeout?: NodeJS.Timeout | undefined;
+
+  /** Function to set the showControls flag */
+  setShowControls: (showControls: boolean) => void;
+
+  telemetry: boolean;
+  setTelemetry: (telemetry: boolean) => void;
+
+  playerEvent: (
+    url: string,
+    time: string,
+    eventType: string,
+    meta: { [key: string]: any },
+  ) => void;
+
+  clearControlsTimeout: () => void;
+
+  setUserInteraction: () => void;
+
+  showDebugInfo: boolean;
+  setShowDebugInfo: (showDebugInfo: boolean) => void;
+
+  /** Message to be moderated */
+  modMessage: ChatMessageViewHydrated | null;
+
+  /** Function to set the mod message */
+  setModMessage: (message: ChatMessageViewHydrated | null) => void;
+}
+
+export type PlayerEvent = {
+  id?: string;
+  time: string;
+  playerId: string;
+  eventType: string;
+  meta: { [key: string]: any };
+};

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

@@ -0,0 +1,239 @@
+import { useContext } from "react";
+import { ChatMessageViewHydrated } from "streamplace";
+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 })),
+
+    ingestCamera: "user",
+    setIngestCamera: (ingestCamera: "user" | "environment") =>
+      set(() => ({ ingestCamera })),
+
+    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 })),
+
+    // Player element width/height setters for global sync
+    playerWidth: undefined,
+    setPlayerWidth: (playerWidth: number) => set(() => ({ playerWidth })),
+    playerHeight: undefined,
+    setPlayerHeight: (playerHeight: number) => 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: 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 })),
+
+    ingestLive: false,
+    setIngestLive: (ingestLive: boolean) => set(() => ({ ingestLive })),
+
+    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 };
+      }),
+
+    showDebugInfo: false,
+    setShowDebugInfo: (showDebugInfo: boolean) =>
+      set(() => ({ showDebugInfo })),
+
+    modMessage: null,
+    setModMessage: (modMessage: ChatMessageViewHydrated | null) =>
+      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: 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

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

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

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

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