@streamplace/components 0.9.7 → 0.9.10

package/locales/zh-Hans/settings.ftl

@@ -0,0 +1,222 @@
+# Settings Page Translations - Chinese (Simplified)
+
+## App Version
+app-version = Streamplace v{ $version }
+download-new-update = 下载新更新
+check-for-updates = 检查更新
+
+bundled-runtype = 捆绑版
+ota-runtype = 空中下载 (OTA)
+recovery-runtype = 复原模式
+
+modal-latest-version = 您正在使用最新版本。
+modal-no-update-available = 您已经在使用最新版本的 Streamplace，太棒了！
+modal-update-available-title = 有可用更新
+modal-update-available-description = 新版本的 Streamplace 已准备好下载
+modal-update-failed = 更新检查失败。您可能需要透过 { $store } 更新应用程序。
+modal-update-failed-title = 更新失败
+modal-update-failed-description = 更新检查失败。您可能需要透过 { $store } 更新应用程序。
+button-reload-app-on-update = 套用更新 (将重新加载应用程序)
+
+## Custom Node Settings
+use-custom-node = 使用自定义节点
+default-url = 默认：{ $url }
+enter-custom-node-url = 输入自定义节点网址
+save-button = 保存
+
+## Language Settings
+language-selection = 语言
+language-selection-description = 选择您偏好的语言
+input-search-languages = 搜索语言...
+help-translate = 帮助我们翻译 Streamplace
+help-translate-description = 我们正在寻找志愿者协助将 Streamplace 翻译成更多语言。如果您有兴趣，请在 Discord 或 GitHub 上与我们联系！
+currently-translating = 翻译正在进行中
+currently-translating-description = 应用程序的某些部分可能看起来不完整。感谢您的耐心等待！
+
+## Debug Recording
+debug-recording-title = 允许 { $host } 录制您的直播串流以进行除错和服务改善
+debug-recording-description = 可选项目
+
+## Key Management
+manage-keys = 管理密钥
+
+## Settings Page Specific
+settings-title = 设置
+
+## Navigation Categories
+about = 关于
+account = 帐户
+advanced = 高端
+danmu = 弹幕
+developer = 开发者
+languages = 语言
+privacy-security = 隐私与安全
+streaming = 串流
+
+## Common Actions
+cancel = 取消
+create = 创建
+delete = 删除
+refresh = 刷新
+save-button = 保存
+sign-in = 登录
+update = 更新
+log-out = 注销
+optional = 选填
+
+## Account Settings
+account-greeting = 嗨，@{ $handle }。
+edit-profile-bluesky = 在 Bluesky 编辑个人数据
+change-name-color = 变更名称颜色
+
+## Key Management
+key-management = 密钥管理
+key-manager = 密钥管理器
+manage-keys = 管理密钥
+your-stream-pubkeys = 您的串流公开密钥
+no-keys = 尚未设置密钥
+pubkey-description = 公开密钥与串流密钥 (用于串流软件) 配对以签署和验证您的串流
+keys-count = { $count } 个密钥
+
+## Recommendations
+recommendations = 推荐主播
+manage-recommendations = 管理推荐主播
+recommendations-to-others = 向他人推荐主播
+recommendations-description = 向您的观众推荐最多 8 位主播
+no-recommendations-yet = 尚未配置推荐
+add-recommendation = 添加推荐
+streamer-did = 主播 DID
+recommendations-count = { $count } 位推荐主播
+
+## Webhook Management
+webhooks = Webhooks
+webhook-integrations = Webhook 集成
+webhook-integrations-description = 连接外部服务以即时接收有关您串流的更新
+create-webhook = 创建 Webhook
+edit-webhook = 编辑 Webhook
+delete-webhook = 删除 Webhook
+no-webhooks-yet = 尚未设置 Webhook
+failed-load-webhooks = 加载 Webhook 失败
+webhook-will-no-longer-receive-events = 此 Webhook 将不再接收事件
+create-first-webhook-description = 创建您的第一个 Webhook 以开始接收串流事件
+example-captain-hook = Hook 船长
+webhooks-count = { $count } 个 Webhook
+
+## Webhook Events
+activates-on = 触发于：
+events = 事件
+events-livestream = 直播串流事件
+events-chat = 聊天事件
+untitled-webhook = 未命名的 Webhook
+inactive = 停用
+active = 活动
+
+## Multistreaming
+multistream = 多重串流
+multistream-targets = 多重串流目标
+multistream-description = 自动将您的 Streamplace 直播推送到 Twitch 或 YouTube 等其他直播平台。
+create-multistream-target = 创建多重串流目标
+untitled-multistream-target = 未命名目标
+failed-load-multistream-targets = 加载多重串流目标失败。请重试。
+failed-toggle-multistream-target = 切换多重串流目标失败。请重试。
+failed-delete-multistream-target = 删除多重串流目标失败。请重试。
+no-multistream-targets-yet = 还没有目标！
+multistream-targets-count = { $count } 个目标
+multistream-delete-target-confirmation = 您确定要删除“{ $target }”吗？
+this-action-cannot-be-undone = 此操作无法撤销。
+rtmp-target-name = RTMP 目标
+rtmp-target-url = RTMP 网址
+rtmp-target-name-placeholder = 我的多重串流目标
+multistream-create-target = 创建目标
+multistream-edit-target = 编辑目标
+created = 创建于
+status = 状态
+
+## Debug Recording
+debug-recording = 调试录制
+
+## Danmu Settings
+danmu = 弹幕
+danmu-enabled = 启用弹幕
+danmu-enabled-description = 将即时聊天消息以浮动评论的形式显示在您的屏幕上
+danmu-opacity = 不透明度
+danmu-speed = 速度
+danmu-lane-count = 轨道数量
+danmu-max-messages = 最大消息数
+
+## General
+app-version-description = 当前没有可用的更新
+confirm-delete = 您确定要删除吗？
+action-cannot-be-undone = 此操作无法撤销
+name-optional = 名称 (选填)
+deleting = 正在删除...
+saving = 正在保存...
+go-to-dashboard = 前往仪表板
+need-setup-live-dashboard = 需要先设置串流吗？请访问直播仪表板
+no-languages-found = 找不到语言
+
+## Branding Administration
+branding = 品牌
+branding-admin = 品牌管理
+branding-admin-description = 自定义您的 Streamplace 实例。请注意，设置可能需要几小时才能生效。
+branding-login-required = 请登录以管理品牌
+branding-configuration = 配置
+branding-text-settings = 文字设置
+branding-colors = 颜色
+branding-legal-links = 法律链接
+branding-images = 图像
+
+## Branding Fields
+branding-broadcaster-did = 主播 DID
+branding-broadcaster-did-description = 留空以使用服务器默认值
+branding-site-title = 网站标题
+branding-site-title-placeholder = 输入新网站标题
+branding-site-description = 网站描述
+branding-site-description-placeholder = 输入网站描述
+branding-default-streamer = 默认主播
+branding-default-streamer-none = 无
+branding-default-streamer-placeholder = did:plc:...
+branding-clear-default-streamer = 清除默认主播
+branding-primary-color = 首要颜色
+branding-primary-color-placeholder = #6366f1
+branding-accent-color = 强调色
+branding-accent-color-placeholder = #8b5cf6
+branding-main-logo = 主标志
+branding-main-logo-description = SVG、PNG 或 JPEG (最大 500KB)
+branding-favicon = 网站图标
+branding-favicon-description = SVG、PNG 或 ICO (最大 100KB)
+branding-sidebar-bg = 侧边栏背景图片
+branding-sidebar-bg-description = SVG、PNG 或 JPEG (最大 500KB) - 显示在侧边栏底部，全宽显示。为了获得最佳效果，请上传一张带有透明度的图片，因为目前没有单独的透明度选项。
+branding-current = 当前：{ $value }
+branding-dimensions = { $height } x { $width }
+
+## Branding Actions
+branding-upload-logo = 上传标志
+branding-delete-logo = 删除标志
+branding-upload-favicon = 上传网站图标
+branding-delete-favicon = 删除网站图标
+branding-upload-background = 上传背景
+branding-delete-background = 删除背景
+branding-web-only = 图像上传仅在网页端可用。
+
+## Branding Legal Links
+refresh-branding = 更新品牌资源
+branding-add-legal-link = 添加法律链接
+branding-edit-legal-link = 编辑法律链接
+branding-legal-link-text-placeholder = 链接文本 (例如：隐私政策)
+branding-legal-link-url-placeholder = 网址 (例如：https://example.com/privacy)
+add = 添加
+edit = 编辑
+
+## Branding Toast Messages
+branding-not-authenticated = 请先登录
+branding-empty-value = 请输入一个数值
+branding-update-success = { $key } 更新成功
+branding-upload-success = { $key } 上传成功
+branding-delete-success = { $key } 删除成功
+branding-upload-failed = 上传失败
+branding-delete-failed = 删除失败
+branding-not-available = 文件上传仅在网页版上可用
+
+## Navigation Categories (About Page)
+node-legal-documents = 主播专属文档

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamplace/components",
-  "version": "0.9.7",
+  "version": "0.9.10",
   "description": "Streamplace React (Native) Components",
   "main": "dist/index.js",
   "types": "src/index.tsx",
@@ -81,5 +81,5 @@
     "i18n:watch": "nodemon --watch 'locales/**/*.ftl' --exec 'node scripts/compile-translations.js'",
     "i18n:extract": "i18next-cli extract && node scripts/migrate-i18n.js"
   },
-  "gitHead": "46b5c8833f5c53934374899c417e6c83a9b0c1f2"
+  "gitHead": "7425b89eb9dd8fa0be23a19861508714b1d233cd"
 }

package/src/components/chat/badge.tsx

@@ -0,0 +1,45 @@
+import { Image } from "react-native";
+import { ChatMessageViewHydrated } from "streamplace";
+
+export const BADGE_IMAGES: Record<string, ReturnType<typeof require>> = {
+  "place.stream.badge.defs#mod": require("../../../assets/badges/mod_2x.png"),
+  "place.stream.badge.defs#streamer": require("../../../assets/badges/live_2x.png"),
+  "place.stream.badge.defs#vip": require("../../../assets/badges/vip_2x.png"),
+};
+
+export const Badge = ({
+  badgeType,
+  size = 18,
+}: {
+  badgeType: string;
+  size?: number;
+}) => {
+  const source = BADGE_IMAGES[badgeType];
+  if (!source) return null;
+  return (
+    <Image
+      source={source}
+      style={{
+        height: size,
+        width: size,
+        marginBottom: -size / 5,
+        marginRight: 2,
+      }}
+    />
+  );
+};
+
+export const BadgeDisplayRow = ({
+  badges,
+}: {
+  badges: ChatMessageViewHydrated["badges"];
+}) => {
+  if (!badges?.length) return null;
+  return (
+    <>
+      {badges.map((badge, index) => (
+        <Badge key={index} badgeType={badge.badgeType} />
+      ))}
+    </>
+  );
+};

package/src/components/chat/chat-box.tsx

@@ -1,13 +1,15 @@
-import Picker from "@emoji-mart/react";
 import Graphemer from "graphemer";
 import { AtSignIcon, ExternalLink, X } from "lucide-react-native";
 import { env } from "process";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { ReactNode, useEffect, useMemo, useRef, useState } from "react";
 import { Platform, Pressable, TextInput } from "react-native";
 import { ChatMessageViewHydrated } from "streamplace";
 import { Button, Loader, Text, toast, useTheme, View } from "../../";
 import { handleSlashCommand } from "../../lib/slash-commands";
-import { registerTeleportCommand } from "../../lib/slash-commands/teleport";
+import {
+  createTeleport,
+  registerTeleportCommand,
+} from "../../lib/slash-commands/teleport";
 import { StreamNotifications } from "../../lib/stream-notifications";
 import { SystemMessages } from "../../lib/system-messages";
 import {
@@ -24,6 +26,7 @@ import {
   w,
 } from "../../lib/theme/atoms";
 import {
+  useAddSystemMessage,
   useChat,
   useCreateChatMessage,
   useLivestream,
@@ -34,8 +37,13 @@ import {
 import { useDID, usePDSAgent } from "../../streamplace-store";
 import { Textarea } from "../ui/textarea";
 import { RenderChatMessage } from "./chat-message";
-import { EmojiData, EmojiSuggestions } from "./emoji-suggestions";
+import {
+  EmojiData,
+  EmojiSuggestions,
+  getSkinNative,
+} from "./emoji-suggestions";
 import { MentionSuggestions } from "./mention-suggestions";
+import { TeleportModal } from "./teleport-modal";
 
 const COOL_EMOJI_LIST = [
   // @ts-ignore we can iterate through this just fine it seems
@@ -49,11 +57,21 @@ export function ChatBox({
   chatBoxStyle,
   emojiData,
   setIsChatVisible,
+  onEmojiPickerToggle,
+  emojiPicker,
+  skinTone = 0,
 }: {
   isPopout?: boolean;
   chatBoxStyle?: any;
   emojiData: EmojiData | null;
   setIsChatVisible?: (visible: boolean) => void;
+  onEmojiPickerToggle?: () => void;
+  emojiPicker?: (
+    isOpen: boolean,
+    onClose: () => void,
+    onSelect: (emoji: any) => void,
+  ) => ReactNode;
+  skinTone?: number;
 }) {
   const [submitting, setSubmitting] = useState(false);
   const [message, setMessage] = useState("");
@@ -68,6 +86,7 @@ export function ChatBox({
     new Map(),
   );
   const [filteredEmojis, setFilteredEmojis] = useState<any[]>([]);
+  const [showTeleportModal, setShowTeleportModal] = useState(false);
   const isOverLimit = graphemer.countGraphemes(message) > 300;
 
   let linfo = useLivestream();
@@ -76,6 +95,7 @@ export function ChatBox({
 
   const chat = useChat();
   const createChatMessage = useCreateChatMessage();
+  const addSystemMessage = useAddSystemMessage();
   const replyTo = useReplyToMessage();
   const setReplyToMessage = useSetReplyToMessage();
   const textAreaRef = useRef<TextInput>(null);
@@ -88,7 +108,9 @@ export function ChatBox({
 
   useEffect(() => {
     if (pdsAgent && userDID) {
-      registerTeleportCommand(pdsAgent, userDID, setActiveTeleportUri);
+      registerTeleportCommand(pdsAgent, userDID, setActiveTeleportUri, () =>
+        setShowTeleportModal(true),
+      );
     }
   }, [pdsAgent, userDID, setActiveTeleportUri]);
 
@@ -105,7 +127,12 @@ export function ChatBox({
 
   useEffect(() => {
     if (pdsAgent && linfo?.author?.did && pdsAgent.did === linfo.author.did) {
-      registerTeleportCommand(pdsAgent, pdsAgent.did, setActiveTeleportUri);
+      registerTeleportCommand(
+        pdsAgent,
+        pdsAgent.did,
+        setActiveTeleportUri,
+        () => setShowTeleportModal(true),
+      );
     }
   }, [pdsAgent, linfo?.author?.did, setActiveTeleportUri]);
 
@@ -116,11 +143,37 @@ export function ChatBox({
   };
 
   const handleEmojiSelect = (emoji: any) => {
-    const beforeColon = message.slice(0, message.lastIndexOf(":"));
-    setMessage(`${beforeColon}${emoji.skins[0]?.native} `);
+    console.log("[ChatBox] handleEmojiSelect", emoji);
+    if (emoji.s) {
+      const beforeColon = message.slice(0, message.lastIndexOf(":"));
+      setMessage(`${beforeColon}${getSkinNative(emoji, skinTone)} `);
+    } else if (emoji.type === "standard") {
+      setMessage(message + emoji.native);
+    } else if (emoji.type === "custom") {
+      setMessage(message + `:${emoji.name}: `);
+    }
     setShowEmojiSuggestions(false);
   };
 
+  const handleTeleportSubmit = async (
+    targetHandle: string,
+    countdownSeconds: number,
+  ) => {
+    if (!pdsAgent || !userDID) return;
+
+    const result = await createTeleport(
+      pdsAgent,
+      userDID,
+      targetHandle,
+      countdownSeconds,
+      setActiveTeleportUri,
+    );
+
+    if (!result.success && result.error) {
+      SystemMessages.commandError(result.error);
+    }
+  };
+
   const updateSuggestions = (text: string) => {
     // Handle mentions
     const atIndex = text.lastIndexOf("@");
@@ -205,15 +258,15 @@ export function ChatBox({
                 sort: [5, emoji.id.toLowerCase().indexOf(searchText), 0],
               }; // includes id
             }
-            if (emoji.name.toLowerCase().includes(searchText)) {
+            if (emoji.m.toLowerCase().includes(searchText)) {
               return {
                 emoji,
-                sort: [6, emoji.name.toLowerCase().indexOf(searchText), 0],
+                sort: [6, emoji.m.toLowerCase().indexOf(searchText), 0],
               };
             }
             if (
-              emoji.keywords &&
-              emoji.keywords.some((keyword: string) =>
+              emoji.k &&
+              emoji.k.some((keyword: string) =>
                 keyword.toLowerCase().includes(searchText),
               )
             ) {
@@ -280,7 +333,7 @@ export function ChatBox({
       if (result.handled) {
         if (result.error) {
           console.error("Slash command error:", result.error);
-          SystemMessages.commandError(result.error);
+          addSystemMessage(SystemMessages.commandError(result.error));
         }
         return;
       }
@@ -321,6 +374,11 @@ export function ChatBox({
 
   return (
     <View style={[layout.flex.column, flex.shrink[1], gap.all[2]]}>
+      <TeleportModal
+        open={showTeleportModal}
+        onOpenChange={setShowTeleportModal}
+        onSubmit={handleTeleportSubmit}
+      />
       {replyTo && (
         <View
           style={[
@@ -360,45 +418,6 @@ export function ChatBox({
           </Pressable>
         </View>
       )}
-      {showEmojiSelector && (
-        <View
-          style={{
-            position: "absolute",
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-            zIndex: 200,
-          }}
-          pointerEvents="box-none"
-        >
-          {/* Overlay to catch outside clicks */}
-          <Pressable
-            style={{
-              position: "absolute",
-              top: 0,
-              left: 0,
-              right: 0,
-              bottom: 0,
-            }}
-            onPress={() => setShowEmojiSelector(false)}
-          />
-          <View
-            style={{
-              position: "absolute",
-              bottom: "100%",
-              left: 0,
-              zIndex: 2001,
-            }}
-            pointerEvents="auto"
-          >
-            <Picker
-              data={emojiData}
-              onEmojiSelect={(e) => setMessage(message + e.native)}
-            />
-          </View>
-        </View>
-      )}
       <View style={[layout.flex.row, layout.flex.alignCenter, gap.all[2]]}>
         <Textarea
           ref={textAreaRef}
@@ -508,6 +527,7 @@ export function ChatBox({
           emojis={filteredEmojis}
           highlightedIndex={highlightedIndex}
           onSelect={handleEmojiSelect}
+          skinTone={skinTone}
         />
       )}
       {Platform.OS === "web" && (
@@ -516,9 +536,14 @@ export function ChatBox({
             layout.flex.row,
             mb[2],
             gap.all[2],
-            { justifyContent: "flex-end" },
+            { justifyContent: "flex-end", position: "relative" },
           ]}
         >
+          {emojiPicker?.(
+            showEmojiSelector,
+            () => setShowEmojiSelector(false),
+            handleEmojiSelect,
+          )}
           {env.NODE_ENV === "development" && (
             <Button
               variant="secondary"
@@ -562,9 +587,14 @@ export function ChatBox({
           >
             <Button
               variant="secondary"
+              id="web-emoji-picker-btn"
               aria-label="Insert Emoji"
               style={{ borderRadius: 16, maxWidth: 44, aspectRatio: 1 }}
-              onPress={() => setShowEmojiSelector(!showEmojiSelector)}
+              onPress={() => {
+                onEmojiPickerToggle
+                  ? onEmojiPickerToggle()
+                  : setShowEmojiSelector(!showEmojiSelector);
+              }}
             >
               <Text>{COOL_EMOJI_LIST[emojiIconIndex]}</Text>
             </Button>

package/src/components/chat/chat-message.tsx

@@ -25,6 +25,8 @@ interface Facet {
 
 import { useLivestreamStore } from "../../livestream-store";
 import { Text } from "../ui/text";
+import { BadgeDisplayRow } from "./badge";
+import { UserProfileCard } from "./user-profile-card";
 
 const getRgbColor = (color?: { red: number; green: number; blue: number }) =>
   color ? `rgb(${color.red}, ${color.green}, ${color.blue})` : colors.gray[500];
@@ -152,39 +154,41 @@ export const RenderChatMessage = memo(
             </Text>
           </View>
         )}
-        <View
-          style={[
-            gap.all[2],
-            layout.flex.row,
-            { minWidth: 0, maxWidth: "100%" },
-          ]}
-        >
+        <View style={[layout.flex.row, { minWidth: 0, maxWidth: "100%" }]}>
           {showTime && (
             <Text
               style={{
                 fontVariant: ["tabular-nums"],
                 color: colors.gray[400],
+                width: 44,
+                marginRight: 8,
               }}
             >
               {formatTime(item.record.createdAt)}
             </Text>
           )}
-          <Text
-            weight="bold"
-            color="default"
-            style={[flex.shrink[1], { minWidth: 0, overflow: "hidden" }]}
-          >
-            <Text
-              style={[
-                {
-                  cursor: "pointer",
-                  color: getRgbColor(item.chatProfile?.color),
-                },
-              ]}
+          <Text style={[flex.shrink[1], { minWidth: 0 }]}>
+            <UserProfileCard
+              uri={item.uri}
+              author={item.author}
+              badges={item.badges}
             >
-              {formatHandleWithAt(item.author)}
+              <Text>
+                <BadgeDisplayRow badges={item.badges} />
+                <Text
+                  weight="bold"
+                  style={{
+                    cursor: "pointer",
+                    color: getRgbColor(item.chatProfile?.color),
+                  }}
+                >
+                  {formatHandleWithAt(item.author)}
+                </Text>
+              </Text>
+            </UserProfileCard>
+            <Text weight="bold" color="default">
+              {": "}
             </Text>
-            :{" "}
             <RichTextMessage
               text={item.record.text}
               facets={item.record.facets || []}