diff --git a/packages/all/package.json b/packages/all/package.json index 42e83bcb68..a3bc379345 100644 --- a/packages/all/package.json +++ b/packages/all/package.json @@ -51,7 +51,7 @@ "devDependencies": { "puppeteer": "^24.0.0", "typescript": "^4.7.3", - "vite": "^6.4.1", + "vite": "^6.4.2", "vite-plugin-dts": "^4.5.4", "vitest": "^2.1.9" }, diff --git a/packages/packer/package.json b/packages/packer/package.json index 9b5c09257b..4afb39886d 100644 --- a/packages/packer/package.json +++ b/packages/packer/package.json @@ -73,7 +73,7 @@ ], "devDependencies": { "typescript": "^4.7.3", - "vite": "^6.4.1", + "vite": "^6.4.2", "vite-plugin-dts": "^4.5.4", "vitest": "^2.1.9" }, diff --git a/packages/record/package.json b/packages/record/package.json index 399b90dcfb..fca2d84aa6 100644 --- a/packages/record/package.json +++ b/packages/record/package.json @@ -50,7 +50,7 @@ "devDependencies": { "puppeteer": "^24.0.0", "typescript": "^4.7.3", - "vite": "^6.4.1", + "vite": "^6.4.2", "vite-plugin-dts": "^4.5.4", "vitest": "^2.1.9" }, diff --git a/packages/replay/package.json b/packages/replay/package.json index d1cce3f5aa..c3dc0fa8f9 100644 --- a/packages/replay/package.json +++ b/packages/replay/package.json @@ -51,7 +51,7 @@ "devDependencies": { "puppeteer": "^24.0.0", "typescript": "^4.7.3", - "vite": "^6.4.1", + "vite": "^6.4.2", "vite-plugin-dts": "^4.5.4", "vitest": "^2.1.9" }, diff --git a/packages/rrdom-nodejs/package.json b/packages/rrdom-nodejs/package.json index b9e2703bfb..3a9baa731c 100644 --- a/packages/rrdom-nodejs/package.json +++ b/packages/rrdom-nodejs/package.json @@ -46,7 +46,7 @@ "eslint": "^8.15.0", "puppeteer": "^24.0.0", "typescript": "^4.7.3", - "vite": "^6.4.1", + "vite": "^6.4.2", "vite-plugin-dts": "^4.5.4", "vitest": "^2.1.9" }, diff --git a/packages/rrdom/package.json b/packages/rrdom/package.json index 8a462dbbd2..cfab2c1e82 100644 --- a/packages/rrdom/package.json +++ b/packages/rrdom/package.json @@ -48,7 +48,7 @@ "eslint": "^8.15.0", "puppeteer": "^24.0.0", "typescript": "^4.9.0", - "vite": "^6.4.1", + "vite": "^6.4.2", "vite-plugin-dts": "^4.5.4" }, "dependencies": { diff --git a/packages/rrweb-player/package.json b/packages/rrweb-player/package.json index 7cf1025114..9fa76122b4 100644 --- a/packages/rrweb-player/package.json +++ b/packages/rrweb-player/package.json @@ -3,20 +3,17 @@ "version": "2.41.0", "devDependencies": { "@sentry-internal/rrweb-types": "2.41.0", - "@sveltejs/adapter-auto": "^3.0.0", - "@sveltejs/kit": "^2.0.0", "@sveltejs/package": "^2.0.0", - "@sveltejs/vite-plugin-svelte": "^3.0.0", + "@sveltejs/vite-plugin-svelte": "^6.0.0", "@typescript-eslint/eslint-plugin": "^7.0.0", "@typescript-eslint/parser": "^7.0.0", "eslint-plugin-svelte": "^2.37.0", "prettier-plugin-svelte": "^3.1.2", - "svelte": "^4.2.14", - "svelte-check": "^3.4.3", - "svelte-preprocess": "^5.0.3", + "svelte": "^5.0.0", + "svelte-check": "^4.0.0", "svelte2tsx": "^0.7.6", "tslib": "^2.0.0", - "vite": "^5.2.8" + "vite": "^6.4.2" }, "dependencies": { "@sentry-internal/rrweb": "2.41.0", diff --git a/packages/rrweb-player/src/Controller.svelte b/packages/rrweb-player/src/Controller.svelte index 4c4b3680c9..16f8a49c90 100644 --- a/packages/rrweb-player/src/Controller.svelte +++ b/packages/rrweb-player/src/Controller.svelte @@ -9,34 +9,49 @@ import { onMount, onDestroy, - createEventDispatcher, - afterUpdate, } from 'svelte'; import { formatTime, getInactivePeriods } from './utils'; import Switch from './components/Switch.svelte'; - const dispatch = createEventDispatcher(); - - export let replayer: Replayer; - export let showController: boolean; - export let autoPlay: boolean; - export let skipInactive: boolean; - export let speedOption: number[]; - export let speed = speedOption.length ? speedOption[0] : 1; - export let tags: Record = {}; - export let inactiveColor: string; - - let currentTime = 0; - $: { - dispatch('ui-update-current-time', { payload: currentTime }); - } + let { + replayer, + showController, + autoPlay, + skipInactive = $bindable(), + speedOption, + speed = $bindable(speedOption.length ? speedOption[0] : 1), + tags = {}, + inactiveColor, + onfullscreen, + onuiupdatecurrenttime, + onuiupdateprogress, + onuiupdateplayerstate, + }: { + replayer: Replayer; + showController: boolean; + autoPlay: boolean; + skipInactive: boolean; + speedOption: number[]; + speed?: number; + tags?: Record; + inactiveColor: string; + onfullscreen?: () => void; + onuiupdatecurrenttime?: (payload: { payload: number }) => void; + onuiupdateprogress?: (payload: { payload: number }) => void; + onuiupdateplayerstate?: (payload: { payload: string }) => void; + } = $props(); + + let currentTime = $state(0); + $effect(() => { + onuiupdatecurrenttime?.({ payload: currentTime }); + }); let timer: number | null = null; - let playerState: 'playing' | 'paused' | 'live'; - $: { - dispatch('ui-update-player-state', { payload: playerState }); - } - let speedState: 'normal' | 'skipping'; - let progress: HTMLElement; + let playerState = $state<'playing' | 'paused' | 'live'>('paused'); + $effect(() => { + onuiupdateplayerstate?.({ payload: playerState }); + }); + let speedState = $state<'normal' | 'skipping'>('normal'); + let progress = $state() as HTMLElement; let finished: boolean; let pauseAt: number | false = false; @@ -46,14 +61,13 @@ end: number; } | null = null; - let meta: playerMetaData; - $: meta = replayer.getMetaData(); - let percentage: string; - $: { - const percent = Math.min(1, currentTime / meta.totalTime); - percentage = `${100 * percent}%`; - dispatch('ui-update-progress', { payload: percent }); - } + let meta = $state(replayer.getMetaData()); + let progressPercent = $derived(Math.min(1, currentTime / meta.totalTime)); + let percentage = $derived(`${100 * progressPercent}%`); + $effect(() => { + onuiupdateprogress?.({ payload: progressPercent }); + }); + type CustomEvent = { name: string; background: string; @@ -74,8 +88,7 @@ return eventPosition.toFixed(2); } - let customEvents: CustomEvent[]; - $: customEvents = (() => { + let customEvents: CustomEvent[] = $derived.by(() => { const { context } = replayer.service.state; const totalEvents = context.events.length; const start = context.events[0].timestamp; @@ -99,15 +112,14 @@ }); return customEvents; - })(); + }); let inactivePeriods: { name: string; background: string; position: string; width: string; - }[]; - $: inactivePeriods = (() => { + }[] = $derived.by(() => { try { const { context } = replayer.service.state; const totalEvents = context.events.length; @@ -136,7 +148,7 @@ // For safety concern, if there is any error, the main function won't be affected. return []; } - })(); + }); const loopTimer = () => { stopTimer(); @@ -253,7 +265,7 @@ goto(timeOffset); }; - const handleProgressKeydown = (event: KeyboardEvent) => { + const handleProgressKeydown = (event: KeyboardEvent) => { if (speedState === 'skipping') { return; } @@ -287,14 +299,14 @@ }; onMount(() => { - playerState = replayer.service.state.value; - speedState = replayer.speedService.state.value; + playerState = replayer.service.state.value as typeof playerState; + speedState = replayer.speedService.state.value as typeof speedState; replayer.on( 'state-change', (states) => { const { player, speed } = states as { player?: PlayerMachineState; speed?: SpeedMachineState }; if (player?.value && playerState !== player.value) { - playerState = player.value; + playerState = player.value as typeof playerState; switch (playerState) { case 'playing': loopTimer(); @@ -307,7 +319,7 @@ } } if (speed?.value && speedState !== speed.value) { - speedState = speed.value; + speedState = speed.value as typeof speedState; } }, ); @@ -324,7 +336,7 @@ } }); - afterUpdate(() => { + $effect(() => { if (skipInactive !== replayer.config.skipInactive) { replayer.setConfig({ skipInactive }); } @@ -437,19 +449,24 @@ class="rr-progress" class:disabled={speedState === 'skipping'} bind:this={progress} - on:click={handleProgressClick} - on:keydown={handleProgressKeydown} + onclick={handleProgressClick} + onkeydown={handleProgressKeydown} + role="slider" + tabindex="0" + aria-valuenow={currentTime} + aria-valuemin={0} + aria-valuemax={meta.totalTime} >
+ >
{#each inactivePeriods as period}
+ >
{/each} {#each customEvents as event}
+ >
{/each} -
+
{formatTime(meta.totalTime)}
-