@appsurify-testmap/rrweb-player 2.1.3-alpha.2 → 2.1.3-alpha.4

package/dist/rrweb-player.js

@@ -10647,7 +10647,7 @@ function createPlayerService(context, { getCastFn, applyEventsSynchronously, emi
             if (lastPlayedTimestamp && lastPlayedTimestamp < baselineTime && (event.timestamp <= lastPlayedTimestamp || event === lastPlayedEvent)) {
               continue;
             }
-            if (event.timestamp < baselineTime) {
+            if (event.timestamp <= baselineTime) {
               syncEvents.push(event);
             } else {
               const castFn = getCastFn(event, false);
@@ -13464,6 +13464,155 @@ function getInactivePeriods(events, inactivePeriodThreshold) {
   }
   return inactivePeriods;
 }
+const NORMALIZATION_GAP = 1e-3;
+const NORMALIZATION_MIN_BLOCK_SPAN = 1;
+function createIdentityTimelineMapper() {
+  return {
+    normalizationApplied: false,
+    toReplayerTime: (offset) => offset,
+    toPlayerTime: (offset) => offset,
+    toReplayerAbsolute: (value) => value,
+    toPlayerAbsolute: (value) => value,
+    normalizeEvent: (event) => event
+  };
+}
+function normalizeEventsForReplay(events, allowNormalization = true) {
+  if (!events.length) {
+    const mapper2 = createIdentityTimelineMapper();
+    return { events, mapper: mapper2 };
+  }
+  const params = allowNormalization ? getNormalizationParams(events) : null;
+  const normalizedEvents = events.map(
+    (event) => normalizeEventWithParams(event, params)
+  );
+  const originalStart = getTimelineStart(events);
+  const normalizedStart = getTimelineStart(normalizedEvents);
+  const mapper = createTimelineMapper(params, originalStart, normalizedStart);
+  return { events: normalizedEvents, mapper };
+}
+function getTimelineStart(events) {
+  return events.reduce((min, event) => Math.min(min, event.timestamp), Infinity);
+}
+function getNormalizationParams(events) {
+  const firstFull = events.find((event) => event.type === EventType.FullSnapshot);
+  if (!firstFull) {
+    return null;
+  }
+  const problemEvents = events.filter(
+    (event) => event.type === EventType.IncrementalSnapshot && event.timestamp < firstFull.timestamp
+  );
+  if (!problemEvents.length) {
+    return null;
+  }
+  const earliestProblem = problemEvents.reduce(
+    (min, event) => Math.min(min, event.timestamp),
+    Infinity
+  );
+  const latestProblem = problemEvents.reduce(
+    (max2, event) => Math.max(max2, event.timestamp),
+    -Infinity
+  );
+  const span = Math.max(0, latestProblem - earliestProblem);
+  const blockSpan = Math.max(span, NORMALIZATION_MIN_BLOCK_SPAN);
+  return {
+    earliestProblem,
+    span,
+    blockSpan,
+    blockStart: firstFull.timestamp + NORMALIZATION_GAP,
+    tailShift: NORMALIZATION_GAP + blockSpan,
+    firstFullTimestamp: firstFull.timestamp
+  };
+}
+function normalizeEventWithParams(event, params) {
+  if (!params) {
+    return event;
+  }
+  const domDependent = event.type === EventType.IncrementalSnapshot && event.timestamp < params.firstFullTimestamp;
+  const normalizedTimestamp = normalizeTimestamp(
+    event.timestamp,
+    domDependent,
+    params
+  );
+  if (normalizedTimestamp === event.timestamp) {
+    return event;
+  }
+  return {
+    ...event,
+    timestamp: normalizedTimestamp
+  };
+}
+function normalizeTimestamp(timestamp, domDependent, params) {
+  if (!params) {
+    return timestamp;
+  }
+  if (timestamp > params.firstFullTimestamp) {
+    return timestamp + params.tailShift;
+  }
+  if (domDependent && timestamp < params.firstFullTimestamp) {
+    if (params.span === 0) {
+      return params.blockStart;
+    }
+    const scale = params.blockSpan / params.span;
+    return params.blockStart + (timestamp - params.earliestProblem) * scale;
+  }
+  return timestamp;
+}
+function convertAbsoluteToNormalized(value, params) {
+  if (!params) {
+    return value;
+  }
+  if (value > params.firstFullTimestamp) {
+    return value + params.tailShift;
+  }
+  if (value >= params.earliestProblem && value < params.firstFullTimestamp) {
+    if (params.span === 0) {
+      return params.blockStart;
+    }
+    const scale = params.blockSpan / params.span;
+    return params.blockStart + (value - params.earliestProblem) * scale;
+  }
+  return value;
+}
+function convertAbsoluteToOriginal(value, params) {
+  if (!params) {
+    return value;
+  }
+  const blockEnd = params.blockStart + params.blockSpan;
+  const tailStart = params.firstFullTimestamp + params.tailShift;
+  if (value >= tailStart) {
+    return value - params.tailShift;
+  }
+  if (value >= params.blockStart && value <= blockEnd) {
+    if (params.span === 0) {
+      return params.earliestProblem;
+    }
+    const scale = params.blockSpan / params.span;
+    return params.earliestProblem + (value - params.blockStart) / scale;
+  }
+  return value;
+}
+function createTimelineMapper(params, originalStart, normalizedStart) {
+  const safeOriginalStart = Number.isFinite(originalStart) ? originalStart : 0;
+  const safeNormalizedStart = Number.isFinite(normalizedStart) ? normalizedStart : 0;
+  const toReplayerAbsolute = (value) => convertAbsoluteToNormalized(value, params);
+  const toPlayerAbsolute = (value) => convertAbsoluteToOriginal(value, params);
+  return {
+    normalizationApplied: Boolean(params),
+    normalizeEvent: (event) => normalizeEventWithParams(event, params),
+    toReplayerAbsolute,
+    toPlayerAbsolute,
+    toReplayerTime: (offset) => {
+      const absoluteOriginal = safeOriginalStart + offset;
+      const normalizedAbsolute = toReplayerAbsolute(absoluteOriginal);
+      return normalizedAbsolute - safeNormalizedStart;
+    },
+    toPlayerTime: (offset) => {
+      const normalizedAbsolute = safeNormalizedStart + offset;
+      const originalAbsolute = toPlayerAbsolute(normalizedAbsolute);
+      return originalAbsolute - safeOriginalStart;
+    }
+  };
+}
 function create_fragment$2(ctx) {
   let div;
   let input2;
@@ -13613,17 +13762,17 @@ class Switch extends SvelteComponent {
 }
 function get_each_context(ctx, list2, i) {
   const child_ctx = ctx.slice();
-  child_ctx[38] = list2[i];
+  child_ctx[40] = list2[i];
   return child_ctx;
 }
 function get_each_context_1(ctx, list2, i) {
   const child_ctx = ctx.slice();
-  child_ctx[41] = list2[i];
+  child_ctx[43] = list2[i];
   return child_ctx;
 }
 function get_each_context_2(ctx, list2, i) {
   const child_ctx = ctx.slice();
-  child_ctx[44] = list2[i];
+  child_ctx[46] = list2[i];
   return child_ctx;
 }
 function create_if_block$1(ctx) {
@@ -13695,7 +13844,7 @@ function create_if_block$1(ctx) {
     each_blocks[i] = create_each_block(get_each_context(ctx, each_value, i));
   }
   function switch_1_checked_binding(value) {
-    ctx[29](value);
+    ctx[30](value);
   }
   let switch_1_props = {
     id: "skip",
@@ -13806,7 +13955,7 @@ function create_if_block$1(ctx) {
       }
       append(div2, t4);
       append(div2, div1);
-      ctx[27](div2);
+      ctx[28](div2);
       append(div3, t5);
       append(div3, span1);
       append(span1, t6);
@@ -13849,7 +13998,7 @@ function create_if_block$1(ctx) {
             button1,
             "click",
             /*click_handler_1*/
-            ctx[30]
+            ctx[31]
           )
         ];
         mounted = true;
@@ -13995,7 +14144,7 @@ function create_if_block$1(ctx) {
       }
       destroy_each(each_blocks_2, detaching);
       destroy_each(each_blocks_1, detaching);
-      ctx[27](null);
+      ctx[28](null);
       if_block.d();
       destroy_each(each_blocks, detaching);
       destroy_component(switch_1);
@@ -14011,12 +14160,12 @@ function create_each_block_2(ctx) {
     c() {
       div = element("div");
       attr(div, "title", div_title_value = /*period*/
-      ctx[44].name);
+      ctx[46].name);
       set_style(
         div,
         "width",
         /*period*/
-        ctx[44].width
+        ctx[46].width
       );
       set_style(div, "height", "4px");
       set_style(div, "position", "absolute");
@@ -14024,13 +14173,13 @@ function create_each_block_2(ctx) {
         div,
         "background",
         /*period*/
-        ctx[44].background
+        ctx[46].background
       );
       set_style(
         div,
         "left",
         /*period*/
-        ctx[44].position
+        ctx[46].position
       );
     },
     m(target, anchor) {
@@ -14039,7 +14188,7 @@ function create_each_block_2(ctx) {
     p(ctx2, dirty) {
       if (dirty[0] & /*inactivePeriods*/
       8192 && div_title_value !== (div_title_value = /*period*/
-      ctx2[44].name)) {
+      ctx2[46].name)) {
         attr(div, "title", div_title_value);
       }
       if (dirty[0] & /*inactivePeriods*/
@@ -14048,7 +14197,7 @@ function create_each_block_2(ctx) {
           div,
           "width",
           /*period*/
-          ctx2[44].width
+          ctx2[46].width
         );
       }
       if (dirty[0] & /*inactivePeriods*/
@@ -14057,7 +14206,7 @@ function create_each_block_2(ctx) {
           div,
           "background",
           /*period*/
-          ctx2[44].background
+          ctx2[46].background
         );
       }
       if (dirty[0] & /*inactivePeriods*/
@@ -14066,7 +14215,7 @@ function create_each_block_2(ctx) {
           div,
           "left",
           /*period*/
-          ctx2[44].position
+          ctx2[46].position
         );
       }
     },
@@ -14084,7 +14233,7 @@ function create_each_block_1(ctx) {
     c() {
       div = element("div");
       attr(div, "title", div_title_value = /*event*/
-      ctx[41].name);
+      ctx[43].name);
       set_style(div, "width", "10px");
       set_style(div, "height", "5px");
       set_style(div, "position", "absolute");
@@ -14094,13 +14243,13 @@ function create_each_block_1(ctx) {
         div,
         "background",
         /*event*/
-        ctx[41].background
+        ctx[43].background
       );
       set_style(
         div,
         "left",
         /*event*/
-        ctx[41].position
+        ctx[43].position
       );
     },
     m(target, anchor) {
@@ -14109,7 +14258,7 @@ function create_each_block_1(ctx) {
     p(ctx2, dirty) {
       if (dirty[0] & /*customEvents*/
       512 && div_title_value !== (div_title_value = /*event*/
-      ctx2[41].name)) {
+      ctx2[43].name)) {
         attr(div, "title", div_title_value);
       }
       if (dirty[0] & /*customEvents*/
@@ -14118,7 +14267,7 @@ function create_each_block_1(ctx) {
           div,
           "background",
           /*event*/
-          ctx2[41].background
+          ctx2[43].background
         );
       }
       if (dirty[0] & /*customEvents*/
@@ -14127,7 +14276,7 @@ function create_each_block_1(ctx) {
           div,
           "left",
           /*event*/
-          ctx2[41].position
+          ctx2[43].position
         );
       }
     },
@@ -14196,7 +14345,7 @@ function create_each_block(ctx) {
   let button;
   let t0_value = (
     /*s*/
-    ctx[38] + ""
+    ctx[40] + ""
   );
   let t0;
   let t1;
@@ -14206,9 +14355,9 @@ function create_each_block(ctx) {
   function click_handler() {
     return (
       /*click_handler*/
-      ctx[28](
+      ctx[29](
         /*s*/
-        ctx[38]
+        ctx[40]
       )
     );
   }
@@ -14224,7 +14373,7 @@ function create_each_block(ctx) {
         button,
         "active",
         /*s*/
-        ctx[38] === /*speed*/
+        ctx[40] === /*speed*/
         ctx[1] && /*speedState*/
         ctx[10] !== "skipping"
       );
@@ -14242,7 +14391,7 @@ function create_each_block(ctx) {
       ctx = new_ctx;
       if (dirty[0] & /*speedOption*/
       8 && t0_value !== (t0_value = /*s*/
-      ctx[38] + "")) set_data(t0, t0_value);
+      ctx[40] + "")) set_data(t0, t0_value);
       if (dirty[0] & /*speedState*/
       1024 && button_disabled_value !== (button_disabled_value = /*speedState*/
       ctx[10] === "skipping")) {
@@ -14254,7 +14403,7 @@ function create_each_block(ctx) {
           button,
           "active",
           /*s*/
-          ctx[38] === /*speed*/
+          ctx[40] === /*speed*/
           ctx[1] && /*speedState*/
           ctx[10] !== "skipping"
         );
@@ -14344,6 +14493,7 @@ function instance$1($$self, $$props, $$invalidate) {
   let { speed = speedOption.length ? speedOption[0] : 1 } = $$props;
   let { tags = {} } = $$props;
   let { inactiveColor } = $$props;
+  let { timeMapper = createIdentityTimelineMapper() } = $$props;
   let currentTime = 0;
   let timer = null;
   let playerState;
@@ -14353,6 +14503,14 @@ function instance$1($$self, $$props, $$invalidate) {
   let pauseAt = false;
   let onPauseHook = null;
   let loop = null;
+  const readMeta = () => {
+    const rawMeta = replayer.getMetaData();
+    return {
+      startTime: timeMapper.toPlayerAbsolute(rawMeta.startTime),
+      endTime: timeMapper.toPlayerAbsolute(rawMeta.endTime),
+      totalTime: timeMapper.toPlayerTime(rawMeta.totalTime)
+    };
+  };
   let meta;
   let percentage;
   let customEvents;
@@ -14360,7 +14518,7 @@ function instance$1($$self, $$props, $$invalidate) {
   const loopTimer = () => {
     stopTimer();
     function update2() {
-      $$invalidate(6, currentTime = replayer.getCurrentTime());
+      $$invalidate(6, currentTime = timeMapper.toPlayerTime(replayer.getCurrentTime()));
       if (pauseAt && currentTime >= pauseAt) {
         if (loop) {
           playRange(loop.start, loop.end, true, void 0);
@@ -14402,7 +14560,7 @@ function instance$1($$self, $$props, $$invalidate) {
       replayer.play();
       finished = false;
     } else {
-      replayer.play(currentTime);
+      replayer.play(timeMapper.toReplayerTime(currentTime));
     }
   };
   const pause = () => {
@@ -14418,9 +14576,9 @@ function instance$1($$self, $$props, $$invalidate) {
     finished = false;
     const resumePlaying = typeof play2 === "boolean" ? play2 : playerState === "playing";
     if (resumePlaying) {
-      replayer.play(timeOffset);
+      replayer.play(timeMapper.toReplayerTime(timeOffset));
     } else {
-      replayer.pause(timeOffset);
+      replayer.pause(timeMapper.toReplayerTime(timeOffset));
     }
   };
   const playRange = (timeOffset, endTimeOffset, startLooping = false, afterHook = void 0) => {
@@ -14432,7 +14590,7 @@ function instance$1($$self, $$props, $$invalidate) {
     $$invalidate(6, currentTime = timeOffset);
     pauseAt = endTimeOffset;
     onPauseHook = afterHook || null;
-    replayer.play(timeOffset);
+    replayer.play(timeMapper.toReplayerTime(timeOffset));
   };
   const handleProgressClick = (event) => {
     if (speedState === "skipping") {
@@ -14467,7 +14625,7 @@ function instance$1($$self, $$props, $$invalidate) {
     }
     replayer.setConfig({ speed });
     if (needFreeze) {
-      replayer.play(currentTime);
+      replayer.play(timeMapper.toReplayerTime(currentTime));
     }
   };
   const toggleSkipInactive = () => {
@@ -14475,7 +14633,7 @@ function instance$1($$self, $$props, $$invalidate) {
   };
   const triggerUpdateMeta = () => {
     return Promise.resolve().then(() => {
-      $$invalidate(8, meta = replayer.getMetaData());
+      $$invalidate(8, meta = readMeta());
     });
   };
   onMount(() => {
@@ -14539,6 +14697,7 @@ function instance$1($$self, $$props, $$invalidate) {
     if ("speed" in $$props2) $$invalidate(1, speed = $$props2.speed);
     if ("tags" in $$props2) $$invalidate(19, tags = $$props2.tags);
     if ("inactiveColor" in $$props2) $$invalidate(20, inactiveColor = $$props2.inactiveColor);
+    if ("timeMapper" in $$props2) $$invalidate(21, timeMapper = $$props2.timeMapper);
   };
   $$self.$$.update = () => {
     if ($$self.$$.dirty[0] & /*currentTime*/
@@ -14553,10 +14712,6 @@ function instance$1($$self, $$props, $$invalidate) {
         dispatch("ui-update-player-state", { payload: playerState });
       }
     }
-    if ($$self.$$.dirty[0] & /*replayer*/
-    131072) {
-      $$invalidate(8, meta = replayer.getMetaData());
-    }
     if ($$self.$$.dirty[0] & /*currentTime, meta*/
     320) {
       {
@@ -14565,20 +14720,21 @@ function instance$1($$self, $$props, $$invalidate) {
         dispatch("ui-update-progress", { payload: percent });
       }
     }
-    if ($$self.$$.dirty[0] & /*replayer, tags*/
-    655360) {
+    if ($$self.$$.dirty[0] & /*replayer, timeMapper, tags*/
+    2752512) {
       $$invalidate(9, customEvents = (() => {
         const { context } = replayer.service.state;
         const totalEvents = context.events.length;
-        const start = context.events[0].timestamp;
-        const end = context.events[totalEvents - 1].timestamp;
+        const start = timeMapper.toPlayerAbsolute(context.events[0].timestamp);
+        const end = timeMapper.toPlayerAbsolute(context.events[totalEvents - 1].timestamp);
         const customEvents2 = [];
         context.events.forEach((event) => {
           if (event.type === EventType.Custom) {
+            const convertedTimestamp = timeMapper.toPlayerAbsolute(event.timestamp);
             const customEvent = {
               name: event.data.tag,
               background: tags[event.data.tag] || "rgb(73, 80, 246)",
-              position: `${position(start, end, event.timestamp)}%`
+              position: `${position(start, end, convertedTimestamp)}%`
             };
             customEvents2.push(customEvent);
           }
@@ -14586,15 +14742,19 @@ function instance$1($$self, $$props, $$invalidate) {
         return customEvents2;
       })());
     }
-    if ($$self.$$.dirty[0] & /*replayer, inactiveColor*/
-    1179648) {
+    if ($$self.$$.dirty[0] & /*replayer, timeMapper, inactiveColor*/
+    3276800) {
       $$invalidate(13, inactivePeriods = (() => {
         try {
           const { context } = replayer.service.state;
-          const totalEvents = context.events.length;
-          const start = context.events[0].timestamp;
-          const end = context.events[totalEvents - 1].timestamp;
-          const periods = getInactivePeriods(context.events, replayer.config.inactivePeriodThreshold);
+          const playerEvents = context.events.map((event) => ({
+            ...event,
+            timestamp: timeMapper.toPlayerAbsolute(event.timestamp)
+          }));
+          const totalEvents = playerEvents.length;
+          const start = playerEvents[0].timestamp;
+          const end = playerEvents[totalEvents - 1].timestamp;
+          const periods = getInactivePeriods(playerEvents, replayer.config.inactivePeriodThreshold);
           const getWidth = (startTime, endTime, tagStart, tagEnd) => {
             const sessionDuration = endTime - startTime;
             const eventDuration = tagEnd - tagStart;
@@ -14613,6 +14773,7 @@ function instance$1($$self, $$props, $$invalidate) {
       })());
     }
   };
+  $$invalidate(8, meta = readMeta());
   return [
     skipInactive,
     speed,
@@ -14635,6 +14796,7 @@ function instance$1($$self, $$props, $$invalidate) {
     autoPlay,
     tags,
     inactiveColor,
+    timeMapper,
     play,
     pause,
     goto,
@@ -14665,14 +14827,15 @@ class Controller extends SvelteComponent {
         speed: 1,
         tags: 19,
         inactiveColor: 20,
+        timeMapper: 21,
         toggle: 4,
-        play: 21,
-        pause: 22,
-        goto: 23,
-        playRange: 24,
+        play: 22,
+        pause: 23,
+        goto: 24,
+        playRange: 25,
         setSpeed: 5,
-        toggleSkipInactive: 25,
-        triggerUpdateMeta: 26
+        toggleSkipInactive: 26,
+        triggerUpdateMeta: 27
       },
       null,
       [-1, -1]
@@ -14682,25 +14845,25 @@ class Controller extends SvelteComponent {
     return this.$$.ctx[4];
   }
   get play() {
-    return this.$$.ctx[21];
+    return this.$$.ctx[22];
   }
   get pause() {
-    return this.$$.ctx[22];
+    return this.$$.ctx[23];
   }
   get goto() {
-    return this.$$.ctx[23];
+    return this.$$.ctx[24];
   }
   get playRange() {
-    return this.$$.ctx[24];
+    return this.$$.ctx[25];
   }
   get setSpeed() {
     return this.$$.ctx[5];
   }
   get toggleSkipInactive() {
-    return this.$$.ctx[25];
+    return this.$$.ctx[26];
   }
   get triggerUpdateMeta() {
-    return this.$$.ctx[26];
+    return this.$$.ctx[27];
   }
 }
 function create_if_block(ctx) {
@@ -14709,7 +14872,7 @@ function create_if_block(ctx) {
   let controller_1_props = {
     replayer: (
       /*replayer*/
-      ctx[7]
+      ctx[8]
     ),
     showController: (
       /*showController*/
@@ -14734,14 +14897,18 @@ function create_if_block(ctx) {
     inactiveColor: (
       /*inactiveColor*/
       ctx[5]
+    ),
+    timeMapper: (
+      /*timeMapper*/
+      ctx[7]
     )
   };
   controller_1 = new Controller({ props: controller_1_props });
-  ctx[32](controller_1);
+  ctx[34](controller_1);
   controller_1.$on(
     "fullscreen",
     /*fullscreen_handler*/
-    ctx[33]
+    ctx[35]
   );
   return {
     c() {
@@ -14754,8 +14921,8 @@ function create_if_block(ctx) {
     p(ctx2, dirty) {
       const controller_1_changes = {};
       if (dirty[0] & /*replayer*/
-      128) controller_1_changes.replayer = /*replayer*/
-      ctx2[7];
+      256) controller_1_changes.replayer = /*replayer*/
+      ctx2[8];
       if (dirty[0] & /*showController*/
       8) controller_1_changes.showController = /*showController*/
       ctx2[3];
@@ -14774,6 +14941,9 @@ function create_if_block(ctx) {
       if (dirty[0] & /*inactiveColor*/
       32) controller_1_changes.inactiveColor = /*inactiveColor*/
       ctx2[5];
+      if (dirty[0] & /*timeMapper*/
+      128) controller_1_changes.timeMapper = /*timeMapper*/
+      ctx2[7];
       controller_1.$set(controller_1_changes);
     },
     i(local) {
@@ -14786,7 +14956,7 @@ function create_if_block(ctx) {
       current = false;
     },
     d(detaching) {
-      ctx[32](null);
+      ctx[34](null);
       destroy_component(controller_1, detaching);
     }
   };
@@ -14798,7 +14968,7 @@ function create_fragment(ctx) {
   let current;
   let if_block = (
     /*replayer*/
-    ctx[7] && create_if_block(ctx)
+    ctx[8] && create_if_block(ctx)
   );
   return {
     c() {
@@ -14811,43 +14981,43 @@ function create_fragment(ctx) {
         div0,
         "style",
         /*style*/
-        ctx[11]
+        ctx[12]
       );
       attr(div1, "class", "rr-player");
       attr(
         div1,
         "style",
         /*playerStyle*/
-        ctx[12]
+        ctx[13]
       );
     },
     m(target, anchor) {
       insert(target, div1, anchor);
       append(div1, div0);
-      ctx[31](div0);
+      ctx[33](div0);
       append(div1, t2);
       if (if_block) if_block.m(div1, null);
-      ctx[34](div1);
+      ctx[36](div1);
       current = true;
     },
     p(ctx2, dirty) {
       if (!current || dirty[0] & /*style*/
-      2048) {
+      4096) {
         attr(
           div0,
           "style",
           /*style*/
-          ctx2[11]
+          ctx2[12]
         );
       }
       if (
         /*replayer*/
-        ctx2[7]
+        ctx2[8]
       ) {
         if (if_block) {
           if_block.p(ctx2, dirty);
           if (dirty[0] & /*replayer*/
-          128) {
+          256) {
             transition_in(if_block, 1);
           }
         } else {
@@ -14864,12 +15034,12 @@ function create_fragment(ctx) {
         check_outros();
       }
       if (!current || dirty[0] & /*playerStyle*/
-      4096) {
+      8192) {
         attr(
           div1,
           "style",
           /*playerStyle*/
-          ctx2[12]
+          ctx2[13]
         );
       }
     },
@@ -14886,9 +15056,9 @@ function create_fragment(ctx) {
       if (detaching) {
         detach(div1);
       }
-      ctx[31](null);
+      ctx[33](null);
       if (if_block) if_block.d();
-      ctx[34](null);
+      ctx[36](null);
     }
   };
 }
@@ -14905,6 +15075,9 @@ function instance($$self, $$props, $$invalidate) {
   let { showController = true } = $$props;
   let { tags = {} } = $$props;
   let { inactiveColor = "#D4D4D4" } = $$props;
+  let { allowTimelineNormalization = true } = $$props;
+  let normalizedEvents = events;
+  let timeMapper = createIdentityTimelineMapper();
   let replayer;
   const getMirror = () => replayer.getMirror();
   let player;
@@ -14943,10 +15116,16 @@ function instance($$self, $$props, $$invalidate) {
     }
   };
   const addEvent = (event) => {
-    replayer.addEvent(event);
+    const normalizedEvent = timeMapper.normalizeEvent(event);
+    replayer.addEvent(normalizedEvent);
     controller.triggerUpdateMeta();
   };
-  const getMetaData = () => replayer.getMetaData();
+  const mapMetaData = (meta) => ({
+    startTime: timeMapper.toPlayerAbsolute(meta.startTime),
+    endTime: timeMapper.toPlayerAbsolute(meta.endTime),
+    totalTime: timeMapper.toPlayerTime(meta.totalTime)
+  });
+  const getMetaData = () => mapMetaData(replayer.getMetaData());
   const getReplayer = () => replayer;
   const toggle = () => {
     controller.toggle();
@@ -14989,8 +15168,8 @@ function instance($$self, $$props, $$invalidate) {
         }
         `);
     }
-    $$invalidate(7, replayer = new Replayer(
-      events,
+    $$invalidate(8, replayer = new Replayer(
+      normalizedEvents,
       {
         speed,
         root: frame,
@@ -15007,8 +15186,8 @@ function instance($$self, $$props, $$invalidate) {
           () => {
             _width = width;
             _height = height;
-            $$invalidate(13, width = player.offsetWidth);
-            $$invalidate(14, height = player.offsetHeight - (showController ? controllerHeight : 0));
+            $$invalidate(14, width = player.offsetWidth);
+            $$invalidate(15, height = player.offsetHeight - (showController ? controllerHeight : 0));
             updateScale(replayer.wrapper, {
               width: replayer.iframe.offsetWidth,
               height: replayer.iframe.offsetHeight
@@ -15017,8 +15196,8 @@ function instance($$self, $$props, $$invalidate) {
           0
         );
       } else {
-        $$invalidate(13, width = _width);
-        $$invalidate(14, height = _height);
+        $$invalidate(14, width = _width);
+        $$invalidate(15, height = _height);
         updateScale(replayer.wrapper, {
           width: replayer.iframe.offsetWidth,
           height: replayer.iframe.offsetHeight
@@ -15032,47 +15211,56 @@ function instance($$self, $$props, $$invalidate) {
   function div0_binding($$value) {
     binding_callbacks[$$value ? "unshift" : "push"](() => {
       frame = $$value;
-      $$invalidate(9, frame);
+      $$invalidate(10, frame);
     });
   }
   function controller_1_binding($$value) {
     binding_callbacks[$$value ? "unshift" : "push"](() => {
       controller = $$value;
-      $$invalidate(10, controller);
+      $$invalidate(11, controller);
     });
   }
   const fullscreen_handler = () => toggleFullscreen();
   function div1_binding($$value) {
     binding_callbacks[$$value ? "unshift" : "push"](() => {
       player = $$value;
-      $$invalidate(8, player);
+      $$invalidate(9, player);
     });
   }
   $$self.$$set = ($$new_props) => {
-    $$invalidate(39, $$props = assign(assign({}, $$props), exclude_internal_props($$new_props)));
-    if ("width" in $$new_props) $$invalidate(13, width = $$new_props.width);
-    if ("height" in $$new_props) $$invalidate(14, height = $$new_props.height);
-    if ("maxScale" in $$new_props) $$invalidate(15, maxScale = $$new_props.maxScale);
-    if ("events" in $$new_props) $$invalidate(16, events = $$new_props.events);
+    $$invalidate(43, $$props = assign(assign({}, $$props), exclude_internal_props($$new_props)));
+    if ("width" in $$new_props) $$invalidate(14, width = $$new_props.width);
+    if ("height" in $$new_props) $$invalidate(15, height = $$new_props.height);
+    if ("maxScale" in $$new_props) $$invalidate(16, maxScale = $$new_props.maxScale);
+    if ("events" in $$new_props) $$invalidate(17, events = $$new_props.events);
     if ("skipInactive" in $$new_props) $$invalidate(0, skipInactive = $$new_props.skipInactive);
     if ("autoPlay" in $$new_props) $$invalidate(1, autoPlay = $$new_props.autoPlay);
     if ("speedOption" in $$new_props) $$invalidate(2, speedOption = $$new_props.speedOption);
-    if ("speed" in $$new_props) $$invalidate(17, speed = $$new_props.speed);
+    if ("speed" in $$new_props) $$invalidate(18, speed = $$new_props.speed);
     if ("showController" in $$new_props) $$invalidate(3, showController = $$new_props.showController);
     if ("tags" in $$new_props) $$invalidate(4, tags = $$new_props.tags);
     if ("inactiveColor" in $$new_props) $$invalidate(5, inactiveColor = $$new_props.inactiveColor);
+    if ("allowTimelineNormalization" in $$new_props) $$invalidate(19, allowTimelineNormalization = $$new_props.allowTimelineNormalization);
   };
   $$self.$$.update = () => {
+    if ($$self.$$.dirty[0] & /*events, allowTimelineNormalization*/
+    655360) {
+      {
+        const result2 = normalizeEventsForReplay(events, allowTimelineNormalization);
+        normalizedEvents = result2.events;
+        $$invalidate(7, timeMapper = result2.mapper);
+      }
+    }
     if ($$self.$$.dirty[0] & /*width, height*/
-    24576) {
-      $$invalidate(11, style = inlineCss({
+    49152) {
+      $$invalidate(12, style = inlineCss({
         width: `${width}px`,
         height: `${height}px`
       }));
     }
     if ($$self.$$.dirty[0] & /*width, height, showController*/
-    24584) {
-      $$invalidate(12, playerStyle = inlineCss({
+    49160) {
+      $$invalidate(13, playerStyle = inlineCss({
         width: `${width}px`,
         height: `${height + (showController ? controllerHeight : 0)}px`
       }));
@@ -15087,6 +15275,7 @@ function instance($$self, $$props, $$invalidate) {
     tags,
     inactiveColor,
     toggleFullscreen,
+    timeMapper,
     replayer,
     player,
     frame,
@@ -15098,6 +15287,7 @@ function instance($$self, $$props, $$invalidate) {
     maxScale,
     events,
     speed,
+    allowTimelineNormalization,
     getMirror,
     triggerResize,
     addEventListener,
@@ -15127,77 +15317,78 @@ let Player$1 = class Player extends SvelteComponent {
       create_fragment,
       safe_not_equal,
       {
-        width: 13,
-        height: 14,
-        maxScale: 15,
-        events: 16,
+        width: 14,
+        height: 15,
+        maxScale: 16,
+        events: 17,
         skipInactive: 0,
         autoPlay: 1,
         speedOption: 2,
-        speed: 17,
+        speed: 18,
         showController: 3,
         tags: 4,
         inactiveColor: 5,
-        getMirror: 18,
-        triggerResize: 19,
+        allowTimelineNormalization: 19,
+        getMirror: 20,
+        triggerResize: 21,
         toggleFullscreen: 6,
-        addEventListener: 20,
-        addEvent: 21,
-        getMetaData: 22,
-        getReplayer: 23,
-        toggle: 24,
-        setSpeed: 25,
-        toggleSkipInactive: 26,
-        play: 27,
-        pause: 28,
-        goto: 29,
-        playRange: 30
+        addEventListener: 22,
+        addEvent: 23,
+        getMetaData: 24,
+        getReplayer: 25,
+        toggle: 26,
+        setSpeed: 27,
+        toggleSkipInactive: 28,
+        play: 29,
+        pause: 30,
+        goto: 31,
+        playRange: 32
       },
       null,
       [-1, -1]
     );
   }
   get getMirror() {
-    return this.$$.ctx[18];
+    return this.$$.ctx[20];
   }
   get triggerResize() {
-    return this.$$.ctx[19];
+    return this.$$.ctx[21];
   }
   get toggleFullscreen() {
     return this.$$.ctx[6];
   }
   get addEventListener() {
-    return this.$$.ctx[20];
+    return this.$$.ctx[22];
   }
   get addEvent() {
-    return this.$$.ctx[21];
+    return this.$$.ctx[23];
   }
   get getMetaData() {
-    return this.$$.ctx[22];
+    return this.$$.ctx[24];
   }
   get getReplayer() {
-    return this.$$.ctx[23];
+    return this.$$.ctx[25];
   }
   get toggle() {
-    return this.$$.ctx[24];
+    return this.$$.ctx[26];
   }
   get setSpeed() {
-    return this.$$.ctx[25];
+    return this.$$.ctx[27];
   }
   get toggleSkipInactive() {
-    return this.$$.ctx[26];
+    return this.$$.ctx[28];
   }
   get play() {
-    return this.$$.ctx[27];
+    return this.$$.ctx[29];
   }
   get pause() {
-    return this.$$.ctx[28];
+    return this.$$.ctx[30];
   }
   get goto() {
-    return this.$$.ctx[29];
+    return this.$$.ctx[31];
   }
   get playRange() {
-    return this.$$.ctx[30];
+    return this.$$.ctx[32];
   }
 };
 class Player2 extends Player$1 {