@streamplace/components 0.7.21 → 0.7.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamplace/components",
-  "version": "0.7.21",
+  "version": "0.7.26",
   "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",
@@ -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",
@@ -40,7 +41,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 +53,5 @@
     "start": "tsc --watch --preserveWatchOutput",
     "prepare": "tsc"
   },
-  "gitHead": "e930332a9465e0ffd9a78a01ea39b134cd78e49e"
+  "gitHead": "4dcda25a5e66a2c1a9f412bee2e09c4dd528a939"
 }

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>;
@@ -105,9 +108,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 +134,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 +146,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/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/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) {

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

@@ -37,3 +37,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/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

@@ -75,7 +75,21 @@ 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,
       createdAt: new Date().toISOString(),
       streamer: streamerProfile.did,
@@ -295,6 +309,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/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/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

@@ -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(),