thm/test-card
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Compare commits

base: thm:db5c718b755408ee3c16274c1cacbc6c88b30335
Branches Tags
thm:main
thm:develop
..
compare: thm:d3ebe593d256db78f298e0b5b0de77bf2b48c1d7
Branches Tags
thm:main
thm:develop

1 commit
db5c718b75 ... d3ebe593d2

Author SHA1 Message Date
Tomáš Mládek
d3ebe593d2 feat: add a/v sync indicator scaffolding + PoC
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
Details
2024-02-18 18:32:58 +01:00
2 changed files with 8 additions and 10 deletions
Show stats Expand all files Collapse all files

7
Earthfile
View file

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

11
av-sync/src/components/SectorIndicator.svelte
View file

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