@streamplace/components 0.7.25 → 0.7.27

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

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { View } from "react-native";
+import { Text, View } from "react-native";
 import { VideoNativeProps } from "./props";
 
 let importPromise: Promise<typeof import("./video-async.native")> | null = null;
@@ -13,12 +13,27 @@ export default function VideoNative(props: VideoNativeProps) {
     typeof import("./video-async.native") | null
   >(null);
 
+  const [error, setError] = useState<string | null>(null);
+
   useEffect(() => {
-    importPromise?.then((module) => {
-      setVideoNativeModule(module);
-    });
+    importPromise
+      ?.then((module) => {
+        setVideoNativeModule(module);
+      })
+      .catch((err) => {
+        setError(err.message);
+      });
   }, []);
 
+  if (error) {
+    console.error(error);
+    return (
+      <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
+        <Text>{error}</Text>
+      </View>
+    );
+  }
+
   if (!videoNativeModule) {
     return <View></View>;
   }

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

@@ -4,7 +4,10 @@ import {
   IngestMediaSource,
   PlayerProtocol,
   PlayerStatus,
+  useEffectiveVolume,
+  useMuted,
   usePlayerStore,
+  useSetMuted,
   useStreamplaceStore,
 } from "../..";
 import { borderRadius, colors, mt } from "../../lib/theme/atoms";
@@ -135,11 +138,11 @@ const VideoElement = forwardRef<
   const x = usePlayerStore((x) => x);
   const url = useStreamplaceStore((x) => x.url);
   const playerEvent = usePlayerStore((x) => x.playerEvent);
-  const setMuted = usePlayerStore((x) => x.setMuted);
   const setMuteWasForced = usePlayerStore((x) => x.setMuteWasForced);
-  const muted = usePlayerStore((x) => x.muted);
   const ingest = usePlayerStore((x) => x.ingestConnectionState !== null);
-  const volume = usePlayerStore((x) => x.volume);
+  const volume = useEffectiveVolume();
+  const muted = useMuted();
+  const setMuted = useSetMuted();
   const setStatus = usePlayerStore((x) => x.setStatus);
   const setUserInteraction = usePlayerStore((x) => x.setUserInteraction);
   const setVideoRef = usePlayerStore((x) => x.setVideoRef);

package/src/crypto-polyfill.native.tsx

@@ -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: any | null = null;
+let expoCrypto: any | null = 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 = {} as any;
+  }
+  if (typeof globalThis.crypto.getRandomValues === "undefined") {
+    globalThis.crypto.getRandomValues = expoCrypto.getRandomValues;
+  }
+}

package/src/index.tsx

@@ -1,4 +1,6 @@
 // barrel file :)
+import "./crypto-polyfill";
+
 export * from "./livestream-provider";
 export * from "./livestream-store";
 export * from "./player-store";
@@ -37,3 +39,7 @@ export * from "./components/keep-awake";
 
 // Dashboard components
 export * as Dashboard from "./components/dashboard";
+
+// Storage exports
+export { default as storage } from "./storage";
+export type { AQStorage } from "./storage/storage.shared";

package/src/livestream-store/chat.tsx

@@ -75,6 +75,19 @@ export const useCreateChatMessage = () => {
     const rt = new 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: PlaceStreamChatMessage.Record = {
       $type: "place.stream.chat.message",
       text: msg.text,
@@ -199,12 +212,9 @@ export const reduceChatIncremental = (
   let hasChanges = false;
   const removedKeys = new Set<string>();
 
-  console.log("newMessages", newMessages);
-
   for (const msg of newMessages) {
     if (msg.deleted) {
       hasChanges = true;
-      console.log("deleted", msg.uri);
       removedKeys.add(msg.uri);
     }
   }

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

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

package/src/player-store/player-provider.tsx

@@ -1,4 +1,3 @@
-import { randomUUID } from "crypto";
 import React, { useCallback, useMemo, useState } from "react";
 import { StoreApi } from "zustand";
 import { PlayerContext } from "./context";
@@ -11,6 +10,19 @@ interface PlayerProviderProps {
   defaultId?: string;
 }
 
+function randomUUID(): string {
+  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;
+}
+
 export const PlayerProvider: React.FC<PlayerProviderProps> = ({
   children,
   initialPlayers = [],

package/src/player-store/player-state.tsx

@@ -69,18 +69,6 @@ export interface PlayerState {
   /** Function to set the ingestStarted timestamp */
   setIngestStarted: (timestamp: number | null) => void;
 
-  /** Player muted state */
-  muted: boolean;
-
-  /** Function to set the muted state */
-  setMuted: (isMuted: boolean) => void;
-
-  /** Player volume level (0.0 to 1.0) */
-  volume: number;
-
-  /** Function to set the volume level */
-  setVolume: (volume: number) => void;
-
   /** Player fullscreen state */
   fullscreen: boolean;
 

package/src/player-store/player-store.tsx

@@ -52,14 +52,6 @@ export const makePlayerStore = (id?: string): StoreApi<PlayerState> => {
     setIngestStarted: (timestamp: number | null) =>
       set(() => ({ ingestStarted: timestamp })),
 
-    muted: false,
-    setMuted: (isMuted: boolean) =>
-      set(() => ({ muted: isMuted, muteWasForced: false })),
-
-    volume: 1.0,
-    setVolume: (volume: number) =>
-      set(() => ({ volume, muteWasForced: false })),
-
     fullscreen: false,
     setFullscreen: (isFullscreen: boolean) =>
       set(() => ({ fullscreen: isFullscreen })),

package/src/player-store/single-player-provider.tsx

@@ -1,7 +1,7 @@
 import React, { createContext, useContext, useMemo } from "react";
 import { StoreApi, useStore } from "zustand";
-import { usePlayerContext } from "../player-store";
 import { PlayerProtocol, PlayerState } from "./player-state";
+import { usePlayerContext } from "./player-store";
 
 // Context for a single player
 interface SinglePlayerContextType {

package/src/storage/index.tsx

@@ -0,0 +1,3 @@
+import Storage from "./storage";
+
+export default new Storage();

package/src/storage/lock.tsx

@@ -0,0 +1,38 @@
+type Cont = () => void;
+
+export class Lock {
+  private readonly queue: Cont[] = [];
+  private acquired = false;
+
+  public async acquire(): Promise<void> {
+    if (!this.acquired) {
+      this.acquired = true;
+    } else {
+      return new Promise<void>((resolve, _) => {
+        this.queue.push(resolve);
+      });
+    }
+  }
+
+  public async release(): Promise<void> {
+    if (this.queue.length === 0 && this.acquired) {
+      this.acquired = false;
+      return;
+    }
+
+    const continuation = this.queue.shift();
+    return new Promise((res: Cont) => {
+      continuation!();
+      res();
+    });
+  }
+
+  public async critical<T>(task: () => Promise<T>) {
+    await this.acquire();
+    try {
+      return await task();
+    } finally {
+      await this.release();
+    }
+  }
+}

package/src/storage/storage.native.tsx

@@ -0,0 +1,42 @@
+import Storage from "expo-sqlite/kv-store";
+import { Lock } from "./lock";
+import { AQStorage } from "./storage.shared";
+
+// Needed because concurrent calls seem to return with a locked database
+const lock = new Lock();
+
+export default class NativeStorage implements AQStorage {
+  async getItem(key: string): Promise<string | null> {
+    return lock.critical(async () => {
+      try {
+        const value = await Storage.getItem(key);
+        return value ?? null;
+      } catch (e) {
+        console.error(`error in NativeStorage.getItem: ${e}`);
+        throw e;
+      }
+    });
+  }
+
+  async setItem(key: string, value: string): Promise<void> {
+    return lock.critical(async () => {
+      try {
+        await Storage.setItem(key, value);
+      } catch (e) {
+        console.error(`error in NativeStorage.setItem: ${e}`);
+        throw e;
+      }
+    });
+  }
+
+  async removeItem(key: string): Promise<void> {
+    return lock.critical(async () => {
+      try {
+        await Storage.removeItem(key);
+      } catch (e) {
+        console.error(`error in NativeStorage.removeItem: ${e}`);
+        throw e;
+      }
+    });
+  }
+}

package/src/storage/storage.shared.tsx

@@ -0,0 +1,5 @@
+export interface AQStorage {
+  getItem: (key: string) => Promise<string | null>;
+  setItem: (key: string, value: string) => Promise<void>;
+  removeItem: (key: string) => Promise<void>;
+}

package/src/storage/storage.tsx

@@ -0,0 +1,15 @@
+import { AQStorage } from "./storage.shared";
+
+export default class WebStorage implements AQStorage {
+  async getItem(key: string): Promise<string | null> {
+    return localStorage.getItem(key);
+  }
+
+  async setItem(key: string, value: string): Promise<void> {
+    localStorage.setItem(key, value);
+  }
+
+  async removeItem(key: string): Promise<void> {
+    localStorage.removeItem(key);
+  }
+}

package/src/streamplace-provider/index.tsx

@@ -11,8 +11,9 @@ export function StreamplaceProvider({
 }: {
   children: React.ReactNode;
   url: string;
-  oauthSession?: SessionManager;
+  oauthSession?: SessionManager | null;
 }) {
+  console.log("session in provider is", oauthSession);
   // todo: handle url changes?
   const store = useRef(makeStreamplaceStore({ url })).current;
 

package/src/streamplace-store/stream.tsx

@@ -154,7 +154,7 @@ export 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: BlobRef | undefined = undefined;
 

package/src/streamplace-store/streamplace-store.tsx

@@ -2,6 +2,7 @@ import { SessionManager } from "@atproto/api/dist/session-manager";
 import { useContext } from "react";
 import { PlaceStreamChatProfile, PlaceStreamLivestream } from "streamplace";
 import { createStore, StoreApi, useStore } from "zustand";
+import storage from "../storage";
 import { StreamplaceContext } from "../streamplace-provider/context";
 
 // there are three categories of XRPC that we need to handle:
@@ -28,9 +29,15 @@ export interface StreamplaceState {
   liveUsersRefresh: number;
   liveUsersLoading: boolean;
   liveUsersError: string | null;
-  oauthSession: SessionManager | null;
+  oauthSession: SessionManager | null | undefined;
   handle: string | null;
   chatProfile: PlaceStreamChatProfile.Record | null;
+
+  // Volume state
+  volume: number;
+  muted: boolean;
+  setVolume: (volume: number) => void;
+  setMuted: (muted: boolean) => void;
 }
 
 export type StreamplaceStore = StoreApi<StreamplaceState>;
@@ -40,7 +47,10 @@ export const makeStreamplaceStore = ({
 }: {
   url: string;
 }): StoreApi<StreamplaceState> => {
-  return createStore<StreamplaceState>()((set) => ({
+  const VOLUME_STORAGE_KEY = "globalVolume";
+  const MUTED_STORAGE_KEY = "globalMuted";
+
+  const store = createStore<StreamplaceState>()((set) => ({
     url,
     liveUsers: null,
     setLiveUsers: (opts: {
@@ -59,7 +69,73 @@ export const makeStreamplaceStore = ({
     oauthSession: null,
     handle: null,
     chatProfile: null,
+
+    // Volume state - start with defaults
+    volume: 1.0,
+    muted: false,
+
+    setVolume: (volume: number) => {
+      // 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.setItem(MUTED_STORAGE_KEY, "false").catch(console.error);
+      }
+
+      storage
+        .setItem(VOLUME_STORAGE_KEY, clampedVolume.toString())
+        .catch(console.error);
+    },
+
+    setMuted: (muted: boolean) => {
+      set({ muted });
+      storage.setItem(MUTED_STORAGE_KEY, muted.toString()).catch(console.error);
+    },
   }));
+
+  // Load initial volume state from storage asynchronously
+  (async () => {
+    try {
+      const storedVolume = await storage.getItem(VOLUME_STORAGE_KEY);
+      const storedMuted = await storage.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;
 };
 
 export function getStreamplaceStoreFromContext(): StreamplaceStore {
@@ -87,3 +163,17 @@ export const useSetHandle = (): ((handle: string) => void) => {
   const store = getStreamplaceStoreFromContext();
   return (handle: string) => store.setState({ handle });
 };
+
+// Volume convenience hooks
+export const useVolume = () => useStreamplaceStore((x) => x.volume);
+export const useMuted = () => useStreamplaceStore((x) => x.muted);
+export const useSetVolume = () => useStreamplaceStore((x) => x.setVolume);
+export const useSetMuted = () => useStreamplaceStore((x) => x.setMuted);
+
+// Composite hook for effective volume (0 if muted) - used by video components
+export 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;
+  });

package/src/streamplace-store/xrpc.tsx

@@ -4,10 +4,17 @@ import { useStreamplaceStore } from ".";
 
 export function usePDSAgent(): StreamplaceAgent | null {
   const oauthSession = useStreamplaceStore((state) => state.oauthSession);
-
+  // oauthsession is
+  // - undefined when loading
+  // - null when logged out, and
+  // - SessionManager when logged in
   return 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 StreamplaceAgent("https://public.api.bsky.app"); // nodeUrl);
     }
 
     return new StreamplaceAgent(oauthSession);

package/tsconfig.json

@@ -4,7 +4,8 @@
     "rootDir": "./src",
     "outDir": "./dist",
     "jsx": "react-jsx",
-    "module": "commonjs"
+    "module": "commonjs",
+    "skipLibCheck": true
   },
   "include": ["./src"]
 }