@streamplace/components 0.8.8 → 0.8.11

package/src/i18n/i18next-config.ts

@@ -0,0 +1,301 @@
+// 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",
+};
+
+// Translation loading function that loads compiled JSON files per namespace
+async function loadTranslationData(
+  locale: string,
+  namespace: string,
+): Promise<any> {
+  try {
+    let translations: any = {};
+
+    try {
+      // For web environments, load from public directory
+      if (typeof window !== "undefined") {
+        const response = await fetch(`/locales/${locale}/${namespace}.json`);
+        if (!response.ok) {
+          throw new Error(`HTTP ${response.status}`);
+        }
+        translations = await response.json();
+      } else {
+        // For React Native, use static requires for bundler compatibility
+        // 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;
+
+        // Static requires for React Native bundler
+        const localeNamespaceKey = `${fullLocale}/${namespace}`;
+        const translationMap: Record<string, any> = {
+          "en-US/common": require("../../public/locales/en-US/common.json"),
+          "pt-BR/common": require("../../public/locales/pt-BR/common.json"),
+          "es-ES/common": require("../../public/locales/es-ES/common.json"),
+          "zh-Hant/common": require("../../public/locales/zh-Hant/common.json"),
+          "fr-FR/common": require("../../public/locales/fr-FR/common.json"),
+          "en-US/settings": require("../../public/locales/en-US/settings.json"),
+          "pt-BR/settings": require("../../public/locales/pt-BR/settings.json"),
+          "es-ES/settings": require("../../public/locales/es-ES/settings.json"),
+          "zh-Hant/settings": require("../../public/locales/zh-Hant/settings.json"),
+          "fr-FR/settings": require("../../public/locales/fr-FR/settings.json"),
+        };
+
+        translations = translationMap[localeNamespaceKey];
+
+        if (!translations) {
+          throw new Error(
+            `No static translation mapping for ${localeNamespaceKey}`,
+          );
+        }
+      }
+    } catch (loadError: any) {
+      throw new Error(
+        `Failed to load ${namespace} translations for ${locale}: ${loadError.message}`,
+      );
+    }
+
+    if (!translations || Object.keys(translations).length === 0) {
+      throw new Error("No translations found in file");
+    }
+
+    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,9 @@ export * from "./components/chat/system-message";
 export { default as VideoRetry } from "./components/mobile-player/video-retry";
 export * from "./lib/system-messages";
 
+export { DanmuOverlay } from "./components/danmu/danmu-overlay";
+export { DanmuOverlayOBS } from "./components/danmu/danmu-overlay-obs";
+
 // Rotation lock system exports
 export {
   RotationProvider,

package/src/streamplace-store/streamplace-store.tsx

@@ -54,6 +54,20 @@ export interface StreamplaceState {
   muted: boolean;
   setVolume: (volume: number) => void;
   setMuted: (muted: boolean) => void;
+
+  // Danmu settings
+  danmuUnlocked: boolean;
+  danmuEnabled: boolean;
+  danmuOpacity: number;
+  danmuSpeed: number;
+  danmuLaneCount: number;
+  danmuMaxMessages: number;
+  setDanmuUnlocked: (unlocked: boolean) => void;
+  setDanmuEnabled: (enabled: boolean) => void;
+  setDanmuOpacity: (opacity: number) => void;
+  setDanmuSpeed: (speed: number) => void;
+  setDanmuLaneCount: (laneCount: number) => void;
+  setDanmuMaxMessages: (maxMessages: number) => void;
 }
 
 export type StreamplaceStore = StoreApi<StreamplaceState>;
@@ -65,6 +79,12 @@ export const makeStreamplaceStore = ({
 }): StoreApi<StreamplaceState> => {
   const VOLUME_STORAGE_KEY = "globalVolume";
   const MUTED_STORAGE_KEY = "globalMuted";
+  const DANMU_UNLOCKED_KEY = "danmuUnlocked";
+  const DANMU_ENABLED_KEY = "danmuEnabled";
+  const DANMU_OPACITY_KEY = "danmuOpacity";
+  const DANMU_SPEED_KEY = "danmuSpeed";
+  const DANMU_LANE_COUNT_KEY = "danmuLaneCount";
+  const DANMU_MAX_MESSAGES_KEY = "danmuMaxMessages";
 
   const store = createStore<StreamplaceState>()((set) => ({
     url,
@@ -125,16 +145,82 @@ export const makeStreamplaceStore = ({
       set({ muted });
       storage.setItem(MUTED_STORAGE_KEY, muted.toString()).catch(console.error);
     },
+
+    // Danmu settings - start with defaults
+    danmuUnlocked: false,
+    danmuEnabled: false,
+    danmuOpacity: 80,
+    danmuSpeed: 1,
+    danmuLaneCount: 12,
+    danmuMaxMessages: 50,
+
+    setDanmuUnlocked: (unlocked: boolean) => {
+      set({ danmuUnlocked: unlocked });
+      storage
+        .setItem(DANMU_UNLOCKED_KEY, unlocked.toString())
+        .catch(console.error);
+    },
+
+    setDanmuEnabled: (enabled: boolean) => {
+      set({ danmuEnabled: enabled });
+      storage
+        .setItem(DANMU_ENABLED_KEY, enabled.toString())
+        .catch(console.error);
+    },
+
+    setDanmuOpacity: (opacity: number) => {
+      const clamped = Math.max(0, Math.min(100, opacity));
+      set({ danmuOpacity: clamped });
+      storage
+        .setItem(DANMU_OPACITY_KEY, clamped.toString())
+        .catch(console.error);
+    },
+
+    setDanmuSpeed: (speed: number) => {
+      const clamped = Math.max(0.1, Math.min(3, speed));
+      set({ danmuSpeed: clamped });
+      storage.setItem(DANMU_SPEED_KEY, clamped.toString()).catch(console.error);
+    },
+
+    setDanmuLaneCount: (laneCount: number) => {
+      const clamped = Math.max(4, Math.min(20, laneCount));
+      set({ danmuLaneCount: clamped });
+      storage
+        .setItem(DANMU_LANE_COUNT_KEY, clamped.toString())
+        .catch(console.error);
+    },
+
+    setDanmuMaxMessages: (maxMessages: number) => {
+      const clamped = Math.max(5, Math.min(200, maxMessages));
+      set({ danmuMaxMessages: clamped });
+      storage
+        .setItem(DANMU_MAX_MESSAGES_KEY, clamped.toString())
+        .catch(console.error);
+    },
   }));
 
-  // Load initial volume state from storage asynchronously
+  // Load initial volume and danmu state from storage asynchronously
   (async () => {
     try {
       const storedVolume = await storage.getItem(VOLUME_STORAGE_KEY);
       const storedMuted = await storage.getItem(MUTED_STORAGE_KEY);
+      const storedDanmuUnlocked = await storage.getItem(DANMU_UNLOCKED_KEY);
+      const storedDanmuEnabled = await storage.getItem(DANMU_ENABLED_KEY);
+      const storedDanmuOpacity = await storage.getItem(DANMU_OPACITY_KEY);
+      const storedDanmuSpeed = await storage.getItem(DANMU_SPEED_KEY);
+      const storedDanmuLaneCount = await storage.getItem(DANMU_LANE_COUNT_KEY);
+      const storedDanmuMaxMessages = await storage.getItem(
+        DANMU_MAX_MESSAGES_KEY,
+      );
 
       let initialVolume = 1.0;
       let initialMuted = false;
+      let initialDanmuUnlocked = false;
+      let initialDanmuEnabled = false;
+      let initialDanmuOpacity = 80;
+      let initialDanmuSpeed = 1;
+      let initialDanmuLaneCount = 12;
+      let initialDanmuMaxMessages = 50;
 
       if (storedVolume) {
         const parsedVolume = parseFloat(storedVolume);
@@ -151,12 +237,54 @@ export const makeStreamplaceStore = ({
         initialMuted = storedMuted === "true";
       }
 
+      if (storedDanmuUnlocked) {
+        initialDanmuUnlocked = storedDanmuUnlocked === "true";
+      }
+
+      if (storedDanmuEnabled) {
+        initialDanmuEnabled = storedDanmuEnabled === "true";
+      }
+
+      if (storedDanmuOpacity) {
+        const parsed = parseInt(storedDanmuOpacity);
+        if (Number.isFinite(parsed) && parsed >= 0 && parsed <= 100) {
+          initialDanmuOpacity = parsed;
+        }
+      }
+
+      if (storedDanmuSpeed) {
+        const parsed = parseFloat(storedDanmuSpeed);
+        if (Number.isFinite(parsed) && parsed >= 0.1 && parsed <= 3) {
+          initialDanmuSpeed = parsed;
+        }
+      }
+
+      if (storedDanmuLaneCount) {
+        const parsed = parseInt(storedDanmuLaneCount);
+        if (Number.isFinite(parsed) && parsed >= 4 && parsed <= 20) {
+          initialDanmuLaneCount = parsed;
+        }
+      }
+
+      if (storedDanmuMaxMessages) {
+        const parsed = parseInt(storedDanmuMaxMessages);
+        if (Number.isFinite(parsed) && parsed >= 5 && parsed <= 200) {
+          initialDanmuMaxMessages = parsed;
+        }
+      }
+
       store.setState({
         volume: initialVolume,
         muted: initialMuted,
+        danmuUnlocked: initialDanmuUnlocked,
+        danmuEnabled: initialDanmuEnabled,
+        danmuOpacity: initialDanmuOpacity,
+        danmuSpeed: initialDanmuSpeed,
+        danmuLaneCount: initialDanmuLaneCount,
+        danmuMaxMessages: initialDanmuMaxMessages,
       });
     } catch (error) {
-      console.error("Failed to load volume state from storage:", error);
+      console.error("Failed to load state from storage:", error);
     }
   })();
 
@@ -213,4 +341,58 @@ export const useEffectiveVolume = () =>
     return Number.isFinite(effectiveVolume) ? effectiveVolume : 1.0;
   });
 
+// Danmu convenience hooks
+export const useDanmuUnlocked = () =>
+  useStreamplaceStore((x) => x.danmuUnlocked);
+export const useDanmuEnabled = () => useStreamplaceStore((x) => x.danmuEnabled);
+export const useDanmuOpacity = () => useStreamplaceStore((x) => x.danmuOpacity);
+export const useDanmuSpeed = () => useStreamplaceStore((x) => x.danmuSpeed);
+export const useDanmuLaneCount = () =>
+  useStreamplaceStore((x) => x.danmuLaneCount);
+export const useDanmuMaxMessages = () =>
+  useStreamplaceStore((x) => x.danmuMaxMessages);
+export const useSetDanmuUnlocked = () =>
+  useStreamplaceStore((x) => x.setDanmuUnlocked);
+export const useSetDanmuEnabled = () =>
+  useStreamplaceStore((x) => x.setDanmuEnabled);
+export const useSetDanmuOpacity = () =>
+  useStreamplaceStore((x) => x.setDanmuOpacity);
+export const useSetDanmuSpeed = () =>
+  useStreamplaceStore((x) => x.setDanmuSpeed);
+export const useSetDanmuLaneCount = () =>
+  useStreamplaceStore((x) => x.setDanmuLaneCount);
+export const useSetDanmuMaxMessages = () =>
+  useStreamplaceStore((x) => x.setDanmuMaxMessages);
+
+// Composite hook that calls all individual hooks
+export const useDanmuSettings = () => {
+  const danmuUnlocked = useDanmuUnlocked();
+  const danmuEnabled = useDanmuEnabled();
+  const danmuOpacity = useDanmuOpacity();
+  const danmuSpeed = useDanmuSpeed();
+  const danmuLaneCount = useDanmuLaneCount();
+  const danmuMaxMessages = useDanmuMaxMessages();
+  const setDanmuUnlocked = useSetDanmuUnlocked();
+  const setDanmuEnabled = useSetDanmuEnabled();
+  const setDanmuOpacity = useSetDanmuOpacity();
+  const setDanmuSpeed = useSetDanmuSpeed();
+  const setDanmuLaneCount = useSetDanmuLaneCount();
+  const setDanmuMaxMessages = useSetDanmuMaxMessages();
+
+  return {
+    danmuUnlocked,
+    danmuEnabled,
+    danmuOpacity,
+    danmuSpeed,
+    danmuLaneCount,
+    danmuMaxMessages,
+    setDanmuUnlocked,
+    setDanmuEnabled,
+    setDanmuOpacity,
+    setDanmuSpeed,
+    setDanmuLaneCount,
+    setDanmuMaxMessages,
+  };
+};
+
 export { useCreateStreamRecord, useUpdateStreamRecord } from "./stream";

package/tsconfig.json

@@ -5,7 +5,16 @@
     "outDir": "./dist",
     "jsx": "react-jsx",
     "module": "commonjs",
-    "skipLibCheck": true
+    "noEmit": false,
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true,
+    "resolveJsonModule": true
   },
-  "include": ["./src"]
+  "include": ["./src"],
+  "ts-node": {
+    "compilerOptions": {
+      "resolveJsonModule": true
+    }
+  }
 }