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

package/dist/rrweb-player.umd.cjs

@@ -11041,7 +11041,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);
@@ -13897,6 +13897,154 @@ 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 __spreadProps(__spreadValues({}, 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;
@@ -14051,17 +14199,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) {
@@ -14134,7 +14282,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",
@@ -14245,7 +14393,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);
@@ -14288,7 +14436,7 @@ function create_if_block$1(ctx) {
             button1,
             "click",
             /*click_handler_1*/
-            ctx[30]
+            ctx[31]
           )
         ];
         mounted = true;
@@ -14438,7 +14586,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);
@@ -14454,12 +14602,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");
@@ -14467,13 +14615,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) {
@@ -14482,7 +14630,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*/
@@ -14491,7 +14639,7 @@ function create_each_block_2(ctx) {
           div,
           "width",
           /*period*/
-          ctx2[44].width
+          ctx2[46].width
         );
       }
       if (dirty[0] & /*inactivePeriods*/
@@ -14500,7 +14648,7 @@ function create_each_block_2(ctx) {
           div,
           "background",
           /*period*/
-          ctx2[44].background
+          ctx2[46].background
         );
       }
       if (dirty[0] & /*inactivePeriods*/
@@ -14509,7 +14657,7 @@ function create_each_block_2(ctx) {
           div,
           "left",
           /*period*/
-          ctx2[44].position
+          ctx2[46].position
         );
       }
     },
@@ -14527,7 +14675,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");
@@ -14537,13 +14685,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) {
@@ -14552,7 +14700,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*/
@@ -14561,7 +14709,7 @@ function create_each_block_1(ctx) {
           div,
           "background",
           /*event*/
-          ctx2[41].background
+          ctx2[43].background
         );
       }
       if (dirty[0] & /*customEvents*/
@@ -14570,7 +14718,7 @@ function create_each_block_1(ctx) {
           div,
           "left",
           /*event*/
-          ctx2[41].position
+          ctx2[43].position
         );
       }
     },
@@ -14639,7 +14787,7 @@ function create_each_block(ctx) {
   let button;
   let t0_value = (
     /*s*/
-    ctx[38] + ""
+    ctx[40] + ""
   );
   let t0;
   let t1;
@@ -14649,9 +14797,9 @@ function create_each_block(ctx) {
   function click_handler() {
     return (
       /*click_handler*/
-      ctx[28](
+      ctx[29](
         /*s*/
-        ctx[38]
+        ctx[40]
       )
     );
   }
@@ -14667,7 +14815,7 @@ function create_each_block(ctx) {
         button,
         "active",
         /*s*/
-        ctx[38] === /*speed*/
+        ctx[40] === /*speed*/
         ctx[1] && /*speedState*/
         ctx[10] !== "skipping"
       );
@@ -14685,7 +14833,7 @@ function create_each_block(ctx) {
       ctx = new_ctx;
       if (dirty[0] & /*speedOption*/
       8 && t0_value !== (t0_value = /*s*/
-      ctx[38] + ""))
+      ctx[40] + ""))
         set_data(t0, t0_value);
       if (dirty[0] & /*speedState*/
       1024 && button_disabled_value !== (button_disabled_value = /*speedState*/
@@ -14698,7 +14846,7 @@ function create_each_block(ctx) {
           button,
           "active",
           /*s*/
-          ctx[38] === /*speed*/
+          ctx[40] === /*speed*/
           ctx[1] && /*speedState*/
           ctx[10] !== "skipping"
         );
@@ -14792,6 +14940,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;
@@ -14801,6 +14950,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;
@@ -14808,7 +14965,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);
@@ -14850,7 +15007,7 @@ function instance$1($$self, $$props, $$invalidate) {
       replayer.play();
       finished = false;
     } else {
-      replayer.play(currentTime);
+      replayer.play(timeMapper.toReplayerTime(currentTime));
     }
   };
   const pause = () => {
@@ -14866,9 +15023,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) => {
@@ -14880,7 +15037,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") {
@@ -14915,7 +15072,7 @@ function instance$1($$self, $$props, $$invalidate) {
     }
     replayer.setConfig({ speed });
     if (needFreeze) {
-      replayer.play(currentTime);
+      replayer.play(timeMapper.toReplayerTime(currentTime));
     }
   };
   const toggleSkipInactive = () => {
@@ -14923,7 +15080,7 @@ function instance$1($$self, $$props, $$invalidate) {
   };
   const triggerUpdateMeta = () => {
     return Promise.resolve().then(() => {
-      $$invalidate(8, meta = replayer.getMetaData());
+      $$invalidate(8, meta = readMeta());
     });
   };
   onMount(() => {
@@ -14995,6 +15152,8 @@ function instance$1($$self, $$props, $$invalidate) {
       $$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*/
@@ -15009,10 +15168,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) {
       {
@@ -15021,20 +15176,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);
           }
@@ -15042,15 +15198,18 @@ 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) => __spreadProps(__spreadValues({}, 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;
@@ -15069,6 +15228,7 @@ function instance$1($$self, $$props, $$invalidate) {
       })());
     }
   };
+  $$invalidate(8, meta = readMeta());
   return [
     skipInactive,
     speed,
@@ -15091,6 +15251,7 @@ function instance$1($$self, $$props, $$invalidate) {
     autoPlay,
     tags,
     inactiveColor,
+    timeMapper,
     play,
     pause,
     goto,
@@ -15121,14 +15282,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]
@@ -15138,25 +15300,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) {
@@ -15165,7 +15327,7 @@ function create_if_block(ctx) {
   let controller_1_props = {
     replayer: (
       /*replayer*/
-      ctx[7]
+      ctx[8]
     ),
     showController: (
       /*showController*/
@@ -15190,14 +15352,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() {
@@ -15210,9 +15376,9 @@ function create_if_block(ctx) {
     p(ctx2, dirty) {
       const controller_1_changes = {};
       if (dirty[0] & /*replayer*/
-      128)
+      256)
         controller_1_changes.replayer = /*replayer*/
-        ctx2[7];
+        ctx2[8];
       if (dirty[0] & /*showController*/
       8)
         controller_1_changes.showController = /*showController*/
@@ -15237,6 +15403,10 @@ function create_if_block(ctx) {
       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) {
@@ -15250,7 +15420,7 @@ function create_if_block(ctx) {
       current = false;
     },
     d(detaching) {
-      ctx[32](null);
+      ctx[34](null);
       destroy_component(controller_1, detaching);
     }
   };
@@ -15262,7 +15432,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() {
@@ -15276,44 +15446,44 @@ 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 {
@@ -15330,12 +15500,12 @@ function create_fragment(ctx) {
         check_outros();
       }
       if (!current || dirty[0] & /*playerStyle*/
-      4096) {
+      8192) {
         attr(
           div1,
           "style",
           /*playerStyle*/
-          ctx2[12]
+          ctx2[13]
         );
       }
     },
@@ -15353,10 +15523,10 @@ 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);
     }
   };
 }
@@ -15373,6 +15543,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;
@@ -15412,10 +15585,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();
@@ -15458,8 +15637,8 @@ function instance($$self, $$props, $$invalidate) {
         }
         `);
     }
-    $$invalidate(7, replayer = new Replayer(
-      events,
+    $$invalidate(8, replayer = new Replayer(
+      normalizedEvents,
       __spreadValues({
         speed,
         root: frame,
@@ -15475,8 +15654,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
@@ -15485,8 +15664,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
@@ -15500,32 +15679,32 @@ 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)));
+    $$invalidate(43, $$props = assign(assign({}, $$props), exclude_internal_props($$new_props)));
     if ("width" in $$new_props)
-      $$invalidate(13, width = $$new_props.width);
+      $$invalidate(14, width = $$new_props.width);
     if ("height" in $$new_props)
-      $$invalidate(14, height = $$new_props.height);
+      $$invalidate(15, height = $$new_props.height);
     if ("maxScale" in $$new_props)
-      $$invalidate(15, maxScale = $$new_props.maxScale);
+      $$invalidate(16, maxScale = $$new_props.maxScale);
     if ("events" in $$new_props)
-      $$invalidate(16, events = $$new_props.events);
+      $$invalidate(17, events = $$new_props.events);
     if ("skipInactive" in $$new_props)
       $$invalidate(0, skipInactive = $$new_props.skipInactive);
     if ("autoPlay" in $$new_props)
@@ -15533,25 +15712,35 @@ function instance($$self, $$props, $$invalidate) {
     if ("speedOption" in $$new_props)
       $$invalidate(2, speedOption = $$new_props.speedOption);
     if ("speed" in $$new_props)
-      $$invalidate(17, speed = $$new_props.speed);
+      $$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`
       }));
@@ -15566,6 +15755,7 @@ function instance($$self, $$props, $$invalidate) {
     tags,
     inactiveColor,
     toggleFullscreen,
+    timeMapper,
     replayer,
     player,
     frame,
@@ -15577,6 +15767,7 @@ function instance($$self, $$props, $$invalidate) {
     maxScale,
     events,
     speed,
+    allowTimelineNormalization,
     getMirror,
     triggerResize,
     addEventListener,
@@ -15606,77 +15797,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 {