const container = document.querySelector('#container')

let socket = io.connect('/client')
let got_frame = false

socket.on('res', (data) => {
  switch (data.cmd) {
    case 'get_last_frame':
      console.log('get last frame!')
      socket.emit('cmd', {
        cmd: 'get_last_frame',
      })
      break
    default:
      break
  }
  console.log(data)
})

socket.on('frame', (data) => {
  got_frame = true
  // console.log('frame', data.fn)
  // console.log(data.frame)
  // return
  const blob = new Blob([data.frame], { type: 'image/jpg' })
  const url = URL.createObjectURL(blob)

  const img = new Image ()
  img.onload = function() {
    URL.revokeObjectURL(url)
    container.innerHTML = ''
    container.appendChild(img)
  }
  img.src = url
})

socket.emit('cmd', {
  cmd: 'get_params',
})

setTimeout(() => {
  if (!got_frame) {
    socket.emit('cmd', {
      cmd: 'get_last_frame',
    })
  }
}, 500)

socket.emit('cmd', {
  cmd: 'send_param',
  payload: {
    'key': 'client',
    'value': 'test',
  }
})