@streamplace/components 0.7.3 → 0.7.7

package/dist/components/share/sharesheet.js

@@ -0,0 +1,91 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ShareSheet = ShareSheet;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const lucide_react_native_1 = require("lucide-react-native");
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const theme_1 = require("../../lib/theme");
+const livestream_store_1 = require("../../livestream-store");
+const streamplace_store_1 = require("../../streamplace-store");
+const bluesky_icon_1 = require("../icons/bluesky-icon");
+const ui_1 = require("../ui");
+function ShareSheet({ onShare } = {}) {
+    const profile = (0, livestream_store_1.useLivestreamStore)((x) => x.profile);
+    const [isCopying, setIsCopying] = (0, react_1.useState)(false);
+    const url = (0, streamplace_store_1.useUrl)();
+    // Get the current stream URL
+    const getStreamUrl = (0, react_1.useCallback)(() => {
+        return url + (profile ? `/@${profile.handle}` : "");
+    }, [profile]);
+    // Get the embed URL
+    const getEmbedUrl = (0, react_1.useCallback)(() => {
+        return url + (profile ? `/embed/${profile.handle}` : "");
+    }, [profile]);
+    // Get embed code
+    const getEmbedCode = (0, react_1.useCallback)(() => {
+        const embedUrl = getEmbedUrl();
+        return `<iframe src="${embedUrl}" width="640" height="360" frameborder="0" allowfullscreen></iframe>`;
+    }, [getEmbedUrl]);
+    // Copy to clipboard handler
+    const copyToClipboard = (0, react_1.useCallback)(async (text, label) => {
+        setIsCopying(true);
+        try {
+            if (react_native_1.Platform.OS === "web") {
+                await navigator.clipboard.writeText(text);
+            }
+            else {
+                react_native_1.Clipboard.setString(text);
+            }
+            onShare?.(`copy_${label.toLowerCase().replace(/\s+/g, "_")}`, true);
+        }
+        catch (error) {
+            onShare?.(`copy_${label.toLowerCase().replace(/\s+/g, "_")}`, false);
+        }
+        finally {
+            setIsCopying(false);
+        }
+    }, [onShare]);
+    // Share to Bluesky
+    const shareToBluesky = (0, react_1.useCallback)(() => {
+        const streamUrl = getStreamUrl();
+        const text = profile
+            ? `Check out @${profile.handle} live on Streamplace! ${streamUrl}`
+            : `Check out this stream on Streamplace! ${streamUrl}`;
+        const blueskyUrl = `https://bsky.app/intent/compose?text=${encodeURIComponent(text)}`;
+        react_native_1.Linking.openURL(blueskyUrl);
+        onShare?.("share_bluesky", true);
+    }, [profile, getStreamUrl, onShare]);
+    // Share to Twitter/X
+    const shareToTwitter = (0, react_1.useCallback)(() => {
+        const streamUrl = getStreamUrl();
+        const text = profile
+            ? `Check out @${profile.handle} live on Streamplace!`
+            : `Check out this stream on Streamplace!`;
+        const twitterUrl = `https://twitter.com/intent/tweet?text=${encodeURIComponent(text)}&url=${encodeURIComponent(streamUrl)}`;
+        react_native_1.Linking.openURL(twitterUrl);
+        onShare?.("share_twitter", true);
+    }, [profile, getStreamUrl, onShare]);
+    // Native share (mobile)
+    const nativeShare = (0, react_1.useCallback)(async () => {
+        const streamUrl = getStreamUrl();
+        const text = profile
+            ? `Check out @${profile.handle} live on Streamplace!`
+            : `Check out this stream on Streamplace!`;
+        if (react_native_1.Platform.OS === "web" && navigator.share) {
+            try {
+                await navigator.share({
+                    title: "Streamplace",
+                    text: text,
+                    url: streamUrl,
+                });
+                onShare?.("share_native", true);
+            }
+            catch (error) {
+                // User cancelled or error occurred
+                onShare?.("share_native", false);
+            }
+        }
+    }, [profile, getStreamUrl, onShare]);
+    return ((0, jsx_runtime_1.jsxs)(ui_1.DropdownMenu, { children: [(0, jsx_runtime_1.jsx)(ui_1.DropdownMenuTrigger, { children: (0, jsx_runtime_1.jsx)(lucide_react_native_1.Share2, { color: theme_1.colors.gray[200] }) }), (0, jsx_runtime_1.jsxs)(ui_1.ResponsiveDropdownMenuContent, { children: [(0, jsx_runtime_1.jsxs)(ui_1.DropdownMenuGroup, { title: "Share", children: [(0, jsx_runtime_1.jsx)(ui_1.DropdownMenuItem, { onPress: shareToBluesky, closeOnPress: true, children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: { flexDirection: "row", alignItems: "center", gap: 12 }, children: [(0, jsx_runtime_1.jsx)(bluesky_icon_1.BlueskyIcon, { size: 20, color: theme_1.colors.gray[400] }), (0, jsx_runtime_1.jsx)(ui_1.Text, { children: "Share to Bluesky" })] }) }), react_native_1.Platform.OS !== "web" || (navigator && navigator.share) ? ((0, jsx_runtime_1.jsx)(ui_1.DropdownMenuItem, { onPress: nativeShare, children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: { flexDirection: "row", alignItems: "center", gap: 12 }, children: [(0, jsx_runtime_1.jsx)(lucide_react_native_1.Share2, { size: 20, color: theme_1.colors.gray[400] }), (0, jsx_runtime_1.jsx)(ui_1.Text, { children: "More Options..." })] }) })) : null] }), (0, jsx_runtime_1.jsxs)(ui_1.DropdownMenuGroup, { title: "Copy", children: [(0, jsx_runtime_1.jsx)(ui_1.DropdownMenuItem, { onPress: () => copyToClipboard(getStreamUrl(), "Stream link"), disabled: isCopying, closeOnPress: true, children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: { flexDirection: "row", alignItems: "center", gap: 12 }, children: [(0, jsx_runtime_1.jsx)(lucide_react_native_1.Link2, { size: 20, color: theme_1.colors.gray[400] }), (0, jsx_runtime_1.jsx)(ui_1.Text, { children: "Copy Link" })] }) }), (0, jsx_runtime_1.jsx)(ui_1.DropdownMenuSeparator, {}), (0, jsx_runtime_1.jsx)(ui_1.DropdownMenuItem, { onPress: () => copyToClipboard(getEmbedCode(), "Embed code"), disabled: isCopying, closeOnPress: true, children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: { flexDirection: "row", alignItems: "center", gap: 12 }, children: [(0, jsx_runtime_1.jsx)(lucide_react_native_1.Code, { size: 20, color: theme_1.colors.gray[400] }), (0, jsx_runtime_1.jsx)(ui_1.Text, { children: "Copy Embed Code" })] }) }), (0, jsx_runtime_1.jsx)(ui_1.DropdownMenuSeparator, {}), (0, jsx_runtime_1.jsx)(ui_1.DropdownMenuItem, { closeOnPress: true, onPress: () => copyToClipboard(getEmbedUrl(), "Embed URL"), disabled: isCopying, children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: { flexDirection: "row", alignItems: "center", gap: 12 }, children: [(0, jsx_runtime_1.jsx)(lucide_react_native_1.Copy, { size: 20, color: theme_1.colors.gray[400] }), (0, jsx_runtime_1.jsx)(ui_1.Text, { children: "Copy Embed URL" })] }) })] })] })] }));
+}

package/dist/components/ui/dialog.js

@@ -103,7 +103,7 @@ exports.DialogFooter = (0, react_1.forwardRef)(({ children, direction = "row", j
 exports.DialogFooter.displayName = "DialogFooter";
 // Dialog Close Icon component (Lucide X)
 const DialogCloseIcon = () => {
-    return (0, jsx_runtime_1.jsx)(ThemedX, { size: "md", variant: "muted" });
+    return (0, jsx_runtime_1.jsx)(ThemedX, { size: "md", variant: "default" });
 };
 // Create theme-aware styles
 function createStyles(theme) {

package/dist/components/ui/dropdown.js

@@ -23,7 +23,7 @@ exports.DropdownMenuBottomSheet = (0, react_1.forwardRef)(function DropdownMenuB
     const sheetRef = (0, react_1.useRef)(null);
     return ((0, jsx_runtime_1.jsx)(DropdownMenuPrimitive.Portal, { hostName: portalHost, children: (0, jsx_runtime_1.jsx)(bottom_sheet_1.default, { ref: sheetRef, 
             // why the heck is this 1-indexed
-            index: open ? 3 : -1, snapPoints: snapPoints, enablePanDownToClose: true, onClose: () => onOpenChange?.(false), style: [overlayStyle], backgroundStyle: [atoms_1.bg.black, atoms_1.a.radius.all.md, atoms_1.a.shadows.md, atoms_1.p[1]], handleIndicatorStyle: [
+            index: open ? 3 : -1, snapPoints: snapPoints, enablePanDownToClose: true, enableDynamicSizing: true, enableContentPanningGesture: false, backdropComponent: ({ style }) => ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { style: [style, react_native_1.StyleSheet.absoluteFill], onPress: () => onOpenChange?.(false) })), onClose: () => onOpenChange?.(false), style: [overlayStyle], backgroundStyle: [atoms_1.bg.black, atoms_1.a.radius.all.md, atoms_1.a.shadows.md, atoms_1.p[1]], handleIndicatorStyle: [
                 atoms_1.a.sizes.width[12],
                 atoms_1.a.sizes.height[1],
                 atoms_1.bg.gray[500],
@@ -129,7 +129,7 @@ exports.DropdownMenuLabel = (0, react_1.forwardRef)(({ inset, ...props }, ref) =
         ], ...props }));
 });
 exports.DropdownMenuSeparator = (0, react_1.forwardRef)((props, ref) => {
-    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { ref: ref, style: [atoms_1.mx[2], atoms_1.h[0.5] || { height: 0.5 }, atoms_1.bg.gray[800]], ...props }));
+    return (0, jsx_runtime_1.jsx)(react_native_1.View, { ref: ref, style: [{ height: 0.5 }, atoms_1.bg.gray[800]], ...props });
 });
 function DropdownMenuShortcut(props) {
     return ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [
@@ -141,11 +141,11 @@ function DropdownMenuShortcut(props) {
 }
 exports.DropdownMenuGroup = (0, react_1.forwardRef)((props, ref) => {
     const { inset, title, children, ...rest } = props;
-    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [atoms_1.pt[2], inset ? atoms_1.gap[2] : atoms_1.gap[1]], ref: ref, ...rest, children: [title && ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [atoms_1.textColors.gray[400], atoms_1.pb[1], atoms_1.pl[2]], children: title })), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [atoms_1.pt[2], inset && atoms_1.gap[2]], ref: ref, ...rest, children: [title && ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [atoms_1.textColors.gray[400], atoms_1.pb[1], atoms_1.pl[2]], children: title })), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
                     atoms_1.bg.gray[900],
-                    react_native_1.Platform.OS === "web" ? atoms_1.px[2] : atoms_1.p[2],
-                    atoms_1.gap[2],
-                    { borderRadius: atoms_1.borderRadius.lg, gap: 10 },
+                    react_native_1.Platform.OS === "web" ? [atoms_1.px[2], atoms_1.py[1]] : atoms_1.p[2],
+                    atoms_1.gap.all[1],
+                    { borderRadius: atoms_1.borderRadius.lg },
                 ], children: children })] }));
 });
 exports.DropdownMenuInfo = (0, react_1.forwardRef)(({ description, ...props }, ref) => {

package/dist/components/ui/index.js

@@ -15,7 +15,9 @@ tslib_1.__exportStar(require("./icons"), exports);
 tslib_1.__exportStar(require("./input"), exports);
 tslib_1.__exportStar(require("./loader"), exports);
 tslib_1.__exportStar(require("./resizeable"), exports);
+tslib_1.__exportStar(require("./slider"), exports);
 tslib_1.__exportStar(require("./text"), exports);
+tslib_1.__exportStar(require("./textarea"), exports);
 tslib_1.__exportStar(require("./toast"), exports);
 tslib_1.__exportStar(require("./view"), exports);
 // Component collections for easy importing

package/dist/components/ui/primitives/modal.js

@@ -121,7 +121,6 @@ const primitiveStyles = react_native_1.StyleSheet.create({
         padding: 16,
     },
     content: {
-        backgroundColor: "white",
         borderRadius: 8,
         overflow: "hidden",
     },

package/dist/components/ui/slider.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Slider = void 0;
+const tslib_1 = require("tslib");
+exports.Slider = tslib_1.__importStar(require("@rn-primitives/slider"));

package/dist/hooks/index.js

@@ -9,5 +9,6 @@ tslib_1.__exportStar(require("./useKeyboardSlide"), exports);
 tslib_1.__exportStar(require("./useLivestreamInfo"), exports);
 tslib_1.__exportStar(require("./useOuterAndInnerDimensions"), exports);
 tslib_1.__exportStar(require("./usePlayerDimensions"), exports);
+tslib_1.__exportStar(require("./usePointerDevice"), exports);
 tslib_1.__exportStar(require("./useSegmentDimensions"), exports);
 tslib_1.__exportStar(require("./useSegmentTiming"), exports);

package/dist/hooks/usePointerDevice.js

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePointerDevice = usePointerDevice;
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+/**
+ * Hook to detect if the device is primarily mouse-driven vs touch-driven
+ * Uses CSS media queries to detect hover and pointer capabilities
+ */
+function usePointerDevice() {
+    const [pointerDevice, setPointerDevice] = (0, react_1.useState)(() => {
+        // Default values for non-web platforms
+        if (react_native_1.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,
+        };
+    });
+    (0, react_1.useEffect)(() => {
+        // Only run on web platforms
+        if (react_native_1.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/dist/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.atoms = exports.theme = exports.ui = exports.PlayerUI = exports.Player = exports.usePlayerContext = exports.withPlayerProvider = exports.PlayerProvider = void 0;
+exports.VideoRetry = exports.zero = exports.ui = exports.PlayerUI = exports.Player = exports.usePlayerContext = exports.withPlayerProvider = exports.PlayerProvider = void 0;
 const tslib_1 = require("tslib");
 // barrel file :)
 tslib_1.__exportStar(require("./livestream-provider"), exports);
@@ -18,8 +18,15 @@ Object.defineProperty(exports, "Player", { enumerable: true, get: function () {
 Object.defineProperty(exports, "PlayerUI", { enumerable: true, get: function () { return player_1.PlayerUI; } });
 exports.ui = tslib_1.__importStar(require("./components/ui"));
 tslib_1.__exportStar(require("./components/ui"), exports);
-exports.theme = tslib_1.__importStar(require("./lib/theme"));
-exports.atoms = tslib_1.__importStar(require("./lib/theme/atoms"));
+exports.zero = tslib_1.__importStar(require("./ui"));
 tslib_1.__exportStar(require("./hooks"), exports);
+// Theme system exports
+tslib_1.__exportStar(require("./lib/theme"), exports);
 tslib_1.__exportStar(require("./components/chat/chat"), exports);
 tslib_1.__exportStar(require("./components/chat/chat-box"), exports);
+tslib_1.__exportStar(require("./components/chat/system-message"), exports);
+var video_retry_1 = require("./components/mobile-player/video-retry");
+Object.defineProperty(exports, "VideoRetry", { enumerable: true, get: function () { return tslib_1.__importDefault(video_retry_1).default; } });
+tslib_1.__exportStar(require("./lib/system-messages"), exports);
+tslib_1.__exportStar(require("./components/share/sharesheet"), exports);
+tslib_1.__exportStar(require("./components/keep-awake"), exports);

package/dist/lib/system-messages.js

@@ -0,0 +1,101 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.parseSystemMessageMetadata = exports.getSystemMessageType = exports.isSystemMessage = exports.SystemMessages = exports.createSystemMessage = exports.SystemMessageType = void 0;
+var SystemMessageType;
+(function (SystemMessageType) {
+    SystemMessageType["stream_start"] = "stream_start";
+    SystemMessageType["stream_end"] = "stream_end";
+    SystemMessageType["notification"] = "notification";
+})(SystemMessageType || (exports.SystemMessageType = SystemMessageType = {}));
+/**
+ * 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
+ */
+const createSystemMessage = (type, text, metadata, date = new Date()) => {
+    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
+        },
+    };
+};
+exports.createSystemMessage = createSystemMessage;
+/**
+ * System message factory functions for common scenarios
+ */
+exports.SystemMessages = {
+    streamStart: (streamerName) => (0, exports.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) => (0, exports.createSystemMessage)(SystemMessageType.stream_end, duration ? `Stream has ended. Duration: ${duration}` : "Stream has ended", { duration }),
+    notification: (message) => (0, exports.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
+ */
+const isSystemMessage = (message) => {
+    return message.author.did === "did:sys:system";
+};
+exports.isSystemMessage = isSystemMessage;
+/**
+ * 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
+ */
+const getSystemMessageType = (message) => {
+    if (!(0, exports.isSystemMessage)(message)) {
+        return null;
+    }
+    return message.author.handle;
+};
+exports.getSystemMessageType = getSystemMessageType;
+/**
+ * Parses metadata from a system message based on its type
+ * @param message The system message to parse
+ * @returns The parsed metadata
+ */
+const parseSystemMessageMetadata = (message) => {
+    const metadata = {};
+    const type = (0, exports.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;
+};
+exports.parseSystemMessageMetadata = parseSystemMessageMetadata;

package/dist/livestream-store/chat.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.reduceChat = exports.reduceChatIncremental = exports.useCreateChatMessage = exports.useSetReplyToMessage = exports.useReplyToMessage = void 0;
+exports.reduceChat = exports.useReportChatMessage = exports.useSubmitReport = exports.reduceChatIncremental = exports.useCreateChatMessage = exports.useAddPendingHide = exports.usePendingHides = exports.useSetReplyToMessage = exports.useReplyToMessage = void 0;
 const api_1 = require("@atproto/api");
 const react_1 = require("react");
 const streamplace_store_1 = require("../streamplace-store");
@@ -15,6 +15,23 @@ const useSetReplyToMessage = () => {
     }, [store]);
 };
 exports.useSetReplyToMessage = useSetReplyToMessage;
+const usePendingHides = () => (0, livestream_store_1.useLivestreamStore)((state) => state.pendingHides);
+exports.usePendingHides = usePendingHides;
+const useAddPendingHide = () => {
+    const store = (0, livestream_store_1.getStoreFromContext)();
+    return (0, react_1.useCallback)((messageUri) => {
+        const state = store.getState();
+        if (!state.pendingHides.includes(messageUri)) {
+            const newPendingHides = [...state.pendingHides, messageUri];
+            const newState = (0, exports.reduceChat)(state, [], [], [messageUri]);
+            store.setState({
+                ...newState,
+                pendingHides: newPendingHides,
+            });
+        }
+    }, [store]);
+};
+exports.useAddPendingHide = useAddPendingHide;
 const useCreateChatMessage = () => {
     const pdsAgent = (0, xrpc_1.usePDSAgent)();
     const store = (0, livestream_store_1.getStoreFromContext)();
@@ -63,7 +80,7 @@ const useCreateChatMessage = () => {
             indexedAt: new Date().toISOString(),
             chatProfile: chatProfile || undefined,
         };
-        state = (0, exports.reduceChat)(state, [localChat], []);
+        state = (0, exports.reduceChat)(state, [localChat], [], []);
         store.setState(state);
         await pdsAgent.com.atproto.repo.createRecord({
             repo: userDID,
@@ -79,7 +96,9 @@ const buildSortedChatList = (chatIndex, existingChatList, newMessages, removedKe
         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 = (newProfile, oldProfile) => {
     if (!oldProfile) {
@@ -99,14 +118,25 @@ const profileIsDifferent = (newProfile, oldProfile) => {
     const { red: oldRed, green: oldGreen, blue: oldBlue } = oldProfile.color;
     return newRed !== oldRed || newGreen !== oldGreen || newBlue !== oldBlue;
 };
-const reduceChatIncremental = (state, newMessages, blocks) => {
-    if (newMessages.length === 0 && blocks.length === 0) {
+const reduceChatIncremental = (state, newMessages, blocks, hideUris = []) => {
+    if (newMessages.length === 0 &&
+        blocks.length === 0 &&
+        hideUris.length === 0) {
         return state;
     }
     const newChatIndex = { ...state.chatIndex };
     const newAuthors = { ...state.authors };
     let hasChanges = false;
     const removedKeys = new Set();
+    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));
@@ -118,13 +148,26 @@ const reduceChatIncremental = (state, newMessages, blocks) => {
             }
         }
     }
+    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 = [];
     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])) {
-            newAuthors[message.author.handle] = message.chatProfile;
+        if (profileIsDifferent(message.chatProfile, newAuthors[message.author.did])) {
+            newAuthors[message.author.did] = message.chatProfile;
         }
         // skip messages we already have
         if (newChatIndex[key] && newChatIndex[key].uri === message.uri) {
@@ -156,17 +199,20 @@ const reduceChatIncremental = (state, newMessages, blocks) => {
                 const parentMsgKey = Object.keys(newChatIndex).find((k) => newChatIndex[k].uri === parentUri);
                 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,
+                            },
+                        };
+                    }
                 }
             }
         }
@@ -183,11 +229,58 @@ const reduceChatIncremental = (state, newMessages, blocks) => {
     }
     // Build the new sorted chat list efficiently
     const newChatList = buildSortedChatList(newChatIndex, state.chat, messagesToAdd, 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,
     };
 };
 exports.reduceChatIncremental = reduceChatIncremental;
+const useSubmitReport = () => {
+    const pdsAgent = (0, xrpc_1.usePDSAgent)();
+    const userDID = (0, streamplace_store_1.useDID)();
+    return (0, react_1.useCallback)(async (subject, reasonType, reason, 
+    // no clue about this
+    moderationSvcDid = "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]);
+};
+exports.useSubmitReport = useSubmitReport;
+const useReportChatMessage = () => {
+    const submitReport = (0, exports.useSubmitReport)();
+    return (0, react_1.useCallback)(async (message, reasonType, reason) => {
+        const reportSubject = {
+            $type: "com.atproto.repo.strongRef",
+            uri: message.uri,
+            cid: message.cid,
+        };
+        return await submitReport(reportSubject, reasonType, reason);
+    }, [submitReport]);
+};
+exports.useReportChatMessage = useReportChatMessage;
 exports.reduceChat = exports.reduceChatIncremental;

package/dist/livestream-store/livestream-store.js

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