@streamplace/components 0.7.19 → 0.7.21

package/dist/components/chat/chat-box.js

@@ -42,6 +42,11 @@ function ChatBox({ isPopout, chatBoxStyle, emojiData, setIsChatVisible, }) {
         if (!chat)
             return null;
         return chat.reduce((acc, msg) => {
+            // our fake system user "did"
+            if (msg.author.did === "did:sys:system")
+                return acc;
+            if (acc.has(msg.author.handle))
+                return acc;
             acc.set(msg.author.handle, msg.chatProfile);
             return acc;
         }, new Map());

package/dist/components/chat/mod-view.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ModView = void 0;
+exports.DeleteButton = DeleteButton;
 exports.ReportButton = ReportButton;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const dropdown_menu_1 = require("@rn-primitives/dropdown-menu");
@@ -10,6 +11,7 @@ const player_store_1 = require("../../player-store");
 const block_1 = require("../../streamplace-store/block");
 const xrpc_1 = require("../../streamplace-store/xrpc");
 const react_native_1 = require("react-native");
+const livestream_store_1 = require("../../livestream-store");
 const streamplace_store_1 = require("../../streamplace-store");
 const ui_1 = require("../ui");
 const BSKY_FRONTEND_DOMAIN = "bsky.app";
@@ -75,8 +77,24 @@ exports.ModView = (0, react_1.forwardRef)(() => {
                                             ? "Blocking..."
                                             : `Block user @${message.author.handle} from this channel` })) })] })), (0, jsx_runtime_1.jsxs)(ui_1.DropdownMenuGroup, { title: `User actions`, children: [(0, jsx_runtime_1.jsx)(ui_1.DropdownMenuItem, { onPress: () => {
                                         react_native_1.Linking.openURL(`https://${BSKY_FRONTEND_DOMAIN}/profile/${message.author.handle}`);
-                                    }, children: (0, jsx_runtime_1.jsxs)(ui_1.Text, { color: "primary", children: ["View user on ", BSKY_FRONTEND_DOMAIN] }) }), (0, jsx_runtime_1.jsx)(ReportButton, { message: message, setReportModalOpen: setReportModalOpen, setReportSubject: setReportSubject })] })] })) })] }));
+                                    }, children: (0, jsx_runtime_1.jsxs)(ui_1.Text, { color: "primary", children: ["View user on ", BSKY_FRONTEND_DOMAIN] }) }), message.author.did === agent?.did && ((0, jsx_runtime_1.jsx)(DeleteButton, { message: message })), message.author.did !== agent?.did && ((0, jsx_runtime_1.jsx)(ReportButton, { message: message, setReportModalOpen: setReportModalOpen, setReportSubject: setReportSubject }))] })] })) })] }));
 });
+function DeleteButton({ message, }) {
+    const deleteChatMessage = (0, livestream_store_1.useDeleteChatMessage)();
+    const [confirming, setConfirming] = (0, react_1.useState)(false);
+    const { onOpenChange } = (0, dropdown_menu_1.useRootContext)();
+    return ((0, jsx_runtime_1.jsx)(ui_1.DropdownMenuItem, { onPress: () => {
+            if (!message)
+                return;
+            if (!confirming) {
+                setConfirming(true);
+                return;
+            }
+            deleteChatMessage(message.uri).then(() => {
+                onOpenChange?.(false);
+            });
+        }, children: (0, jsx_runtime_1.jsx)(ui_1.Text, { color: "destructive", children: confirming ? "Are you sure?" : "Delete message" }) }));
+}
 function ReportButton({ message, setReportModalOpen, setReportSubject, }) {
     const { onOpenChange } = (0, dropdown_menu_1.useRootContext)();
     return ((0, jsx_runtime_1.jsx)(ui_1.DropdownMenuItem, { onPress: () => {

package/dist/components/mobile-player/fullscreen.js

@@ -14,10 +14,12 @@ function Fullscreen(props) {
     const fullscreen = (0, __1.usePlayerStore)((x) => x.fullscreen, playerId);
     const setFullscreen = (0, __1.usePlayerStore)((x) => x.setFullscreen, playerId);
     const setSrc = (0, __1.usePlayerStore)((x) => x.setSrc);
+    const setAutoplayFailed = (0, __1.usePlayerStore)((x) => x.setAutoplayFailed);
     const divRef = (0, react_1.useRef)(null);
     const videoRef = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
         setSrc(props.src);
+        setAutoplayFailed(false);
     }, [props.src]);
     (0, react_1.useEffect)(() => {
         if (!divRef.current) {

package/dist/components/mobile-player/ui/autoplay-button.js

@@ -0,0 +1,68 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AutoplayButton = AutoplayButton;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const lucide_react_native_1 = require("lucide-react-native");
+const react_native_1 = require("react-native");
+const __1 = require("../../..");
+const ui_1 = require("../../../ui");
+function AutoplayButton() {
+    const autoplayFailed = (0, __1.usePlayerStore)((x) => x.autoplayFailed);
+    const setAutoplayFailed = (0, __1.usePlayerStore)((x) => x.setAutoplayFailed);
+    const setMuted = (0, __1.usePlayerStore)((x) => x.setMuted);
+    const setMuteWasForced = (0, __1.usePlayerStore)((x) => x.setMuteWasForced);
+    const setUserInteraction = (0, __1.usePlayerStore)((x) => x.setUserInteraction);
+    const videoRef = (0, __1.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 ((0, jsx_runtime_1.jsx)(__1.View, { style: [
+            __1.layout.position.absolute,
+            __1.layout.flex.center,
+            ui_1.h.percent[100],
+            ui_1.w.percent[100],
+        ], children: (0, jsx_runtime_1.jsx)(react_native_1.Pressable, { onPress: handlePlayButtonPress, style: [
+                {
+                    flexDirection: "column",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    gap: 8,
+                },
+            ], children: (0, jsx_runtime_1.jsx)(__1.View, { style: [
+                    ui_1.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)",
+                    },
+                ], children: (0, jsx_runtime_1.jsx)(lucide_react_native_1.Play, { size: "48", color: "rgba(120,120,120,0.3)", fill: "rgba(200,200,255,1)" }) }) }) }));
+}

package/dist/components/mobile-player/ui/index.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./autoplay-button"), exports);
 tslib_1.__exportStar(require("./countdown"), exports);
 tslib_1.__exportStar(require("./input"), exports);
 tslib_1.__exportStar(require("./metrics"), exports);

package/dist/components/mobile-player/video.js

@@ -107,6 +107,7 @@ const VideoElement = (0, react_1.forwardRef)((props, ref) => {
         playerEvent(url, now.toISOString(), evType, {});
     };
     const [firstAttempt, setFirstAttempt] = (0, react_1.useState)(true);
+    const setAutoplayFailed = (0, __1.usePlayerStore)((x) => x.setAutoplayFailed);
     const localVideoRef = props.videoRef ?? (0, react_1.useRef)(null);
     // setPipAction comes from Zustand store
     (0, react_1.useEffect)(() => {
@@ -158,12 +159,21 @@ const VideoElement = (0, react_1.forwardRef)((props, ref) => {
                         })
                             .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);
+    };
     (0, react_1.useEffect)(() => {
         return () => {
             setStatus(__1.PlayerStatus.START);
@@ -198,7 +208,7 @@ const VideoElement = (0, react_1.forwardRef)((props, ref) => {
         console.log("Sending", evType, "status to", url);
         playerEvent(url, now.toISOString(), evType, {});
     };
-    return ((0, jsx_runtime_1.jsx)("video", { autoPlay: true, playsInline: true, ref: handleVideoRef, controls: false, src: ingest ? undefined : props.url, muted: muted, crossOrigin: "anonymous", onMouseMove: setUserInteraction, onClick: setUserInteraction, onAbort: event("abort"), onCanPlay: eventLogger, onCanPlayThroughCapture: eventLogger, onCanPlayThrough: canPlayThrough, onEmptied: event("emptied"), onEncrypted: event("encrypted"), onEnded: event("ended"), onError: event("error"), onLoadedData: event("loadeddata"), onLoadedMetadata: event("loadedmetadata"), onLoadStart: event("loadstart"), onPause: event("pause"), onPlay: event("play"), onPlaying: event("playing"), onRateChange: event("ratechange"), onSeeked: event("seeked"), onSeeking: event("seeking"), onStalled: event("stalled"), onSuspend: event("suspend"), onVolumeChange: event("volumechange"), onWaiting: event("waiting"), style: {
+    return ((0, jsx_runtime_1.jsx)("video", { autoPlay: true, playsInline: true, ref: handleVideoRef, controls: false, src: ingest ? undefined : props.url, muted: muted, crossOrigin: "anonymous", onMouseMove: setUserInteraction, onClick: setUserInteraction, onAbort: event("abort"), onCanPlay: eventLogger, onCanPlayThroughCapture: eventLogger, onCanPlayThrough: canPlayThrough, onEmptied: event("emptied"), onEncrypted: event("encrypted"), onEnded: event("ended"), onError: event("error"), onLoadedData: event("loadeddata"), onLoadedMetadata: event("loadedmetadata"), onLoadStart: event("loadstart"), onPause: event("pause"), onPlay: event("play"), onPlaying: handlePlaying, onRateChange: event("ratechange"), onSeeked: event("seeked"), onSeeking: event("seeking"), onStalled: event("stalled"), onSuspend: event("suspend"), onVolumeChange: event("volumechange"), onWaiting: event("waiting"), style: {
             objectFit: props.objectFit || "contain",
             backgroundColor: "transparent",
             width: "100%",

package/dist/livestream-store/chat.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.reduceChat = exports.useReportChatMessage = exports.useSubmitReport = exports.reduceChatIncremental = exports.useCreateChatMessage = exports.useAddPendingHide = exports.usePendingHides = exports.useSetReplyToMessage = exports.useReplyToMessage = void 0;
+exports.reduceChat = exports.useReportChatMessage = exports.useSubmitReport = exports.reduceChatIncremental = exports.useDeleteChatMessage = exports.useCreateChatMessage = exports.useAddPendingHide = exports.usePendingHides = exports.useSetReplyToMessage = exports.useReplyToMessage = void 0;
 const api_1 = require("@atproto/api");
 const react_1 = require("react");
 const streamplace_store_1 = require("../streamplace-store");
@@ -90,6 +90,28 @@ const useCreateChatMessage = () => {
     };
 };
 exports.useCreateChatMessage = useCreateChatMessage;
+const useDeleteChatMessage = () => {
+    const pdsAgent = (0, xrpc_1.usePDSAgent)();
+    if (!pdsAgent) {
+        throw new Error("No PDS agent found");
+    }
+    const userDID = (0, streamplace_store_1.useDID)();
+    if (!userDID) {
+        throw new Error("No user DID found");
+    }
+    return async (uri) => {
+        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,
+        });
+    };
+};
+exports.useDeleteChatMessage = useDeleteChatMessage;
 const buildSortedChatList = (chatIndex, existingChatList, newMessages, removedKeys) => {
     const sortedKeys = Object.keys(chatIndex).sort((a, b) => {
         const aTime = parseInt(a.split("-")[0], 10);

package/dist/player-store/player-provider.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PlayerProvider = void 0;
 exports.withPlayerProvider = withPlayerProvider;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const crypto_1 = require("crypto");
 const react_1 = require("react");
 const context_1 = require("./context");
 const player_store_1 = require("./player-store");
@@ -20,7 +21,7 @@ const PlayerProvider = ({ children, initialPlayers = [], defaultId = Math.random
         return initialPlayerStores;
     });
     const createPlayer = (0, react_1.useCallback)((id) => {
-        const playerId = id || Math.random().toString(36).slice(8);
+        const playerId = id || (0, crypto_1.randomUUID)();
         const playerStore = (0, player_store_1.makePlayerStore)(playerId);
         setPlayers((prev) => ({
             ...prev,

package/dist/player-store/player-store.js

@@ -58,6 +58,8 @@ const makePlayerStore = (id) => {
         // * Will get set to 'false' if the user has interacted with the volume
         muteWasForced: false,
         setMuteWasForced: (muteWasForced) => set(() => ({ muteWasForced })),
+        autoplayFailed: false,
+        setAutoplayFailed: (autoplayFailed) => set(() => ({ autoplayFailed })),
         embedded: false,
         setEmbedded: (embedded) => set(() => ({ embedded })),
         showControls: true,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamplace/components",
-  "version": "0.7.19",
+  "version": "0.7.21",
   "description": "Streamplace React (Native) Components",
   "main": "dist/index.js",
   "types": "src/index.tsx",
@@ -40,7 +40,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.2",
+    "streamplace": "0.7.21",
     "viem": "^2.21.44",
     "zustand": "^5.0.5"
   },
@@ -52,5 +52,5 @@
     "start": "tsc --watch --preserveWatchOutput",
     "prepare": "tsc"
   },
-  "gitHead": "c168b5ba7cc4fcee07c6f68c844b6938de45a6c8"
+  "gitHead": "e930332a9465e0ffd9a78a01ea39b134cd78e49e"
 }

package/src/components/chat/chat-box.tsx

@@ -83,6 +83,9 @@ export function ChatBox({
   const authors = useMemo(() => {
     if (!chat) return null;
     return chat.reduce((acc, msg) => {
+      // our fake system user "did"
+      if (msg.author.did === "did:sys:system") return acc;
+      if (acc.has(msg.author.handle)) return acc;
       acc.set(msg.author.handle, msg.chatProfile);
       return acc;
     }, new Map<string, ChatMessageViewHydrated["chatProfile"]>());

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