Fix local rrweb playback flow and add demo page

packages/rrweb-player/src/Player.svelte

@@ -28,6 +28,15 @@
   export let inactiveColor: NonNullable<RRwebPlayerOptions['props']['inactiveColor']> = '#D4D4D4';
 
   let replayer: Replayer;
+  const pendingEventListeners: Array<{
+    event: string;
+    handler: (detail: unknown) => unknown;
+  }> = [];
+  const controllerEvents = new Set([
+    'ui-update-current-time',
+    'ui-update-progress',
+    'ui-update-player-state',
+  ]);
 
   export const getMirror = () => replayer.getMirror();
 
@@ -83,14 +92,13 @@
     event: string,
     handler: (detail: unknown) => unknown,
   ) => {
+    if (!replayer) {
+      pendingEventListeners.push({ event, handler });
+      return;
+    }
     replayer.on(event, handler);
-    switch (event) {
-      case 'ui-update-current-time':
-      case 'ui-update-progress':
-      case 'ui-update-player-state':
-        controller.$on(event, ({ detail }) => handler(detail));
-      default:
-        break;
+    if (controllerEvents.has(event) && controller) {
+      controller.$on(event, ({ detail }) => handler(detail));
     }
   };
 
@@ -130,6 +138,14 @@
   };
 
   onMount(() => {
+    const debugTarget = window as Window & {
+      __rrwebPlayerDebug?: Record<string, unknown>;
+    };
+    debugTarget.__rrwebPlayerDebug = {
+      stage: 'mounted',
+      hasFrame: !!frame,
+      eventsLength: events?.length,
+    };
     // runtime type check
     if (speedOption !== undefined && typeOf(speedOption) !== 'array') {
       throw new Error('speedOption must be array');
@@ -157,8 +173,23 @@
       unpackFn: unpack,
       ...$$props,
     });
+    debugTarget.__rrwebPlayerDebug = {
+      ...debugTarget.__rrwebPlayerDebug,
+      stage: 'replayer-created',
+      hasWrapper: !!replayer.wrapper,
+      hasIframe: !!replayer.iframe,
+    };
+
+    pendingEventListeners.splice(0).forEach(({ event, handler }) => {
+      replayer.on(event, handler);
+    });
 
     replayer.on('resize', (dimension) => {
+      debugTarget.__rrwebPlayerDebug = {
+        ...debugTarget.__rrwebPlayerDebug,
+        stage: 'resized',
+        dimension,
+      };
       updateScale(
         replayer.wrapper,
         dimension as { width: number; height: number },