@streamplace/components 0.7.19 → 0.7.25

package/src/components/chat/mod-view.tsx

@@ -10,6 +10,7 @@ import { usePDSAgent } from "../../streamplace-store/xrpc";
 
 import { Linking } from "react-native";
 import { ChatMessageViewHydrated } from "streamplace";
+import { useDeleteChatMessage } from "../../livestream-store";
 import { useStreamplaceStore } from "../../streamplace-store";
 import {
   atoms,
@@ -172,11 +173,16 @@ export const ModView = forwardRef<ModViewRef, ModViewProps>(() => {
               >
                 <Text color="primary">View user on {BSKY_FRONTEND_DOMAIN}</Text>
               </DropdownMenuItem>
-              <ReportButton
-                message={message}
-                setReportModalOpen={setReportModalOpen}
-                setReportSubject={setReportSubject}
-              />
+              {message.author.did === agent?.did && (
+                <DeleteButton message={message} />
+              )}
+              {message.author.did !== agent?.did && (
+                <ReportButton
+                  message={message}
+                  setReportModalOpen={setReportModalOpen}
+                  setReportSubject={setReportSubject}
+                />
+              )}
             </DropdownMenuGroup>
           </>
         )}
@@ -185,6 +191,34 @@ export const ModView = forwardRef<ModViewRef, ModViewProps>(() => {
   );
 });
 
+export function DeleteButton({
+  message,
+}: {
+  message: ChatMessageViewHydrated;
+}) {
+  const deleteChatMessage = useDeleteChatMessage();
+  const [confirming, setConfirming] = useState(false);
+  const { onOpenChange } = useRootContext();
+  return (
+    <DropdownMenuItem
+      onPress={() => {
+        if (!message) return;
+        if (!confirming) {
+          setConfirming(true);
+          return;
+        }
+        deleteChatMessage(message.uri).then(() => {
+          onOpenChange?.(false);
+        });
+      }}
+    >
+      <Text color="destructive">
+        {confirming ? "Are you sure?" : "Delete message"}
+      </Text>
+    </DropdownMenuItem>
+  );
+}
+
 export function ReportButton({
   message,
   setReportModalOpen,

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

@@ -16,12 +16,14 @@ export function Fullscreen(props: {
   const fullscreen = usePlayerStore((x) => x.fullscreen, playerId);
   const setFullscreen = usePlayerStore((x) => x.setFullscreen, playerId);
   const setSrc = usePlayerStore((x) => x.setSrc);
+  const setAutoplayFailed = usePlayerStore((x) => x.setAutoplayFailed);
 
   const divRef = useRef<RNView>(null);
   const videoRef = useRef<HTMLVideoElement | null>(null);
 
   useEffect(() => {
     setSrc(props.src);
+    setAutoplayFailed(false);
   }, [props.src]);
 
   useEffect(() => {

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

@@ -0,0 +1,86 @@
+import { Play } from "lucide-react-native";
+import { Pressable } from "react-native";
+import { View, layout, usePlayerStore } 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 setMuteWasForced = usePlayerStore((x) => x.setMuteWasForced);
+  const setUserInteraction = usePlayerStore((x) => x.setUserInteraction);
+  const videoRef = usePlayerStore((x) => x.videoRef);
+
+  const handlePlayButtonPress = () => {
+    if (videoRef && typeof videoRef === "object" && videoRef.current) {
+      videoRef.current
+        .play()
+        .then(() => {
+          setAutoplayFailed(false);
+          setUserInteraction();
+        })
+        .catch((err) => {
+          console.error("Manual play failed", err);
+          if (err.name === "NotAllowedError") {
+            setMuted(true);
+            videoRef.current!.muted = true;
+            videoRef
+              .current!.play()
+              .then(() => {
+                setAutoplayFailed(false);
+                setMuteWasForced(true);
+                setUserInteraction();
+              })
+              .catch((err) => {
+                console.error("Manual muted play also failed", err);
+              });
+          }
+        });
+    }
+  };
+
+  if (!autoplayFailed) return null;
+
+  return (
+    <View
+      style={[
+        layout.position.absolute,
+        layout.flex.center,
+        h.percent[100],
+        w.percent[100],
+      ]}
+    >
+      <Pressable
+        onPress={handlePlayButtonPress}
+        style={[
+          {
+            flexDirection: "column",
+            alignItems: "center",
+            justifyContent: "center",
+            gap: 8,
+          },
+        ]}
+      >
+        <View
+          style={[
+            p[4],
+            {
+              backgroundColor: "rgba(200,200,255, 0.1)",
+              borderRadius: 999,
+              borderWidth: 2,
+              borderColor: "rgba(200,200,255, 0.45)",
+              boxShadow: "0 0px 4px rgba(0, 0, 0, 1)",
+              shadowColor: "rgba(0, 0, 0, 1)",
+            },
+          ]}
+        >
+          <Play
+            size="48"
+            color="rgba(120,120,120,0.3)"
+            fill="rgba(200,200,255,1)"
+          />
+        </View>
+      </Pressable>
+    </View>
+  );
+}

package/src/components/mobile-player/ui/index.ts

@@ -1,3 +1,4 @@
+export * from "./autoplay-button";
 export * from "./countdown";
 export * from "./input";
 export * from "./metrics";

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

@@ -154,6 +154,7 @@ const VideoElement = forwardRef<
     playerEvent(url, now.toISOString(), evType, {});
   };
   const [firstAttempt, setFirstAttempt] = useState(true);
+  const setAutoplayFailed = usePlayerStore((x) => x.setAutoplayFailed);
 
   const localVideoRef = props.videoRef ?? useRef<HTMLVideoElement | null>(null);
 
@@ -206,13 +207,22 @@ const VideoElement = forwardRef<
               })
               .catch((err) => {
                 console.error("Muted play also failed", err);
+                setAutoplayFailed(true);
               });
           }
+        } else {
+          // For other errors (not NotAllowedError), also show play button
+          setAutoplayFailed(true);
         }
       });
     }
   };
 
+  const handlePlaying = (e) => {
+    setAutoplayFailed(false);
+    event("playing")(e);
+  };
+
   useEffect(() => {
     return () => {
       setStatus(PlayerStatus.START);
@@ -275,7 +285,7 @@ const VideoElement = forwardRef<
       onLoadStart={event("loadstart")}
       onPause={event("pause")}
       onPlay={event("play")}
-      onPlaying={event("playing")}
+      onPlaying={handlePlaying}
       onRateChange={event("ratechange")}
       onSeeked={event("seeked")}
       onSeeking={event("seeking")}

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/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

@@ -76,6 +76,7 @@ export const useCreateChatMessage = () => {
     await rt.detectFacets(pdsAgent);
 
     const record: PlaceStreamChatMessage.Record = {
+      $type: "place.stream.chat.message",
       text: msg.text,
       createdAt: new Date().toISOString(),
       streamer: streamerProfile.did,
@@ -119,6 +120,28 @@ export const useCreateChatMessage = () => {
   };
 };
 
+export const useDeleteChatMessage = () => {
+  const pdsAgent = usePDSAgent();
+  if (!pdsAgent) {
+    throw new Error("No PDS agent found");
+  }
+  const userDID = useDID();
+  if (!userDID) {
+    throw new Error("No user DID found");
+  }
+  return async (uri: string) => {
+    const rkey = uri.split("/").pop();
+    if (!rkey) {
+      throw new Error("No rkey found");
+    }
+    return await pdsAgent.com.atproto.repo.deleteRecord({
+      repo: userDID,
+      collection: "place.stream.chat.message",
+      rkey: rkey,
+    });
+  };
+};
+
 const buildSortedChatList = (
   chatIndex: { [key: string]: ChatMessageViewHydrated },
   existingChatList: ChatMessageViewHydrated[],
@@ -273,6 +296,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-provider.tsx

@@ -1,3 +1,4 @@
+import { randomUUID } from "crypto";
 import React, { useCallback, useMemo, useState } from "react";
 import { StoreApi } from "zustand";
 import { PlayerContext } from "./context";
@@ -33,7 +34,7 @@ export const PlayerProvider: React.FC<PlayerProviderProps> = ({
   );
 
   const createPlayer = useCallback((id?: string) => {
-    const playerId = id || Math.random().toString(36).slice(8);
+    const playerId = id || randomUUID();
     const playerStore = makePlayerStore(playerId);
 
     setPlayers((prev) => ({

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

@@ -142,6 +142,12 @@ export interface PlayerState {
   /** Function to set the muteWasForced flag */
   setMuteWasForced: (muteWasForced: boolean) => void;
 
+  /** Flag indicating if autoplay failed and needs user interaction */
+  autoplayFailed: boolean;
+
+  /** Function to set the autoplayFailed flag */
+  setAutoplayFailed: (autoplayFailed: boolean) => void;
+
   /** Flag indicating if the player is embedded in another context */
   embedded: boolean;
 

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

@@ -99,6 +99,10 @@ export const makePlayerStore = (id?: string): StoreApi<PlayerState> => {
     setMuteWasForced: (muteWasForced: boolean) =>
       set(() => ({ muteWasForced })),
 
+    autoplayFailed: false,
+    setAutoplayFailed: (autoplayFailed: boolean) =>
+      set(() => ({ autoplayFailed })),
+
     embedded: false,
     setEmbedded: (embedded: boolean) => set(() => ({ embedded })),
 

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