Sort events upon creation, and keep ordered (#411)

* Sort events at start, as otherwise we risk misidentifying the last event

* Keep inserted events in the correct order, ensuring we don't misidentify the last event

 - e.g. network conditions mean that 'live' events come in non-sequentially
 - or so that adding custom events to an existing event works

* Ensure we maintain original ordering while inserting a new event which has an identical timestamp to an existing event. This came up with a series of mutations which had the same timestamp but needed to be applied in the correct order

* Fast track the common case of a new event being added which occurs after all prior events

src/replay/machine.ts

@@ -237,7 +237,29 @@ export function createPlayerService(
           if (machineEvent.type === 'ADD_EVENT') {
             const { event } = machineEvent.payload;
             addDelay(event, baselineTime);
-            events.push(event);
+
+            let end = events.length - 1;
+            if (events[end].timestamp <= event.timestamp) {
+              // fast track
+              events.push(event);
+            } else {
+              let insertion_index = -1;
+              let start = 0;
+              while (start <= end) {
+                let mid = Math.floor((start + end) / 2);
+                if (events[mid].timestamp <= event.timestamp) {
+                  start = mid + 1;
+                } else {
+                  end = mid - 1;
+                }
+              }
+              if (insertion_index === -1) {
+                insertion_index = start;
+              }
+              events.splice(insertion_index, 0, event);
+            }
+
+
             const isSync = event.timestamp < baselineTime;
             const castFn = getCastFn(event, isSync);
             if (isSync) {