Compare commits
2 commits
d3ebe593d2
...
db5c718b75
Author | SHA1 | Date | |
---|---|---|---|
db5c718b75 | |||
3ba077add1 |
2 changed files with 10 additions and 8 deletions
|
@ -7,10 +7,11 @@ avsync-video-frames:
|
|||
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
|
||||
COPY av-sync/package.json av-sync/pnpm-lock.yaml /av-sync
|
||||
WORKDIR /av-sync
|
||||
CACHE /home/pptruser/.local/share/pnpm
|
||||
RUN pnpm install
|
||||
COPY av-sync /av-sync
|
||||
ARG FPS=60
|
||||
ARG CYCLES=4
|
||||
ARG SIZE=1200
|
||||
|
@ -23,8 +24,8 @@ avsync-video:
|
|||
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
|
||||
RUN ffmpeg -r $FPS -f concat -i /frames.txt -c:v libvpx-vp9 -pix_fmt yuva420p -an avsync.webm
|
||||
SAVE ARTIFACT avsync.webm
|
||||
|
||||
site:
|
||||
RUN npm install -g pnpm
|
||||
|
|
|
@ -6,6 +6,7 @@
|
|||
$: center = el?.clientWidth / 2;
|
||||
$: radius = center;
|
||||
let d = '';
|
||||
let circleOpacity = 1;
|
||||
|
||||
$: {
|
||||
const angle = ((frame / fps) * 360) % 360;
|
||||
|
@ -13,10 +14,13 @@
|
|||
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`;
|
||||
|
||||
const flashFrames = fps / 10;
|
||||
circleOpacity = (flashFrames - (frame % fps)) / flashFrames;
|
||||
}
|
||||
</script>
|
||||
|
||||
<svg class="indicator" class:sync={frame % fps === 0} bind:this={el}>
|
||||
<svg class="indicator" style="--circle-opacity: {circleOpacity}" bind:this={el}>
|
||||
<circle cx={center} cy={center} r={radius}></circle>
|
||||
<path {d}></path>
|
||||
</svg>
|
||||
|
@ -28,12 +32,9 @@
|
|||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
.indicator:not(.sync) circle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
circle {
|
||||
fill: var(--color-active);
|
||||
opacity: var(--circle-opacity);
|
||||
}
|
||||
|
||||
path {
|
||||
|
|
Loading…
Reference in a new issue