@streamplace/components 0.0.1 → 0.6.37

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

@@ -0,0 +1,18 @@
+import { AppBskyActorDefs } from "@atproto/api";
+import {
+  ChatMessageViewHydrated,
+  LivestreamViewHydrated,
+  PlaceStreamDefs,
+  PlaceStreamSegment,
+} from "streamplace";
+
+export interface LivestreamState {
+  profile: AppBskyActorDefs.ProfileViewBasic | null;
+  chatIndex: { [key: string]: ChatMessageViewHydrated };
+  chat: ChatMessageViewHydrated[];
+  livestream: LivestreamViewHydrated | null;
+  viewers: number | null;
+  segment: PlaceStreamSegment.Record | null;
+  renditions: PlaceStreamDefs.Rendition[];
+  replyToMessage: ChatMessageViewHydrated | null;
+}

package/src/livestream-store/livestream-store.tsx

@@ -0,0 +1,56 @@
+import { useContext } from "react";
+import { createStore, StoreApi, useStore } from "zustand";
+import { LivestreamContext } from "./context";
+import { LivestreamState } from "./livestream-state";
+import { handleWebSocketMessages } from "./websocket-consumer";
+
+export type LivestreamStore = StoreApi<LivestreamState>;
+
+export const makeLivestreamStore = (): StoreApi<LivestreamState> => {
+  return createStore<LivestreamState>()((set) => ({
+    profile: null,
+    chatIndex: {},
+    chat: [],
+    livestream: null,
+    viewers: null,
+    segment: null,
+    renditions: [],
+    replyToMessage: null,
+  }));
+};
+
+export function getStoreFromContext(): LivestreamStore {
+  const context = useContext(LivestreamContext);
+  if (!context) {
+    throw new Error(
+      "useLivestreamStore must be used within a LivestreamProvider",
+    );
+  }
+  return context.store;
+}
+
+export function useLivestreamStore<U>(
+  selector: (state: LivestreamState) => U,
+): U {
+  const store = getStoreFromContext();
+  return useStore(store, selector);
+}
+
+export const useHandleWebsocketMessages = () => {
+  const store = getStoreFromContext();
+  return (messages: any[]) => {
+    store.setState((state) => handleWebSocketMessages(state, messages));
+  };
+};
+
+export const useChat = () => useLivestreamStore((x) => x.chat);
+
+export const useProfile = () => useLivestreamStore((x) => x.profile);
+
+export const useViewers = () => useLivestreamStore((x) => x.viewers);
+
+export const useLivestream = () => useLivestreamStore((x) => x.livestream);
+
+export const useSegment = () => useLivestreamStore((x) => x.segment);
+
+export const useRenditions = () => useLivestreamStore((x) => x.renditions);

package/src/livestream-store/websocket-consumer.tsx

@@ -0,0 +1,62 @@
+import { AppBskyActorDefs } from "@atproto/api";
+import {
+  ChatMessageViewHydrated,
+  LivestreamViewHydrated,
+  PlaceStreamChatDefs,
+  PlaceStreamChatMessage,
+  PlaceStreamDefs,
+  PlaceStreamLivestream,
+  PlaceStreamSegment,
+} from "streamplace";
+import { reduceChat } from "./chat";
+import { LivestreamState } from "./livestream-state";
+
+export const handleWebSocketMessages = (
+  state: LivestreamState,
+  messages: any[],
+): LivestreamState => {
+  for (const message of messages) {
+    if (PlaceStreamLivestream.isLivestreamView(message)) {
+      state = {
+        ...state,
+        livestream: message as LivestreamViewHydrated,
+      };
+    } else if (PlaceStreamLivestream.isViewerCount(message)) {
+      state = {
+        ...state,
+        viewers: message.count,
+      };
+    } else if (PlaceStreamChatDefs.isMessageView(message)) {
+      // Explicitly map MessageView to MessageViewHydrated
+      const hydrated: ChatMessageViewHydrated = {
+        uri: message.uri,
+        cid: message.cid,
+        author: message.author,
+        record: message.record as PlaceStreamChatMessage.Record,
+        indexedAt: message.indexedAt,
+        chatProfile: (message as any).chatProfile,
+        replyTo: (message as any).replyTo,
+      };
+      state = reduceChat(state, [hydrated], []);
+    } else if (PlaceStreamSegment.isRecord(message)) {
+      state = {
+        ...state,
+        segment: message as PlaceStreamSegment.Record,
+      };
+    } else if (PlaceStreamDefs.isBlockView(message)) {
+      const block = message as PlaceStreamDefs.BlockView;
+      state = reduceChat(state, [], [block]);
+    } else if (PlaceStreamDefs.isRenditions(message)) {
+      state = {
+        ...state,
+        renditions: message.renditions,
+      };
+    } else if (AppBskyActorDefs.isProfileViewBasic(message)) {
+      state = {
+        ...state,
+        profile: message,
+      };
+    }
+  }
+  return reduceChat(state, [], []);
+};

package/src/player-store/context.tsx

@@ -0,0 +1,11 @@
+import { createContext } from "react";
+import { StoreApi } from "zustand";
+import { PlayerState } from "./player-state";
+
+type PlayerContextType = {
+  players: Record<string, StoreApi<PlayerState>>;
+  createPlayer: (id?: string) => string;
+  removePlayer: (id: string) => void;
+};
+
+export const PlayerContext = createContext<PlayerContextType | null>(null);

package/src/player-store/index.tsx

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

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

@@ -0,0 +1,90 @@
+import React, { useCallback, useMemo, useState } from "react";
+import { StoreApi } from "zustand";
+import { PlayerContext } from "./context";
+import { PlayerState } from "./player-state";
+import { makePlayerStore } from "./player-store";
+
+interface PlayerProviderProps {
+  children: React.ReactNode;
+  initialPlayers?: string[];
+  defaultId?: string;
+}
+
+export const PlayerProvider: React.FC<PlayerProviderProps> = ({
+  children,
+  initialPlayers = [],
+  defaultId = Math.random().toString(36).slice(8),
+}) => {
+  const [players, setPlayers] = useState<Record<string, StoreApi<PlayerState>>>(
+    () => {
+      // Initialize with any initial player IDs provided
+      const initialPlayerStores: Record<string, StoreApi<PlayerState>> = {};
+      for (const playerId of initialPlayers) {
+        initialPlayerStores[playerId] = makePlayerStore(playerId);
+      }
+
+      // Always create at least one player by default
+      if (initialPlayers.length === 0) {
+        initialPlayerStores[defaultId] = makePlayerStore(defaultId);
+      }
+
+      return initialPlayerStores;
+    },
+  );
+
+  const createPlayer = useCallback((id?: string) => {
+    console.log("Creating new player");
+    const playerId = id || Math.random().toString(36).slice(8);
+    const playerStore = makePlayerStore(playerId);
+
+    setPlayers((prev) => ({
+      ...prev,
+      [playerId]: playerStore,
+    }));
+
+    return playerId;
+  }, []);
+
+  const removePlayer = useCallback((id: string) => {
+    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 = useMemo(
+    () => ({
+      players,
+      createPlayer,
+      removePlayer,
+    }),
+    [players, createPlayer, removePlayer],
+  );
+
+  return (
+    <PlayerContext.Provider value={contextValue}>
+      {children}
+    </PlayerContext.Provider>
+  );
+};
+
+// HOC to wrap components that need player context
+export function withPlayerProvider<P extends object>(
+  Component: React.ComponentType<P>,
+): React.FC<P & { initialPlayers?: string[] }> {
+  return function WithPlayerProvider(props: P & { initialPlayers?: string[] }) {
+    const { initialPlayers, ...componentProps } = props;
+    return (
+      <PlayerProvider initialPlayers={initialPlayers}>
+        <Component {...(componentProps as P)} />
+      </PlayerProvider>
+    );
+  };
+}

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

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