@streamplace/components 0.9.15 → 0.10.7

package/src/index.tsx

@@ -7,6 +7,8 @@ export * from "./player-store";
 export * from "./streamplace-provider";
 export * from "./streamplace-store";
 
+export { ErrorBoundary } from "./components/error-boundary";
+
 export {
   PlayerProvider,
   withPlayerProvider,

package/src/lib/facet.ts

@@ -95,7 +95,7 @@ export const segmentize = (
     const { byteStart, byteEnd } = facet.index;
     const features = facet.features;
 
-    if (byteStart > byteEnd || features.length === 0) {
+    if (byteStart > byteEnd || !features || features.length === 0) {
       continue;
     }
 

package/src/lib/stream-notifications.ts

@@ -1,8 +1,36 @@
 import React from "react";
+import { PinnedRecordViewHydrated } from "streamplace";
 import { streamNotification } from "../components/stream-notification";
+import { PinnedCommentNotification } from "../components/stream-notification/pin-notification";
 import { TeleportNotification } from "../components/stream-notification/teleport-notification";
 
 export const StreamNotifications = {
+  pinnedComment: (params: {
+    pinnedComment: PinnedRecordViewHydrated;
+    onDismiss?: (reason?: "user" | "auto") => void;
+    onUnpin?: () => void;
+  }) => {
+    streamNotification.show({
+      id: "pinned-comment",
+      render: (isExiting, onDismiss) => {
+        return React.createElement(PinnedCommentNotification, {
+          pinnedComment: params.pinnedComment,
+          onDismiss: () => onDismiss("user"),
+          onUnpin: () => {
+            params.onUnpin?.();
+            onDismiss("user");
+          },
+        });
+      },
+      duration: 0, // manually dismissed or auto-dismissed by TTL
+      onDismiss: params.onDismiss,
+    });
+  },
+
+  pinnedCommentDismiss: () => {
+    streamNotification.hide("pinned-comment");
+  },
+
   teleport: (params: {
     targetHandle: string;
     targetDID: string;

package/src/lib/theme/theme.tsx

@@ -18,7 +18,7 @@ import {
 } from "./tokens";
 
 import { GestureHandlerRootView } from "react-native-gesture-handler";
-import { ToastProvider } from "../../components/ui";
+import { ToastProvider } from "../../components/ui/toast";
 
 // Import pairify function for generating theme tokens
 function pairify<T extends Record<string, any>>(

package/src/livestream-provider/index.tsx

@@ -4,8 +4,11 @@ import { deleteTeleport } from "../lib/slash-commands/teleport";
 import { StreamNotifications } from "../lib/stream-notifications";
 import {
   LivestreamContext,
+  getStoreFromContext,
   makeLivestreamStore,
   useLivestreamStore,
+  usePinnedComment,
+  useUnpinChatMessage,
 } from "../livestream-store";
 import { useDID, usePDSAgent } from "../streamplace-store";
 import { useLivestreamWebsocket } from "./websocket";
@@ -134,6 +137,40 @@ export function TeleportWatcher({
   return <></>;
 }
 
+export function PinnedCommentWatcher() {
+  const pinnedComment = usePinnedComment();
+  const streamerDID = useLivestreamStore((state) => state.profile?.did);
+  const unpinChatMessage = useUnpinChatMessage();
+  const store = getStoreFromContext();
+  const prevPinnedRef = useRef<string | null>(null);
+
+  // Show/hide notification when pinned comment changes
+  useEffect(() => {
+    const currentUri = pinnedComment?.uri ?? null;
+    if (currentUri === prevPinnedRef.current) return;
+    prevPinnedRef.current = currentUri;
+
+    if (pinnedComment) {
+      StreamNotifications.pinnedComment({
+        pinnedComment,
+        onDismiss: () => {
+          store.setState({ pinnedComment: null });
+        },
+        onUnpin: () => {
+          if (!streamerDID) return;
+          unpinChatMessage(pinnedComment.uri, streamerDID).catch((e) => {
+            console.error("Failed to unpin:", e);
+          });
+        },
+      });
+    } else {
+      StreamNotifications.pinnedCommentDismiss();
+    }
+  }, [pinnedComment, streamerDID, unpinChatMessage]);
+
+  return <></>;
+}
+
 export function LivestreamPoller({
   children,
   src,
@@ -143,12 +180,11 @@ export function LivestreamPoller({
   src: string;
   onTeleport?: (targetHandle: string, targetDID: string) => void;
 }) {
-  // Websocket watcher is a sibling instead of a parent to avoid
-  // re-rendering when the websocket does stuff
   return (
     <>
       <WebsocketWatcher src={src} />
       <TeleportWatcher onTeleport={onTeleport} />
+      <PinnedCommentWatcher />
       {children}
     </>
   );

package/src/livestream-store/chat.tsx

@@ -437,3 +437,95 @@ export const useReportChatMessage = () => {
 };
 
 export const reduceChat = reduceChatIncremental;
+
+export const usePinChatMessage = () => {
+  const agent = usePDSAgent();
+  const store = getStoreFromContext();
+
+  return async (
+    messageUri: string,
+    streamerDID: string,
+    expiresAt?: string,
+  ) => {
+    if (!agent || !agent.did) {
+      throw new Error("No PDS agent or user DID found");
+    }
+
+    // If streamer, create directly
+    if (agent.did === streamerDID) {
+      // First delete any existing pinned records
+      const listResult = await agent.com.atproto.repo.listRecords({
+        repo: streamerDID,
+        collection: "place.stream.chat.pinnedRecord",
+      });
+      for (const rec of listResult.data.records) {
+        const rkey = rec.uri.split("/").pop();
+        if (rkey) {
+          await agent.com.atproto.repo.deleteRecord({
+            repo: streamerDID,
+            collection: "place.stream.chat.pinnedRecord",
+            rkey,
+          });
+        }
+      }
+
+      const record = {
+        $type: "place.stream.chat.pinnedRecord",
+        pinnedMessage: messageUri,
+        createdAt: new Date().toISOString(),
+        ...(expiresAt ? { expiresAt } : {}),
+      };
+
+      const result = await agent.com.atproto.repo.createRecord({
+        repo: streamerDID,
+        collection: "place.stream.chat.pinnedRecord",
+        record,
+      });
+      return result;
+    }
+
+    // Otherwise, use delegated moderation endpoint
+    const result = await agent.place.stream.moderation.createPin({
+      streamer: streamerDID,
+      messageUri,
+      ...(expiresAt ? { expiresAt } : {}),
+    });
+    return result;
+  };
+};
+
+export const useUnpinChatMessage = () => {
+  const agent = usePDSAgent();
+  const store = getStoreFromContext();
+
+  return async (pinUri: string, streamerDID: string) => {
+    if (!agent || !agent.did) {
+      throw new Error("No PDS agent or user DID found");
+    }
+
+    // If streamer, delete directly
+    if (agent.did === streamerDID) {
+      const rkey = pinUri.split("/").pop();
+      if (!rkey) {
+        throw new Error("Invalid pin URI");
+      }
+
+      await agent.com.atproto.repo.deleteRecord({
+        repo: streamerDID,
+        collection: "place.stream.chat.pinnedRecord",
+        rkey,
+      });
+      // Optimistically clear the pinned comment
+      store.setState({ pinnedComment: null });
+      return;
+    }
+
+    // Otherwise, use delegated moderation endpoint
+    await agent.place.stream.moderation.deletePin({
+      streamer: streamerDID,
+      pinUri,
+    });
+    // Optimistically clear the pinned comment
+    store.setState({ pinnedComment: null });
+  };
+};

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

@@ -2,6 +2,7 @@ import { AppBskyActorDefs } from "@atproto/api";
 import {
   ChatMessageViewHydrated,
   LivestreamViewHydrated,
+  PinnedRecordViewHydrated,
   PlaceStreamDefs,
   PlaceStreamLiveTeleport,
   PlaceStreamModerationPermission,
@@ -28,6 +29,7 @@ export interface LivestreamState {
   setActiveTeleportUri: (uri: string | null) => void;
   websocketConnected: boolean;
   hasReceivedSegment: boolean;
+  pinnedComment: PinnedRecordViewHydrated | null;
   moderationPermissions: PlaceStreamModerationPermission.Record[];
   setModerationPermissions: (
     permissions: PlaceStreamModerationPermission.Record[],

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

@@ -27,6 +27,7 @@ export const makeLivestreamStore = (): StoreApi<LivestreamState> => {
     setActiveTeleportUri: (uri) => set({ activeTeleportUri: uri }),
     websocketConnected: false,
     hasReceivedSegment: false,
+    pinnedComment: null,
     moderationPermissions: [],
     setModerationPermissions: (perms) => set({ moderationPermissions: perms }),
     localLivestreamURI: null,
@@ -60,6 +61,9 @@ export const useHandleWebsocketMessages = () => {
 
 export const useChat = () => useLivestreamStore((x) => x.chat);
 
+export const usePinnedComment = () =>
+  useLivestreamStore((x) => x.pinnedComment);
+
 export const useProfile = () => useLivestreamStore((x) => x.profile);
 
 export const useViewers = () => useLivestreamStore((x) => x.viewers);

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

@@ -2,6 +2,7 @@ import { AppBskyActorDefs } from "@atproto/api";
 import {
   ChatMessageViewHydrated,
   LivestreamViewHydrated,
+  PinnedRecordViewHydrated,
   PlaceStreamChatDefs,
   PlaceStreamChatGate,
   PlaceStreamChatMessage,
@@ -123,6 +124,20 @@ export const handleWebSocketMessages = (
           pendingHides: newPendingHides,
         };
         state = reduceChat(state, [], [], [hiddenMessageUri]);
+      } else if (PlaceStreamChatDefs.isPinnedRecordView(message)) {
+        const pinnedView = message as PinnedRecordViewHydrated;
+        state = {
+          ...state,
+          pinnedComment: pinnedView,
+        };
+      } else if (
+        (message as any).$type === "place.stream.chat.pinnedRecord" &&
+        (message as any).deleted === true
+      ) {
+        state = {
+          ...state,
+          pinnedComment: null,
+        };
       } else if (PlaceStreamLiveTeleport.isRecord(message)) {
         const teleportRecord = message as PlaceStreamLiveTeleport.Record;
         state = {

package/src/streamplace-store/moderation.tsx

@@ -6,6 +6,7 @@ import { usePDSAgent } from "./xrpc";
 export interface ModerationPermissions {
   canBan: boolean;
   canHide: boolean;
+  canPin: boolean;
   canManageLivestream: boolean;
   isOwner: boolean;
   isLoading: boolean;
@@ -177,6 +178,7 @@ export function useCanModerate(
   return {
     canBan: isOwner || permissions.includes("ban"),
     canHide: isOwner || permissions.includes("hide"),
+    canPin: isOwner || permissions.includes("message.pin"),
     canManageLivestream: isOwner || permissions.includes("livestream.manage"),
     isOwner,
     isLoading,

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

@@ -81,7 +81,7 @@ export function useListModerators(): ListModeratorsResult {
 
 interface AddModeratorParams {
   moderatorDID: string;
-  permissions: ("ban" | "hide" | "livestream.manage")[];
+  permissions: ("ban" | "hide" | "livestream.manage" | "message.pin")[];
   expirationTime?: string; // ISO 8601 datetime string
 }
 

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

@@ -418,5 +418,3 @@ export const useDanmuSettings = () => {
     setDanmuMaxMessages,
   };
 };
-
-export { useCreateStreamRecord, useUpdateStreamRecord } from "./stream";

package/src/streamplace-store/xrpc.tsx

@@ -1,6 +1,6 @@
 import { useMemo } from "react";
 import { StreamplaceAgent } from "streamplace";
-import { useStreamplaceStore, useUrl } from ".";
+import { useStreamplaceStore, useUrl } from "./streamplace-store";
 
 export function usePDSAgent(): StreamplaceAgent | null {
   const oauthSession = useStreamplaceStore((state) => state.oauthSession);