@streamplace/components 0.7.21 → 0.7.25

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/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

@@ -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,
@@ -226,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/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.21",
+  "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.21",
+    "streamplace": "0.7.25",
     "viem": "^2.21.44",
     "zustand": "^5.0.5"
   },
@@ -52,5 +52,5 @@
     "start": "tsc --watch --preserveWatchOutput",
     "prepare": "tsc"
   },
-  "gitHead": "e930332a9465e0ffd9a78a01ea39b134cd78e49e"
+  "gitHead": "288afabcb270c01ae8012e2a5cd9d75d5e1aae28"
 }

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>

package/src/components/mobile-player/webrtc-diagnostics.tsx

@@ -7,6 +7,7 @@ export interface WebRTCDiagnostics {
   rtcSessionDescription: boolean;
   getUserMedia: boolean;
   getDisplayMedia: boolean;
+  isHwH264Supported: boolean;
   errors: string[];
   warnings: string[];
 }
@@ -19,6 +20,7 @@ export function useWebRTCDiagnostics(): WebRTCDiagnostics {
     rtcSessionDescription: false,
     getUserMedia: false,
     getDisplayMedia: false,
+    isHwH264Supported: false,
     errors: [],
     warnings: [],
   });
@@ -27,6 +29,23 @@ export function useWebRTCDiagnostics(): WebRTCDiagnostics {
     const errors: string[] = [];
     const warnings: string[] = [];
 
+    const checkH264Support = async (): Promise<boolean> => {
+      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");
@@ -37,6 +56,7 @@ export function useWebRTCDiagnostics(): WebRTCDiagnostics {
         rtcSessionDescription: false,
         getUserMedia: false,
         getDisplayMedia: false,
+        isHwH264Supported: false,
         errors,
         warnings,
       });
@@ -105,22 +125,45 @@ export function useWebRTCDiagnostics(): WebRTCDiagnostics {
 
     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;
 }
 
-export function logWebRTCDiagnostics() {
+export async function logWebRTCDiagnostics() {
   console.group("WebRTC Diagnostics");
 
   // Log browser support
@@ -133,17 +176,32 @@ export 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);
     }
   }
-
   console.groupEnd();
 }

package/src/lib/system-messages.ts

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

package/src/livestream-store/chat.tsx

@@ -76,6 +76,7 @@ export const useCreateChatMessage = () => {
     await rt.detectFacets(pdsAgent);
 
     const record: PlaceStreamChatMessage.Record = {
+      $type: "place.stream.chat.message",
       text: msg.text,
       createdAt: new Date().toISOString(),
       streamer: streamerProfile.did,
@@ -295,6 +296,7 @@ export const reduceChatIncremental = (
             processedMessage = {
               ...message,
               replyTo: {
+                $type: "place.stream.chat.defs#messageView",
                 cid: parentMsg.cid,
                 uri: parentMsg.uri,
                 author: parentMsg.author,

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

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

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

@@ -20,7 +20,7 @@ export const handleWebSocketMessages = (
   state: LivestreamState,
   messages: any[],
 ): LivestreamState => {
-  for (const message of messages) {
+  for (let message of messages) {
     if (PlaceStreamLivestream.isLivestreamView(message)) {
       const newLivestream = message as LivestreamViewHydrated;
       const oldLivestream = state.livestream;
@@ -41,11 +41,13 @@ export const handleWebSocketMessages = (
         livestream: newLivestream,
       };
     } else if (PlaceStreamLivestream.isViewerCount(message)) {
+      message = message as PlaceStreamLivestream.ViewerCount;
       state = {
         ...state,
         viewers: message.count,
       };
     } else if (PlaceStreamChatDefs.isMessageView(message)) {
+      message = message as PlaceStreamChatDefs.MessageView;
       // Explicitly map MessageView to MessageViewHydrated
       const hydrated: ChatMessageViewHydrated = {
         uri: message.uri,
@@ -74,6 +76,7 @@ export const handleWebSocketMessages = (
       const block = message as PlaceStreamDefs.BlockView;
       state = reduceChat(state, [], [block], []);
     } else if (PlaceStreamDefs.isRenditions(message)) {
+      message = message as PlaceStreamDefs.Renditions;
       state = {
         ...state,
         renditions: message.renditions,

package/src/streamplace-store/stream.tsx

@@ -248,6 +248,7 @@ export function useCreateStreamRecord() {
     }
 
     const record: PlaceStreamLivestream.Record = {
+      $type: "place.stream.livestream",
       title: title,
       url: finalUrl,
       createdAt: new Date().toISOString(),
@@ -313,6 +314,7 @@ export function useUpdateStreamRecord(customUrl: string | null = null) {
     }
 
     const record: PlaceStreamLivestream.Record = {
+      $type: "place.stream.livestream",
       title: title,
       url: finalUrl,
       createdAt: new Date().toISOString(),