feat: add a/v sync indicator scaffolding + PoC

.earthlyignore

@@ -0,0 +1 @@
+*/node_modules

Earthfile

@@ -1,6 +1,31 @@
 VERSION 0.7
 FROM node:lts
 
+avsync-video-frames:
+    # https://pptr.dev/troubleshooting
+    RUN apt-get update && apt-get -y install libgtk-3-dev libnotify-dev libgconf-2-4 libnss3 libxss1 libasound2 && rm -rf /var/lib/apt/lists/*
+    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 /av-sync
+    WORKDIR /av-sync
+    CACHE /home/pptruser/.local/share/pnpm
+    RUN pnpm install
+    ARG FPS=60
+    ARG CYCLES=4
+    ARG SIZE=1200
+    RUN pnpm serve-render --fps $FPS --cycles $CYCLES --size $SIZE --output frames
+    SAVE ARTIFACT frames
+
+avsync-video:
+    FROM debian:bookworm
+    RUN apt-get update && apt-get install -y ffmpeg && rm -rf /var/lib/apt/lists/*
+    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 -lossless 1 -pix_fmt yuva420p -an avsync.webm
+    SAVE ARTIFACT avsync.mp4
+
 site:
     RUN npm install -g pnpm
     COPY package.json pnpm-lock.yaml /site

av-sync/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

av-sync/README.md

@@ -0,0 +1,47 @@
+# Svelte + TS + Vite
+
+This template should help get you started developing with Svelte and TypeScript in Vite.
+
+## Recommended IDE Setup
+
+[VS Code](https://code.visualstudio.com/) + [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode).
+
+## Need an official Svelte framework?
+
+Check out [SvelteKit](https://github.com/sveltejs/kit#readme), which is also powered by Vite. Deploy anywhere with its serverless-first approach and adapt to various platforms, with out of the box support for TypeScript, SCSS, and Less, and easily-added support for mdsvex, GraphQL, PostCSS, Tailwind CSS, and more.
+
+## Technical considerations
+
+**Why use this over SvelteKit?**
+
+- It brings its own routing solution which might not be preferable for some users.
+- It is first and foremost a framework that just happens to use Vite under the hood, not a Vite app.
+
+This template contains as little as possible to get started with Vite + TypeScript + Svelte, while taking into account the developer experience with regards to HMR and intellisense. It demonstrates capabilities on par with the other `create-vite` templates and is a good starting point for beginners dipping their toes into a Vite + Svelte project.
+
+Should you later need the extended capabilities and extensibility provided by SvelteKit, the template has been structured similarly to SvelteKit so that it is easy to migrate.
+
+**Why `global.d.ts` instead of `compilerOptions.types` inside `jsconfig.json` or `tsconfig.json`?**
+
+Setting `compilerOptions.types` shuts out all other types not explicitly listed in the configuration. Using triple-slash references keeps the default TypeScript setting of accepting type information from the entire workspace, while also adding `svelte` and `vite/client` type information.
+
+**Why include `.vscode/extensions.json`?**
+
+Other templates indirectly recommend extensions via the README, but this file allows VS Code to prompt the user to install the recommended extension upon opening the project.
+
+**Why enable `allowJs` in the TS template?**
+
+While `allowJs: false` would indeed prevent the use of `.js` files in the project, it does not prevent the use of JavaScript syntax in `.svelte` files. In addition, it would force `checkJs: false`, bringing the worst of both worlds: not being able to guarantee the entire codebase is TypeScript, and also having worse typechecking for the existing JavaScript. In addition, there are valid use cases in which a mixed codebase may be relevant.
+
+**Why is HMR not preserving my local component state?**
+
+HMR state preservation comes with a number of gotchas! It has been disabled by default in both `svelte-hmr` and `@sveltejs/vite-plugin-svelte` due to its often surprising behavior. You can read the details [here](https://github.com/rixo/svelte-hmr#svelte-hmr).
+
+If you have state that's important to retain within a component, consider creating an external store which would not be replaced by HMR.
+
+```ts
+// store.ts
+// An extremely simple external store
+import { writable } from 'svelte/store'
+export default writable(0)
+```

av-sync/index.html

@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>AV SYNC</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

av-sync/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "av-sync",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "check": "svelte-check --tsconfig ./tsconfig.json",
+    "render": "node render.js",
+    "serve-render": "concurrently -P -k -s command-1 \"pnpm run dev --port 8626\" \"wait-on http://localhost:8626 && pnpm run render --url http://localhost:8626 {@}\" --"
+  },
+  "dependencies": {
+    "@sveltejs/vite-plugin-svelte": "^3.0.2",
+    "@tsconfig/svelte": "^5.0.2",
+    "commander": "^12.0.0",
+    "concurrently": "^8.2.2",
+    "puppeteer": "^22.1.0",
+    "svelte": "^4.2.10",
+    "svelte-check": "^3.6.3",
+    "tslib": "^2.6.2",
+    "typescript": "^5.2.2",
+    "vite": "^5.1.0",
+    "wait-on": "^7.2.0"
+  }
+}

av-sync/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

av-sync/render.js

@@ -0,0 +1,48 @@
+import { Command } from 'commander';
+import puppeteer from 'puppeteer';
+import fs from 'fs';
+
+const program = new Command();
+program
+	.requiredOption('-o, --output <output>', 'Output directory')
+	.requiredOption('--fps <fps>', 'Frames per second')
+	.requiredOption('--cycles <cycles>', 'Number of cycles')
+	.requiredOption('--size <size>', 'Size of the output in pixels')
+	.requiredOption('--url <url>', 'URL to render')
+	.parse(process.argv);
+const options = program.opts();
+
+// mkdir p output path
+if (!fs.existsSync(options.output)) {
+	fs.mkdirSync(options.output, { recursive: true });
+}
+
+const browser = await puppeteer.launch({
+	args: ['--no-sandbox']
+});
+const page = await browser.newPage();
+
+await page.setViewport({ width: parseInt(options.size, 10), height: parseInt(options.size, 10) });
+await page.goto(options.url);
+
+await page.evaluate(async (fps) => {
+	// @ts-ignore
+	await window.setFps(fps);
+}, options.fps);
+
+const totalFrames = parseInt(options.fps) * parseInt(options.cycles);
+for (let frame = 0; frame < totalFrames; frame++) {
+	let start = Date.now();
+	await page.evaluate(async (n) => {
+		// @ts-ignore
+		await window.setFrame(n);
+	}, frame);
+	const path = `${options.output}/${frame.toString().padStart(Math.log10(totalFrames) + 1, '0')}.png`;
+	await page.screenshot({ path, omitBackground: true });
+	let end = Date.now();
+	console.log(`Captured frame ${frame}/${totalFrames} (took ${end - start}ms)`);
+}
+
+console.log('Done.');
+
+await browser.close();

av-sync/src/App.svelte

@@ -0,0 +1,104 @@
+<script lang="ts">
+	// time in seconds
+	import { onMount, tick } from 'svelte';
+	import SectorIndicator from './components/SectorIndicator.svelte';
+	import FlashIndicator from './components/FlashIndicator.svelte';
+
+	export let frame = 0;
+	export let fps = 60;
+	export let debug = false;
+
+	onMount(() => {
+		window.setFps = async (newFps: number) => {
+			fps = newFps;
+			await tick();
+		};
+
+		window.setFrame = async (frameNumber: number) => {
+			frame = frameNumber;
+			await tick();
+		};
+
+		if (window.location.search.includes('debug')) {
+			debug = true;
+		}
+
+		if (window.location.search.includes('play')) {
+			setInterval(() => {
+				frame++;
+				frame %= fps * 4;
+			}, 1000 / fps);
+		}
+
+		if (window.location.search.includes('frame')) {
+			const frameNumber = parseInt(window.location.search.split('frame=')[1]);
+			if (!isNaN(frameNumber)) {
+				frame = frameNumber;
+			}
+		}
+	});
+</script>
+
+<main class:debug>
+	<div class="cyclic">
+		<div class="circular sector">
+			<SectorIndicator {frame} {fps} />
+		</div>
+
+		<div class="circular flash">
+			<FlashIndicator {frame} {fps} />
+		</div>
+	</div>
+
+	{#if debug}
+		<div class="controls">
+			<input type="range" min="0" max={fps * 4} bind:value={frame} />
+			<div class="label">{frame} ({frame % fps}) / {Math.round((frame / fps) * 100) / 100} s)</div>
+		</div>
+	{/if}
+</main>
+
+<style>
+	main {
+		width: 100vw;
+		height: 100vh;
+
+		color: white;
+		--color-active: red;
+		--color-inactive: white;
+	}
+
+	.circular {
+		width: 25vw;
+		height: 25vw;
+	}
+
+	.cyclic {
+		position: absolute;
+		top: 25%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		width: 100vw;
+
+		display: flex;
+		justify-content: space-evenly;
+	}
+
+	main.debug {
+		background: black;
+	}
+
+	.controls {
+		position: fixed;
+		bottom: 0;
+		left: 50%;
+		transform: translateX(-50%);
+		width: 80vw;
+
+		text-align: center;
+
+		& input {
+			width: 100%;
+		}
+	}
+</style>

av-sync/src/app.css

@@ -0,0 +1,3 @@
+html, body {
+  margin: 0;
+}

av-sync/src/components/FlashIndicator.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	export let frame: number;
+	export let fps: number;
+
+	let el: SVGSVGElement;
+	$: center = el?.clientWidth / 2;
+	$: radius = center;
+
+	let opacity = 1;
+	$: opacity = ease(1 - ((frame % fps) / fps) * 2);
+
+	function ease(x: number) {
+		x = Math.max(0, Math.min(1, x));
+		return 1 - Math.cos((x * Math.PI) / 2);
+	}
+</script>
+
+<svg class="indicator" bind:this={el} style="--opacity: {opacity}">
+	<circle cx={center} cy={center} r={radius}></circle>
+</svg>
+
+<style>
+	.indicator {
+		width: 100%;
+		height: 100%;
+		transform: rotate(-90deg);
+	}
+
+	circle {
+		fill: var(--color-active);
+		opacity: var(--opacity);
+	}
+</style>

av-sync/src/components/SectorIndicator.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+	export let frame: number;
+	export let fps: number;
+
+	let el: SVGSVGElement;
+	$: center = el?.clientWidth / 2;
+	$: radius = center;
+	let d = '';
+
+	$: {
+		const angle = ((frame / fps) * 360) % 360;
+		const radians = (angle * Math.PI) / 180;
+		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`;
+	}
+</script>
+
+<svg class="indicator" class:sync={frame % fps === 0} bind:this={el}>
+	<circle cx={center} cy={center} r={radius}></circle>
+	<path {d}></path>
+</svg>
+
+<style>
+	.indicator {
+		width: 100%;
+		height: 100%;
+		transform: rotate(-90deg);
+	}
+
+	.indicator:not(.sync) circle {
+		display: none;
+	}
+
+	circle {
+		fill: var(--color-active);
+	}
+
+	path {
+		fill: var(--color-inactive);
+	}
+</style>

av-sync/src/main.ts

@@ -0,0 +1,8 @@
+import './app.css';
+import App from './App.svelte';
+
+const app = new App({
+	target: document.getElementById('app')!
+});
+
+export default app;

av-sync/src/vite-env.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="svelte" />
+/// <reference types="vite/client" />
+
+declare global {
+	interface Window {
+		setFps: (fps: number) => Promise<void>;
+		setFrame: (frame: number) => Promise<void>;
+	}
+}
+
+export {};

av-sync/svelte.config.js

@@ -0,0 +1,7 @@
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
+
+export default {
+  // Consult https://svelte.dev/docs#compile-time-svelte-preprocess
+  // for more information about preprocessors
+  preprocess: vitePreprocess(),
+}

av-sync/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "extends": "@tsconfig/svelte/tsconfig.json",
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "resolveJsonModule": true,
+    /**
+     * Typecheck JS in `.svelte` and `.js` files by default.
+     * Disable checkJs if you'd like to use dynamic types in JS.
+     * Note that setting allowJs false does not prevent the use
+     * of JS in `.svelte` files.
+     */
+    "allowJs": true,
+    "checkJs": true,
+    "isolatedModules": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.js", "src/**/*.svelte"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

av-sync/tsconfig.node.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "strict": true
+  },
+  "include": ["vite.config.ts"]
+}

av-sync/vite.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import { svelte } from '@sveltejs/vite-plugin-svelte'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [svelte()],
+})

src/lib/BackgroundGrid.svelte

@@ -16,6 +16,8 @@
 	let verticalMargin = MARGIN_SIZE;
 	let unloaded = true;
 
+	let transparent = false;
+
 	function updateCounts() {
 		const gridWidth = window.innerWidth - MARGIN_SIZE;
 		const gridHeight = window.innerHeight - MARGIN_SIZE;
@@ -69,11 +71,11 @@
 <div
 	class="background"
 	class:unloaded
+	class:transparent
 	class:even-vertical={verticalCount % 2 === 0}
 	style="--horizontal-count: {horizontalCount};
 					 --vertical-count: {verticalCount};
 					 --block-size: {blockSize}px;
-					 --corner-blocks: {cornerBlocks};
 					 --horizontal-margin: {horizontalMargin}px;
 					 --vertical-margin: {verticalMargin}px;"
 >
@@ -86,15 +88,21 @@
 	<div class="edges">
 		{#each ['top', 'bottom'] as edge}
 			<div class="edge {edge}">
-				{#each [...Array(horizontalCount - cornerBlocks * 2).keys()] as _}
-					<div class="block"></div>
+				{#each [...Array(horizontalCount).keys()] as n}
+					<div
+						class="block"
+						class:corner-block={n < cornerBlocks || n >= horizontalCount - cornerBlocks}
+					></div>
 				{/each}
 			</div>
 		{/each}
 		{#each ['left', 'right'] as edge}
 			<div class="edge {edge}">
-				{#each [...Array(verticalCount - cornerBlocks * 2).keys()] as _}
-					<div class="block"></div>
+				{#each [...Array(verticalCount).keys()] as n}
+					<div
+						class="block"
+						class:corner-block={n < cornerBlocks || n >= verticalCount - cornerBlocks}
+					></div>
 				{/each}
 			</div>
 		{/each}
@@ -121,8 +129,6 @@
 		pointer-events: none;
 
 		--corner-color: white;
-		--corner-height: calc(var(--vertical-margin) + var(--corner-blocks) * var(--block-size));
-		--corner-width: calc(var(--horizontal-margin) + var(--corner-blocks) * var(--block-size));
 	}
 
 	.corner {
@@ -131,19 +137,19 @@
 		position: absolute;
 		&.top {
 			top: 0;
-			height: var(--corner-height);
+			height: var(--vertical-margin);
 		}
 		&.bottom {
 			bottom: 0;
-			height: var(--corner-height);
+			height: var(--vertical-margin);
 		}
 		&.left {
 			left: 0;
-			width: var(--corner-width);
+			width: var(--horizontal-margin);
 		}
 		&.right {
 			right: 0;
-			width: var(--corner-width);
+			width: var(--horizontal-margin);
 		}
 	}
 
@@ -163,9 +169,14 @@
 
 		& .top,
 		& .bottom {
-			width: calc(100vw - var(--corner-width) * 2);
+			width: calc(100vw - var(--horizontal-margin) * 2);
 			height: calc(var(--margin-size) * 2);
-			left: var(--corner-width);
+			left: var(--horizontal-margin);
+
+			& .block {
+				width: var(--block-size);
+				height: var(--vertical-margin);
+			}
 		}
 
 		& .left {
@@ -179,27 +190,79 @@
 		& .left,
 		& .right {
 			flex-direction: column;
-			height: calc(100vh - var(--corner-height) * 2);
+			height: calc(100vh - var(--vertical-margin) * 2);
 			width: calc(var(--margin-size) * 2);
-			top: var(--corner-height);
+			top: var(--vertical-margin);
+
+			& .block {
+				width: var(--horizontal-margin);
+				height: var(--block-size);
+			}
 		}
 
 		& .block {
 			display: inline-block;
-			height: var(--block-size);
-			width: var(--block-size);
 
-			background: white;
+			background: black;
 			&:nth-child(odd) {
-				background: black;
+				background: white;
+			}
+
+			&.corner-block {
+				background: white;
 			}
 		}
 	}
 
-	.background.even-vertical .edges .right .block {
-		background: black;
+	.block,
+	.corner {
+		transition: background 1s;
+	}
+
+	.background.even-vertical .edges .right .block:not(.corner-block) {
+		background: white;
 		&:nth-child(odd) {
-			background: white;
+			background: black;
+		}
+	}
+
+	.background.transparent {
+		& .block {
+			background: transparent !important;
+		}
+
+		& .edge {
+			&.top .block {
+				border-right: 1px solid gray;
+				&:first-child {
+					border-left: 1px solid gray;
+				}
+			}
+
+			&.bottom .block {
+				border-right: 1px solid gray;
+				&:first-child {
+					border-left: 1px solid gray;
+				}
+			}
+
+			&.left .block {
+				border-bottom: 1px solid gray;
+				&:first-child {
+					border-top: 1px solid gray;
+				}
+			}
+
+			&.right .block {
+				border-bottom: 1px solid gray;
+				&:first-child {
+					border-top: 1px solid gray;
+				}
+			}
+		}
+
+		& .corner {
+			background: transparent !important;
 		}
 	}