Pass the full set of sorted events when adding keyboard and navigatio…

…n events. (replayio#4479)

src/protocol/graphics.ts

@@ -107,12 +107,6 @@ const gPaintPoints: TimeStampedPointWithPaintHash[] = [{ point: "0", time: 0, pa
 // All mouse events that have occurred in the recording, in order.
 const gMouseEvents: MouseEvent[] = [];
 
-// All mouse events that have occurred in the recording, in order.
-const gKeyboardEvents: KeyboardEvent[] = [];
-
-// All mouse events that have occurred in the recording, in order.
-const gNavigationEvents: NavigationEvent[] = [];
-
 // All mouse click events that have occurred in the recording, in order.
 const gMouseClickEvents: MouseEvent[] = [];
 

src/ui/actions/app.ts

@@ -24,6 +24,7 @@ import {
   WorkspaceId,
   SettingsTabTitle,
   EventKind,
+  ReplayEvent,
 } from "ui/state/app";
 import { Workspace } from "ui/types";
 import { trackEvent } from "ui/utils/telemetry";
@@ -205,27 +206,31 @@ function onUnprocessedRegions({ level, regions }: unprocessedRegions): UIThunkAc
 }
 
 function onKeyboardEvents(events: KeyboardEvent[], store: UIStore) {
-  const sortedEvents = events.sort((a: KeyboardEvent, b: KeyboardEvent) =>
-    compareBigInt(BigInt(a.point), BigInt(b.point))
-  );
-  const keyboardEvents = groupBy(sortedEvents, event => event.kind);
+  const groupedEvents = groupBy(events, event => event.kind);
+
+  Object.entries(groupedEvents).map(([eventKind, kindEvents]) => {
+    const keyboardEvents = [
+      ...selectors.getEventsForType(store.getState(), eventKind),
+      ...kindEvents,
+    ];
+    keyboardEvents.sort((a: ReplayEvent, b: ReplayEvent) =>
+      compareBigInt(BigInt(a.point), BigInt(b.point))
+    );
 
-  Object.keys(keyboardEvents).map(event => {
-    store.dispatch(setEventsForType(keyboardEvents[event], event));
+    store.dispatch(setEventsForType(keyboardEvents, eventKind));
   });
 }
 
 function onNavigationEvents(events: NavigationEvent[], store: UIStore) {
-  const sortedEvents = events.sort((a: NavigationEvent, b: NavigationEvent) =>
+  const navEvents = [
+    ...selectors.getEventsForType(store.getState(), "navigation"),
+    ...events.map(e => ({ ...e, kind: "navigation" })),
+  ];
+  navEvents.sort((a: ReplayEvent, b: ReplayEvent) =>
     compareBigInt(BigInt(a.point), BigInt(b.point))
   );
 
-  store.dispatch(
-    setEventsForType(
-      sortedEvents.map(e => ({ ...e, kind: "navigation" })),
-      "navigation"
-    )
-  );
+  store.dispatch(setEventsForType(navEvents, "navigation"));
 }
 
 function setRecordingDuration(duration: number): SetRecordingDurationAction {