@streamplace/components 0.7.32 → 0.7.35

package/dist/components/chat/chat.js

@@ -81,7 +81,7 @@ const ActionsBar = (0, react_1.memo)(({ item, visible, hoverTimeoutRef, }) => {
                     }
                 }, children: (0, jsx_runtime_1.jsx)(lucide_react_native_1.Ellipsis, { color: "white", size: 16 }) })] }));
 });
-const ChatLine = (0, react_1.memo)(({ item, canModerate, }) => {
+const ChatLine = (0, react_1.memo)(({ item }) => {
     const setReply = (0, __1.useSetReplyToMessage)();
     const setModMsg = (0, __1.usePlayerStore)((state) => state.setModMessage);
     const swipeableRef = (0, react_1.useRef)(null);
@@ -136,7 +136,7 @@ const ChatLine = (0, react_1.memo)(({ item, canModerate, }) => {
                 }
             }, children: (0, jsx_runtime_1.jsx)(chat_message_1.RenderChatMessage, { item: item }) }) }));
 });
-function Chat({ shownMessages = SHOWN_MSGS, style: propsStyle, canModerate = false, ...props }) {
+function Chat({ shownMessages = SHOWN_MSGS, style: propsStyle, ...props }) {
     const chat = (0, __1.useChat)();
     const [isScrolledUp, setIsScrolledUp] = (0, react_1.useState)(false);
     const handleScroll = (event) => {
@@ -151,10 +151,10 @@ function Chat({ shownMessages = SHOWN_MSGS, style: propsStyle, canModerate = fal
         }
     };
     if (!chat)
-        return ((0, jsx_runtime_1.jsx)(__1.View, { style: [atoms_1.flex.shrink[1], { minWidth: 0, maxWidth: "100%" }], children: (0, jsx_runtime_1.jsx)(__1.Text, { children: "Loading chaat..." }) }));
+        return ((0, jsx_runtime_1.jsx)(__1.View, { style: [atoms_1.flex.shrink[1], { minWidth: 0, maxWidth: "100%" }], children: (0, jsx_runtime_1.jsx)(__1.Text, { children: "Loading chat..." }) }));
     return ((0, jsx_runtime_1.jsxs)(__1.View, { style: [atoms_1.flex.shrink[1], { minWidth: 0, maxWidth: "100%" }].concat(propsStyle || []), children: [(0, jsx_runtime_1.jsx)(react_native_gesture_handler_1.FlatList, { style: [
                     atoms_1.flex.grow[1],
                     atoms_1.flex.shrink[1],
                     { minWidth: 0, maxWidth: "100%" },
-                ], data: chat.slice(0, shownMessages), inverted: true, keyExtractor: keyExtractor, renderItem: ({ item, index }) => ((0, jsx_runtime_1.jsx)(ChatLine, { item: item, canModerate: canModerate })), removeClippedSubviews: true, maxToRenderPerBatch: 10, initialNumToRender: 10, updateCellsBatchingPeriod: 50, onScroll: handleScroll, scrollEventThrottle: 16, nestedScrollEnabled: true }), (0, jsx_runtime_1.jsx)(mod_view_1.ModView, {})] }));
+                ], data: chat.slice(0, shownMessages), inverted: true, keyExtractor: keyExtractor, renderItem: ({ item, index }) => (0, jsx_runtime_1.jsx)(ChatLine, { item: item }), removeClippedSubviews: true, maxToRenderPerBatch: 10, initialNumToRender: 10, updateCellsBatchingPeriod: 50, onScroll: handleScroll, scrollEventThrottle: 16, nestedScrollEnabled: true }), (0, jsx_runtime_1.jsx)(mod_view_1.ModView, {})] }));
 }

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

@@ -26,6 +26,7 @@ exports.ModView = (0, react_1.forwardRef)(() => {
     const setReportSubject = (0, player_store_1.usePlayerStore)((x) => x.setReportSubject);
     const setModMessage = (0, player_store_1.usePlayerStore)((x) => x.setModMessage);
     const deleteChatMessage = (0, livestream_store_1.useDeleteChatMessage)();
+    const isMyStream = (0, player_store_1.useIsMyStream)();
     // get the channel did
     const channelId = (0, player_store_1.usePlayerStore)((state) => state.src);
     // get the logged in user's identity
@@ -60,7 +61,7 @@ exports.ModView = (0, react_1.forwardRef)(() => {
                                                 hour: "2-digit",
                                                 minute: "2-digit",
                                                 hour12: false,
-                                            }), " ", "@", message.author.handle, ": ", message.record.text] }) }) }) }), channelId === handle && ((0, jsx_runtime_1.jsxs)(ui_1.DropdownMenuGroup, { title: `Moderation actions`, children: [(0, jsx_runtime_1.jsx)(ui_1.DropdownMenuItem, { disabled: isHideLoading || messageRemoved, onPress: () => {
+                                            }), " ", "@", message.author.handle, ": ", message.record.text] }) }) }) }), isMyStream() && ((0, jsx_runtime_1.jsxs)(ui_1.DropdownMenuGroup, { title: `Moderation actions`, children: [(0, jsx_runtime_1.jsx)(ui_1.DropdownMenuItem, { disabled: isHideLoading || messageRemoved, onPress: () => {
                                         if (isHideLoading || messageRemoved)
                                             return;
                                         createHideChat(message.uri)

package/dist/components/dashboard/chat-panel.js

@@ -9,7 +9,7 @@ const zero = tslib_1.__importStar(require("../../ui"));
 const chat_1 = require("../chat/chat");
 const chat_box_1 = require("../chat/chat-box");
 const { flex, bg, r, borders, p, px, py, text, layout } = zero;
-function ChatPanel({ isLive, isConnected, messagesPerMinute = 0, canModerate = false, shownMessages = 50, }) {
+function ChatPanel({ isLive, isConnected, messagesPerMinute = 0, shownMessages = 50, }) {
     return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
             flex.values[1],
             bg.neutral[900],
@@ -27,7 +27,7 @@ function ChatPanel({ isLive, isConnected, messagesPerMinute = 0, canModerate = f
                 ], children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [text.white, { fontSize: 18, fontWeight: "600" }], children: "Chat" }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [layout.flex.row, layout.flex.alignCenter], children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
                                     { width: 6, height: 6, borderRadius: 3 },
                                     isLive && isConnected ? bg.green[500] : bg.gray[500],
-                                ] }), (0, jsx_runtime_1.jsxs)(react_native_1.Text, { style: [text.gray[400], { fontSize: 12, marginLeft: 8 }], children: [messagesPerMinute, " msg/min"] })] })] }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [flex.values[1], px[2], { minHeight: 0 }], children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: [flex.values[1], { minHeight: 0 }], children: (0, jsx_runtime_1.jsx)(chat_1.Chat, { canModerate: canModerate, shownMessages: shownMessages }) }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [{ flexShrink: 0 }], children: (0, jsx_runtime_1.jsx)(chat_box_1.ChatBox, { emojiData: emoji_data_json_1.default, chatBoxStyle: [
+                                ] }), (0, jsx_runtime_1.jsxs)(react_native_1.Text, { style: [text.gray[400], { fontSize: 12, marginLeft: 8 }], children: [messagesPerMinute, " msg/min"] })] })] }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [flex.values[1], px[2], { minHeight: 0 }], children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: [flex.values[1], { minHeight: 0 }], children: (0, jsx_runtime_1.jsx)(chat_1.Chat, { shownMessages: shownMessages }) }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [{ flexShrink: 0 }], children: (0, jsx_runtime_1.jsx)(chat_box_1.ChatBox, { emojiData: emoji_data_json_1.default, chatBoxStyle: [
                                 bg.gray[700],
                                 borders.width.thin,
                                 borders.color.gray[600],

package/dist/components/dashboard/header.js

@@ -59,7 +59,7 @@ function StatusIndicator({ status, isLive }) {
                     !isLive && text.gray[400],
                 ], children: getStatusText() })] }));
 }
-function Header({ isLive, streamTitle = "Live Stream", viewers = 0, uptime = "00:00:00", bitrate = "0 mbps", timeBetweenSegments = 0, connectionStatus = "offline", }) {
+function Header({ isLive, streamTitle = "Live Stream", viewers = 0, uptime = "00:00:00", bitrate = "0 mbps", timeBetweenSegments = 0, connectionStatus = "offline", problemsCount = 0, onProblemsPress, }) {
     const getConnectionQuality = () => {
         if (timeBetweenSegments <= 1500)
             return "good";
@@ -76,5 +76,19 @@ function Header({ isLive, streamTitle = "Live Stream", viewers = 0, uptime = "00
             bg.neutral[900],
             borders.width.thin,
             borders.color.neutral[700],
-        ], children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: [layout.flex.row, layout.flex.alignCenter, gap.all[4]], children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [text.white, { fontSize: 18, fontWeight: "600" }], children: streamTitle }), (0, jsx_runtime_1.jsx)(StatusIndicator, { status: connectionStatus, isLive: isLive })] }) }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [layout.flex.row, layout.flex.alignCenter, gap.all[6]], children: [isLive && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(MetricItem, { icon: lucide_react_native_1.Users, label: "Viewers", value: viewers.toLocaleString() }), (0, jsx_runtime_1.jsx)(MetricItem, { icon: lucide_react_native_1.Car, label: "Bitrate", value: bitrate })] })), !isLive && ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [layout.flex.row, layout.flex.alignCenter, gap.all[2]], children: [(0, jsx_runtime_1.jsx)(lucide_react_native_1.Radio, { size: 16, color: "#6b7280" }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [text.gray[400], { fontSize: 13 }], children: "Stream offline" })] }))] })] }));
+        ], children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: [layout.flex.row, layout.flex.alignCenter, gap.all[4]], children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [text.white, { fontSize: 18, fontWeight: "600" }], children: streamTitle }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [layout.flex.row, layout.flex.alignCenter, gap.all[3]], children: [(0, jsx_runtime_1.jsx)(StatusIndicator, { status: connectionStatus, isLive: isLive }), problemsCount > 0 && ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { onPress: onProblemsPress, children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
+                                            layout.flex.row,
+                                            layout.flex.alignCenter,
+                                            gap.all[1],
+                                            px[2],
+                                            py[1],
+                                            r.md,
+                                            bg.orange[900],
+                                            borders.width.thin,
+                                            borders.color.orange[700],
+                                            { marginVertical: -8 },
+                                        ], children: [(0, jsx_runtime_1.jsx)(lucide_react_native_1.AlertCircle, { size: 14, color: "#fb923c" }), (0, jsx_runtime_1.jsxs)(react_native_1.Text, { style: [
+                                                    text.orange[400],
+                                                    { fontSize: 11, fontWeight: "600" },
+                                                ], children: [problemsCount, " ", problemsCount === 1 ? "Issue" : "Issues"] })] }) }))] })] }) }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [layout.flex.row, layout.flex.alignCenter, gap.all[6]], children: [isLive && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(MetricItem, { icon: lucide_react_native_1.Users, label: "Viewers", value: viewers.toLocaleString() }), (0, jsx_runtime_1.jsx)(MetricItem, { icon: lucide_react_native_1.Car, label: "Bitrate", value: bitrate })] })), !isLive && ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [layout.flex.row, layout.flex.alignCenter, gap.all[2]], children: [(0, jsx_runtime_1.jsx)(lucide_react_native_1.Radio, { size: 16, color: "#6b7280" }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [text.gray[400], { fontSize: 13 }], children: "Stream offline" })] }))] })] }));
 }

package/dist/components/dashboard/problems.js

@@ -8,47 +8,49 @@ const react_1 = require("react");
 const react_native_1 = require("react-native");
 const livestream_store_1 = require("../../livestream-store");
 const zero = tslib_1.__importStar(require("../../ui"));
+const ui_1 = require("../ui");
 const { bg, r, borders, p, text, layout, gap } = zero;
+const getIcon = (severity) => {
+    switch (severity) {
+        case "error":
+            return (0, jsx_runtime_1.jsx)(lucide_react_native_1.CircleX, { size: 24, color: "white" });
+        case "warning":
+            return (0, jsx_runtime_1.jsx)(lucide_react_native_1.CircleAlert, { size: 24, color: "white" });
+        case "info":
+            return (0, jsx_runtime_1.jsx)(lucide_react_native_1.Info, { size: 24, color: "white" });
+        default:
+            return (0, jsx_runtime_1.jsx)(lucide_react_native_1.Sparkle, { size: 24, color: "white" });
+    }
+};
 const Problems = ({ probs, onIgnore, }) => {
-    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [gap.all[3]], children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [text.white, { fontSize: 24, fontWeight: "bold" }], children: "Optimize Your Stream" }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [text.gray[300]], children: "We've found a few things that could improve your stream's reliability." })] }), probs.map((p) => ((0, jsx_runtime_1.jsx)(react_native_1.View, { children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [gap.all[4]], children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [gap.all[2]], children: [(0, jsx_runtime_1.jsx)(ui_1.Text, { size: "2xl", style: [text.white, { fontWeight: "600" }], children: "Optimize Your Stream" }), (0, jsx_runtime_1.jsx)(ui_1.Text, { style: [text.gray[300]], children: "We've found a few things that could improve your stream's reliability." })] }), probs.map((p) => ((0, jsx_runtime_1.jsx)(react_native_1.View, { children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
                         gap.all[2],
                         layout.flex.row,
                         layout.flex.alignCenter,
                         { gap: 8, alignItems: "flex-start" },
-                    ], children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [
-                                r.sm,
-                                p[2],
+                    ], children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
+                                zero.r.full,
+                                zero.p[1],
                                 {
-                                    width: 82,
-                                    textAlign: "center",
                                     backgroundColor: p.severity === "error"
                                         ? "#7f1d1d"
                                         : p.severity === "warning"
                                             ? "#7c2d12"
                                             : "#1e3a8a",
-                                    color: "white",
-                                    fontSize: 12,
                                 },
-                            ], children: p.severity }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [{ flex: 1 }, gap.all[1]], children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [text.white, { fontWeight: "600" }], children: p.code }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [text.gray[400], { fontSize: 14 }], children: p.message }), p.link && ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { onPress: () => p.link && react_native_1.Linking.openURL(p.link), children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
+                            ], children: getIcon(p.severity) }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [{ flex: 1 }, gap.all[1]], children: [(0, jsx_runtime_1.jsx)(ui_1.Text, { style: [text.white, { fontWeight: "600" }], children: p.code }), (0, jsx_runtime_1.jsx)(ui_1.Text, { style: [text.gray[400], { fontSize: 14 }], children: p.message }), p.link && ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { onPress: () => p.link && react_native_1.Linking.openURL(p.link), children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
                                             layout.flex.row,
                                             layout.flex.alignCenter,
                                             gap.all[2],
-                                        ], children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [{ color: "#3b82f6", fontSize: 14 }], children: "Learn More" }), (0, jsx_runtime_1.jsx)(lucide_react_native_1.ExternalLink, { size: 12, color: "#3b82f6" })] }) }))] })] }) }, p.message))), (0, jsx_runtime_1.jsx)(react_native_1.Pressable, { onPress: onIgnore, style: [
-                    bg.blue[600],
-                    r.md,
-                    p[3],
-                    layout.flex.center,
-                    { marginTop: 16 },
-                ], children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [text.white, { fontWeight: "600" }], children: "Ignore" }) })] }));
+                                        ], children: [(0, jsx_runtime_1.jsx)(ui_1.Text, { style: [{ color: "#3b82f6", fontSize: 14 }], children: "Learn More" }), (0, jsx_runtime_1.jsx)(lucide_react_native_1.ExternalLink, { size: 12, color: "#3b82f6" })] }) }))] })] }) }, p.message))), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [layout.flex.row, layout.flex.justify.end], children: (0, jsx_runtime_1.jsx)(ui_1.Button, { onPress: onIgnore, variant: "secondary", children: (0, jsx_runtime_1.jsx)(ui_1.Text, { style: [text.white, { fontWeight: "600" }], children: "Acknowledge" }) }) })] }));
 };
-const ProblemsWrapper = ({ children, }) => {
+exports.ProblemsWrapper = (0, react_1.forwardRef)(({ children }, ref) => {
     const problems = (0, livestream_store_1.useLivestreamStore)((x) => x.problems);
     const [dismiss, setDismiss] = (0, react_1.useState)(false);
-    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
-            { position: "relative", flex: 1 },
-            layout.flex.center,
-            { flexBasis: 0 },
-        ], children: [children, problems.length > 0 && !dismiss && ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
+    (0, react_1.useImperativeHandle)(ref, () => ({
+        setDismiss,
+    }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [children, problems.length > 0 && !dismiss && ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
                     {
                         position: "absolute",
                         top: 0,
@@ -60,15 +62,14 @@ const ProblemsWrapper = ({ children, }) => {
                     },
                     layout.flex.center,
                     { justifyContent: "flex-start" },
-                    p[8],
+                    p[12],
                 ], children: (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
-                        bg.gray[900],
-                        borders.color.gray[700],
+                        bg.neutral[900],
+                        borders.color.neutral[700],
                         borders.width.thin,
                         r.lg,
-                        p[4],
+                        p[8],
                         { maxWidth: 700, width: "100%" },
                     ], children: (0, jsx_runtime_1.jsx)(Problems, { probs: problems, onIgnore: () => setDismiss(true) }) }) }))] }));
-};
-exports.ProblemsWrapper = ProblemsWrapper;
+});
 exports.default = Problems;

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

@@ -6,9 +6,11 @@ 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 __1 = require("../../..");
 const theme_1 = require("../../../lib/theme");
 const livestream_store_1 = require("../../../livestream-store");
 const player_store_1 = require("../../../player-store/");
+const graph_1 = require("../../../streamplace-store/graph");
 const ui_1 = require("../../ui");
 function ContextMenu({ dropdownPortalContainer, }) {
     const quality = (0, player_store_1.usePlayerStore)((x) => x.selectedRendition);
@@ -21,6 +23,10 @@ function ContextMenu({ dropdownPortalContainer, }) {
     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 { profile } = (0, __1.useLivestreamInfo)();
+    const avatars = (0, __1.useAvatars)(profile?.did ? [profile?.did] : []);
+    const ls = (0, livestream_store_1.useLivestreamStore)((x) => x.livestream);
+    let graphManager = (0, graph_1.useGraphManager)(profile?.did);
     const lowLatency = protocol === "webrtc";
     const setLowLatency = (value) => {
         setProtocol(value ? player_store_1.PlayerProtocol.WEBRTC : player_store_1.PlayerProtocol.HLS);
@@ -33,7 +39,44 @@ function ContextMenu({ dropdownPortalContainer, }) {
     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.Menu, { 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 }) })] }) })] }));
+    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, { 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: [react_native_1.Platform.OS !== "web" && ((0, jsx_runtime_1.jsxs)(ui_1.DropdownMenuGroup, { title: "Streamer", children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
+                                        __1.zero.layout.flex.row,
+                                        __1.zero.layout.flex.center,
+                                        __1.zero.gap.all[3],
+                                        { flex: 1, minWidth: 0 },
+                                    ], children: [profile?.did && avatars[profile?.did]?.avatar && ((0, jsx_runtime_1.jsx)(react_native_1.Image, { source: {
+                                                uri: avatars[profile?.did]?.avatar,
+                                            }, style: { width: 42, height: 42, borderRadius: 999 }, resizeMode: "cover" }, "avatar")), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: { flex: 1, minWidth: 0 }, children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
+                                                        __1.zero.layout.flex.row,
+                                                        __1.zero.layout.flex.alignCenter,
+                                                        __1.zero.gap.all[2],
+                                                    ], children: (0, jsx_runtime_1.jsx)(react_native_1.Pressable, { onPress: () => {
+                                                            if (profile?.handle) {
+                                                                const url = `https://bsky.app/profile/${profile.handle}`;
+                                                                react_native_1.Linking.openURL(url);
+                                                            }
+                                                        }, children: (0, jsx_runtime_1.jsxs)(ui_1.Text, { children: ["@", profile?.handle || "user"] }) }) }), (0, jsx_runtime_1.jsx)(ui_1.Text, { color: "muted", size: "sm", numberOfLines: 2, ellipsizeMode: "tail", children: ls?.record.title || "Stream Title" })] })] }), (0, jsx_runtime_1.jsx)(ui_1.DropdownMenuSeparator, {}), (0, jsx_runtime_1.jsx)(ui_1.DropdownMenuItem, { disabled: graphManager.isLoading || !profile?.did, onPress: async () => {
+                                        try {
+                                            if (graphManager.isFollowing) {
+                                                await graphManager.unfollow();
+                                            }
+                                            else {
+                                                await graphManager.follow();
+                                            }
+                                        }
+                                        catch (err) {
+                                            console.error("Follow/unfollow error:", err);
+                                        }
+                                    }, children: (0, jsx_runtime_1.jsx)(ui_1.Text, { color: graphManager.isFollowing ? "destructive" : "default", children: graphManager.isLoading
+                                            ? "Loading..."
+                                            : graphManager.isFollowing
+                                                ? "Unfollow"
+                                                : "Follow" }) }), (0, jsx_runtime_1.jsx)(ui_1.DropdownMenuSeparator, {}), (0, jsx_runtime_1.jsx)(ui_1.DropdownMenuItem, { onPress: () => {
+                                        if (profile?.handle) {
+                                            const url = `https://bsky.app/profile/${profile.handle}`;
+                                            react_native_1.Linking.openURL(url);
+                                        }
+                                    }, children: (0, jsx_runtime_1.jsx)(ui_1.Text, { children: "View Profile on Bluesky" }) })] })), (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)();

package/dist/components/ui/button.js

@@ -85,7 +85,7 @@ exports.Button = (0, react_1.forwardRef)(({ variant = "primary", size = "md", ch
                         { borderRadius: zero.borderRadius.md },
                     ],
                     inner: { gap: 4 },
-                    text: zt.text.sm,
+                    text: zero.typography.universal.sm,
                 };
             case "lg":
                 return {
@@ -94,8 +94,8 @@ exports.Button = (0, react_1.forwardRef)(({ variant = "primary", size = "md", ch
                         zero.py[3],
                         { borderRadius: zero.borderRadius.md },
                     ],
-                    inner: { gap: 8 },
-                    text: zt.text.lg,
+                    inner: { gap: 12 },
+                    text: zero.typography.universal.lg,
                 };
             case "xl":
                 return {
@@ -105,17 +105,17 @@ exports.Button = (0, react_1.forwardRef)(({ variant = "primary", size = "md", ch
                         { borderRadius: zero.borderRadius.lg },
                     ],
                     inner: { gap: 12 },
-                    text: zt.text.xl,
+                    text: zero.typography.universal.xl,
                 };
             case "pill":
                 return {
                     button: [
-                        zero.px[4],
-                        zero.py[2],
+                        zero.px[2],
+                        zero.py[1],
                         { borderRadius: zero.borderRadius.full },
                     ],
                     inner: { gap: 4 },
-                    text: zt.text.sm,
+                    text: zero.typography.universal.xs,
                 };
             case "md":
             default:
@@ -126,7 +126,7 @@ exports.Button = (0, react_1.forwardRef)(({ variant = "primary", size = "md", ch
                         { borderRadius: zero.borderRadius.md },
                     ],
                     inner: { gap: 6 },
-                    text: zt.text.md,
+                    text: zero.typography.universal.sm,
                 };
         }
     }, [size, zt]);
@@ -170,6 +170,6 @@ exports.Button = (0, react_1.forwardRef)(({ variant = "primary", size = "md", ch
                 return icons.color.default;
         }
     }, [variant, icons]);
-    return ((0, jsx_runtime_1.jsx)(button_1.ButtonPrimitive.Root, { ref: ref, disabled: disabled || loading, style: [buttonStyle, sizeStyles.button, style], ...props, children: (0, jsx_runtime_1.jsxs)(button_1.ButtonPrimitive.Content, { style: sizeStyles.inner, children: [loading && !leftIcon ? ((0, jsx_runtime_1.jsx)(button_1.ButtonPrimitive.Icon, { position: "left", children: (0, jsx_runtime_1.jsx)(react_native_1.ActivityIndicator, { size: spinnerSize, color: spinnerColor }) })) : leftIcon ? ((0, jsx_runtime_1.jsx)(button_1.ButtonPrimitive.Icon, { position: "left", style: { width: iconSize, height: iconSize }, children: leftIcon })) : null, (0, jsx_runtime_1.jsx)(text_1.TextPrimitive.Root, { style: [textStyle, sizeStyles.text], children: loading && loadingText ? loadingText : children }), loading && rightIcon ? ((0, jsx_runtime_1.jsx)(button_1.ButtonPrimitive.Icon, { position: "right", children: (0, jsx_runtime_1.jsx)(react_native_1.ActivityIndicator, { size: spinnerSize, color: spinnerColor }) })) : rightIcon ? ((0, jsx_runtime_1.jsx)(button_1.ButtonPrimitive.Icon, { position: "right", style: { width: iconSize, height: iconSize }, children: rightIcon })) : null] }) }));
+    return ((0, jsx_runtime_1.jsx)(button_1.ButtonPrimitive.Root, { ref: ref, disabled: disabled || loading, style: [buttonStyle, sizeStyles.button, style], ...props, children: (0, jsx_runtime_1.jsxs)(button_1.ButtonPrimitive.Content, { style: sizeStyles.inner, children: [loading && !leftIcon ? ((0, jsx_runtime_1.jsx)(button_1.ButtonPrimitive.Icon, { position: "left", children: (0, jsx_runtime_1.jsx)(react_native_1.ActivityIndicator, { size: spinnerSize, color: spinnerColor }) })) : leftIcon ? ((0, jsx_runtime_1.jsx)(button_1.ButtonPrimitive.Icon, { position: "left", children: leftIcon })) : null, (0, jsx_runtime_1.jsx)(text_1.TextPrimitive.Root, { style: [textStyle, sizeStyles.text], children: loading && loadingText ? loadingText : children }), loading && rightIcon ? ((0, jsx_runtime_1.jsx)(button_1.ButtonPrimitive.Icon, { position: "right", children: (0, jsx_runtime_1.jsx)(react_native_1.ActivityIndicator, { size: spinnerSize, color: spinnerColor }) })) : rightIcon ? ((0, jsx_runtime_1.jsx)(button_1.ButtonPrimitive.Icon, { position: "right", style: { width: iconSize, height: iconSize }, children: rightIcon })) : null] }) }));
 });
 exports.Button.displayName = "Button";

package/dist/components/ui/dropdown.js

@@ -12,6 +12,7 @@ const react_native_1 = require("react-native");
 const atoms_1 = require("../../lib/theme/atoms");
 const ui_1 = require("../../ui");
 const text_1 = require("./primitives/text");
+const text_2 = require("./text");
 exports.DropdownMenu = DropdownMenuPrimitive.Root;
 exports.DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
 exports.DropdownMenuPortal = DropdownMenuPrimitive.Portal;
@@ -29,7 +30,7 @@ exports.DropdownMenuBottomSheet = (0, react_1.forwardRef)(function DropdownMenuB
                 atoms_1.a.sizes.width[12],
                 atoms_1.a.sizes.height[1],
                 zt.bg.mutedForeground,
-            ], children: (0, jsx_runtime_1.jsx)(bottom_sheet_1.BottomSheetView, { style: [atoms_1.px[2]], children: typeof children === "function"
+            ], children: (0, jsx_runtime_1.jsx)(bottom_sheet_1.BottomSheetView, { style: [atoms_1.px[4]], children: typeof children === "function"
                     ? children({ pressed: true })
                     : children }) }) }));
 });
@@ -123,9 +124,7 @@ exports.DropdownMenuItem = (0, react_1.forwardRef)(({ inset, disabled, style, ch
                     atoms_1.py[1],
                     atoms_1.pl[2],
                     atoms_1.pr[2],
-                ], children: typeof children === "function"
-                    ? children({ pressed: true })
-                    : children }) }) }));
+                ], children: typeof children === "function" ? (children({ pressed: true })) : typeof children === "string" ? ((0, jsx_runtime_1.jsx)(text_2.Text, { style: [inset && atoms_1.gap[2], disabled && { opacity: 0.5 }], children: children })) : (children) }) }) }));
 });
 exports.DropdownMenuCheckboxItem = (0, react_1.forwardRef)(({ children, checked, ...props }, ref) => {
     const { theme } = (0, ui_1.useTheme)();
@@ -152,21 +151,27 @@ exports.DropdownMenuRadioItem = (0, react_1.forwardRef)(({ children, ...props },
 });
 exports.DropdownMenuLabel = (0, react_1.forwardRef)(({ inset, ...props }, ref) => {
     const { theme } = (0, ui_1.useTheme)();
-    return ((0, jsx_runtime_1.jsx)(react_native_1.Text, { ref: ref, style: [
+    return ((0, jsx_runtime_1.jsx)(text_2.Text, { ref: ref, style: [
             atoms_1.px[2],
             atoms_1.py[2],
             { color: theme.colors.textMuted },
             atoms_1.a.fontSize.base,
-            inset && atoms_1.gap[2],
+            (inset && atoms_1.gap[2]),
         ], ...props }));
 });
 exports.DropdownMenuSeparator = (0, react_1.forwardRef)((props, ref) => {
     const { theme } = (0, ui_1.useTheme)();
-    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { ref: ref, style: [{ height: 0.5 }, { backgroundColor: theme.colors.border }], ...props }));
+    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { ref: ref, style: [
+            {
+                borderBottomWidth: 1,
+                borderBottomColor: theme.colors.border,
+                marginVertical: -0.5,
+            },
+        ], ...props }));
 });
 function DropdownMenuShortcut(props) {
     const { theme } = (0, ui_1.useTheme)();
-    return ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [
+    return ((0, jsx_runtime_1.jsx)(text_2.Text, { style: [
             atoms_1.ml.auto,
             { color: theme.colors.textMuted },
             atoms_1.a.fontSize.sm,
@@ -176,7 +181,7 @@ function DropdownMenuShortcut(props) {
 exports.DropdownMenuGroup = (0, react_1.forwardRef)((props, ref) => {
     const { theme } = (0, ui_1.useTheme)();
     const { inset, title, children, ...rest } = props;
-    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [atoms_1.pt[2], inset && atoms_1.gap[2]], ref: ref, ...rest, children: [title && ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [{ color: theme.colors.textMuted }, atoms_1.pb[1], atoms_1.pl[2]], children: title })), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [atoms_1.pt[2], inset && atoms_1.gap[2]], ref: ref, ...rest, children: [title && ((0, jsx_runtime_1.jsx)(text_2.Text, { style: [{ color: theme.colors.textMuted }, atoms_1.pb[1], atoms_1.pl[2]], children: title })), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
                     { backgroundColor: theme.colors.muted },
                     react_native_1.Platform.OS === "web" ? [atoms_1.px[2], atoms_1.py[1]] : atoms_1.p[2],
                     atoms_1.gap.all[1],
@@ -185,7 +190,7 @@ exports.DropdownMenuGroup = (0, react_1.forwardRef)((props, ref) => {
 });
 exports.DropdownMenuInfo = (0, react_1.forwardRef)(({ description, ...props }, ref) => {
     const { theme } = (0, ui_1.useTheme)();
-    return ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [
+    return ((0, jsx_runtime_1.jsx)(text_2.Text, { style: [
             { color: theme.colors.textMuted },
             atoms_1.pt[1],
             atoms_1.pl[2],

package/dist/components/ui/icons.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createThemedIcon = createThemedIcon;
+exports.Icon = Icon;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const theme_1 = require("../../lib/theme");
 // Size mapping
@@ -23,3 +24,8 @@ function createThemedIcon(IconComponent) {
         return ((0, jsx_runtime_1.jsx)(IconComponent, { size: iconSize, color: iconColor, ...restProps }));
     };
 }
+// usage of createThemedIcon
+function Icon({ icon, variant = "default", size = "md", color, ...restProps }) {
+    const ThemedIcon = createThemedIcon(icon);
+    return ((0, jsx_runtime_1.jsx)(ThemedIcon, { variant: variant, size: size, color: color, ...restProps }));
+}

package/dist/components/ui/primitives/button.js

@@ -78,7 +78,6 @@ const primitiveStyles = react_native_1.StyleSheet.create({
         flexDirection: "row",
         alignItems: "center",
         justifyContent: "center",
-        minHeight: 44, // iOS minimum touch target
     },
     disabled: {
         opacity: 0.5,
@@ -98,12 +97,6 @@ const primitiveStyles = react_native_1.StyleSheet.create({
         alignItems: "center",
         justifyContent: "center",
     },
-    iconLeft: {
-        marginRight: 8,
-    },
-    iconRight: {
-        marginLeft: 8,
-    },
     iconDisabled: {
         opacity: 0.5,
     },

package/dist/lib/theme/tokens.js

@@ -580,52 +580,61 @@ exports.typography = {
         },
     },
     // Universal typography scale
+    // Atkinson's center is weird so the marginBottom is there to correct it?
     universal: {
         xs: {
             fontSize: 12,
             lineHeight: 16,
+            marginBottom: -0.7,
             fontWeight: "400",
             fontFamily: "AtkinsonHyperlegibleNext-Regular",
         },
         sm: {
             fontSize: 14,
             lineHeight: 20,
+            marginBottom: -1,
             fontWeight: "400",
             fontFamily: "AtkinsonHyperlegibleNext-Regular",
         },
         base: {
             fontSize: 16,
             lineHeight: 24,
+            marginBottom: -1.2,
             fontWeight: "400",
             fontFamily: "AtkinsonHyperlegibleNext-Regular",
         },
         lg: {
             fontSize: 18,
             lineHeight: 28,
+            marginBottom: -1.5,
             fontWeight: "400",
             fontFamily: "AtkinsonHyperlegibleNext-Regular",
         },
         xl: {
             fontSize: 20,
             lineHeight: 28,
+            marginBottom: -1.75,
             fontWeight: "500",
             fontFamily: "AtkinsonHyperlegibleNext-Medium",
         },
         "2xl": {
             fontSize: 24,
             lineHeight: 32,
+            marginBottom: -2,
             fontWeight: "600",
             fontFamily: "AtkinsonHyperlegibleNext-SemiBold",
         },
         "3xl": {
             fontSize: 30,
             lineHeight: 36,
+            marginBottom: -2.5,
             fontWeight: "700",
             fontFamily: "AtkinsonHyperlegibleNext-Bold",
         },
         "4xl": {
             fontSize: 36,
             lineHeight: 40,
+            marginBottom: -3,
             fontWeight: "700",
             fontFamily: "AtkinsonHyperlegibleNext-ExtraBold",
         },

package/dist/player-store/player-store.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useOffline = exports.intoPlayerProtocol = exports.usePlayerProtocol = exports.makePlayerStore = void 0;
+exports.useIsMyStream = exports.useOffline = exports.intoPlayerProtocol = exports.usePlayerProtocol = exports.makePlayerStore = void 0;
 exports.usePlayerContext = usePlayerContext;
 exports.getPlayerStoreById = getPlayerStoreById;
 exports.getFirstPlayerID = getFirstPlayerID;
@@ -9,6 +9,7 @@ exports.usePlayerStore = usePlayerStore;
 const react_1 = require("react");
 const zustand_1 = require("zustand");
 const livestream_store_1 = require("../livestream-store");
+const streamplace_store_1 = require("../streamplace-store");
 const context_1 = require("./context");
 const player_state_1 = require("./player-state");
 const makePlayerStore = (id) => {
@@ -195,3 +196,12 @@ const useOffline = () => {
     return now - Date.parse(segment.startTime) > 10000;
 };
 exports.useOffline = useOffline;
+const useIsMyStream = () => {
+    const myHandle = (0, streamplace_store_1.useStreamplaceStore)((state) => state.handle);
+    const myDid = (0, streamplace_store_1.useStreamplaceStore)((state) => state.oauthSession?.did);
+    const channelId = usePlayerStore((state) => state.src);
+    return () => {
+        return myHandle === channelId || myDid === channelId;
+    };
+};
+exports.useIsMyStream = useIsMyStream;