Video player: cycle-through playback speed control (0.5/1/1.5/2)

Adds a single button next to mute that cycles through the four rates;
state lifted to the match page so it persists across rounds, player
swaps, and single/grid mode toggles. The browser resets playbackRate
to 1 on each MSE source swap, so both video-player and grid-tile
re-apply it on chunk change.

src/lib/components/grid-tile.svelte

@@ -14,6 +14,7 @@
 		isLeader: boolean;
 		isCurrent: boolean;
 		isMuted: boolean;
+		playbackRate?: number;
 		available: boolean;
 		duration: number;
 		player: number;
@@ -31,6 +32,7 @@
 		isLeader,
 		isCurrent,
 		isMuted,
+		playbackRate = 1,
 		available,
 		duration,
 		player,
@@ -98,6 +100,13 @@
 		if (videoEl) videoEl.muted = isMuted;
 	});
 
+	// Re-apply on src swap (chunks change) — browsers reset playbackRate on load.
+	$effect(() => {
+		if (!videoEl) return;
+		void videoSrc;
+		videoEl.playbackRate = playbackRate;
+	});
+
 	function onTimeUpdate() {
 		if (videoEl && isLeader) {
 			onLeaderTime?.(videoEl.currentTime);

src/lib/components/perspective-grid.svelte

@@ -13,6 +13,7 @@
 		virtualTime: number;
 		paused?: boolean;
 		muted?: boolean;
+		playbackRate?: number;
 		onPausedChange?: (paused: boolean) => void;
 		onSelect: (player: number) => void;
 		onTimeUpdate?: (t: number) => void;
@@ -28,6 +29,7 @@
 		virtualTime,
 		paused = false,
 		muted = false,
+		playbackRate = 1,
 		onSelect,
 		onTimeUpdate,
 		onLeaderEnded,
@@ -141,6 +143,7 @@
 								isLeader={player.player === currentPlayer}
 								isCurrent={player.player === currentPlayer}
 								isMuted={muted || player.player !== currentPlayer}
+								{playbackRate}
 								available={availablePlayers.has(player.player)}
 								duration={player.duration}
 								player={player.player}
@@ -180,6 +183,7 @@
 								isLeader={player.player === currentPlayer}
 								isCurrent={player.player === currentPlayer}
 								isMuted={muted || player.player !== currentPlayer}
+								{playbackRate}
 								available={availablePlayers.has(player.player)}
 								duration={player.duration}
 								player={player.player}

src/lib/components/timeline-bar.svelte

@@ -14,10 +14,12 @@
 		duration: number;
 		paused: boolean;
 		muted: boolean;
+		playbackRate?: number;
 		bufferedRanges?: BufferedRange[];
 		disabled?: boolean;
 		onTogglePlay: () => void;
 		onToggleMute: () => void;
+		onCyclePlaybackRate?: () => void;
 		onSeek: (t: number) => void;
 		onScrubStart?: () => void;
 		onScrubEnd?: () => void;
@@ -28,14 +30,20 @@
 		duration,
 		paused,
 		muted,
+		playbackRate = 1,
 		bufferedRanges = [],
 		disabled = false,
 		onTogglePlay,
 		onToggleMute,
+		onCyclePlaybackRate,
 		onSeek,
 		onScrubStart,
 		onScrubEnd
 	}: Props = $props();
+
+	const rateLabel = $derived(
+		Number.isInteger(playbackRate) ? `${playbackRate}×` : `${playbackRate.toFixed(1)}×`
+	);
 </script>
 
 <div
@@ -85,4 +93,18 @@
 			<SpeakerHighIcon weight="duotone" />
 		{/if}
 	</Button>
+
+	{#if onCyclePlaybackRate}
+		<Button
+			variant="ghost"
+			size="sm"
+			{disabled}
+			onclick={onCyclePlaybackRate}
+			aria-label={`Playback speed ${rateLabel} — click to change`}
+			title={`Playback speed (${rateLabel})`}
+			class="h-6 w-11 px-0 font-mono text-[11px] tabular-nums"
+		>
+			{rateLabel}
+		</Button>
+	{/if}
 </div>

src/lib/components/video-player/video-player.svelte

@@ -21,6 +21,7 @@
 		virtualTime?: number;
 		paused?: boolean;
 		muted?: boolean;
+		playbackRate?: number;
 		onPausedChange?: (paused: boolean) => void;
 		onChunkChange?: (index: number) => void;
 		onTimeUpdate?: (virtualTime: number) => void;
@@ -34,6 +35,7 @@
 		virtualTime,
 		paused = false,
 		muted = false,
+		playbackRate = 1,
 		onPausedChange,
 		onChunkChange,
 		onTimeUpdate,
@@ -215,6 +217,15 @@
 		if (videoEl) videoEl.muted = muted;
 	});
 
+	// Re-apply on every chunk swap — the browser resets playbackRate to 1
+	// when the underlying source changes.
+	$effect(() => {
+		if (!videoEl) return;
+		void isVideoData;
+		void videoSrc;
+		videoEl.playbackRate = playbackRate;
+	});
+
 	function onPlaying() {
 		isBuffering = false;
 		clearFreezeFrame();

src/lib/components/video-stage.svelte

@@ -18,6 +18,7 @@
 		virtualTime?: number;
 		paused?: boolean;
 		muted?: boolean;
+		playbackRate?: number;
 		outOfFrame?: boolean;
 		onPausedChange?: (paused: boolean) => void;
 		onTimeUpdate?: (t: number) => void;
@@ -32,6 +33,7 @@
 		virtualTime,
 		paused = false,
 		muted = false,
+		playbackRate = 1,
 		outOfFrame = false,
 		onPausedChange,
 		onTimeUpdate,
@@ -115,6 +117,7 @@
 				{virtualTime}
 				{paused}
 				{muted}
+				{playbackRate}
 				{onPausedChange}
 				{onTimeUpdate}
 				{onEnded}

src/routes/match/[matchId]/[mapName]/+page.svelte

@@ -57,6 +57,12 @@
 	// Lifted so player/mode/round changes don't reset the user's intent.
 	let masterPaused = $state(false);
 	let masterMuted = $state(false);
+	let masterPlaybackRate = $state(1);
+	const PLAYBACK_RATES = [0.5, 1, 1.5, 2] as const;
+	function cyclePlaybackRate() {
+		const i = PLAYBACK_RATES.indexOf(masterPlaybackRate as (typeof PLAYBACK_RATES)[number]);
+		masterPlaybackRate = PLAYBACK_RATES[(i + 1) % PLAYBACK_RATES.length];
+	}
 
 	// True once the active stage's clock-driving video has reached its own
 	// end. From there a wall-clock RAF advances `virtualTime` until the
@@ -495,6 +501,7 @@
 					{virtualTime}
 					paused={masterPaused}
 					muted={masterMuted}
+					playbackRate={masterPlaybackRate}
 					outOfFrame={activePlayerOutOfFrame && playerChunks.length > 0}
 					onPausedChange={(p) => (masterPaused = p)}
 					onTimeUpdate={handleTimeUpdate}
@@ -517,6 +524,7 @@
 					{virtualTime}
 					paused={masterPaused}
 					muted={masterMuted}
+					playbackRate={masterPlaybackRate}
 					onPausedChange={(p) => (masterPaused = p)}
 					onSelect={(p) => {
 						selectPlayer(p);
@@ -535,10 +543,12 @@
 					duration={roundDuration}
 					paused={masterPaused}
 					muted={masterMuted}
+					playbackRate={masterPlaybackRate}
 					{bufferedRanges}
 					disabled={previewsLoading || roundDuration <= 0}
 					onTogglePlay={togglePlay}
 					onToggleMute={() => (masterMuted = !masterMuted)}
+					onCyclePlaybackRate={cyclePlaybackRate}
 					onSeek={handleSeek}
 				/>
 			{/if}