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; -
+
Video Late
Audio Late
+
+
0
+
+
+
{#each Array.from({ length: fps }, (_, i) => i) as i} +
+ {#if i % (fps / 10) === 0 && i !== 0 && i !== fps / 2} +
{(i - fps / 2) * (1000 / fps)}ms
+ {/if} +
{/each}
@@ -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%; + } } 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 @@ Audio - + AV Sync