Server Mute Notifier

The Server Mute Notifier plugin is used to notify a guest when they are muted by a host on the webapp2 application. This plugin will present a notification at the top of the video informing the user that they are muted and also switch the mute button to grey with no click function.

To make this plugin work, we need to create some global variables that are scoped for access by the entire plugin. They will sit inside the IIFE so they are scoped to the plugin.

The uuid variable will be used in the action observable to track the uuid of the current user that is running the plugin. The serverMute variable is used to track the current server mute state, this will be set by information coming from the server side.

When the plugin is first loaded it attaches a stylesheet to the webapp2 application. This is invoked and appended when the load method is called.

Once the stylesheet has been attached, the plugin subscribes to the action observable. This is used to monitor what is going on within the webapp2 application so that we can act on the actions as they happen.

From the code above we have subscribed to a few different states, we grab the uuid of the user so that we can ensure that the states that we store are for the local user specifically. We also synchronize the serverMute state with the backend so that we can show the message to the user locally and also disable the mute button. Finally, we make sure that when the call is disconnected we hide the message and revert the mute to being able to be used.

The update mute method is used to obtain the elements from the DOM so that we can style them according to the current mute state.

This method is used to style the elements that were called. It looks quite complex but once you decipher the code, this the help of the comments below, it's quite simple.

In this method, we have created a disabled button with a dark grey icon and added it to the currently shown mic on/off container. When the server mute is turned off we delete that button, with a fallback to delete any instances of it (just in case we ever end up with multiple by some coincidence).

The output looks like below.

This method is used to display a message to the user when they are muted on the server-side.

Using all of the above code, and the information from the Getting Started section we end up with a complete plugin.js file that shows a user when they are server-side muted.

Once the above is saved to a new file named serverMuteNotifier.plugin.js we need to create the package file, create a new file named serverMuteNotifier.plugin.package.json and add the following code.

To activate the plugin, you need to create a folder in webapp2/plugins named serverMuteNotifier, move the above files into that folder and edit the settings.json file in the webapp2 folder. Add the following code to the plugins section.

Once all of this is done, upload the zip package of the theme to the conference node/reverse proxy and the new plugin will be activated.

If you have any doubt, visit the sections Create a branding package and Upload to Infinity .