@streamplace/components 0.10.6 → 0.10.7

package/src/components/chat/mod-view.tsx

@@ -17,6 +17,7 @@ import { ChatMessageViewHydrated } from "streamplace";
 import {
   useDeleteChatMessage,
   useLivestreamStore,
+  usePinChatMessage,
 } from "../../livestream-store";
 import { useStreamplaceStore } from "../../streamplace-store";
 import { formatHandle, formatHandleWithAt } from "../../utils/format-handle";
@@ -25,6 +26,9 @@ import {
   DropdownMenu,
   DropdownMenuGroup,
   DropdownMenuItem,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
   DropdownMenuTrigger,
   layout,
   ResponsiveDropdownMenuContent,
@@ -55,6 +59,7 @@ export const ModView = forwardRef<ModViewRef, ModViewProps>(() => {
   let [messageRemoved, setMessageRemoved] = useState(false);
   let { createBlock, isLoading: isBlockLoading } = useCreateBlockRecord();
   let { createHideChat, isLoading: isHideLoading } = useCreateHideChatRecord();
+  const pinChatMessage = usePinChatMessage();
 
   const setReportModalOpen = usePlayerStore((x) => x.setReportModalOpen);
   const setReportSubject = usePlayerStore((x) => x.setReportSubject);
@@ -91,9 +96,8 @@ export const ModView = forwardRef<ModViewRef, ModViewProps>(() => {
     message &&
     agent?.did &&
     ((modPermissions.canHide && message.author.did !== streamerDID) ||
-      (modPermissions.canBan &&
-        message.author.did !== agent.did &&
-        message.author.did !== streamerDID))
+      (modPermissions.canPin && message.author.did !== streamerDID) ||
+      modPermissions.canBan)
   );
 
   return (
@@ -124,6 +128,7 @@ export const ModView = forwardRef<ModViewRef, ModViewProps>(() => {
               setMessageRemoved={setMessageRemoved}
               createHideChat={createHideChat}
               createBlock={createBlock}
+              pinChatMessage={pinChatMessage}
               toast={toast}
               setReportModalOpen={setReportModalOpen}
               setReportSubject={setReportSubject}
@@ -148,6 +153,11 @@ interface ModViewContentProps {
   setMessageRemoved: (removed: boolean) => void;
   createHideChat: (uri: string, streamerDID?: string) => Promise<any>;
   createBlock: (did: string, streamerDID?: string) => Promise<any>;
+  pinChatMessage: (
+    messageUri: string,
+    streamerDID: string,
+    expiresAt?: string,
+  ) => Promise<any>;
   toast: ReturnType<typeof useToast>;
   setReportModalOpen: (open: boolean) => void;
   setReportSubject: (subject: any) => void;
@@ -166,6 +176,7 @@ function ModViewContent({
   setMessageRemoved,
   createHideChat,
   createBlock,
+  pinChatMessage,
   toast,
   setReportModalOpen,
   setReportSubject,
@@ -223,6 +234,74 @@ function ModViewContent({
               </Text>
             </DropdownMenuItem>
           )}
+          {modPermissions.canPin && (
+            <DropdownMenuGroup key="pin-actions">
+              <DropdownMenuSub>
+                <DropdownMenuSubTrigger
+                  subMenuTitle="Pin message"
+                  style={{ padding: 0, margin: 0 }}
+                >
+                  <Text color="primary">Pin this message</Text>
+                </DropdownMenuSubTrigger>
+                <DropdownMenuSubContent>
+                  <DropdownMenuGroup title="Pin duration">
+                    <DropdownMenuItem
+                      onPress={() => {
+                        if (!streamerDID) return;
+                        pinChatMessage(message.uri, streamerDID)
+                          .then(() => {
+                            toast.show("Comment pinned", "", { duration: 3 });
+                            onOpenChange?.(false);
+                          })
+                          .catch((e) => {
+                            toast.show(
+                              "Error pinning comment",
+                              e instanceof Error ? e.message : "Failed to pin",
+                              { duration: 5 },
+                            );
+                          });
+                      }}
+                    >
+                      <Text color="primary">Until stream end</Text>
+                    </DropdownMenuItem>
+                    {[5, 10, 15, 30, 60].map((minutes) => (
+                      <DropdownMenuItem
+                        key={minutes}
+                        onPress={() => {
+                          if (!streamerDID) return;
+                          const expiresAt = new Date(
+                            Date.now() + minutes * 60 * 1000,
+                          );
+                          pinChatMessage(
+                            message.uri,
+                            streamerDID,
+                            expiresAt.toISOString(),
+                          )
+                            .then(() => {
+                              toast.show("Comment pinned", "", { duration: 3 });
+                              onOpenChange?.(false);
+                            })
+                            .catch((e) => {
+                              toast.show(
+                                "Error pinning comment",
+                                e instanceof Error
+                                  ? e.message
+                                  : "Failed to pin",
+                                { duration: 5 },
+                              );
+                            });
+                        }}
+                      >
+                        <Text color="primary">
+                          {minutes < 60 ? `${minutes} min` : "1 hour"}
+                        </Text>
+                      </DropdownMenuItem>
+                    ))}
+                  </DropdownMenuGroup>
+                </DropdownMenuSubContent>
+              </DropdownMenuSub>
+            </DropdownMenuGroup>
+          )}
           {modPermissions.canBan &&
             agent?.did &&
             message.author.did !== agent.did &&

package/src/components/dashboard/moderator-panel.tsx

@@ -372,6 +372,7 @@ function AddModeratorDialog({
     ban: false,
     hide: false,
     "livestream.manage": false,
+    "message.pin": false,
   });
   const [error, setError] = useState<string | null>(null);
   const toast = useToast();
@@ -380,7 +381,12 @@ function AddModeratorDialog({
   useEffect(() => {
     if (!visible) {
       setModeratorDID("");
-      setPermissions({ ban: false, hide: false, "livestream.manage": false });
+      setPermissions({
+        ban: false,
+        hide: false,
+        "livestream.manage": false,
+        "message.pin": false,
+      });
       setError(null);
     }
   }, [visible]);
@@ -401,7 +407,12 @@ function AddModeratorDialog({
 
     const selectedPermissions = Object.entries(permissions)
       .filter(([_, enabled]) => enabled)
-      .map(([perm]) => perm) as ("ban" | "hide" | "livestream.manage")[];
+      .map(([perm]) => perm) as (
+      | "ban"
+      | "hide"
+      | "livestream.manage"
+      | "message.pin"
+    )[];
 
     if (selectedPermissions.length === 0) {
       setError("Please select at least one permission");

package/src/components/mobile-player/props.tsx

@@ -2,6 +2,7 @@ export type PlayerProps = {
   name: string;
   playerId?: string;
   src: string;
+  mode?: "live" | "vod";
   muted: boolean;
   telemetry: boolean;
   fullscreen: boolean;

package/src/components/mobile-player/rotation-lock.tsx

@@ -64,12 +64,12 @@ export const RotationProvider: React.FC<RotationProviderProps> = ({
     try {
       await ScreenOrientation.unlockAsync();
       await ScreenOrientation.lockAsync(
-        ScreenOrientation.OrientationLock.LANDSCAPE_RIGHT,
+        ScreenOrientation.OrientationLock.LANDSCAPE_LEFT,
       );
       setIsLocked(true);
 
       // set current orientation to landscape right
-      setCurrentOrientation(ScreenOrientation.Orientation.LANDSCAPE_RIGHT);
+      setCurrentOrientation(ScreenOrientation.Orientation.LANDSCAPE_LEFT);
 
       if (__DEV__) {
         console.log("📲 Manual landscape");

package/src/components/mobile-player/video-async.native.tsx

@@ -177,6 +177,11 @@ export function NativeVideo(props?: {
         }}
         allowsPictureInPicture={props?.pictureInPictureEnabled !== false}
         onLayout={handleLayout}
+        style={{
+          minWidth: "100%",
+          minHeight: "100%",
+          flex: 1,
+        }}
       />
     </>
   );

package/src/components/stream-notification/pin-notification.tsx

@@ -0,0 +1,135 @@
+import { EyeOff, Pin, X } from "lucide-react-native";
+import { useEffect, useState } from "react";
+import { Linking, Pressable, View } from "react-native";
+import { PinnedRecordViewHydrated, PlaceStreamChatProfile } from "streamplace";
+import {
+  Text,
+  useCanModerate,
+  useLivestreamStore,
+  useTheme,
+  zero,
+} from "../../";
+import { RichtextSegment, segmentize } from "../../lib/facet";
+import { formatHandleWithAt } from "../../utils/format-handle";
+
+const getRgbColor = (color?: PlaceStreamChatProfile.Color) =>
+  color ? `rgb(${color.red}, ${color.green}, ${color.blue})` : undefined;
+
+function renderSegment(segment: RichtextSegment, index: number) {
+  if (segment.features && segment.features.length > 0) {
+    const ftr = segment.features[0];
+    if (ftr.$type === "app.bsky.richtext.facet#link") {
+      return (
+        <Text
+          key={index}
+          style={[{ color: "#007AFF" }]}
+          onPress={() => Linking.openURL((ftr as any).uri || "")}
+        >
+          {segment.text}
+        </Text>
+      );
+    }
+    if (ftr.$type === "app.bsky.richtext.facet#mention") {
+      return (
+        <Text key={index} style={[{ color: "#007AFF" }]}>
+          {segment.text}
+        </Text>
+      );
+    }
+  }
+  return <Text key={index}>{segment.text}</Text>;
+}
+
+export function PinnedCommentNotification({
+  pinnedComment,
+  onDismiss,
+  onUnpin,
+}: {
+  pinnedComment: PinnedRecordViewHydrated;
+  onDismiss: () => void;
+  onUnpin: () => void;
+}) {
+  const z = useTheme();
+  const message = pinnedComment.message;
+  const pinnedByColor = (pinnedComment.pinnedBy as any)?.color || "#bebebe";
+  const record = pinnedComment.record;
+
+  const currentStreamer = useLivestreamStore((state) => state.profile?.did);
+
+  console.log("checking if we can mod", currentStreamer);
+
+  const canActuallyPin = useCanModerate(currentStreamer)?.canPin;
+
+  const messageRecord = message?.record as any;
+
+  const [expiresAt] = useState<Date | null>(
+    record.expiresAt ? new Date(record.expiresAt) : null,
+  );
+
+  useEffect(() => {
+    if (!expiresAt) return;
+    const remaining = expiresAt.getTime() - Date.now();
+    if (remaining <= 0) {
+      onDismiss();
+      return;
+    }
+    const timeout = setTimeout(onDismiss, remaining);
+    return () => clearTimeout(timeout);
+  }, [expiresAt, onDismiss]);
+
+  const authorName = message ? formatHandleWithAt(message.author) : "unknown";
+  const authorColor = getRgbColor((message as any)?.chatProfile?.color);
+
+  const segments = messageRecord
+    ? segmentize(messageRecord.text, messageRecord.facets)
+    : [];
+
+  return (
+    <View style={[zero.bg.neutral[900], zero.r.lg, { overflow: "hidden" }]}>
+      <View
+        style={[
+          zero.layout.flex.row,
+          zero.layout.flex.alignCenter,
+          zero.px[3],
+          zero.py[2],
+          { gap: 8 },
+        ]}
+      >
+        <View style={{ transform: [{ rotate: "-25deg" }] }}>
+          <Pin
+            size={24}
+            color={authorColor || z.theme.colors.primary}
+            fill={authorColor || z.theme.colors.primary}
+          />
+        </View>
+        <View
+          style={[zero.layout.flex.column, zero.flex.values[1], { gap: 4 }]}
+        >
+          <View style={[zero.layout.flex.row, { gap: 4, flexWrap: "wrap" }]}>
+            <Text
+              style={[
+                {
+                  fontWeight: "600",
+                  color: authorColor || zero.colors.gray[200],
+                },
+              ]}
+            >
+              {authorName}
+            </Text>
+            {segments.map((seg, i) => renderSegment(seg, i))}
+          </View>
+        </View>
+        <View style={[zero.layout.flex.row, { gap: 4 }]}>
+          {canActuallyPin && (
+            <Pressable onPress={onUnpin} style={{ padding: 4 }}>
+              <X size={16} color={zero.colors.gray[400]} />
+            </Pressable>
+          )}
+          <Pressable onPress={onDismiss} style={{ padding: 4 }}>
+            <EyeOff size={16} color={zero.colors.gray[400]} />
+          </Pressable>
+        </View>
+      </View>
+    </View>
+  );
+}

package/src/components/ui/dropdown.tsx

@@ -74,7 +74,7 @@ export const DropdownMenuSubTrigger = forwardRef<
     inset?: boolean;
     children?: React.ReactNode;
   }
->(({ inset, children, subMenuTitle, ...props }, ref) => {
+>(({ inset, children, subMenuTitle, style, ...props }, ref) => {
   const { icons } = useTheme();
   const { open } = DropdownMenuPrimitive.useSubContext();
   const Icon =
@@ -96,6 +96,7 @@ export const DropdownMenuSubTrigger = forwardRef<
             layout.flex.alignCenter,
             p[2],
             pr[8],
+            style,
           ]}
         >
           {children}
@@ -513,7 +514,7 @@ export const DropdownMenuGroup = forwardRef<
   const { theme } = useTheme();
   const { inset, title, children, ...rest } = props;
   return (
-    <View style={[pt[2], inset && gap[2]]} ref={ref} {...rest}>
+    <View style={[inset && gap[2]]} ref={ref} {...rest}>
       {title && (
         <Text style={[{ color: theme.colors.textMuted }, pb[1], pl[2]]}>
           {title}

package/src/components/ui/resizeable.tsx

@@ -26,8 +26,8 @@ const AnimatedView = Animated.createAnimatedComponent(View);
 const { height: SCREEN_HEIGHT } = Dimensions.get("window");
 
 const TIMING_CONFIG = {
-  duration: 300,
-  easing: Easing.inOut(Easing.quad),
+  duration: 400,
+  easing: Easing.out(Easing.quad),
 };
 
 type ResizableChatSheetProps = {

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/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
 }