@streamplace/components 0.7.1 → 0.7.2

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

@@ -1,48 +1,52 @@
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { useNavigation } from "@react-navigation/native";
-import { useEffect, useRef, useState } from "react";
-import { BackHandler, Dimensions, StyleSheet, View } from "react-native";
-import { SystemBars } from "react-native-edge-to-edge";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { PlayerProtocol, useLivestreamStore, usePlayerStore } from "../..";
-import Video from "./video.native";
+"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;
-export function Fullscreen(props) {
-    const ref = useRef(null);
-    const insets = useSafeAreaInsets();
-    const navigation = useNavigation();
-    const [dimensions, setDimensions] = useState(Dimensions.get("window"));
+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 = usePlayerStore((x) => x.protocol);
-    const fullscreen = usePlayerStore((x) => x.fullscreen);
-    const setFullscreen = usePlayerStore((x) => x.setFullscreen);
-    const handle = useLivestreamStore((x) => x.profile?.handle);
-    const setSrc = usePlayerStore((x) => x.setSrc);
-    useEffect(() => {
+    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
-    useEffect(() => {
+    (0, react_1.useEffect)(() => {
         const updateDimensions = () => {
-            setDimensions(Dimensions.get("window"));
+            setDimensions(react_native_1.Dimensions.get("window"));
         };
-        const subscription = Dimensions.addEventListener("change", updateDimensions);
+        const subscription = react_native_1.Dimensions.addEventListener("change", updateDimensions);
         return () => {
             subscription.remove();
         };
     }, []);
     // Hide status bar when in fullscreen mode
-    useEffect(() => {
+    (0, react_1.useEffect)(() => {
         if (fullscreen) {
-            SystemBars.setHidden(true);
+            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 = BackHandler.addEventListener("hardwareBackPress", () => {
+            const backHandler = react_native_1.BackHandler.addEventListener("hardwareBackPress", () => {
                 setFullscreen(false);
                 return true;
             });
@@ -51,14 +55,14 @@ export function Fullscreen(props) {
             };
         }
         else {
-            SystemBars.setHidden(false);
+            react_native_edge_to_edge_1.SystemBars.setHidden(false);
             // Restore the navigation header
             navigation.setOptions({
                 headerShown: true,
             });
         }
         return () => {
-            SystemBars.setHidden(false);
+            react_native_edge_to_edge_1.SystemBars.setHidden(false);
             // Ensure header is restored if component unmounts
             navigation.setOptions({
                 headerShown: true,
@@ -66,9 +70,9 @@ export function Fullscreen(props) {
         };
     }, [fullscreen, navigation, setFullscreen]);
     // Handle fullscreen state changes for native video players
-    useEffect(() => {
+    (0, react_1.useEffect)(() => {
         // For WebRTC, we handle fullscreen manually via the custom implementation
-        if (protocol === PlayerProtocol.WEBRTC) {
+        if (protocol === __1.PlayerProtocol.WEBRTC) {
             return;
         }
         // For HLS and other protocols, sync with native fullscreen
@@ -81,7 +85,7 @@ export function Fullscreen(props) {
             }
         }
     }, [fullscreen, protocol]);
-    if (fullscreen && protocol === PlayerProtocol.WEBRTC) {
+    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
@@ -109,13 +113,13 @@ export function Fullscreen(props) {
         const leftPosition = (dimensions.width - videoWidth) / 2;
         const topPosition = (dimensions.height - videoHeight) / 2;
         // When in custom fullscreen mode
-        return (_jsx(View, { style: [
+        return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
                 styles.fullscreenContainer,
                 {
                     width: isLandscape ? dimensions.width + 40 : dimensions.width,
                     height: dimensions.height,
                 },
-            ], children: _jsx(View, { style: [
+            ], children: (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
                     styles.videoContainer,
                     {
                         width: isLandscape ? videoWidth + 40 : videoWidth,
@@ -123,12 +127,12 @@ export function Fullscreen(props) {
                         left: leftPosition,
                         top: topPosition,
                     },
-                ], children: _jsx(Video, {}) }) }));
+                ], children: (0, jsx_runtime_1.jsx)(video_native_1.default, {}) }) }));
     }
     // Normal non-fullscreen mode
-    return (_jsx(_Fragment, { children: _jsx(Video, {}) }));
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(video_native_1.default, {}) }));
 }
-const styles = StyleSheet.create({
+const styles = react_native_1.StyleSheet.create({
     fullscreenContainer: {
         position: "absolute",
         top: 0,

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

@@ -1,34 +1,40 @@
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useState } from "react";
-import { flex, layout, w, zIndex } from "../../lib/theme/atoms";
-import { useSegment } from "../../livestream-store";
-import { PlayerStatus, usePlayerStore, } from "../../player-store";
-import { useStreamplaceStore } from "../../streamplace-store";
-import { Text, View } from "../ui";
-import { Fullscreen } from "./fullscreen";
+"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 livestream_store_1 = require("../../livestream-store");
+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 OFFLINE_THRESHOLD = 10000;
-export * as PlayerUI from "./ui";
-export function Player(props) {
-    const playing = usePlayerStore((x) => x.status === PlayerStatus.PLAYING);
-    const setOffline = usePlayerStore((x) => x.setOffline);
-    const setIngest = usePlayerStore((x) => x.setIngestConnectionState);
-    const clearControlsTimeout = usePlayerStore((x) => x.clearControlsTimeout);
+exports.PlayerUI = tslib_1.__importStar(require("./ui"));
+function Player(props) {
+    const playing = (0, player_store_1.usePlayerStore)((x) => x.status === player_store_1.PlayerStatus.PLAYING);
+    const setOffline = (0, player_store_1.usePlayerStore)((x) => x.setOffline);
+    const setIngest = (0, player_store_1.usePlayerStore)((x) => x.setIngestConnectionState);
+    const clearControlsTimeout = (0, player_store_1.usePlayerStore)((x) => x.clearControlsTimeout);
     // Will call back every few seconds to send health updates
     usePlayerStatus();
-    useEffect(() => {
+    (0, react_1.useEffect)(() => {
         setIngest(props.ingest ? "new" : null);
     }, []);
     if (typeof props.src !== "string") {
-        return (_jsx(View, { children: _jsx(Text, { children: "No source provided \uD83E\uDD37" }) }));
+        return ((0, jsx_runtime_1.jsx)(ui_1.View, { children: (0, jsx_runtime_1.jsx)(ui_1.Text, { children: "No source provided \uD83E\uDD37" }) }));
     }
-    useEffect(() => {
+    (0, react_1.useEffect)(() => {
         return () => {
             clearControlsTimeout();
         };
     }, []);
-    const segment = useSegment();
-    const [lastCheck, setLastCheck] = useState(0);
-    useEffect(() => {
+    const segment = (0, livestream_store_1.useSegment)();
+    const [lastCheck, setLastCheck] = (0, react_1.useState)(0);
+    (0, react_1.useEffect)(() => {
         if (playing) {
             setOffline(false);
             return;
@@ -52,17 +58,17 @@ export function Player(props) {
         }, 1000);
         return () => clearTimeout(handle);
     }, [segment, playing, lastCheck]);
-    return (_jsx(_Fragment, { children: _jsx(View, { style: [zIndex[0], flex.values[1], w.percent[100], layout.flex.center], children: _jsx(Fullscreen, { src: props.src }) }) }));
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(ui_1.View, { style: [atoms_1.zIndex[0], atoms_1.flex.values[1], atoms_1.w.percent[100], atoms_1.layout.flex.center], children: (0, jsx_runtime_1.jsx)(fullscreen_1.Fullscreen, { src: props.src }) }) }));
 }
 const POLL_INTERVAL = 5000;
-export function usePlayerStatus() {
-    const playerStatus = usePlayerStore((x) => x.status);
-    const url = useStreamplaceStore((x) => x.url);
-    const playerEvent = usePlayerStore((x) => x.playerEvent);
-    const [whatDoing, setWhatDoing] = useState(PlayerStatus.START);
-    const [whatDid, setWhatDid] = useState({});
-    const [doingSince, setDoingSince] = useState(Date.now());
-    const [lastUpdated, setLastUpdated] = useState(0);
+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;
@@ -73,7 +79,7 @@ export function usePlayerStatus() {
         return ret;
     };
     // callback to update the status
-    useEffect(() => {
+    (0, react_1.useEffect)(() => {
         const now = new Date();
         if (playerStatus !== whatDoing) {
             setWhatDid(updateWhatDid(now));
@@ -81,7 +87,7 @@ export function usePlayerStatus() {
             setDoingSince(now.getTime());
         }
     }, [playerStatus]);
-    useEffect(() => {
+    (0, react_1.useEffect)(() => {
         if (lastUpdated === 0) {
             return;
         }
@@ -93,7 +99,7 @@ export function usePlayerStatus() {
             whatHappened: fullWhatDid,
         });
     }, [lastUpdated]);
-    useEffect(() => {
+    (0, react_1.useEffect)(() => {
         const interval = setInterval((_) => {
             setLastUpdated(Date.now());
         }, POLL_INTERVAL);

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

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

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

@@ -1,14 +1,17 @@
-import { useMemo } from "react";
-import { PlayerProtocol, useStreamplaceStore } from "../..";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.srcToUrl = srcToUrl;
+const react_1 = require("react");
+const __1 = require("../..");
 const protocolSuffixes = {
-    m3u8: PlayerProtocol.HLS,
-    mp4: PlayerProtocol.PROGRESSIVE_MP4,
-    webm: PlayerProtocol.PROGRESSIVE_WEBM,
-    webrtc: PlayerProtocol.WEBRTC,
+    m3u8: __1.PlayerProtocol.HLS,
+    mp4: __1.PlayerProtocol.PROGRESSIVE_MP4,
+    webm: __1.PlayerProtocol.PROGRESSIVE_WEBM,
+    webrtc: __1.PlayerProtocol.WEBRTC,
 };
-export function srcToUrl(props, protocol) {
-    const url = useStreamplaceStore((x) => x.url);
-    return useMemo(() => {
+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];
@@ -23,7 +26,7 @@ export function srcToUrl(props, protocol) {
             }
         }
         let outUrl;
-        if (protocol === PlayerProtocol.HLS) {
+        if (protocol === __1.PlayerProtocol.HLS) {
             if (props.selectedRendition === "auto") {
                 outUrl = `${url}/api/playback/${props.src}/hls/index.m3u8`;
             }
@@ -31,13 +34,13 @@ export function srcToUrl(props, protocol) {
                 outUrl = `${url}/api/playback/${props.src}/hls/index.m3u8?rendition=${props.selectedRendition || "source"}`;
             }
         }
-        else if (protocol === PlayerProtocol.PROGRESSIVE_MP4) {
+        else if (protocol === __1.PlayerProtocol.PROGRESSIVE_MP4) {
             outUrl = `${url}/api/playback/${props.src}/stream.mp4`;
         }
-        else if (protocol === PlayerProtocol.PROGRESSIVE_WEBM) {
+        else if (protocol === __1.PlayerProtocol.PROGRESSIVE_WEBM) {
             outUrl = `${url}/api/playback/${props.src}/stream.webm`;
         }
-        else if (protocol === PlayerProtocol.WEBRTC) {
+        else if (protocol === __1.PlayerProtocol.WEBRTC) {
             outUrl = `${url}/api/playback/${props.src}/webrtc?rendition=${props.selectedRendition || "source"}`;
         }
         else {

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

@@ -1,13 +1,17 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useState } from "react";
-import Animated, { runOnJS, useAnimatedStyle, useFrameCallback, useSharedValue, withTiming, } from "react-native-reanimated";
-export function CountdownOverlay({ visible, width, height, startFrom = 3, onDone, }) {
-    const [countdown, setCountdown] = useState(startFrom);
-    const startTimestamp = useSharedValue(null);
-    const done = useSharedValue(false);
+"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 = useSharedValue(1);
-    const opacity = useSharedValue(1);
+    const scale = (0, react_native_reanimated_1.useSharedValue)(1);
+    const opacity = (0, react_native_reanimated_1.useSharedValue)(1);
     const updateCountdown = (value) => {
         setCountdown(value);
     };
@@ -16,7 +20,7 @@ export function CountdownOverlay({ visible, width, height, startFrom = 3, onDone
             onDone();
     };
     // Accurate countdown using useFrameCallback
-    useFrameCallback(({ timestamp }) => {
+    (0, react_native_reanimated_1.useFrameCallback)(({ timestamp }) => {
         if (!visible)
             return;
         // Set start timestamp on first frame
@@ -27,13 +31,13 @@ export function CountdownOverlay({ visible, width, height, startFrom = 3, onDone
         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
-        runOnJS(updateCountdown)(remaining);
+        (0, react_native_reanimated_1.runOnJS)(updateCountdown)(remaining);
         if (remaining === 0 && !done.value) {
             done.value = true;
-            runOnJS(handleDone)();
+            (0, react_native_reanimated_1.runOnJS)(handleDone)();
         }
     });
-    useEffect(() => {
+    (0, react_1.useEffect)(() => {
         if (visible) {
             startTimestamp.value = null; // Will be set on first frame
             setCountdown(startFrom);
@@ -44,21 +48,21 @@ export function CountdownOverlay({ visible, width, height, startFrom = 3, onDone
         }
     }, [visible, startFrom]);
     // Animate scale and opacity on countdown change
-    useEffect(() => {
+    (0, react_1.useEffect)(() => {
         if (visible && countdown > 0) {
             scale.value = 1;
             opacity.value = 1;
-            scale.value = withTiming(1.5, { duration: 1000 });
-            opacity.value = withTiming(0, { duration: 1000 });
+            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 = useAnimatedStyle(() => ({
+    const animatedStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => ({
         transform: [{ scale: scale.value }],
         opacity: opacity.value,
     }));
     if (!visible || countdown === 0)
         return null;
-    return (_jsx(Animated.View, { style: {
+    return ((0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: {
             position: "absolute",
             top: 0,
             left: 0,
@@ -68,7 +72,7 @@ export function CountdownOverlay({ visible, width, height, startFrom = 3, onDone
             alignItems: "center",
             justifyContent: "center",
             zIndex: 1000,
-        }, children: _jsx(Animated.Text, { style: [
+        }, children: (0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.Text, { style: [
                 {
                     color: "white",
                     fontSize: 120,

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

@@ -1,6 +1,9 @@
-export * from "./countdown";
-export * from "./input";
-export * from "./metrics";
-export * from "./streamer-context-menu";
-export * from "./viewer-context-menu";
-export * from "./viewers";
+"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("./viewer-context-menu"), exports);
+tslib_1.__exportStar(require("./viewers"), exports);

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

@@ -1,24 +1,28 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Keyboard, Pressable } from "react-native";
-import { useKeyboardSlide } from "../../../hooks";
-import * as atoms from "../../../lib/theme/atoms";
-import { Input, Text, View } from "../../ui";
+"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;
-export function InputPanel({ title, setTitle, ingestStarting, toggleGoLive, }) {
-    const { slideKeyboard } = useKeyboardSlide();
-    return (_jsx(View, { style: [
+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: _jsxs(View, { style: [
+        ], children: (0, jsx_runtime_1.jsxs)(ui_1.View, { style: [
                 layout.flex.column,
                 gap.all[2],
                 sizes.maxWidth[80],
                 { padding: 10 },
-            ], children: [_jsx(View, { backgroundColor: "rgba(64,64,64,0.8)", borderRadius: 12, children: _jsx(Input, { value: title, onChange: setTitle, placeholder: "Enter stream title", onEndEditing: Keyboard.dismiss }) }), ingestStarting ? (_jsx(Text, { children: "Starting your stream..." })) : (_jsxs(View, { style: [layout.flex.center], children: [_jsxs(Pressable, { onPress: toggleGoLive, style: [
+            ], 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,
@@ -28,11 +32,11 @@ export function InputPanel({ title, setTitle, ingestStarting, toggleGoLive, }) {
                                     backgroundColor: "rgba(64,64,64, 0.8)",
                                     borderRadius: 12,
                                 },
-                            ], children: [_jsx(View, { style: [
+                            ], children: [(0, jsx_runtime_1.jsx)(ui_1.View, { style: [
                                         p[2],
                                         {
                                             backgroundColor: "rgba(256,0,0, 0.8)",
                                             borderRadius: 12,
                                         },
-                                    ] }), _jsx(Text, { center: true, children: "Go Live" })] }), _jsx(Text, { color: "muted", size: "xs", style: [mt[2]], children: "We'll announce that you're live on Bluesky." })] }))] }) }));
+                                    ] }), (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,40 +1,44 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { AlertCircle, CircleCheck, CircleX } from "lucide-react-native";
-import { useSegmentTiming } from "../../../hooks/useSegmentTiming";
-import * as atoms from "../../../lib/theme/atoms";
-import { Text, View } from "../../ui";
-export function MetricsPanel({ showMetrics }) {
-    const { connectionQuality, segmentDeltas, mean, range } = useSegmentTiming();
-    let icon = _jsx(CircleX, { color: "#d44" });
+"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 = _jsx(CircleCheck, { color: "#4d4" });
+        icon = (0, jsx_runtime_1.jsx)(lucide_react_native_1.CircleCheck, { color: "#4d4" });
         color = "#4d4";
     }
     else if (connectionQuality === "degraded") {
-        icon = _jsx(AlertCircle, { color: "#aa4" });
+        icon = (0, jsx_runtime_1.jsx)(lucide_react_native_1.AlertCircle, { color: "#aa4" });
         color = "#aa4";
     }
     else {
-        icon = _jsx(CircleX, { color: "#d44" });
+        icon = (0, jsx_runtime_1.jsx)(lucide_react_native_1.CircleX, { color: "#d44" });
         color = "#d44";
     }
-    return (_jsxs(View, { style: {
+    return ((0, jsx_runtime_1.jsxs)(ui_1.View, { style: {
             alignItems: "center",
             gap: 8,
-        }, children: [_jsxs(View, { style: {
+        }, 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, _jsx(Text, { style: [
+                }, children: [icon, (0, jsx_runtime_1.jsx)(ui_1.Text, { style: [
                             atoms.pt[0],
                             {
                                 color,
                             },
-                        ], children: connectionQuality.toUpperCase() })] }), showMetrics && (_jsxs(View, { children: [_jsxs(Text, { children: ["last \u0394:", " ", segmentDeltas.length > 0
+                        ], 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]
-                                : "—"] }), _jsxs(Text, { children: ["mean: ", mean] }), _jsxs(Text, { children: ["range: ", range] })] }))] }));
+                                : "—"] }), (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/streamer-context-menu.js

@@ -1,4 +1,7 @@
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-export function StreamContextMenu() {
-    return _jsx(_Fragment, {});
+"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/viewer-context-menu.js

@@ -1,20 +1,23 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Menu } from "lucide-react-native";
-import { colors } from "../../../lib/theme";
-import { useLivestreamStore } from "../../../livestream-store";
-import { PlayerProtocol, usePlayerStore } from "../../../player-store/";
-import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuGroup, DropdownMenuInfo, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuTrigger, ResponsiveDropdownMenuContent, Text, } from "../../ui";
-export function ContextMenu() {
-    const quality = usePlayerStore((x) => x.selectedRendition);
-    const setQuality = usePlayerStore((x) => x.setSelectedRendition);
-    const qualities = useLivestreamStore((x) => x.renditions);
-    const protocol = usePlayerStore((x) => x.protocol);
-    const setProtocol = usePlayerStore((x) => x.setProtocol);
-    const debugInfo = usePlayerStore((x) => x.showDebugInfo);
-    const setShowDebugInfo = usePlayerStore((x) => x.setShowDebugInfo);
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ContextMenu = ContextMenu;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const lucide_react_native_1 = require("lucide-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() {
+    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 lowLatency = protocol === "webrtc";
     const setLowLatency = (value) => {
-        setProtocol(value ? PlayerProtocol.WEBRTC : PlayerProtocol.HLS);
+        setProtocol(value ? player_store_1.PlayerProtocol.WEBRTC : player_store_1.PlayerProtocol.HLS);
     };
-    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { children: _jsx(Menu, { size: 32, color: colors.gray[200] }) }), _jsxs(ResponsiveDropdownMenuContent, { children: [_jsx(DropdownMenuGroup, { title: "Resolution", children: _jsxs(DropdownMenuRadioGroup, { value: quality, onValueChange: setQuality, children: [_jsx(DropdownMenuRadioItem, { value: "source", children: _jsx(Text, { children: "Source (Original Quality)" }) }), qualities.map((r) => (_jsx(DropdownMenuRadioItem, { value: r.name, children: _jsx(Text, { children: r.name }) })))] }) }), _jsx(DropdownMenuGroup, { title: "Advanced", children: _jsx(DropdownMenuCheckboxItem, { checked: lowLatency, onCheckedChange: () => setLowLatency(!lowLatency), children: _jsx(Text, { children: "Low Latency" }) }) }), _jsx(DropdownMenuInfo, { description: "Reduces the delay between video and chat for a more real-time experience." }), _jsx(DropdownMenuGroup, { children: _jsx(DropdownMenuCheckboxItem, { checked: debugInfo, onCheckedChange: () => setShowDebugInfo(!debugInfo), children: _jsx(Text, { children: "Show Debug Info" }) }) })] })] }));
+    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.Menu, { size: 32, color: theme_1.colors.gray[200] }) }), (0, jsx_runtime_1.jsxs)(ui_1.ResponsiveDropdownMenuContent, { 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" }) }) })] })] }));
 }