uppy/src/plugins/Webcam/CameraScreen.js

Almost as cute as a Puppy :dog:

const html = require('yo-yo')
const SnapshotButton = require('./SnapshotButton')
const RecordButton = require('./RecordButton')

function isModeAvailable (modes, mode) {
  return modes.indexOf(mode) !== -1
}

module.exports = (props) => {
  const src = props.src || ''
  let video

  if (props.useTheFlash) {
    video = props.getSWFHTML()
  } else {
    video = html`<video class="UppyWebcam-video" autoplay muted src="${src}"></video>`
  }

  const shouldShowRecordButton = props.supportsRecording && (
    isModeAvailable(props.modes, 'video-only') ||
    isModeAvailable(props.modes, 'audio-only') ||
    isModeAvailable(props.modes, 'video-audio')
  )

  const shouldShowSnapshotButton = isModeAvailable(props.modes, 'picture')

  return html`
    <div class="UppyWebcam-container" onload=${(el) => {
      props.onFocus()
      const recordButton = el.querySelector('.UppyWebcam-recordButton')
      if (recordButton) recordButton.focus()
    }} onunload=${(el) => {
      props.onStop()
    }}>
      <div class='UppyWebcam-videoContainer'>
        ${video}
      </div>
      <div class='UppyWebcam-buttonContainer'>
        ${shouldShowRecordButton ? RecordButton(props) : null}
        ${shouldShowSnapshotButton ? SnapshotButton(props) : null}
      </div>
      <canvas class="UppyWebcam-canvas" style="display: none;"></canvas>
    </div>
  `
}