@streamplace/components 0.8.9 → 0.8.11

package/scripts/extract-i18n.js

@@ -0,0 +1,336 @@
+#!/usr/bin/env node
+
+/**
+ * i18n key extraction script
+ * 1. Scans the codebase for i18n keys (t('key'), Trans components, etc)
+ * 2. Extracts keys into namespace JSON files (common.json, settings.json, etc)
+ * 3. Migrates new keys to corresponding .ftl files for translation
+ *
+ * Usage:
+ *   node extract-i18n.js                    # Extract keys and report new ones
+ *   node extract-i18n.js --add-to=common    # Add new keys to common.ftl
+ *   node extract-i18n.js --add-to=settings  # Add new keys to settings.ftl
+ */
+
+const { execSync } = require("child_process");
+const fs = require("fs");
+const path = require("path");
+
+// Parse command line arguments
+const args = process.argv.slice(2);
+const addToNamespace = args
+  .find((arg) => arg.startsWith("--add-to="))
+  ?.split("=")[1];
+
+// Paths
+const COMPONENTS_ROOT = path.join(__dirname, "..");
+const APP_ROOT = path.join(__dirname, "..", "..", "app");
+const MANIFEST_PATH = path.join(COMPONENTS_ROOT, "locales/manifest.json");
+const LOCALES_FTL_DIR = path.join(COMPONENTS_ROOT, "locales");
+const LOCALES_JSON_DIR = path.join(COMPONENTS_ROOT, "public/locales");
+
+// Load manifest
+const manifest = JSON.parse(fs.readFileSync(MANIFEST_PATH, "utf8"));
+
+// Configuration for i18next-parser
+const parserConfig = {
+  contextSeparator: "_",
+  createOldCatalogs: false,
+  defaultNamespace: "messages",
+  defaultValue: "",
+  indentation: 2,
+  keepRemoved: true,
+  keySeparator: false,
+  namespaceSeparator: false,
+
+  lexers: {
+    js: ["JavascriptLexer"],
+    ts: ["JavascriptLexer"],
+    jsx: ["JsxLexer"],
+    tsx: ["JsxLexer"],
+    html: false,
+    htm: false,
+    handlebars: false,
+    hbs: false,
+  },
+
+  locales: manifest.supportedLocales,
+  output: path.join(LOCALES_JSON_DIR, "$LOCALE/$NAMESPACE.json"),
+  input: [
+    path.join(COMPONENTS_ROOT, "src/**/*.{js,jsx,ts,tsx}"),
+    path.join(APP_ROOT, "src/**/*.{js,jsx,ts,tsx}"),
+    path.join(APP_ROOT, "components/**/*.{js,jsx,ts,tsx}"),
+    "!**/node_modules/**",
+    "!**/dist/**",
+    "!**/*.test.{js,jsx,ts,tsx}",
+    "!**/*.spec.{js,jsx,ts,tsx}",
+  ],
+
+  verbose: true,
+  sort: true,
+  failOnWarnings: false,
+  failOnUpdate: false,
+};
+
+/**
+ * Extract keys from codebase using i18next-parser
+ */
+function extractKeys() {
+  const configPath = path.join(__dirname, ".i18next-parser.config.js");
+  const configContent = `module.exports = ${JSON.stringify(parserConfig, null, 2)};`;
+
+  try {
+    fs.writeFileSync(configPath, configContent);
+    console.log("🔍 Extracting i18n keys from codebase...");
+
+    execSync(`npx i18next-parser --config ${configPath}`, {
+      stdio: "inherit",
+      cwd: __dirname,
+    });
+
+    console.log("✅ Keys extracted successfully!");
+    return true;
+  } catch (error) {
+    console.error("❌ Error extracting i18n keys:", error.message);
+    return false;
+  } finally {
+    if (fs.existsSync(configPath)) {
+      fs.unlinkSync(configPath);
+    }
+  }
+}
+
+/**
+ * Read existing keys from .ftl files in a locale directory
+ * Returns a map of namespace -> Set of keys
+ */
+function getExistingFtlKeys(localeDir) {
+  const keysByNamespace = {};
+
+  if (!fs.existsSync(localeDir)) {
+    return keysByNamespace;
+  }
+
+  const ftlFiles = fs
+    .readdirSync(localeDir)
+    .filter((file) => file.endsWith(".ftl"));
+
+  for (const file of ftlFiles) {
+    const namespace = path.basename(file, ".ftl");
+    const keys = new Set();
+
+    const content = fs.readFileSync(path.join(localeDir, file), "utf8");
+    const lines = content.split("\n");
+
+    for (const line of lines) {
+      const trimmed = line.trim();
+      const keyMatch = trimmed.match(/^([a-zA-Z][a-zA-Z0-9_-]*)\s*=/);
+      if (keyMatch) {
+        keys.add(keyMatch[1]);
+      }
+    }
+
+    keysByNamespace[namespace] = keys;
+  }
+
+  return keysByNamespace;
+}
+
+/**
+ * Get all namespaces (json files) in the locale directory
+ */
+function getNamespaces(localeJsonDir) {
+  if (!fs.existsSync(localeJsonDir)) {
+    return [];
+  }
+
+  return fs
+    .readdirSync(localeJsonDir)
+    .filter((file) => file.endsWith(".json"))
+    .map((file) => path.basename(file, ".json"));
+}
+
+/**
+ * Add new keys to a .ftl file
+ */
+function addKeysToFtlFile(localeDir, namespace, newKeys, locale) {
+  const targetFile = path.join(localeDir, `${namespace}.ftl`);
+
+  // Create file with header if it doesn't exist
+  if (!fs.existsSync(localeDir)) {
+    fs.mkdirSync(localeDir, { recursive: true });
+  }
+
+  if (!fs.existsSync(targetFile)) {
+    const languageName = manifest.languages[locale]?.name || locale;
+    const namespaceName =
+      namespace.charAt(0).toUpperCase() + namespace.slice(1);
+    const header = `# ${namespaceName} translations - ${languageName}\n\n`;
+    fs.writeFileSync(targetFile, header);
+  }
+
+  // Append new keys
+  let content = fs.readFileSync(targetFile, "utf8");
+
+  if (!content.endsWith("\n")) {
+    content += "\n";
+  }
+
+  content += "\n# Newly extracted keys\n";
+  content += newKeys.map((key) => `${key} = ${key}`).join("\n") + "\n";
+
+  fs.writeFileSync(targetFile, content);
+
+  return targetFile;
+}
+
+/**
+ * Migrate extracted JSON keys to .ftl files
+ */
+function migrateKeysToFtl() {
+  console.log("\n🔄 Analyzing extracted keys...");
+
+  const newKeysByLocaleAndNamespace = {}; // locale -> namespace -> [keys]
+
+  // Process each locale
+  for (const locale of manifest.supportedLocales) {
+    const localeJsonDir = path.join(LOCALES_JSON_DIR, locale);
+    const localeFtlDir = path.join(LOCALES_FTL_DIR, locale);
+
+    if (!fs.existsSync(localeJsonDir)) {
+      console.log(`⚠️  No JSON files found for ${locale}`);
+      continue;
+    }
+
+    // Get all namespaces (json files)
+    const namespaces = getNamespaces(localeJsonDir);
+
+    if (namespaces.length === 0) {
+      console.log(`⚠️  No namespace files found for ${locale}`);
+      continue;
+    }
+
+    // Get existing keys from .ftl files
+    const existingKeysByNamespace = getExistingFtlKeys(localeFtlDir);
+
+    // Process each namespace
+    for (const namespace of namespaces) {
+      const jsonPath = path.join(localeJsonDir, `${namespace}.json`);
+      const jsonContent = JSON.parse(fs.readFileSync(jsonPath, "utf8"));
+      const extractedKeys = Object.keys(jsonContent);
+
+      // Get existing keys for this namespace
+      const existingKeys = existingKeysByNamespace[namespace] || new Set();
+
+      // Find new keys
+      const newKeys = extractedKeys.filter((key) => !existingKeys.has(key));
+
+      if (newKeys.length > 0) {
+        if (!newKeysByLocaleAndNamespace[locale]) {
+          newKeysByLocaleAndNamespace[locale] = {};
+        }
+        newKeysByLocaleAndNamespace[locale][namespace] = newKeys;
+      }
+    }
+  }
+
+  // Check if there are any new keys
+  const hasNewKeys = Object.keys(newKeysByLocaleAndNamespace).length > 0;
+
+  if (!hasNewKeys) {
+    console.log(
+      "\n🎉 No new keys found. All extracted keys already exist in .ftl files.",
+    );
+    return;
+  }
+
+  // Display found keys
+  console.log("\n📊 New keys found:");
+  for (const locale of Object.keys(newKeysByLocaleAndNamespace)) {
+    console.log(`\n${locale}:`);
+    for (const namespace of Object.keys(newKeysByLocaleAndNamespace[locale])) {
+      const keys = newKeysByLocaleAndNamespace[locale][namespace];
+      console.log(`  📝 ${namespace} (${keys.length} new keys):`);
+      keys.forEach((key) => console.log(`     - ${key}`));
+    }
+  }
+
+  // If --add-to flag is provided, add keys to that namespace
+  if (addToNamespace) {
+    console.log(`\n✍️  Adding new keys to ${addToNamespace}.ftl files...`);
+
+    let totalAdded = 0;
+    const processedFiles = [];
+
+    for (const locale of Object.keys(newKeysByLocaleAndNamespace)) {
+      const localeFtlDir = path.join(LOCALES_FTL_DIR, locale);
+      const namespacesForLocale = newKeysByLocaleAndNamespace[locale];
+
+      // Collect all new keys across all namespaces for this locale
+      const allNewKeys = [];
+      for (const namespace of Object.keys(namespacesForLocale)) {
+        allNewKeys.push(...namespacesForLocale[namespace]);
+      }
+
+      if (allNewKeys.length === 0) continue;
+
+      // Add all keys to the specified namespace
+      const targetFile = addKeysToFtlFile(
+        localeFtlDir,
+        addToNamespace,
+        allNewKeys,
+        locale,
+      );
+      processedFiles.push(path.relative(process.cwd(), targetFile));
+      totalAdded += allNewKeys.length;
+
+      console.log(
+        `✅ ${locale}: Added ${allNewKeys.length} keys to ${addToNamespace}.ftl`,
+      );
+    }
+
+    console.log(
+      `\n🎉 Migration complete! Added ${totalAdded} new keys to ${addToNamespace}.ftl files.`,
+    );
+    console.log("\nModified files:");
+    processedFiles.forEach((file) => console.log(`   📄 ${file}`));
+
+    console.log("\n💡 Next steps:");
+    console.log("   1. Review the new keys in your .ftl files");
+    console.log("   2. Replace placeholder values with actual translations");
+    console.log("   3. Run `pnpm i18n:compile` to update compiled JSON files");
+  } else {
+    // Just report
+    let totalNewKeys = 0;
+    const namespaceSet = new Set();
+
+    for (const locale of Object.keys(newKeysByLocaleAndNamespace)) {
+      for (const namespace of Object.keys(
+        newKeysByLocaleAndNamespace[locale],
+      )) {
+        namespaceSet.add(namespace);
+        totalNewKeys += newKeysByLocaleAndNamespace[locale][namespace].length;
+      }
+    }
+
+    console.log(
+      `\n💡 Found ${totalNewKeys} new keys across ${namespaceSet.size} namespace(s).`,
+    );
+    console.log("\nTo add these keys to a specific namespace file, run:");
+    Array.from(namespaceSet).forEach((ns) => {
+      console.log(`   node extract-i18n.js --add-to=${ns}`);
+    });
+  }
+}
+
+function main() {
+  const success = extractKeys();
+
+  if (success) {
+    migrateKeysToFtl();
+  } else {
+    process.exit(1);
+  }
+}
+
+main();

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

@@ -12,6 +12,7 @@ import {
   useLivestream,
   useReplyToMessage,
   useSetReplyToMessage,
+  useTheme,
   View,
 } from "../../";
 import {
@@ -63,6 +64,8 @@ export function ChatBox({
 
   let linfo = useLivestream();
 
+  const { theme } = useTheme();
+
   const chat = useChat();
   const createChatMessage = useCreateChatMessage();
   const replyTo = useReplyToMessage();
@@ -354,6 +357,19 @@ export function ChatBox({
                 k.preventDefault();
                 submit();
               }
+            } else if (k.nativeEvent.key === "Tab") {
+              if (showSuggestions) {
+                k.preventDefault();
+                const handles = Array.from(filteredAuthors.keys());
+                if (handles.length > 0) {
+                  handleMentionSelect(handles[highlightedIndex]);
+                }
+              } else if (showEmojiSuggestions) {
+                k.preventDefault();
+                if (filteredEmojis.length > 0) {
+                  handleEmojiSelect(filteredEmojis[highlightedIndex]);
+                }
+              }
             } else if (k.nativeEvent.key === "ArrowUp") {
               if (showSuggestions || showEmojiSuggestions) {
                 k.preventDefault();
@@ -387,14 +403,17 @@ export function ChatBox({
           submitBehavior="submit"
           placeholder="Type a message..."
         />
-        <Button
-          disabled={submitting}
-          variant="secondary"
-          style={{ borderRadius: 16, height: 36, minWidth: 80 }}
-          onPress={submit}
-        >
-          {submitting ? <Loader /> : "Send"}
-        </Button>
+        <View>
+          <Button
+            disabled={submitting}
+            variant="secondary"
+            width="min"
+            style={{ borderRadius: 16, height: 43 }}
+            onPress={submit}
+          >
+            {submitting ? <Loader /> : "Send"}
+          </Button>
+        </View>
       </View>
       {showSuggestions && (
         <MentionSuggestions
@@ -466,7 +485,7 @@ export function ChatBox({
                 setIsChatVisible?.(false);
               }}
             >
-              <ExternalLink size={16} />
+              <ExternalLink color={theme.colors.primaryForeground} size={16} />
             </Button>
           )}
         </View>

package/src/components/content-metadata/content-metadata-form.tsx

@@ -684,17 +684,19 @@ export const ContentMetadataForm = forwardRef<any, ContentMetadataFormProps>(
                       ]}
                     >
                       <Text
+                        leading="tight"
                         style={[
                           text.neutral[300],
                           {
                             minWidth: 100,
+                            maxWidth: 100,
                             textAlign: "left",
                             paddingBottom: 8,
                             fontSize: 14,
                           },
                         ]}
                       >
-                        Allowed<br></br>Broadcasters
+                        Allowed Broadcasters
                       </Text>
                       <View style={[flex.values[1]]}>
                         <Text

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

@@ -0,0 +1,182 @@
+import { memo, useEffect, useState } from "react";
+import { LayoutChangeEvent, StyleSheet } from "react-native";
+import Animated, {
+  Easing,
+  runOnJS,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from "react-native-reanimated";
+import { ChatMessageViewHydrated } from "streamplace";
+import { Text } from "../ui";
+import { baseDuration, mapRange, MAX_DURATION, MIN_DURATION } from "./math";
+
+interface DanmuMessageProps {
+  message: ChatMessageViewHydrated;
+  lane: number;
+  laneHeight: number;
+  videoTop: number;
+  opacity: number;
+  fontSize: number;
+  speed: number;
+  containerWidth: number;
+  containerHeight: number;
+  onComplete: (messageId: string) => void;
+  onWidthMeasured?: (messageId: string, width: number) => void;
+}
+
+export const DanmuMessage = memo(
+  ({
+    message,
+    lane,
+    laneHeight,
+    videoTop,
+    opacity,
+    fontSize,
+    speed,
+    containerWidth,
+    containerHeight,
+    onComplete,
+    onWidthMeasured,
+  }: DanmuMessageProps) => {
+    const translateX = useSharedValue(containerWidth);
+    const [messageWidth, setMessageWidth] = useState(0);
+    const [animationStartTime, setAnimationStartTime] = useState<number | null>(
+      null,
+    );
+    const [totalDuration, setTotalDuration] = useState(0);
+
+    const getRgbColor = (
+      color: {
+        red: number;
+        green: number;
+        blue: number;
+      } = { red: 123, green: 123, blue: 123 },
+    ) => {
+      const red = mapRange(color.red, 0, 255, 100, 230);
+      const green = mapRange(color.green, 0, 255, 100, 230);
+      const blue = mapRange(color.blue, 0, 255, 100, 230);
+
+      return `rgb(${Math.round(red)}, ${Math.round(green)}, ${Math.round(blue)})`;
+    };
+
+    const handleLayout = (event: LayoutChangeEvent) => {
+      const width = event.nativeEvent.layout.width;
+      if (width > 0) {
+        setMessageWidth(width);
+        if (onWidthMeasured) {
+          onWidthMeasured(message.uri, width);
+        }
+      }
+    };
+
+    useEffect(() => {
+      if (messageWidth === 0) return; // Wait for layout measurement
+
+      const duration = baseDuration(message, MAX_DURATION, MIN_DURATION);
+
+      // Calculate how much time has elapsed if animation already started
+      let remainingDuration = duration;
+      let startPosition = containerWidth;
+
+      if (animationStartTime !== null) {
+        const elapsed = Date.now() - animationStartTime;
+        const progress = Math.min(elapsed / totalDuration, 1);
+        remainingDuration = duration * (1 - progress);
+        startPosition =
+          containerWidth + progress * (-messageWidth - containerWidth);
+      } else {
+        setAnimationStartTime(Date.now());
+        setTotalDuration(duration);
+      }
+
+      if (__DEV__)
+        console.log(
+          `[danmu] animation started: "${message.record.text}" (duration: ${duration.toFixed(0)}ms, remaining: ${remainingDuration.toFixed(0)}ms, speed: ${speed}x)`,
+        );
+
+      translateX.value = startPosition;
+
+      translateX.value = withTiming(
+        -messageWidth,
+        {
+          duration: remainingDuration,
+          easing: Easing.linear,
+        },
+        (finished) => {
+          if (finished) {
+            runOnJS(onComplete)(message.uri);
+          }
+        },
+      );
+    }, [
+      messageWidth,
+      containerWidth,
+      speed,
+      message.uri,
+      message.record.text.length,
+      lane,
+      onComplete,
+    ]);
+
+    const animatedStyle = useAnimatedStyle(() => {
+      return {
+        transform: [{ translateX: translateX.value }],
+      };
+    });
+
+    return (
+      <Animated.View
+        style={[
+          styles.container,
+          {
+            top: videoTop + lane * laneHeight,
+            opacity: opacity / 100,
+          },
+          animatedStyle,
+        ]}
+        onLayout={handleLayout}
+      >
+        <Text
+          style={[
+            styles.text,
+            {
+              fontSize,
+              color: getRgbColor(message.chatProfile?.color),
+            },
+          ]}
+          numberOfLines={1}
+        >
+          {message.record.text}
+        </Text>
+      </Animated.View>
+    );
+  },
+  (prevProps, nextProps) => {
+    return (
+      prevProps.message.uri === nextProps.message.uri &&
+      prevProps.lane === nextProps.lane &&
+      prevProps.laneHeight === nextProps.laneHeight &&
+      prevProps.videoTop === nextProps.videoTop &&
+      prevProps.opacity === nextProps.opacity &&
+      prevProps.fontSize === nextProps.fontSize &&
+      prevProps.speed === nextProps.speed &&
+      prevProps.containerWidth === nextProps.containerWidth &&
+      prevProps.containerHeight === nextProps.containerHeight
+    );
+  },
+);
+
+const styles = StyleSheet.create({
+  container: {
+    position: "absolute",
+    left: 0,
+  },
+  text: {
+    color: "white",
+    textShadowColor: "rgba(0, 0, 0, 0.8)",
+    textShadowOffset: { width: 1, height: 1 },
+    textShadowRadius: 64,
+    fontWeight: "600",
+  },
+});

package/src/components/danmu/danmu-overlay-obs.tsx

@@ -0,0 +1,44 @@
+import { StyleSheet } from "react-native";
+import { View } from "../ui";
+import { DanmuOverlay } from "./danmu-overlay";
+
+interface DanmuOverlayOBSProps {
+  channelDid?: string;
+  enabled?: boolean;
+  opacity?: number;
+  speed?: number;
+  laneCount?: number;
+  maxMessages?: number;
+}
+
+export function DanmuOverlayOBS({
+  channelDid,
+  enabled = true,
+  opacity = 80,
+  speed = 1,
+  laneCount = 12,
+  maxMessages = 50,
+}: DanmuOverlayOBSProps) {
+  return (
+    <View style={styles.container}>
+      <DanmuOverlay
+        enabled={enabled}
+        opacity={opacity}
+        speed={speed}
+        laneCount={laneCount}
+        maxMessages={maxMessages}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: "transparent",
+  },
+});