Add DeviceMute widget action io.element.device_mute. (#2482)

* Add DeviceMute widget action `io.element.device_mute`.
This allows to send mute requests ("toWidget") and get the current mute state as a response.
And it will update the client about each change of mute states.

* review + better explanation

* review

* add comments

* use `useCallback`

src/widget.ts

@@ -46,6 +46,21 @@ export enum ElementWidgetActions {
   // host -> Element Call telling EC to stop screen sharing, or that
   // the user cancelled when selecting a source after a ScreenshareRequest
   ScreenshareStop = "io.element.screenshare_stop",
+  // This can be sent as from or to widget
+  // fromWidget: updates the client about the current device mute state
+  // toWidget: the client requests a specific device mute configuration
+  //   The reply will always be the resulting configuration
+  //   It is possible to sent an empty configuration to retrieve the current values or
+  //   just one of the fields to update that particular value
+  //   An undefined field means that EC will keep the mute state as is.
+  //   -> this will allow the client to only get the current state
+  //
+  // The data of the widget action request and the response are:
+  // {
+  //   audio_enabled?: boolean,
+  //   video_enabled?: boolean
+  // }
+  DeviceMute = "io.element.device_mute",
 }
 
 export interface JoinCallData {
@@ -88,6 +103,7 @@ export const widget = ((): WidgetHelpers | null => {
         ElementWidgetActions.SpotlightLayout,
         ElementWidgetActions.ScreenshareStart,
         ElementWidgetActions.ScreenshareStop,
+        ElementWidgetActions.DeviceMute,
       ].forEach((action) => {
         api.on(`action:${action}`, (ev: CustomEvent<IWidgetApiRequest>) => {
           ev.preventDefault();