finish user

apps/saladeaula.digital/app/components/rrweb-recorder.tsx

@@ -0,0 +1,42 @@
+import type { eventWithTime, listenerHandler } from '@rrweb/types'
+import { useEffect, useRef } from 'react'
+import { record } from 'rrweb'
+
+interface RrwebRecorderProps {
+  onEventBatch: (events: eventWithTime[]) => void
+}
+
+export function RrwebRecorder({ onEventBatch }: RrwebRecorderProps) {
+  const stopRef = useRef<listenerHandler | null>(null)
+
+  useEffect(() => {
+    const events: eventWithTime[] = []
+
+    const stopFn = record({
+      emit(event: eventWithTime) {
+        events.push(event)
+
+        if (events.length >= 50) {
+          onEventBatch(events.splice(0))
+        }
+      }
+    })
+
+    if (stopFn) {
+      stopRef.current = stopFn
+    }
+
+    return () => {
+      if (stopRef.current) {
+        stopRef.current()
+        stopRef.current = null
+
+        if (events.length > 0) {
+          onEventBatch(events)
+        }
+      }
+    }
+  }, [onEventBatch])
+
+  return null
+}

apps/saladeaula.digital/app/routes/player.tsx

@@ -1,11 +1,10 @@
 import type { Route } from './+types'
 
-import lzwCompress from 'lzwcompress'
-import { useBlocker, useFetcher } from 'react-router'
-
 import { HttpMethod, request as req } from '@repo/util/request'
+import { useFetcher } from 'react-router'
 
-import { ScormPlayer, type ScormVersion } from '@/components/scorm-player'
+// import { RrwebRecorder } from '@/components/rrweb-recorder'
+import { ScormPlayer } from '@/components/scorm-player'
 // import { useLocalStorage } from '@/hooks/useLocalStorage'
 // import SHA256 from 'crypto-js/sha256'
 
@@ -64,24 +63,32 @@ export default function Route({ loaderData: { data } }: Route.ComponentProps) {
   // console.log(d2?.progress?.p ?? null)
 
   return (
-    <ScormPlayer
-      settings={{
-        autocommit: true,
-        throwExceptions: false,
-        logLevel: 2,
-        compatibilityMode: 1
-      }}
-      scormVersion="2004"
-      scormState={scormState}
-      scormContentPath={course.scormContentPath}
-      className="w-full h-full border-0"
-      onCommit={async (data) => {
-        console.log(data)
-        await fetcher.submit(JSON.stringify(data), {
-          method: 'post',
-          encType: 'application/json'
-        })
-      }}
-    />
+    <>
+      {/*      <RrwebRecorder
+        onEventBatch={(data) => {
+          console.log(JSON.stringify(data))
+        }}
+      />*/}
+
+      <ScormPlayer
+        settings={{
+          autocommit: true
+          // throwExceptions: false,
+          // logLevel: 2,
+          // compatibilityMode: 1
+        }}
+        scormVersion="2004"
+        scormState={scormState}
+        scormContentPath={course.scormContentPath}
+        className="w-full h-full border-0"
+        onCommit={async (data) => {
+          console.log(data)
+          await fetcher.submit(JSON.stringify(data), {
+            method: 'post',
+            encType: 'application/json'
+          })
+        }}
+      />
+    </>
   )
 }