@streamplace/components 0.6.37 → 1.0.0

package/src/livestream-store/chat.tsx

@@ -1,224 +0,0 @@
-import { RichText } from "@atproto/api";
-import {
-  isLink,
-  isMention,
-} from "@atproto/api/dist/client/types/app/bsky/richtext/facet";
-import {
-  ChatMessageViewHydrated,
-  PlaceStreamChatMessage,
-  PlaceStreamDefs,
-} from "streamplace";
-import { useChatProfile, useDID, useHandle } from "../streamplace-store";
-import { usePDSAgent } from "../streamplace-store/xrpc";
-import { LivestreamState } from "./livestream-state";
-import { getStoreFromContext, useLivestreamStore } from "./livestream-store";
-
-export const useReplyToMessage = () =>
-  useLivestreamStore((state) => state.replyToMessage);
-
-export const useSetReplyToMessage = () => {
-  const store = getStoreFromContext();
-  return (message: ChatMessageViewHydrated | null) => {
-    store.setState({ replyToMessage: message });
-  };
-};
-
-export type NewChatMessage = {
-  text: string;
-  reply?: {
-    cid: string;
-    uri: string;
-  };
-};
-
-export const useCreateChatMessage = () => {
-  const pdsAgent = usePDSAgent();
-  const store = getStoreFromContext();
-  const userDID = useDID();
-  const userHandle = useHandle();
-  const chatProfile = useChatProfile();
-
-  return async (msg: NewChatMessage) => {
-    if (!pdsAgent || !userDID) {
-      throw new Error("No PDS agent or user DID found");
-    }
-
-    let state = store.getState();
-
-    const streamerProfile = state.profile;
-
-    if (!streamerProfile) {
-      throw new Error("Profile not found");
-    }
-
-    const rt = new RichText({ text: msg.text });
-    rt.detectFacetsWithoutResolution();
-
-    const record: PlaceStreamChatMessage.Record = {
-      text: msg.text,
-      createdAt: new Date().toISOString(),
-      streamer: streamerProfile.did,
-      ...(msg.reply
-        ? {
-            reply: {
-              root: {
-                cid: msg.reply.cid,
-                uri: msg.reply.uri,
-              },
-              parent: {
-                cid: msg.reply.cid,
-                uri: msg.reply.uri,
-              },
-            },
-          }
-        : {}),
-      ...(rt.facets && rt.facets.length > 0
-        ? {
-            facets: rt.facets.map((facet) => ({
-              index: facet.index,
-              features: facet.features
-                .filter(
-                  (feature) =>
-                    feature.$type === "app.bsky.richtext.facet#link" ||
-                    feature.$type === "app.bsky.richtext.facet#mention",
-                )
-                .map((feature) => {
-                  if (isLink(feature)) {
-                    return {
-                      $type: "app.bsky.richtext.facet#link",
-                      uri: feature.uri,
-                    };
-                  } else if (isMention(feature)) {
-                    return {
-                      $type: "app.bsky.richtext.facet#mention",
-                      did: feature.did,
-                    };
-                  } else {
-                    throw new Error("invalid code path");
-                  }
-                }),
-            })),
-          }
-        : {}),
-    };
-
-    const localChat: ChatMessageViewHydrated = {
-      uri: `local-${Date.now()}`,
-      cid: "",
-      author: {
-        did: userDID,
-        handle: userHandle || userDID,
-      },
-      record: record,
-      indexedAt: new Date().toISOString(),
-      chatProfile: chatProfile || undefined,
-    };
-
-    state = reduceChat(state, [localChat], []);
-    store.setState(state);
-
-    await pdsAgent.com.atproto.repo.createRecord({
-      repo: userDID,
-      collection: "place.stream.chat.message",
-      record,
-    });
-  };
-};
-
-const CHAT_LIMIT = 20;
-
-export const reduceChat = (
-  state: LivestreamState,
-  messages: ChatMessageViewHydrated[],
-  blocks: PlaceStreamDefs.BlockView[],
-): LivestreamState => {
-  state = { ...state } as LivestreamState;
-  let newChat: { [key: string]: ChatMessageViewHydrated } = {
-    ...state.chatIndex,
-  };
-
-  // Add new messages
-  for (let message of messages) {
-    const date = new Date(message.record.createdAt);
-    const key = `${date.getTime()}-${message.uri}`;
-
-    // Remove existing local message matching the server one
-    if (!message.uri.startsWith("local-")) {
-      const existingLocalMessageKey = Object.keys(newChat).find((k) => {
-        const msg = newChat[k];
-        return (
-          msg.uri.startsWith("local-") &&
-          msg.record.text === message.record.text &&
-          msg.author.did === message.author.did
-        );
-      });
-
-      if (existingLocalMessageKey) {
-        delete newChat[existingLocalMessageKey];
-      }
-    }
-
-    // Handle reply information for local-first messages
-    if (message.record.reply) {
-      const reply = message.record.reply as {
-        parent?: { uri: string; cid: string };
-        root?: { uri: string; cid: string };
-      };
-
-      const parentUri = reply?.parent?.uri || reply?.root?.uri;
-
-      if (parentUri) {
-        // First try to find the parent message in our chat
-        const parentMsgKey = Object.keys(newChat).find(
-          (k) => newChat[k].uri === parentUri,
-        );
-
-        if (parentMsgKey) {
-          // Found the parent message, add its info to our message
-          const parentMsg = newChat[parentMsgKey];
-          message = {
-            ...message,
-            replyTo: {
-              cid: parentMsg.cid,
-              uri: parentMsg.uri,
-              author: parentMsg.author,
-              record: parentMsg.record,
-              chatProfile: parentMsg.chatProfile,
-              indexedAt: parentMsg.indexedAt,
-            },
-          };
-        }
-      }
-    }
-
-    newChat[key] = message;
-  }
-
-  for (const block of blocks) {
-    for (const [k, v] of Object.entries(newChat)) {
-      if (v.author.did === block.record.subject) {
-        delete newChat[k];
-      }
-    }
-  }
-
-  let newChatList = Object.values(newChat).sort((a, b) =>
-    new Date(a.record.createdAt) > new Date(b.record.createdAt) ? 1 : -1,
-  );
-
-  newChatList = newChatList.slice(-CHAT_LIMIT);
-
-  newChat = newChatList.reduce(
-    (acc, msg) => {
-      acc[msg.uri] = msg;
-      return acc;
-    },
-    {} as { [key: string]: ChatMessageViewHydrated },
-  );
-
-  return {
-    ...state,
-    chatIndex: newChat,
-    chat: newChatList,
-  };
-};

package/src/livestream-store/context.tsx

@@ -1,10 +0,0 @@
-import { createContext } from "react";
-import { LivestreamStore } from "../livestream-store/livestream-store";
-
-type LivestreamContextType = {
-  store: LivestreamStore;
-};
-
-export const LivestreamContext = createContext<LivestreamContextType | null>(
-  null,
-);

package/src/livestream-store/index.tsx

@@ -1,3 +0,0 @@
-export * from "./chat";
-export * from "./context";
-export * from "./livestream-store";

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

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

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

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

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

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

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

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