@streamplace/components 0.7.25 → 0.7.27

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}`);

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/use-webrtc.js

@@ -178,6 +178,11 @@ function useWebRTCIngest({ endpoint, }) {
     const ingestConnectionState = (0, __1.usePlayerStore)((x) => x.ingestConnectionState);
     const setIngestConnectionState = (0, __1.usePlayerStore)((x) => x.setIngestConnectionState);
     const storedKey = (0, __1.useStreamKey)();
+    (0, react_1.useEffect)(() => {
+        if (storedKey?.error) {
+            console.error("error creating stream key", storedKey.error);
+        }
+    }, [storedKey?.error]);
     const [peerConnection, setPeerConnection] = (0, react_1.useState)(null);
     const videoTransceiver = (0, react_1.useRef)(null);
     const audioTransceiver = (0, react_1.useRef)(null);
@@ -211,7 +216,8 @@ function useWebRTCIngest({ endpoint, }) {
             negotiateConnectionWithClientOffer(peerConnection, endpoint, storedKey.streamKey?.privateKey);
         });
         peerConnection.addEventListener("track", (ev) => {
-            console.log(ev);
+            console.log(`got peerconnection track with ${ev.track.kind}`, ev.track.id);
+            // console.log(ev);
         });
         setPeerConnection(peerConnection);
         return () => {

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/video.native.js

@@ -43,11 +43,20 @@ function VideoNative(props) {
         importPromise = Promise.resolve().then(() => __importStar(require("./video-async.native")));
     }
     const [videoNativeModule, setVideoNativeModule] = (0, react_1.useState)(null);
+    const [error, setError] = (0, react_1.useState)(null);
     (0, react_1.useEffect)(() => {
-        importPromise?.then((module) => {
+        importPromise
+            ?.then((module) => {
             setVideoNativeModule(module);
+        })
+            .catch((err) => {
+            setError(err.message);
         });
     }, []);
+    if (error) {
+        console.error(error);
+        return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: { flex: 1, justifyContent: "center", alignItems: "center" }, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { children: error }) }));
+    }
     if (!videoNativeModule) {
         return (0, jsx_runtime_1.jsx)(react_native_1.View, {});
     }

package/dist/crypto-polyfill.native.js

@@ -0,0 +1,24 @@
+// awkward use of require()? you betcha. but import() with Metro causes it to try and
+// resolve the package at compile-time even if not installed, so here we are.
+let rnqc = null;
+let expoCrypto = null;
+try {
+    rnqc = require("react-native-quick-crypto");
+}
+catch (err) { }
+try {
+    expoCrypto = require("expo-crypto");
+}
+catch (err) { }
+if (!rnqc && !expoCrypto) {
+    throw new Error("Livestreaming requires one of react-native-quick-crypto or expo-crypto");
+}
+else if (!rnqc && expoCrypto) {
+    // @atproto/crypto dependencies expect crypto.getRandomValues to be a function
+    if (typeof globalThis.crypto === "undefined") {
+        globalThis.crypto = {};
+    }
+    if (typeof globalThis.crypto.getRandomValues === "undefined") {
+        globalThis.crypto.getRandomValues = expoCrypto.getRandomValues;
+    }
+}

package/dist/index.js

@@ -1,8 +1,9 @@
 "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 :)
+require("./crypto-polyfill");
 tslib_1.__exportStar(require("./livestream-provider"), exports);
 tslib_1.__exportStar(require("./livestream-store"), exports);
 tslib_1.__exportStar(require("./player-store"), exports);
@@ -32,3 +33,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/livestream-store/chat.js

@@ -49,6 +49,15 @@ 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,
@@ -151,11 +160,9 @@ const reduceChatIncremental = (state, newMessages, blocks, hideUris = []) => {
     const newAuthors = { ...state.authors };
     let hasChanges = false;
     const removedKeys = new Set();
-    console.log("newMessages", newMessages);
     for (const msg of newMessages) {
         if (msg.deleted) {
             hasChanges = true;
-            console.log("deleted", msg.uri);
             removedKeys.add(msg.uri);
         }
     }

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

@@ -81,7 +81,7 @@ const useStreamKey = () => {
             setStreamKey(JSON.stringify(newKey));
             setKey(newKey);
         };
-        generateKey();
+        generateKey().catch((err) => setError(err.message));
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [key, setStreamKey]);
     return { streamKey: key, error };

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

@@ -3,10 +3,18 @@ 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");
+function randomUUID() {
+    let dt = new Date().getTime();
+    var uuid = "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function (c) {
+        var r = (dt + Math.random() * 16) % 16 | 0;
+        dt = Math.floor(dt / 16);
+        return (c == "x" ? r : (r & 0x3) | 0x8).toString(16);
+    });
+    return uuid;
+}
 const PlayerProvider = ({ children, initialPlayers = [], defaultId = Math.random().toString(36).slice(8), }) => {
     const [players, setPlayers] = (0, react_1.useState)(() => {
         // Initialize with any initial player IDs provided
@@ -21,7 +29,7 @@ const PlayerProvider = ({ children, initialPlayers = [], defaultId = Math.random
         return initialPlayerStores;
     });
     const createPlayer = (0, react_1.useCallback)((id) => {
-        const playerId = id || (0, crypto_1.randomUUID)();
+        const playerId = id || randomUUID();
         const playerStore = (0, player_store_1.makePlayerStore)(playerId);
         setPlayers((prev) => ({
             ...prev,

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/player-store/single-player-provider.js

@@ -12,8 +12,8 @@ const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = tslib_1.__importStar(require("react"));
 const zustand_1 = require("zustand");
-const player_store_1 = require("../player-store");
 const player_state_1 = require("./player-state");
+const player_store_1 = require("./player-store");
 const SinglePlayerContext = (0, react_1.createContext)(null);
 /**
  * Provider component for a single player that creates a scoped context

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

@@ -111,7 +111,7 @@ function useCreateStreamRecord() {
         }
         // Use customUrl if provided, otherwise fall back to the store URL
         const finalUrl = customUrl || url;
-        const u = new URL(finalUrl);
+        const u = new URL(url);
         let thumbnail = undefined;
         if (customThumbnail) {
             try {

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]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamplace/components",
-  "version": "0.7.25",
+  "version": "0.7.27",
   "description": "Streamplace React (Native) Components",
   "main": "dist/index.js",
   "types": "src/index.tsx",
@@ -29,6 +29,7 @@
     "@rn-primitives/slider": "^1.2.0",
     "class-variance-authority": "^0.6.1",
     "expo-keep-awake": "^14.0.0",
+    "expo-sqlite": "~15.2.12",
     "expo-video": "^2.0.0",
     "hls.js": "^1.5.17",
     "lucide-react-native": "^0.514.0",
@@ -52,5 +53,5 @@
     "start": "tsc --watch --preserveWatchOutput",
     "prepare": "tsc"
   },
-  "gitHead": "288afabcb270c01ae8012e2a5cd9d75d5e1aae28"
+  "gitHead": "c981451ba44cc3e2213e1734c31d35b1383b2132"
 }

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

@@ -27,7 +27,6 @@ import {
   py,
   w,
 } from "../../lib/theme/atoms";
-import { usePDSAgent } from "../../streamplace-store/xrpc";
 import { Textarea } from "../ui/textarea";
 import { RenderChatMessage } from "./chat-message";
 import { EmojiData, EmojiSuggestions } from "./emoji-suggestions";
@@ -70,16 +69,6 @@ export function ChatBox({
   const setReplyToMessage = useSetReplyToMessage();
   const textAreaRef = useRef<TextInput>(null);
 
-  // are we logged in?
-
-  let agent = usePDSAgent();
-
-  if (!agent?.did) {
-    <View style={[layout.flex.row, layout.flex.alignCenter, gap.all[2]]}>
-      <Text>Log in to chat.</Text>
-    </View>;
-  }
-
   const authors = useMemo(() => {
     if (!chat) return null;
     return chat.reduce((acc, msg) => {

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

@@ -66,6 +66,9 @@ const segmentedObject = (
           {obj.text}
         </Text>
       );
+    } else {
+      // render as normal text if we don't recognize the facet type
+      return <Text key={`unknown-facet-${index}`}>{obj.text}</Text>;
     }
   } else {
     return <Text key={`text-${index}`}>{obj.text}</Text>;

package/src/components/mobile-player/ui/autoplay-button.tsx

@@ -1,12 +1,12 @@
 import { Play } from "lucide-react-native";
 import { Pressable } from "react-native";
-import { View, layout, usePlayerStore } from "../../..";
+import { View, layout, usePlayerStore, useSetMuted } from "../../..";
 import { h, p, w } from "../../../ui";
 
 export function AutoplayButton() {
   const autoplayFailed = usePlayerStore((x) => x.autoplayFailed);
   const setAutoplayFailed = usePlayerStore((x) => x.setAutoplayFailed);
-  const setMuted = usePlayerStore((x) => x.setMuted);
+  const setMuted = useSetMuted();
   const setMuteWasForced = usePlayerStore((x) => x.setMuteWasForced);
   const setUserInteraction = usePlayerStore((x) => x.setUserInteraction);
   const videoRef = usePlayerStore((x) => x.videoRef);

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

@@ -205,6 +205,11 @@ export function useWebRTCIngest({
     (x) => x.setIngestConnectionState,
   );
   const storedKey = useStreamKey();
+  useEffect(() => {
+    if (storedKey?.error) {
+      console.error("error creating stream key", storedKey.error);
+    }
+  }, [storedKey?.error]);
   const [peerConnection, setPeerConnection] =
     useState<RTCPeerConnection | null>(null);
 
@@ -249,7 +254,11 @@ export function useWebRTCIngest({
     });
 
     peerConnection.addEventListener("track", (ev) => {
-      console.log(ev);
+      console.log(
+        `got peerconnection track with ${ev.track.kind}`,
+        ev.track.id,
+      );
+      // console.log(ev);
     });
 
     setPeerConnection(peerConnection);

package/src/components/mobile-player/video-async.native.tsx

@@ -14,7 +14,9 @@ import {
   PlayerProtocol,
   PlayerStatus,
   Text,
+  useEffectiveVolume,
   usePlayerStore as useIngestPlayerStore,
+  useMuted,
   usePlayerStore,
   useStreamplaceStore,
   View,
@@ -71,8 +73,8 @@ export function NativeVideo(props?: {
   const src = usePlayerStore((x) => x.src);
   const { url } = srcToUrl({ src: src, selectedRendition }, protocol);
   const setStatus = usePlayerStore((x) => x.setStatus);
-  const muted = usePlayerStore((x) => x.muted);
-  const volume = usePlayerStore((x) => x.volume);
+  const muted = useMuted();
+  const volume = useEffectiveVolume();
   const setFullscreen = usePlayerStore((x) => x.setFullscreen);
   const fullscreen = usePlayerStore((x) => x.fullscreen);
   const playerEvent = usePlayerStore((x) => x.playerEvent);
@@ -211,8 +213,8 @@ export function NativeWHEP(props?: {
   }, []);
 
   const setStatus = usePlayerStore((x) => x.setStatus);
-  const muted = usePlayerStore((x) => x.muted);
-  const volume = usePlayerStore((x) => x.volume);
+  const muted = useMuted();
+  const volume = useEffectiveVolume();
 
   useEffect(() => {
     if (stuck && status === PlayerStatus.PLAYING) {