Chore: Ignore generated files from .svelte-kit for prettier & make video tests more stable (#1500)

* Chore: Ignore generated files from .svelte-kit for prettier

* Create serious-eggs-greet.md

* Apply formatting changes

* Trigger CI

* Make video tests more stable

* Apply formatting changes

* Exclude ambient.d.ts from format as it isn't deterministic

.changeset/serious-eggs-greet.md

@@ -0,0 +1,2 @@
+---
+---

.github/workflows/style-check.yml

@@ -8,7 +8,7 @@ jobs:
     name: ESLint Check and Report Upload
 
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
         with:
           repository: ${{ github.event.pull_request.head.repo.full_name }}
           ref: ${{ github.head_ref }}
@@ -93,3 +93,4 @@ jobs:
         with:
           commit_message: Apply formatting changes
           branch: ${{ github.head_ref }}
+          file_pattern: ':!packages/rrweb-player/.svelte-kit/ambient.d.ts'

.prettierignore

@@ -105,3 +105,8 @@
 .changeset/witty-kids-talk.md
 .changeset/yellow-mails-cheat.md
 .changeset/young-timers-grow.md
+
+# files generated by svelte-kit
+packages/rrweb-player/.svelte-kit/generated/*
+packages/rrweb-player/.svelte-kit/ambient.d.ts
+packages/rrweb-player/.svelte-kit/non-ambient.d.ts

packages/rrweb-player/.svelte-kit/ambient.d.ts

@@ -1,5 +1,7 @@
+
 // this file is generated — do not edit it
 
+
 /// <reference types="@sveltejs/kit" />
 
 /**
@@ -248,7 +250,9 @@ declare module '$env/static/private' {
  * import { PUBLIC_BASE_URL } from '$env/static/public';
  * ```
  */
-declare module '$env/static/public' {}
+declare module '$env/static/public' {
+	
+}
 
 /**
  * This module provides access to runtime environment variables, as defined by the platform you're running on. For example if you're using [`adapter-node`](https://github.com/sveltejs/kit/tree/main/packages/adapter-node) (or running [`vite preview`](https://kit.svelte.dev/docs/cli)), this is equivalent to `process.env`. This module only includes variables that _do not_ begin with [`config.kit.env.publicPrefix`](https://kit.svelte.dev/docs/configuration#env) _and do_ start with [`config.kit.env.privatePrefix`](https://kit.svelte.dev/docs/configuration#env) (if configured).
@@ -481,7 +485,7 @@ declare module '$env/dynamic/private' {
 		npm_package_dependencies_import_meta_resolve: string;
 		[key: `PUBLIC_${string}`]: undefined;
 		[key: `${string}`]: string | undefined;
-  };
+	}
 }
 
 /**
@@ -499,5 +503,5 @@ declare module '$env/dynamic/private' {
 declare module '$env/dynamic/public' {
 	export const env: {
 		[key: `PUBLIC_${string}`]: string | undefined;
-  };
+	}
 }

packages/rrweb-player/.svelte-kit/non-ambient.d.ts

@@ -1,6 +1,8 @@
+
 // this file is generated — do not edit it
 
-declare module 'svelte/elements' {
+
+declare module "svelte/elements" {
 	export interface HTMLAttributes<T> {
 		'data-sveltekit-keepfocus'?: true | '' | 'off' | undefined | null;
 		'data-sveltekit-noscroll'?: true | '' | 'off' | undefined | null;
@@ -14,14 +16,7 @@ declare module 'svelte/elements' {
 			| 'off'
 			| undefined
 			| null;
-    'data-sveltekit-preload-data'?:
-      | true
-      | ''
-      | 'hover'
-      | 'tap'
-      | 'off'
-      | undefined
-      | null;
+		'data-sveltekit-preload-data'?: true | '' | 'hover' | 'tap' | 'off' | undefined | null;
 		'data-sveltekit-reload'?: true | '' | 'off' | undefined | null;
 		'data-sveltekit-replacestate'?: true | '' | 'off' | undefined | null;
 	}

packages/rrweb/test/replay/video.test.ts

@@ -12,10 +12,28 @@ import {
 } from '../utils';
 import { toMatchImageSnapshot } from 'jest-image-snapshot';
 import { vi } from 'vitest';
+import { Replayer } from '../../src/replay';
 import videoPlaybackEvents from '../events/video-playback';
 import videoPlaybackOnFullSnapshotEvents from '../events/video-playback-on-full-snapshot';
 expect.extend({ toMatchImageSnapshot });
 
+type IWindow = typeof globalThis & Window & { replayer: Replayer };
+
+async function waitForVideoTo(triggerEventType: string, page: puppeteer.Page) {
+  await waitForRAF(page);
+  await page.evaluate(
+    (triggerEventType) =>
+      new Promise((resolve) => {
+        document
+          .querySelector('iframe')
+          ?.contentDocument?.querySelector('video')
+          ?.addEventListener(triggerEventType, resolve);
+      }),
+    triggerEventType,
+  );
+  await waitForRAF(page);
+}
+
 describe('video', () => {
   vi.setConfig({ testTimeout: 100_000 });
   let code: ISuite['code'];
@@ -57,12 +75,11 @@ describe('video', () => {
       const { Replayer } = rrweb;
       window.replayer = new Replayer(events);
     `);
-    await waitForRAF(page);
-    await page.evaluate(`
-      window.replayer.pause(6500);
-    `);
-    await page.waitForNetworkIdle();
-    await waitForRAF(page);
+    const wait = waitForVideoTo('seeked', page);
+    // seek replayer to 6.5s
+    await page.evaluate('window.replayer.pause(6500)');
+    // wait till video is done seeking
+    await wait;
 
     const frameImage = await page!.screenshot();
     await waitForRAF(page);
@@ -77,11 +94,13 @@ describe('video', () => {
       let events = ${JSON.stringify(videoPlaybackOnFullSnapshotEvents)};
       const { Replayer } = rrweb;
       window.replayer = new Replayer(events);
-      window.replayer.pause(6500);
     `);
 
-    await page.waitForNetworkIdle();
-    await waitForRAF(page);
+    const wait = waitForVideoTo('seeked', page);
+    // seek replayer to 6.5s
+    await page.evaluate('window.replayer.pause(6500)');
+    // wait till video is done seeking
+    await wait;
 
     const frameImage = await page!.screenshot();
     await waitForRAF(page);
@@ -97,8 +116,10 @@ describe('video', () => {
       const { Replayer } = rrweb;
       window.replayer = new Replayer(events);
     `);
-    await page.waitForNetworkIdle();
-    await waitForRAF(page);
+    await waitForVideoTo('canplaythrough', page);
+
+    // loading indicator lingers quite often
+    await page.waitForTimeout(1000);
 
     const frameImage = await page!.screenshot();
 
@@ -118,10 +139,17 @@ describe('video', () => {
       });
     `);
     await waitForRAF(page);
-    await page.evaluate(`
-      window.replayer.play(6500);
-    `);
-    await page.waitForNetworkIdle();
+    await page.evaluate(
+      () =>
+        new Promise((resolve) => {
+          document
+            .querySelector('iframe')
+            ?.contentDocument?.querySelector('video')
+            ?.addEventListener('playing', resolve);
+          // play replayer at 6.5s
+          (window as IWindow).replayer.play(6500);
+        }),
+    );
     await waitForRAF(page);
 
     const frameImage = await page!.screenshot();
@@ -139,11 +167,10 @@ describe('video', () => {
     await page.evaluate(`
       const { Replayer } = rrweb;
       window.replayer = new Replayer(events);
-      window.replayer.play();
     `);
-    await waitForRAF(page);
-    await page.waitForNetworkIdle();
-    await waitForRAF(page);
+    const waitForPlaying = waitForVideoTo('playing', page);
+    await page.evaluate(`window.replayer.play()`);
+    await waitForPlaying;
 
     const isPlaying = await page.evaluate(`
       !document.querySelector('iframe').contentDocument.querySelector('video').paused && 
@@ -160,11 +187,11 @@ describe('video', () => {
     await page.evaluate(`
       const { Replayer } = rrweb;
       window.replayer = new Replayer(events);
-      window.replayer.play();
     `);
-    await waitForRAF(page);
-    await page.waitForNetworkIdle();
-    await waitForRAF(page);
+
+    const waitForPlaying = waitForVideoTo('playing', page);
+    await page.evaluate(`window.replayer.play()`);
+    await waitForPlaying;
 
     const isPlaying = await page.evaluate(`
       !document.querySelector('iframe').contentDocument.querySelector('video').paused && 
@@ -182,13 +209,10 @@ describe('video', () => {
       const { Replayer } = rrweb;
       window.replayer = new Replayer(events);
     `);
-    await waitForRAF(page);
-    await page.waitForNetworkIdle();
-    await waitForRAF(page);
-    await page.evaluate(`
-    window.replayer.pause(25000); // 5 seconds after the video started a new loop
-    `);
-    await waitForRAF(page);
+
+    const waitForSeek = waitForVideoTo('seeked', page);
+    await page.evaluate(`window.replayer.pause(25000);`); // 5 seconds after the video started a new loop
+    await waitForSeek;
 
     const time = await page.evaluate(`
       document.querySelector('iframe').contentDocument.querySelector('video').currentTime;
@@ -203,11 +227,11 @@ describe('video', () => {
     await page.evaluate(`
       const { Replayer } = rrweb;
       window.replayer = new Replayer(events);
-      window.replayer.pause(25000); // 5 seconds after the video started a new loop
     `);
-    await waitForRAF(page);
-    await page.waitForNetworkIdle();
-    await waitForRAF(page);
+
+    const waitForSeek = waitForVideoTo('seeked', page);
+    await page.evaluate(`window.replayer.pause(25000);`); // 5 seconds after the video started a new loop
+    await waitForSeek;
 
     const time = await page.evaluate(`
       document.querySelector('iframe').contentDocument.querySelector('video').currentTime;
@@ -227,11 +251,11 @@ describe('video', () => {
       window.replayer = new Replayer(events, {
         speed: 8,
       });
-      window.replayer.play();
     `);
-    await waitForRAF(page);
-    await page.waitForNetworkIdle();
-    await waitForRAF(page);
+
+    const waitForPlaying = waitForVideoTo('playing', page);
+    await page.evaluate(`window.replayer.play()`);
+    await waitForPlaying;
 
     const time = await page.evaluate(`
       document.querySelector('iframe').contentDocument.querySelector('video').playbackRate;