@streamplace/components 0.10.6 → 0.10.8

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/use-webrtc.tsx

@@ -1,11 +1,14 @@
+import { SessionManager } from "@atproto/api/dist/session-manager";
 import { useEffect, useRef, useState } from "react";
 import * as sdpTransform from "sdp-transform";
 import { StreamplaceAgent } from "streamplace";
 import {
+  createAgentForServer,
   PlayerStatus,
   usePlayerStore,
   usePossiblyUnauthedPDSAgent,
   useStreamKey,
+  useStreamplaceStore,
 } from "../..";
 import { RTCPeerConnection, RTCSessionDescription } from "./webrtc-primitives";
 
@@ -16,6 +19,7 @@ export default function useWebRTC(
   const [stuck, setStuck] = useState<boolean>(false);
   const setStatus = usePlayerStore((x) => x.setStatus);
   let agent = usePossiblyUnauthedPDSAgent();
+  const oauthSession = useStreamplaceStore((state) => state.oauthSession);
 
   const lastChange = useRef<number>(0);
 
@@ -59,6 +63,7 @@ export default function useWebRTC(
         streamer,
         undefined,
         agent,
+        oauthSession,
       );
     });
 
@@ -97,7 +102,7 @@ export default function useWebRTC(
       clearInterval(handle);
       peerConnection.close();
     };
-  }, [streamer, agent]);
+  }, [streamer, agent, oauthSession]);
   return [mediaStream, stuck];
 }
 
@@ -118,6 +123,7 @@ export async function negotiateConnectionWithClientOffer(
   streamer: string,
   bearerToken?: string,
   agent?: StreamplaceAgent,
+  oauthSession?: SessionManager | null,
 ) {
   /** https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/createOffer */
   const offer = await peerConnection.createOffer({
@@ -150,7 +156,13 @@ export async function negotiateConnectionWithClientOffer(
        * This specifies how the client should communicate,
        * and what kind of media client and server have negotiated to exchange.
        */
-      let response = await postSDPOffer(streamer, ofr.sdp, bearerToken, agent);
+      let response = await postSDPOffer(
+        streamer,
+        ofr.sdp,
+        bearerToken,
+        agent,
+        oauthSession,
+      );
       let text = new TextDecoder().decode(response.data);
       if (response.success) {
         if ((peerConnection.connectionState as string) === "closed") {
@@ -233,30 +245,53 @@ export async function negotiateIngestConnectionWithClientOffer(
   }
 }
 
+async function getPlaybackServerAgent(
+  agent: StreamplaceAgent,
+  oauthSession: SessionManager | null | undefined,
+  streamer: string,
+): Promise<StreamplaceAgent> {
+  const workerUrl = (window as any).PLAYBACK_WORKER_URL as string | undefined;
+  if (!workerUrl) {
+    return agent;
+  }
+
+  try {
+    const lookupAgent = new StreamplaceAgent(workerUrl);
+    const res = await lookupAgent.place.stream.playback.getPlaybackServer({
+      stream: streamer,
+    });
+    if (res.data.servers.length > 0) {
+      const serverUrl = res.data.servers[0];
+      console.log(`Using playback server: ${serverUrl}`);
+      return createAgentForServer(oauthSession, serverUrl);
+    }
+  } catch (e) {
+    console.error("getPlaybackServer failed, using default agent:", e);
+  }
+  return agent;
+}
+
 async function postSDPOffer(
   streamer: string,
   data: string,
   bearerToken?: string,
   agent?: StreamplaceAgent,
+  oauthSession?: SessionManager | null,
 ) {
   if (!agent) {
     throw new Error("No agent found");
   }
-  return await agent.place.stream.playback.whep(data, {
+  const playbackAgent = await getPlaybackServerAgent(
+    agent,
+    oauthSession,
+    streamer,
+  );
+  return await playbackAgent.place.stream.playback.whep(data, {
     qp: {
       rendition: "source",
       streamer: streamer,
     },
   });
-  // return await fetch(endpoint, {
-  //   method: "POST",
-  //   mode: "cors",
-  //   headers: {
-  //     "content-type": "application/sdp",
-  //     ...(bearerToken ? { Authorization: `Bearer ${bearerToken}` } : {}),
-  //   },
-  //   body: data,
-  // });
 }
 
 async function postSDPIngestOffer(

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