@streamplace/components 0.7.2 → 0.7.7

package/dist/components/mobile-player/video.native.js

@@ -51,6 +51,15 @@ function NativeVideo() {
         };
     }, [setStatus]);
     const player = (0, expo_video_1.useVideoPlayer)(url, (player) => {
+        player.addListener("playingChange", (newIsPlaying) => {
+            console.log("playingChange", newIsPlaying);
+            if (newIsPlaying) {
+                setStatus(__1.PlayerStatus.PLAYING);
+            }
+            else {
+                setStatus(__1.PlayerStatus.WAITING);
+            }
+        });
         player.loop = true;
         player.muted = muted;
         player.play();
@@ -72,10 +81,12 @@ function NativeVideo() {
         ].map((evType) => {
             return player.addListener(evType, (...args) => {
                 const now = new Date();
+                console.log("video native event", evType);
                 playerEvent(spurl, now.toISOString(), evType, { args: args });
             });
         });
         subs.push(player.addListener("playingChange", (newIsPlaying) => {
+            console.log("playingChange", newIsPlaying);
             if (newIsPlaying) {
                 setStatus(__1.PlayerStatus.PLAYING);
             }
@@ -100,6 +111,7 @@ function NativeWHEP() {
     const src = (0, __1.usePlayerStore)((x) => x.src);
     const { url } = (0, shared_1.srcToUrl)({ src: src, selectedRendition }, __1.PlayerProtocol.WEBRTC);
     const [stream, stuck] = (0, use_webrtc_1.default)(url);
+    const status = (0, __1.usePlayerStore)((x) => x.status);
     const setPlayerWidth = (0, __1.usePlayerStore)((x) => x.setPlayerWidth);
     const setPlayerHeight = (0, __1.usePlayerStore)((x) => x.setPlayerHeight);
     // PiP support: wire up videoRef (no direct ref for RTCView)
@@ -116,21 +128,23 @@ function NativeWHEP() {
     const muted = (0, __1.usePlayerStore)((x) => x.muted);
     const volume = (0, __1.usePlayerStore)((x) => x.volume);
     (0, react_1.useEffect)(() => {
-        if (stuck) {
+        if (stuck && status === __1.PlayerStatus.PLAYING) {
+            console.log("setting status to stalled", status);
             setStatus(__1.PlayerStatus.STALLED);
         }
-        else {
+        if (!stuck && status === __1.PlayerStatus.STALLED) {
+            console.log("setting status to playing", status);
             setStatus(__1.PlayerStatus.PLAYING);
         }
-    }, [stuck, setStatus]);
+    }, [stuck, status]);
     const mediaStream = stream;
-    (0, react_1.useEffect)(() => {
-        if (!mediaStream) {
-            setStatus(__1.PlayerStatus.WAITING);
-            return;
-        }
-        setStatus(__1.PlayerStatus.PLAYING);
-    }, [mediaStream, setStatus]);
+    // useEffect(() => {
+    //   if (!mediaStream) {
+    //     setStatus(PlayerStatus.WAITING);
+    //     return;
+    //   }
+    //   setStatus(PlayerStatus.PLAYING);
+    // }, [mediaStream, setStatus]);
     (0, react_1.useEffect)(() => {
         if (!mediaStream) {
             return;

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/resizeable.js

@@ -97,16 +97,25 @@ function Resizable({ startingPercentage, isPlayerRatioGreater, style = {}, child
                         minWidth: "100%",
                     },
                     style,
-                ], children: [(0, jsx_runtime_1.jsx)(view_1.View, { style: [atoms_1.layout.flex.row, atoms_1.layout.flex.justifyCenter], children: (0, jsx_runtime_1.jsx)(react_native_gesture_handler_1.GestureDetector, { gesture: panGesture, children: (0, jsx_runtime_1.jsx)(view_1.View, { hitSlop: { top: 20, bottom: 20, left: 20, right: 20 }, style: [
-                                    atoms_1.w[32],
-                                    {
-                                        height: 6,
-                                        transform: [{ translateY: -10 }],
-                                        backgroundColor: "#eeeeee66",
-                                        alignItems: "center",
-                                        justifyContent: "center",
-                                        borderRadius: 999,
-                                    },
-                                ] }) }) }), children] })] }));
+                ], children: [(0, jsx_runtime_1.jsx)(view_1.View, { style: [atoms_1.layout.flex.row, atoms_1.layout.flex.justifyCenter, atoms_1.h[2]], children: (0, jsx_runtime_1.jsx)(react_native_gesture_handler_1.GestureDetector, { gesture: panGesture, children: (0, jsx_runtime_1.jsx)(view_1.View
+                            // Make the touch area much larger, but keep the visible handle small
+                            , { 
+                                // 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 }],
+                                }, children: (0, jsx_runtime_1.jsx)(view_1.View, { style: [
+                                        atoms_1.w[32],
+                                        {
+                                            height: 6,
+                                            backgroundColor: "#eeeeee66",
+                                            borderRadius: 999,
+                                            transform: [{ translateY: 5 }],
+                                        },
+                                    ] }) }) }) }), children] })] }));
 }
 Resizable.displayName = "ResizableChatSheet";

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;