vroom-react/src/hooks/useParticipants.ts

Vroom React UI

import { useEffect, useState } from 'react'
import {useSdkStateGlobal} from '@/contexts/SdkStateGlobal'
import {VROOM_SDK_EVENT} from 'vroom-web-sdk-beta'

function useParticipants (participants: any) {
  const [ pendingTask, setPendingTask ] = useState([])
  const [ attendees, setAttendees ] = useState([])
  const [participantsState, setParticipantsState] = useState(participants)
  const [ isListenerSet, setIsListenerSet ] = useState(false)
  const sdkStateGlobal = useSdkStateGlobal()

  useEffect(() => {
    if (sdkStateGlobal.stateAll && !isListenerSet) {
      sdkStateGlobal.stateAll.on(VROOM_SDK_EVENT.JOIN, (data: any) => {
        if (data?.email !== "bot-recorder@vroom.com") {
          handleAddParticipant(data)
        }
      })

      sdkStateGlobal.stateAll.on(VROOM_SDK_EVENT.UPDATE_TRACK, (data: any) => {
        sdkStateGlobal.stateAll.mapSubscriberStream(sdkStateGlobal.stateAll.streams, data)
      })

      sdkStateGlobal.stateAll.on(VROOM_SDK_EVENT.UPDATE_ATTENDEE, (data: any) => {
        // console.log('VROOM_SDK_EVENT.UPDATE_ATTENDEE', data)
        handleAttendeeUpdate(data)
      })

      sdkStateGlobal.stateAll.on(VROOM_SDK_EVENT.MUTE_AUDIO, (data: any) => {
        // console.log('VROOM_SDK_EVENT.MUTE_AUDIO', data)
        handleParticipantMuteAudio(data)
      })

      sdkStateGlobal.stateAll.on(VROOM_SDK_EVENT.MUTE_VIDEO, (data: any) => {
        // console.log('VROOM_SDK_EVENT.MUTE_VIDEO', data)
        handleParticipantMuteVideo(data)
      })

      setIsListenerSet(true)
    }
  }, [sdkStateGlobal.stateAll])

  const handleInitParticipant = (data: any) => {
    if (data) {
      const hasVideo = data?.streams?.find((i: any) => i.type === 'video')
      const hasAudio = data?.streams?.find((i: any) => i.type === 'audio')

      sdkStateGlobal.setParticipants({type: 'add', payload: {
        ...data,
          id: data.id,
          displayName: data?.displayName || data?.display,
          codecs: data?.codecs,
          hasVideo: !!hasVideo,
          hasAudio: !!hasAudio,
          streams: data?.streams,
        }})
    }
  }

  const handleAddParticipant = (data: any) => {
    if (data) {
      const hasVideo = data?.streams?.find((i: any) => i.type === 'video')
      const hasAudio = data?.streams?.find((i: any) => i.type === 'audio')

      sdkStateGlobal.setParticipants({type: 'add', payload: {
        ...data,
        id: data.id,
        displayName: data?.displayName || data?.display,
        codecs: data?.codecs,
        hasVideo: !!hasVideo,
        hasAudio: !!hasAudio,
        streams: data?.streams,
      }})
    }
  }

  const handleSetVideoMediaStream = (data: any) => {
    data
      .map((media: any) => {
        if (media.type === 'video') {
          sdkStateGlobal.setParticipants({
            type: 'set_video_stream',
            payload: {
              id: media.id,
              type: media.type,
              mediaStream: media.mediaStream
            }
          })

          sdkStateGlobal.setPublisherVideos({
            type: 'add',
            payload: {
              id: media.id,
              type: media.type,
              mediaStream: media.mediaStream
            }
          })
        }

        if (media.type === 'audio') {
          sdkStateGlobal.setParticipants({
            type: 'set_audio_stream',
            payload: {
              id: media.id,
              type: media.type,
              mediaStream: media.mediaStream
            }
          })

          sdkStateGlobal.setPublisherAudios({
            type: 'add',
            payload: {
              id: media.id,
              type: media.type,
              mediaStream: media.mediaStream
            }
          })
        }
      })
  }

  const handleDeleteParticipant = (participant: any) => {
    sdkStateGlobal.setParticipants({type: 'remove', payload: participant})
  }

  const handleAttendeeUpdate = (attend: any) => {
    if (attend?.isQueue) {
      const existIndex = pendingTask.findIndex((i: any) => i.task === attend.task)
      if (existIndex > -1) {
        pendingTask.splice(existIndex, 1)
        setPendingTask(prev => prev.filter((i: any) => i.task !== attend.task))
      }
    } else {
      let newTask = [...pendingTask]
      const tObj = {
        task: 'attendee_update',
        isQueue: true,
        data: attend
      }

      // @ts-ignore
      newTask[newTask.length] = tObj
      setPendingTask(newTask)
    }
  }

  const handleClearAttendees = () => {
    setAttendees([])
  }

  const handleClearParticipantState = () => {
    setParticipantsState([])
  }

  const handleParticipantMuteAudio = (msg: any) => {
    // console.log('on mute audio', msg)
  }

  const handleParticipantMuteVideo = (msg: any) => {
    // console.log('on mute video', msg)
  }

  return {
    attendees,
    participantsState,
    handleInitParticipant,
    handleAddParticipant,
    handleDeleteParticipant,
    handleSetVideoMediaStream,
    handleAttendeeUpdate,
    handleClearAttendees,
    handleClearParticipantState,
    handleParticipantMuteAudio,
    handleParticipantMuteVideo,
  }
}

export default useParticipants