Add own control buttons for element-call (#2744)

* add mutation observer hok

* add hook to read speaking member by observing iframe content

* display speaking member name in call status bar and improve layout

* fix shrining

* add joined call control bar

* remove chat toggle from room header

* change member speaking icon to mic

* fix joined call control appear in other

* show spinner on end call button

* hide call statusbar for mobile view when room is selected

* make call statusbar more mobile friendly

* fix call status bar item align

src/app/hooks/useCallEmbed.ts

@@ -14,6 +14,7 @@ import { callEmbedAtom } from '../state/callEmbed';
 import { useResizeObserver } from './useResizeObserver';
 import { CallControlState } from '../plugins/call/CallControlState';
 import { useCallMembersChange, useCallSession } from './useCall';
+import { CallPreferences } from '../state/callPreferences';
 
 const CallEmbedContext = createContext<CallEmbed | undefined>(undefined);
 
@@ -41,7 +42,7 @@ export const createCallEmbed = (
   dm: boolean,
   themeKind: ElementCallThemeKind,
   container: HTMLElement,
-  controlState?: CallControlState
+  pref?: CallPreferences
 ): CallEmbed => {
   const rtcSession = mx.matrixRTC.getRoomSession(room);
   const ongoing =
@@ -49,6 +50,8 @@ export const createCallEmbed = (
 
   const intent = CallEmbed.getIntent(dm, ongoing);
   const widget = CallEmbed.getWidget(mx, room, intent, themeKind);
+  const controlState = pref && new CallControlState(pref.microphone, pref.video, pref.sound);
+
   const embed = new CallEmbed(mx, room, widget, container, controlState);
 
   return embed;
@@ -61,12 +64,12 @@ export const useCallStart = (dm = false) => {
   const callEmbedRef = useCallEmbedRef();
 
   const startCall = useCallback(
-    (room: Room, controlState?: CallControlState) => {
+    (room: Room, pref?: CallPreferences) => {
       const container = callEmbedRef.current;
       if (!container) {
         throw new Error('Failed to start call, No embed container element found!');
       }
-      const callEmbed = createCallEmbed(mx, room, dm, theme.kind, container, controlState);
+      const callEmbed = createCallEmbed(mx, room, dm, theme.kind, container, pref);
 
       setCallEmbed(callEmbed);
     },