screentinker/frontend/js/views
ScreenTinker 2068bc8833 Video walls: free-form canvas editor, leader-driven sync, group dissolve, progress bars
Wall editor: replaces the small grid with a Figma-style pan/zoom canvas. Each
display is a rectangle that can be dragged/resized to match its physical
arrangement; a separate semi-transparent player rect overlays the screens and
defines what content plays where. Drag empty space to pan, wheel to zoom,
"Center" button auto-fits content. Per-rect numeric x/y/w/h panel; arrow keys
nudge by 1px (10px with shift). Negative coordinates supported for screens
offset above/left of the origin. Coords rounded to integers on save.

Wall rendering: each device receives screen_rect + player_rect, maps the
player into its viewport with vw/vh and object-fit:fill so vertical position
of every source pixel is identical across devices that share viewport height.
Leader emits wall:sync at 4Hz with sent_at timestamp; followers apply
latency-adjusted target and use playbackRate ±3% for sub-300ms drift,
hard-seek for >300ms. Followers stay muted; leader unmutes via gesture with
AudioContext priming and pause+play retry to bypass Firefox autoplay.
"Tap to enable audio" overlay as a final fallback.

Reconnect handling: server re-evaluates leader on device:register so the
top-left tile reclaims leadership when it returns. Followers emit
wall:sync-request on entering wall mode (incl. reconnect) so they snap to
position immediately instead of drifting until the next periodic tick.

Group dissolve: removing a device from its last group clears its playlist
to mirror wall-leave semantics. Leaving a group with playlists on remaining
groups inherits the next group's playlist.

Dashboard: walls render as their own card section (hidden the device cards
they contain). Multi-select checkboxes on cards + "Create Video Wall" toolbar
action that creates the wall, removes devices from groups, and opens the
editor. dashboard:wall-changed broadcast triggers live re-render. Per-card
playback progress bar driven by play_start events forwarded from devices.

Security: PUT /walls/:id/devices verifies caller owns each device (or has
team-owner access via the widgets pattern), preventing cross-tenant device
takeover. wall:sync and wall:sync-request validate that the sending device
is a member of the named wall; relay re-stamps device_id with currentDeviceId
so clients can't spoof or shadow-exclude peers.

Schema: video_walls += player_x/y/width/height, playlist_id;
video_wall_devices += canvas_x/y/width/height. All idempotent migrations.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-04-29 23:11:16 -05:00
..
activity.js i18n batch 6: wire teams + activity + help (~62 keys) 2026-04-29 20:16:21 -05:00
admin.js Admin password reset + widget visibility fix 2026-04-29 20:45:25 -05:00
billing.js i18n batch 5: wire layout-editor + video-wall + billing (~85 keys) 2026-04-29 20:13:38 -05:00
content-library.js i18n: extract all strings, add 6 language translations, restructure i18n module 2026-04-29 19:25:22 -05:00
dashboard.js Video walls: free-form canvas editor, leader-driven sync, group dissolve, progress bars 2026-04-29 23:11:16 -05:00
designer.js i18n batch 2b: wire designer.js (~80 keys) 2026-04-29 19:57:12 -05:00
device-detail.js i18n batch 1/6: wire device-detail + settings (~242 keys) 2026-04-29 19:47:17 -05:00
help.js i18n batch 6: wire teams + activity + help (~62 keys) 2026-04-29 20:16:21 -05:00
kiosk.js i18n batch 4: wire schedule + reports + kiosk (~95 keys) 2026-04-29 20:09:32 -05:00
layout-editor.js i18n batch 5: wire layout-editor + video-wall + billing (~85 keys) 2026-04-29 20:13:38 -05:00
login.js i18n: extract all strings, add 6 language translations, restructure i18n module 2026-04-29 19:25:22 -05:00
onboarding.js i18n batch 3b: wire onboarding.js + admin.js (~84 keys) 2026-04-29 20:04:23 -05:00
playlists.js i18n batch 3a: wire playlists.js (~65 keys) 2026-04-29 20:00:52 -05:00
reports.js i18n batch 4: wire schedule + reports + kiosk (~95 keys) 2026-04-29 20:09:32 -05:00
schedule.js i18n batch 4: wire schedule + reports + kiosk (~95 keys) 2026-04-29 20:09:32 -05:00
settings.js Admin password reset + widget visibility fix 2026-04-29 20:45:25 -05:00
teams.js i18n batch 6: wire teams + activity + help (~62 keys) 2026-04-29 20:16:21 -05:00
video-wall.js Video walls: free-form canvas editor, leader-driven sync, group dissolve, progress bars 2026-04-29 23:11:16 -05:00
widgets.js i18n batch 2a: wire widgets.js (~107 keys) 2026-04-29 19:52:31 -05:00