touchcast-metaverse-widget-context

Touchcast widget context

Touchcast widget context allowing you to interact with Touchcast backend and another widgets on the same call, send commands, receive updates.

Usage/Examples

<WidgetFrameContextProvider>
    // Your design
</WidgetFrameContextProvider>

// Your design container should use  HOC 'withWidget'
export default withWidget(WidgetContainer);

Documentation

Context functions :

• sendCommandV2 - sending command

    this.sendCommand(CommandType.RunSequence, [ "Main Sequence" ])

    sendCommand = (name: CommandType, args: string[]) => {
        const { sendCommandV2, setWidgetData, widgetData } = this.props;



        sendCommandV2({
            name: name,
            arguments: args
        });
    }

• setWidgetData - allowing widget communication

        setWidgetData({
            ...widgetData,
            currentCommand: {
                Type: name,
                Args: args
            }
        });

• sendMuteAllUpdate - allowing mute all participants

    onMuteAllClicked = () => {
        const { isMuteAllEnabled, sendMuteAllUpdate } = this.props;
        sendMuteAllUpdate(!isMuteAllEnabled);
    };

• setActiveSpeaker - allowing set active speaker

  const speakerPersonas = participants.speakers;
    <Stack tokens={{ childrenGap: 8 }}>
        {speakerPersonas && speakerPersonas.map((props, i) => (
            <SpeakerPersona
                {...(props as Omit<IMetaversePersonaProps, "ref">)}
                key={i}
                onClick={() => {
                    this.onChangeActiveSpeaker(props.partcipantId);
                }} />
        ))}
    </Stack>


    onChangeActiveSpeaker = async (id?: string) => {
        const { setActiveSpeaker } = this.props;
        const speakerId = id ?? null;
        setActiveSpeaker(speakerId);
    }

• changeWidgetContainerVisibility - show/hide widget

 if (isBuyer === undefined) {
            console.log("No Widget");
            changeWidgetContainerVisibility(false);
            return (<div></div>);
        }

Context props :

• isBuyer - is it a buyer or a seller the widget should be shown to,
• widgetData - this basically your data that will be send from one widget to another to update widget state,
• participants - list of participants of the call,
• isMuteAllEnabled - is muted