@streamplace/components 0.7.3 → 0.7.9

package/dist/components/keep-awake.native.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KeepAwake = KeepAwake;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const expo_keep_awake_1 = require("expo-keep-awake");
+const react_1 = require("react");
+function KeepAwake() {
+    // useKeepAwake();
+    (0, react_1.useEffect)(() => {
+        (0, expo_keep_awake_1.activateKeepAwakeAsync)();
+        return () => {
+            (0, expo_keep_awake_1.deactivateKeepAwake)();
+        };
+    }, []);
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
+}

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

@@ -7,6 +7,7 @@ const react_1 = require("react");
 const __1 = require("../..");
 const ui_1 = require("../../components/ui");
 const video_1 = tslib_1.__importDefault(require("./video"));
+const video_retry_1 = tslib_1.__importDefault(require("./video-retry"));
 function Fullscreen(props) {
     const playerId = (0, __1.getFirstPlayerID)();
     const protocol = (0, __1.usePlayerStore)((x) => x.protocol, playerId);
@@ -69,5 +70,5 @@ function Fullscreen(props) {
             document.body.removeEventListener("webkitfullscreenchange", listener);
         };
     }, []);
-    return ((0, jsx_runtime_1.jsx)(ui_1.View, { ref: divRef, children: (0, jsx_runtime_1.jsx)(video_1.default, {}) }));
+    return ((0, jsx_runtime_1.jsxs)(ui_1.View, { ref: divRef, style: { width: "100%", height: "100%", overflow: "hidden" }, children: [(0, jsx_runtime_1.jsx)(video_retry_1.default, { children: (0, jsx_runtime_1.jsx)(video_1.default, {}) }), props.children] }));
 }

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

@@ -119,7 +119,7 @@ function Fullscreen(props) {
                     width: isLandscape ? dimensions.width + 40 : dimensions.width,
                     height: dimensions.height,
                 },
-            ], children: (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
+            ], children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
                     styles.videoContainer,
                     {
                         width: isLandscape ? videoWidth + 40 : videoWidth,
@@ -127,10 +127,10 @@ function Fullscreen(props) {
                         left: leftPosition,
                         top: topPosition,
                     },
-                ], children: (0, jsx_runtime_1.jsx)(video_native_1.default, {}) }) }));
+                ], children: [(0, jsx_runtime_1.jsx)(video_native_1.default, {}), props.children] }) }));
     }
     // Normal non-fullscreen mode
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(video_native_1.default, {}) }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(__1.VideoRetry, { children: (0, jsx_runtime_1.jsx)(video_native_1.default, {}) }), props.children] }));
 }
 const styles = react_native_1.StyleSheet.create({
     fullscreenContainer: {

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

@@ -7,18 +7,23 @@ const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const atoms_1 = require("../../lib/theme/atoms");
-const livestream_store_1 = require("../../livestream-store");
 const player_store_1 = require("../../player-store");
 const streamplace_store_1 = require("../../streamplace-store");
 const ui_1 = require("../ui");
 const fullscreen_1 = require("./fullscreen");
+const report_modal_1 = tslib_1.__importDefault(require("./ui/report-modal"));
 const OFFLINE_THRESHOLD = 10000;
 exports.PlayerUI = tslib_1.__importStar(require("./ui"));
 function Player(props) {
-    const playing = (0, player_store_1.usePlayerStore)((x) => x.status === player_store_1.PlayerStatus.PLAYING);
-    const setOffline = (0, player_store_1.usePlayerStore)((x) => x.setOffline);
     const setIngest = (0, player_store_1.usePlayerStore)((x) => x.setIngestConnectionState);
     const clearControlsTimeout = (0, player_store_1.usePlayerStore)((x) => x.clearControlsTimeout);
+    const setReportingURL = (0, player_store_1.usePlayerStore)((x) => x.setReportingURL);
+    const reportModalOpen = (0, player_store_1.usePlayerStore)((x) => x.reportModalOpen);
+    const setReportModalOpen = (0, player_store_1.usePlayerStore)((x) => x.setReportModalOpen);
+    const reportSubject = (0, player_store_1.usePlayerStore)((x) => x.reportSubject);
+    (0, react_1.useEffect)(() => {
+        setReportingURL(props.reportingURL ?? null);
+    }, [props.reportingURL]);
     // Will call back every few seconds to send health updates
     usePlayerStatus();
     (0, react_1.useEffect)(() => {
@@ -32,33 +37,13 @@ function Player(props) {
             clearControlsTimeout();
         };
     }, []);
-    const segment = (0, livestream_store_1.useSegment)();
-    const [lastCheck, setLastCheck] = (0, react_1.useState)(0);
-    (0, react_1.useEffect)(() => {
-        if (playing) {
-            setOffline(false);
-            return;
-        }
-        if (!segment) {
-            setOffline(false);
-            return;
-        }
-        const startTime = Date.parse(segment.startTime);
-        if (!startTime) {
-            console.error("startTime is not a number", segment.startTime);
-            return;
-        }
-        const timeSinceStart = Date.now() - startTime;
-        if (timeSinceStart > OFFLINE_THRESHOLD) {
-            setOffline(true);
-            return;
-        }
-        const handle = setTimeout(() => {
-            setLastCheck(Date.now());
-        }, 1000);
-        return () => clearTimeout(handle);
-    }, [segment, playing, lastCheck]);
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(ui_1.View, { style: [atoms_1.zIndex[0], atoms_1.flex.values[1], atoms_1.w.percent[100], atoms_1.layout.flex.center], children: (0, jsx_runtime_1.jsx)(fullscreen_1.Fullscreen, { src: props.src }) }) }));
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(ui_1.View, { style: [
+                atoms_1.zIndex[0],
+                atoms_1.w.percent[100],
+                atoms_1.h.percent[100],
+                atoms_1.flex.shrink[1],
+                atoms_1.layout.flex.center,
+            ], children: [(0, jsx_runtime_1.jsx)(report_modal_1.default, { open: reportModalOpen, onOpenChange: setReportModalOpen, subject: reportSubject }), (0, jsx_runtime_1.jsx)(fullscreen_1.Fullscreen, { src: props.src, children: props.children })] }) }));
 }
 const POLL_INTERVAL = 5000;
 function usePlayerStatus() {

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

@@ -3,8 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./countdown"), exports);
 tslib_1.__exportStar(require("./input"), exports);
-tslib_1.__exportStar(require("./loading"), exports);
 tslib_1.__exportStar(require("./metrics"), exports);
 tslib_1.__exportStar(require("./streamer-context-menu"), exports);
+tslib_1.__exportStar(require("./streamer-loading-overlay"), exports);
 tslib_1.__exportStar(require("./viewer-context-menu"), exports);
+tslib_1.__exportStar(require("./viewer-loading-overlay"), exports);
 tslib_1.__exportStar(require("./viewers"), exports);

package/dist/components/mobile-player/ui/report-modal.js

@@ -0,0 +1,90 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ReportModal = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const api_1 = require("@atproto/api");
+const lucide_react_native_1 = require("lucide-react-native");
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const __1 = require("../../..");
+const livestream_store_1 = require("../../../livestream-store");
+const ui_1 = require("../../ui");
+// AT Protocol moderation reason types with proper labels
+const REPORT_REASONS = [
+    {
+        value: api_1.ComAtprotoModerationDefs.REASONSPAM,
+        label: "Spam",
+        description: "Excessive unwanted promotion, replies, mentions",
+    },
+    {
+        value: api_1.ComAtprotoModerationDefs.REASONVIOLATION,
+        label: "Rule Violation",
+        description: "Direct, blatant violation of laws or terms of service",
+    },
+    {
+        value: api_1.ComAtprotoModerationDefs.REASONMISLEADING,
+        label: "Misleading Content",
+        description: "Misleading identity, affiliation, or content",
+    },
+    {
+        value: api_1.ComAtprotoModerationDefs.REASONSEXUAL,
+        label: "Sexual Content",
+        description: "Unwanted or mislabeled sexual content",
+    },
+    {
+        value: api_1.ComAtprotoModerationDefs.REASONRUDE,
+        label: "Harassment",
+        description: "Rude, harassing, explicit, or otherwise unwelcoming behavior",
+    },
+    {
+        value: api_1.ComAtprotoModerationDefs.REASONOTHER,
+        label: "Other",
+        description: "Reports not falling under another report category",
+    },
+];
+const ReportModal = ({ open, onOpenChange, onSubmit, subject, title = "Report", description = "Why are you submitting this report?", }) => {
+    const [selectedReason, setSelectedReason] = (0, react_1.useState)(null);
+    const [additionalComments, setAdditionalComments] = (0, react_1.useState)("");
+    const [isSubmitting, setIsSubmitting] = (0, react_1.useState)(false);
+    const [submitError, setSubmitError] = (0, react_1.useState)(null);
+    const submitReport = (0, livestream_store_1.useSubmitReport)();
+    const handleCancel = () => {
+        setSelectedReason(null);
+        setAdditionalComments("");
+        setSubmitError(null);
+        onOpenChange(false);
+    };
+    const handleSubmit = async () => {
+        if (!selectedReason)
+            return;
+        setIsSubmitting(true);
+        setSubmitError(null);
+        try {
+            submitReport(subject, selectedReason, additionalComments.trim() || undefined);
+            // Reset form and close modal on success
+            setSelectedReason(null);
+            setAdditionalComments("");
+            onOpenChange(false);
+        }
+        catch (error) {
+            console.error("Failed to submit report:", error);
+            setSubmitError("Failed to submit report. Please try again.");
+        }
+        finally {
+            setIsSubmitting(false);
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)(ui_1.Dialog, { open: open, onOpenChange: onOpenChange, title: title, description: description, showCloseButton: true, variant: "default", size: "md", dismissible: false, position: "center", children: [(0, jsx_runtime_1.jsxs)(ui_1.ModalContent, { style: [__1.zero.pb[2]], children: [REPORT_REASONS.map((reason) => ((0, jsx_runtime_1.jsxs)(react_native_1.TouchableOpacity, { onPress: () => setSelectedReason(reason.value), style: [
+                            __1.zero.layout.flex.row,
+                            __1.zero.gap.all[2],
+                            __1.zero.py[3],
+                            __1.zero.px[3],
+                            __1.zero.borderRadius[8],
+                            __1.zero.layout.flex.alignCenter,
+                            selectedReason === reason.value && {
+                                backgroundColor: "rgba(0, 122, 255, 0.1)",
+                            },
+                        ], children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { children: selectedReason === reason.value ? (0, jsx_runtime_1.jsx)(lucide_react_native_1.CheckCircle, {}) : (0, jsx_runtime_1.jsx)(lucide_react_native_1.Circle, {}) }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [__1.zero.layout.flex.column, __1.zero.gap.all[1], __1.zero.flex[1]], children: [(0, jsx_runtime_1.jsx)(ui_1.Text, { style: [{ fontWeight: "600" }], children: reason.label }), (0, jsx_runtime_1.jsx)(ui_1.Text, { style: [{ fontSize: 14, color: "rgba(255,255,255,0.7)" }], children: reason.description })] })] }, reason.value))), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [__1.zero.pb[4], __1.zero.mt[4], __1.zero.px[2]], children: [(0, jsx_runtime_1.jsx)(ui_1.Text, { style: [__1.zero.mb[2]], children: "Additional Comments (optional)" }), (0, jsx_runtime_1.jsx)(ui_1.Textarea, { maxLength: 500, numberOfLines: 3, value: additionalComments, onChangeText: setAdditionalComments, placeholder: "Provide additional context for this report..." }), submitError && ((0, jsx_runtime_1.jsx)(ui_1.Text, { style: [__1.zero.mt[2], { color: "red", fontSize: 14 }], children: submitError }))] })] }), (0, jsx_runtime_1.jsxs)(ui_1.DialogFooter, { children: [(0, jsx_runtime_1.jsx)(ui_1.Button, { variant: "secondary", onPress: handleCancel, disabled: isSubmitting, children: (0, jsx_runtime_1.jsx)(ui_1.Text, { children: "Cancel" }) }), (0, jsx_runtime_1.jsx)(ui_1.Button, { variant: "primary", onPress: handleSubmit, disabled: !selectedReason || isSubmitting, children: isSubmitting ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(lucide_react_native_1.Loader2, { style: [{ marginRight: 8 }] }), (0, jsx_runtime_1.jsx)(ui_1.Text, { children: "Submitting..." })] })) : ((0, jsx_runtime_1.jsx)(ui_1.Text, { children: "Submit" })) })] })] }));
+};
+exports.ReportModal = ReportModal;
+exports.default = exports.ReportModal;

package/dist/components/mobile-player/ui/{loading.js → streamer-loading-overlay.js}

@@ -7,7 +7,7 @@ const react_1 = require("react");
 const react_native_reanimated_1 = tslib_1.__importStar(require("react-native-reanimated"));
 const atoms_1 = require("../../../lib/theme/atoms");
 const defaultMessages = [
-    "Creating your stream",
+    "Creating the stream",
     "Uploading thumbnails",
     "Getting things ready",
     "Doing some magic",

package/dist/components/mobile-player/ui/viewer-context-menu.js

@@ -1,7 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ContextMenu = ContextMenu;
+exports.ReportButton = ReportButton;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const dropdown_menu_1 = require("@rn-primitives/dropdown-menu");
 const lucide_react_native_1 = require("lucide-react-native");
 const theme_1 = require("../../../lib/theme");
 const livestream_store_1 = require("../../../livestream-store");
@@ -19,5 +21,22 @@ function ContextMenu() {
     const setLowLatency = (value) => {
         setProtocol(value ? player_store_1.PlayerProtocol.WEBRTC : player_store_1.PlayerProtocol.HLS);
     };
-    return ((0, jsx_runtime_1.jsxs)(ui_1.DropdownMenu, { children: [(0, jsx_runtime_1.jsx)(ui_1.DropdownMenuTrigger, { children: (0, jsx_runtime_1.jsx)(lucide_react_native_1.Menu, { size: 32, color: theme_1.colors.gray[200] }) }), (0, jsx_runtime_1.jsxs)(ui_1.ResponsiveDropdownMenuContent, { children: [(0, jsx_runtime_1.jsx)(ui_1.DropdownMenuGroup, { title: "Resolution", children: (0, jsx_runtime_1.jsxs)(ui_1.DropdownMenuRadioGroup, { value: quality, onValueChange: setQuality, children: [(0, jsx_runtime_1.jsx)(ui_1.DropdownMenuRadioItem, { value: "source", children: (0, jsx_runtime_1.jsx)(ui_1.Text, { children: "Source (Original Quality)" }) }), qualities.map((r) => ((0, jsx_runtime_1.jsx)(ui_1.DropdownMenuRadioItem, { value: r.name, children: (0, jsx_runtime_1.jsx)(ui_1.Text, { children: r.name }) })))] }) }), (0, jsx_runtime_1.jsx)(ui_1.DropdownMenuGroup, { title: "Advanced", children: (0, jsx_runtime_1.jsx)(ui_1.DropdownMenuCheckboxItem, { checked: lowLatency, onCheckedChange: () => setLowLatency(!lowLatency), children: (0, jsx_runtime_1.jsx)(ui_1.Text, { children: "Low Latency" }) }) }), (0, jsx_runtime_1.jsx)(ui_1.DropdownMenuInfo, { description: "Reduces the delay between video and chat for a more real-time experience." }), (0, jsx_runtime_1.jsx)(ui_1.DropdownMenuGroup, { children: (0, jsx_runtime_1.jsx)(ui_1.DropdownMenuCheckboxItem, { checked: debugInfo, onCheckedChange: () => setShowDebugInfo(!debugInfo), children: (0, jsx_runtime_1.jsx)(ui_1.Text, { children: "Show Debug Info" }) }) })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(ui_1.DropdownMenu, { children: [(0, jsx_runtime_1.jsx)(ui_1.DropdownMenuTrigger, { children: (0, jsx_runtime_1.jsx)(lucide_react_native_1.Settings, { color: theme_1.colors.gray[200] }) }), (0, jsx_runtime_1.jsxs)(ui_1.ResponsiveDropdownMenuContent, { side: "top", align: "end", children: [(0, jsx_runtime_1.jsx)(ui_1.DropdownMenuGroup, { title: "Resolution", children: (0, jsx_runtime_1.jsxs)(ui_1.DropdownMenuRadioGroup, { value: quality, onValueChange: setQuality, children: [(0, jsx_runtime_1.jsx)(ui_1.DropdownMenuRadioItem, { value: "source", children: (0, jsx_runtime_1.jsx)(ui_1.Text, { children: "Source (Original Quality)" }) }), qualities.map((r) => ((0, jsx_runtime_1.jsx)(ui_1.DropdownMenuRadioItem, { value: r.name, children: (0, jsx_runtime_1.jsx)(ui_1.Text, { children: r.name }) })))] }) }), (0, jsx_runtime_1.jsx)(ui_1.DropdownMenuGroup, { title: "Advanced", children: (0, jsx_runtime_1.jsx)(ui_1.DropdownMenuCheckboxItem, { checked: lowLatency, onCheckedChange: () => setLowLatency(!lowLatency), children: (0, jsx_runtime_1.jsx)(ui_1.Text, { children: "Low Latency" }) }) }), (0, jsx_runtime_1.jsx)(ui_1.DropdownMenuInfo, { description: "Reduces the delay between video and chat for a more real-time experience." }), (0, jsx_runtime_1.jsx)(ui_1.DropdownMenuGroup, { children: (0, jsx_runtime_1.jsx)(ui_1.DropdownMenuCheckboxItem, { checked: debugInfo, onCheckedChange: () => setShowDebugInfo(!debugInfo), children: (0, jsx_runtime_1.jsx)(ui_1.Text, { children: "Show Debug Info" }) }) }), (0, jsx_runtime_1.jsx)(ui_1.DropdownMenuGroup, { title: "Report", children: (0, jsx_runtime_1.jsx)(ReportButton, {}) })] })] }));
+}
+function ReportButton() {
+    const livestream = (0, livestream_store_1.useLivestreamStore)((x) => x.livestream);
+    const setReportModalOpen = (0, player_store_1.usePlayerStore)((x) => x.setReportModalOpen);
+    const setReportSubject = (0, player_store_1.usePlayerStore)((x) => x.setReportSubject);
+    const { onOpenChange } = (0, dropdown_menu_1.useRootContext)();
+    return ((0, jsx_runtime_1.jsx)(ui_1.DropdownMenuItem, { onPress: () => {
+            if (!livestream)
+                return;
+            onOpenChange?.(false);
+            setReportModalOpen(true);
+            setReportSubject({
+                $type: "com.atproto.repo.strongRef",
+                uri: livestream.uri,
+                cid: livestream.cid,
+            });
+        }, children: (0, jsx_runtime_1.jsx)(ui_1.Text, { children: "Report Livestream..." }) }));
 }

package/dist/components/mobile-player/ui/viewer-loading-overlay.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ViewerLoadingOverlay = ViewerLoadingOverlay;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const lucide_react_native_1 = require("lucide-react-native");
+const react_1 = require("react");
+const react_native_reanimated_1 = tslib_1.__importStar(require("react-native-reanimated"));
+const __1 = require("../../..");
+function ViewerLoadingOverlay() {
+    const status = (0, __1.usePlayerStore)((x) => x.status);
+    const theme = (0, __1.useTheme)();
+    const opacity = (0, react_native_reanimated_1.useSharedValue)(0);
+    (0, react_1.useEffect)(() => {
+        if (status === __1.PlayerStatus.PLAYING || status === __1.PlayerStatus.SUSPEND) {
+            opacity.value = (0, react_native_reanimated_1.withTiming)(0, { duration: 300 });
+        }
+        else {
+            opacity.value = (0, react_native_reanimated_1.withTiming)(1, { duration: 300 });
+        }
+    }, [status, opacity]);
+    const animatedStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => {
+        return {
+            opacity: opacity.value,
+        };
+    });
+    if (status === __1.PlayerStatus.PLAYING) {
+        return (0, jsx_runtime_1.jsx)(__1.KeepAwake, {});
+    }
+    if (status === __1.PlayerStatus.SUSPEND) {
+        return null; // No overlay when stopped
+    }
+    let spinner = (0, jsx_runtime_1.jsx)(__1.Loader, { size: "large" });
+    if (status === __1.PlayerStatus.PAUSE) {
+        spinner = (0, jsx_runtime_1.jsx)(lucide_react_native_1.Play, { size: "$12", color: theme.styles.text.primary["color"] });
+    }
+    return ((0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: [
+            {
+                position: "absolute",
+                width: "100%",
+                height: "100%",
+                zIndex: 998,
+                alignItems: "center",
+                justifyContent: "center",
+                backgroundColor: "rgba(0,0,0,0.3)",
+            },
+            animatedStyle,
+        ], children: spinner }));
+}

package/dist/components/mobile-player/use-webrtc.js

@@ -9,6 +9,7 @@ const webrtc_primitives_1 = require("./webrtc-primitives");
 function useWebRTC(endpoint) {
     const [mediaStream, setMediaStream] = (0, react_1.useState)(null);
     const [stuck, setStuck] = (0, react_1.useState)(false);
+    const setStatus = (0, __1.usePlayerStore)((x) => x.setStatus);
     const lastChange = (0, react_1.useRef)(0);
     (0, react_1.useEffect)(() => {
         const peerConnection = new webrtc_primitives_1.RTCPeerConnection({
@@ -29,7 +30,10 @@ function useWebRTC(endpoint) {
         });
         peerConnection.addEventListener("connectionstatechange", () => {
             console.log("connection state change", peerConnection.connectionState);
-            if (peerConnection.connectionState === "closed") {
+            if (peerConnection.connectionState === "closed" ||
+                peerConnection.connectionState === "failed" ||
+                peerConnection.connectionState === "disconnected") {
+                console.log("setting stuck to true", peerConnection.connectionState);
                 setStuck(true);
             }
             if (peerConnection.connectionState !== "connected") {
@@ -50,6 +54,7 @@ function useWebRTC(endpoint) {
                     if (lastAudioFramesReceived !== audioFramesReceived) {
                         lastAudioFramesReceived = audioFramesReceived;
                         lastChange.current = Date.now();
+                        setStatus(__1.PlayerStatus.PLAYING);
                         setStuck(false);
                     }
                 }
@@ -58,6 +63,7 @@ function useWebRTC(endpoint) {
                     if (lastFramesReceived !== framesReceived) {
                         lastFramesReceived = framesReceived;
                         lastChange.current = Date.now();
+                        setStatus(__1.PlayerStatus.PLAYING);
                         setStuck(false);
                     }
                 }

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

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = VideoRetry;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = tslib_1.__importStar(require("react"));
+const __1 = require("../..");
+function VideoRetry(props) {
+    const retryTimeoutRef = (0, react_1.useRef)(null);
+    const [retries, setRetries] = (0, react_1.useState)(0);
+    const playing = (0, __1.usePlayerStore)((x) => x.status === __1.PlayerStatus.PLAYING);
+    (0, react_1.useEffect)(() => {
+        if (!playing) {
+            const jitter = 500 + Math.random() * 1500;
+            retryTimeoutRef.current = setTimeout(() => {
+                console.log("Retrying video playback...");
+                setRetries((prevRetries) => prevRetries + 1);
+            }, jitter);
+        }
+        return () => {
+            if (retryTimeoutRef.current) {
+                console.log("Clearing retry timeout");
+                clearTimeout(retryTimeoutRef.current);
+                retryTimeoutRef.current = null;
+            }
+        };
+    }, [!playing]);
+    return (0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: props.children }, retries);
+}

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

@@ -14,6 +14,7 @@ const react_1 = require("react");
 const __1 = require("../..");
 const atoms_1 = require("../../lib/theme/atoms");
 const index_1 = require("../ui/index");
+const loader_1 = require("../ui/loader");
 const shared_1 = require("./shared");
 const use_webrtc_1 = tslib_1.__importStar(require("./use-webrtc"));
 const webrtc_diagnostics_1 = require("./webrtc-diagnostics");
@@ -102,23 +103,56 @@ const VideoElement = (0, react_1.forwardRef)((props, ref) => {
     };
     const [firstAttempt, setFirstAttempt] = (0, react_1.useState)(true);
     const localVideoRef = props.videoRef ?? (0, react_1.useRef)(null);
+    // setPipAction comes from Zustand store
+    (0, react_1.useEffect)(() => {
+        if (typeof x.setPipAction === "function") {
+            const fn = () => {
+                if (localVideoRef.current) {
+                    try {
+                        localVideoRef.current.requestPictureInPicture?.();
+                    }
+                    catch (err) {
+                        console.error("Error requesting Picture-in-Picture:", err);
+                    }
+                }
+                else {
+                    console.log("No video ref available for PiP");
+                }
+            };
+            x.setPipAction(fn);
+        }
+        // Cleanup on unmount
+        return () => {
+            if (typeof x.setPipAction === "function") {
+                x.setPipAction(undefined);
+            }
+        };
+    }, []);
     const canPlayThrough = (e) => {
+        console.log("canPlayThrough called", {
+            firstAttempt,
+            videoRef: !!localVideoRef.current,
+        });
+        setStatus(__1.PlayerStatus.PLAYING);
         event("canplaythrough")(e);
         if (firstAttempt && localVideoRef.current) {
             setFirstAttempt(false);
+            console.log("Attempting to play video");
             localVideoRef.current.play().catch((err) => {
+                console.log("error playing video", err.name);
                 if (err.name === "NotAllowedError") {
                     if (localVideoRef.current) {
+                        console.log("Setting muted and retrying");
                         setMuted(true);
                         localVideoRef.current.muted = true;
                         localVideoRef.current
                             .play()
                             .then(() => {
-                            console.warn("Browser forced video to start muted");
+                            console.log("Muted play succeeded");
                             setMuteWasForced(true);
                         })
                             .catch((err) => {
-                            console.error("error playing video", err);
+                            console.error("Muted play also failed", err);
                         });
                     }
                 }
@@ -148,15 +182,24 @@ const VideoElement = (0, react_1.forwardRef)((props, ref) => {
             ref.current =
                 videoElement;
         }
-        // if (localVideoRef && typeof localVideoRef !== "function") {
-        //   localVideoRef.current = videoElement;
-        // }
+        localVideoRef.current = videoElement;
     };
-    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: event("canplay"), 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: {
+    const eventLogger = (evType) => (e) => {
+        console.log("📺 Video event:", evType);
+        const now = new Date();
+        if (updateEvents[evType]) {
+            x.setStatus(evType);
+        }
+        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: {
             objectFit: "contain",
             backgroundColor: "transparent",
             width: "100%",
             height: "100%",
+            maxWidth: "100%",
+            maxHeight: "100%",
             transform: ingest ? "scaleX(-1)" : undefined,
         } }));
 });
@@ -238,6 +281,14 @@ function WebRTCPlayer(props) {
     }
     return (0, jsx_runtime_1.jsx)(WebRTCPlayerInner, { url: props.url, videoRef: props.videoRef });
 }
+const connectionStatusMessages = {
+    initializing: "Starting up...",
+    connecting: "Connecting...",
+    "connection-failed": "Connecting...",
+    connected: "Connected",
+    reconnecting: "Reconnecting...",
+    checking: "Checking connection...",
+};
 function WebRTCPlayerInner({ videoRef, url, width, height, }) {
     const [connectionStatus, setConnectionStatus] = (0, react_1.useState)("initializing");
     const status = (0, __1.usePlayerStore)((x) => x.status);
@@ -260,7 +311,7 @@ function WebRTCPlayerInner({ videoRef, url, width, height, }) {
         if (stuck && status === __1.PlayerStatus.PLAYING) {
             setStatus(__1.PlayerStatus.STALLED);
         }
-        if (!stuck && mediaStream) {
+        if (!stuck && status === __1.PlayerStatus.STALLED) {
             setStatus(__1.PlayerStatus.PLAYING);
         }
     }, [stuck, status, mediaStream]);
@@ -303,7 +354,19 @@ function WebRTCPlayerInner({ videoRef, url, width, height, }) {
         videoRef.current.srcObject = mediaStream;
     }, [mediaStream]);
     if (!mediaStream) {
-        return ((0, jsx_runtime_1.jsx)(index_1.View, { backgroundColor: "#111", style: { minWidth: "100%", minHeight: "100%" }, children: (0, jsx_runtime_1.jsxs)(index_1.View, { backgroundColor: atoms_1.colors.primary[800], style: { borderRadius: atoms_1.borderRadius.md }, children: [(0, jsx_runtime_1.jsx)(index_1.View, { children: (0, jsx_runtime_1.jsx)(index_1.Text, { children: "Connecting..." }) }), (0, jsx_runtime_1.jsxs)(index_1.Text, { children: ["Establishing WebRTC connection (", connectionStatus, ")"] })] }) }));
+        const isError = connectionStatus === "connection-failed";
+        return ((0, jsx_runtime_1.jsx)(index_1.View, { backgroundColor: "#111", style: {
+                minWidth: "100%",
+                minHeight: "100%",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+            }, children: (0, jsx_runtime_1.jsxs)(index_1.View, { style: {
+                    borderRadius: atoms_1.borderRadius.md,
+                    padding: 24,
+                    alignItems: "center",
+                    gap: 16,
+                }, children: [!isError && (0, jsx_runtime_1.jsx)(loader_1.Loader, { size: "large" }), (0, jsx_runtime_1.jsx)(index_1.Text, { size: "lg", weight: "semibold", children: connectionStatusMessages[connectionStatus] || "Connecting..." })] }) }));
     }
     return (0, jsx_runtime_1.jsx)(VideoElement, { url: url, ref: videoRef });
 }
@@ -379,7 +442,19 @@ function WebcamIngestPlayer(props) {
         videoElement.srcObject = localMediaStream;
     }, [videoElement, localMediaStream]);
     if (error) {
-        return ((0, jsx_runtime_1.jsxs)(index_1.View, { backgroundColor: atoms_1.colors.destructive[900], style: [atoms_1.p[4], { borderRadius: atoms_1.borderRadius.md }], children: [(0, jsx_runtime_1.jsx)(index_1.View, { children: (0, jsx_runtime_1.jsx)(index_1.Text, { size: "xl", weight: "extrabold", children: "Error encountered!" }) }), (0, jsx_runtime_1.jsx)(index_1.Text, { children: error.message })] }));
+        return ((0, jsx_runtime_1.jsx)(index_1.View, { backgroundColor: "#111", style: {
+                minWidth: "100%",
+                minHeight: "100%",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+            }, children: (0, jsx_runtime_1.jsx)(index_1.View, { backgroundColor: atoms_1.colors.destructive[900], style: {
+                    borderRadius: atoms_1.borderRadius.md,
+                    padding: 24,
+                    alignItems: "center",
+                    gap: 16,
+                    maxWidth: 400,
+                }, children: (0, jsx_runtime_1.jsx)(index_1.Text, { size: "xl", weight: "extrabold", color: "default", children: error.message }) }) }));
     }
     return (0, jsx_runtime_1.jsx)(VideoElement, { ...props, ref: handleRef });
 }

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

@@ -51,6 +51,15 @@ function NativeVideo() {
         };
     }, [setStatus]);
     const player = (0, expo_video_1.useVideoPlayer)(url, (player) => {
+        player.addListener("playingChange", (newIsPlaying) => {
+            console.log("playingChange", newIsPlaying);
+            if (newIsPlaying) {
+                setStatus(__1.PlayerStatus.PLAYING);
+            }
+            else {
+                setStatus(__1.PlayerStatus.WAITING);
+            }
+        });
         player.loop = true;
         player.muted = muted;
         player.play();
@@ -72,10 +81,12 @@ function NativeVideo() {
         ].map((evType) => {
             return player.addListener(evType, (...args) => {
                 const now = new Date();
+                console.log("video native event", evType);
                 playerEvent(spurl, now.toISOString(), evType, { args: args });
             });
         });
         subs.push(player.addListener("playingChange", (newIsPlaying) => {
+            console.log("playingChange", newIsPlaying);
             if (newIsPlaying) {
                 setStatus(__1.PlayerStatus.PLAYING);
             }
@@ -100,6 +111,7 @@ function NativeWHEP() {
     const src = (0, __1.usePlayerStore)((x) => x.src);
     const { url } = (0, shared_1.srcToUrl)({ src: src, selectedRendition }, __1.PlayerProtocol.WEBRTC);
     const [stream, stuck] = (0, use_webrtc_1.default)(url);
+    const status = (0, __1.usePlayerStore)((x) => x.status);
     const setPlayerWidth = (0, __1.usePlayerStore)((x) => x.setPlayerWidth);
     const setPlayerHeight = (0, __1.usePlayerStore)((x) => x.setPlayerHeight);
     // PiP support: wire up videoRef (no direct ref for RTCView)
@@ -116,21 +128,23 @@ function NativeWHEP() {
     const muted = (0, __1.usePlayerStore)((x) => x.muted);
     const volume = (0, __1.usePlayerStore)((x) => x.volume);
     (0, react_1.useEffect)(() => {
-        if (stuck) {
+        if (stuck && status === __1.PlayerStatus.PLAYING) {
+            console.log("setting status to stalled", status);
             setStatus(__1.PlayerStatus.STALLED);
         }
-        else {
+        if (!stuck && status === __1.PlayerStatus.STALLED) {
+            console.log("setting status to playing", status);
             setStatus(__1.PlayerStatus.PLAYING);
         }
-    }, [stuck, setStatus]);
+    }, [stuck, status]);
     const mediaStream = stream;
-    (0, react_1.useEffect)(() => {
-        if (!mediaStream) {
-            setStatus(__1.PlayerStatus.WAITING);
-            return;
-        }
-        setStatus(__1.PlayerStatus.PLAYING);
-    }, [mediaStream, setStatus]);
+    // useEffect(() => {
+    //   if (!mediaStream) {
+    //     setStatus(PlayerStatus.WAITING);
+    //     return;
+    //   }
+    //   setStatus(PlayerStatus.PLAYING);
+    // }, [mediaStream, setStatus]);
     (0, react_1.useEffect)(() => {
         if (!mediaStream) {
             return;