@streamplace/components 0.8.9 → 0.8.13

package/src/components/ui/menu.tsx

@@ -0,0 +1,171 @@
+import { forwardRef, ReactNode } from "react";
+import { Platform, View, ViewStyle } from "react-native";
+import {
+  a,
+  borderRadius,
+  fontSize,
+  gap,
+  mt,
+  mx,
+  p,
+  pb,
+  pl,
+  pr,
+  pt,
+  px,
+  py,
+} from "../../lib/theme/atoms";
+import { mergeStyles, useTheme } from "../../ui";
+import { Text } from "./text";
+
+export interface MenuContainerProps {
+  children: ReactNode;
+  style?: ViewStyle;
+}
+
+export const MenuContainer = forwardRef<View, MenuContainerProps>(
+  ({ children, style }, ref) => {
+    const { theme } = useTheme();
+    return (
+      <View ref={ref} style={[gap.all[4], mt[4], mx[2], style]}>
+        {children}
+      </View>
+    );
+  },
+);
+
+export interface MenuGroupProps {
+  children: ReactNode;
+  style?: ViewStyle;
+}
+
+export const MenuGroup = forwardRef<View, MenuGroupProps>(
+  ({ children, style }, ref) => {
+    const { theme } = useTheme();
+    return (
+      <View
+        ref={ref}
+        style={[
+          { backgroundColor: theme.colors.muted + "c0" },
+          Platform.OS === "web" ? [px[1], py[1]] : p[1],
+          gap.all[1],
+          { borderRadius: borderRadius.lg },
+          style,
+        ]}
+      >
+        {children}
+      </View>
+    );
+  },
+);
+
+export interface MenuItemProps {
+  children: ReactNode;
+  disabled?: boolean;
+  style?: ViewStyle;
+  onPress?: () => void;
+}
+
+export const MenuItem = forwardRef<View, MenuItemProps>(
+  ({ children, disabled, style }, ref) => {
+    const { theme } = useTheme();
+    return (
+      <View
+        ref={ref}
+        style={[
+          a.layout.flex.row,
+          a.layout.flex.alignCenter,
+          a.radius.all.sm,
+          py[1],
+          pl[3],
+          pr[2],
+          disabled && { opacity: 0.5 },
+          style,
+        ]}
+      >
+        {typeof children === "string" ? (
+          <Text style={{ color: theme.colors.popoverForeground }}>
+            {children}
+          </Text>
+        ) : (
+          children
+        )}
+      </View>
+    );
+  },
+);
+
+export interface MenuLabelProps {
+  children: ReactNode;
+  style?: ViewStyle;
+}
+
+export const MenuLabel = forwardRef<View, MenuLabelProps>(
+  ({ children, style }, ref) => {
+    const { theme } = useTheme();
+    return (
+      <Text
+        ref={ref as any}
+        style={mergeStyles(
+          px[4],
+          py[2],
+          { color: theme.colors.textMuted },
+          a.fontSize.base,
+          style,
+        )}
+      >
+        {children}
+      </Text>
+    );
+  },
+);
+
+export interface MenuSeparatorProps {
+  style?: ViewStyle;
+}
+
+export const MenuSeparator = forwardRef<View, MenuSeparatorProps>(
+  ({ style }, ref) => {
+    const { theme } = useTheme();
+    return (
+      <View
+        ref={ref}
+        style={[
+          mx[2],
+          {
+            height: 1,
+            backgroundColor: theme.colors.border,
+            marginVertical: 0,
+          },
+          style,
+        ]}
+      />
+    );
+  },
+);
+
+export interface MenuInfoProps {
+  description: string;
+  style?: ViewStyle;
+}
+
+export const MenuInfo = forwardRef<View, MenuInfoProps>(
+  ({ description, style }, ref) => {
+    const { theme } = useTheme();
+    return (
+      <Text
+        ref={ref as any}
+        style={mergeStyles(
+          { color: theme.colors.textMuted, marginTop: -8 },
+          pt[1],
+          pl[4],
+          pb[2],
+          fontSize.sm,
+          style,
+        )}
+      >
+        {description}
+      </Text>
+    );
+  },
+);

package/src/components/ui/resizeable.tsx

@@ -39,7 +39,7 @@ export function Resizable({
 }: ResizableChatSheetProps) {
   const { slideKeyboard } = useKeyboardSlide();
   const { bottom: safeBottom } = useSafeAreaInsets();
-  const MAX_HEIGHT = (SCREEN_HEIGHT - safeBottom) * 0.5;
+  const MAX_HEIGHT = (SCREEN_HEIGHT - safeBottom) * 0.55;
   const MIN_HEIGHT = -(SCREEN_HEIGHT - safeBottom) * 0.2;
   const COLLAPSE_HEIGHT = (SCREEN_HEIGHT - safeBottom) * 0.1;
 

package/src/components/ui/toast.tsx

@@ -880,13 +880,18 @@ export function Toast({
                     width: "100%",
                   }}
                 >
-                  <Button variant={buttonTypeMap[variant]} onPress={onAction}>
+                  <Button
+                    width="min"
+                    variant={buttonTypeMap[variant]}
+                    onPress={onAction}
+                  >
                     <Text style={{ color: theme.colors.foreground }}>
                       {actionLabel}
                     </Text>
                   </Button>
                   <Button
                     variant="secondary"
+                    width="min"
                     onPress={() => onOpenChange(false)}
                   >
                     <Text style={{ color: theme.colors.foreground }}>

package/src/i18n/i18n-loader.native.ts

@@ -0,0 +1,56 @@
+// Native translation loader - imports translations directly for bundling
+// Metro will use this file for React Native builds
+
+// Import all translations directly so they're bundled into the app
+import enUSCommon from "../../public/locales/en-US/common.json";
+import enUSSettings from "../../public/locales/en-US/settings.json";
+import esESCommon from "../../public/locales/es-ES/common.json";
+import esESSettings from "../../public/locales/es-ES/settings.json";
+import frFRCommon from "../../public/locales/fr-FR/common.json";
+import frFRSettings from "../../public/locales/fr-FR/settings.json";
+import ptBRCommon from "../../public/locales/pt-BR/common.json";
+import ptBRSettings from "../../public/locales/pt-BR/settings.json";
+import zhHantCommon from "../../public/locales/zh-Hant/common.json";
+import zhHantSettings from "../../public/locales/zh-Hant/settings.json";
+
+const translationMap: Record<string, any> = {
+  "en-US/common": enUSCommon,
+  "en-US/settings": enUSSettings,
+  "pt-BR/common": ptBRCommon,
+  "pt-BR/settings": ptBRSettings,
+  "es-ES/common": esESCommon,
+  "es-ES/settings": esESSettings,
+  "zh-Hant/common": zhHantCommon,
+  "zh-Hant/settings": zhHantSettings,
+  "fr-FR/common": frFRCommon,
+  "fr-FR/settings": frFRSettings,
+};
+
+export async function loadTranslationData(
+  locale: string,
+  namespace: string,
+): Promise<any> {
+  // Map base language codes to full locales
+  const fullLocale = locale.includes("-")
+    ? locale
+    : {
+        en: "en-US",
+        pt: "pt-BR",
+        es: "es-ES",
+        zh: "zh-Hant",
+        fr: "fr-FR",
+      }[locale] || locale;
+
+  const localeNamespaceKey = `${fullLocale}/${namespace}`;
+  const translations = translationMap[localeNamespaceKey];
+
+  if (!translations) {
+    throw new Error(`No translation mapping for ${localeNamespaceKey}`);
+  }
+
+  if (!translations || Object.keys(translations).length === 0) {
+    throw new Error("No translations found");
+  }
+
+  return translations;
+}

package/src/i18n/i18n-loader.ts

@@ -0,0 +1,19 @@
+// Web translation loader - loads translations via fetch for code splitting
+// Metro will use this file for web builds
+
+export async function loadTranslationData(
+  locale: string,
+  namespace: string,
+): Promise<any> {
+  const response = await fetch(`/locales/${locale}/${namespace}.json`);
+  if (!response.ok) {
+    throw new Error(`HTTP ${response.status}`);
+  }
+  const translations = await response.json();
+
+  if (!translations || Object.keys(translations).length === 0) {
+    throw new Error("No translations found");
+  }
+
+  return translations;
+}

package/src/i18n/i18next-config.ts

@@ -0,0 +1,250 @@
+// TypeScript i18next configuration with Fluent and manifest integration
+// modified from https://github.com/inaturalist/iNaturalistReactNative/blob/main/src/i18n/initI18next.js
+
+import i18next from "i18next";
+import Fluent from "i18next-fluent";
+import resourcesToBackend from "i18next-resources-to-backend";
+import "intl-pluralrules";
+import { initReactI18next } from "react-i18next";
+
+// Import our manifest directly to avoid circular dependency
+import manifest from "../../locales/manifest.json";
+import storage from "../storage";
+
+const LOCALE_STORAGE_KEY = "@streamplace/locale";
+
+// Try to import expo-localization, but make it optional
+let Localization: typeof import("expo-localization") | null = null;
+try {
+  const localizationModule = require("expo-localization");
+  // Handle both default and named exports
+  Localization = localizationModule.default
+    ? localizationModule.default
+    : localizationModule;
+} catch {
+  // expo-localization not available, will use browser/fallback detection
+}
+
+function cleanLocaleName(locale: string): string {
+  return locale.replace("_", "-").replace(/@.*/, "");
+}
+
+export function getLocaleFromSystemLocale(): string {
+  let systemLocale = "en";
+
+  // Try to get locale from expo-localization if available
+  if (Localization && typeof Localization.getLocales === "function") {
+    try {
+      const locales = Localization.getLocales();
+      systemLocale = locales?.[0]?.languageTag || "en";
+    } catch (error) {
+      console.warn("Failed to get locales from expo-localization:", error);
+    }
+  } else if (typeof navigator !== "undefined" && navigator.language) {
+    // Fallback to browser navigator.language
+    systemLocale = navigator.language;
+  }
+
+  const candidateLocale = cleanLocaleName(systemLocale);
+
+  // Check if the full locale is supported (e.g., "en-US")
+  if (manifest.supportedLocales.includes(candidateLocale)) {
+    return candidateLocale;
+  }
+
+  // Check if the language part is supported (e.g., "en" from "en-GB")
+  const lang = candidateLocale.split("-")[0];
+  const matchingLocale = manifest.supportedLocales.find((locale) =>
+    locale.startsWith(lang + "-"),
+  );
+
+  if (matchingLocale) {
+    return matchingLocale;
+  }
+
+  // Fall back to default locale from manifest
+  return manifest.fallbackChain[0];
+}
+
+// Cache for the current locale to avoid async lookups
+let cachedLocale: string | null = null;
+
+export async function getCurrentLocale(): Promise<string> {
+  if (cachedLocale) {
+    return cachedLocale;
+  }
+
+  const stored = await storage.getItem(LOCALE_STORAGE_KEY);
+  if (stored && manifest.supportedLocales.includes(stored)) {
+    cachedLocale = stored;
+    return stored;
+  }
+
+  const systemLocale = getLocaleFromSystemLocale();
+  cachedLocale = systemLocale;
+  return systemLocale;
+}
+
+// Synchronous version for initial load - returns cached or system locale
+export function getCurrentLocaleSync(): string {
+  return cachedLocale || getLocaleFromSystemLocale();
+}
+
+// Enhanced fallback logic using manifest
+function getFallbackChain(code: string): string[] {
+  const fallbacks: string[] = [];
+
+  if (!code) return manifest.fallbackChain;
+
+  // Regional fallbacks
+  if (code.match(/^es-/)) {
+    fallbacks.push("es-ES"); // Spanish fallback
+  } else if (code.match(/^fr-/)) {
+    fallbacks.push("fr-FR"); // French fallback
+  } else if (code.match(/^pt-/)) {
+    fallbacks.push("pt-BR"); // Portuguese fallback
+  } else if (code.match(/^zh-/)) {
+    fallbacks.push("zh-Hant"); // Chinese fallback
+  }
+
+  // Add manifest fallback chain
+  return [...fallbacks, ...manifest.fallbackChain];
+}
+
+// Use sync version for initial config - will be updated when storage loads
+const LOCALE = getCurrentLocaleSync();
+
+export const I18NEXT_CONFIG = {
+  lng: LOCALE,
+  ns: ["common", "settings"], // Common should be first as it's most frequently used
+  defaultNS: "common",
+  interpolation: {
+    escapeValue: false, // React already safes from XSS
+  },
+  react: {
+    useSuspense: false, // Prevent Android crashes
+  },
+  i18nFormat: {
+    fluentBundleOptions: {
+      useIsolating: false,
+      functions: {
+        VOWORCON: ([txt]: [string]) =>
+          "aeiou".indexOf(txt[0].toLowerCase()) >= 0 ? "vow" : "con",
+        JOIN: (args: string[], opts: { separator?: string } = {}) =>
+          args
+            .filter(Boolean)
+            .filter((s) => typeof s === "string")
+            .join(opts.separator || ""),
+      },
+    },
+  },
+  load: "currentOnly",
+  cleanCode: true,
+  fallbackLng: getFallbackChain,
+  supportedLngs: [...manifest.supportedLocales],
+  debug: process.env.NODE_ENV === "development",
+};
+
+// Import platform-specific translation loader
+// Metro will use i18n-loader.native.ts for React Native, i18n-loader.ts for web
+import { loadTranslationData as platformLoadTranslationData } from "./i18n-loader";
+
+// Translation loading function with error handling
+async function loadTranslationData(
+  locale: string,
+  namespace: string,
+): Promise<any> {
+  try {
+    const translations = await platformLoadTranslationData(locale, namespace);
+    return translations;
+  } catch (error: any) {
+    console.error(
+      `Failed to load ${namespace} translations for ${locale}:`,
+      error,
+    );
+    // Return minimal fallback
+    return {
+      loading: "Loading...",
+      error: "Error",
+      cancel: "Cancel",
+    };
+  }
+}
+
+// Initialize i18next with our configuration
+let initPromise: Promise<typeof i18next> | null = null;
+
+export default async function initI18next(
+  config: any = {},
+): Promise<typeof i18next> {
+  // Return existing promise if already initializing
+  if (initPromise) {
+    return initPromise;
+  }
+
+  // Load stored locale from storage first
+  const storedLocale = await getCurrentLocale();
+
+  const finalConfig = {
+    ...I18NEXT_CONFIG,
+    lng: storedLocale,
+    ...config,
+  };
+
+  initPromise = i18next
+    .use(initReactI18next)
+    .use(Fluent)
+    .use(
+      resourcesToBackend((locale: string, namespace: string, callback: any) => {
+        // Load translations using our manifest-based namespace system
+        loadTranslationData(locale, namespace)
+          .then((translations) => callback(null, translations))
+          .catch((error) => callback(error, null));
+      }),
+    )
+    .init(finalConfig)
+    .then(() => {
+      // Automatically persist language changes to storage
+      i18next.on("languageChanged", (lng) => {
+        if (lng && manifest.supportedLocales.includes(lng)) {
+          cachedLocale = lng;
+          storage.setItem(LOCALE_STORAGE_KEY, lng);
+        }
+      });
+      return i18next;
+    });
+
+  return initPromise;
+}
+
+// Utility functions for language management
+export async function changeLanguage(locale: string): Promise<void> {
+  // Storage is handled automatically via languageChanged event
+  await i18next.changeLanguage(locale);
+}
+
+export function getCurrentLanguage(): string {
+  // Return the cached locale preference, not i18next's resolved language
+  // i18next.language may return just "zh" instead of "zh-Hant"
+  return getCurrentLocaleSync();
+}
+
+export function getSupportedLocales(): string[] {
+  return [...manifest.supportedLocales];
+}
+
+export function getLanguageInfo(locale: string): any {
+  return manifest.languages[locale] || null;
+}
+
+export function isLocaleSupported(locale: string): boolean {
+  return manifest.supportedLocales.includes(locale);
+}
+
+// Auto-initialize i18next on module load
+// This ensures the instance is ready when used in providers
+initI18next().catch((error) => {
+  console.error("Failed to auto-initialize i18n:", error);
+});
+
+export { i18next };

package/src/i18n/index.ts

@@ -0,0 +1,50 @@
+// Simple i18n infrastructure exports for Streamplace components
+// Re-exports i18next tools for app-level customization
+
+// Core i18next exports
+export { default as i18n } from "i18next";
+export {
+  I18nextProvider,
+  Trans,
+  Translation,
+  initReactI18next,
+  useTranslation,
+  withTranslation,
+} from "react-i18next";
+
+// i18next plugins for common use cases
+export { default as LanguageDetector } from "i18next-browser-languagedetector";
+export { default as Backend } from "i18next-http-backend";
+export { default as resourcesToBackend } from "i18next-resources-to-backend";
+
+// Fluent support
+export { default as Fluent } from "i18next-fluent";
+
+// Basic provider components for consistent setup
+export { I18nProvider } from "./provider";
+
+// Bootstrap configuration and utilities
+export {
+  I18NEXT_CONFIG,
+  changeLanguage,
+  getCurrentLanguage,
+  getCurrentLocale,
+  getLanguageInfo,
+  getLocaleFromSystemLocale,
+  getSupportedLocales,
+  i18next,
+  default as initI18next,
+  isLocaleSupported,
+} from "./i18next-config";
+
+// Manifest data
+export { default as manifest } from "../../locales/manifest.json";
+
+// TypeScript types
+export type {
+  i18n as I18nInstance,
+  InitOptions,
+  Resource,
+  ResourceLanguage,
+  TFunction,
+} from "i18next";

package/src/i18n/provider.tsx

@@ -0,0 +1,70 @@
+// Simple i18n provider wrapper for consistent setup
+import type { i18n } from "i18next";
+import { ReactNode, useEffect, useState } from "react";
+import { I18nextProvider } from "react-i18next";
+
+interface I18nProviderProps {
+  children: ReactNode;
+  i18n: i18n;
+}
+
+/**
+ * Simple wrapper around I18nextProvider for consistent setup
+ * The actual i18n instance should be configured at the app level
+ * Waits for i18next to be initialized AND language loaded to prevent FOUC
+ */
+export function I18nProvider({ children, i18n }: I18nProviderProps) {
+  const [isReady, setIsReady] = useState(false);
+
+  useEffect(() => {
+    // Check if both initialized and language is loaded
+    const checkReady = () => {
+      const initialized = i18n.isInitialized;
+      const hasCommon = i18n.hasLoadedNamespace("common");
+      console.log("i18n ready check:", {
+        initialized,
+        hasCommon,
+        language: i18n.language,
+      });
+
+      if (initialized && hasCommon) {
+        setIsReady(true);
+      }
+    };
+
+    checkReady();
+
+    // Fallback: if not ready after 300ms, just proceed anyway
+    const fallbackTimeout = setTimeout(() => {
+      if (!isReady) {
+        console.log("i18n ready timeout - proceeding anyway");
+        setIsReady(true);
+      }
+    }, 300);
+
+    // Listen for both initialization and language loaded events
+    const handleInitialized = () => {
+      checkReady();
+    };
+    const handleLanguageLoaded = () => {
+      checkReady();
+    };
+
+    i18n.on("initialized", handleInitialized);
+    i18n.on("languageChanged", handleLanguageLoaded);
+    i18n.on("loaded", handleLanguageLoaded);
+
+    return () => {
+      clearTimeout(fallbackTimeout);
+      i18n.off("initialized", handleInitialized);
+      i18n.off("languageChanged", handleLanguageLoaded);
+      i18n.off("loaded", handleLanguageLoaded);
+    };
+  }, [i18n, isReady]);
+
+  if (!isReady) {
+    return null;
+  }
+
+  return <I18nextProvider i18n={i18n}>{children}</I18nextProvider>;
+}

package/src/index.tsx

@@ -24,6 +24,10 @@ export * as zero from "./ui";
 
 export * from "./hooks";
 
+// Internationalization system exports
+export * from "./i18n";
+export * as I18n from "./i18n";
+
 // Theme system exports
 export * from "./lib/theme";
 
@@ -33,6 +37,11 @@ export * from "./components/chat/system-message";
 export { default as VideoRetry } from "./components/mobile-player/video-retry";
 export * from "./lib/system-messages";
 
+export * from "./utils/format-handle";
+
+export { DanmuOverlay } from "./components/danmu/danmu-overlay";
+export { DanmuOverlayOBS } from "./components/danmu/danmu-overlay-obs";
+
 // Rotation lock system exports
 export {
   RotationProvider,

package/src/streamplace-provider/poller.tsx

@@ -7,6 +7,7 @@ import {
   useStreamplaceStore,
 } from "../streamplace-store";
 import { usePDSAgent } from "../streamplace-store/xrpc";
+import { useTimeSync } from "../time-sync";
 
 export default function Poller({ children }: { children: React.ReactNode }) {
   const url = useStreamplaceStore((state) => state.url);
@@ -19,6 +20,8 @@ export default function Poller({ children }: { children: React.ReactNode }) {
     (state) => state.liveUsersRefresh,
   );
 
+  useTimeSync();
+
   useEffect(() => {
     if (pdsAgent && did) {
       getChatProfile();