import { VroomUI } from "vroom-react"
/**
* SDK configuration
*/
const token = (Math.random() + 1).toString(36).substring(7)
const name = (Math.random() + 1).toString(36).substring(7)
const config = {
token: token,
endpoint: 'https://newvroom-portal-ts.truevirtualworld.com/5874321674',
displayName: name,
layoutUI: 4
}
function App() {
const [ callStart, setCallStart ] = useState(false)
const [ audioMuted, setAudioMuted ] = useState(false)
const [ videoMuted, setVideoMuted ] = useState(false)
const [ layoutUpdate, setLayoutUpdate ] = useState(config.layoutUI)
const [ frontCamEnable, setFrontCamEnable ] = useState(true)
const [ currentCamera, setCurrentCamera ] = useState(null)
const [ cameraDeviceList, setCameraDeviceList ] = useState([])
const [ isMobile, setIsMobile ] = useState(false)
const [ changeCameraToDeviceId, setChangeCameraToDeviceId ] = useState('')
return (
<>
<VroomUI
config={config}
onValueCallStart={callStart}
camera={cameraDeviceList}
setEmitCurrentCamera={setCurrentCamera}
setEmitCameraDeviceList={setCameraDeviceList}
setEmitIsMobile={setIsMobile}
onValueMuteAudio={audioMuted}
onValueMuteVideo={videoMuted}
layoutUI={layoutUpdate}
onValueFrontCamera={frontCamEnable}
onValueCameraChangeDeviceId={changeCameraToDeviceId}
/>
<div className="controller-group">
<div className="layout-group">
<button style={{width: '25%', height: '36px'}} onClick={() => { setLayoutUpdate(1)}}>1</button>
<button style={{width: '25%', height: '36px'}} onClick={() => { setLayoutUpdate(2)}}>2</button>
<button style={{width: '25%', height: '36px'}} onClick={() => { setLayoutUpdate(3)}}>3</button>
<button style={{width: '25%', height: '36px'}} onClick={() => { setLayoutUpdate(4)}}>4</button>
{
cameraDeviceList?.length > 0 && isMobile === false
? cameraDeviceList?.map((c) => {
if (c?.deviceId) {
return (
<button key={c.deviceId} onClick={() => setChangeCameraToDeviceId(c.deviceId)} style={{width: '25%', height: '36px'}}>
<span style={{
color: currentCamera?.deviceId === c.deviceId ? 'red' : 'black'
}}>
{c.kind} {c.label}
</span>
</button>
)
}
return <></>
})
: <></>
}
</div>
<div className="controller">
<StartButton callStart={callStart} setCallStart={setCallStart} />
<AudioMuteButton audioMuted={audioMuted} setAudioMuted={setAudioMuted} />
<VideoMuteButton videoMuted={videoMuted} setVideoMuted={setVideoMuted} />
{
isMobile && <SwitchCameraButton frontCamOn={frontCamEnable} setFrontCamOn={setFrontCamEnable} />
}
</div>
</div>
</>
);
}
export default App;
