@streamplace/components 0.9.0 → 0.9.4

package/src/components/ui/resizeable.tsx

@@ -1,5 +1,5 @@
 import { ChevronUp } from "lucide-react-native";
-import { ComponentProps, useEffect } from "react";
+import { ComponentProps, useEffect, useState } from "react";
 import { Dimensions } from "react-native";
 import {
   Gesture,
@@ -9,6 +9,7 @@ import {
 import Animated, {
   Extrapolation,
   interpolate,
+  runOnJS,
   useAnimatedStyle,
   useSharedValue,
   withSpring,
@@ -27,6 +28,7 @@ type ResizableChatSheetProps = {
   isPlayerRatioGreater: boolean;
   style?: ComponentProps<typeof AnimatedView>["style"];
   children?: React.ReactNode;
+  renderAbove?: (isCollapsed: boolean) => React.ReactNode;
 };
 
 const SPRING_CONFIG = { damping: 20, stiffness: 100 };
@@ -36,6 +38,7 @@ export function Resizable({
   isPlayerRatioGreater,
   style = {},
   children,
+  renderAbove,
 }: ResizableChatSheetProps) {
   const { slideKeyboard } = useKeyboardSlide();
   const { bottom: safeBottom } = useSafeAreaInsets();
@@ -45,13 +48,16 @@ export function Resizable({
 
   const sheetHeight = useSharedValue(MIN_HEIGHT);
   const startHeight = useSharedValue(MIN_HEIGHT);
+  const [isCollapsed, setIsCollapsed] = useState(true);
+  const wasCollapsed = useSharedValue(true);
 
   useEffect(() => {
     setTimeout(() => {
-      sheetHeight.value = withSpring(
-        startingPercentage ? startingPercentage * SCREEN_HEIGHT : MIN_HEIGHT,
-        SPRING_CONFIG,
-      );
+      const targetHeight = startingPercentage
+        ? startingPercentage * SCREEN_HEIGHT
+        : MIN_HEIGHT;
+      sheetHeight.value = withSpring(targetHeight, SPRING_CONFIG);
+      setIsCollapsed(targetHeight < COLLAPSE_HEIGHT);
     }, 1000);
   }, []);
 
@@ -65,8 +71,14 @@ export function Resizable({
       if (newHeight < MIN_HEIGHT) newHeight = MIN_HEIGHT;
       sheetHeight.value = newHeight;
 
-      if (newHeight < COLLAPSE_HEIGHT) {
+      const nowCollapsed = newHeight < COLLAPSE_HEIGHT;
+      if (nowCollapsed && !wasCollapsed.value) {
         sheetHeight.value = withSpring(MIN_HEIGHT, SPRING_CONFIG);
+        wasCollapsed.value = true;
+        runOnJS(setIsCollapsed)(true);
+      } else if (!nowCollapsed && wasCollapsed.value) {
+        wasCollapsed.value = false;
+        runOnJS(setIsCollapsed)(false);
       }
     });
 
@@ -97,6 +109,19 @@ export function Resizable({
     ],
   }));
 
+  const aboveElementStyle = useAnimatedStyle(() => ({
+    // show inside area when not collapsed, and show outside area when collapsed
+    height: sheetHeight.value < COLLAPSE_HEIGHT ? 0 : sheetHeight.value,
+    transform: [
+      {
+        translateY:
+          sheetHeight.value < COLLAPSE_HEIGHT
+            ? withSpring(-120)
+            : withSpring(20),
+      },
+    ],
+  }));
+
   return (
     <>
       <Animated.View
@@ -111,10 +136,11 @@ export function Resizable({
       >
         <Pressable
           onPress={() => {
-            sheetHeight.value =
-              sheetHeight.value === MIN_HEIGHT
-                ? withSpring(MAX_HEIGHT, SPRING_CONFIG)
-                : withSpring(MIN_HEIGHT, SPRING_CONFIG);
+            const isCurrentlyCollapsed = sheetHeight.value === MIN_HEIGHT;
+            sheetHeight.value = isCurrentlyCollapsed
+              ? withSpring(MAX_HEIGHT, SPRING_CONFIG)
+              : withSpring(MIN_HEIGHT, SPRING_CONFIG);
+            setIsCollapsed(!isCurrentlyCollapsed);
           }}
         >
           <View
@@ -155,36 +181,64 @@ export function Resizable({
         ]}
       >
         <View style={[layout.flex.row, layout.flex.justifyCenter, h[2]]}>
-          <GestureDetector gesture={panGesture}>
-            <View
-              // Make the touch area much larger, but keep the visible handle small
-              style={{
-                height: 30, // Large touch area
-                width: 120, // Wide enough for thumbs
-                alignItems: "center",
-                justifyContent: "center",
-                //backgroundColor: "rgba(0,255,255,0.1)",
-                transform: [{ translateY: -30 }],
-              }}
-            >
+          <View style={{ alignItems: "center", width: "100%" }}>
+            <GestureDetector gesture={panGesture}>
               <View
-                style={[
-                  w[32],
-                  {
-                    height: 6,
-                    backgroundColor: "#eeeeee66",
-                    borderRadius: 999,
-
-                    transform: [{ translateY: 5 }],
-                  },
-                ]}
-              />
-            </View>
-          </GestureDetector>
+                // Make the touch area much larger, but keep the visible handle small
+                style={{
+                  height: 30, // Large touch area
+                  width: 120, // Wide enough for thumbs
+                  alignItems: "center",
+                  justifyContent: "center",
+                  //backgroundColor: "rgba(0,255,255,0.1)",
+                  transform: [{ translateY: -30 }],
+                }}
+              >
+                <View
+                  style={[
+                    w[32],
+                    {
+                      height: 6,
+                      backgroundColor: "#eeeeee66",
+                      borderRadius: 999,
+
+                      transform: [{ translateY: 5 }],
+                    },
+                  ]}
+                />
+              </View>
+            </GestureDetector>
+          </View>
         </View>
 
         {children}
       </AnimatedView>
+      <Animated.View
+        style={[
+          aboveElementStyle,
+          {
+            width: "100%",
+            pointerEvents: "none",
+            position: "absolute",
+            bottom: 0,
+          },
+        ]}
+      >
+        <View
+          style={{
+            pointerEvents: "auto",
+            width: "100%",
+            // hate doing it this way, but can't figure out
+            // how to make it size to content otherwise
+            minHeight: 50,
+            height: "100%",
+            maxHeight: 75,
+            flex: 0,
+          }}
+        >
+          {renderAbove?.(isCollapsed)}
+        </View>
+      </Animated.View>
     </>
   );
 }

package/src/index.tsx

@@ -37,6 +37,9 @@ export * from "./components/chat/system-message";
 export { default as VideoRetry } from "./components/mobile-player/video-retry";
 export * from "./lib/system-messages";
 
+export * from "./components/stream-notification";
+export * from "./lib/stream-notifications";
+
 export * from "./utils/format-handle";
 
 export { DanmuOverlay } from "./components/danmu/danmu-overlay";

package/src/lib/slash-commands/teleport.ts

@@ -0,0 +1,136 @@
+import { PlaceStreamLiveTeleport, StreamplaceAgent } from "streamplace";
+import {
+  registerSlashCommand,
+  SlashCommandHandler,
+  SlashCommandResult,
+} from "../slash-commands";
+
+export async function deleteTeleport(
+  pdsAgent: StreamplaceAgent,
+  userDID: string,
+  uri: string,
+) {
+  const rkey = uri.split("/").pop();
+  if (!rkey) {
+    throw new Error("No rkey found in teleport URI");
+  }
+  return await pdsAgent.com.atproto.repo.deleteRecord({
+    repo: userDID,
+    collection: "place.stream.live.teleport",
+    rkey: rkey,
+  });
+}
+
+export function registerTeleportCommand(
+  pdsAgent: StreamplaceAgent,
+  userDID: string,
+  setActiveTeleportUri?: (uri: string | null) => void,
+) {
+  const teleportHandler: SlashCommandHandler = async (
+    args,
+    rawInput,
+  ): Promise<SlashCommandResult> => {
+    if (args.length === 0) {
+      return {
+        handled: true,
+        error: "Usage: /teleport @handle.bsky.social [duration_seconds]",
+      };
+    }
+
+    let targetHandle = args[0];
+
+    if (targetHandle.startsWith("@")) {
+      targetHandle = targetHandle.slice(1);
+    }
+
+    if (!targetHandle.includes(".")) {
+      return {
+        handled: true,
+        error: "Invalid handle format. Expected: handle.bsky.social",
+      };
+    }
+
+    let countdownSeconds = 10;
+    if (args.length > 1) {
+      const parsedDuration = parseInt(args[1], 10);
+      if (isNaN(parsedDuration)) {
+        return {
+          handled: true,
+          error: "Countdown must be a number (seconds)",
+        };
+      }
+      if (parsedDuration < 5 || parsedDuration > 300) {
+        return {
+          handled: true,
+          error: "Countdown must be between 5 seconds and 5 minutes",
+        };
+      }
+      countdownSeconds = parsedDuration;
+    }
+
+    let targetDID: string;
+    try {
+      const resolution = await pdsAgent.resolveHandle({
+        handle: targetHandle,
+      });
+      targetDID = resolution.data.did;
+    } catch (err) {
+      return {
+        handled: true,
+        error: `Could not resolve handle: ${targetHandle}`,
+      };
+    }
+
+    if (targetDID === userDID) {
+      return {
+        handled: true,
+        error: "You cannot teleport to yourself",
+      };
+    }
+
+    const startsAt = new Date(
+      Date.now() + countdownSeconds * 1000,
+    ).toISOString();
+
+    const record: PlaceStreamLiveTeleport.Record = {
+      $type: "place.stream.live.teleport",
+      streamer: targetDID,
+      startsAt,
+      countdownSeconds,
+    };
+
+    try {
+      const result = await pdsAgent.com.atproto.repo.createRecord({
+        repo: userDID,
+        collection: "place.stream.live.teleport",
+        record,
+      });
+
+      // store the URI in the livestream store
+      if (setActiveTeleportUri) {
+        setActiveTeleportUri(result.data.uri);
+      }
+
+      return { handled: true };
+    } catch (err) {
+      return {
+        handled: true,
+        error: err instanceof Error ? err.message : "Failed to create teleport",
+      };
+    }
+  };
+
+  registerSlashCommand({
+    name: "teleport",
+    description: "Start a teleport to another streamer",
+    usage: "/teleport @handle.bsky.social [duration_seconds]",
+    handler: teleportHandler,
+  });
+
+  registerSlashCommand({
+    name: "tp",
+    description: "Start a teleport to another streamer (alias for /teleport)",
+    usage: "/tp @handle.bsky.social [duration_seconds]",
+    handler: teleportHandler,
+  });
+}

package/src/lib/slash-commands.ts

@@ -0,0 +1,65 @@
+export interface SlashCommandResult {
+  handled: boolean;
+  error?: string;
+}
+
+export type SlashCommandHandler = (
+  args: string[],
+  rawInput: string,
+) => Promise<SlashCommandResult>;
+
+export interface SlashCommand {
+  name: string;
+  description: string;
+  usage: string;
+  handler: SlashCommandHandler;
+}
+
+const commands = new Map<string, SlashCommand>();
+
+export function registerSlashCommand(command: SlashCommand) {
+  commands.set(command.name, command);
+}
+
+export function unregisterSlashCommand(name: string) {
+  commands.delete(name);
+}
+
+export async function handleSlashCommand(
+  input: string,
+): Promise<SlashCommandResult> {
+  const trimmed = input.trim();
+  if (!trimmed.startsWith("/")) {
+    return { handled: false };
+  }
+
+  const parts = trimmed.slice(1).split(/\s+/);
+  const commandName = parts[0]?.toLowerCase();
+  const args = parts.slice(1);
+
+  if (!commandName) {
+    return { handled: false };
+  }
+
+  const command = commands.get(commandName);
+  if (!command) {
+    return {
+      // for now - return false
+      handled: false,
+      error: `Unknown command: /${commandName}`,
+    };
+  }
+
+  try {
+    return await command.handler(args, trimmed);
+  } catch (err) {
+    return {
+      handled: true,
+      error: err instanceof Error ? err.message : "Command failed",
+    };
+  }
+}
+
+export function getRegisteredCommands(): SlashCommand[] {
+  return Array.from(commands.values());
+}

package/src/lib/stream-notifications.ts

@@ -0,0 +1,51 @@
+import React from "react";
+import { streamNotification } from "../components/stream-notification";
+import { TeleportNotification } from "../components/stream-notification/teleport-notification";
+
+export const StreamNotifications = {
+  teleport: (params: {
+    targetHandle: string;
+    targetDID: string;
+    countdown: number;
+    canCancel: boolean;
+    onDismiss?: (reason?: "user" | "auto") => void;
+  }) => {
+    streamNotification.show({
+      id: "teleport",
+      render: (isExiting, onDismiss, startTime) => {
+        return React.createElement(TeleportNotification, {
+          targetHandle: params.targetHandle,
+          countdown: params.countdown,
+          canCancel: params.canCancel,
+          startTime: startTime,
+          onDismiss: onDismiss,
+        });
+      },
+      duration: 0, // manually dismissed by countdown or user cancel
+      variant: "warning",
+      onDismiss: params.onDismiss,
+    });
+  },
+
+  teleportCancelled: () => {
+    streamNotification.hide("teleport");
+  },
+
+  teleportNow: (targetHandle: string) => {
+    streamNotification.show({
+      id: "teleport-now",
+      message: `Teleporting to @${targetHandle}...`,
+      duration: 2,
+      variant: "info",
+    });
+  },
+
+  activate: (message: string) => {
+    streamNotification.show({
+      id: "stream-activate",
+      message: message,
+      duration: 3,
+      variant: "info",
+    });
+  },
+};

package/src/lib/system-messages.ts

@@ -4,6 +4,7 @@ export enum SystemMessageType {
   stream_start = "stream_start",
   stream_end = "stream_end",
   notification = "notification",
+  command_error = "command_error",
 }
 
 export interface SystemMessageMetadata {
@@ -22,6 +23,8 @@ export interface SystemMessageMetadata {
  * @param metadata Optional metadata for the message
  * @returns A properly formatted ChatMessageViewHydrated object
  */
+let systemMessageCounter = 0;
+
 export const createSystemMessage = (
   type: SystemMessageType,
   text: string,
@@ -29,10 +32,11 @@ export const createSystemMessage = (
   date: Date = new Date(),
 ): ChatMessageViewHydrated => {
   const now = date;
+  const uniqueId = `${now.getTime()}-${systemMessageCounter++}`;
 
   return {
-    uri: `at://did:sys:system/place.stream.chat.message/${now.getTime()}`,
-    cid: `system-${now.getTime()}`,
+    uri: `at://did:sys:system/place.stream.chat.message/${uniqueId}`,
+    cid: `system-${uniqueId}`,
     author: {
       did: "did:sys:system",
       handle: type, // Use handle to specify the type of system message
@@ -73,8 +77,54 @@ export const SystemMessages = {
       { duration },
     ),
 
+  teleportArrival: (
+    streamerName: string,
+    streamerDid: string,
+    count: number,
+    chatProfile?: any,
+  ): ChatMessageViewHydrated => {
+    const text =
+      count > 0
+        ? `${count} viewer${count !== 1 ? "s" : ""} teleported from ${streamerName}'s stream! Say hi!`
+        : `Someone teleported from ${streamerName}'s stream! Say hi!`;
+    const message = createSystemMessage(SystemMessageType.notification, text, {
+      streamerName,
+      count,
+    });
+
+    // create a mention facet for the streamer name so it gets colored using existing mention rendering
+    if (chatProfile && streamerDid) {
+      const nameStart = text.indexOf(streamerName);
+
+      // encode byte positions
+      const encoder = new TextEncoder();
+      const byteStart = encoder.encode(text.substring(0, nameStart)).length;
+      const byteEnd = byteStart + encoder.encode(streamerName).length;
+
+      message.record.facets = [
+        {
+          index: {
+            byteStart,
+            byteEnd,
+          },
+          features: [
+            {
+              $type: "app.bsky.richtext.facet#mention",
+              did: streamerDid,
+            },
+          ],
+        },
+      ];
+    }
+
+    return message;
+  },
+
   notification: (message: string): ChatMessageViewHydrated =>
     createSystemMessage(SystemMessageType.notification, message),
+
+  commandError: (message: string): ChatMessageViewHydrated =>
+    createSystemMessage(SystemMessageType.command_error, message),
 };
 
 /**

package/src/livestream-provider/index.tsx

@@ -1,14 +1,24 @@
-import React, { useContext, useRef } from "react";
-import { LivestreamContext, makeLivestreamStore } from "../livestream-store";
+import React, { useContext, useEffect, useRef } from "react";
+import { useAvatars } from "../hooks";
+import { deleteTeleport } from "../lib/slash-commands/teleport";
+import { StreamNotifications } from "../lib/stream-notifications";
+import {
+  LivestreamContext,
+  makeLivestreamStore,
+  useLivestreamStore,
+} from "../livestream-store";
+import { useDID, usePDSAgent } from "../streamplace-store";
 import { useLivestreamWebsocket } from "./websocket";
 
 export function LivestreamProvider({
   children,
   src,
+  onTeleport,
   ignoreOuterContext = false,
 }: {
   children: React.ReactNode;
   src: string;
+  onTeleport?: (targetHandle: string, targetDID: string) => void;
   ignoreOuterContext?: boolean;
 }) {
   const context = useContext(LivestreamContext);
@@ -24,7 +34,9 @@ export function LivestreamProvider({
   (window as any).livestreamStore = store;
   return (
     <LivestreamContext.Provider value={{ store: store }}>
-      <LivestreamPoller src={src}>{children}</LivestreamPoller>
+      <LivestreamPoller src={src} onTeleport={onTeleport}>
+        {children}
+      </LivestreamPoller>
     </LivestreamContext.Provider>
   );
 }
@@ -34,18 +46,109 @@ export function WebsocketWatcher({ src }: { src: string }) {
   return <></>;
 }
 
+export function TeleportWatcher({
+  onTeleport,
+}: {
+  onTeleport?: (targetHandle: string, targetDID: string) => void;
+}) {
+  const activeTeleport = useLivestreamStore((state) => state.activeTeleport);
+  const activeTeleportUri = useLivestreamStore(
+    (state) => state.activeTeleportUri,
+  );
+  const profile = useAvatars(activeTeleport ? [activeTeleport.streamer] : []);
+  const livestreamProfile = useLivestreamStore((state) => state.profile);
+  const pdsAgent = usePDSAgent();
+  const userDID = useDID();
+  const prevActiveTeleportRef = useRef(activeTeleport);
+
+  useEffect(() => {
+    if (!activeTeleport || !profile[activeTeleport.streamer]) return;
+
+    const startsAt = new Date(activeTeleport.startsAt);
+    const now = new Date();
+    const countdown = Math.max(
+      0,
+      Math.floor((startsAt.getTime() - now.getTime()) / 1000),
+    );
+
+    // resolve the DID to a handle for display
+    const targetHandle =
+      profile[activeTeleport.streamer]?.handle || activeTeleport.streamer;
+
+    // check if the current user is the streamer of the current livestream
+    const canCancel = livestreamProfile?.did === userDID;
+
+    StreamNotifications.teleport({
+      targetHandle: targetHandle,
+      targetDID: activeTeleport.streamer,
+      countdown: countdown,
+      canCancel: canCancel,
+      onDismiss: async (reason) => {
+        console.log(
+          "🔍 StreamNotifications.onDismiss called with reason:",
+          reason,
+        );
+        if (reason === "user" && activeTeleportUri && pdsAgent && userDID) {
+          try {
+            await deleteTeleport(pdsAgent, userDID, activeTeleportUri);
+          } catch (err) {
+            console.error("Failed to delete teleport:", err);
+          }
+        }
+        if (reason === "auto" && onTeleport) {
+          console.log(
+            "🔍 Calling onTeleport with:",
+            targetHandle,
+            activeTeleport.streamer,
+          );
+          onTeleport(targetHandle, activeTeleport.streamer);
+        } else if (reason === "auto" && !onTeleport) {
+          console.log("🔍 onTeleport is not defined!");
+        } else if (reason === "auto") {
+          console.log(
+            "🔍 Reason is auto but teleport function not called for unknown reason",
+          );
+        }
+      },
+    });
+  }, [
+    activeTeleport,
+    activeTeleportUri,
+    profile,
+    onTeleport,
+    pdsAgent,
+    userDID,
+  ]);
+
+  useEffect(() => {
+    if (
+      prevActiveTeleportRef.current &&
+      !activeTeleport &&
+      !activeTeleportUri
+    ) {
+      StreamNotifications.teleportCancelled();
+    }
+    prevActiveTeleportRef.current = activeTeleport;
+  }, [activeTeleport, activeTeleportUri]);
+
+  return <></>;
+}
+
 export function LivestreamPoller({
   children,
   src,
+  onTeleport,
 }: {
   children: React.ReactNode;
   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} />
       {children}
     </>
   );

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

@@ -3,6 +3,7 @@ import {
   ChatMessageViewHydrated,
   LivestreamViewHydrated,
   PlaceStreamDefs,
+  PlaceStreamLiveTeleport,
   PlaceStreamModerationPermission,
   PlaceStreamSegment,
 } from "streamplace";
@@ -22,6 +23,9 @@ export interface LivestreamState {
   replyToMessage: ChatMessageViewHydrated | null;
   streamKey: string | null;
   setStreamKey: (key: string | null) => void;
+  activeTeleport: PlaceStreamLiveTeleport.Record | null;
+  activeTeleportUri: string | null;
+  setActiveTeleportUri: (uri: string | null) => void;
   websocketConnected: boolean;
   hasReceivedSegment: boolean;
   moderationPermissions: PlaceStreamModerationPermission.Record[];