feat: add a/v sync indicator scaffolding + PoC

Earthfile

@@ -7,11 +7,10 @@ avsync-video-frames:
     RUN npm install -g pnpm
     RUN groupadd -r pptruser && useradd -r -g pptruser -G audio,video pptruser && mkdir /home/pptruser && chown -R pptruser:pptruser /home/pptruser
     USER pptruser
-    COPY av-sync/package.json av-sync/pnpm-lock.yaml /av-sync
+    COPY av-sync /av-sync
     WORKDIR /av-sync
     CACHE /home/pptruser/.local/share/pnpm
     RUN pnpm install
-    COPY av-sync /av-sync
     ARG FPS=60
     ARG CYCLES=4
     ARG SIZE=1200
@@ -24,8 +23,8 @@ avsync-video:
     COPY +avsync-video-frames/frames /frames
     RUN find frames -type f | sort | xargs -I {} sh -c 'echo "file {}" >> /frames.txt'
     ARG FPS=60
-    RUN ffmpeg -r $FPS -f concat -i /frames.txt -c:v libvpx-vp9 -pix_fmt yuva420p -an avsync.webm
-    SAVE ARTIFACT avsync.webm
+    RUN ffmpeg -r $FPS -f concat -i /frames.txt -c:v libvpx-vp9 -lossless 1 -pix_fmt yuva420p -an avsync.webm
+    SAVE ARTIFACT avsync.mp4
 
 site:
     RUN npm install -g pnpm

av-sync/src/components/SectorIndicator.svelte

@@ -6,7 +6,6 @@
 	$: center = el?.clientWidth / 2;
 	$: radius = center;
 	let d = '';
-	let circleOpacity = 1;
 
 	$: {
 		const angle = ((frame / fps) * 360) % 360;
@@ -14,13 +13,10 @@
 		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" style="--circle-opacity: {circleOpacity}" bind:this={el}>
+<svg class="indicator" class:sync={frame % fps === 0} bind:this={el}>
 	<circle cx={center} cy={center} r={radius}></circle>
 	<path {d}></path>
 </svg>
@@ -32,9 +28,12 @@
 		transform: rotate(-90deg);
 	}
 
+	.indicator:not(.sync) circle {
+		display: none;
+	}
+
 	circle {
 		fill: var(--color-active);
-		opacity: var(--circle-opacity);
 	}
 
 	path {