@streamplace/components 0.7.18 → 0.7.21

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

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InputPanel = InputPanel;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_1 = require("react-native");
+const hooks_1 = require("../../../hooks");
+const atoms = tslib_1.__importStar(require("../../../lib/theme/atoms"));
+const ui_1 = require("../../ui");
+const { gap, h, layout, mt, p, position, px, py, sizes, w } = atoms;
+function InputPanel({ title, setTitle, ingestStarting, toggleGoLive, }) {
+    const { slideKeyboard } = (0, hooks_1.useKeyboardSlide)();
+    return ((0, jsx_runtime_1.jsx)(ui_1.View, { style: [
+            layout.position.absolute,
+            h.percent[30],
+            position.bottom[0],
+            w.percent[100],
+            layout.flex.center,
+            { transform: [{ translateY: slideKeyboard }] },
+        ], children: (0, jsx_runtime_1.jsxs)(ui_1.View, { style: [
+                layout.flex.column,
+                gap.all[2],
+                sizes.maxWidth[80],
+                { padding: 10 },
+            ], children: [(0, jsx_runtime_1.jsx)(ui_1.View, { backgroundColor: "rgba(64,64,64,0.8)", borderRadius: 12, children: (0, jsx_runtime_1.jsx)(ui_1.Input, { value: title, onChange: setTitle, placeholder: "Enter stream title", onEndEditing: react_native_1.Keyboard.dismiss }) }), ingestStarting ? ((0, jsx_runtime_1.jsx)(ui_1.Text, { children: "Starting your stream..." })) : ((0, jsx_runtime_1.jsxs)(ui_1.View, { style: [layout.flex.center], children: [(0, jsx_runtime_1.jsxs)(react_native_1.Pressable, { onPress: toggleGoLive, style: [
+                                px[4],
+                                py[2],
+                                layout.flex.row,
+                                layout.flex.center,
+                                gap.all[1],
+                                {
+                                    backgroundColor: "rgba(64,64,64, 0.8)",
+                                    borderRadius: 12,
+                                },
+                            ], children: [(0, jsx_runtime_1.jsx)(ui_1.View, { style: [
+                                        p[2],
+                                        {
+                                            backgroundColor: "rgba(256,0,0, 0.8)",
+                                            borderRadius: 12,
+                                        },
+                                    ] }), (0, jsx_runtime_1.jsx)(ui_1.Text, { center: true, children: "Go Live" })] }), (0, jsx_runtime_1.jsx)(ui_1.Text, { color: "muted", size: "xs", style: [mt[2]], children: "We'll announce that you're live on Bluesky." })] }))] }) }));
+}

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

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MetricsPanel = MetricsPanel;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const lucide_react_native_1 = require("lucide-react-native");
+const useSegmentTiming_1 = require("../../../hooks/useSegmentTiming");
+const atoms = tslib_1.__importStar(require("../../../lib/theme/atoms"));
+const ui_1 = require("../../ui");
+function MetricsPanel({ showMetrics }) {
+    const { connectionQuality, segmentDeltas, mean, range } = (0, useSegmentTiming_1.useSegmentTiming)();
+    let icon = (0, jsx_runtime_1.jsx)(lucide_react_native_1.CircleX, { color: "#d44" });
+    let color = "#d44";
+    if (connectionQuality === "good") {
+        icon = (0, jsx_runtime_1.jsx)(lucide_react_native_1.CircleCheck, { color: "#4d4" });
+        color = "#4d4";
+    }
+    else if (connectionQuality === "degraded") {
+        icon = (0, jsx_runtime_1.jsx)(lucide_react_native_1.AlertCircle, { color: "#aa4" });
+        color = "#aa4";
+    }
+    else {
+        icon = (0, jsx_runtime_1.jsx)(lucide_react_native_1.CircleX, { color: "#d44" });
+        color = "#d44";
+    }
+    return ((0, jsx_runtime_1.jsxs)(ui_1.View, { style: {
+            alignItems: "center",
+            gap: 8,
+        }, children: [(0, jsx_runtime_1.jsxs)(ui_1.View, { style: {
+                    flexDirection: "row",
+                    alignItems: "center",
+                    padding: 10,
+                    backgroundColor: "rgba(0, 0, 0, 0.5)",
+                    borderRadius: 8,
+                    gap: 4,
+                }, children: [icon, (0, jsx_runtime_1.jsx)(ui_1.Text, { style: [
+                            atoms.pt[0],
+                            {
+                                color,
+                            },
+                        ], children: connectionQuality.toUpperCase() })] }), showMetrics && ((0, jsx_runtime_1.jsxs)(ui_1.View, { children: [(0, jsx_runtime_1.jsxs)(ui_1.Text, { children: ["last \u0394:", " ", segmentDeltas.length > 0
+                                ? segmentDeltas[segmentDeltas.length - 1]
+                                : "—"] }), (0, jsx_runtime_1.jsxs)(ui_1.Text, { children: ["mean: ", mean] }), (0, jsx_runtime_1.jsxs)(ui_1.Text, { children: ["range: ", range] })] }))] }));
+}

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

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

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

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

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

@@ -0,0 +1,104 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LoadingOverlay = LoadingOverlay;
+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"));
+const atoms_1 = require("../../../lib/theme/atoms");
+const defaultMessages = [
+    "Creating the stream",
+    "Uploading thumbnails",
+    "Getting things ready",
+    "Doing some magic",
+    "Preparing something special",
+    "Reticulating splines",
+    "Making it nice",
+    "Flipping some switches",
+    "Adding good vibes",
+    "Almost there",
+    "Summoning your Persona",
+    "Awakening our true selves",
+    "Fusion in progress",
+    "Equipping the right materia",
+];
+function LoadingOverlay({ visible, width, height, subtitle, messages = defaultMessages, interval = 3000, }) {
+    const [currentIndex, setCurrentIndex] = (0, react_1.useState)(0);
+    const [shouldRender, setShouldRender] = (0, react_1.useState)(visible);
+    // Animation values
+    const translateY = (0, react_native_reanimated_1.useSharedValue)(0);
+    const opacity = (0, react_native_reanimated_1.useSharedValue)(1);
+    const wholeOpacity = (0, react_native_reanimated_1.useSharedValue)(0);
+    // Handle fade-in and fade-out animations
+    (0, react_1.useEffect)(() => {
+        if (visible) {
+            setShouldRender(true); // Ensure the component is mounted
+            wholeOpacity.value = (0, react_native_reanimated_1.withTiming)(1, { duration: 500 }); // Fade in
+        }
+        else {
+            wholeOpacity.value = (0, react_native_reanimated_1.withTiming)(0, { duration: 500 }, () => {
+                // Unmount after fade-out
+                (0, react_native_reanimated_1.runOnJS)(setShouldRender)(false);
+            });
+        }
+    }, [visible]);
+    // Cycle messages on a timer
+    (0, react_1.useEffect)(() => {
+        if (!visible) {
+            setCurrentIndex(0);
+            return;
+        }
+        const timeout = setTimeout(() => {
+            setCurrentIndex((prev) => (prev + 1) % messages.length);
+        }, interval);
+        return () => clearTimeout(timeout);
+    }, [visible, currentIndex, interval, messages.length]);
+    // Trigger animation on each message change
+    (0, react_1.useEffect)(() => {
+        if (!visible)
+            return;
+        const fadeDuration = Math.min(interval / 2, 250); // Simplified fade duration
+        // Reset animation values
+        translateY.value = 20;
+        opacity.value = 0;
+        // Sequential fade-in and fade-out
+        translateY.value = (0, react_native_reanimated_1.withTiming)(0, { duration: fadeDuration });
+        opacity.value = (0, react_native_reanimated_1.withTiming)(1, { duration: fadeDuration }, () => {
+            // add a delay for interval - (fadeDuration*2)
+            translateY.value = (0, react_native_reanimated_1.withDelay)(interval - fadeDuration * 2, (0, react_native_reanimated_1.withTiming)(-10, { duration: fadeDuration }));
+            opacity.value = (0, react_native_reanimated_1.withDelay)(interval - fadeDuration * 2, (0, react_native_reanimated_1.withTiming)(0, { duration: fadeDuration }));
+        });
+    }, [currentIndex, visible]);
+    const animatedStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => {
+        return {
+            transform: [{ translateY: translateY.value }],
+            opacity: opacity.value,
+        };
+    });
+    const wholeAnimatedStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => ({
+        opacity: wholeOpacity.value,
+    }));
+    if (!shouldRender)
+        return null;
+    return ((0, jsx_runtime_1.jsxs)(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,
+            },
+            wholeAnimatedStyle,
+        ], children: [(0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.Text, { style: [
+                    {
+                        color: "white",
+                        fontSize: 24,
+                        fontWeight: "bold",
+                    },
+                    animatedStyle,
+                ], children: messages[currentIndex] }), (0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.Text, { style: [atoms_1.pt[5], { color: "#a0a0a0" }], children: subtitle })] }));
+}

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

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ContextMenu = ContextMenu;
+exports.ReportButton = ReportButton;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const dropdown_menu_1 = require("@rn-primitives/dropdown-menu");
+const lucide_react_native_1 = require("lucide-react-native");
+const react_native_1 = require("react-native");
+const theme_1 = require("../../../lib/theme");
+const livestream_store_1 = require("../../../livestream-store");
+const player_store_1 = require("../../../player-store/");
+const ui_1 = require("../../ui");
+function ContextMenu({ dropdownPortalContainer, }) {
+    const quality = (0, player_store_1.usePlayerStore)((x) => x.selectedRendition);
+    const setQuality = (0, player_store_1.usePlayerStore)((x) => x.setSelectedRendition);
+    const qualities = (0, livestream_store_1.useLivestreamStore)((x) => x.renditions);
+    const protocol = (0, player_store_1.usePlayerStore)((x) => x.protocol);
+    const setProtocol = (0, player_store_1.usePlayerStore)((x) => x.setProtocol);
+    const debugInfo = (0, player_store_1.usePlayerStore)((x) => x.showDebugInfo);
+    const setShowDebugInfo = (0, player_store_1.usePlayerStore)((x) => x.setShowDebugInfo);
+    const livestream = (0, livestream_store_1.useLivestreamStore)((x) => x.livestream);
+    const setReportModalOpen = (0, player_store_1.usePlayerStore)((x) => x.setReportModalOpen);
+    const setReportSubject = (0, player_store_1.usePlayerStore)((x) => x.setReportSubject);
+    const lowLatency = protocol === "webrtc";
+    const setLowLatency = (value) => {
+        setProtocol(value ? player_store_1.PlayerProtocol.WEBRTC : player_store_1.PlayerProtocol.HLS);
+    };
+    // are we on mobile? then do dropdowns
+    const isMobile = react_native_1.Platform.OS === "ios" || react_native_1.Platform.OS === "android";
+    // dummy portal for mobile
+    const Portal = isMobile ? react_native_1.View : ui_1.DropdownMenuPortal;
+    // render the responsive version on mobile as we can't fullscreen there
+    const DropdownMenuContent = isMobile
+        ? ui_1.ResponsiveDropdownMenuContent
+        : ui_1.DropdownMenuContentWithoutPortal;
+    return ((0, jsx_runtime_1.jsxs)(ui_1.DropdownMenu, { children: [(0, jsx_runtime_1.jsx)(ui_1.DropdownMenuTrigger, { children: (0, jsx_runtime_1.jsx)(lucide_react_native_1.Settings, { color: theme_1.colors.gray[200] }) }), (0, jsx_runtime_1.jsx)(Portal, { container: dropdownPortalContainer, children: (0, jsx_runtime_1.jsxs)(DropdownMenuContent, { side: "top", align: "end", children: [(0, jsx_runtime_1.jsx)(ui_1.DropdownMenuGroup, { title: "Resolution", children: (0, jsx_runtime_1.jsxs)(ui_1.DropdownMenuRadioGroup, { value: quality, onValueChange: setQuality, children: [(0, jsx_runtime_1.jsx)(ui_1.DropdownMenuRadioItem, { value: "source", children: (0, jsx_runtime_1.jsx)(ui_1.Text, { children: "Source (Original Quality)" }) }), qualities.map((r) => ((0, jsx_runtime_1.jsx)(ui_1.DropdownMenuRadioItem, { value: r.name, children: (0, jsx_runtime_1.jsx)(ui_1.Text, { children: r.name }) })))] }) }), (0, jsx_runtime_1.jsx)(ui_1.DropdownMenuGroup, { title: "Advanced", children: (0, jsx_runtime_1.jsx)(ui_1.DropdownMenuCheckboxItem, { checked: lowLatency, onCheckedChange: () => setLowLatency(!lowLatency), children: (0, jsx_runtime_1.jsx)(ui_1.Text, { children: "Low Latency" }) }) }), (0, jsx_runtime_1.jsx)(ui_1.DropdownMenuInfo, { description: "Reduces the delay between video and chat for a more real-time experience." }), (0, jsx_runtime_1.jsx)(ui_1.DropdownMenuGroup, { children: (0, jsx_runtime_1.jsx)(ui_1.DropdownMenuCheckboxItem, { checked: debugInfo, onCheckedChange: () => setShowDebugInfo(!debugInfo), children: (0, jsx_runtime_1.jsx)(ui_1.Text, { children: "Show Debug Info" }) }) }), (0, jsx_runtime_1.jsx)(ui_1.DropdownMenuGroup, { title: "Report", children: (0, jsx_runtime_1.jsx)(ReportButton, { livestream: livestream, setReportModalOpen: setReportModalOpen, setReportSubject: setReportSubject }) })] }) })] }));
+}
+function ReportButton({ livestream, setReportModalOpen, setReportSubject, }) {
+    const { onOpenChange } = (0, dropdown_menu_1.useRootContext)();
+    return ((0, jsx_runtime_1.jsx)(ui_1.DropdownMenuItem, { onPress: () => {
+            if (!livestream)
+                return;
+            onOpenChange?.(false);
+            setReportModalOpen(true);
+            setReportSubject({
+                $type: "com.atproto.repo.strongRef",
+                uri: livestream.uri,
+                cid: livestream.cid,
+            });
+        }, children: (0, jsx_runtime_1.jsx)(ui_1.Text, { children: "Report Livestream..." }) }));
+}

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

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

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

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Viewers = Viewers;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const lucide_react_native_1 = require("lucide-react-native");
+const atoms = tslib_1.__importStar(require("../../../lib/theme/atoms"));
+const livestream_store_1 = require("../../../livestream-store");
+const ui_1 = require("../../ui");
+function Viewers() {
+    const viewers = (0, livestream_store_1.useViewers)();
+    return ((0, jsx_runtime_1.jsxs)(ui_1.View, { style: [
+            atoms.layout.flex.center,
+            atoms.layout.flex.row,
+            atoms.gap.all[2],
+        ], children: [(0, jsx_runtime_1.jsx)(lucide_react_native_1.Eye, { color: "#fd5050" }), (0, jsx_runtime_1.jsx)(ui_1.Text, { style: {
+                    color: "#fd5050",
+                    textShadowColor: "black",
+                    textShadowOffset: { width: -1, height: 1 },
+                    textShadowRadius: 3,
+                    fontSize: 16,
+                }, children: new Intl.NumberFormat(undefined, { notation: "compact" }).format(viewers || 0) })] }));
+}

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

@@ -0,0 +1,243 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = useWebRTC;
+exports.negotiateConnectionWithClientOffer = negotiateConnectionWithClientOffer;
+exports.useWebRTCIngest = useWebRTCIngest;
+const react_1 = require("react");
+const __1 = require("../..");
+const webrtc_primitives_1 = require("./webrtc-primitives");
+function useWebRTC(endpoint) {
+    const [mediaStream, setMediaStream] = (0, react_1.useState)(null);
+    const [stuck, setStuck] = (0, react_1.useState)(false);
+    const setStatus = (0, __1.usePlayerStore)((x) => x.setStatus);
+    const lastChange = (0, react_1.useRef)(0);
+    (0, react_1.useEffect)(() => {
+        const peerConnection = new webrtc_primitives_1.RTCPeerConnection({
+            bundlePolicy: "max-bundle",
+        });
+        peerConnection.addTransceiver("video", {
+            direction: "recvonly",
+        });
+        peerConnection.addTransceiver("audio", {
+            direction: "recvonly",
+        });
+        peerConnection.addEventListener("track", (event) => {
+            const track = event.track;
+            if (!track) {
+                return;
+            }
+            setMediaStream(event.streams[0]);
+        });
+        peerConnection.addEventListener("connectionstatechange", () => {
+            console.log("connection state change", peerConnection.connectionState);
+            if (peerConnection.connectionState === "closed" ||
+                peerConnection.connectionState === "failed" ||
+                peerConnection.connectionState === "disconnected") {
+                console.log("setting stuck to true", peerConnection.connectionState);
+                setStuck(true);
+            }
+            if (peerConnection.connectionState !== "connected") {
+                return;
+            }
+        });
+        peerConnection.addEventListener("negotiationneeded", () => {
+            negotiateConnectionWithClientOffer(peerConnection, endpoint);
+        });
+        let lastFramesReceived = 0;
+        let lastAudioFramesReceived = 0;
+        const handle = setInterval(async () => {
+            const stats = await peerConnection.getStats();
+            stats.forEach((stat) => {
+                const mediaType = stat.mediaType /* web */ ?? stat.kind; /* native */
+                if (stat.type === "inbound-rtp" && mediaType === "audio") {
+                    const audioFramesReceived = stat.lastPacketReceivedTimestamp;
+                    if (lastAudioFramesReceived !== audioFramesReceived) {
+                        lastAudioFramesReceived = audioFramesReceived;
+                        lastChange.current = Date.now();
+                        setStatus(__1.PlayerStatus.PLAYING);
+                        setStuck(false);
+                    }
+                }
+                if (stat.type === "inbound-rtp" && mediaType === "video") {
+                    const framesReceived = stat.framesReceived;
+                    if (lastFramesReceived !== framesReceived) {
+                        lastFramesReceived = framesReceived;
+                        lastChange.current = Date.now();
+                        setStatus(__1.PlayerStatus.PLAYING);
+                        setStuck(false);
+                    }
+                }
+            });
+            if (Date.now() - lastChange.current > 2000) {
+                setStuck(true);
+            }
+        }, 200);
+        return () => {
+            clearInterval(handle);
+            peerConnection.close();
+        };
+    }, [endpoint]);
+    return [mediaStream, stuck];
+}
+/**
+ * Performs the actual SDP exchange.
+ *
+ * 1. Constructs the client's SDP offer
+ * 2. Sends the SDP offer to the server,
+ * 3. Awaits the server's offer.
+ *
+ * SDP describes what kind of media we can send and how the server and client communicate.
+ *
+ * https://developer.mozilla.org/en-US/docs/Glossary/SDP
+ * https://www.ietf.org/archive/id/draft-ietf-wish-whip-01.html#name-protocol-operation
+ */
+async function negotiateConnectionWithClientOffer(peerConnection, endpoint, bearerToken) {
+    /** https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/createOffer */
+    const offer = await peerConnection.createOffer({
+        offerToReceiveAudio: true,
+        offerToReceiveVideo: true,
+    });
+    /** https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/setLocalDescription */
+    await peerConnection.setLocalDescription(offer);
+    /** Wait for ICE gathering to complete */
+    let ofr = await waitToCompleteICEGathering(peerConnection);
+    if (!ofr) {
+        throw Error("failed to gather ICE candidates for offer");
+    }
+    /**
+     * As long as the connection is open, attempt to...
+     */
+    while (peerConnection.connectionState !== "closed") {
+        try {
+            /**
+             * This response contains the server's SDP offer.
+             * This specifies how the client should communicate,
+             * and what kind of media client and server have negotiated to exchange.
+             */
+            let response = await postSDPOffer(`${endpoint}`, ofr.sdp, bearerToken);
+            if (response.status === 201) {
+                let answerSDP = await response.text();
+                if (peerConnection.connectionState === "closed") {
+                    return;
+                }
+                await peerConnection.setRemoteDescription(new webrtc_primitives_1.RTCSessionDescription({ type: "answer", sdp: answerSDP }));
+                return response.headers.get("Location");
+            }
+            else if (response.status === 405) {
+                console.log("Remember to update the URL passed into the WHIP or WHEP client");
+            }
+            else {
+                const errorMessage = await response.text();
+                console.error(errorMessage);
+            }
+        }
+        catch (e) {
+            console.error(`posting sdp offer failed: ${e}`);
+        }
+        /** Limit reconnection attempts to at-most once every 5 seconds */
+        await new Promise((r) => setTimeout(r, 5000));
+    }
+}
+async function postSDPOffer(endpoint, data, bearerToken) {
+    return await fetch(endpoint, {
+        method: "POST",
+        mode: "cors",
+        headers: {
+            "content-type": "application/sdp",
+            ...(bearerToken ? { Authorization: `Bearer ${bearerToken}` } : {}),
+        },
+        body: data,
+    });
+}
+/**
+ * Receives an RTCPeerConnection and waits until
+ * the connection is initialized or a timeout passes.
+ *
+ * https://www.ietf.org/archive/id/draft-ietf-wish-whip-01.html#section-4.1
+ * https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/iceGatheringState
+ * https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/icegatheringstatechange_event
+ */
+async function waitToCompleteICEGathering(peerConnection) {
+    return new Promise((resolve) => {
+        /** Wait at most 1 second for ICE gathering. */
+        setTimeout(function () {
+            if (peerConnection.connectionState === "closed") {
+                return;
+            }
+            resolve(peerConnection.localDescription);
+        }, 1000);
+        peerConnection.addEventListener("icegatheringstatechange", (ev) => {
+            if (peerConnection.iceGatheringState === "complete") {
+                resolve(peerConnection.localDescription);
+            }
+        });
+    });
+}
+function useWebRTCIngest({ endpoint, }) {
+    const [mediaStream, setMediaStream] = (0, react_1.useState)(null);
+    const ingestConnectionState = (0, __1.usePlayerStore)((x) => x.ingestConnectionState);
+    const setIngestConnectionState = (0, __1.usePlayerStore)((x) => x.setIngestConnectionState);
+    const storedKey = (0, __1.useStreamKey)();
+    const [peerConnection, setPeerConnection] = (0, react_1.useState)(null);
+    const videoTransceiver = (0, react_1.useRef)(null);
+    const audioTransceiver = (0, react_1.useRef)(null);
+    const [retryTime, setRetryTime] = (0, react_1.useState)(0);
+    const ingestLive = (0, __1.usePlayerStore)((x) => x.ingestLive);
+    // "Outer loop": when we need a new peer connection, this sets that up
+    (0, react_1.useEffect)(() => {
+        if (!storedKey) {
+            return;
+        }
+        if (!ingestLive) {
+            return;
+        }
+        const peerConnection = new webrtc_primitives_1.RTCPeerConnection({
+            bundlePolicy: "max-bundle",
+        });
+        videoTransceiver.current = peerConnection.addTransceiver("video", {
+            direction: "sendonly",
+        });
+        audioTransceiver.current = peerConnection.addTransceiver("audio", {
+            direction: "sendonly",
+        });
+        peerConnection.addEventListener("connectionstatechange", (ev) => {
+            setIngestConnectionState(peerConnection.connectionState);
+            console.log("connection state change", peerConnection.connectionState);
+            if (peerConnection.connectionState === "failed") {
+                setRetryTime(Date.now());
+            }
+        });
+        peerConnection.addEventListener("negotiationneeded", (ev) => {
+            negotiateConnectionWithClientOffer(peerConnection, endpoint, storedKey.streamKey?.privateKey);
+        });
+        peerConnection.addEventListener("track", (ev) => {
+            console.log(ev);
+        });
+        setPeerConnection(peerConnection);
+        return () => {
+            peerConnection.close();
+        };
+    }, [endpoint, storedKey.streamKey?.privateKey, retryTime, ingestLive]);
+    // "Inner loop": when our tracks change, we update the transceivers
+    (0, react_1.useEffect)(() => {
+        if (!mediaStream) {
+            return;
+        }
+        if (!peerConnection) {
+            return;
+        }
+        if (!ingestLive) {
+            return;
+        }
+        for (const track of mediaStream.getTracks()) {
+            console.log("adding track", track.kind, track.label, track.enabled, track.readyState);
+            if (track.kind === "video") {
+                videoTransceiver.current?.sender?.replaceTrack(track);
+            }
+            else if (track.kind === "audio") {
+                audioTransceiver.current?.sender?.replaceTrack(track);
+            }
+        }
+    }, [peerConnection, mediaStream, ingestLive]);
+    return [mediaStream, setMediaStream];
+}