fix: update replay data handling to use eventWithTime type and add rrweb types dependency

app/sites/[id]/replays/[replayId]/page.tsx

@@ -6,6 +6,7 @@ import { getSite, type Site } from '@/lib/api/sites'
 import { getReplay, getReplayData, deleteReplay, formatDuration, type SessionReplay } from '@/lib/api/replays'
 import { toast } from 'sonner'
 import LoadingOverlay from '@/components/LoadingOverlay'
+import type { eventWithTime } from '@rrweb/types'
 
 function formatDate(dateString: string) {
   const date = new Date(dateString)
@@ -36,7 +37,7 @@ export default function ReplayViewerPage() {
 
   const [site, setSite] = useState<Site | null>(null)
   const [replay, setReplay] = useState<SessionReplay | null>(null)
-  const [replayData, setReplayData] = useState<unknown[] | null>(null)
+  const [replayData, setReplayData] = useState<eventWithTime[] | null>(null)
   const [loading, setLoading] = useState(true)
   const [loadingData, setLoadingData] = useState(false)
   const [playerReady, setPlayerReady] = useState(false)
@@ -101,7 +102,7 @@ export default function ReplayViewerPage() {
         const player = new rrwebPlayer.default({
           target: playerContainerRef.current!,
           props: {
-            events: replayData as unknown[],
+            events: replayData,
             width: playerContainerRef.current!.clientWidth,
             height: Math.min(600, window.innerHeight - 300),
             autoPlay: false,

lib/api/replays.ts

@@ -1,4 +1,5 @@
 import apiRequest from './client'
+import type { eventWithTime } from '@rrweb/types'
 
 export interface ReplayListItem {
   id: string
@@ -58,8 +59,8 @@ export async function getReplay(siteId: string, replayId: string): Promise<Sessi
   return apiRequest<SessionReplay>(`/sites/${siteId}/replays/${replayId}`)
 }
 
-export async function getReplayData(siteId: string, replayId: string): Promise<unknown[]> {
-  const response = await apiRequest<unknown[]>(`/sites/${siteId}/replays/${replayId}/data`)
+export async function getReplayData(siteId: string, replayId: string): Promise<eventWithTime[]> {
+  const response = await apiRequest<eventWithTime[]>(`/sites/${siteId}/replays/${replayId}/data`)
   return response
 }
 

package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "@ciphera-net/ui": "^0.0.6",
         "@radix-ui/react-icons": "^1.3.2",
+        "@rrweb/types": "^2.0.0-alpha.18",
         "axios": "^1.13.2",
         "country-flag-icons": "^1.6.4",
         "d3-scale": "^4.0.2",

package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "@ciphera-net/ui": "^0.0.6",
     "@radix-ui/react-icons": "^1.3.2",
+    "@rrweb/types": "^2.0.0-alpha.18",
     "axios": "^1.13.2",
     "country-flag-icons": "^1.6.4",
     "d3-scale": "^4.0.2",