Add event listener to <Message> component that tells when it is rendered

[hubtype]

Add event listener to component that tells when it is rendered

from botonic.

[Hasankib]

Hi, does this issue still need fixing? If so then I can give it a try.

[YoniSchirris]

So currently I still have the previous workaround in place:

i render with

render(){
<div>
        <CustomAudio id={this.context.session.messageId} src={"data:audio/mp3;base64," + this.context.session.resp.response} />
        {this.context.session.resp.options ? <DisplayClickables audioId={this.context.session.messageId} options={this.context.session.resp.options} /> : null}

</div>
}

with the DisplayClickables class being

class DisplayClickables extends React.Component{
  // React component that will display clickables after the audio has stopped playing

  constructor(props){

    super(props)

    if (props.alwaysShow) {
      this.state = {showOptions: false}

      setTimeout(() => {
        this.setState({showOptions: true})
      }, 2500);

    } else{
      this.state = {showOptions: false,
        audioId: props.audioId,
        audioOptionsId: props.audioId + '_options'
        }
        let return_el = null
        let startTime = new Date()  
        let timerId = setInterval(() => {
    
          if (document.querySelector('#' + this.state.audioId + ' #myAudio')){
            if(Math.floor((Date() - startTime/1000)/60) > 300){ // Stop checking the audio element after 5 minutes.
              clearInterval(timerId)
            }
    
            let audio_el = document.querySelector('#' + this.state.audioId + ' #myAudio') // get the latest posted audio element
            if (audio_el.ended){  // check if it has ended playing, this is a property of the html audio dom element
              clearInterval(timerId)  // then, stop checking
              this.setState({showOptions: true}) // change state to show the clickable options
            }
          }
        }, 800)
    }
  }

where the messageId is manually defined as

 session.messageId = 'a' + uuidv1().split("-").join("") // used to set id, id needs to start with character and can't have '-'

within the botonicInit.

I'm using
@botonic/cli/0.18.3 darwin-x64 node-v13.2.0

[Hasankib]

Ok, I will attempt something. I will get back to you if I am able to solve the issue.

[TD-XiPengZhao]

Hello, I would like to ask this question, is there a solution in the future?

[vanbasten17]

we'll consider adding this but it is not a priority. feel free to create a PR for this 🤗

[vbsh123]

Hey ,is it possible for me to work on this?
Or if its closed that means it doesn't need to be done?