@streamplace/components 0.7.2 → 0.7.7

package/src/hooks/usePointerDevice.ts

@@ -0,0 +1,89 @@
+import { useEffect, useState } from "react";
+import { Platform } from "react-native";
+
+export interface PointerDevice {
+  hasHover: boolean;
+  hasFinePointer: boolean;
+  isMouseDriven: boolean;
+  isTouchDriven: boolean;
+}
+
+/**
+ * Hook to detect if the device is primarily mouse-driven vs touch-driven
+ * Uses CSS media queries to detect hover and pointer capabilities
+ */
+export function usePointerDevice(): PointerDevice {
+  const [pointerDevice, setPointerDevice] = useState<PointerDevice>(() => {
+    // Default values for non-web platforms
+    if (Platform.OS !== "web") {
+      return {
+        hasHover: false,
+        hasFinePointer: false,
+        isMouseDriven: false,
+        isTouchDriven: true,
+      };
+    }
+
+    // Initial web detection
+    if (typeof window !== "undefined" && window.matchMedia) {
+      const hasHover = window.matchMedia("(hover: hover)").matches;
+      const hasFinePointer = window.matchMedia("(pointer: fine)").matches;
+
+      return {
+        hasHover,
+        hasFinePointer,
+        isMouseDriven: hasHover && hasFinePointer,
+        isTouchDriven: !hasHover || !hasFinePointer,
+      };
+    }
+
+    // Fallback for SSR or environments without matchMedia
+    return {
+      hasHover: false,
+      hasFinePointer: false,
+      isMouseDriven: false,
+      isTouchDriven: true,
+    };
+  });
+
+  useEffect(() => {
+    // Only run on web platforms
+    if (
+      Platform.OS !== "web" ||
+      typeof window === "undefined" ||
+      !window.matchMedia
+    ) {
+      return;
+    }
+
+    const hoverQuery = window.matchMedia("(hover: hover)");
+    const pointerQuery = window.matchMedia("(pointer: fine)");
+
+    const updatePointerDevice = () => {
+      const hasHover = hoverQuery.matches;
+      const hasFinePointer = pointerQuery.matches;
+
+      setPointerDevice({
+        hasHover,
+        hasFinePointer,
+        isMouseDriven: hasHover && hasFinePointer,
+        isTouchDriven: !hasHover || !hasFinePointer,
+      });
+    };
+
+    // Set up listeners for media query changes
+    hoverQuery.addEventListener("change", updatePointerDevice);
+    pointerQuery.addEventListener("change", updatePointerDevice);
+
+    // Initial update
+    updatePointerDevice();
+
+    // Cleanup
+    return () => {
+      hoverQuery.removeEventListener("change", updatePointerDevice);
+      pointerQuery.removeEventListener("change", updatePointerDevice);
+    };
+  }, []);
+
+  return pointerDevice;
+}

package/src/index.tsx

@@ -18,10 +18,19 @@ export * as ui from "./components/ui";
 
 export * from "./components/ui";
 
-export * as theme from "./lib/theme";
-export * as atoms from "./lib/theme/atoms";
+export * as zero from "./ui";
 
 export * from "./hooks";
 
+// Theme system exports
+export * from "./lib/theme";
+
 export * from "./components/chat/chat";
 export * from "./components/chat/chat-box";
+export * from "./components/chat/system-message";
+export { default as VideoRetry } from "./components/mobile-player/video-retry";
+export * from "./lib/system-messages";
+
+export * from "./components/share/sharesheet";
+
+export * from "./components/keep-awake";

package/src/lib/system-messages.ts

@@ -0,0 +1,135 @@
+import { ChatMessageViewHydrated } from "streamplace";
+
+export enum SystemMessageType {
+  stream_start = "stream_start",
+  stream_end = "stream_end",
+  notification = "notification",
+}
+
+export interface SystemMessageMetadata {
+  username?: string;
+  action?: string;
+  count?: number;
+  duration?: string;
+  reason?: string;
+  streamerName?: string;
+}
+
+/**
+ * Creates a system message with the proper structure
+ * @param type The type of system message
+ * @param text The message text
+ * @param metadata Optional metadata for the message
+ * @returns A properly formatted ChatMessageViewHydrated object
+ */
+export const createSystemMessage = (
+  type: SystemMessageType,
+  text: string,
+  metadata?: SystemMessageMetadata,
+  date: Date = new Date(),
+): ChatMessageViewHydrated => {
+  const now = date;
+
+  return {
+    uri: `at://did:sys:system/place.stream.chat.message/${now.getTime()}`,
+    cid: `system-${now.getTime()}`,
+    author: {
+      did: "did:sys:system",
+      handle: type, // Use handle to specify the type of system message
+    },
+    record: {
+      text,
+      createdAt: now.toISOString(),
+      streamer: "system",
+      $type: "place.stream.chat.message",
+    },
+    indexedAt: now.toISOString(),
+    chatProfile: {
+      color: { red: 128, green: 128, blue: 128 }, // Gray color for system messages
+    },
+  };
+};
+
+/**
+ * System message factory functions for common scenarios
+ */
+export const SystemMessages = {
+  streamStart: (streamerName: string): ChatMessageViewHydrated =>
+    createSystemMessage(
+      SystemMessageType.stream_start,
+      `Now streaming - ${streamerName}`,
+      {
+        streamerName,
+      },
+    ),
+
+  // technically, streams can't 'end' on Streamplace
+  // possibly we could use deleting or editing streams (`endedAt` param) for this?
+  streamEnd: (duration?: string): ChatMessageViewHydrated =>
+    createSystemMessage(
+      SystemMessageType.stream_end,
+      duration ? `Stream has ended. Duration: ${duration}` : "Stream has ended",
+      { duration },
+    ),
+
+  notification: (message: string): ChatMessageViewHydrated =>
+    createSystemMessage(SystemMessageType.notification, message),
+};
+
+/**
+ * Checks if a message is a system message
+ * @param message The message to check
+ * @returns True if the message is a system message
+ */
+export const isSystemMessage = (message: ChatMessageViewHydrated): boolean => {
+  return message.author.did === "did:sys:system";
+};
+
+/**
+ * Gets the system message type from a message
+ * @param message The message to check
+ * @returns The system message type or null if not a system message
+ */
+export const getSystemMessageType = (
+  message: ChatMessageViewHydrated,
+): SystemMessageType | null => {
+  if (!isSystemMessage(message)) {
+    return null;
+  }
+  return message.author.handle as SystemMessageType;
+};
+
+/**
+ * Parses metadata from a system message based on its type
+ * @param message The system message to parse
+ * @returns The parsed metadata
+ */
+export const parseSystemMessageMetadata = (
+  message: ChatMessageViewHydrated,
+): SystemMessageMetadata => {
+  const metadata: SystemMessageMetadata = {};
+  const type = getSystemMessageType(message);
+  const text = message.record.text;
+
+  if (!type) return metadata;
+
+  switch (type) {
+    case "stream_end": {
+      const durationMatch = text.match(/Duration:\s*(\d+:\d+(?::\d+)?)/);
+      if (durationMatch) {
+        metadata.duration = durationMatch[1];
+      }
+      break;
+    }
+
+    case "stream_start": {
+      const streamerMatch = text.match(/^(.+?)\s+is now live!/);
+      if (streamerMatch) {
+        metadata.streamerName = streamerMatch[1];
+      }
+      break;
+    }
+  }
+
+  return metadata;
+};

package/src/livestream-store/chat.tsx

@@ -1,4 +1,4 @@
-import { RichText } from "@atproto/api";
+import { ComAtprotoModerationCreateReport, RichText } from "@atproto/api";
 import { useCallback } from "react";
 import {
   ChatMessageViewHydrated,
@@ -23,6 +23,27 @@ export const useSetReplyToMessage = () => {
   );
 };
 
+export const usePendingHides = () =>
+  useLivestreamStore((state) => state.pendingHides);
+
+export const useAddPendingHide = () => {
+  const store = getStoreFromContext();
+  return useCallback(
+    (messageUri: string) => {
+      const state = store.getState();
+      if (!state.pendingHides.includes(messageUri)) {
+        const newPendingHides = [...state.pendingHides, messageUri];
+        const newState = reduceChat(state, [], [], [messageUri]);
+        store.setState({
+          ...newState,
+          pendingHides: newPendingHides,
+        });
+      }
+    },
+    [store],
+  );
+};
+
 export type NewChatMessage = {
   text: string;
   reply?: {
@@ -87,7 +108,7 @@ export const useCreateChatMessage = () => {
       chatProfile: chatProfile || undefined,
     };
 
-    state = reduceChat(state, [localChat], []);
+    state = reduceChat(state, [localChat], [], []);
     store.setState(state);
 
     await pdsAgent.com.atproto.repo.createRecord({
@@ -109,7 +130,9 @@ const buildSortedChatList = (
     const bTime = parseInt(b.split("-")[0], 10);
     return bTime - aTime;
   });
-  return sortedKeys.map((key) => chatIndex[key]);
+  return sortedKeys
+    .map((key) => chatIndex[key])
+    .filter((msg) => !removedKeys.has(msg.uri));
 };
 
 const profileIsDifferent = (
@@ -138,8 +161,13 @@ export const reduceChatIncremental = (
   state: LivestreamState,
   newMessages: ChatMessageViewHydrated[],
   blocks: PlaceStreamDefs.BlockView[],
+  hideUris: string[] = [],
 ): LivestreamState => {
-  if (newMessages.length === 0 && blocks.length === 0) {
+  if (
+    newMessages.length === 0 &&
+    blocks.length === 0 &&
+    hideUris.length === 0
+  ) {
     return state;
   }
 
@@ -148,6 +176,17 @@ export const reduceChatIncremental = (
   let hasChanges = false;
   const removedKeys = new Set<string>();
 
+  console.log("newMessages", newMessages);
+
+  for (const msg of newMessages) {
+    if (msg.deleted) {
+      hasChanges = true;
+      console.log("deleted", msg.uri);
+      removedKeys.add(msg.uri);
+    }
+  }
+  newMessages = newMessages.filter((msg) => msg.deleted !== true);
+
   // handle blocks
   if (blocks.length > 0) {
     const blockedDIDs = new Set(blocks.map((block) => block.record.subject));
@@ -160,17 +199,32 @@ export const reduceChatIncremental = (
     }
   }
 
+  if (hideUris.length > 0) {
+    for (const [key, message] of Object.entries(newChatIndex)) {
+      if (hideUris.includes(message.uri)) {
+        delete newChatIndex[key];
+        removedKeys.add(key);
+        hasChanges = true;
+      }
+    }
+  }
+
   const messagesToAdd: { key: string; message: ChatMessageViewHydrated }[] = [];
 
   for (const message of newMessages) {
+    // don't worry about messages that will be hidden
+    if (state.pendingHides.includes(message.uri)) {
+      continue;
+    }
+
     const date = new Date(message.record.createdAt);
     const key = `${date.getTime()}-${message.uri}`;
 
     // only change the ref if the profile is different to avoid re-renders elsewhere
     if (
-      profileIsDifferent(message.chatProfile, newAuthors[message.author.handle])
+      profileIsDifferent(message.chatProfile, newAuthors[message.author.did])
     ) {
-      newAuthors[message.author.handle] = message.chatProfile;
+      newAuthors[message.author.did] = message.chatProfile;
     }
 
     // skip messages we already have
@@ -214,17 +268,20 @@ export const reduceChatIncremental = (
 
         if (parentMsgKey) {
           const parentMsg = newChatIndex[parentMsgKey];
-          processedMessage = {
-            ...message,
-            replyTo: {
-              cid: parentMsg.cid,
-              uri: parentMsg.uri,
-              author: parentMsg.author,
-              record: parentMsg.record,
-              chatProfile: parentMsg.chatProfile,
-              indexedAt: parentMsg.indexedAt,
-            },
-          };
+          // Don't allow replies to system messages
+          if (parentMsg.author.did !== "did:sys:system") {
+            processedMessage = {
+              ...message,
+              replyTo: {
+                cid: parentMsg.cid,
+                uri: parentMsg.uri,
+                author: parentMsg.author,
+                record: parentMsg.record,
+                chatProfile: parentMsg.chatProfile,
+                indexedAt: parentMsg.indexedAt,
+              },
+            };
+          }
         }
       }
     }
@@ -251,11 +308,82 @@ export const reduceChatIncremental = (
     removedKeys,
   );
 
+  // Clean up pendingHides - remove URIs that we've now processed
+  let newPendingHides = state.pendingHides;
+  if (hideUris.length > 0) {
+    newPendingHides = state.pendingHides.filter(
+      (uri) => !hideUris.includes(uri),
+    );
+  }
+
   return {
     ...state,
+    authors: newAuthors,
     chatIndex: newChatIndex,
     chat: newChatList,
+    pendingHides: newPendingHides,
   };
 };
 
+export const useSubmitReport = () => {
+  const pdsAgent = usePDSAgent();
+  const userDID = useDID();
+
+  return useCallback(
+    async (
+      subject: ComAtprotoModerationCreateReport.InputSchema["subject"],
+      reasonType: string,
+      reason?: string,
+      // no clue about this
+      moderationSvcDid: string = "did:web:stream.place",
+    ) => {
+      if (!pdsAgent || !userDID) {
+        throw new Error("No PDS agent or user DID found");
+      }
+
+      try {
+        const response = await pdsAgent.com.atproto.moderation.createReport(
+          {
+            reasonType,
+            reason,
+            subject: subject,
+          },
+          {
+            headers: {
+              // "atproto-proxy": `${userDID}#atproto_labeler`,
+            },
+          },
+        );
+
+        return response;
+      } catch (error) {
+        console.error("Failed to submit report:", error);
+        throw error;
+      }
+    },
+    [pdsAgent, userDID],
+  );
+};
+
+export const useReportChatMessage = () => {
+  const submitReport = useSubmitReport();
+
+  return useCallback(
+    async (
+      message: ChatMessageViewHydrated,
+      reasonType: string,
+      reason?: string,
+    ) => {
+      const reportSubject = {
+        $type: "com.atproto.repo.strongRef",
+        uri: message.uri,
+        cid: message.cid,
+      };
+
+      return await submitReport(reportSubject, reasonType, reason);
+    },
+    [submitReport],
+  );
+};
+
 export const reduceChat = reduceChatIncremental;

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

@@ -13,9 +13,19 @@ export interface LivestreamState {
   authors: { [key: string]: ChatMessageViewHydrated["chatProfile"] };
   livestream: LivestreamViewHydrated | null;
   viewers: number | null;
+  pendingHides: string[];
   segment: PlaceStreamSegment.Record | null;
+  recentSegments: PlaceStreamSegment.Record[];
+  problems: LivestreamProblem[];
   renditions: PlaceStreamDefs.Rendition[];
   replyToMessage: ChatMessageViewHydrated | null;
   streamKey: string | null;
   setStreamKey: (key: string | null) => void;
 }
+
+export interface LivestreamProblem {
+  code: string;
+  message: string;
+  severity: "error" | "warning" | "info";
+  link?: string;
+}

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

@@ -13,12 +13,15 @@ export const makeLivestreamStore = (): StoreApi<LivestreamState> => {
     chat: [],
     livestream: null,
     viewers: null,
+    pendingHides: [],
     segment: null,
     renditions: [],
     replyToMessage: null,
     streamKey: null,
     setStreamKey: (sk) => set({ streamKey: sk }),
     authors: {},
+    recentSegments: [],
+    problems: [],
   }));
 };
 

package/src/livestream-store/problems.tsx

@@ -0,0 +1,96 @@
+import { PlaceStreamSegment } from "streamplace";
+import { LivestreamProblem } from "./livestream-state";
+
+const VARIANCE_THRESHOLD = 0.5;
+const DURATION_THRESHOLD = 5000000000; // 5s in ns
+
+const detectVariableSegmentLength = (
+  segments: PlaceStreamSegment.Record[],
+): { variable: boolean; duration: boolean } => {
+  if (segments.length < 3) {
+    // Need at least 3 segments to detect variability
+    return { variable: false, duration: false };
+  }
+
+  const durations = segments
+    .map((segment) => segment.duration)
+    .filter(
+      (duration): duration is number => duration !== undefined && duration > 0,
+    );
+
+  if (durations.length < 3) {
+    return { variable: false, duration: false };
+  }
+
+  // Calculate mean
+  const mean =
+    durations.reduce((sum: number, duration: number) => sum + duration, 0) /
+    durations.length;
+
+  // Calculate standard deviation
+  const variance =
+    durations.reduce((sum: number, duration: number) => {
+      const diff = duration - mean;
+      return sum + diff * diff;
+    }, 0) / durations.length;
+  const stdDev = Math.sqrt(variance);
+
+  // Calculate coefficient of variation (CV)
+  const cv = stdDev / mean;
+
+  // CV > 0.5 indicates high variability
+  // This threshold can be adjusted based on testing
+  return {
+    variable: cv > VARIANCE_THRESHOLD,
+    duration: mean > DURATION_THRESHOLD,
+  };
+};
+
+export const findProblems = (
+  segments: PlaceStreamSegment.Record[],
+): LivestreamProblem[] => {
+  const problems: LivestreamProblem[] = [];
+  let hasBFrames = false;
+  for (const segment of segments) {
+    const video = segment.video?.[0];
+    if (!video) {
+      // i mean yes this is a problem but it can't happen yet
+      continue;
+    }
+    if (video.bframes === true) {
+      hasBFrames = true;
+      break;
+    }
+  }
+  if (hasBFrames) {
+    problems.push({
+      code: "bframes",
+      message:
+        "Your stream contains B-Frames, which are not supported in Streamplace. Your stream will stutter.",
+      severity: "error",
+      link: "https://stream.place/docs/guides/start-streaming/obs/#obs-configuration",
+    });
+  }
+
+  const { variable, duration } = detectVariableSegmentLength(segments);
+  if (variable) {
+    problems.push({
+      code: "variable_segment_length",
+      message:
+        "Your stream contains variable segment lengths, which may cause playback issues.",
+      severity: "warning",
+      link: "https://stream.place/docs/guides/start-streaming/obs/#obs-configuration",
+    });
+  }
+  if (duration) {
+    problems.push({
+      code: "long_segments",
+      message:
+        "Your stream contains long segments (>5s). This will work fine, but increases the delay of the livestream.",
+      severity: "warning",
+      link: "https://stream.place/docs/guides/start-streaming/obs/#obs-configuration",
+    });
+  }
+
+  return problems;
+};

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

@@ -3,13 +3,18 @@ import {
   ChatMessageViewHydrated,
   LivestreamViewHydrated,
   PlaceStreamChatDefs,
+  PlaceStreamChatGate,
   PlaceStreamChatMessage,
   PlaceStreamDefs,
   PlaceStreamLivestream,
   PlaceStreamSegment,
 } from "streamplace";
+import { SystemMessages } from "../lib/system-messages";
 import { reduceChat } from "./chat";
 import { LivestreamState } from "./livestream-state";
+import { findProblems } from "./problems";
+
+const MAX_RECENT_SEGMENTS = 10;
 
 export const handleWebSocketMessages = (
   state: LivestreamState,
@@ -17,9 +22,23 @@ export const handleWebSocketMessages = (
 ): LivestreamState => {
   for (const message of messages) {
     if (PlaceStreamLivestream.isLivestreamView(message)) {
+      const newLivestream = message as LivestreamViewHydrated;
+      const oldLivestream = state.livestream;
+
+      // check if this is actually new
+      if (!oldLivestream || oldLivestream.uri !== newLivestream.uri) {
+        const streamTitle = newLivestream.record.title || "something cool!";
+        const systemMessage = SystemMessages.streamStart(streamTitle);
+        // set proper times
+        systemMessage.indexedAt = newLivestream.indexedAt;
+        systemMessage.record.createdAt = newLivestream.record.createdAt;
+
+        state = reduceChat(state, [systemMessage], []);
+      }
+
       state = {
         ...state,
-        livestream: message as LivestreamViewHydrated,
+        livestream: newLivestream,
       };
     } else if (PlaceStreamLivestream.isViewerCount(message)) {
       state = {
@@ -36,16 +55,24 @@ export const handleWebSocketMessages = (
         indexedAt: message.indexedAt,
         chatProfile: (message as any).chatProfile,
         replyTo: (message as any).replyTo,
+        deleted: message.deleted,
       };
-      state = reduceChat(state, [hydrated], []);
+      state = reduceChat(state, [hydrated], [], []);
     } else if (PlaceStreamSegment.isRecord(message)) {
+      const newRecentSegments = [...state.recentSegments];
+      newRecentSegments.unshift(message);
+      if (newRecentSegments.length > MAX_RECENT_SEGMENTS) {
+        newRecentSegments.pop();
+      }
       state = {
         ...state,
         segment: message as PlaceStreamSegment.Record,
+        recentSegments: newRecentSegments,
+        problems: findProblems(newRecentSegments),
       };
     } else if (PlaceStreamDefs.isBlockView(message)) {
       const block = message as PlaceStreamDefs.BlockView;
-      state = reduceChat(state, [], [block]);
+      state = reduceChat(state, [], [block], []);
     } else if (PlaceStreamDefs.isRenditions(message)) {
       state = {
         ...state,
@@ -56,7 +83,20 @@ export const handleWebSocketMessages = (
         ...state,
         profile: message,
       };
+    } else if (PlaceStreamChatGate.isRecord(message)) {
+      const hideRecord = message as PlaceStreamChatGate.Record;
+      const hiddenMessageUri = hideRecord.hiddenMessage;
+      const newPendingHides = [...state.pendingHides];
+      if (!newPendingHides.includes(hiddenMessageUri)) {
+        newPendingHides.push(hiddenMessageUri);
+      }
+
+      state = {
+        ...state,
+        pendingHides: newPendingHides,
+      };
+      state = reduceChat(state, [], [], [hiddenMessageUri]);
     }
   }
-  return reduceChat(state, [], []);
+  return reduceChat(state, [], [], []);
 };