@streamplace/components 0.8.9 → 0.8.13

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/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, "@");
+}

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
+    }
+  }
 }