videocall.js

import React, { useRef, useLayoutEffect } from 'react'
import PropTypes from 'prop-types'
import './Videollamada.scss'
import DailyIframe from '@daily-co/daily-js'

function Videocall ({ toggleCall, conversationId, callActive }) {
  const callRef = useRef()

  if (callRef.current && !callActive) {
    callRef.current.leave()
  }

  const startCall = async () => {
    const callUrl = 'https://911total.daily.co/hello'
    const callFrame = await DailyIframe.createFrame(
      document.getElementById('videocall-wrapper'),
      { url: callUrl }
    )
    callRef.current = callFrame
    callFrame.join()
  }

  useLayoutEffect(() => {
    if (callActive) {
      startCall()
    }
  }, [callActive])

  if (!callActive) return null

  return (
    <div id='videocall-wrapper' />
  )
}

Videocall.propTypes = {
  toggleCall: PropTypes.func.isRequired,
  conversationId: PropTypes.string.isRequired,
  callActive: PropTypes.bool.isRequired
}

export default Videocall