From db5c718b755408ee3c16274c1cacbc6c88b30335 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1=C5=A1=20Ml=C3=A1dek?= <t@mldk.cz>
Date: Sun, 18 Feb 2024 21:21:29 +0100
Subject: [PATCH] style: keep sync flash for sector indicator on screen for a
 few frames

---
 av-sync/src/components/SectorIndicator.svelte | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/av-sync/src/components/SectorIndicator.svelte b/av-sync/src/components/SectorIndicator.svelte
index fbe1d4d..684cf61 100644
--- a/av-sync/src/components/SectorIndicator.svelte
+++ b/av-sync/src/components/SectorIndicator.svelte
@@ -6,6 +6,7 @@
 	$: center = el?.clientWidth / 2;
 	$: radius = center;
 	let d = '';
+	let circleOpacity = 1;
 
 	$: {
 		const angle = ((frame / fps) * 360) % 360;
@@ -13,10 +14,13 @@
 		const x = center + radius * Math.cos(radians);
 		const y = center + radius * Math.sin(radians);
 		d = `M${center},${center} L${center + radius},${center} A${radius},${radius} 0 ${angle > 180 ? 1 : 0} 1 ${x},${y} Z`;
+
+		const flashFrames = fps / 10;
+		circleOpacity = (flashFrames - (frame % fps)) / flashFrames;
 	}
 </script>
 
-<svg class="indicator" class:sync={frame % fps === 0} bind:this={el}>
+<svg class="indicator" style="--circle-opacity: {circleOpacity}" bind:this={el}>
 	<circle cx={center} cy={center} r={radius}></circle>
 	<path {d}></path>
 </svg>
@@ -28,12 +32,9 @@
 		transform: rotate(-90deg);
 	}
 
-	.indicator:not(.sync) circle {
-		display: none;
-	}
-
 	circle {
 		fill: var(--color-active);
+		opacity: var(--circle-opacity);
 	}
 
 	path {