@streamplace/components 0.8.11 → 0.8.14

package/locales/pt-BR/settings.ftl

@@ -82,6 +82,7 @@ finish = Finalizar
 
 ## Categorias de Navegação
 about = Sobre
+account = Conta
 advanced = Avançado
 danmu = Danmu
 developer = Desenvolvedor
@@ -97,6 +98,12 @@ refresh = Atualizar
 save-button = Salvar
 sign-in = Entrar
 update = Atualizar
+log-out = Sair
+
+## Configurações da Conta
+account-greeting = Olá, @{ $handle }.
+edit-profile-bluesky = Editar perfil (no Bluesky)
+change-name-color = Mudar cor do nome
 
 ## Gerenciamento de Chaves
 key-management = Gerenciamento de Chaves

package/locales/zh-Hant/common.ftl

@@ -32,6 +32,11 @@ info = 資訊
 search-placeholder = 搜尋...
 message-input = 輸入您的訊息...
 
+## Authentication & Access
+please-log-in-to-access-this-page = 請登入以存取此頁面
+go-to-settings = 前往設定
+go-back = 返回
+
 ## Demo and Testing
 welcome-user = 歡迎，{ $username }！
 notification-count = { $count ->

package/locales/zh-Hant/settings.ftl

@@ -83,6 +83,7 @@ finish = 完成
 
 ## 導航類別
 about = 關於
+account = 帳戶
 advanced = 進階
 danmu = 彈幕
 developer = 開發者
@@ -98,6 +99,12 @@ refresh = 重新整理
 save-button = 儲存
 sign-in = 登入
 update = 更新
+log-out = 登出
+
+## 帳戶設定
+account-greeting = 嗨，@{ $handle }。
+edit-profile-bluesky = 編輯個人資料（在 Bluesky）
+change-name-color = 變更名稱顏色
 
 ## 金鑰管理
 key-management = 金鑰管理

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamplace/components",
-  "version": "0.8.11",
+  "version": "0.8.14",
   "description": "Streamplace React (Native) Components",
   "main": "dist/index.js",
   "types": "src/index.tsx",
@@ -72,10 +72,10 @@
   "scripts": {
     "build": "tsc",
     "start": "tsc --watch --preserveWatchOutput",
-    "prepare": "tsc && node scripts/compile-translations.js",
+    "prepare": "node scripts/compile-translations.js && tsc",
     "i18n:compile": "node scripts/compile-translations.js",
     "i18n:watch": "nodemon scripts/compile-translations.js --watch locales/**/*.ftl",
     "i18n:extract": "node scripts/extract-i18n.js"
   },
-  "gitHead": "deec4cd1bea51452762e5463462550336057e156"
+  "gitHead": "e5835f817342ca5b587bc9bb3e541082bbeac4ea"
 }

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

@@ -8,6 +8,7 @@ import { Linking, View } from "react-native";
 import { ChatMessageViewHydrated } from "streamplace";
 import { RichtextSegment, segmentize } from "../../lib/facet";
 import { borders, flex, gap, ml, mr, opacity, pl } from "../../lib/theme/atoms";
+import { formatHandleWithAt } from "../../utils/format-handle";
 import { atoms, colors, layout } from "../ui";
 
 interface Facet {
@@ -138,7 +139,7 @@ export const RenderChatMessage = memo(
                   fontWeight: "thin",
                 }}
               >
-                @{(replyTo.author as any).handle}
+                {formatHandleWithAt(replyTo.author)}
               </Text>{" "}
               <Text
                 style={{
@@ -181,7 +182,7 @@ export const RenderChatMessage = memo(
                 },
               ]}
             >
-              @{item.author.handle}
+              {formatHandleWithAt(item.author)}
             </Text>
             :{" "}
             <RichTextMessage

package/src/components/chat/mod-view.tsx

@@ -12,6 +12,7 @@ import { Linking } from "react-native";
 import { ChatMessageViewHydrated } from "streamplace";
 import { useDeleteChatMessage } from "../../livestream-store";
 import { useStreamplaceStore } from "../../streamplace-store";
+import { formatHandle, formatHandleWithAt } from "../../utils/format-handle";
 import {
   atoms,
   DropdownMenu,
@@ -113,7 +114,7 @@ export const ModView = forwardRef<ModViewRef, ModViewProps>(() => {
                       minute: "2-digit",
                       hour12: false,
                     })}{" "}
-                    @{message.author.handle}: {message.record.text}
+                    {formatHandleWithAt(message.author)}: {message.record.text}
                   </Text>
                 </View>
               </DropdownMenuItem>
@@ -159,7 +160,7 @@ export const ModView = forwardRef<ModViewRef, ModViewProps>(() => {
                     <Text color="destructive">
                       {isBlockLoading
                         ? "Blocking..."
-                        : `Block user @${message.author.handle} from this channel`}
+                        : `Block user ${formatHandleWithAt(message.author)} from this channel`}
                     </Text>
                   )}
                 </DropdownMenuItem>
@@ -170,7 +171,7 @@ export const ModView = forwardRef<ModViewRef, ModViewProps>(() => {
               <DropdownMenuItem
                 onPress={() => {
                   Linking.openURL(
-                    `https://${BSKY_FRONTEND_DOMAIN}/profile/${message.author.handle}`,
+                    `https://${BSKY_FRONTEND_DOMAIN}/profile/${formatHandle(message.author)}`,
                   );
                 }}
               >
@@ -215,6 +216,7 @@ export function DeleteButton({
   const toast = useToast();
   return (
     <DropdownMenuItem
+      closeOnPress={false}
       onPress={() => {
         if (!message) return;
         if (!confirming) {

package/src/components/mobile-player/ui/viewer-context-menu.tsx

@@ -4,6 +4,8 @@ import { Image, Linking, Platform, Pressable, View } from "react-native";
 import {
   ContentRights,
   ContentWarnings,
+  formatHandle,
+  formatHandleWithAt,
   useAvatars,
   useLivestreamInfo,
   zero,
@@ -113,12 +115,12 @@ export function ContextMenu({
                     <Pressable
                       onPress={() => {
                         if (profile?.handle) {
-                          const url = `https://bsky.app/profile/${profile.handle}`;
+                          const url = `https://bsky.app/profile/${formatHandle(profile)}`;
                           Linking.openURL(url);
                         }
                       }}
                     >
-                      <Text>@{profile?.handle || "user"}</Text>
+                      <Text>{profile && formatHandleWithAt(profile)}</Text>
                     </Pressable>
                     {/*{did && profile && (
                     <FollowButton streamerDID={profile?.did} currentUserDID={did} />
@@ -163,7 +165,7 @@ export function ContextMenu({
               <DropdownMenuItem
                 onPress={() => {
                   if (profile?.handle) {
-                    const url = `https://bsky.app/profile/${profile.handle}`;
+                    const url = `https://bsky.app/profile/${formatHandle(profile)}`;
                     Linking.openURL(url);
                   }
                 }}

package/src/components/share/sharesheet.tsx

@@ -4,6 +4,7 @@ import { Clipboard, Linking, Platform, View } from "react-native";
 import { colors } from "../../lib/theme";
 import { useLivestreamStore } from "../../livestream-store";
 import { useUrl } from "../../streamplace-store";
+import { formatHandle } from "../../utils/format-handle";
 import { BlueskyIcon } from "../icons/bluesky-icon";
 import {
   DropdownMenu,
@@ -26,12 +27,12 @@ export function ShareSheet({ onShare }: ShareSheetProps = {}) {
 
   // Get the current stream URL
   const getStreamUrl = useCallback(() => {
-    return url + (profile ? `/@${profile.handle}` : "");
+    return url + (profile ? `/${formatHandle(profile)}` : "");
   }, [profile]);
 
   // Get the embed URL
   const getEmbedUrl = useCallback(() => {
-    return url + (profile ? `/embed/${profile.handle}` : "");
+    return url + (profile ? `/embed/${formatHandle(profile)}` : "");
   }, [profile]);
 
   // Get embed code
@@ -63,31 +64,22 @@ export function ShareSheet({ onShare }: ShareSheetProps = {}) {
   // Share to Bluesky
   const shareToBluesky = useCallback(() => {
     const streamUrl = getStreamUrl();
-    const text = profile
-      ? `Check out @${profile.handle} live on Streamplace! ${streamUrl}`
-      : `Check out this stream on Streamplace! ${streamUrl}`;
+    const text =
+      profile && profile.handle
+        ? `Check out @${profile.handle} live on Streamplace! ${streamUrl}`
+        : `Check out this stream on Streamplace! ${streamUrl}`;
     const blueskyUrl = `https://bsky.app/intent/compose?text=${encodeURIComponent(text)}`;
     Linking.openURL(blueskyUrl);
     onShare?.("share_bluesky", true);
   }, [profile, getStreamUrl, onShare]);
 
-  // Share to Twitter/X
-  const shareToTwitter = useCallback(() => {
-    const streamUrl = getStreamUrl();
-    const text = profile
-      ? `Check out @${profile.handle} live on Streamplace!`
-      : `Check out this stream on Streamplace!`;
-    const twitterUrl = `https://twitter.com/intent/tweet?text=${encodeURIComponent(text)}&url=${encodeURIComponent(streamUrl)}`;
-    Linking.openURL(twitterUrl);
-    onShare?.("share_twitter", true);
-  }, [profile, getStreamUrl, onShare]);
-
   // Native share (mobile)
   const nativeShare = useCallback(async () => {
     const streamUrl = getStreamUrl();
-    const text = profile
-      ? `Check out @${profile.handle} live on Streamplace!`
-      : `Check out this stream on Streamplace!`;
+    const text =
+      profile && profile.handle
+        ? `Check out @${profile.handle} live on Streamplace!`
+        : `Check out this stream on Streamplace!`;
 
     if (Platform.OS === "web" && navigator.share) {
       try {
@@ -119,14 +111,6 @@ export function ShareSheet({ onShare }: ShareSheetProps = {}) {
               <Text>Share to Bluesky</Text>
             </View>
           </DropdownMenuItem>
-          {/* <DropdownMenuItem onPress={shareToTwitter}>
-            <View
-              style={{ flexDirection: "row", alignItems: "center", gap: 12 }}
-            >
-              <MessageCircle size={20} color={colors.gray[400]} />
-              <Text>Share to X</Text>
-            </View>
-          </DropdownMenuItem> */}
           {/* navigator isn't on non-web */}
           {Platform.OS !== "web" || (navigator && (navigator as any).share) ? (
             <DropdownMenuItem onPress={nativeShare}>

package/src/components/ui/input.tsx

@@ -238,7 +238,13 @@ export const Input = forwardRef<any, InputProps>(
           error={!!error}
           onFocus={handleFocus}
           onBlur={handleBlur}
-          style={[containerStyles, textStyles, containerStyle, inputStyle]}
+          style={[
+            containerStyles,
+            textStyles,
+            containerStyle,
+            inputStyle,
+            { outline: "none" },
+          ]}
           placeholderTextColor={
             disabled ? theme.colors.textDisabled : theme.colors.textMuted
           }

package/src/components/ui/primitives/input.tsx

@@ -16,6 +16,7 @@ import {
   View,
   ViewProps,
 } from "react-native";
+import { tokens } from "../../../ui";
 
 // Base input primitive interface
 export interface InputPrimitiveProps extends Omit<TextInputProps, "onChange"> {
@@ -329,7 +330,8 @@ const primitiveStyles = StyleSheet.create({
     borderWidth: 1,
     borderColor: "#d1d5db",
     borderRadius: 8,
-    backgroundColor: "white",
+    boxShadow: "none",
+    fontFamily: tokens.fontFamilies.regular,
     ...Platform.select({
       ios: {
         paddingVertical: 12,

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/livestream-store/chat.tsx

@@ -215,7 +215,13 @@ export const reduceChatIncremental = (
   for (const msg of newMessages) {
     if (msg.deleted) {
       hasChanges = true;
-      removedKeys.add(msg.uri);
+      // find and remove the message from the index
+      for (const [key, message] of Object.entries(newChatIndex)) {
+        if (message.uri === msg.uri) {
+          delete newChatIndex[key];
+          removedKeys.add(key);
+        }
+      }
     }
   }
   newMessages = newMessages.filter((msg) => msg.deleted !== true);

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]);
+}