Skip to content
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 19 additions & 9 deletions src/media/media-capture.ts
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,10 @@ export function cameraCaptureControl (
const div = dom.createElement('div')
let destination, imageBlob, player, canvas

const setButtonVisible = (button: HTMLElement, visible: boolean) => {
button.style.display = visible ? 'inline-flex' : 'none'
}
Comment on lines +43 to +45
Copy link

Copilot AI Apr 16, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

New UI-state logic is introduced via setButtonVisible(...)/style.display and the updated state transitions in displayPlayer()/reviewImage(), but the existing unit test for this module only asserts the navigator.mediaDevices not available throw. Consider adding a Jest test that stubs navigator.mediaDevices.getUserMedia to resolve and then asserts the expected style.display values (and button labels) for shutter/retake/send in each state.

Copilot uses AI. Check for mistakes.

const table = div.appendChild(dom.createElement('table'))
const mainTR = table.appendChild(dom.createElement('tr'))
const main = mainTR.appendChild(dom.createElement('td'))
Expand All @@ -61,23 +65,26 @@ export function cameraCaptureControl (
retakeButton.addEventListener('click', _event => {
retake()
})
retakeButton.style.visibility = 'collapse' // Hide for now
retakeButton.textContent = 'Retake'
setButtonVisible(retakeButton, false)
Comment on lines +68 to +69
Copy link

Copilot AI Apr 16, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

retakeButton is created via widgets.button(dom, retakeIcon, 'Retake'), which appends an <img> icon. Setting retakeButton.textContent = 'Retake' replaces all children and removes the icon/tooltip. If the intent is a text-only button, create it as a text button (e.g., call widgets.button without an icon) instead of overwriting textContent, or update the widget to render icon + label without destroying children.

Copilot uses AI. Check for mistakes.

const shutterButton = buttons
.appendChild(dom.createElement('td')) // Trigger capture button
.appendChild(
widgets.button(dom, icons.iconBase + 'noun_10636.svg', 'Snap')
)
shutterButton.addEventListener('click', grabCanvas)
shutterButton.style.visibility = 'collapse' // Hide for now
shutterButton.textContent = 'Take Photo'
setButtonVisible(shutterButton, false)
Comment on lines +77 to +78
Copy link

Copilot AI Apr 16, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

shutterButton is initially created with an icon (widgets.button(..., 'Snap')), but shutterButton.textContent = 'Take Photo' replaces the button contents and removes the icon/tooltip. If a labeled button is desired, prefer constructing it as a text button (no icon) or adjust the widget to support icon + label instead of overwriting textContent.

Copilot uses AI. Check for mistakes.

const sendButton = buttons
.appendChild(dom.createElement('td')) // Confirm and save button
.appendChild(widgets.continueButton(dom)) // @@ or send icon??
sendButton.addEventListener('click', _event => {
saveBlob(imageBlob, destination)
})
sendButton.style.visibility = 'collapse' // Hide for now
sendButton.textContent = 'Use Photo'
setButtonVisible(sendButton, false)
Comment on lines +86 to +87
Copy link

Copilot AI Apr 16, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

sendButton comes from widgets.continueButton(dom), which creates an icon-only button. Setting sendButton.textContent = 'Use Photo' removes that icon and any tooltip set on it. If the goal is to switch to a text label, create a text button directly (or update the continue button/widget to support icon + label) rather than replacing textContent.

Copilot uses AI. Check for mistakes.

function displayPlayer () {
player = main.appendChild(dom.createElement('video'))
Expand All @@ -89,9 +96,12 @@ export function cameraCaptureControl (
}
navigator.mediaDevices.getUserMedia(constraints).then(stream => {
player.srcObject = stream
shutterButton.style.visibility = 'visible' // Enable
sendButton.style.visibility = 'collapse'
retakeButton.style.visibility = 'collapse'
setButtonVisible(shutterButton, true)
setButtonVisible(sendButton, false)
setButtonVisible(retakeButton, false)
}).catch(err => {
console.error('Unable to start camera preview', err)
doneCallback(null)
})
}

Expand Down Expand Up @@ -128,9 +138,9 @@ export function cameraCaptureControl (
}

function reviewImage () {
sendButton.style.visibility = 'visible'
retakeButton.style.visibility = 'visible'
shutterButton.style.visibility = 'collapse' // Hide for now
setButtonVisible(sendButton, true)
setButtonVisible(retakeButton, true)
setButtonVisible(shutterButton, false)
}

function stopVideo () {
Expand Down
Loading