@atlaskit/editor-plugin-interactivity 1.1.0 → 1.2.1

package/dist/es2019/collections/bounded-list.js

@@ -0,0 +1,24 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+/** An array that forgets its oldest item once it holds more than `limit`. */
+export class BoundedList {
+  constructor(limit) {
+    _defineProperty(this, "items", []);
+    this.limit = limit;
+  }
+  push(...items) {
+    this.items.push(...items);
+    // Negative when there is still room, and `splice` then removes nothing.
+    this.items.splice(0, this.items.length - this.limit);
+  }
+  [Symbol.iterator]() {
+    return this.items[Symbol.iterator]();
+  }
+  findLast(matches) {
+    for (let index = this.items.length - 1; index >= 0; index -= 1) {
+      if (matches(this.items[index])) {
+        return this.items[index];
+      }
+    }
+    return undefined;
+  }
+}

package/dist/es2019/collections/bounded-map.js

@@ -0,0 +1,25 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+/** A `Map` that forgets its oldest entry once it holds more than `limit`. */
+export class BoundedMap {
+  constructor(limit) {
+    _defineProperty(this, "entries", new Map());
+    this.limit = limit;
+  }
+  get(key) {
+    return this.entries.get(key);
+  }
+  forEach(visit) {
+    this.entries.forEach(visit);
+  }
+  set(key, value) {
+    this.entries.delete(key);
+    this.entries.set(key, value);
+    if (this.entries.size <= this.limit) {
+      return;
+    }
+    const oldest = this.entries.keys().next();
+    if (!oldest.done) {
+      this.entries.delete(oldest.value);
+    }
+  }
+}

package/dist/es2019/collector/interaction-events.js

@@ -11,6 +11,10 @@
  * every repeat of a held key, and nothing cancels a key press. Pointing is counted on `pointerup`,
  * since a press cannot repeat but can be taken over by a scroll — which the browser does not count
  * either, and in that case `pointerup` never arrives.
+ *
+ * Counting events is also why an editor group's `totalCount` is not comparable with `page`'s, which
+ * is told `performance.interactionCount`: when an event is counted the collector cannot know whether
+ * the browser will open an interaction for it.
  */
 const INTERACTION_EVENTS = {
   keydown: {

package/dist/es2019/collector/interaction-group.js

@@ -1,6 +1,5 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { bucketKeyForMs } from './bucket-boundaries';
-
 /**
  * Latencies are counted per 8 ms, the resolution Event Timing reports durations at. Every
  * latency is rounded up to this step on the way in, which caps the number of distinct values
@@ -20,16 +19,29 @@ const REPORTED_QUANTILES = [0.9, 0.98];
  * count, the sum, the maximum and the percentiles — is derived from that map when a snapshot
  * is taken. Nothing is computed while interactions arrive.
  *
- * The two counters count different populations: `add` takes the interactions Event Timing
- * measured, `countTotal` takes all of them, including the ones below the 16 ms reporting threshold
- * it never delivers. So `totalCount >= observedCount`, and the difference is how many were too
- * fast to be measured.
+ * The two counters count different populations: `trackInteractionUpdate` takes the interactions
+ * Event Timing measured, `countTotal` takes all of them, including the ones below the 16 ms
+ * reporting threshold it never delivers. So `totalCount >= observedCount`, and the difference is how
+ * many were too fast to be measured.
  */
 export class InteractionGroup {
   constructor() {
     _defineProperty(this, "countByLatency", new Map());
     _defineProperty(this, "totalCount", 0);
   }
+  /**
+   * Takes in what the tracker now says about an interaction: a new one is counted, and one measured
+   * again moves the count it already has.
+   *
+   * @returns whether the group changed.
+   */
+  trackInteractionUpdate(update) {
+    if (update.type === 'new') {
+      this.add(update.latencyMs);
+      return true;
+    }
+    return this.remeasure(update.previousLatencyMs, update.latencyMs);
+  }
   add(latencyMs) {
     this.increment(latencyMs);
   }
@@ -41,10 +53,21 @@ export class InteractionGroup {
   countTotal() {
     this.totalCount += 1;
   }
+
+  /**
+   * @returns whether the count moved, which is `false` when both latencies fall in the step the
+   * interaction is already counted in — including when the interaction was measured no slower at
+   * all and only its boundaries moved.
+   */
   remeasure(previousLatencyMs, latencyMs) {
+    if (this.roundLatencyUp(previousLatencyMs) === this.roundLatencyUp(latencyMs)) {
+      return false;
+    }
+
     // Moved rather than counted again: the count belongs to the same interaction.
     this.decrement(previousLatencyMs);
     this.increment(latencyMs);
+    return true;
   }
 
   /**

package/dist/es2019/collector/interaction-tracker.js

@@ -1,4 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { BoundedList } from '../collections/bounded-list';
+import { BoundedMap } from '../collections/bounded-map';
 import { interactionEventKind } from './interaction-events';
 
 /**
@@ -7,10 +9,43 @@ import { interactionEventKind } from './interaction-events';
  * `PerformanceEventTiming` altogether, and the rest are only on it.
  */
 
+/**
+ * One paint, and the processing of every event it presented.
+ *
+ * One paint can present several events, and the handlers of all of them ran before it: a
+ * `pointerover` handler that was still running when the user clicked held up the paint that showed
+ * the click. So an interaction's processing is the processing of its whole paint, not of its own
+ * events only — otherwise a handler that is not its own reads as time the user waited for nothing.
+ *
+ * Event Timing gives a paint no identity. The only thing an entry says about it is
+ * `startTime + duration`, the moment it happened, so that is what identifies it.
+ */
+
+/**
+ * The paint an entry was presented by, and whether the entry moved the processing that paint covers.
+ * An entry whose handlers ran inside what the paint already covered changes nothing for any
+ * interaction reading its boundaries from it.
+ */
+
+/**
+ * The four moments an interaction's latency divides at, in order: the user acted, its handlers
+ * started running, they finished, the screen updated.
+ */
+
 /**
  * What an entry did to the interaction it belongs to: either it is the first entry of a new
- * interaction, or it measured an interaction that was already counted as slower than it was
- * known to be. Both carry the editor group of the interaction, if it is one of the editor's.
+ * interaction, or it changed an interaction already known. Both carry the editor group of the
+ * interaction, if it is one of the editor's, and the boundaries it now has.
+ *
+ * A `remeasured` where `previousLatencyMs` equals `latencyMs` is an interaction whose latency stayed
+ * as it was and whose boundaries moved: the entry ran in the same paint without being the slowest
+ * of them.
+ */
+
+/**
+ * What is kept per interaction. The boundaries are not among these: they are derived from the paint
+ * whenever the interaction is reported, because the paint keeps growing as the browser reports the
+ * remaining events it presented.
  */
 
 /**
@@ -19,11 +54,17 @@ import { interactionEventKind } from './interaction-events';
  * anything older than the last few hundred is not needed.
  */
 const MAX_TRACKED = 256;
+
+/**
+ * How many paints entries can still be placed in. The entries of a paint arrive within a batch or
+ * two of each other, so this only has to cover the paints in flight; it is what `web-vitals` keeps.
+ */
+const MAX_RECENT_PAINTS = 10;
 /**
- * How many are dropped per cleanup. Dropping one at a time would run a cleanup on every new
- * interaction once the limit is reached; a batch makes it one cleanup per 64 of them.
+ * Event Timing rounds `duration` down to 8 ms, so two events presented by one paint report that
+ * paint up to this far apart — and nothing else in Event Timing says they share it.
  */
-const PRUNE_BATCH = 64;
+const PRESENTATION_ROUNDING_MS = 8;
 
 /**
  * Identifies the event an entry measured: an entry's `startTime` is that event's timestamp and its
@@ -49,6 +90,9 @@ function eventKey(type, timeStamp) {
  *
  * The editor's events answer what an entry cannot: which interactions were with the editor, and
  * how many there were, including the ones below the Event Timing reporting threshold.
+ *
+ * Every entry is also placed in the paint that presented it, which is what says how an
+ * interaction's latency divides into waiting, processing and presentation. See `Paint`.
  */
 export class InteractionTracker {
   /**
@@ -59,8 +103,9 @@ export class InteractionTracker {
    * be counted in both.
    */
   constructor(startsAfterInteractionId = 0) {
-    _defineProperty(this, "interactions", new Map());
-    _defineProperty(this, "groupByEvent", new Map());
+    _defineProperty(this, "interactions", new BoundedMap(MAX_TRACKED));
+    _defineProperty(this, "groupByEvent", new BoundedMap(MAX_TRACKED));
+    _defineProperty(this, "recentPaints", new BoundedList(MAX_RECENT_PAINTS));
     _defineProperty(this, "highestInteractionId", 0);
     this.startsAfterInteractionId = startsAfterInteractionId;
   }
@@ -73,60 +118,67 @@ export class InteractionTracker {
   /**
    * Merges an entry into the interaction it belongs to.
    *
-   * @returns what that did to the interaction's latency, or nothing when the entry is not
-   * part of an interaction, belongs to a previous tracker, or does not change one.
+   * @returns what that changed about the interactions this tracker knows, the entry's own first.
+   * More than one of them when the paint the entry ran in presented several.
    */
   merge(entry) {
+    if (!Number.isFinite(entry.duration) || entry.duration < 0) {
+      return [];
+    }
+    const placement = this.paintOf(entry);
+    const paint = placement === null || placement === void 0 ? void 0 : placement.paint;
     const {
       interactionId
     } = entry;
-    // `first-input` and non-interaction events report `interactionId` 0.
+
+    // Reported only when the entry grew the paint, because otherwise nothing an interaction reads
+    // from it moved. Every interaction the paint presented is here, not only the entry's own: a
+    // `first-input` or non-interaction event reports `interactionId` 0 and has none of its own,
+    // and a second press of the same paint moved where the first one spent its latency.
+    //
+    // The check below is neither reached with a `0` nor needed: the interactions reported are the
+    // ones this tracker holds, and the only way into that map is past the check.
+    const remeasuredOthers = placement !== null && placement !== void 0 && placement.grew ? this.remeasuredUpdatesIn(placement.paint, {
+      except: interactionId
+    }) : [];
     if (!interactionId) {
-      return undefined;
+      return remeasuredOthers;
     }
     if (interactionId <= this.startsAfterInteractionId) {
-      return undefined;
+      // The entry belongs to the session before this one, but its handlers still ran before a
+      // paint of this one.
+      return remeasuredOthers;
     }
     this.highestInteractionId = Math.max(this.highestInteractionId, interactionId);
-
-    // Every latency is counted through here, so this is where one that cannot be measured
-    // is rejected: a `NaN` getting through becomes a `NaN` bucket key and a `NaN` `sumMs`
-    // for the rest of the session.
-    if (!Number.isFinite(entry.duration) || entry.duration < 0) {
-      return undefined;
-    }
     const tracked = this.interactions.get(interactionId);
     if (tracked === undefined) {
       // Taken once: an entry that only makes the interaction slower has to move its count
       // within the group it was counted in, not into another one.
       const group = this.groupByEvent.get(eventKey(entry.name, entry.startTime));
-      this.interactions.set(interactionId, {
+      const interaction = {
+        group,
         latencyMs: entry.duration,
-        group
-      });
-      this.prune(this.interactions);
-      return {
-        type: 'new',
-        interactionId,
-        latencyMs: entry.duration,
-        group
+        presentedIn: paint,
+        startedAt: entry.startTime
       };
+      this.interactions.set(interactionId, interaction);
+      return [this.newUpdate(interactionId, interaction), ...remeasuredOthers];
     }
-    if (entry.duration <= tracked.latencyMs) {
-      return undefined;
+    if (entry.duration > tracked.latencyMs) {
+      const previousLatencyMs = tracked.latencyMs;
+      tracked.latencyMs = entry.duration;
+      tracked.presentedIn = paint;
+      tracked.startedAt = entry.startTime;
+      return [this.remeasuredUpdate(interactionId, tracked, previousLatencyMs), ...remeasuredOthers];
     }
-    const fromMs = tracked.latencyMs;
-    tracked.latencyMs = entry.duration;
-    return {
-      type: 'remeasured',
-      interactionId,
-      fromMs,
-      toMs: entry.duration,
-      group: tracked.group
-    };
-  }
 
-  /** @returns the group of an interaction to count, when this is the event its group counts on. */
+    // Not the slowest entry of the interaction, so its latency stands. Its handlers still ran
+    // before the same paint, if this is that paint, and so moved where that latency went.
+    if (!(placement !== null && placement !== void 0 && placement.grew) || paint !== tracked.presentedIn) {
+      return remeasuredOthers;
+    }
+    return [this.remeasuredUpdate(interactionId, tracked, tracked.latencyMs), ...remeasuredOthers];
+  }
   recordEditorEvent(event) {
     const kind = interactionEventKind(event.type);
     if (!kind) {
@@ -136,23 +188,115 @@ export class InteractionTracker {
     // Every event of the interaction, because any of them can be the one Event Timing reports
     // as the slowest: for a pointer press that is usually the click.
     this.groupByEvent.set(eventKey(event.type, event.timeStamp), kind.group);
-    this.prune(this.groupByEvent);
     return kind.counts ? kind.group : undefined;
   }
-  prune(entries) {
-    if (entries.size <= MAX_TRACKED) {
-      return;
-    }
 
-    // `Map` preserves insertion order, so the entries inserted first are the least likely to
-    // see another entry or another event.
-    let remaining = PRUNE_BATCH;
-    for (const key of entries.keys()) {
-      entries.delete(key);
-      remaining -= 1;
-      if (remaining === 0) {
-        return;
+  /**
+   * Every interaction whose boundaries are read from this paint, reported as measured again at the
+   * latency it already had.
+   *
+   * @param except the interaction the entry measured, which the caller reports itself. `0` or
+   * nothing when the entry measured none, and then no interaction is left out.
+   */
+  remeasuredUpdatesIn(paint, {
+    except
+  }) {
+    const remeasured = [];
+    this.interactions.forEach((interaction, interactionId) => {
+      if (interaction.presentedIn === paint && interactionId !== except) {
+        remeasured.push(this.remeasuredUpdate(interactionId, interaction, interaction.latencyMs));
       }
+    });
+    return remeasured;
+  }
+  newUpdate(interactionId, tracked) {
+    return {
+      type: 'new',
+      interactionId,
+      latencyMs: tracked.latencyMs,
+      group: tracked.group,
+      boundaries: this.boundariesOf(tracked)
+    };
+  }
+  remeasuredUpdate(interactionId, tracked, previousLatencyMs) {
+    return {
+      type: 'remeasured',
+      interactionId,
+      previousLatencyMs,
+      latencyMs: tracked.latencyMs,
+      group: tracked.group,
+      boundaries: this.boundariesOf(tracked)
+    };
+  }
+
+  /**
+   * The four moments of an interaction, read from the paint as it stands now.
+   *
+   * Limited the way `web-vitals` limits its INP attribution, so the four stay in order: the paint's
+   * handlers can have started before the event arrived, and can have finished after the paint the
+   * event's rounded-down `duration` points at.
+   *
+   * @returns nothing when the browser reported no processing timestamps for the interaction, which
+   * leaves it in no paint.
+   */
+  boundariesOf({
+    latencyMs,
+    presentedIn,
+    startedAt
+  }) {
+    if (!presentedIn) {
+      return undefined;
     }
+    const processingStartedAt = Math.max(presentedIn.processingStartedAt, startedAt);
+    const presentedAt = Math.max(startedAt + latencyMs, processingStartedAt);
+    const processingEndedAt = Math.min(presentedIn.processingEndedAt, presentedAt);
+    return {
+      startedAt,
+      processingStartedAt,
+      processingEndedAt,
+      presentedAt
+    };
+  }
+
+  /**
+   * The paint that presented this entry, grown to cover this entry's own processing.
+   *
+   * The moment being matched is always the one the first entry of the paint reported, so that a
+   * run of entries 8 ms apart cannot walk one paint across the next.
+   *
+   * @returns nothing when the browser reported no processing timestamps for the entry, which
+   * leaves nothing to place it by.
+   */
+  paintOf(entry) {
+    const {
+      startTime,
+      duration,
+      processingStart,
+      processingEnd
+    } = entry;
+    if (typeof processingStart !== 'number' || typeof processingEnd !== 'number') {
+      return undefined;
+    }
+    const presentedAt = startTime + duration;
+    const knownPaint = this.recentPaints.findLast(paint => Math.abs(presentedAt - paint.presentedAt) <= PRESENTATION_ROUNDING_MS);
+    if (knownPaint) {
+      const grew = processingStart < knownPaint.processingStartedAt || processingEnd > knownPaint.processingEndedAt;
+      knownPaint.processingStartedAt = Math.min(processingStart, knownPaint.processingStartedAt);
+      knownPaint.processingEndedAt = Math.max(processingEnd, knownPaint.processingEndedAt);
+      return {
+        grew,
+        paint: knownPaint
+      };
+    }
+    const newPaint = {
+      presentedAt,
+      processingStartedAt: processingStart,
+      processingEndedAt: processingEnd
+    };
+    this.recentPaints.push(newPaint);
+    return {
+      grew: true,
+      paint: newPaint
+    };
   }
 }

package/dist/es2019/collector/interactivity-collector.js

@@ -1,10 +1,12 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { getDocument } from '@atlaskit/browser-apis';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { EditorEventObserver } from './editor-event-observer';
 import { InteractionObserver } from './interaction-observer';
 import { InteractivitySession } from './interactivity-session';
 import { SCHEMA_VERSION } from './bucket-boundaries';
 import { LifecycleObserver } from './lifecycle-observer';
+import { LongAnimationFrameObserver } from './long-animation-frame-observer';
 import { SnapshotScheduler } from './snapshot-scheduler';
 /**
  * Collects interaction latencies for one editor mount and emits session-to-date snapshots.
@@ -27,6 +29,7 @@ export class InteractivityCollector {
     this.getObjectId = options.getObjectId;
     this.getSessionMode = options.getSessionMode;
     this.interactionObserver = new InteractionObserver(entries => this.recordEntries(entries));
+    this.longAnimationFrameObserver = isExperimentEnabled('platform_editor_editor_interactivity_slowest') ? new LongAnimationFrameObserver(frames => this.recordFrames(frames)) : undefined;
     this.editorEvents = new EditorEventObserver(event => this.recordEditorEvent(event));
     this.snapshotScheduler = new SnapshotScheduler(() => this.onTimer());
     this.lifecycleObserver = new LifecycleObserver({
@@ -45,6 +48,7 @@ export class InteractivityCollector {
    * when it has already been stopped.
    */
   start() {
+    var _this$longAnimationFr;
     // Collecting is over for good once stopped: the session it covered has been reported.
     if (this.stopped) {
       return false;
@@ -60,6 +64,7 @@ export class InteractivityCollector {
     // this object was constructed.
     this.session = this.createSession(0);
     this.interactionObserver.start();
+    (_this$longAnimationFr = this.longAnimationFrameObserver) === null || _this$longAnimationFr === void 0 ? void 0 : _this$longAnimationFr.start();
     this.editorEvents.observe(this.editorRoot);
     this.snapshotScheduler.start();
     this.lifecycleObserver.start();
@@ -69,12 +74,14 @@ export class InteractivityCollector {
 
   /** Reports the session as ended by the editor unmounting, and stops collecting. */
   stop() {
+    var _this$longAnimationFr2;
     if (this.stopped) {
       return;
     }
     this.takeSnapshot('unmount');
     this.stopped = true;
     this.interactionObserver.stop();
+    (_this$longAnimationFr2 = this.longAnimationFrameObserver) === null || _this$longAnimationFr2 === void 0 ? void 0 : _this$longAnimationFr2.stop();
     this.editorEvents.stop();
     this.snapshotScheduler.stop();
     this.lifecycleObserver.stop();
@@ -191,6 +198,11 @@ export class InteractivityCollector {
     if (this.stopped) {
       return;
     }
+
+    // An event a script dispatched is no interaction: the browser counts none of them either.
+    if (!event.isTrusted) {
+      return;
+    }
     const group = this.session.tracker.recordEditorEvent(event);
     if (!group) {
       return;
@@ -200,46 +212,34 @@ export class InteractivityCollector {
     this.session[group].countTotal();
     this.session.revision += 1;
   }
+
+  /** Long Animation Frames say where the latency of a slow interaction went. */
+  recordFrames(frames) {
+    var _this$session$slowest;
+    if (this.stopped) {
+      return;
+    }
+    if ((_this$session$slowest = this.session.slowest) !== null && _this$session$slowest !== void 0 && _this$session$slowest.trackLongAnimationFrames(frames)) {
+      this.session.revision += 1;
+    }
+  }
   recordEntries(entries) {
-    const {
-      tracker,
-      page,
-      slowest
-    } = this.session;
     for (const entry of entries) {
-      var _update$group;
-      const update = tracker.merge(entry);
-      if (!update) {
-        continue;
-      }
-      let latencyMs;
-      if (update.type === 'new') {
-        latencyMs = update.latencyMs;
-        page.add(latencyMs);
+      for (const update of this.session.tracker.merge(entry)) {
+        var _this$session$slowest2;
+        let groupsChanged = this.session.page.trackInteractionUpdate(update);
         if (update.group) {
-          this.session[update.group].add(latencyMs);
+          groupsChanged = this.session[update.group].trackInteractionUpdate(update) || groupsChanged;
         }
-      } else {
-        latencyMs = update.toMs;
-        page.remeasure(update.fromMs, latencyMs);
-        if (update.group) {
-          this.session[update.group].remeasure(update.fromMs, latencyMs);
+        const slowestChanged = (_this$session$slowest2 = this.session.slowest) === null || _this$session$slowest2 === void 0 ? void 0 : _this$session$slowest2.trackInteractionUpdate(entry, update);
+        if (groupsChanged || slowestChanged) {
+          this.session.revision += 1;
         }
       }
-
-      // An interaction the editor never reported an event for is not the editor's as far as we
-      // know.
-      slowest === null || slowest === void 0 ? void 0 : slowest.track({
-        entry,
-        interactionId: update.interactionId,
-        latencyMs,
-        group: (_update$group = update.group) !== null && _update$group !== void 0 ? _update$group : 'outsideEditor'
-      });
-      this.session.revision += 1;
     }
   }
   takeSnapshot(reason) {
-    var _session$slowest;
+    var _this$longAnimationFr3, _session$slowest;
     if (this.stopped) {
       return;
     }
@@ -253,10 +253,11 @@ export class InteractivityCollector {
       return;
     }
 
-    // Must run before the change check: the browser may be holding entries that have not
-    // reached the observer callback yet, and on `pagehide` there is no later chance to
-    // pick them up.
+    // Must run before the change check: the browser may be holding entries and frames that have
+    // not reached the observer callbacks yet, and on `pagehide` there is no later chance to
+    // pick them up. Entries first, so a record the frames answer for exists by then.
     this.interactionObserver.drain();
+    (_this$longAnimationFr3 = this.longAnimationFrameObserver) === null || _this$longAnimationFr3 === void 0 ? void 0 : _this$longAnimationFr3.drain();
     if (session.revision === session.emittedRevision) {
       return;
     }

package/dist/es2019/collector/long-animation-frame-observer.js

@@ -0,0 +1,42 @@
+/**
+ * Reports the frames the browser took longer than 50 ms to render to `onFrames`. They are what says
+ * where the time of a slow interaction went — which script ran the longest while the user waited,
+ * and how much of the wait was style and layout — which Event Timing cannot answer.
+ *
+ * What they say about an interaction is `SlowInteractionList`'s to work out; this only observes.
+ */
+export class LongAnimationFrameObserver {
+  static isSupported() {
+    return typeof PerformanceObserver !== 'undefined' && PerformanceObserver.supportedEntryTypes.includes('long-animation-frame');
+  }
+  constructor(onFrames) {
+    this.onFrames = onFrames;
+  }
+  start() {
+    if (this.observer || !LongAnimationFrameObserver.isSupported()) {
+      return;
+    }
+    this.observer = new PerformanceObserver(list => {
+      this.onFrames(list.getEntries());
+    });
+
+    // Buffered, as `web-vitals` observes them: a frame reported before the editor mounted can
+    // still be the one an interaction right after it ran in.
+    this.observer.observe({
+      type: 'long-animation-frame',
+      buffered: true
+    });
+  }
+  drain() {
+    var _this$observer;
+    const frames = (_this$observer = this.observer) === null || _this$observer === void 0 ? void 0 : _this$observer.takeRecords();
+    if (frames) {
+      this.onFrames(frames);
+    }
+  }
+  stop() {
+    var _this$observer2;
+    (_this$observer2 = this.observer) === null || _this$observer2 === void 0 ? void 0 : _this$observer2.disconnect();
+    this.observer = undefined;
+  }
+}