plum-e2e 2.8.5 → 2.9.0

package/frontend/src/lib/components/reports/LiveReplayer.svelte

@@ -0,0 +1,110 @@
+<!--
+ * This file is part of Plum.
+ * Licensed under the MIT License. See LICENSE file in the project root for details.
+ -->
+
+<script>
+	import { onMount, onDestroy } from 'svelte';
+	import Player from 'rrweb-player';
+	import 'rrweb-player/dist/style.css';
+
+	// A growing array — new events are appended by the caller as they stream
+	// in over the socket. liveMode lets rrweb-player start from zero events
+	// (it otherwise requires a complete Meta+FullSnapshot pair up front).
+	export let events = [];
+
+	const META_EVENT_TYPE = 4;
+
+	let stage;
+	let container;
+	let player = null;
+	let fedCount = 0;
+	let nativeWidth = 0;
+	let nativeHeight = 0;
+	let resizeObserver;
+
+	// rrweb-player renders at the recording's native resolution — scale-and-crop
+	// it to fill the stage (object-fit: cover) instead of letterboxing. Re-run on
+	// every stage resize, since the panel's own layout (tab strips appearing,
+	// window resize) can still shift its size after the player is built.
+	function updateScale() {
+		if (!nativeWidth || !nativeHeight) return;
+		const rect = stage.getBoundingClientRect();
+		const scale = Math.max(rect.width / nativeWidth, rect.height / nativeHeight);
+		container.style.transform = `scale(${scale})`;
+	}
+
+	// getMetaData() (called internally by rrweb-player's own controls on
+	// construction) reads events[0].timestamp unconditionally, so the initial
+	// batch must be passed in props rather than fed empty and via addEvent.
+	function buildPlayer() {
+		const rect = stage.getBoundingClientRect();
+		const meta = events[0]?.type === META_EVENT_TYPE ? events[0].data : null;
+		nativeWidth = meta?.width > 0 ? meta.width : rect.width;
+		nativeHeight = meta?.height > 0 ? meta.height : rect.height;
+
+		player = new Player({
+			target: container,
+			props: {
+				events,
+				liveMode: true,
+				autoPlay: false,
+				showController: false,
+				width: nativeWidth,
+				height: nativeHeight
+			}
+		});
+		fedCount = events.length;
+		player.getReplayer()?.startLive();
+		updateScale();
+	}
+
+	// Feed only what's newly arrived since the last run of this block —
+	// addEvent() is the incremental API, not a full-array replace.
+	$: if (player && events.length > fedCount) {
+		for (let i = fedCount; i < events.length; i++) player.addEvent(events[i]);
+		fedCount = events.length;
+	}
+
+	onMount(() => {
+		buildPlayer();
+		resizeObserver = new ResizeObserver(updateScale);
+		resizeObserver.observe(stage);
+	});
+	onDestroy(() => {
+		resizeObserver?.disconnect();
+		try {
+			player?.getReplayer()?.destroy();
+		} catch {
+			// already torn down
+		}
+	});
+</script>
+
+<div class="live-stage" bind:this={stage}>
+	<div class="live-mount" bind:this={container}></div>
+</div>
+
+<style>
+	.live-stage {
+		position: relative;
+		flex: 1;
+		min-width: 0;
+		min-height: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		background: var(--bg-subtle);
+		overflow: hidden;
+	}
+
+	.live-mount {
+		display: flex;
+	}
+
+	/* Sandboxed iframe (no allow-scripts/forms/top-navigation) — safe to always
+	   allow pointer interaction so a taller live page can still be scrolled. */
+	.live-mount :global(iframe) {
+		pointer-events: auto !important;
+	}
+</style>

package/frontend/src/lib/components/reports/MultiTabTimeline.svelte

@@ -0,0 +1,115 @@
+<!--
+ * This file is part of Plum.
+ * Licensed under the MIT License. See LICENSE file in the project root for details.
+ -->
+
+<script>
+	import { createEventDispatcher } from 'svelte';
+
+	// Replaces rrweb-player's own timeline for multi-tab recordings — rrweb's
+	// timeline belongs to whichever player is currently mounted and resets on
+	// every segment hand-off, so it can't track absolute position across tabs.
+	export let from = 0;
+	export let to = 0;
+	export let position = 0;
+	export let stepTimestamps = [];
+
+	const dispatch = createEventDispatcher();
+
+	function percentOf(ts) {
+		return to > from ? Math.min(100, Math.max(0, ((ts - from) / (to - from)) * 100)) : 0;
+	}
+
+	function fmtClock(ms) {
+		if (ms <= 0) return '00:00';
+		const totalSeconds = Math.floor(ms / 1000);
+		const minutes = Math.floor(totalSeconds / 60);
+		const seconds = totalSeconds % 60;
+		return `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
+	}
+
+	function handleClick(e) {
+		const rect = e.currentTarget.getBoundingClientRect();
+		const pct = Math.min(1, Math.max(0, (e.clientX - rect.left) / rect.width));
+		dispatch('seek', from + pct * (to - from));
+	}
+
+	$: percent = percentOf(position);
+	// Mirrors rrweb-player's own per-step tick marks (its `customEvents` rendering).
+	$: tickPercents = stepTimestamps.map(percentOf);
+</script>
+
+<div class="combined-timeline">
+	<span class="combined-timeline-time">{fmtClock(position - from)}</span>
+	<!-- svelte-ignore a11y-click-events-have-key-events -->
+	<!-- svelte-ignore a11y-no-static-element-interactions -->
+	<div class="combined-timeline-track" on:click={handleClick}>
+		<div class="combined-timeline-fill" style="width: {percent}%"></div>
+		{#each tickPercents as pct}
+			<div class="combined-timeline-tick" style="left: {pct}%"></div>
+		{/each}
+		<div class="combined-timeline-handle" style="left: {percent}%"></div>
+	</div>
+	<span class="combined-timeline-time">{fmtClock(to - from)}</span>
+</div>
+
+<style>
+	/* Matches rrweb-player's own .rr-timeline/.rr-progress/.rr-progress__step/
+	   .rr-progress__handler (dist/style.css) so this reads as the same control. */
+	.combined-timeline {
+		position: absolute;
+		left: 0;
+		right: 0;
+		bottom: 38px;
+		width: 80%;
+		margin: 0 auto;
+		display: flex;
+		align-items: center;
+	}
+
+	.combined-timeline-time {
+		flex-shrink: 0;
+		display: inline-block;
+		width: 100px;
+		text-align: center;
+		color: #11103e;
+	}
+
+	.combined-timeline-track {
+		position: relative;
+		flex: 1;
+		height: 12px;
+		background: #eee;
+		border-radius: 3px;
+		cursor: pointer;
+		box-sizing: border-box;
+		border-top: solid 4px #fff;
+		border-bottom: solid 4px #fff;
+	}
+	.combined-timeline-fill {
+		position: absolute;
+		left: 0;
+		top: 0;
+		height: 100%;
+		background: #e0e1fe;
+	}
+	.combined-timeline-tick {
+		position: absolute;
+		top: 2px;
+		width: 10px;
+		height: 5px;
+		transform: translate(-50%, -50%);
+		background: rgb(73, 80, 246);
+		pointer-events: none;
+	}
+	.combined-timeline-handle {
+		position: absolute;
+		top: 2px;
+		width: 20px;
+		height: 20px;
+		border-radius: 10px;
+		transform: translate(-50%, -50%);
+		background: rgb(73, 80, 246);
+		pointer-events: none;
+	}
+</style>