From dd4bd1d49780a22cf00829813445d88312b0b340 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1=C5=A1=20Ml=C3=A1dek?= <t@mldk.cz>
Date: Mon, 26 Feb 2024 12:25:25 +0100
Subject: [PATCH] feat: finish a/v sync scale, add a/v sync test

---
 av-sync/src/components/Scale.svelte | 66 ++++++++++++++++++++++++++---
 src/routes/+page.svelte             |  2 +-
 2 files changed, 61 insertions(+), 7 deletions(-)

diff --git a/av-sync/src/components/Scale.svelte b/av-sync/src/components/Scale.svelte
index 0c93dc6..0d86c5c 100644
--- a/av-sync/src/components/Scale.svelte
+++ b/av-sync/src/components/Scale.svelte
@@ -3,14 +3,24 @@
 	export let fps: number;
 </script>
 
-<div class="scale">
+<div class="scale" style="--frame: {frame}; --fps: {fps}">
 	<div class="labels">
 		<div>Video Late</div>
 		<div>Audio Late</div>
 	</div>
+	<div class="zero">
+		<div class="label">0</div>
+		<div class="mark"></div>
+	</div>
 	<div class="indicator"></div>
 	<div class="ticks">
+		<div class="tick"></div>
 		{#each Array.from({ length: fps }, (_, i) => i) as i}
+			<div class="spacer" class:active={i === (frame + fps / 2) % fps}>
+				{#if i % (fps / 10) === 0 && i !== 0 && i !== fps / 2}
+					<div class="label">{(i - fps / 2) * (1000 / fps)}ms</div>
+				{/if}
+			</div>
 			<div class="tick"></div>
 		{/each}
 	</div>
@@ -48,12 +58,56 @@
 
 	.ticks {
 		display: flex;
-		justify-content: space-between;
+		flex-wrap: wrap;
+		width: 100%;
+
+		& .spacer {
+			position: relative;
+			flex-grow: 1;
+
+			&.active {
+				background: var(--color-active);
+				z-index: 9;
+			}
+
+			& .label {
+				position: absolute;
+				top: calc(100% + 2em);
+				left: 50%;
+				transform: translateX(-50%) rotate(90deg);
+
+				line-height: 1;
+				font-size: 13px;
+			}
+		}
+
+		& .tick {
+			width: 2px;
+			height: 5vh;
+			background: white;
+		}
 	}
 
-	.tick {
-		width: 2px;
-		height: 3vh;
-		background: white;
+	.zero {
+		position: absolute;
+		top: calc(50% - 5vh * 2.5 / 2);
+		left: calc(50%);
+		width: calc(100% / var(--fps) - 1px);
+		font-size: 2vw;
+
+		& .label {
+			position: absolute;
+			top: -1.2em;
+			color: transparent;
+		}
+
+		& .mark {
+			width: 2px;
+			height: calc(5vh * 2.5);
+			background: white;
+			position: absolute;
+			top: 0;
+			left: 50%;
+		}
 	}
 </style>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 36174b9..368e925 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -14,7 +14,7 @@
 			<i class="ti ti-volume"></i>
 			Audio
 		</a>
-		<a href="av-sync" class="disabled">
+		<a href="av-sync">
 			<i class="ti ti-time-duration-off"></i>
 			AV&nbsp;Sync
 		</a>