wip av scale

av-sync/src/App.svelte

@@ -1,8 +1,12 @@
 <script lang="ts">
-	// time in seconds
+	import '@fontsource/b612';
+	import '@fontsource/b612/700.css';
+	import 'normalize.css/normalize.css';
+
 	import { onMount, tick } from 'svelte';
 	import SectorIndicator from './components/SectorIndicator.svelte';
 	import FlashIndicator from './components/FlashIndicator.svelte';
+	import Scale from './components/Scale.svelte';
 
 	export let frame = 0;
 	export let fps = 60;
@@ -50,6 +54,10 @@
 		</div>
 	</div>
 
+	<div class="scale">
+		<Scale {frame} {fps} />
+	</div>
+
 	{#if debug}
 		<div class="controls">
 			<input type="range" min="0" max={fps * 4} bind:value={frame} />
@@ -66,6 +74,13 @@
 		color: white;
 		--color-active: red;
 		--color-inactive: white;
+
+		display: flex;
+		flex-direction: column;
+		justify-content: space-evenly;
+		align-items: center;
+
+		font-family: 'B612', 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
 	}
 
 	.circular {
@@ -74,16 +89,16 @@
 	}
 
 	.cyclic {
-		position: absolute;
-		top: 25%;
-		left: 50%;
-		transform: translate(-50%, -50%);
 		width: 100vw;
 
 		display: flex;
 		justify-content: space-evenly;
 	}
 
+	.scale {
+		width: 80vw;
+	}
+
 	main.debug {
 		background: black;
 	}

av-sync/src/components/Scale.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+	export let frame: number;
+	export let fps: number;
+</script>
+
+<div class="scale">
+	<div class="labels">
+		<div>Video Late</div>
+		<div>Audio Late</div>
+	</div>
+	<div class="indicator"></div>
+	<div class="ticks">
+		{#each Array.from({ length: fps }, (_, i) => i) as i}
+			<div class="tick"></div>
+		{/each}
+	</div>
+	<div class="axis"></div>
+</div>
+
+<style>
+	.scale {
+		position: relative;
+	}
+
+	.labels {
+		position: absolute;
+		top: -3vw;
+		width: 100%;
+		display: flex;
+		font-size: 2vw;
+	}
+
+	.labels > div {
+		flex-grow: 1;
+		text-align: center;
+	}
+
+	.axis {
+		position: absolute;
+		top: 50%;
+		left: 0;
+		transform: translateY(-50%);
+
+		width: 100%;
+		background: white;
+		height: 2px;
+	}
+
+	.ticks {
+		display: flex;
+		justify-content: space-between;
+	}
+
+	.tick {
+		width: 2px;
+		height: 3vh;
+		background: white;
+	}
+</style>