Merge pull request #750 from streamplace/natb/sync-client-time

feat: polyfill date to sync client time

js/app/src/polyfills.ts

···
+import { initializeTimeSync } from "@streamplace/components/src/time-sync";
+
+initializeTimeSync();

js/components/src/streamplace-provider/poller.tsx

···
   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);
···
   const liveUserRefresh = useStreamplaceStore(
     (state) => state.liveUsersRefresh,
   );
+
+  useTimeSync();
 
   useEffect(() => {
     if (pdsAgent && did) {

js/components/src/time-sync/index.ts

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

js/components/src/time-sync/time-sync.ts

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

js/components/src/time-sync/useTimeSync.tsx

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

js/docs/src/content/docs/lex-reference/openapi.json

···
         }
       }
     },
+    "/xrpc/place.stream.server.getServerTime": {
+      "get": {
+        "summary": "Get the current server time for client clock synchronization",
+        "operationId": "place.stream.server.getServerTime",
+        "tags": ["place.stream.server"],
+        "responses": {
+          "200": {
+            "description": "Success",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "type": "object",
+                  "properties": {
+                    "serverTime": {
+                      "type": "string",
+                      "description": "Current server time in RFC3339 format",
+                      "format": "date-time"
+                    }
+                  },
+                  "required": ["serverTime"]
+                }
+              }
+            }
+          }
+        }
+      }
+    },
     "/xrpc/place.stream.server.getWebhook": {
       "get": {
         "summary": "Get details for a specific webhook.",

js/docs/src/content/docs/lex-reference/server/place-stream-server-getservertime.md

···
+---
+title: place.stream.server.getServerTime
+description: Reference for the place.stream.server.getServerTime lexicon
+---
+
+**Lexicon Version:** 1
+
+## Definitions
+
+<a name="main"></a>
+
+### `main`
+
+**Type:** `query`
+
+Get the current server time for client clock synchronization
+
+**Parameters:** _(None defined)_
+
+**Output:**
+
+- **Encoding:** `application/json`
+- **Schema:**
+
+**Schema Type:** `object`
+
+| Name         | Type     | Req'd | Description                           | Constraints        |
+| ------------ | -------- | ----- | ------------------------------------- | ------------------ |
+| `serverTime` | `string` | ✅    | Current server time in RFC3339 format | Format: `datetime` |
+
+---
+
+## Lexicon Source
+
+```json
+{
+  "lexicon": 1,
+  "id": "place.stream.server.getServerTime",
+  "defs": {
+    "main": {
+      "type": "query",
+      "description": "Get the current server time for client clock synchronization",
+      "parameters": {
+        "type": "params",
+        "properties": {}
+      },
+      "output": {
+        "encoding": "application/json",
+        "schema": {
+          "type": "object",
+          "required": ["serverTime"],
+          "properties": {
+            "serverTime": {
+              "type": "string",
+              "format": "datetime",
+              "description": "Current server time in RFC3339 format"
+            }
+          }
+        }
+      }
+    }
+  }
+}
+```

lexicons/place/stream/server/getServerTime.json

···
+{
+  "lexicon": 1,
+  "id": "place.stream.server.getServerTime",
+  "defs": {
+    "main": {
+      "type": "query",
+      "description": "Get the current server time for client clock synchronization",
+      "parameters": {
+        "type": "params",
+        "properties": {}
+      },
+      "output": {
+        "encoding": "application/json",
+        "schema": {
+          "type": "object",
+          "required": ["serverTime"],
+          "properties": {
+            "serverTime": {
+              "type": "string",
+              "format": "datetime",
+              "description": "Current server time in RFC3339 format"
+            }
+          }
+        }
+      }
+    }
+  }
+}

pkg/spxrpc/place_stream_server.go

···
+package spxrpc
+
+import (
+	"context"
+	"time"
+
+	"github.com/bluesky-social/indigo/util"
+	placestreamtypes "stream.place/streamplace/pkg/streamplace"
+)
+
+func (s *Server) handlePlaceStreamServerGetServerTime(ctx context.Context) (*placestreamtypes.ServerGetServerTime_Output, error) {
+	serverTime := time.Now().UTC().Format(util.ISO8601)
+	return &placestreamtypes.ServerGetServerTime_Output{
+		ServerTime: serverTime,
+	}, nil
+}

pkg/spxrpc/stubs.go

···
 	e.GET("/xrpc/place.stream.live.getSegments", s.HandlePlaceStreamLiveGetSegments)
 	e.POST("/xrpc/place.stream.server.createWebhook", s.HandlePlaceStreamServerCreateWebhook)
 	e.POST("/xrpc/place.stream.server.deleteWebhook", s.HandlePlaceStreamServerDeleteWebhook)
+	e.GET("/xrpc/place.stream.server.getServerTime", s.HandlePlaceStreamServerGetServerTime)
 	e.GET("/xrpc/place.stream.server.getWebhook", s.HandlePlaceStreamServerGetWebhook)
 	e.GET("/xrpc/place.stream.server.listWebhooks", s.HandlePlaceStreamServerListWebhooks)
 	e.POST("/xrpc/place.stream.server.updateWebhook", s.HandlePlaceStreamServerUpdateWebhook)
···
 	var handleErr error
 	// func (s *Server) handlePlaceStreamServerDeleteWebhook(ctx context.Context,body *placestreamtypes.ServerDeleteWebhook_Input) (*placestreamtypes.ServerDeleteWebhook_Output, error)
 	out, handleErr = s.handlePlaceStreamServerDeleteWebhook(ctx, &body)
+	if handleErr != nil {
+		return handleErr
+	}
+	return c.JSON(200, out)
+}
+
+func (s *Server) HandlePlaceStreamServerGetServerTime(c echo.Context) error {
+	ctx, span := otel.Tracer("server").Start(c.Request().Context(), "HandlePlaceStreamServerGetServerTime")
+	defer span.End()
+	var out *placestreamtypes.ServerGetServerTime_Output
+	var handleErr error
+	// func (s *Server) handlePlaceStreamServerGetServerTime(ctx context.Context) (*placestreamtypes.ServerGetServerTime_Output, error)
+	out, handleErr = s.handlePlaceStreamServerGetServerTime(ctx)
 	if handleErr != nil {
 		return handleErr
 	}

pkg/streamplace/servergetServerTime.go

···
+// Code generated by cmd/lexgen (see Makefile's lexgen); DO NOT EDIT.
+
+package streamplace
+
+// schema: place.stream.server.getServerTime
+
+import (
+	"context"
+
+	"github.com/bluesky-social/indigo/lex/util"
+)
+
+// ServerGetServerTime_Output is the output of a place.stream.server.getServerTime call.
+type ServerGetServerTime_Output struct {
+	// serverTime: Current server time in RFC3339 format
+	ServerTime string `json:"serverTime" cborgen:"serverTime"`
+}
+
+// ServerGetServerTime calls the XRPC method "place.stream.server.getServerTime".
+func ServerGetServerTime(ctx context.Context, c util.LexClient) (*ServerGetServerTime_Output, error) {
+	var out ServerGetServerTime_Output
+
+	params := map[string]interface{}{}
+	if err := c.LexDo(ctx, util.Query, "", "place.stream.server.getServerTime", params, nil, &out); err != nil {
+		return nil, err
+	}
+
+	return &out, nil
+}