bitvid/context/CONTEXT_2026-02-20_decompose-agent.md

Decomposition Plan for js/ui/components/VideoModal.js

Date: 2026-02-20 Agent: decompose-agent (via scheduler) Target File: js/ui/components/VideoModal.js Current Size: ~6000 lines (grandfathered)

Rationale

VideoModal.js is one of the largest files in the codebase. It handles too many responsibilities beyond just managing the modal lifecycle and video playback. Specifically, it contains extensive logic for:

1. Zap Dialog Management: Handling the entire flow of zapping, including popover, form validation, receipts, and error handling.
2. Link Previews: Fetching and rendering link previews for the video description.

Extracting these into dedicated controllers will significantly reduce the size of VideoModal.js and improve cohesion.

Extraction Plan

1. ZapController

Source: js/ui/components/VideoModal.js Destination: js/ui/components/video-modal/zapController.js

Responsibilities:

• Manage the Zap dialog DOM elements (modalZapDialog, modalZapForm, etc.).
• Handle Zap interactions (open, close, submit).
• Render Zap receipts.
• Manage Zap visibility and state.

Methods to Move:

• setupModalZapPopover
• openZapDialog
• closeZapDialog
• isZapDialogOpen
• focusZapAmount
• getZapAmountValue, setZapAmount
• getZapCommentValue, setZapComment
• resetZapForm
• setZapSplitSummary
• setZapStatus
• clearZapReceipts, renderZapReceipts
• setZapPending, setZapRetryPending, setZapCompleted
• applyZapSendButtonState
• setZapVisibility
• setWalletPromptVisible

2. LinkPreviewController

Source: js/ui/components/VideoModal.js Destination: js/ui/components/video-modal/linkPreviewController.js

Responsibilities:

• Manage link preview DOM elements (videoDescriptionPreviews).
• Fetch and render link previews.
• Handle link preview settings.

Methods to Move:

• renderLinkPreviews
• clearLinkPreviews, clearLinkPreviewRequests
• extractDescriptionUrls
• normalizePreviewUrl, extractPreviewDomain
• createLinkPreviewCard, updateLinkPreviewCard
• setLinkPreviewStatus
• resolveLinkPreview
• handleLinkPreviewSettingsChange

Implementation Details

• VideoModal will instantiate these controllers in its constructor.
• hydrate() will call controller.initialize().
• destroy() will call controller.destroy().
• VideoModal will delegate relevant calls to these controllers.
• Existing event listeners in VideoModal that trigger these actions will be updated to use the controllers.

Verification

• npm run lint
• npm run test:unit
• Manual verification via code review (simulated).