All files / web/src/components/practice CameraModal.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
'use client'

import * as Dialog from '@radix-ui/react-dialog'
import dynamic from 'next/dynamic'
import type { Corner, Rotation } from '@/types/attachments'
import { Z_INDEX } from '@/constants/zIndex'
import { VisualDebugProvider } from '@/contexts/VisualDebugContext'
import { css } from '../../../styled-system/css'

// Dynamic import for heavy camera component
const FullscreenCamera = dynamic(
  () => import('@/app/practice/[studentId]/summary/FullscreenCamera'),
  { ssr: false }
)

export interface CameraModalProps {
  /** Whether the modal is open */
  isOpen: boolean
  /** Callback when modal is closed */
  onClose: () => void
  /** Callback when a photo is captured */
  onCapture: (croppedFile: File, originalFile: File, corners: Corner[], rotation: Rotation) => void
}

/**
 * Fullscreen camera modal for capturing worksheet photos
 *
 * Wraps FullscreenCamera in a Dialog for proper accessibility
 * and overlay handling.
 */
export function CameraModal({ isOpen, onClose, onCapture }: CameraModalProps) {
  return (
    <Dialog.Root open={isOpen} onOpenChange={(open) => !open && onClose()}>
      <Dialog.Portal>
        <Dialog.Overlay
          className={css({
            position: 'fixed',
            inset: 0,
            bg: 'black',
            zIndex: Z_INDEX.MODAL,
          })}
        />
        <Dialog.Content
          className={css({
            position: 'fixed',
            inset: 0,
            zIndex: Z_INDEX.MODAL + 1,
            outline: 'none',
          })}
        >
          <VisualDebugProvider>
            <Dialog.Title className={css({ srOnly: true })}>Take Photo</Dialog.Title>
            <Dialog.Description className={css({ srOnly: true })}>
              Camera viewfinder. Tap capture to take a photo.
            </Dialog.Description>
            <FullscreenCamera onCapture={onCapture} onClose={onClose} />
          </VisualDebugProvider>
        </Dialog.Content>
      </Dialog.Portal>
    </Dialog.Root>
  )
}

export default CameraModal