Adding a button to an existing react app

KarTha · April 28, 2022, 4:29pm

Hello, so I am using the react app provided by this git link, GitHub - jitsi/jitsi-meet: Jitsi Meet - Secure, Simple and Scalable Video Conferences that you use as a standalone app or embed in your web application., and I want to add an additional button to the toolbox and due to me having no React Experience I have no clue how to start. Does anyone have/know of a comprehensive guide, I can use to help me?

damencho · April 28, 2022, 4:45pm

KarTha · April 28, 2022, 4:55pm

I have gone through this page many times before but I couldn’t figure out how implement a button with a new function that I add since I could not figure out the html file, or the file that produces the html of the toolbox within the files in the git link from the OP

KarTha · April 28, 2022, 4:56pm

the image here I edited using paint, for I have no clue how to implement this with the code provided

damencho · April 28, 2022, 5:06pm

The code is here: jitsi-meet/react/features/toolbox at master · jitsi/jitsi-meet · GitHub
You can see how other buttons are implemented.

KarTha · April 28, 2022, 8:21pm

So I was attempting to implement a button that just changes the icon on said button (so like how the icon of the videomuting button changes upon click) so to if I use the VideoMuteButton.js within the components folder in the link you provided what parts are necessary?

damencho · April 28, 2022, 8:36pm

You pass toggled: true to the ToolboxIitem as props

github.com

jitsi/jitsi-meet/blob/96ee61ec072bfac868dde49cf286bcc500a7a558/react/features/base/toolbox/components/AbstractButton.js#L330

      
        
             * @returns {React$Node}
             */
            render(): React$Node {
                const props = {
                    ...this.props,
                    accessibilityLabel: this.accessibilityLabel,
                    elementAfter: this._getElementAfter(),
                    icon: this._getIcon(),
                    label: this._getLabel(),
                    styles: this._getStyles(),
                    toggled: this._isToggled(),
                    tooltip: this._getTooltip()
                };
            
            
    return (
                    <ToolboxItem
                        disabled = { this._isDisabled() }
                        onClick = { this._onClick }
                        onKeyDown = { this._onKeyDown }
                        { ...props } />
                );

KarTha · April 29, 2022, 9:10pm

So I have did all of this and build/make the app, but I didn’t see a new button appear. Which files do I have go to to add the location of the new files I made somewhere else to make the button appear? I ask since this seems to me what I am missing