@streamplace/components 0.7.18 → 0.7.21

package/dist/components/dashboard/problems.js

@@ -0,0 +1,74 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProblemsWrapper = void 0;
+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_1 = require("react-native");
+const livestream_store_1 = require("../../livestream-store");
+const zero = tslib_1.__importStar(require("../../ui"));
+const { bg, r, borders, p, text, layout, gap } = zero;
+const Problems = ({ probs, onIgnore, }) => {
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [gap.all[3]], children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [text.white, { fontSize: 24, fontWeight: "bold" }], children: "Optimize Your Stream" }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [text.gray[300]], children: "We've found a few things that could improve your stream's reliability." })] }), probs.map((p) => ((0, jsx_runtime_1.jsx)(react_native_1.View, { children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
+                        gap.all[2],
+                        layout.flex.row,
+                        layout.flex.alignCenter,
+                        { gap: 8, alignItems: "flex-start" },
+                    ], children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [
+                                r.sm,
+                                p[2],
+                                {
+                                    width: 82,
+                                    textAlign: "center",
+                                    backgroundColor: p.severity === "error"
+                                        ? "#7f1d1d"
+                                        : p.severity === "warning"
+                                            ? "#7c2d12"
+                                            : "#1e3a8a",
+                                    color: "white",
+                                    fontSize: 12,
+                                },
+                            ], children: p.severity }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [{ flex: 1 }, gap.all[1]], children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [text.white, { fontWeight: "600" }], children: p.code }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [text.gray[400], { fontSize: 14 }], children: p.message }), p.link && ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { onPress: () => p.link && react_native_1.Linking.openURL(p.link), children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
+                                            layout.flex.row,
+                                            layout.flex.alignCenter,
+                                            gap.all[2],
+                                        ], children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [{ color: "#3b82f6", fontSize: 14 }], children: "Learn More" }), (0, jsx_runtime_1.jsx)(lucide_react_native_1.ExternalLink, { size: 12, color: "#3b82f6" })] }) }))] })] }) }, p.message))), (0, jsx_runtime_1.jsx)(react_native_1.Pressable, { onPress: onIgnore, style: [
+                    bg.blue[600],
+                    r.md,
+                    p[3],
+                    layout.flex.center,
+                    { marginTop: 16 },
+                ], children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [text.white, { fontWeight: "600" }], children: "Ignore" }) })] }));
+};
+const ProblemsWrapper = ({ children, }) => {
+    const problems = (0, livestream_store_1.useLivestreamStore)((x) => x.problems);
+    const [dismiss, setDismiss] = (0, react_1.useState)(false);
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
+            { position: "relative", flex: 1 },
+            layout.flex.center,
+            { flexBasis: 0 },
+        ], children: [children, problems.length > 0 && !dismiss && ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
+                    {
+                        position: "absolute",
+                        top: 0,
+                        left: 0,
+                        right: 0,
+                        bottom: 0,
+                        backgroundColor: "rgba(0, 0, 0, 0.8)",
+                        zIndex: 100,
+                    },
+                    layout.flex.center,
+                    { justifyContent: "flex-start" },
+                    p[8],
+                ], children: (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
+                        bg.gray[900],
+                        borders.color.gray[700],
+                        borders.width.thin,
+                        r.lg,
+                        p[4],
+                        { maxWidth: 700, width: "100%" },
+                    ], children: (0, jsx_runtime_1.jsx)(Problems, { probs: problems, onIgnore: () => setDismiss(true) }) }) }))] }));
+};
+exports.ProblemsWrapper = ProblemsWrapper;
+exports.default = Problems;

package/dist/components/icons/bluesky-icon.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BlueskyIcon = BlueskyIcon;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_svg_1 = tslib_1.__importStar(require("react-native-svg"));
+function BlueskyIcon({ size = 20, color = "#000" }) {
+    return ((0, jsx_runtime_1.jsx)(react_native_svg_1.default, { width: size, height: size, viewBox: "0 0 600 530", fill: color, children: (0, jsx_runtime_1.jsx)(react_native_svg_1.Path, { d: "M136 44c66 50 138 151 164 205 26-54 98-155 164-205 48-36 126-64 126 25 0 18-10 149-16 170-21 74-96 93-163 81 117 20 147 86 82 153-122 125-176-32-189-72-3-8-4-11-4-8 0-3-1 0-4 8-13 40-67 197-189 72-65-67-35-133 82-153-67 12-142-7-163-81-6-21-16-152-16-170 0-89 78-61 126-25z" }) }));
+}

package/dist/components/keep-awake.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KeepAwake = KeepAwake;
+const jsx_runtime_1 = require("react/jsx-runtime");
+function KeepAwake() {
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
+}

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

@@ -0,0 +1,76 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Fullscreen = Fullscreen;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+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);
+    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) {
+            return;
+        }
+        (async () => {
+            if (fullscreen && !document.fullscreenElement) {
+                try {
+                    const div = divRef.current;
+                    if (typeof div.requestFullscreen === "function") {
+                        await div.requestFullscreen();
+                    }
+                    else if (videoRef.current) {
+                        if (typeof videoRef.current.webkitEnterFullscreen ===
+                            "function") {
+                            await videoRef.current.webkitEnterFullscreen();
+                        }
+                        else if (typeof videoRef.current.requestFullscreen === "function") {
+                            await videoRef.current.requestFullscreen();
+                        }
+                    }
+                    setFullscreen(true);
+                }
+                catch (e) {
+                    console.error("fullscreen failed", e.message);
+                }
+            }
+            if (!fullscreen) {
+                if (document.fullscreenElement) {
+                    try {
+                        await document.exitFullscreen();
+                    }
+                    catch (e) {
+                        console.error("fullscreen exit failed", e.message);
+                    }
+                }
+                setFullscreen(false);
+            }
+        })();
+    }, [fullscreen, protocol]);
+    (0, react_1.useEffect)(() => {
+        const listener = () => {
+            console.log("fullscreenchange", document.fullscreenElement);
+            setFullscreen(!!document.fullscreenElement);
+        };
+        document.body.addEventListener("fullscreenchange", listener);
+        document.body.addEventListener("webkitfullscreenchange", listener);
+        return () => {
+            document.body.removeEventListener("fullscreenchange", listener);
+            document.body.removeEventListener("webkitfullscreenchange", listener);
+        };
+    }, []);
+    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, { objectFit: props.objectFit, pictureInPictureEnabled: props.pictureInPictureEnabled }) }), props.children] }));
+}

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

@@ -0,0 +1,141 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Fullscreen = Fullscreen;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const react_native_edge_to_edge_1 = require("react-native-edge-to-edge");
+const react_native_safe_area_context_1 = require("react-native-safe-area-context");
+const __1 = require("../..");
+const video_native_1 = tslib_1.__importDefault(require("./video.native"));
+// Standard 16:9 video aspect ratio
+const VIDEO_ASPECT_RATIO = 16 / 9;
+function Fullscreen(props) {
+    const ref = (0, react_1.useRef)(null);
+    const insets = (0, react_native_safe_area_context_1.useSafeAreaInsets)();
+    const [dimensions, setDimensions] = (0, react_1.useState)(react_native_1.Dimensions.get("window"));
+    // Get state from player store
+    const protocol = (0, __1.usePlayerStore)((x) => x.protocol);
+    const fullscreen = (0, __1.usePlayerStore)((x) => x.fullscreen);
+    const setFullscreen = (0, __1.usePlayerStore)((x) => x.setFullscreen);
+    const handle = (0, __1.useLivestreamStore)((x) => x.profile?.handle);
+    const setSrc = (0, __1.usePlayerStore)((x) => x.setSrc);
+    (0, react_1.useEffect)(() => {
+        setSrc(props.src);
+    }, [props.src]);
+    // Re-calculate dimensions on orientation change
+    (0, react_1.useEffect)(() => {
+        const updateDimensions = () => {
+            setDimensions(react_native_1.Dimensions.get("window"));
+        };
+        const subscription = react_native_1.Dimensions.addEventListener("change", updateDimensions);
+        return () => {
+            subscription.remove();
+        };
+    }, []);
+    // Hide status bar when in fullscreen mode
+    (0, react_1.useEffect)(() => {
+        if (fullscreen) {
+            react_native_edge_to_edge_1.SystemBars.setHidden(true);
+            console.log("setting sidebar hidden");
+            // Handle hardware back button
+            const backHandler = react_native_1.BackHandler.addEventListener("hardwareBackPress", () => {
+                setFullscreen(false);
+                return true;
+            });
+            return () => {
+                backHandler.remove();
+            };
+        }
+        else {
+            react_native_edge_to_edge_1.SystemBars.setHidden(false);
+        }
+        return () => {
+            react_native_edge_to_edge_1.SystemBars.setHidden(false);
+        };
+    }, [fullscreen, setFullscreen]);
+    // Handle fullscreen state changes for native video players
+    (0, react_1.useEffect)(() => {
+        // For WebRTC, we handle fullscreen manually via the custom implementation
+        if (protocol === __1.PlayerProtocol.WEBRTC) {
+            return;
+        }
+        // For HLS and other protocols, sync with native fullscreen
+        if (ref.current) {
+            if (fullscreen) {
+                ref.current.enterFullscreen();
+            }
+            else {
+                ref.current.exitFullscreen();
+            }
+        }
+    }, [fullscreen, protocol]);
+    if (fullscreen && protocol === __1.PlayerProtocol.WEBRTC) {
+        // Determine if we're in landscape mode
+        const isLandscape = dimensions.width > dimensions.height;
+        // Calculate video container dimensions based on screen size and orientation
+        let videoWidth;
+        let videoHeight;
+        if (isLandscape) {
+            // In landscape, account for safe areas and use available height
+            const availableHeight = dimensions.height - (insets.top + insets.bottom);
+            const availableWidth = dimensions.width - (insets.left + insets.right);
+            videoHeight = availableHeight;
+            videoWidth = videoHeight * VIDEO_ASPECT_RATIO;
+            // If calculated width exceeds available width, constrain and maintain aspect ratio
+            if (videoWidth > availableWidth) {
+                videoWidth = availableWidth;
+                videoHeight = videoWidth / VIDEO_ASPECT_RATIO;
+            }
+        }
+        else {
+            // In portrait, account for safe areas
+            const availableWidth = dimensions.width - (insets.left + insets.right);
+            videoWidth = availableWidth;
+            videoHeight = videoWidth / VIDEO_ASPECT_RATIO;
+        }
+        // Calculate position to center the video, accounting for safe areas
+        const leftPosition = (dimensions.width - videoWidth) / 2;
+        const topPosition = (dimensions.height - videoHeight) / 2;
+        // When in custom fullscreen mode
+        return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
+                styles.fullscreenContainer,
+                {
+                    width: isLandscape ? dimensions.width + 40 : dimensions.width,
+                    height: dimensions.height,
+                },
+            ], children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
+                    styles.videoContainer,
+                    {
+                        width: isLandscape ? videoWidth + 40 : videoWidth,
+                        height: videoHeight,
+                        left: leftPosition,
+                        top: topPosition,
+                    },
+                ], children: [(0, jsx_runtime_1.jsx)(video_native_1.default, { objectFit: props.objectFit, pictureInPictureEnabled: props.pictureInPictureEnabled }), props.children] }) }));
+    }
+    // Normal non-fullscreen mode
+    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, { objectFit: props.objectFit, pictureInPictureEnabled: props.pictureInPictureEnabled }) }), props.children] }));
+}
+const styles = react_native_1.StyleSheet.create({
+    fullscreenContainer: {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        backgroundColor: "#000",
+        zIndex: 9999,
+        elevation: 9999,
+        margin: 0,
+        padding: 0,
+        justifyContent: "center",
+        alignItems: "center",
+    },
+    videoContainer: {
+        position: "absolute",
+        backgroundColor: "#111",
+        overflow: "hidden",
+    },
+});

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

@@ -0,0 +1,94 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PlayerUI = void 0;
+exports.Player = Player;
+exports.usePlayerStatus = usePlayerStatus;
+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 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 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)(() => {
+        setIngest(props.ingest ? "new" : null);
+    }, []);
+    if (typeof props.src !== "string") {
+        return ((0, jsx_runtime_1.jsx)(ui_1.View, { children: (0, jsx_runtime_1.jsx)(ui_1.Text, { children: "No source provided \uD83E\uDD37" }) }));
+    }
+    (0, react_1.useEffect)(() => {
+        return () => {
+            clearControlsTimeout();
+        };
+    }, []);
+    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, objectFit: props.objectFit, pictureInPictureEnabled: props.pictureInPictureEnabled, children: props.children })] }) }));
+}
+const POLL_INTERVAL = 5000;
+function usePlayerStatus() {
+    const playerStatus = (0, player_store_1.usePlayerStore)((x) => x.status);
+    const url = (0, streamplace_store_1.useStreamplaceStore)((x) => x.url);
+    const playerEvent = (0, player_store_1.usePlayerStore)((x) => x.playerEvent);
+    const [whatDoing, setWhatDoing] = (0, react_1.useState)(player_store_1.PlayerStatus.START);
+    const [whatDid, setWhatDid] = (0, react_1.useState)({});
+    const [doingSince, setDoingSince] = (0, react_1.useState)(Date.now());
+    const [lastUpdated, setLastUpdated] = (0, react_1.useState)(0);
+    const updateWhatDid = (now) => {
+        const prev = whatDid[whatDoing] ?? 0;
+        const duration = now.getTime() - doingSince;
+        const ret = {
+            ...whatDid,
+            [whatDoing]: prev + duration,
+        };
+        return ret;
+    };
+    // callback to update the status
+    (0, react_1.useEffect)(() => {
+        const now = new Date();
+        if (playerStatus !== whatDoing) {
+            setWhatDid(updateWhatDid(now));
+            setWhatDoing(playerStatus);
+            setDoingSince(now.getTime());
+        }
+    }, [playerStatus]);
+    (0, react_1.useEffect)(() => {
+        if (lastUpdated === 0) {
+            return;
+        }
+        const now = new Date();
+        const fullWhatDid = updateWhatDid(now);
+        setWhatDid({});
+        setDoingSince(now.getTime());
+        playerEvent(url, now.toISOString(), "aq-played", {
+            whatHappened: fullWhatDid,
+        });
+    }, [lastUpdated]);
+    (0, react_1.useEffect)(() => {
+        const interval = setInterval((_) => {
+            setLastUpdated(Date.now());
+        }, POLL_INTERVAL);
+        return () => clearInterval(interval);
+    }, []);
+    return [whatDoing];
+}

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

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.srcToUrl = srcToUrl;
+const react_1 = require("react");
+const __1 = require("../..");
+const protocolSuffixes = {
+    m3u8: __1.PlayerProtocol.HLS,
+    mp4: __1.PlayerProtocol.PROGRESSIVE_MP4,
+    webm: __1.PlayerProtocol.PROGRESSIVE_WEBM,
+    webrtc: __1.PlayerProtocol.WEBRTC,
+};
+function srcToUrl(props, protocol) {
+    const url = (0, __1.useStreamplaceStore)((x) => x.url);
+    return (0, react_1.useMemo)(() => {
+        if (props.src.startsWith("http://") || props.src.startsWith("https://")) {
+            const segments = props.src.split(/[./]/);
+            const suffix = segments[segments.length - 1];
+            if (protocolSuffixes[suffix]) {
+                return {
+                    url: props.src,
+                    protocol: protocolSuffixes[suffix],
+                };
+            }
+            else {
+                throw new Error(`unknown playback protocol: ${suffix}`);
+            }
+        }
+        let outUrl;
+        if (protocol === __1.PlayerProtocol.HLS) {
+            if (props.selectedRendition === "auto") {
+                outUrl = `${url}/api/playback/${props.src}/hls/index.m3u8`;
+            }
+            else {
+                outUrl = `${url}/api/playback/${props.src}/hls/index.m3u8?rendition=${props.selectedRendition || "source"}`;
+            }
+        }
+        else if (protocol === __1.PlayerProtocol.PROGRESSIVE_MP4) {
+            outUrl = `${url}/api/playback/${props.src}/stream.mp4`;
+        }
+        else if (protocol === __1.PlayerProtocol.PROGRESSIVE_WEBM) {
+            outUrl = `${url}/api/playback/${props.src}/stream.webm`;
+        }
+        else if (protocol === __1.PlayerProtocol.WEBRTC) {
+            outUrl = `${url}/api/playback/${props.src}/webrtc?rendition=${props.selectedRendition || "source"}`;
+        }
+        else {
+            throw new Error(`unknown playback protocol: ${protocol}`);
+        }
+        return {
+            protocol: protocol,
+            url: outUrl,
+        };
+    }, [props.src, props.selectedRendition, protocol, url]);
+}

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/countdown.js

@@ -0,0 +1,83 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CountdownOverlay = CountdownOverlay;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_native_reanimated_1 = tslib_1.__importStar(require("react-native-reanimated"));
+function CountdownOverlay({ visible, width, height, startFrom = 3, onDone, }) {
+    const [countdown, setCountdown] = (0, react_1.useState)(startFrom);
+    const startTimestamp = (0, react_native_reanimated_1.useSharedValue)(null);
+    const done = (0, react_native_reanimated_1.useSharedValue)(false);
+    // Animation values
+    const scale = (0, react_native_reanimated_1.useSharedValue)(1);
+    const opacity = (0, react_native_reanimated_1.useSharedValue)(1);
+    const updateCountdown = (value) => {
+        setCountdown(value);
+    };
+    const handleDone = () => {
+        if (onDone)
+            onDone();
+    };
+    // Accurate countdown using useFrameCallback
+    (0, react_native_reanimated_1.useFrameCallback)(({ timestamp }) => {
+        if (!visible)
+            return;
+        // Set start timestamp on first frame
+        if (startTimestamp.value === null) {
+            startTimestamp.value = timestamp;
+            return;
+        }
+        const elapsed = (timestamp - startTimestamp.value) / 1000; // Convert to seconds
+        const remaining = Math.max(0, startFrom - Math.floor(elapsed));
+        // Use runOnJS to call JavaScript functions from worklet
+        (0, react_native_reanimated_1.runOnJS)(updateCountdown)(remaining);
+        if (remaining === 0 && !done.value) {
+            done.value = true;
+            (0, react_native_reanimated_1.runOnJS)(handleDone)();
+        }
+    });
+    (0, react_1.useEffect)(() => {
+        if (visible) {
+            startTimestamp.value = null; // Will be set on first frame
+            setCountdown(startFrom);
+            done.value = false;
+        }
+        else {
+            setCountdown(startFrom);
+        }
+    }, [visible, startFrom]);
+    // Animate scale and opacity on countdown change
+    (0, react_1.useEffect)(() => {
+        if (visible && countdown > 0) {
+            scale.value = 1;
+            opacity.value = 1;
+            scale.value = (0, react_native_reanimated_1.withTiming)(1.5, { duration: 1000 });
+            opacity.value = (0, react_native_reanimated_1.withTiming)(0, { duration: 1000 });
+        }
+    }, [countdown, visible, scale, opacity]);
+    const animatedStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => ({
+        transform: [{ scale: scale.value }],
+        opacity: opacity.value,
+    }));
+    if (!visible || countdown === 0)
+        return null;
+    return ((0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: {
+            position: "absolute",
+            top: 0,
+            left: 0,
+            width,
+            height,
+            backgroundColor: "rgba(0,0,0,0.7)",
+            alignItems: "center",
+            justifyContent: "center",
+            zIndex: 1000,
+        }, children: (0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.Text, { style: [
+                {
+                    color: "white",
+                    fontSize: 120,
+                    fontWeight: "bold",
+                },
+                animatedStyle,
+            ], children: typeof countdown === "number" ? countdown : "" }) }));
+}

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

@@ -0,0 +1,12 @@
+"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);
+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);