chore: example of an embedded player

apps/web/cypress.config.js

@@ -3,7 +3,7 @@ const { debuggerPlugin } = require('cypress-debugger');
 
 module.exports = defineConfig({
   e2e: {
-    baseUrl: 'https://todomvc.com/examples/backbone',
+    baseUrl: 'https://todomvc.com/examples/backbone/dist/',
     specPattern: 'cypress/e2e/*.spec.js',
     supportFile: 'cypress/support/e2e.ts',
     setupNodeEvents(on, config) {

apps/web/package.json

@@ -17,7 +17,7 @@
     "@radix-ui/react-tooltip": "^1.0.5",
     "class-variance-authority": "^0.5.2",
     "clsx": "^1.2.1",
-    "cypress": "^12.8.1",
+    "cypress": "^12.17.4",
     "cypress-debugger": "*",
     "lodash": "^4.17.21",
     "lucide-react": "^0.162.0",

apps/web/src/components/PayloadHandler.tsx

@@ -1,6 +1,6 @@
 import { TestExecutionResult } from 'cypress-debugger';
 import { Loader2 } from 'lucide-react';
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { useCypressEventsContext } from '../context/cypressEvents';
 import { useHttpArchiveContext } from '../context/httpArchiveEntries';
 import { useReplayerContext } from '../context/replayer';
@@ -26,13 +26,16 @@ function PayloadHandler() {
       )
     );
 
-  const handleDataChange = (payload: TestExecutionResult | null) => {
-    setEvents(payload?.cy || []);
-    setReplayerData(payload?.rr || []);
-    setHttpArchiveLog(payload?.har || null);
-    setMeta(payload?.meta ?? null);
-    setBrowserLogs(payload?.browserLogs || null);
-  };
+  const handleDataChange = useCallback(
+    (payload: TestExecutionResult | null) => {
+      setEvents(payload?.cy || []);
+      setReplayerData(payload?.rr || []);
+      setHttpArchiveLog(payload?.har || null);
+      setMeta(payload?.meta ?? null);
+      setBrowserLogs(payload?.browserLogs || null);
+    },
+    [setEvents, setReplayerData, setHttpArchiveLog, setMeta, setBrowserLogs]
+  );
 
   const handleFileChange = ({
     filename,
@@ -71,6 +74,20 @@ function PayloadHandler() {
     }
   }, [queryParam]); // eslint-disable-line
 
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    if ((window as any).trace) {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      // handleDataChange((window as any).trace);
+      // parse base64
+      const str = (window as any).trace;
+      const payload = JSON.parse(str);
+      handleDataChange(payload);
+      setOrigin('trace');
+    }
+  }, []);
+
   if (loading) {
     return (
       <div className="flex items-center justify-center h-full">