@streamplace/components 0.7.13 → 0.7.15

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

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

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

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

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

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

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

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

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

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