@streamplace/components 0.7.18 → 0.7.21

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/livestream-store/chat.tsx

@@ -119,6 +119,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[],

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