@streamplace/components 0.7.21 → 0.7.26

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"]
 }