@streamplace/components 0.8.11 → 0.8.13

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

@@ -145,68 +145,17 @@ export const I18NEXT_CONFIG = {
   debug: process.env.NODE_ENV === "development",
 };
 
-// Translation loading function that loads compiled JSON files per namespace
+// 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 {
-    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");
-    }
-
+    const translations = await platformLoadTranslationData(locale, namespace);
     return translations;
   } catch (error: any) {
     console.error(

package/src/index.tsx

@@ -37,6 +37,8 @@ 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";
 

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();

package/src/time-sync/index.ts

@@ -0,0 +1,12 @@
+export {
+  checkClockDrift,
+  getSyncedDate,
+  getSystemDate,
+  getSystemTime,
+  getTimeOffset,
+  initializeTimeSync,
+  setTimeOffset,
+  syncTimeWithServer,
+} from "./time-sync";
+
+export { useTimeSync } from "./useTimeSync";

package/src/time-sync/time-sync.ts

@@ -0,0 +1,112 @@
+import { Platform } from "react-native";
+
+let timeOffset = 0;
+let hasWarned = false;
+let OriginalDate: DateConstructor = Date;
+
+const CLOCK_DRIFT_THRESHOLD_MS = 5000; // 5 seconds
+
+export function getTimeOffset(): number {
+  return timeOffset;
+}
+
+export function setTimeOffset(offset: number): void {
+  timeOffset = offset;
+}
+
+export function checkClockDrift(serverTime: string): {
+  hasDrift: boolean;
+  driftMs: number;
+  driftSeconds: number;
+} {
+  const serverDate = new Date(serverTime);
+  const clientDate = new Date();
+  const drift = Math.abs(serverDate.getTime() - clientDate.getTime());
+
+  if (drift > CLOCK_DRIFT_THRESHOLD_MS) {
+    const driftSeconds = Math.round(drift / 1000);
+    if (!hasWarned) {
+      hasWarned = true;
+      console.warn(
+        `clock drift detected: ${driftSeconds}s difference from server time. ` +
+          `this may cause issues with time-sensitive operations. ` +
+          `please sync your system clock.`,
+      );
+    }
+    return { hasDrift: true, driftMs: drift, driftSeconds };
+  } else {
+    return {
+      hasDrift: false,
+      driftMs: drift,
+      driftSeconds: Math.round(drift / 1000),
+    };
+  }
+}
+
+export function syncTimeWithServer(
+  serverTime: string,
+  networkLatencyMs: number,
+): void {
+  const serverDate = new OriginalDate(serverTime);
+  const clientDate = new OriginalDate();
+  const offset = serverDate.getTime() - clientDate.getTime() - networkLatencyMs;
+
+  setTimeOffset(offset);
+}
+
+export function getSyncedDate(): Date {
+  const now = new Date();
+  if (timeOffset !== 0) {
+    return new Date(now.getTime() + timeOffset);
+  }
+  return now;
+}
+
+export function getSystemDate(): Date {
+  return new OriginalDate();
+}
+
+export function getSystemTime(): number {
+  return OriginalDate.now();
+}
+
+export function initializeTimeSync(): void {
+  if (Platform.OS !== "web") {
+    return;
+  }
+
+  // store original Date
+  OriginalDate = Date;
+  const OriginalDatePrototype = OriginalDate.prototype;
+
+  // create patched Date constructor
+  function PatchedDate(this: any, ...args: any[]): any {
+    // If called as a function (no `new`), forward to original Date to get the string form
+    if (!(this instanceof PatchedDate)) {
+      return OriginalDate.apply(undefined, args as any);
+    }
+
+    // If called as a constructor, construct a Date with synced time when no args provided
+    if (args.length === 0) {
+      const syncedTime = OriginalDate.now() + timeOffset;
+      return Reflect.construct(OriginalDate, [syncedTime], PatchedDate);
+    }
+
+    // Otherwise construct with the provided arguments
+    return Reflect.construct(OriginalDate, args, PatchedDate);
+  }
+
+  // copy static methods
+  PatchedDate.now = function (): number {
+    return OriginalDate.now() + timeOffset;
+  };
+
+  PatchedDate.parse = OriginalDate.parse;
+  PatchedDate.UTC = OriginalDate.UTC;
+
+  // copy prototype
+  PatchedDate.prototype = OriginalDatePrototype;
+
+  // replace global Date
+  (globalThis as any).Date = PatchedDate;
+}

package/src/time-sync/useTimeSync.tsx

@@ -0,0 +1,58 @@
+import { TriangleAlert } from "lucide-react-native";
+import { useEffect, useRef } from "react";
+import { Platform } from "react-native";
+import { StreamplaceAgent } from "streamplace";
+import { useToast } from "../components/ui/toast";
+import { useUrl } from "../streamplace-store/streamplace-store";
+import { checkClockDrift, syncTimeWithServer } from "./time-sync";
+
+export function useTimeSync() {
+  const url = useUrl();
+  const t = useToast();
+  const hasShownWarning = useRef(false);
+
+  useEffect(() => {
+    const checkTime = async () => {
+      if (Platform.OS !== "web") {
+        return;
+      }
+      try {
+        const agent = new StreamplaceAgent(url);
+        const start = new Date().getTime();
+        const response = await agent.place.stream.server.getServerTime();
+        const roundTripLatency = new Date().getTime() - start;
+        const serverTime = response.data.serverTime;
+
+        // always sync with server time
+        syncTimeWithServer(serverTime, roundTripLatency / 2);
+
+        const driftInfo = checkClockDrift(serverTime);
+
+        // only show warning if drift is significant
+        if (driftInfo.hasDrift && !hasShownWarning.current) {
+          hasShownWarning.current = true;
+          t.show(
+            "Clock drift detected!",
+            `Your device clock is ${driftInfo.driftSeconds}s off from server time. Please sync your system clock to avoid issues.`,
+            {
+              variant: "info",
+              iconLeft: TriangleAlert,
+              duration: 25,
+            },
+          );
+          console.log(
+            `time sync applied: offset ${driftInfo.driftMs}ms. Date() calls will now use server time.`,
+          );
+        }
+      } catch (error) {
+        console.error("failed to sync time with server:", error);
+      }
+    };
+
+    checkTime();
+
+    const interval = setInterval(checkTime, 1800000); // every 30m
+
+    return () => clearInterval(interval);
+  }, [url, t]);
+}

package/src/utils/format-handle.ts

@@ -0,0 +1,24 @@
+import { AppBskyActorDefs } from "@atproto/api";
+
+/**
+ * formats a user's handle for display, falling back to DID if handle is invalid
+ */
+export function formatHandle(
+  profile: Pick<AppBskyActorDefs.ProfileViewBasic, "handle" | "did">,
+  prefix: string = "",
+): string {
+  if (profile.handle === "handle.invalid") {
+    return profile.did;
+  }
+  return prefix + profile.handle;
+}
+
+/**
+ * convenience function for formatting a user's handle with @ prefix for display,
+ * falling back to DID if handle is invalid
+ */
+export function formatHandleWithAt(
+  profile: Pick<AppBskyActorDefs.ProfileViewBasic, "handle" | "did">,
+): string {
+  return formatHandle(profile, "@");
+}