@streamplace/components 0.7.13 → 0.7.15

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

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

package/dist/components/keep-awake.js

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

package/dist/components/keep-awake.native.js

@@ -1,16 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.KeepAwake = KeepAwake;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const expo_keep_awake_1 = require("expo-keep-awake");
-const react_1 = require("react");
-function KeepAwake() {
-    // useKeepAwake();
-    (0, react_1.useEffect)(() => {
-        (0, expo_keep_awake_1.activateKeepAwakeAsync)();
-        return () => {
-            (0, expo_keep_awake_1.deactivateKeepAwake)();
-        };
-    }, []);
-    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
-}

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

@@ -1,74 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Fullscreen = Fullscreen;
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const __1 = require("../..");
-const ui_1 = require("../../components/ui");
-const video_1 = tslib_1.__importDefault(require("./video"));
-const video_retry_1 = tslib_1.__importDefault(require("./video-retry"));
-function Fullscreen(props) {
-    const playerId = (0, __1.getFirstPlayerID)();
-    const protocol = (0, __1.usePlayerStore)((x) => x.protocol, playerId);
-    const fullscreen = (0, __1.usePlayerStore)((x) => x.fullscreen, playerId);
-    const setFullscreen = (0, __1.usePlayerStore)((x) => x.setFullscreen, playerId);
-    const setSrc = (0, __1.usePlayerStore)((x) => x.setSrc);
-    const divRef = (0, react_1.useRef)(null);
-    const videoRef = (0, react_1.useRef)(null);
-    (0, react_1.useEffect)(() => {
-        setSrc(props.src);
-    }, [props.src]);
-    (0, react_1.useEffect)(() => {
-        if (!divRef.current) {
-            return;
-        }
-        (async () => {
-            if (fullscreen && !document.fullscreenElement) {
-                try {
-                    const div = divRef.current;
-                    if (typeof div.requestFullscreen === "function") {
-                        await div.requestFullscreen();
-                    }
-                    else if (videoRef.current) {
-                        if (typeof videoRef.current.webkitEnterFullscreen ===
-                            "function") {
-                            await videoRef.current.webkitEnterFullscreen();
-                        }
-                        else if (typeof videoRef.current.requestFullscreen === "function") {
-                            await videoRef.current.requestFullscreen();
-                        }
-                    }
-                    setFullscreen(true);
-                }
-                catch (e) {
-                    console.error("fullscreen failed", e.message);
-                }
-            }
-            if (!fullscreen) {
-                if (document.fullscreenElement) {
-                    try {
-                        await document.exitFullscreen();
-                    }
-                    catch (e) {
-                        console.error("fullscreen exit failed", e.message);
-                    }
-                }
-                setFullscreen(false);
-            }
-        })();
-    }, [fullscreen, protocol]);
-    (0, react_1.useEffect)(() => {
-        const listener = () => {
-            console.log("fullscreenchange", document.fullscreenElement);
-            setFullscreen(!!document.fullscreenElement);
-        };
-        document.body.addEventListener("fullscreenchange", listener);
-        document.body.addEventListener("webkitfullscreenchange", listener);
-        return () => {
-            document.body.removeEventListener("fullscreenchange", listener);
-            document.body.removeEventListener("webkitfullscreenchange", listener);
-        };
-    }, []);
-    return ((0, jsx_runtime_1.jsxs)(ui_1.View, { ref: divRef, style: { width: "100%", height: "100%", overflow: "hidden" }, children: [(0, jsx_runtime_1.jsx)(video_retry_1.default, { children: (0, jsx_runtime_1.jsx)(video_1.default, {}) }), props.children] }));
-}

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

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

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

@@ -1,94 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PlayerUI = void 0;
-exports.Player = Player;
-exports.usePlayerStatus = usePlayerStatus;
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const atoms_1 = require("../../lib/theme/atoms");
-const player_store_1 = require("../../player-store");
-const streamplace_store_1 = require("../../streamplace-store");
-const ui_1 = require("../ui");
-const fullscreen_1 = require("./fullscreen");
-const report_modal_1 = tslib_1.__importDefault(require("./ui/report-modal"));
-const OFFLINE_THRESHOLD = 10000;
-exports.PlayerUI = tslib_1.__importStar(require("./ui"));
-function Player(props) {
-    const setIngest = (0, player_store_1.usePlayerStore)((x) => x.setIngestConnectionState);
-    const clearControlsTimeout = (0, player_store_1.usePlayerStore)((x) => x.clearControlsTimeout);
-    const setReportingURL = (0, player_store_1.usePlayerStore)((x) => x.setReportingURL);
-    const reportModalOpen = (0, player_store_1.usePlayerStore)((x) => x.reportModalOpen);
-    const setReportModalOpen = (0, player_store_1.usePlayerStore)((x) => x.setReportModalOpen);
-    const reportSubject = (0, player_store_1.usePlayerStore)((x) => x.reportSubject);
-    (0, react_1.useEffect)(() => {
-        setReportingURL(props.reportingURL ?? null);
-    }, [props.reportingURL]);
-    // Will call back every few seconds to send health updates
-    usePlayerStatus();
-    (0, react_1.useEffect)(() => {
-        setIngest(props.ingest ? "new" : null);
-    }, []);
-    if (typeof props.src !== "string") {
-        return ((0, jsx_runtime_1.jsx)(ui_1.View, { children: (0, jsx_runtime_1.jsx)(ui_1.Text, { children: "No source provided \uD83E\uDD37" }) }));
-    }
-    (0, react_1.useEffect)(() => {
-        return () => {
-            clearControlsTimeout();
-        };
-    }, []);
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(ui_1.View, { style: [
-                atoms_1.zIndex[0],
-                atoms_1.w.percent[100],
-                atoms_1.h.percent[100],
-                atoms_1.flex.shrink[1],
-                atoms_1.layout.flex.center,
-            ], children: [(0, jsx_runtime_1.jsx)(report_modal_1.default, { open: reportModalOpen, onOpenChange: setReportModalOpen, subject: reportSubject }), (0, jsx_runtime_1.jsx)(fullscreen_1.Fullscreen, { src: props.src, children: props.children })] }) }));
-}
-const POLL_INTERVAL = 5000;
-function usePlayerStatus() {
-    const playerStatus = (0, player_store_1.usePlayerStore)((x) => x.status);
-    const url = (0, streamplace_store_1.useStreamplaceStore)((x) => x.url);
-    const playerEvent = (0, player_store_1.usePlayerStore)((x) => x.playerEvent);
-    const [whatDoing, setWhatDoing] = (0, react_1.useState)(player_store_1.PlayerStatus.START);
-    const [whatDid, setWhatDid] = (0, react_1.useState)({});
-    const [doingSince, setDoingSince] = (0, react_1.useState)(Date.now());
-    const [lastUpdated, setLastUpdated] = (0, react_1.useState)(0);
-    const updateWhatDid = (now) => {
-        const prev = whatDid[whatDoing] ?? 0;
-        const duration = now.getTime() - doingSince;
-        const ret = {
-            ...whatDid,
-            [whatDoing]: prev + duration,
-        };
-        return ret;
-    };
-    // callback to update the status
-    (0, react_1.useEffect)(() => {
-        const now = new Date();
-        if (playerStatus !== whatDoing) {
-            setWhatDid(updateWhatDid(now));
-            setWhatDoing(playerStatus);
-            setDoingSince(now.getTime());
-        }
-    }, [playerStatus]);
-    (0, react_1.useEffect)(() => {
-        if (lastUpdated === 0) {
-            return;
-        }
-        const now = new Date();
-        const fullWhatDid = updateWhatDid(now);
-        setWhatDid({});
-        setDoingSince(now.getTime());
-        playerEvent(url, now.toISOString(), "aq-played", {
-            whatHappened: fullWhatDid,
-        });
-    }, [lastUpdated]);
-    (0, react_1.useEffect)(() => {
-        const interval = setInterval((_) => {
-            setLastUpdated(Date.now());
-        }, POLL_INTERVAL);
-        return () => clearInterval(interval);
-    }, []);
-    return [whatDoing];
-}

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

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

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

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

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

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

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

@@ -1,11 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-tslib_1.__exportStar(require("./countdown"), exports);
-tslib_1.__exportStar(require("./input"), exports);
-tslib_1.__exportStar(require("./metrics"), exports);
-tslib_1.__exportStar(require("./streamer-context-menu"), exports);
-tslib_1.__exportStar(require("./streamer-loading-overlay"), exports);
-tslib_1.__exportStar(require("./viewer-context-menu"), exports);
-tslib_1.__exportStar(require("./viewer-loading-overlay"), exports);
-tslib_1.__exportStar(require("./viewers"), exports);

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

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

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