@streamplace/components 0.7.13 → 0.7.15

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

@@ -1,94 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ModView = void 0;
-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 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] }) }), (0, jsx_runtime_1.jsx)(ReportButton, { message: message, setReportModalOpen: setReportModalOpen, setReportSubject: setReportSubject })] })] })) })] }));
-});
-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

@@ -1,19 +0,0 @@
-"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

@@ -1,38 +0,0 @@
-"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

@@ -1,80 +0,0 @@
-"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

@@ -1,14 +0,0 @@
-"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

@@ -1,234 +0,0 @@
-"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

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

package/dist/components/dashboard/problems.js

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