lab/cupido
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Picker: lock video box to fixed aspect ratio so the layout doesn't jump

Browse source 
The <video> element was auto-sizing to its content, which means while a
new video is loading it shrinks to spinner size and pushes everything
below it (annotation bar, buttons) up by ~700 px. Switching to
aspect-ratio: 1920/1088 (the source resolution) keeps the box at full
size throughout, so the buttons stay where the analyst's mouse expects
them between videos.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Giorgio Gilestro 2026-05-01 14:48:15 +01:00
parent 16035bce36
commit 2607fa4a85
1 changed files with 6 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

8
scripts/barrier_picker_app/static/index.html
View file

@ -22,8 +22,12 @@
#meta .role-training { color: #cd6 !important; } #meta .role-training { color: #cd6 !important; }
#meta .role-testing { color: #6cd !important; } #meta .role-testing { color: #6cd !important; }
main { display: flex; flex-direction: column; align-items: center; padding: 1rem; } main { display: flex; flex-direction: column; align-items: center; padding: 1rem; }
video { width: 100%; max-width: 1400px; height: auto; background: #000; /* Reason: lock the video box to the source aspect ratio (1920x1088 is
border-radius: 4px; } what the ethoscope cameras emit). Without this, the box collapses
to spinner size while a new video is loading and every other
component on the page jumps around. */
video { width: 100%; max-width: 1400px; aspect-ratio: 1920 / 1088;
background: #000; border-radius: 4px; }
#controls { margin-top: 1rem; display: flex; gap: 1rem; flex-wrap: wrap; #controls { margin-top: 1rem; display: flex; gap: 1rem; flex-wrap: wrap;
justify-content: center; } justify-content: center; }
button { padding: 0.7rem 1.4rem; font-size: 0.95rem; border: 1px solid #444; button { padding: 0.7rem 1.4rem; font-size: 0.95rem; border: 1px solid #444;