Skip to content

[Agent] Merge LiveView and WebRTCView into one Live component #654

Open

Description

@matteius

Problem and evidence

The Live page has two near-duplicate components that have to be kept in sync by hand:

  • web/js/components/preact/LiveView.jsx (~1,110 lines) and web/js/components/preact/WebRTCView.jsx (~1,131 lines). Their operator surface, building plan, detection overlay, slideshow, grid and auto-grid code is nearly identical.
  • web/js/pages/index-page.jsx:~85-105 picks one at runtime: WebRTCView unless WebRTC is disabled.
  • Bugs have had to be fixed twice (for example the placeholder shown until auto-grid resolves, LiveView.jsx:~185 and WebRTCView.jsx:~187), and features land in one view and get missed in the other.

Expected behavior and scope

  • Merge the two into one LiveView component that renders the right cell type for the active transport (WebRTC, HLS, MSE or Auto). The cell components (WebRTCVideoCell, HLSVideoCell, MSEVideoCell) stay as they are.
  • Before changing anything, diff the two files and list every real behavioral difference in the PR description (transport tab handling, auto-fallback, audio, etc.). Each one must be kept, behind the transport switch.
  • index-page.jsx renders the single component. Delete WebRTCView.jsx.
  • Update tests and imports that refer to WebRTCView.

Acceptance criteria

  • With every combination of webrtcDisabled, hlsDisabled, mseDisabled and autoDisabled from /api/client-config, the visible tabs and the default transport match current behavior.
  • Slideshow, building plan, operator surface, detection overlays, PTZ, fullscreen, PiP and the grid picker work on every transport.
  • The net line count drops substantially (expect −900 or more).
  • No new i18n keys are needed. Reuse the existing ones.

Validation

  • cd web && npx vite build, npm run lint, npm test, and the npm run test:e2e live-view specs if they apply.
  • Add a Jest test that renders the merged view under each transport-flag combination and checks the tabs.
  • Manual smoke test in a browser against a running instance with at least two cameras.

Constraints and rollback

  • Refactor only. No visual or behavioral change is intended.
  • Rollback: revert. The two-view setup is self-contained.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or requestjavascriptPull requests that update javascript code

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions