@streamplace/components 0.7.21 → 0.7.26

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

@@ -9,7 +9,6 @@ const react_2 = require("react");
 const react_native_1 = require("react-native");
 const __1 = require("../../");
 const atoms_1 = require("../../lib/theme/atoms");
-const xrpc_1 = require("../../streamplace-store/xrpc");
 const textarea_1 = require("../ui/textarea");
 const chat_message_1 = require("./chat-message");
 const emoji_suggestions_1 = require("./emoji-suggestions");
@@ -33,11 +32,6 @@ function ChatBox({ isPopout, chatBoxStyle, emojiData, setIsChatVisible, }) {
     const replyTo = (0, __1.useReplyToMessage)();
     const setReplyToMessage = (0, __1.useSetReplyToMessage)();
     const textAreaRef = (0, react_2.useRef)(null);
-    // are we logged in?
-    let agent = (0, xrpc_1.usePDSAgent)();
-    if (!agent?.did) {
-        (0, jsx_runtime_1.jsx)(__1.View, { style: [atoms_1.layout.flex.row, atoms_1.layout.flex.alignCenter, atoms_1.gap.all[2]], children: (0, jsx_runtime_1.jsx)(__1.Text, { children: "Log in to chat." }) });
-    }
     const authors = (0, react_2.useMemo)(() => {
         if (!chat)
             return null;

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

@@ -28,6 +28,10 @@ const segmentedObject = (obj, index, userCache) => {
                     },
                 ], onPress: () => react_native_1.Linking.openURL(`https://bsky.app/profile/${mtnftr.did || ""}`), children: obj.text }, `mention-${index}`));
         }
+        else {
+            // render as normal text if we don't recognize the facet type
+            return (0, jsx_runtime_1.jsx)(text_1.Text, { children: obj.text }, `unknown-facet-${index}`);
+        }
     }
     else {
         return (0, jsx_runtime_1.jsx)(text_1.Text, { children: obj.text }, `text-${index}`);
@@ -48,7 +52,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 +67,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/ui/autoplay-button.js

@@ -9,7 +9,7 @@ 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 setMuted = (0, __1.useSetMuted)();
     const setMuteWasForced = (0, __1.usePlayerStore)((x) => x.setMuteWasForced);
     const setUserInteraction = (0, __1.usePlayerStore)((x) => x.setUserInteraction);
     const videoRef = (0, __1.usePlayerStore)((x) => x.videoRef);

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

@@ -29,8 +29,8 @@ function NativeVideo(props) {
     const src = (0, __1.usePlayerStore)((x) => x.src);
     const { url } = (0, shared_1.srcToUrl)({ src: src, selectedRendition }, protocol);
     const setStatus = (0, __1.usePlayerStore)((x) => x.setStatus);
-    const muted = (0, __1.usePlayerStore)((x) => x.muted);
-    const volume = (0, __1.usePlayerStore)((x) => x.volume);
+    const muted = (0, __1.useMuted)();
+    const volume = (0, __1.useEffectiveVolume)();
     const setFullscreen = (0, __1.usePlayerStore)((x) => x.setFullscreen);
     const fullscreen = (0, __1.usePlayerStore)((x) => x.fullscreen);
     const playerEvent = (0, __1.usePlayerStore)((x) => x.playerEvent);
@@ -125,8 +125,8 @@ function NativeWHEP(props) {
         setPlayerHeight(height);
     }, []);
     const setStatus = (0, __1.usePlayerStore)((x) => x.setStatus);
-    const muted = (0, __1.usePlayerStore)((x) => x.muted);
-    const volume = (0, __1.usePlayerStore)((x) => x.volume);
+    const muted = (0, __1.useMuted)();
+    const volume = (0, __1.useEffectiveVolume)();
     (0, react_1.useEffect)(() => {
         if (stuck && status === __1.PlayerStatus.PLAYING) {
             console.log("setting status to stalled", status);

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

@@ -89,11 +89,11 @@ const VideoElement = (0, react_1.forwardRef)((props, ref) => {
     const x = (0, __1.usePlayerStore)((x) => x);
     const url = (0, __1.useStreamplaceStore)((x) => x.url);
     const playerEvent = (0, __1.usePlayerStore)((x) => x.playerEvent);
-    const setMuted = (0, __1.usePlayerStore)((x) => x.setMuted);
     const setMuteWasForced = (0, __1.usePlayerStore)((x) => x.setMuteWasForced);
-    const muted = (0, __1.usePlayerStore)((x) => x.muted);
     const ingest = (0, __1.usePlayerStore)((x) => x.ingestConnectionState !== null);
-    const volume = (0, __1.usePlayerStore)((x) => x.volume);
+    const volume = (0, __1.useEffectiveVolume)();
+    const muted = (0, __1.useMuted)();
+    const setMuted = (0, __1.useSetMuted)();
     const setStatus = (0, __1.usePlayerStore)((x) => x.setStatus);
     const setUserInteraction = (0, __1.usePlayerStore)((x) => x.setUserInteraction);
     const setVideoRef = (0, __1.usePlayerStore)((x) => x.setVideoRef);

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Dashboard = exports.VideoRetry = exports.zero = exports.ui = exports.PlayerUI = exports.Player = exports.usePlayerContext = exports.withPlayerProvider = exports.PlayerProvider = void 0;
+exports.storage = exports.Dashboard = 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);
@@ -32,3 +32,6 @@ tslib_1.__exportStar(require("./components/share/sharesheet"), exports);
 tslib_1.__exportStar(require("./components/keep-awake"), exports);
 // Dashboard components
 exports.Dashboard = tslib_1.__importStar(require("./components/dashboard"));
+// Storage exports
+var storage_1 = require("./storage");
+Object.defineProperty(exports, "storage", { enumerable: true, get: function () { return tslib_1.__importDefault(storage_1).default; } });

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

@@ -49,7 +49,17 @@ const useCreateChatMessage = () => {
         }
         const rt = new api_1.RichText({ text: msg.text });
         await rt.detectFacets(pdsAgent);
+        // filter out any facets that aren't in the allowed list
+        rt.facets = rt.facets?.filter((facet) => {
+            return (
+            // if all features are in the allowed list
+            facet.features.every((feature) => [
+                "app.bsky.richtext.facet#link",
+                "app.bsky.richtext.facet#mention",
+            ].includes(feature.$type)));
+        });
         const record = {
+            $type: "place.stream.chat.message",
             text: msg.text,
             createdAt: new Date().toISOString(),
             streamer: streamerProfile.did,
@@ -226,6 +236,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-store.js

@@ -32,10 +32,6 @@ const makePlayerStore = (id) => {
         setIngestAutoStart: (ingestAutoStart) => set(() => ({ ingestAutoStart })),
         ingestStarted: null,
         setIngestStarted: (timestamp) => set(() => ({ ingestStarted: timestamp })),
-        muted: false,
-        setMuted: (isMuted) => set(() => ({ muted: isMuted, muteWasForced: false })),
-        volume: 1.0,
-        setVolume: (volume) => set(() => ({ volume, muteWasForced: false })),
         fullscreen: false,
         setFullscreen: (isFullscreen) => set(() => ({ fullscreen: isFullscreen })),
         status: player_state_1.PlayerStatus.START,

package/dist/storage/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const storage_1 = tslib_1.__importDefault(require("./storage"));
+exports.default = new storage_1.default();

package/dist/storage/lock.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Lock = void 0;
+class Lock {
+    constructor() {
+        this.queue = [];
+        this.acquired = false;
+    }
+    async acquire() {
+        if (!this.acquired) {
+            this.acquired = true;
+        }
+        else {
+            return new Promise((resolve, _) => {
+                this.queue.push(resolve);
+            });
+        }
+    }
+    async release() {
+        if (this.queue.length === 0 && this.acquired) {
+            this.acquired = false;
+            return;
+        }
+        const continuation = this.queue.shift();
+        return new Promise((res) => {
+            continuation();
+            res();
+        });
+    }
+    async critical(task) {
+        await this.acquire();
+        try {
+            return await task();
+        }
+        finally {
+            await this.release();
+        }
+    }
+}
+exports.Lock = Lock;

package/dist/storage/storage.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+class WebStorage {
+    async getItem(key) {
+        return localStorage.getItem(key);
+    }
+    async setItem(key, value) {
+        localStorage.setItem(key, value);
+    }
+    async removeItem(key) {
+        localStorage.removeItem(key);
+    }
+}
+exports.default = WebStorage;

package/dist/storage/storage.native.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const kv_store_1 = tslib_1.__importDefault(require("expo-sqlite/kv-store"));
+const lock_1 = require("./lock");
+// Needed because concurrent calls seem to return with a locked database
+const lock = new lock_1.Lock();
+class NativeStorage {
+    async getItem(key) {
+        return lock.critical(async () => {
+            try {
+                const value = await kv_store_1.default.getItem(key);
+                return value ?? null;
+            }
+            catch (e) {
+                console.error(`error in NativeStorage.getItem: ${e}`);
+                throw e;
+            }
+        });
+    }
+    async setItem(key, value) {
+        return lock.critical(async () => {
+            try {
+                await kv_store_1.default.setItem(key, value);
+            }
+            catch (e) {
+                console.error(`error in NativeStorage.setItem: ${e}`);
+                throw e;
+            }
+        });
+    }
+    async removeItem(key) {
+        return lock.critical(async () => {
+            try {
+                await kv_store_1.default.removeItem(key);
+            }
+            catch (e) {
+                console.error(`error in NativeStorage.removeItem: ${e}`);
+                throw e;
+            }
+        });
+    }
+}
+exports.default = NativeStorage;

package/dist/storage/storage.shared.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/streamplace-provider/index.js

@@ -8,6 +8,7 @@ const streamplace_store_1 = require("../streamplace-store/streamplace-store");
 const context_1 = require("./context");
 const poller_1 = tslib_1.__importDefault(require("./poller"));
 function StreamplaceProvider({ children, url, oauthSession, }) {
+    console.log("session in provider is", oauthSession);
     // todo: handle url changes?
     const store = (0, react_1.useRef)((0, streamplace_store_1.makeStreamplaceStore)({ url })).current;
     (0, react_1.useEffect)(() => {

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/dist/streamplace-store/streamplace-store.js

@@ -1,13 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useSetHandle = exports.useHandle = exports.useDID = exports.useUrl = exports.makeStreamplaceStore = void 0;
+exports.useEffectiveVolume = exports.useSetMuted = exports.useSetVolume = exports.useMuted = exports.useVolume = exports.useSetHandle = exports.useHandle = exports.useDID = exports.useUrl = exports.makeStreamplaceStore = void 0;
 exports.getStreamplaceStoreFromContext = getStreamplaceStoreFromContext;
 exports.useStreamplaceStore = useStreamplaceStore;
+const tslib_1 = require("tslib");
 const react_1 = require("react");
 const zustand_1 = require("zustand");
+const storage_1 = tslib_1.__importDefault(require("../storage"));
 const context_1 = require("../streamplace-provider/context");
 const makeStreamplaceStore = ({ url, }) => {
-    return (0, zustand_1.createStore)()((set) => ({
+    const VOLUME_STORAGE_KEY = "globalVolume";
+    const MUTED_STORAGE_KEY = "globalMuted";
+    const store = (0, zustand_1.createStore)()((set) => ({
         url,
         liveUsers: null,
         setLiveUsers: (opts) => {
@@ -21,7 +25,60 @@ const makeStreamplaceStore = ({ url, }) => {
         oauthSession: null,
         handle: null,
         chatProfile: null,
+        // Volume state - start with defaults
+        volume: 1.0,
+        muted: false,
+        setVolume: (volume) => {
+            // Ensure the value is finite and within bounds
+            if (!Number.isFinite(volume)) {
+                console.warn("Invalid volume value:", volume, "- using 1.0");
+                volume = 1.0;
+            }
+            const clampedVolume = Math.max(0, Math.min(1, volume));
+            set({ volume: clampedVolume });
+            // Auto-unmute if volume > 0
+            if (clampedVolume > 0) {
+                set({ muted: false });
+                storage_1.default.setItem(MUTED_STORAGE_KEY, "false").catch(console.error);
+            }
+            storage_1.default
+                .setItem(VOLUME_STORAGE_KEY, clampedVolume.toString())
+                .catch(console.error);
+        },
+        setMuted: (muted) => {
+            set({ muted });
+            storage_1.default.setItem(MUTED_STORAGE_KEY, muted.toString()).catch(console.error);
+        },
     }));
+    // Load initial volume state from storage asynchronously
+    (async () => {
+        try {
+            const storedVolume = await storage_1.default.getItem(VOLUME_STORAGE_KEY);
+            const storedMuted = await storage_1.default.getItem(MUTED_STORAGE_KEY);
+            let initialVolume = 1.0;
+            let initialMuted = false;
+            if (storedVolume) {
+                const parsedVolume = parseFloat(storedVolume);
+                if (Number.isFinite(parsedVolume) &&
+                    parsedVolume >= 0 &&
+                    parsedVolume <= 1) {
+                    initialVolume = parsedVolume;
+                }
+            }
+            if (storedMuted) {
+                initialMuted = storedMuted === "true";
+            }
+            // Update the store with loaded values
+            store.setState({
+                volume: initialVolume,
+                muted: initialMuted,
+            });
+        }
+        catch (e) {
+            console.warn("Failed to load volume settings from storage:", e);
+        }
+    })();
+    return store;
 };
 exports.makeStreamplaceStore = makeStreamplaceStore;
 function getStreamplaceStoreFromContext() {
@@ -45,3 +102,19 @@ const useSetHandle = () => {
     return (handle) => store.setState({ handle });
 };
 exports.useSetHandle = useSetHandle;
+// Volume convenience hooks
+const useVolume = () => useStreamplaceStore((x) => x.volume);
+exports.useVolume = useVolume;
+const useMuted = () => useStreamplaceStore((x) => x.muted);
+exports.useMuted = useMuted;
+const useSetVolume = () => useStreamplaceStore((x) => x.setVolume);
+exports.useSetVolume = useSetVolume;
+const useSetMuted = () => useStreamplaceStore((x) => x.setMuted);
+exports.useSetMuted = useSetMuted;
+// Composite hook for effective volume (0 if muted) - used by video components
+const useEffectiveVolume = () => useStreamplaceStore((state) => {
+    const effectiveVolume = state.muted ? 0 : state.volume;
+    // Ensure we always return a finite number for HTMLMediaElement.volume
+    return Number.isFinite(effectiveVolume) ? effectiveVolume : 1.0;
+});
+exports.useEffectiveVolume = useEffectiveVolume;

package/dist/streamplace-store/xrpc.js

@@ -6,9 +6,18 @@ const streamplace_1 = require("streamplace");
 const _1 = require(".");
 function usePDSAgent() {
     const oauthSession = (0, _1.useStreamplaceStore)((state) => state.oauthSession);
+    // oauthsession is
+    // - undefined when loading
+    // - null when logged out, and
+    // - SessionManager when logged in
     return (0, react_1.useMemo)(() => {
         if (!oauthSession) {
-            return null;
+            if (oauthSession === undefined)
+                return null;
+            // TODO: change once we allow unauthed requests + profile indexing
+            // it's bluesky's AppView b/c otherwise we'd have goosewithpipe.jpg
+            // showing up everywhere
+            return new streamplace_1.StreamplaceAgent("https://public.api.bsky.app"); // nodeUrl);
         }
         return new streamplace_1.StreamplaceAgent(oauthSession);
     }, [oauthSession]);