@streamplace/components 0.7.19 → 0.7.25

package/dist/components/chat/chat-box.js

@@ -42,6 +42,11 @@ function ChatBox({ isPopout, chatBoxStyle, emojiData, setIsChatVisible, }) {
         if (!chat)
             return null;
         return chat.reduce((acc, msg) => {
+            // our fake system user "did"
+            if (msg.author.did === "did:sys:system")
+                return acc;
+            if (acc.has(msg.author.handle))
+                return acc;
             acc.set(msg.author.handle, msg.chatProfile);
             return acc;
         }, new Map());

package/dist/components/chat/chat-message.js

@@ -48,7 +48,8 @@ exports.RenderChatMessage = (0, react_1.memo)(function RenderChatMessage({ item,
             hour12: false,
         });
     }, []);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [item.replyTo && showReply && ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
+    const replyTo = item.replyTo || null;
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [replyTo && showReply && ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
                     atoms_1.gap.all[2],
                     ui_1.layout.flex.row,
                     { minWidth: 0, maxWidth: "100%" },
@@ -62,12 +63,12 @@ exports.RenderChatMessage = (0, react_1.memo)(function RenderChatMessage({ item,
                         atoms_1.mr[4],
                         { minWidth: 0, overflow: "hidden" },
                     ], children: [(0, jsx_runtime_1.jsxs)(text_1.Text, { style: {
-                                color: getRgbColor(item.replyTo.chatProfile.color),
+                                color: getRgbColor(replyTo.chatProfile?.color),
                                 fontWeight: "thin",
-                            }, children: ["@", item.replyTo.author.handle] }), " ", (0, jsx_runtime_1.jsx)(text_1.Text, { style: {
+                            }, children: ["@", replyTo.author.handle] }), " ", (0, jsx_runtime_1.jsx)(text_1.Text, { style: {
                                 color: ui_1.colors.gray[300],
                                 fontStyle: "italic",
-                            }, children: item.replyTo.record.text })] }) })), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
+                            }, children: replyTo.record.text })] }) })), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
                     atoms_1.gap.all[2],
                     ui_1.layout.flex.row,
                     { minWidth: 0, maxWidth: "100%" },

package/dist/components/chat/chat.js

@@ -122,9 +122,7 @@ const ChatLine = (0, react_1.memo)(({ item, canModerate, }) => {
                 isHovered && atoms_1.bg.gray[950],
             ], onPointerEnter: handleHoverIn, onPointerLeave: handleHoverOut, children: [(0, jsx_runtime_1.jsx)(react_native_1.Pressable, { style: [{ minWidth: 0, maxWidth: "100%" }], children: (0, jsx_runtime_1.jsx)(chat_message_1.RenderChatMessage, { item: item }) }), (0, jsx_runtime_1.jsx)(ActionsBar, { item: item, visible: isHovered, hoverTimeoutRef: hoverTimeoutRef })] }));
     }
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(ReanimatedSwipeable_1.default, { containerStyle: [atoms_1.py[1]], friction: 2, enableTrackpadTwoFingerGesture: true, rightThreshold: 40, leftThreshold: 40, renderRightActions: react_native_1.Platform.OS === "android" ? undefined : RightAction, renderLeftActions: react_native_1.Platform.OS === "android" ? undefined : LeftAction, overshootFriction: 9, ref: (ref) => {
-                swipeableRef.current = ref;
-            }, onSwipeableOpen: (r) => {
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(ReanimatedSwipeable_1.default, { containerStyle: [atoms_1.py[1]], friction: 2, enableTrackpadTwoFingerGesture: true, rightThreshold: 40, leftThreshold: 40, renderRightActions: react_native_1.Platform.OS === "android" ? undefined : RightAction, renderLeftActions: react_native_1.Platform.OS === "android" ? undefined : LeftAction, overshootFriction: 9, ref: swipeableRef, onSwipeableOpen: (r) => {
                 if (r === (react_native_1.Platform.OS === "android" ? "right" : "left")) {
                     setReply(item);
                 }
@@ -140,11 +138,23 @@ const ChatLine = (0, react_1.memo)(({ item, canModerate, }) => {
 });
 function Chat({ shownMessages = SHOWN_MSGS, style: propsStyle, canModerate = false, ...props }) {
     const chat = (0, __1.useChat)();
+    const [isScrolledUp, setIsScrolledUp] = (0, react_1.useState)(false);
+    const handleScroll = (event) => {
+        const { contentOffset } = event.nativeEvent;
+        const scrolledUp = contentOffset.y > 20; // threshold
+        if (scrolledUp !== isScrolledUp) {
+            setIsScrolledUp(scrolledUp);
+            // Dismiss keyboard when scrolled up
+            if (scrolledUp && react_native_1.Platform.OS !== "web") {
+                react_native_1.Keyboard.dismiss();
+            }
+        }
+    };
     if (!chat)
         return ((0, jsx_runtime_1.jsx)(__1.View, { style: [atoms_1.flex.shrink[1], { minWidth: 0, maxWidth: "100%" }], children: (0, jsx_runtime_1.jsx)(__1.Text, { children: "Loading chaat..." }) }));
     return ((0, jsx_runtime_1.jsxs)(__1.View, { style: [atoms_1.flex.shrink[1], { minWidth: 0, maxWidth: "100%" }].concat(propsStyle || []), children: [(0, jsx_runtime_1.jsx)(react_native_gesture_handler_1.FlatList, { style: [
                     atoms_1.flex.grow[1],
                     atoms_1.flex.shrink[1],
                     { minWidth: 0, maxWidth: "100%" },
-                ], data: chat.slice(0, shownMessages), inverted: true, keyExtractor: keyExtractor, renderItem: ({ item, index }) => ((0, jsx_runtime_1.jsx)(ChatLine, { item: item, canModerate: canModerate })), removeClippedSubviews: true, maxToRenderPerBatch: 10, initialNumToRender: 10, updateCellsBatchingPeriod: 50 }), (0, jsx_runtime_1.jsx)(mod_view_1.ModView, {})] }));
+                ], data: chat.slice(0, shownMessages), inverted: true, keyExtractor: keyExtractor, renderItem: ({ item, index }) => ((0, jsx_runtime_1.jsx)(ChatLine, { item: item, canModerate: canModerate })), removeClippedSubviews: true, maxToRenderPerBatch: 10, initialNumToRender: 10, updateCellsBatchingPeriod: 50, onScroll: handleScroll, scrollEventThrottle: 16 }), (0, jsx_runtime_1.jsx)(mod_view_1.ModView, {})] }));
 }

package/dist/components/chat/mod-view.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ModView = void 0;
+exports.DeleteButton = DeleteButton;
 exports.ReportButton = ReportButton;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const dropdown_menu_1 = require("@rn-primitives/dropdown-menu");
@@ -10,6 +11,7 @@ const player_store_1 = require("../../player-store");
 const block_1 = require("../../streamplace-store/block");
 const xrpc_1 = require("../../streamplace-store/xrpc");
 const react_native_1 = require("react-native");
+const livestream_store_1 = require("../../livestream-store");
 const streamplace_store_1 = require("../../streamplace-store");
 const ui_1 = require("../ui");
 const BSKY_FRONTEND_DOMAIN = "bsky.app";
@@ -75,8 +77,24 @@ exports.ModView = (0, react_1.forwardRef)(() => {
                                             ? "Blocking..."
                                             : `Block user @${message.author.handle} from this channel` })) })] })), (0, jsx_runtime_1.jsxs)(ui_1.DropdownMenuGroup, { title: `User actions`, children: [(0, jsx_runtime_1.jsx)(ui_1.DropdownMenuItem, { onPress: () => {
                                         react_native_1.Linking.openURL(`https://${BSKY_FRONTEND_DOMAIN}/profile/${message.author.handle}`);
-                                    }, children: (0, jsx_runtime_1.jsxs)(ui_1.Text, { color: "primary", children: ["View user on ", BSKY_FRONTEND_DOMAIN] }) }), (0, jsx_runtime_1.jsx)(ReportButton, { message: message, setReportModalOpen: setReportModalOpen, setReportSubject: setReportSubject })] })] })) })] }));
+                                    }, children: (0, jsx_runtime_1.jsxs)(ui_1.Text, { color: "primary", children: ["View user on ", BSKY_FRONTEND_DOMAIN] }) }), message.author.did === agent?.did && ((0, jsx_runtime_1.jsx)(DeleteButton, { message: message })), message.author.did !== agent?.did && ((0, jsx_runtime_1.jsx)(ReportButton, { message: message, setReportModalOpen: setReportModalOpen, setReportSubject: setReportSubject }))] })] })) })] }));
 });
+function DeleteButton({ message, }) {
+    const deleteChatMessage = (0, livestream_store_1.useDeleteChatMessage)();
+    const [confirming, setConfirming] = (0, react_1.useState)(false);
+    const { onOpenChange } = (0, dropdown_menu_1.useRootContext)();
+    return ((0, jsx_runtime_1.jsx)(ui_1.DropdownMenuItem, { onPress: () => {
+            if (!message)
+                return;
+            if (!confirming) {
+                setConfirming(true);
+                return;
+            }
+            deleteChatMessage(message.uri).then(() => {
+                onOpenChange?.(false);
+            });
+        }, children: (0, jsx_runtime_1.jsx)(ui_1.Text, { color: "destructive", children: confirming ? "Are you sure?" : "Delete message" }) }));
+}
 function ReportButton({ message, setReportModalOpen, setReportSubject, }) {
     const { onOpenChange } = (0, dropdown_menu_1.useRootContext)();
     return ((0, jsx_runtime_1.jsx)(ui_1.DropdownMenuItem, { onPress: () => {

package/dist/components/mobile-player/fullscreen.js

@@ -14,10 +14,12 @@ function Fullscreen(props) {
     const fullscreen = (0, __1.usePlayerStore)((x) => x.fullscreen, playerId);
     const setFullscreen = (0, __1.usePlayerStore)((x) => x.setFullscreen, playerId);
     const setSrc = (0, __1.usePlayerStore)((x) => x.setSrc);
+    const setAutoplayFailed = (0, __1.usePlayerStore)((x) => x.setAutoplayFailed);
     const divRef = (0, react_1.useRef)(null);
     const videoRef = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
         setSrc(props.src);
+        setAutoplayFailed(false);
     }, [props.src]);
     (0, react_1.useEffect)(() => {
         if (!divRef.current) {

package/dist/components/mobile-player/ui/autoplay-button.js

@@ -0,0 +1,68 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AutoplayButton = AutoplayButton;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const lucide_react_native_1 = require("lucide-react-native");
+const react_native_1 = require("react-native");
+const __1 = require("../../..");
+const ui_1 = require("../../../ui");
+function AutoplayButton() {
+    const autoplayFailed = (0, __1.usePlayerStore)((x) => x.autoplayFailed);
+    const setAutoplayFailed = (0, __1.usePlayerStore)((x) => x.setAutoplayFailed);
+    const setMuted = (0, __1.usePlayerStore)((x) => x.setMuted);
+    const setMuteWasForced = (0, __1.usePlayerStore)((x) => x.setMuteWasForced);
+    const setUserInteraction = (0, __1.usePlayerStore)((x) => x.setUserInteraction);
+    const videoRef = (0, __1.usePlayerStore)((x) => x.videoRef);
+    const handlePlayButtonPress = () => {
+        if (videoRef && typeof videoRef === "object" && videoRef.current) {
+            videoRef.current
+                .play()
+                .then(() => {
+                setAutoplayFailed(false);
+                setUserInteraction();
+            })
+                .catch((err) => {
+                console.error("Manual play failed", err);
+                if (err.name === "NotAllowedError") {
+                    setMuted(true);
+                    videoRef.current.muted = true;
+                    videoRef
+                        .current.play()
+                        .then(() => {
+                        setAutoplayFailed(false);
+                        setMuteWasForced(true);
+                        setUserInteraction();
+                    })
+                        .catch((err) => {
+                        console.error("Manual muted play also failed", err);
+                    });
+                }
+            });
+        }
+    };
+    if (!autoplayFailed)
+        return null;
+    return ((0, jsx_runtime_1.jsx)(__1.View, { style: [
+            __1.layout.position.absolute,
+            __1.layout.flex.center,
+            ui_1.h.percent[100],
+            ui_1.w.percent[100],
+        ], children: (0, jsx_runtime_1.jsx)(react_native_1.Pressable, { onPress: handlePlayButtonPress, style: [
+                {
+                    flexDirection: "column",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    gap: 8,
+                },
+            ], children: (0, jsx_runtime_1.jsx)(__1.View, { style: [
+                    ui_1.p[4],
+                    {
+                        backgroundColor: "rgba(200,200,255, 0.1)",
+                        borderRadius: 999,
+                        borderWidth: 2,
+                        borderColor: "rgba(200,200,255, 0.45)",
+                        boxShadow: "0 0px 4px rgba(0, 0, 0, 1)",
+                        shadowColor: "rgba(0, 0, 0, 1)",
+                    },
+                ], children: (0, jsx_runtime_1.jsx)(lucide_react_native_1.Play, { size: "48", color: "rgba(120,120,120,0.3)", fill: "rgba(200,200,255,1)" }) }) }) }));
+}

package/dist/components/mobile-player/ui/index.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./autoplay-button"), exports);
 tslib_1.__exportStar(require("./countdown"), exports);
 tslib_1.__exportStar(require("./input"), exports);
 tslib_1.__exportStar(require("./metrics"), exports);

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

@@ -107,6 +107,7 @@ const VideoElement = (0, react_1.forwardRef)((props, ref) => {
         playerEvent(url, now.toISOString(), evType, {});
     };
     const [firstAttempt, setFirstAttempt] = (0, react_1.useState)(true);
+    const setAutoplayFailed = (0, __1.usePlayerStore)((x) => x.setAutoplayFailed);
     const localVideoRef = props.videoRef ?? (0, react_1.useRef)(null);
     // setPipAction comes from Zustand store
     (0, react_1.useEffect)(() => {
@@ -158,12 +159,21 @@ const VideoElement = (0, react_1.forwardRef)((props, ref) => {
                         })
                             .catch((err) => {
                             console.error("Muted play also failed", err);
+                            setAutoplayFailed(true);
                         });
                     }
                 }
+                else {
+                    // For other errors (not NotAllowedError), also show play button
+                    setAutoplayFailed(true);
+                }
             });
         }
     };
+    const handlePlaying = (e) => {
+        setAutoplayFailed(false);
+        event("playing")(e);
+    };
     (0, react_1.useEffect)(() => {
         return () => {
             setStatus(__1.PlayerStatus.START);
@@ -198,7 +208,7 @@ const VideoElement = (0, react_1.forwardRef)((props, ref) => {
         console.log("Sending", evType, "status to", url);
         playerEvent(url, now.toISOString(), evType, {});
     };
-    return ((0, jsx_runtime_1.jsx)("video", { autoPlay: true, playsInline: true, ref: handleVideoRef, controls: false, src: ingest ? undefined : props.url, muted: muted, crossOrigin: "anonymous", onMouseMove: setUserInteraction, onClick: setUserInteraction, onAbort: event("abort"), onCanPlay: eventLogger, onCanPlayThroughCapture: eventLogger, onCanPlayThrough: canPlayThrough, onEmptied: event("emptied"), onEncrypted: event("encrypted"), onEnded: event("ended"), onError: event("error"), onLoadedData: event("loadeddata"), onLoadedMetadata: event("loadedmetadata"), onLoadStart: event("loadstart"), onPause: event("pause"), onPlay: event("play"), onPlaying: event("playing"), onRateChange: event("ratechange"), onSeeked: event("seeked"), onSeeking: event("seeking"), onStalled: event("stalled"), onSuspend: event("suspend"), onVolumeChange: event("volumechange"), onWaiting: event("waiting"), style: {
+    return ((0, jsx_runtime_1.jsx)("video", { autoPlay: true, playsInline: true, ref: handleVideoRef, controls: false, src: ingest ? undefined : props.url, muted: muted, crossOrigin: "anonymous", onMouseMove: setUserInteraction, onClick: setUserInteraction, onAbort: event("abort"), onCanPlay: eventLogger, onCanPlayThroughCapture: eventLogger, onCanPlayThrough: canPlayThrough, onEmptied: event("emptied"), onEncrypted: event("encrypted"), onEnded: event("ended"), onError: event("error"), onLoadedData: event("loadeddata"), onLoadedMetadata: event("loadedmetadata"), onLoadStart: event("loadstart"), onPause: event("pause"), onPlay: event("play"), onPlaying: handlePlaying, onRateChange: event("ratechange"), onSeeked: event("seeked"), onSeeking: event("seeking"), onStalled: event("stalled"), onSuspend: event("suspend"), onVolumeChange: event("volumechange"), onWaiting: event("waiting"), style: {
             objectFit: props.objectFit || "contain",
             backgroundColor: "transparent",
             width: "100%",

package/dist/components/mobile-player/webrtc-diagnostics.js

@@ -11,12 +11,29 @@ function useWebRTCDiagnostics() {
         rtcSessionDescription: false,
         getUserMedia: false,
         getDisplayMedia: false,
+        isHwH264Supported: false,
         errors: [],
         warnings: [],
     });
     (0, react_1.useEffect)(() => {
         const errors = [];
         const warnings = [];
+        const checkH264Support = async () => {
+            try {
+                const pc = new RTCPeerConnection();
+                const offer = await pc.createOffer();
+                pc.close();
+                if (offer.sdp) {
+                    const h264Match = offer.sdp.search(/rtpmap:([0-9]+) H264/g);
+                    return h264Match !== -1;
+                }
+                return false;
+            }
+            catch (error) {
+                console.warn("Failed to check H.264 support:", error);
+                return false;
+            }
+        };
         // Check if we're in a browser environment
         if (typeof window === "undefined") {
             errors.push("Running in non-browser environment");
@@ -27,6 +44,7 @@ function useWebRTCDiagnostics() {
                 rtcSessionDescription: false,
                 getUserMedia: false,
                 getDisplayMedia: false,
+                isHwH264Supported: false,
                 errors,
                 warnings,
             });
@@ -71,20 +89,42 @@ function useWebRTCDiagnostics() {
             warnings.push("Safari may have limited WebRTC codec support");
         }
         const browserSupport = rtcPeerConnection && rtcSessionDescription;
-        setDiagnostics({
-            done: true,
-            browserSupport,
-            rtcPeerConnection,
-            rtcSessionDescription,
-            getUserMedia,
-            getDisplayMedia,
-            errors,
-            warnings,
-        });
+        // Check H.264 support asynchronously
+        if (rtcPeerConnection) {
+            checkH264Support().then((isHwH264Supported) => {
+                if (!isHwH264Supported) {
+                    warnings.push("H.264 hardware acceleration is not supported\n In Firefox, try enabling 'media.webrtc.hw.h264.enabled' in about:config");
+                }
+                setDiagnostics({
+                    done: true,
+                    browserSupport,
+                    rtcPeerConnection,
+                    rtcSessionDescription,
+                    getUserMedia,
+                    getDisplayMedia,
+                    isHwH264Supported,
+                    errors,
+                    warnings,
+                });
+            });
+        }
+        else {
+            setDiagnostics({
+                done: true,
+                browserSupport,
+                rtcPeerConnection,
+                rtcSessionDescription,
+                getUserMedia,
+                getDisplayMedia,
+                isHwH264Supported: false,
+                errors,
+                warnings,
+            });
+        }
     }, []);
     return diagnostics;
 }
-function logWebRTCDiagnostics() {
+async function logWebRTCDiagnostics() {
     console.group("WebRTC Diagnostics");
     // Log browser support
     console.log("RTCPeerConnection:", !!window.RTCPeerConnection);
@@ -95,14 +135,28 @@ function logWebRTCDiagnostics() {
     console.log("User Agent:", navigator.userAgent);
     console.log("Protocol:", location.protocol);
     console.log("Host:", location.hostname);
-    // Test basic WebRTC functionality
+    console.groupEnd();
     if (window.RTCPeerConnection) {
         try {
             const pc = new RTCPeerConnection();
-            console.log("RTCPeerConnection creation: ✓ Success");
+            // Check H.264 support
+            try {
+                const offer = await pc.createOffer({ offerToReceiveVideo: true });
+                const isHwH264Supported = offer.sdp
+                    ? offer.sdp.search(/rtpmap:([0-9]+) H264/g) !== -1
+                    : false;
+                console.group("WebRTC Peer Connection Test");
+                console.log("RTCPeerConnection creation: ✓ Success");
+                console.log("H.264 support:", isHwH264Supported ? "✓ Supported" : "✗ Not supported");
+            }
+            catch (error) {
+                console.group("WebRTC Peer Connection Test");
+                console.error("H.264 check failed:", error);
+            }
             pc.close();
         }
         catch (error) {
+            console.group("WebRTC Peer Connection Test");
             console.error("RTCPeerConnection creation: ✗ Failed", error);
         }
     }

package/dist/lib/system-messages.js

@@ -32,6 +32,7 @@ const createSystemMessage = (type, text, metadata, date = new Date()) => {
         indexedAt: now.toISOString(),
         chatProfile: {
             color: { red: 128, green: 128, blue: 128 }, // Gray color for system messages
+            $type: "place.stream.chat.profile",
         },
     };
 };

package/dist/livestream-store/chat.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.reduceChat = exports.useReportChatMessage = exports.useSubmitReport = exports.reduceChatIncremental = exports.useCreateChatMessage = exports.useAddPendingHide = exports.usePendingHides = exports.useSetReplyToMessage = exports.useReplyToMessage = void 0;
+exports.reduceChat = exports.useReportChatMessage = exports.useSubmitReport = exports.reduceChatIncremental = exports.useDeleteChatMessage = 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");
@@ -50,6 +50,7 @@ const useCreateChatMessage = () => {
         const rt = new api_1.RichText({ text: msg.text });
         await rt.detectFacets(pdsAgent);
         const record = {
+            $type: "place.stream.chat.message",
             text: msg.text,
             createdAt: new Date().toISOString(),
             streamer: streamerProfile.did,
@@ -90,6 +91,28 @@ const useCreateChatMessage = () => {
     };
 };
 exports.useCreateChatMessage = useCreateChatMessage;
+const useDeleteChatMessage = () => {
+    const pdsAgent = (0, xrpc_1.usePDSAgent)();
+    if (!pdsAgent) {
+        throw new Error("No PDS agent found");
+    }
+    const userDID = (0, streamplace_store_1.useDID)();
+    if (!userDID) {
+        throw new Error("No user DID found");
+    }
+    return async (uri) => {
+        const rkey = uri.split("/").pop();
+        if (!rkey) {
+            throw new Error("No rkey found");
+        }
+        return await pdsAgent.com.atproto.repo.deleteRecord({
+            repo: userDID,
+            collection: "place.stream.chat.message",
+            rkey: rkey,
+        });
+    };
+};
+exports.useDeleteChatMessage = useDeleteChatMessage;
 const buildSortedChatList = (chatIndex, existingChatList, newMessages, removedKeys) => {
     const sortedKeys = Object.keys(chatIndex).sort((a, b) => {
         const aTime = parseInt(a.split("-")[0], 10);
@@ -204,6 +227,7 @@ const reduceChatIncremental = (state, newMessages, blocks, hideUris = []) => {
                         processedMessage = {
                             ...message,
                             replyTo: {
+                                $type: "place.stream.chat.defs#messageView",
                                 cid: parentMsg.cid,
                                 uri: parentMsg.uri,
                                 author: parentMsg.author,

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

@@ -68,6 +68,7 @@ const useStreamKey = () => {
                 platform = "Windows";
             }
             const record = {
+                $type: "place.stream.key",
                 signingKey: keypair.did(),
                 createdAt: new Date().toISOString(),
                 createdBy: "Streamplace on " + platform,

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

@@ -8,7 +8,7 @@ const chat_1 = require("./chat");
 const problems_1 = require("./problems");
 const MAX_RECENT_SEGMENTS = 10;
 const handleWebSocketMessages = (state, messages) => {
-    for (const message of messages) {
+    for (let message of messages) {
         if (streamplace_1.PlaceStreamLivestream.isLivestreamView(message)) {
             const newLivestream = message;
             const oldLivestream = state.livestream;
@@ -27,12 +27,14 @@ const handleWebSocketMessages = (state, messages) => {
             };
         }
         else if (streamplace_1.PlaceStreamLivestream.isViewerCount(message)) {
+            message = message;
             state = {
                 ...state,
                 viewers: message.count,
             };
         }
         else if (streamplace_1.PlaceStreamChatDefs.isMessageView(message)) {
+            message = message;
             // Explicitly map MessageView to MessageViewHydrated
             const hydrated = {
                 uri: message.uri,
@@ -64,6 +66,7 @@ const handleWebSocketMessages = (state, messages) => {
             state = (0, chat_1.reduceChat)(state, [], [block], []);
         }
         else if (streamplace_1.PlaceStreamDefs.isRenditions(message)) {
+            message = message;
             state = {
                 ...state,
                 renditions: message.renditions,

package/dist/player-store/player-provider.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PlayerProvider = void 0;
 exports.withPlayerProvider = withPlayerProvider;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const crypto_1 = require("crypto");
 const react_1 = require("react");
 const context_1 = require("./context");
 const player_store_1 = require("./player-store");
@@ -20,7 +21,7 @@ const PlayerProvider = ({ children, initialPlayers = [], defaultId = Math.random
         return initialPlayerStores;
     });
     const createPlayer = (0, react_1.useCallback)((id) => {
-        const playerId = id || Math.random().toString(36).slice(8);
+        const playerId = id || (0, crypto_1.randomUUID)();
         const playerStore = (0, player_store_1.makePlayerStore)(playerId);
         setPlayers((prev) => ({
             ...prev,

package/dist/player-store/player-store.js

@@ -58,6 +58,8 @@ const makePlayerStore = (id) => {
         // * Will get set to 'false' if the user has interacted with the volume
         muteWasForced: false,
         setMuteWasForced: (muteWasForced) => set(() => ({ muteWasForced })),
+        autoplayFailed: false,
+        setAutoplayFailed: (autoplayFailed) => set(() => ({ autoplayFailed })),
         embedded: false,
         setEmbedded: (embedded) => set(() => ({ embedded })),
         showControls: true,

package/dist/streamplace-store/stream.js

@@ -179,6 +179,7 @@ function useCreateStreamRecord() {
             platVersion = (0, browser_1.getBrowserName)(window.navigator.userAgent);
         }
         const record = {
+            $type: "place.stream.livestream",
             title: title,
             url: finalUrl,
             createdAt: new Date().toISOString(),
@@ -230,6 +231,7 @@ function useUpdateStreamRecord(customUrl = null) {
             }
         }
         const record = {
+            $type: "place.stream.livestream",
             title: title,
             url: finalUrl,
             createdAt: new Date().toISOString(),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamplace/components",
-  "version": "0.7.19",
+  "version": "0.7.25",
   "description": "Streamplace React (Native) Components",
   "main": "dist/index.js",
   "types": "src/index.tsx",
@@ -20,7 +20,7 @@
     "tsup": "^8.5.0"
   },
   "dependencies": {
-    "@atproto/api": "^0.15.7",
+    "@atproto/api": "^0.16.7",
     "@atproto/crypto": "^0.4.4",
     "@emoji-mart/react": "^1.1.1",
     "@gorhom/bottom-sheet": "^5.1.6",
@@ -40,7 +40,7 @@
     "react-native-svg": "^15.0.0",
     "react-native-webrtc": "git+https://github.com/streamplace/react-native-webrtc.git#6b8472a771ac47f89217d327058a8a4124a6ae56",
     "react-use-websocket": "^4.13.0",
-    "streamplace": "0.7.2",
+    "streamplace": "0.7.25",
     "viem": "^2.21.44",
     "zustand": "^5.0.5"
   },
@@ -52,5 +52,5 @@
     "start": "tsc --watch --preserveWatchOutput",
     "prepare": "tsc"
   },
-  "gitHead": "c168b5ba7cc4fcee07c6f68c844b6938de45a6c8"
+  "gitHead": "288afabcb270c01ae8012e2a5cd9d75d5e1aae28"
 }

package/src/components/chat/chat-box.tsx

@@ -83,6 +83,9 @@ export function ChatBox({
   const authors = useMemo(() => {
     if (!chat) return null;
     return chat.reduce((acc, msg) => {
+      // our fake system user "did"
+      if (msg.author.did === "did:sys:system") return acc;
+      if (acc.has(msg.author.handle)) return acc;
       acc.set(msg.author.handle, msg.chatProfile);
       return acc;
     }, new Map<string, ChatMessageViewHydrated["chatProfile"]>());

package/src/components/chat/chat-message.tsx

@@ -105,9 +105,10 @@ export const RenderChatMessage = memo(
         hour12: false,
       });
     }, []);
+    const replyTo = (item.replyTo as ChatMessageViewHydrated) || null;
     return (
       <>
-        {item.replyTo && showReply && (
+        {replyTo && showReply && (
           <View
             style={[
               gap.all[2],
@@ -130,11 +131,11 @@ export const RenderChatMessage = memo(
             >
               <Text
                 style={{
-                  color: getRgbColor((item.replyTo.chatProfile as any).color),
+                  color: getRgbColor(replyTo.chatProfile?.color),
                   fontWeight: "thin",
                 }}
               >
-                @{(item.replyTo.author as any).handle}
+                @{(replyTo.author as any).handle}
               </Text>{" "}
               <Text
                 style={{
@@ -142,7 +143,7 @@ export const RenderChatMessage = memo(
                   fontStyle: "italic",
                 }}
               >
-                {(item.replyTo.record as any).text}
+                {replyTo.record.text}
               </Text>
             </Text>
           </View>

package/src/components/chat/chat.tsx

@@ -1,6 +1,6 @@
 import { Ellipsis, Reply } from "lucide-react-native";
 import { ComponentProps, memo, useEffect, useRef, useState } from "react";
-import { Platform, Pressable } from "react-native";
+import { Keyboard, Platform, Pressable } from "react-native";
 import { FlatList } from "react-native-gesture-handler";
 import Swipeable, {
   SwipeableMethods,
@@ -223,9 +223,7 @@ const ChatLine = memo(
           }
           renderLeftActions={Platform.OS === "android" ? undefined : LeftAction}
           overshootFriction={9}
-          ref={(ref) => {
-            swipeableRef.current = ref;
-          }}
+          ref={swipeableRef}
           onSwipeableOpen={(r) => {
             if (r === (Platform.OS === "android" ? "right" : "left")) {
               setReply(item);
@@ -258,6 +256,22 @@ export function Chat({
   canModerate?: boolean;
 }) {
   const chat = useChat();
+  const [isScrolledUp, setIsScrolledUp] = useState(false);
+
+  const handleScroll = (event: any) => {
+    const { contentOffset } = event.nativeEvent;
+
+    const scrolledUp = contentOffset.y > 20; // threshold
+
+    if (scrolledUp !== isScrolledUp) {
+      setIsScrolledUp(scrolledUp);
+
+      // Dismiss keyboard when scrolled up
+      if (scrolledUp && Platform.OS !== "web") {
+        Keyboard.dismiss();
+      }
+    }
+  };
 
   if (!chat)
     return (
@@ -288,6 +302,8 @@ export function Chat({
         maxToRenderPerBatch={10}
         initialNumToRender={10}
         updateCellsBatchingPeriod={50}
+        onScroll={handleScroll}
+        scrollEventThrottle={16}
       />
       <ModView />
     </View>