@streamplace/components 0.7.1 → 0.7.3

package/dist/components/chat/chat-box.js

@@ -1,30 +1,33 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { X } from "lucide-react-native";
-import { useEffect, useMemo, useRef, useState } from "react";
-import { Pressable } from "react-native";
-import { Button, Loader, Text, useChat, useCreateChatMessage, useReplyToMessage, useSetReplyToMessage, View, } from "../../";
-import { bg, flex, gap, h, layout, mb, pl, pr, w } from "../../lib/theme/atoms";
-import { usePDSAgent } from "../../streamplace-store/xrpc";
-import { Textarea } from "../ui/textarea";
-import { RenderChatMessage } from "./chat-message";
-import { MentionSuggestions } from "./mention-suggestions";
-export function ChatBox({ isPopout, chatBoxStyle, }) {
-    const [submitting, setSubmitting] = useState(false);
-    const [message, setMessage] = useState("");
-    const [showSuggestions, setShowSuggestions] = useState(false);
-    const [highlightedIndex, setHighlightedIndex] = useState(0);
-    const [filteredAuthors, setFilteredAuthors] = useState(new Map());
-    const chat = useChat();
-    const createChatMessage = useCreateChatMessage();
-    const replyTo = useReplyToMessage();
-    const setReplyToMessage = useSetReplyToMessage();
-    const textAreaRef = useRef(null);
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChatBox = ChatBox;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const lucide_react_native_1 = require("lucide-react-native");
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const __1 = require("../../");
+const atoms_1 = require("../../lib/theme/atoms");
+const xrpc_1 = require("../../streamplace-store/xrpc");
+const textarea_1 = require("../ui/textarea");
+const chat_message_1 = require("./chat-message");
+const mention_suggestions_1 = require("./mention-suggestions");
+function ChatBox({ isPopout, chatBoxStyle, }) {
+    const [submitting, setSubmitting] = (0, react_1.useState)(false);
+    const [message, setMessage] = (0, react_1.useState)("");
+    const [showSuggestions, setShowSuggestions] = (0, react_1.useState)(false);
+    const [highlightedIndex, setHighlightedIndex] = (0, react_1.useState)(0);
+    const [filteredAuthors, setFilteredAuthors] = (0, react_1.useState)(new Map());
+    const chat = (0, __1.useChat)();
+    const createChatMessage = (0, __1.useCreateChatMessage)();
+    const replyTo = (0, __1.useReplyToMessage)();
+    const setReplyToMessage = (0, __1.useSetReplyToMessage)();
+    const textAreaRef = (0, react_1.useRef)(null);
     // are we logged in?
-    let agent = usePDSAgent();
+    let agent = (0, xrpc_1.usePDSAgent)();
     if (!agent?.did) {
-        _jsx(View, { style: [layout.flex.row, layout.flex.alignCenter, gap.all[2]], children: _jsx(Text, { children: "Log in to chat." }) });
+        (0, jsx_runtime_1.jsx)(__1.View, { style: [atoms_1.layout.flex.row, atoms_1.layout.flex.alignCenter, atoms_1.gap.all[2]], children: (0, jsx_runtime_1.jsx)(__1.Text, { children: "Log in to chat." }) });
     }
-    const authors = useMemo(() => {
+    const authors = (0, react_1.useMemo)(() => {
         if (!chat)
             return null;
         return chat.reduce((acc, msg) => {
@@ -61,30 +64,30 @@ export function ChatBox({ isPopout, chatBoxStyle, }) {
         });
         setSubmitting(false);
     };
-    useEffect(() => {
+    (0, react_1.useEffect)(() => {
         if (replyTo && textAreaRef.current) {
             textAreaRef.current.focus();
         }
     }, [replyTo]);
-    return (_jsxs(View, { style: [layout.flex.column, flex.shrink[1], gap.all[2]], children: [replyTo && (_jsxs(View, { style: [
-                    layout.flex.row,
-                    layout.flex.alignCenter,
-                    layout.flex.spaceBetween,
-                    h[12],
-                    pl[2],
-                    pr[10],
-                    mb[2],
-                    bg.gray[800],
+    return ((0, jsx_runtime_1.jsxs)(__1.View, { style: [atoms_1.layout.flex.column, atoms_1.flex.shrink[1], atoms_1.gap.all[2]], children: [replyTo && ((0, jsx_runtime_1.jsxs)(__1.View, { style: [
+                    atoms_1.layout.flex.row,
+                    atoms_1.layout.flex.alignCenter,
+                    atoms_1.layout.flex.spaceBetween,
+                    atoms_1.h[12],
+                    atoms_1.pl[2],
+                    atoms_1.pr[10],
+                    atoms_1.mb[2],
+                    atoms_1.bg.gray[800],
                     { borderRadius: 16 },
-                ], children: [_jsx(RenderChatMessage, { item: replyTo, showReply: false, userCache: authors || new Map() }), _jsx(Pressable, { onPress: () => setReplyToMessage(null), children: _jsx(View, { style: [
-                                layout.flex.row,
-                                layout.flex.alignCenter,
-                                layout.flex.justifyCenter,
-                                h[12],
-                                w[12],
-                                bg.gray[600],
+                ], children: [(0, jsx_runtime_1.jsx)(chat_message_1.RenderChatMessage, { item: replyTo, showReply: false, userCache: authors || new Map() }), (0, jsx_runtime_1.jsx)(react_native_1.Pressable, { onPress: () => setReplyToMessage(null), children: (0, jsx_runtime_1.jsx)(__1.View, { style: [
+                                atoms_1.layout.flex.row,
+                                atoms_1.layout.flex.alignCenter,
+                                atoms_1.layout.flex.justifyCenter,
+                                atoms_1.h[12],
+                                atoms_1.w[12],
+                                atoms_1.bg.gray[600],
                                 { borderRadius: 999 },
-                            ], children: _jsx(X, { size: 24 }) }) })] })), _jsxs(View, { style: [layout.flex.row, layout.flex.alignCenter, gap.all[2]], children: [_jsx(Textarea, { ref: textAreaRef, numberOfLines: 1, value: message, enterKeyHint: "send", onSubmitEditing: submit, multiline: false, onChangeText: (text) => {
+                            ], children: (0, jsx_runtime_1.jsx)(lucide_react_native_1.X, { size: 24 }) }) })] })), (0, jsx_runtime_1.jsxs)(__1.View, { style: [atoms_1.layout.flex.row, atoms_1.layout.flex.alignCenter, atoms_1.gap.all[2]], children: [(0, jsx_runtime_1.jsx)(textarea_1.Textarea, { ref: textAreaRef, numberOfLines: 1, value: message, enterKeyHint: "send", onSubmitEditing: submit, multiline: false, onChangeText: (text) => {
                             setMessage(text);
                             updateSuggestions(text);
                         }, onKeyPress: (k) => {
@@ -105,5 +108,5 @@ export function ChatBox({ isPopout, chatBoxStyle, }) {
                             else if (k.nativeEvent.key === "ArrowDown") {
                                 setHighlightedIndex((prev) => Math.min(prev + 1, Array.from(filteredAuthors.keys()).length - 1));
                             }
-                        }, style: [chatBoxStyle] }), _jsx(Button, { disabled: submitting, variant: "secondary", style: { borderRadius: 16, height: 36, minWidth: 80 }, onPress: submit, children: submitting ? _jsx(Loader, {}) : "Send" })] }), showSuggestions && (_jsx(MentionSuggestions, { authors: filteredAuthors || [], highlightedIndex: highlightedIndex, onSelect: handleMentionSelect }))] }));
+                        }, style: [chatBoxStyle] }), (0, jsx_runtime_1.jsx)(__1.Button, { disabled: submitting, variant: "secondary", style: { borderRadius: 16, height: 36, minWidth: 80 }, onPress: submit, children: submitting ? (0, jsx_runtime_1.jsx)(__1.Loader, {}) : "Send" })] }), showSuggestions && ((0, jsx_runtime_1.jsx)(mention_suggestions_1.MentionSuggestions, { authors: filteredAuthors || [], highlightedIndex: highlightedIndex, onSelect: handleMentionSelect }))] }));
 }

package/dist/components/chat/chat-message.js

@@ -1,11 +1,14 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { memo, useCallback } from "react";
-import { Linking, View } from "react-native";
-import { segmentize } from "../../lib/facet";
-import { borders, flex, gap, ml, mr, opacity, pl, w, } from "../../lib/theme/atoms";
-import { atoms, layout } from "../ui";
-import { useLivestreamStore } from "../../livestream-store";
-import { Text } from "../ui/text";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RenderChatMessage = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const facet_1 = require("../../lib/facet");
+const atoms_1 = require("../../lib/theme/atoms");
+const ui_1 = require("../ui");
+const livestream_store_1 = require("../../livestream-store");
+const text_1 = require("../ui/text");
 const getRgbColor = (color) => color ? `rgb(${color.red}, ${color.green}, ${color.blue})` : "$accentColor";
 const segmentedObject = (obj, index, userCache) => {
     if (obj.features && obj.features.length > 0) {
@@ -13,63 +16,63 @@ const segmentedObject = (obj, index, userCache) => {
         // afaik there shouldn't be a case where facets overlap, at least currently
         if (ftr.$type === "app.bsky.richtext.facet#link") {
             let linkftr = ftr;
-            return (_jsx(Text, { style: [{ color: atoms.colors.ios.systemBlue, cursor: "pointer" }], onPress: () => Linking.openURL(linkftr.uri || ""), children: obj.text }, `mention-${index}`));
+            return ((0, jsx_runtime_1.jsx)(text_1.Text, { style: [{ color: ui_1.atoms.colors.ios.systemBlue, cursor: "pointer" }], onPress: () => react_native_1.Linking.openURL(linkftr.uri || ""), children: obj.text }, `mention-${index}`));
         }
         else if (ftr.$type === "app.bsky.richtext.facet#mention") {
             let mtnftr = ftr;
             const profile = userCache?.[mtnftr.did];
             console.log(profile, mtnftr.did, userCache);
-            return (_jsx(Text, { style: [
+            return ((0, jsx_runtime_1.jsx)(text_1.Text, { style: [
                     {
                         cursor: "pointer",
                         color: getRgbColor(profile?.color),
                     },
-                ], onPress: () => Linking.openURL(`https://bsky.app/profile/${mtnftr.did || ""}`), children: obj.text }, `mention-${index}`));
+                ], onPress: () => react_native_1.Linking.openURL(`https://bsky.app/profile/${mtnftr.did || ""}`), children: obj.text }, `mention-${index}`));
         }
     }
     else {
-        return _jsx(Text, { children: obj.text }, `text-${index}`);
+        return (0, jsx_runtime_1.jsx)(text_1.Text, { children: obj.text }, `text-${index}`);
     }
 };
 const RichTextMessage = ({ text, facets, }) => {
     if (!facets?.length)
-        return _jsx(Text, { children: text });
-    const userCache = useLivestreamStore((state) => state.authors);
-    let segs = segmentize(text, facets);
+        return (0, jsx_runtime_1.jsx)(text_1.Text, { children: text });
+    const userCache = (0, livestream_store_1.useLivestreamStore)((state) => state.authors);
+    let segs = (0, facet_1.segmentize)(text, facets);
     return segs.map((seg, i) => segmentedObject(seg, i, userCache));
 };
-export const RenderChatMessage = memo(function RenderChatMessage({ item, showReply = true, showTime = true, }) {
-    const formatTime = useCallback((dateString) => {
+exports.RenderChatMessage = (0, react_1.memo)(function RenderChatMessage({ item, showReply = true, showTime = true, }) {
+    const formatTime = (0, react_1.useCallback)((dateString) => {
         return new Date(dateString).toLocaleString(undefined, {
             hour: "2-digit",
             minute: "2-digit",
             hour12: false,
         });
     }, []);
-    return (_jsxs(_Fragment, { children: [item.replyTo && showReply && (_jsx(View, { style: [
-                    gap.all[2],
-                    layout.flex.row,
-                    w.percent[100],
-                    borders.left.width.medium,
-                    borders.left.color.gray[700],
-                    ml[4],
-                    pl[4],
-                    opacity[80],
-                ], children: _jsxs(Text, { numberOfLines: 1, style: [flex.shrink[1], mr[4]], children: [_jsxs(Text, { style: {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [item.replyTo && showReply && ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
+                    atoms_1.gap.all[2],
+                    ui_1.layout.flex.row,
+                    atoms_1.w.percent[100],
+                    atoms_1.borders.left.width.medium,
+                    atoms_1.borders.left.color.gray[700],
+                    atoms_1.ml[4],
+                    atoms_1.pl[4],
+                    atoms_1.opacity[80],
+                ], children: (0, jsx_runtime_1.jsxs)(text_1.Text, { numberOfLines: 1, style: [atoms_1.flex.shrink[1], atoms_1.mr[4]], children: [(0, jsx_runtime_1.jsxs)(text_1.Text, { style: {
                                 color: getRgbColor(item.replyTo.chatProfile.color),
                                 fontWeight: "thin",
-                            }, children: ["@", item.replyTo.author.handle] }), " ", _jsx(Text, { style: {
-                                color: atoms.colors.gray[300],
+                            }, children: ["@", item.replyTo.author.handle] }), " ", (0, jsx_runtime_1.jsx)(text_1.Text, { style: {
+                                color: ui_1.atoms.colors.gray[300],
                                 fontStyle: "italic",
-                            }, children: item.replyTo.record.text })] }) })), _jsxs(View, { style: [gap.all[2], layout.flex.row, w.percent[100]], children: [showTime && (_jsx(Text, { style: {
+                            }, children: item.replyTo.record.text })] }) })), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [atoms_1.gap.all[2], ui_1.layout.flex.row, atoms_1.w.percent[100]], children: [showTime && ((0, jsx_runtime_1.jsx)(text_1.Text, { style: {
                             fontVariant: ["tabular-nums"],
-                            color: atoms.colors.gray[300],
-                        }, children: formatTime(item.record.createdAt) })), _jsxs(Text, { weight: "bold", color: "default", style: [flex.shrink[1]], children: [_jsxs(Text, { style: [
+                            color: ui_1.atoms.colors.gray[300],
+                        }, children: formatTime(item.record.createdAt) })), (0, jsx_runtime_1.jsxs)(text_1.Text, { weight: "bold", color: "default", style: [atoms_1.flex.shrink[1]], children: [(0, jsx_runtime_1.jsxs)(text_1.Text, { style: [
                                     {
                                         cursor: "pointer",
                                         color: getRgbColor(item.chatProfile?.color),
                                     },
-                                ], children: ["@", item.author.handle] }), ":", " ", _jsx(RichTextMessage, { text: item.record.text, facets: item.record.facets || [] })] })] })] }));
+                                ], children: ["@", item.author.handle] }), ":", " ", (0, jsx_runtime_1.jsx)(RichTextMessage, { text: item.record.text, facets: item.record.facets || [] })] })] })] }));
 }, (prevProps, nextProps) => {
     return (prevProps.item.author.handle === nextProps.item.author.handle &&
         prevProps.item.record.text === nextProps.item.record.text);

package/dist/components/chat/chat.js

@@ -1,44 +1,48 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Reply, ShieldEllipsis } from "lucide-react-native";
-import { memo, useRef } from "react";
-import { FlatList, Platform, Pressable } from "react-native";
-import Swipeable from "react-native-gesture-handler/ReanimatedSwipeable";
-import Reanimated, { useAnimatedStyle, } from "react-native-reanimated";
-import { Text, useChat, usePlayerStore, useSetReplyToMessage, View, } from "../../";
-import { flex, py, w } from "../../lib/theme/atoms";
-import { RenderChatMessage } from "./chat-message";
-import { ModView } from "./mod-view";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Chat = Chat;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const lucide_react_native_1 = require("lucide-react-native");
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const ReanimatedSwipeable_1 = tslib_1.__importDefault(require("react-native-gesture-handler/ReanimatedSwipeable"));
+const react_native_reanimated_1 = tslib_1.__importStar(require("react-native-reanimated"));
+const __1 = require("../../");
+const atoms_1 = require("../../lib/theme/atoms");
+const chat_message_1 = require("./chat-message");
+const mod_view_1 = require("./mod-view");
 function RightAction(prog, drag) {
-    const styleAnimation = useAnimatedStyle(() => {
+    const styleAnimation = (0, react_native_reanimated_1.useAnimatedStyle)(() => {
         return {
             transform: [{ translateX: drag.value + 25 }],
         };
     });
-    return (_jsx(Reanimated.View, { style: [styleAnimation], children: _jsx(Reply, { color: "white" }) }));
+    return ((0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: [styleAnimation], children: (0, jsx_runtime_1.jsx)(lucide_react_native_1.Reply, { color: "white" }) }));
 }
 function LeftAction(prog, drag) {
-    const styleAnimation = useAnimatedStyle(() => {
+    const styleAnimation = (0, react_native_reanimated_1.useAnimatedStyle)(() => {
         return {
             transform: [{ translateX: drag.value - 25 }],
         };
     });
-    return (_jsx(Reanimated.View, { style: [styleAnimation], children: _jsx(ShieldEllipsis, { color: "white" }) }));
+    return ((0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: [styleAnimation], children: (0, jsx_runtime_1.jsx)(lucide_react_native_1.ShieldEllipsis, { color: "white" }) }));
 }
-const SHOWN_MSGS = Platform.OS === "android" || Platform.OS === "ios" ? 100 : 25;
+const SHOWN_MSGS = react_native_1.Platform.OS === "android" || react_native_1.Platform.OS === "ios" ? 100 : 25;
 const keyExtractor = (item, index) => {
     return `${item.uri}`;
 };
-const ChatLine = memo(({ item }) => {
-    const setReply = useSetReplyToMessage();
-    const setModMsg = usePlayerStore((state) => state.setModMessage);
-    const swipeableRef = useRef(null);
-    return (_jsx(Pressable, { onLongPress: () => setModMsg(item), children: _jsx(Swipeable, { containerStyle: [py[1]], friction: 2, enableTrackpadTwoFingerGesture: true, rightThreshold: 40, renderRightActions: Platform.OS === "android" ? undefined : RightAction, renderLeftActions: Platform.OS === "android" ? undefined : LeftAction, overshootFriction: 9, ref: (ref) => {
+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);
+    return ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { onLongPress: () => setModMsg(item), children: (0, jsx_runtime_1.jsx)(ReanimatedSwipeable_1.default, { containerStyle: [atoms_1.py[1]], friction: 2, enableTrackpadTwoFingerGesture: true, rightThreshold: 40, renderRightActions: react_native_1.Platform.OS === "android" ? undefined : RightAction, renderLeftActions: react_native_1.Platform.OS === "android" ? undefined : LeftAction, overshootFriction: 9, ref: (ref) => {
                 swipeableRef.current = ref;
             }, onSwipeableOpen: (r) => {
-                if (r === (Platform.OS === "android" ? "right" : "left")) {
+                if (r === (react_native_1.Platform.OS === "android" ? "right" : "left")) {
                     setReply(item);
                 }
-                if (r === (Platform.OS === "android" ? "left" : "right")) {
+                if (r === (react_native_1.Platform.OS === "android" ? "left" : "right")) {
                     setModMsg(item);
                 }
                 // close this swipeable
@@ -46,11 +50,11 @@ const ChatLine = memo(({ item }) => {
                 if (swipeable) {
                     swipeable.close();
                 }
-            }, children: _jsx(RenderChatMessage, { item: item }) }) }));
+            }, children: (0, jsx_runtime_1.jsx)(chat_message_1.RenderChatMessage, { item: item }) }) }));
 });
-export function Chat({ shownMessages = SHOWN_MSGS, style: propsStyle, ...props }) {
-    const chat = useChat();
+function Chat({ shownMessages = SHOWN_MSGS, style: propsStyle, ...props }) {
+    const chat = (0, __1.useChat)();
     if (!chat)
-        return (_jsx(View, { style: [flex.shrink[1]], children: _jsx(Text, { children: "Loading chaat..." }) }));
-    return (_jsxs(View, { style: [flex.shrink[1]].concat(propsStyle || []), children: [_jsx(FlatList, { style: [flex.grow[1], flex.shrink[1], w.percent[100]], data: chat, inverted: true, keyExtractor: keyExtractor, renderItem: ({ item, index }) => _jsx(ChatLine, { item: item }), removeClippedSubviews: true, maxToRenderPerBatch: 10, initialNumToRender: 10, updateCellsBatchingPeriod: 50 }), _jsx(ModView, {})] }));
+        return ((0, jsx_runtime_1.jsx)(__1.View, { style: [atoms_1.flex.shrink[1]], children: (0, jsx_runtime_1.jsx)(__1.Text, { children: "Loading chaat..." }) }));
+    return ((0, jsx_runtime_1.jsxs)(__1.View, { style: [atoms_1.flex.shrink[1]].concat(propsStyle || []), children: [(0, jsx_runtime_1.jsx)(react_native_1.FlatList, { style: [atoms_1.flex.grow[1], atoms_1.flex.shrink[1], atoms_1.w.percent[100]], data: chat, inverted: true, keyExtractor: keyExtractor, renderItem: ({ item, index }) => (0, jsx_runtime_1.jsx)(ChatLine, { item: item }), removeClippedSubviews: true, maxToRenderPerBatch: 10, initialNumToRender: 10, updateCellsBatchingPeriod: 50 }), (0, jsx_runtime_1.jsx)(mod_view_1.ModView, {})] }));
 }

package/dist/components/chat/mention-suggestions.js

@@ -1,18 +1,21 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { Pressable } from "react-native";
-import { Text, View } from "../..";
-import { bg, layout, left, right, zIndex } from "../../lib/theme/atoms";
-export function MentionSuggestions({ authors, onSelect, highlightedIndex, }) {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MentionSuggestions = MentionSuggestions;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_1 = require("react-native");
+const __1 = require("../..");
+const atoms_1 = require("../../lib/theme/atoms");
+function MentionSuggestions({ authors, onSelect, highlightedIndex, }) {
     if (!authors || authors.size === 0) {
         return null; // No authors to display
     }
     const authorHandles = Array.from(authors.keys());
-    return (_jsx(View, { style: [
-            bg.gray[800],
-            layout.position.absolute,
-            left[0],
-            right[0],
-            zIndex[50],
+    return ((0, jsx_runtime_1.jsx)(__1.View, { style: [
+            atoms_1.bg.gray[800],
+            atoms_1.layout.position.absolute,
+            atoms_1.left[0],
+            atoms_1.right[0],
+            atoms_1.zIndex[50],
             {
                 bottom: "100%",
                 borderRadius: 8,
@@ -20,7 +23,7 @@ export function MentionSuggestions({ authors, onSelect, highlightedIndex, }) {
             },
         ], children: authorHandles.map((handle, index) => {
             let profile = authors.get(handle);
-            return (_jsx(Pressable, { onPress: () => onSelect(handle), style: [
+            return ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { onPress: () => onSelect(handle), style: [
                     {
                         padding: 8,
                         flexDirection: "row",
@@ -29,7 +32,7 @@ export function MentionSuggestions({ authors, onSelect, highlightedIndex, }) {
                             ? "rgba(0, 0, 0, 0.1)"
                             : "rgba(0, 0, 0, 0.5)",
                     },
-                ], children: _jsxs(Text, { style: {
+                ], children: (0, jsx_runtime_1.jsxs)(__1.Text, { style: {
                         color: profile?.color
                             ? `rgb(${profile.color.red}, ${profile.color.green}, ${profile.color.blue})`
                             : "black",

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

@@ -1,20 +1,23 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useEffect, useRef } from "react";
-import { gap, mr } from "../../lib/theme/atoms";
-import { usePlayerStore } from "../../player-store";
-import { useCreateBlockRecord } from "../../streamplace-store/block";
-import { usePDSAgent } from "../../streamplace-store/xrpc";
-import { DropdownMenu, DropdownMenuGroup, DropdownMenuItem, DropdownMenuTrigger, layout, ResponsiveDropdownMenuContent, Text, View, } from "../ui";
-import { RenderChatMessage } from "./chat-message";
-export const ModView = forwardRef(() => {
-    const triggerRef = useRef(null);
-    const message = usePlayerStore((state) => state.modMessage);
-    let agent = usePDSAgent();
-    let createBlockRecord = useCreateBlockRecord();
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ModView = void 0;
+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 block_1 = require("../../streamplace-store/block");
+const xrpc_1 = require("../../streamplace-store/xrpc");
+const ui_1 = require("../ui");
+const chat_message_1 = require("./chat-message");
+exports.ModView = (0, react_1.forwardRef)(() => {
+    const triggerRef = (0, react_1.useRef)(null);
+    const message = (0, player_store_1.usePlayerStore)((state) => state.modMessage);
+    let agent = (0, xrpc_1.usePDSAgent)();
+    let createBlockRecord = (0, block_1.useCreateBlockRecord)();
     if (!agent?.did) {
-        _jsx(View, { style: [layout.flex.row, layout.flex.alignCenter, gap.all[2]], children: _jsx(Text, { children: "Log in to submit mod actions" }) });
+        (0, jsx_runtime_1.jsx)(ui_1.View, { style: [ui_1.layout.flex.row, ui_1.layout.flex.alignCenter, atoms_1.gap.all[2]], children: (0, jsx_runtime_1.jsx)(ui_1.Text, { children: "Log in to submit mod actions" }) });
     }
-    useEffect(() => {
+    (0, react_1.useEffect)(() => {
         if (message) {
             console.log("opening mod view");
             triggerRef.current?.open();
@@ -24,10 +27,10 @@ export const ModView = forwardRef(() => {
             triggerRef.current?.close();
         }
     }, [message]);
-    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { ref: triggerRef, children: _jsx(View, {}) }), _jsx(ResponsiveDropdownMenuContent, { children: message && (_jsxs(_Fragment, { children: [_jsx(DropdownMenuGroup, { children: _jsx(DropdownMenuItem, { children: _jsx(View, { style: [layout.flex.column, mr[5], { gap: 6 }], children: _jsx(RenderChatMessage, { item: message }) }) }) }), _jsx(DropdownMenuGroup, { title: `Moderation actions`, children: _jsx(DropdownMenuItem, { disabled: message.author.did === agent?.did, onPress: () => {
+    return ((0, jsx_runtime_1.jsxs)(ui_1.DropdownMenu, { children: [(0, jsx_runtime_1.jsx)(ui_1.DropdownMenuTrigger, { ref: triggerRef, children: (0, jsx_runtime_1.jsx)(ui_1.View, {}) }), (0, jsx_runtime_1.jsx)(ui_1.ResponsiveDropdownMenuContent, { children: message && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ui_1.DropdownMenuGroup, { children: (0, jsx_runtime_1.jsx)(ui_1.DropdownMenuItem, { children: (0, jsx_runtime_1.jsx)(ui_1.View, { style: [ui_1.layout.flex.column, atoms_1.mr[5], { gap: 6 }], children: (0, jsx_runtime_1.jsx)(chat_message_1.RenderChatMessage, { item: message }) }) }) }), (0, jsx_runtime_1.jsx)(ui_1.DropdownMenuGroup, { title: `Moderation actions`, children: (0, jsx_runtime_1.jsx)(ui_1.DropdownMenuItem, { disabled: message.author.did === agent?.did, onPress: () => {
                                     console.log("Creating block record");
                                     createBlockRecord(message.author.did)
                                         .then((r) => console.log(r))
                                         .catch((e) => console.error(e));
-                                }, children: _jsx(Text, { color: "destructive", children: message.author.did === agent?.did ? (_jsx(_Fragment, { children: "Block yourself (you can't block yourself)" })) : (_jsxs(_Fragment, { children: ["Block user @", message.author.handle, " from this channel"] })) }) }) })] })) })] }));
+                                }, children: (0, jsx_runtime_1.jsx)(ui_1.Text, { color: "destructive", children: message.author.did === agent?.did ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: "Block yourself (you can't block yourself)" })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Block user @", message.author.handle, " from this channel"] })) }) }) })] })) })] }));
 });

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

@@ -1,20 +1,24 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useRef } from "react";
-import { getFirstPlayerID, usePlayerStore } from "../..";
-import { View } from "../../components/ui";
-import Video from "./video";
-export function Fullscreen(props) {
-    const playerId = getFirstPlayerID();
-    const protocol = usePlayerStore((x) => x.protocol, playerId);
-    const fullscreen = usePlayerStore((x) => x.fullscreen, playerId);
-    const setFullscreen = usePlayerStore((x) => x.setFullscreen, playerId);
-    const setSrc = usePlayerStore((x) => x.setSrc);
-    const divRef = useRef(null);
-    const videoRef = useRef(null);
-    useEffect(() => {
+"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"));
+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]);
-    useEffect(() => {
+    (0, react_1.useEffect)(() => {
         if (!divRef.current) {
             return;
         }
@@ -53,7 +57,7 @@ export function Fullscreen(props) {
             }
         })();
     }, [fullscreen, protocol]);
-    useEffect(() => {
+    (0, react_1.useEffect)(() => {
         const listener = () => {
             console.log("fullscreenchange", document.fullscreenElement);
             setFullscreen(!!document.fullscreenElement);
@@ -65,5 +69,5 @@ export function Fullscreen(props) {
             document.body.removeEventListener("webkitfullscreenchange", listener);
         };
     }, []);
-    return (_jsx(View, { ref: divRef, children: _jsx(Video, {}) }));
+    return ((0, jsx_runtime_1.jsx)(ui_1.View, { ref: divRef, children: (0, jsx_runtime_1.jsx)(video_1.default, {}) }));
 }