@streamplace/components 0.7.18 → 0.7.21

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

@@ -0,0 +1,112 @@
+"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");
+const react_1 = require("react");
+const atoms_1 = require("../../lib/theme/atoms");
+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";
+exports.ModView = (0, react_1.forwardRef)(() => {
+    const triggerRef = (0, react_1.useRef)(null);
+    const message = (0, player_store_1.usePlayerStore)((state) => state.modMessage);
+    let agent = (0, xrpc_1.usePDSAgent)();
+    let [messageRemoved, setMessageRemoved] = (0, react_1.useState)(false);
+    let { createBlock, isLoading: isBlockLoading } = (0, block_1.useCreateBlockRecord)();
+    let { createHideChat, isLoading: isHideLoading } = (0, block_1.useCreateHideChatRecord)();
+    const setReportModalOpen = (0, player_store_1.usePlayerStore)((x) => x.setReportModalOpen);
+    const setReportSubject = (0, player_store_1.usePlayerStore)((x) => x.setReportSubject);
+    const setModMessage = (0, player_store_1.usePlayerStore)((x) => x.setModMessage);
+    // get the channel did
+    const channelId = (0, player_store_1.usePlayerStore)((state) => state.src);
+    // get the logged in user's identity
+    const handle = (0, streamplace_store_1.useStreamplaceStore)((state) => state.handle);
+    if (!agent?.did) {
+        (0, jsx_runtime_1.jsx)(ui_1.View, { style: [ui_1.layout.flex.row, ui_1.layout.flex.alignCenter, atoms_1.gap.all[2]], children: (0, jsx_runtime_1.jsx)(ui_1.Text, { children: "Log in to submit mod actions" }) });
+    }
+    const cleanup = () => {
+        setModMessage(null);
+    };
+    (0, react_1.useEffect)(() => {
+        if (message) {
+            setMessageRemoved(false);
+            triggerRef.current?.open();
+        }
+        else {
+            triggerRef.current?.close();
+        }
+    }, [message]);
+    return ((0, jsx_runtime_1.jsxs)(ui_1.DropdownMenu, { style: [ui_1.layout.flex.row, ui_1.layout.flex.alignCenter, atoms_1.gap.all[2], atoms_1.w[80]], onOpenChange: (isOpen) => {
+            if (!isOpen) {
+                cleanup();
+            }
+        }, children: [(0, jsx_runtime_1.jsx)(ui_1.DropdownMenuTrigger, { ref: triggerRef, children: (0, jsx_runtime_1.jsx)(ui_1.View, {}) }), (0, jsx_runtime_1.jsx)(ui_1.ResponsiveDropdownMenuContent, { children: message && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ui_1.DropdownMenuGroup, { children: (0, jsx_runtime_1.jsx)(ui_1.DropdownMenuItem, { children: (0, jsx_runtime_1.jsx)(ui_1.View, { style: [
+                                        ui_1.layout.flex.column,
+                                        atoms_1.mr[5],
+                                        { gap: 6, maxWidth: "100%" },
+                                    ], children: (0, jsx_runtime_1.jsxs)(ui_1.Text, { style: {
+                                            fontVariant: ["tabular-nums"],
+                                            color: ui_1.atoms.colors.gray[300],
+                                        }, children: [new Date(message.record.createdAt).toLocaleTimeString([], {
+                                                hour: "2-digit",
+                                                minute: "2-digit",
+                                                hour12: false,
+                                            }), " ", "@", message.author.handle, ": ", message.record.text] }) }) }) }), channelId === handle && ((0, jsx_runtime_1.jsxs)(ui_1.DropdownMenuGroup, { title: `Moderation actions`, children: [(0, jsx_runtime_1.jsx)(ui_1.DropdownMenuItem, { disabled: isHideLoading || messageRemoved, onPress: () => {
+                                        if (isHideLoading || messageRemoved)
+                                            return;
+                                        createHideChat(message.uri)
+                                            .then((r) => setMessageRemoved(true))
+                                            .catch((e) => console.error(e));
+                                    }, children: (0, jsx_runtime_1.jsx)(ui_1.Text, { color: isHideLoading || messageRemoved ? "muted" : "destructive", children: isHideLoading
+                                            ? "Removing..."
+                                            : messageRemoved
+                                                ? "Message removed"
+                                                : "Remove this message" }) }), (0, jsx_runtime_1.jsx)(ui_1.DropdownMenuItem, { disabled: message.author.did === agent?.did || isBlockLoading, onPress: () => {
+                                        createBlock(message.author.did)
+                                            .then((r) => console.log(r))
+                                            .catch((e) => console.error(e));
+                                    }, children: message.author.did === agent?.did ? ((0, jsx_runtime_1.jsx)(ui_1.Text, { color: "muted", children: "Block yourself (you can't block yourself)" })) : ((0, jsx_runtime_1.jsx)(ui_1.Text, { color: "destructive", children: isBlockLoading
+                                            ? "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] }) }), 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: () => {
+            if (!message)
+                return;
+            onOpenChange?.(false);
+            setReportModalOpen(true);
+            setReportSubject({
+                $type: "com.atproto.repo.strongRef",
+                uri: message.uri,
+                cid: message.cid,
+                context: message,
+            });
+        }, children: (0, jsx_runtime_1.jsx)(ui_1.Text, { color: "warning", children: "Report chat..." }) }));
+}

package/dist/components/chat/system-message.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SystemMessage = SystemMessage;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_1 = require("react-native");
+const ui_1 = require("../../ui");
+const ui_2 = require("../ui");
+const text_1 = require("../ui/text");
+function SystemMessage({ title, timestamp }) {
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [ui_1.w.percent[100], ui_1.px[2], ui_1.pb[2]], children: [(0, jsx_runtime_1.jsx)(text_1.Code, { color: "muted", tracking: "widest", style: [ui_1.pl[12], ui_1.ml[1]], children: "SYSTEM MESSAGE" }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [ui_1.gap.all[2], ui_1.layout.flex.row], children: [(0, jsx_runtime_1.jsx)(text_1.Text, { style: {
+                            fontVariant: ["tabular-nums"],
+                            color: ui_2.atoms.colors.gray[300],
+                        }, children: timestamp.toLocaleTimeString([], {
+                            hour: "2-digit",
+                            minute: "2-digit",
+                            hour12: false,
+                        }) }), (0, jsx_runtime_1.jsx)(text_1.Text, { weight: "bold", color: "default", style: [ui_1.flex.shrink[1]], children: title })] })] }));
+}
+exports.default = SystemMessage;

package/dist/components/dashboard/chat-panel.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = ChatPanel;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_1 = require("react-native");
+const emoji_data_json_1 = tslib_1.__importDefault(require("../../assets/emoji-data.json"));
+const zero = tslib_1.__importStar(require("../../ui"));
+const chat_1 = require("../chat/chat");
+const chat_box_1 = require("../chat/chat-box");
+const { flex, bg, r, borders, p, px, py, text, layout } = zero;
+function ChatPanel({ isLive, isConnected, messagesPerMinute = 0, canModerate = false, shownMessages = 50, }) {
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
+            flex.values[1],
+            bg.neutral[900],
+            borders.width.thin,
+            borders.color.neutral[700],
+            layout.flex.column,
+            r.lg,
+        ], children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
+                    layout.flex.row,
+                    layout.flex.spaceBetween,
+                    layout.flex.alignCenter,
+                    borders.bottom.width.thin,
+                    borders.bottom.color.neutral[700],
+                    p[4],
+                ], children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [text.white, { fontSize: 18, fontWeight: "600" }], children: "Chat" }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [layout.flex.row, layout.flex.alignCenter], children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
+                                    { width: 6, height: 6, borderRadius: 3 },
+                                    isLive && isConnected ? bg.green[500] : bg.gray[500],
+                                ] }), (0, jsx_runtime_1.jsxs)(react_native_1.Text, { style: [text.gray[400], { fontSize: 12, marginLeft: 8 }], children: [messagesPerMinute, " msg/min"] })] })] }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [flex.values[1], px[2], { minHeight: 0 }], children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: [flex.values[1], { minHeight: 0 }], children: (0, jsx_runtime_1.jsx)(chat_1.Chat, { canModerate: canModerate, shownMessages: shownMessages }) }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [{ flexShrink: 0 }], children: (0, jsx_runtime_1.jsx)(chat_box_1.ChatBox, { emojiData: emoji_data_json_1.default, chatBoxStyle: [
+                                bg.gray[700],
+                                borders.width.thin,
+                                borders.color.gray[600],
+                                r.md,
+                                p[3],
+                                !isConnected && { opacity: 0.6 },
+                            ] }) })] })] }));
+}

package/dist/components/dashboard/header.js

@@ -0,0 +1,80 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = Header;
+const tslib_1 = require("tslib");
+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 zero = tslib_1.__importStar(require("../../ui"));
+const { bg, r, borders, px, py, text, layout, gap } = zero;
+function MetricItem({ icon: Icon, label, value, status }) {
+    const statusColors = {
+        good: text.green[400],
+        warning: text.yellow[400],
+        error: text.red[400],
+    };
+    const statusColor = status ? statusColors[status] : text.gray[300];
+    return ((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)(Icon, { size: 16, color: "#9ca3af" }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [layout.flex.column], children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [text.gray[400], { fontSize: 11, fontWeight: "500" }], children: label }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [statusColor, { fontSize: 13, fontWeight: "600" }], children: value })] })] }));
+}
+function StatusIndicator({ status, isLive }) {
+    const getStatusColor = () => {
+        if (!isLive)
+            return bg.gray[500];
+        switch (status) {
+            case "excellent":
+                return bg.green[500];
+            case "good":
+                return bg.yellow[500];
+            case "poor":
+                return bg.orange[500];
+            case "offline":
+                return bg.red[500];
+            default:
+                return bg.gray[500];
+        }
+    };
+    const getStatusText = () => {
+        if (!isLive)
+            return "OFFLINE";
+        switch (status) {
+            case "excellent":
+                return "EXCELLENT";
+            case "good":
+                return "GOOD";
+            case "poor":
+                return "POOR";
+            case "offline":
+                return "OFFLINE";
+            default:
+                return "UNKNOWN";
+        }
+    };
+    return ((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.View, { style: [
+                    { width: 8, height: 8, borderRadius: 4 },
+                    getStatusColor(),
+                    !isLive && { opacity: 0.6 },
+                ] }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [
+                    text.white,
+                    { fontSize: 12, fontWeight: "700", letterSpacing: 0.5 },
+                    !isLive && text.gray[400],
+                ], children: getStatusText() })] }));
+}
+function Header({ isLive, streamTitle = "Live Stream", viewers = 0, uptime = "00:00:00", bitrate = "0 mbps", timeBetweenSegments = 0, connectionStatus = "offline", }) {
+    const getConnectionQuality = () => {
+        if (timeBetweenSegments <= 1500)
+            return "good";
+        if (timeBetweenSegments <= 3000)
+            return "warning";
+        return "error";
+    };
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
+            px[4],
+            py[3],
+            r.lg,
+            layout.flex.row,
+            layout.flex.spaceBetween,
+            bg.neutral[900],
+            borders.width.thin,
+            borders.color.neutral[700],
+        ], children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: [layout.flex.row, layout.flex.alignCenter, gap.all[4]], children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [text.white, { fontSize: 18, fontWeight: "600" }], children: streamTitle }), (0, jsx_runtime_1.jsx)(StatusIndicator, { status: connectionStatus, isLive: isLive })] }) }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [layout.flex.row, layout.flex.alignCenter, gap.all[6]], children: [isLive && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(MetricItem, { icon: lucide_react_native_1.Users, label: "Viewers", value: viewers.toLocaleString() }), (0, jsx_runtime_1.jsx)(MetricItem, { icon: lucide_react_native_1.Car, label: "Bitrate", value: bitrate })] })), !isLive && ((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)(lucide_react_native_1.Radio, { size: 16, color: "#6b7280" }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [text.gray[400], { fontSize: 13 }], children: "Stream offline" })] }))] })] }));
+}

package/dist/components/dashboard/index.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Problems = exports.ModActions = exports.InformationWidget = exports.Header = exports.ChatPanel = void 0;
+const tslib_1 = require("tslib");
+var chat_panel_1 = require("./chat-panel");
+Object.defineProperty(exports, "ChatPanel", { enumerable: true, get: function () { return tslib_1.__importDefault(chat_panel_1).default; } });
+var header_1 = require("./header");
+Object.defineProperty(exports, "Header", { enumerable: true, get: function () { return tslib_1.__importDefault(header_1).default; } });
+var information_widget_1 = require("./information-widget");
+Object.defineProperty(exports, "InformationWidget", { enumerable: true, get: function () { return tslib_1.__importDefault(information_widget_1).default; } });
+var mod_actions_1 = require("./mod-actions");
+Object.defineProperty(exports, "ModActions", { enumerable: true, get: function () { return tslib_1.__importDefault(mod_actions_1).default; } });
+var problems_1 = require("./problems");
+Object.defineProperty(exports, "Problems", { enumerable: true, get: function () { return tslib_1.__importDefault(problems_1).default; } });

package/dist/components/dashboard/information-widget.js

@@ -0,0 +1,234 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = InformationWidget;
+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 = tslib_1.__importStar(require("react"));
+const react_native_1 = require("react-native");
+const react_native_svg_1 = tslib_1.__importStar(require("react-native-svg"));
+const livestream_store_1 = require("../../livestream-store");
+const zero = tslib_1.__importStar(require("../../ui"));
+const ui_1 = require("../ui");
+const BITRATE_HISTORY_LENGTH = 30;
+const { bg, r, borders, px, py, text, layout, gap, flex, p } = zero;
+function InformationWidget({ embedMode = false, wideMode, // Optional override
+showChart = true, }) {
+    const [bitrateHistory, setBitrateHistory] = (0, react_1.useState)(Array.from({ length: BITRATE_HISTORY_LENGTH }, () => 0));
+    const [showViewers, setShowViewers] = (0, react_1.useState)(false);
+    const [componentWidth, setComponentWidth] = (0, react_1.useState)(220);
+    const [componentHeight, setComponentHeight] = (0, react_1.useState)(400);
+    const [streamStartTime, setStreamStartTime] = (0, react_1.useState)(null);
+    const [layoutMeasured, setLayoutMeasured] = (0, react_1.useState)(false);
+    const isWideMode = wideMode !== undefined ? wideMode : layoutMeasured && componentWidth > 400;
+    const isCompactHeight = layoutMeasured && componentHeight < 350;
+    const seg = (0, livestream_store_1.useSegment)();
+    const livestream = (0, livestream_store_1.useLivestreamStore)((x) => x.livestream);
+    const viewers = (0, livestream_store_1.useViewers)();
+    const getBitrate = (0, react_1.useCallback)(() => {
+        if (!seg?.size || !seg?.duration)
+            return 0;
+        const kbps = (seg.size * 8) / ((seg.duration || 1000000000) / 1000000000) / 1000;
+        return kbps;
+    }, [seg?.size, seg?.duration]);
+    const getMediaInfo = (0, react_1.useMemo)(() => {
+        const videoTrack = seg?.video?.[0];
+        const audioTrack = seg?.audio?.[0];
+        return {
+            resolution: videoTrack?.width && videoTrack?.height
+                ? `${videoTrack.width}x${videoTrack.height}`
+                : "Unknown",
+            fps: videoTrack?.framerate
+                ? `${(videoTrack.framerate.num / videoTrack.framerate.den).toFixed(2)} FPS`
+                : "Unknown",
+            videoCodec: videoTrack?.codec
+                ? videoTrack.codec.toUpperCase()
+                : "Unknown",
+        };
+    }, [seg?.video, seg?.audio]);
+    const currentBitrate = getBitrate();
+    (0, react_1.useEffect)(() => {
+        setBitrateHistory((prev) => [...prev.slice(1), currentBitrate]);
+    }, [currentBitrate]);
+    (0, react_1.useEffect)(() => {
+        if (seg?.startTime && !streamStartTime) {
+            setStreamStartTime(new Date(seg.startTime));
+        }
+    }, [seg?.startTime, streamStartTime]);
+    const getBitrateStatus = () => {
+        if (currentBitrate > 2000)
+            return "good";
+        if (currentBitrate > 1000)
+            return "warning";
+        if (currentBitrate > 0)
+            return "error";
+        return "neutral";
+    };
+    const getConnectionStatus = () => {
+        if (!seg)
+            return "error";
+        if (currentBitrate > 1500)
+            return "good";
+        if (currentBitrate > 500)
+            return "warning";
+        return "error";
+    };
+    const avgBitrate = bitrateHistory.length > 0
+        ? bitrateHistory.reduce((a, b) => a + b, 0) / bitrateHistory.length
+        : 0;
+    const peakBitrate = Math.max(...bitrateHistory, 0);
+    const uptimeMinutes = streamStartTime
+        ? Math.floor((Date.now() - streamStartTime.getTime()) / 60000)
+        : 0;
+    const estimatedLatency = seg?.duration
+        ? Math.floor((seg.duration / 1000000000) * 2)
+        : 0;
+    const displayBitrate = `${(currentBitrate / 1000).toFixed(2)} Mbps`;
+    const displayResolution = getMediaInfo.resolution;
+    const displayFps = getMediaInfo.fps;
+    const streamTitle = livestream?.record?.title || "Untitled Stream";
+    const viewerCount = viewers ?? 0;
+    const handleLayout = (0, react_1.useCallback)((event) => {
+        const { width, height } = event.nativeEvent.layout;
+        console.log("InformationWidget onLayout - size:", `${width}x${height}`);
+        if (width > 0 && height > 0) {
+            setComponentWidth(width);
+            setComponentHeight(height);
+            setLayoutMeasured(true);
+        }
+    }, []);
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { onLayout: handleLayout, style: [
+            embedMode
+                ? { backgroundColor: "rgba(23, 23, 23, 0.9)" }
+                : bg.neutral[900],
+            embedMode ? undefined : borders.width.thin,
+            embedMode ? undefined : borders.color.neutral[700],
+            r.lg,
+            px[4],
+            py[4],
+            gap.all[6],
+            flex.values[1],
+            {
+                minWidth: isWideMode ? 500 : 220,
+                width: "100%",
+            },
+        ], children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
+                    layout.flex.row,
+                    layout.flex.spaceBetween,
+                    layout.flex.alignCenter,
+                ], children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [layout.flex.row, layout.flex.alignCenter, gap.all[1]], children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [text.white, { fontSize: 18, fontWeight: "700" }], numberOfLines: 1, children: "Stream Health" }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
+                                    {
+                                        width: 8,
+                                        height: 8,
+                                        borderRadius: 4,
+                                        backgroundColor: getConnectionStatus() === "good"
+                                            ? "#22c55e"
+                                            : getConnectionStatus() === "warning"
+                                                ? "#f59e0b"
+                                                : "#ef4444",
+                                    },
+                                ] })] }), (0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { onPress: () => setShowViewers(!showViewers), style: [
+                            layout.flex.column,
+                            layout.flex.alignCenter,
+                            gap.all[1],
+                            { minWidth: 120 },
+                        ], children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [layout.flex.row, layout.flex.alignCenter, gap.all[2]], children: [showViewers ? ((0, jsx_runtime_1.jsx)(lucide_react_native_1.Eye, { size: 14, color: "#9ca3af" })) : ((0, jsx_runtime_1.jsx)(lucide_react_native_1.EyeClosed, { size: 14, color: "#9ca3af" })), (0, jsx_runtime_1.jsxs)(react_native_1.Text, { style: [
+                                        text.white,
+                                        { fontSize: 16, fontWeight: "600", textAlign: "center" },
+                                    ], children: [showViewers ? `${viewerCount}` : "...", " viewer", showViewers && viewerCount !== 1 ? "s" : ""] })] }) })] }), isWideMode ? ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [gap.all[3]], children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [layout.flex.row, gap.all[2]], children: [(0, jsx_runtime_1.jsx)(ui_1.InfoBox, { icon: lucide_react_native_1.Car, label: "Bitrate", value: displayBitrate, status: getBitrateStatus() }), (0, jsx_runtime_1.jsx)(ui_1.InfoBox, { icon: lucide_react_native_1.Monitor, label: "Resolution", value: displayResolution }), (0, jsx_runtime_1.jsx)(ui_1.InfoBox, { icon: lucide_react_native_1.Video, label: "FPS", value: displayFps })] }), showChart && ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [gap.all[2]], children: [!isCompactHeight && ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
+                                    layout.flex.row,
+                                    layout.flex.spaceBetween,
+                                    layout.flex.alignCenter,
+                                ], children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [
+                                            text.gray[200],
+                                            { fontSize: 14, fontWeight: "600" },
+                                        ], children: "Live Performance" }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [layout.flex.row, gap.all[4]], children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [layout.flex.alignCenter], children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [
+                                                            text.gray[400],
+                                                            { fontSize: 11, fontWeight: "500" },
+                                                        ], children: "AVG" }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [
+                                                            text.white,
+                                                            { fontSize: 13, fontWeight: "600" },
+                                                        ], children: avgBitrate > 0
+                                                            ? `${(avgBitrate / 1000).toFixed(1)}M`
+                                                            : "0M" })] }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [layout.flex.alignCenter], children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [
+                                                            text.gray[400],
+                                                            { fontSize: 11, fontWeight: "500" },
+                                                        ], children: "PEAK" }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [
+                                                            text.white,
+                                                            { fontSize: 13, fontWeight: "600" },
+                                                        ], children: peakBitrate > 0
+                                                            ? `${(peakBitrate / 1000).toFixed(1)}M`
+                                                            : "0M" })] }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [layout.flex.alignCenter], children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [
+                                                            text.gray[400],
+                                                            { fontSize: 11, fontWeight: "500" },
+                                                        ], children: "CAPTURED" }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [
+                                                            text.white,
+                                                            { fontSize: 13, fontWeight: "600" },
+                                                        ], children: uptimeMinutes > 60
+                                                            ? `${Math.floor(uptimeMinutes / 60)}h ${uptimeMinutes % 60}m`
+                                                            : `${uptimeMinutes}m` })] })] })] })), (0, jsx_runtime_1.jsx)(BitrateChart, { data: bitrateHistory, width: componentWidth - 40, height: 120 })] }))] })) : ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [gap.all[3]], children: [!isCompactHeight && ((0, jsx_runtime_1.jsxs)(react_native_1.TouchableOpacity, { onPress: () => setShowViewers(!showViewers), style: [
+                            layout.flex.row,
+                            layout.flex.spaceBetween,
+                            layout.flex.alignCenter,
+                            py[2],
+                        ], children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [layout.flex.row, layout.flex.alignCenter, gap.all[3]], children: [(0, jsx_runtime_1.jsx)(lucide_react_native_1.Eye, { size: 16, color: "#9ca3af" }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [text.gray[300], { fontSize: 13, fontWeight: "500" }], children: "Viewers" })] }), (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: [
+                                            showViewers ? text.green[400] : text.white,
+                                            { fontSize: 13, fontWeight: "600" },
+                                        ], children: showViewers ? `${viewerCount} watching` : "•••" }), showViewers ? ((0, jsx_runtime_1.jsx)(lucide_react_native_1.ChevronUp, { size: 14, color: "#9ca3af" })) : ((0, jsx_runtime_1.jsx)(lucide_react_native_1.ChevronDown, { size: 14, color: "#9ca3af" }))] })] })), showChart && ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [gap.all[2]], children: [!isCompactHeight && ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
+                                    layout.flex.row,
+                                    layout.flex.spaceBetween,
+                                    layout.flex.alignCenter,
+                                ], children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [
+                                            text.gray[200],
+                                            { fontSize: 14, fontWeight: "600" },
+                                        ], children: "Performance" }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [
+                                            text.gray[400],
+                                            { fontSize: 11, fontWeight: "500" },
+                                        ], children: avgBitrate > 0
+                                            ? `AVG ${(avgBitrate / 1000).toFixed(1)}M`
+                                            : "No data" })] })), (0, jsx_runtime_1.jsx)(BitrateChart, { data: bitrateHistory, width: componentWidth - 40, height: isCompactHeight ? 80 : 120 })] })), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [gap.all[1]], children: [(0, jsx_runtime_1.jsx)(ui_1.InfoRow, { icon: lucide_react_native_1.Signal, label: "Connection", value: getConnectionStatus() === "good"
+                                    ? "Excellent"
+                                    : getConnectionStatus() === "warning"
+                                        ? "Good"
+                                        : "Poor", status: getConnectionStatus() }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [gap.all[1], layout.flex.row], children: [(0, jsx_runtime_1.jsx)(ui_1.InfoBox, { icon: lucide_react_native_1.Zap, label: "Bitrate", value: displayBitrate, status: getBitrateStatus() }), (0, jsx_runtime_1.jsx)(ui_1.InfoBox, { icon: lucide_react_native_1.Video, label: "FPS", value: displayFps })] })] })] }))] }));
+}
+function BitrateChart({ data, width, height, }) {
+    const maxDataValue = Math.max(...data, 1);
+    const minDataValue = Math.min(...data);
+    const getSmartRange = (max) => {
+        if (max <= 1000)
+            return { min: 0, max: 1000, step: 500 };
+        if (max <= 2000)
+            return { min: 1000, max: 2000, step: 1000 };
+        if (max <= 7000)
+            return { min: 4000, max: 7000, step: 1500 };
+        if (max <= 10000)
+            return { min: 4000, max: 10000, step: 5000 };
+        const roundedMax = Math.ceil(max / 5000) * 5000;
+        return { min: 0, max: roundedMax, step: roundedMax / 2 };
+    };
+    const { min: minValue, max: maxValue, step } = getSmartRange(maxDataValue);
+    const range = maxValue - minValue;
+    const chartWidth = width - 40;
+    const chartStartX = 40;
+    const verticalPadding = 10;
+    const chartHeight = height - verticalPadding * 2;
+    const points = data
+        .map((value, index) => {
+        const x = chartStartX + (index / (data.length - 1)) * chartWidth;
+        // Clamp value to chart range and plot against the smart scale
+        const clampedValue = Math.max(minValue, Math.min(maxValue, value));
+        const y = verticalPadding +
+            chartHeight -
+            ((clampedValue - minValue) / range) * chartHeight;
+        return `${x},${y}`;
+    })
+        .join(" ");
+    const pathData = `M ${points.replace(/ /g, " L ")}`;
+    const ticks = [
+        { value: minValue, y: height - verticalPadding },
+        { value: minValue + step, y: height / 2 },
+        { value: maxValue, y: verticalPadding },
+    ];
+    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: { height, width, marginVertical: 8 }, children: (0, jsx_runtime_1.jsxs)(react_native_svg_1.default, { width: width, height: height, children: [ticks.map((tick, index) => ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_native_svg_1.Line, { x1: chartStartX, y1: tick.y, x2: width, y2: tick.y, stroke: "rgba(255,255,255,0.1)", strokeWidth: "1" }), (0, jsx_runtime_1.jsx)(react_native_svg_1.Text, { x: "35", y: tick.y + 4, fontSize: 10, fontFamily: "sans-serif", fill: "#9ca3af", textAnchor: "end", children: (tick.value / 1000).toLocaleString() })] }, index))), (0, jsx_runtime_1.jsx)(react_native_svg_1.Text, { x: 12, y: height / 2, transform: `rotate(-90, 12, ${height / 2})`, fontSize: 10, fontFamily: "sans-serif", fill: "#9ca3af", textAnchor: "middle", children: "mbits/s" }), (0, jsx_runtime_1.jsx)(react_native_svg_1.Path, { d: pathData, stroke: "#22c55e", strokeWidth: "2", fill: "none", strokeLinecap: "round", strokeLinejoin: "round" })] }) }));
+}

package/dist/components/dashboard/mod-actions.js

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = ModActions;
+const tslib_1 = require("tslib");
+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 zero = tslib_1.__importStar(require("../../ui"));
+const { flex, bg, r, borders, p, text, layout, gap, mb } = zero;
+const defaultActions = [
+    {
+        icon: lucide_react_native_1.Shield,
+        label: "Ban User",
+        color: "red",
+        action: () => console.log("Ban user action"),
+    },
+    {
+        icon: lucide_react_native_1.MessageCircle,
+        label: "Timeout",
+        color: "yellow",
+        action: () => console.log("Timeout user action"),
+    },
+    {
+        icon: lucide_react_native_1.Eye,
+        label: "Monitor",
+        color: "blue",
+        action: () => console.log("Monitor stream action"),
+    },
+    {
+        icon: lucide_react_native_1.AlertTriangle,
+        label: "Report",
+        color: "orange",
+        action: () => console.log("Report content action"),
+    },
+];
+function ModActions({ isLive, isConnected, messageCount = 0, actions = defaultActions, }) {
+    const canModerate = isLive && isConnected;
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
+            flex.values[1],
+            bg.gray[800],
+            r[3],
+            borders.width.thin,
+            borders.color.gray[700],
+            p[4],
+        ], children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
+                    layout.flex.row,
+                    layout.flex.spaceBetween,
+                    layout.flex.alignCenter,
+                    mb[4],
+                ], children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [text.white, { fontSize: 18, fontWeight: "600" }], children: "Moderation" }), (0, jsx_runtime_1.jsxs)(react_native_1.Text, { style: [text.gray[400], { fontSize: 12 }], children: [messageCount, " messages"] })] }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [layout.flex.row, gap.all[3]], children: actions.map((action, index) => ((0, jsx_runtime_1.jsxs)(react_native_1.Pressable, { style: [
+                        flex.grow[1],
+                        bg.gray[700],
+                        r[2],
+                        p[3],
+                        layout.flex.row,
+                        layout.flex.alignCenter,
+                        gap.all[2],
+                        borders.width.thin,
+                        borders.color.gray[600],
+                    ], disabled: !canModerate, onPress: action.action, children: [(0, jsx_runtime_1.jsx)(action.icon, { size: 20, color: canModerate ? "#ffffff" : "#6b7280" }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [
+                                canModerate ? text.white : text.gray[400],
+                                { fontSize: 14, fontWeight: "500" },
+                            ], children: action.label })] }, index))) }), !canModerate && ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [
+                    text.gray[500],
+                    { fontSize: 12, textAlign: "center", marginTop: 16 },
+                ], children: !isLive
+                    ? "Moderation tools available when live"
+                    : !isConnected
+                        ? "Waiting for stream connection..."
+                        : "Moderation tools unavailable" }))] }));
+}