remove debug logs

src/app/features/call/SmallWidget.ts

@@ -26,7 +26,6 @@ import {
   WidgetApiFromWidgetAction,
   WidgetKind,
 } from 'matrix-widget-api';
-import { logger } from 'matrix-js-sdk/lib/logger';
 import { CinnyWidget } from './CinnyWidget';
 import { SmallWidgetDriver } from './SmallWidgetDriver';
 
@@ -68,7 +67,6 @@ export const getWidgetUrl = (
   const replacedParams = params.toString().replace(/%24/g, '$');
   url.search = `?${replacedParams}`;
 
-  logger.info('Generated Element Call Widget URL:', url.toString());
   return url;
 };
 
@@ -194,7 +192,6 @@ export class SmallWidget extends EventEmitter {
       }
     );
 
-    logger.info(`Widget messaging started for widgetId: ${this.mockWidget.id}`);
     return this.messaging;
   }
 
@@ -319,9 +316,7 @@ export class SmallWidget extends EventEmitter {
         this.eventsToFeed.add(ev);
       } else {
         const raw = ev.getEffectiveEvent();
-        this.messaging.feedEvent(raw as IRoomEvent, this.roomId ?? '').catch((e) => {
+        this.messaging.feedEvent(raw as IRoomEvent, this.roomId ?? '').catch(() => null);
-          logger.error('Error sending event to widget: ', e);
-        });
       }
     }
   }
@@ -333,7 +328,6 @@ export class SmallWidget extends EventEmitter {
     if (this.messaging) {
       this.messaging.stop(); // Example if a stop method exists
       this.messaging.removeAllListeners(); // Remove listeners attached by SmallWidget
-      logger.info(`Widget messaging stopped for widgetId: ${this.mockWidget.id}`);
       this.messaging = null;
     }
   }

src/app/pages/client/call/CallProvider.tsx

@@ -7,8 +7,12 @@ import React, {
   ReactNode,
   useEffect,
 } from 'react';
-import { logger } from 'matrix-js-sdk/lib/logger';
+import {
-import { WidgetApiToWidgetAction, WidgetApiAction, ClientWidgetApi, IWidgetApiRequestData } from 'matrix-widget-api';
+  WidgetApiToWidgetAction,
+  WidgetApiAction,
+  ClientWidgetApi,
+  IWidgetApiRequestData,
+} from 'matrix-widget-api';
 import { useParams } from 'react-router-dom';
 import { SmallWidget } from '../../../features/call/SmallWidget';
 
@@ -66,10 +70,15 @@ export function CallProvider({ children }: CallProviderProps) {
   const [activeCallRoomId, setActiveCallRoomIdState] = useState<string | null>(null);
   const [viewedCallRoomId, setViewedCallRoomIdState] = useState<string | null>(null);
 
-  const [activeClientWidgetApi, setActiveClientWidgetApiState] = useState<ClientWidgetApi | null>(null);
+  const [activeClientWidgetApi, setActiveClientWidgetApiState] = useState<ClientWidgetApi | null>(
+    null
+  );
   const [activeClientWidget, setActiveClientWidget] = useState<SmallWidget | null>(null);
-  const [activeClientWidgetApiRoomId, setActiveClientWidgetApiRoomId] = useState<string | null>(null);
+  const [activeClientWidgetApiRoomId, setActiveClientWidgetApiRoomId] = useState<string | null>(
-  const [activeClientWidgetIframeRef, setActiveClientWidgetIframeRef] = useState<HTMLIFrameElement | null>(null)
+    null
+  );
+  const [activeClientWidgetIframeRef, setActiveClientWidgetIframeRef] =
+    useState<HTMLIFrameElement | null>(null);
 
   const [isAudioEnabled, setIsAudioEnabledState] = useState<boolean>(DEFAULT_AUDIO_ENABLED);
   const [isVideoEnabled, setIsVideoEnabledState] = useState<boolean>(DEFAULT_VIDEO_ENABLED);
@@ -78,17 +87,12 @@ export function CallProvider({ children }: CallProviderProps) {
 
   const { roomIdOrAlias: viewedRoomId } = useParams<{ roomIdOrAlias: string }>();
 
-  const setActiveCallRoomId = useCallback(
+  const setActiveCallRoomId = useCallback((roomId: string | null) => {
-    (roomId: string | null) => {
+    setActiveCallRoomIdState(roomId);
-      logger.warn(`CallContext: Setting activeCallRoomId to ${roomId}`);
+  }, []);
-      setActiveCallRoomIdState(roomId);
-    },
-    []
-  );
 
   const setViewedCallRoomId = useCallback(
     (roomId: string | null) => {
-      logger.warn(`CallContext: Setting viewedCallRoomId to ${roomId}`);
       setViewedCallRoomIdState(roomId);
     },
     [setViewedCallRoomIdState]
@@ -104,7 +108,7 @@ export function CallProvider({ children }: CallProviderProps) {
       setActiveClientWidgetApiState(clientWidgetApi);
       setActiveClientWidget(clientWidget);
       setActiveClientWidgetApiRoomId(roomId);
-      setActiveClientWidgetIframeRef(clientWidgetIframeRef)
+      setActiveClientWidgetIframeRef(clientWidgetIframeRef);
     },
     []
   );
@@ -116,76 +120,51 @@ export function CallProvider({ children }: CallProviderProps) {
       clientWidget: SmallWidget | null,
       clientWidgetIframeRef: HTMLIFrameElement | null
     ) => {
-      if (activeClientWidgetApi && activeClientWidgetApi !== clientWidgetApi) {
-        logger.debug(`CallContext: Cleaning up listeners for previous clientWidgetApi instance.`);
-      }
-
-      
       if (roomId && clientWidgetApi) {
-        logger.debug(`CallContext: Registering active clientWidgetApi for room ${roomId}.`);
         setActiveClientWidgetApi(clientWidgetApi, clientWidget, roomId, clientWidgetIframeRef);
       } else if (roomId === activeClientWidgetApiRoomId || roomId === null) {
         setActiveClientWidgetApi(null, null, null, null);
       }
     },
-    [activeClientWidgetApi, activeClientWidgetApiRoomId, setActiveClientWidgetApi]
+    [activeClientWidgetApiRoomId, setActiveClientWidgetApi]
-  );
-
-  const hangUp = useCallback(
-    () => {
-      setActiveClientWidgetApi(null, null, null, null);
-      setActiveCallRoomIdState(null);
-      activeClientWidgetApi?.transport.send(`${WIDGET_HANGUP_ACTION}`, {});
-      setIsActiveCallReady(false);
-
-      logger.debug(`CallContext: Hang up called.`);
-    },
-    [
-      activeClientWidgetApi?.transport,
-      setActiveClientWidgetApi,
-    ]
   );
 
+  const hangUp = useCallback(() => {
+    setActiveClientWidgetApi(null, null, null, null);
+    setActiveCallRoomIdState(null);
+    activeClientWidgetApi?.transport.send(`${WIDGET_HANGUP_ACTION}`, {});
+    setIsActiveCallReady(false);
+  }, [activeClientWidgetApi?.transport, setActiveClientWidgetApi]);
 
   const sendWidgetAction = useCallback(
-    async <T extends IWidgetApiRequestData = IWidgetApiRequestData,>(action: WidgetApiToWidgetAction | string, data: T): Promise<void> => {
+    async <T extends IWidgetApiRequestData = IWidgetApiRequestData>(
+      action: WidgetApiToWidgetAction | string,
+      data: T
+    ): Promise<void> => {
       if (!activeClientWidgetApi) {
-        logger.warn(
-          `CallContext: Cannot send action '${action}', no active API clientWidgetApi registered.`
-        );
         return Promise.reject(new Error('No active call clientWidgetApi'));
       }
       if (!activeClientWidgetApiRoomId || activeClientWidgetApiRoomId !== activeCallRoomId) {
-        logger.debug(
-          `CallContext: Cannot send action '${action}', clientWidgetApi room (${activeClientWidgetApiRoomId}) does not match active call room (${activeCallRoomId}). Stale clientWidgetApi?`
-        );
         return Promise.reject(new Error('Mismatched active call clientWidgetApi'));
       }
 
-
-      logger.debug(
-        `CallContext: Sending action '${action}' via active clientWidgetApi (room: ${activeClientWidgetApiRoomId}) with data:`,
-        data
-      );
       await activeClientWidgetApi.transport.send(action as WidgetApiAction, data);
 
-      return Promise.resolve()
+      return Promise.resolve();
     },
     [activeClientWidgetApi, activeCallRoomId, activeClientWidgetApiRoomId]
   );
 
   const toggleAudio = useCallback(async () => {
     const newState = !isAudioEnabled;
-    logger.debug(`CallContext: Toggling audio. New state: enabled=${newState}`);
     setIsAudioEnabledState(newState);
 
-    if(isActiveCallReady) {
+    if (isActiveCallReady) {
       try {
         await sendWidgetAction(WIDGET_MEDIA_STATE_UPDATE_ACTION, {
           audio_enabled: newState,
           video_enabled: isVideoEnabled,
         });
-        logger.debug(`CallContext: Successfully sent audio toggle action.`);
       } catch (error) {
         setIsAudioEnabledState(!newState);
         throw error;
@@ -195,16 +174,14 @@ export function CallProvider({ children }: CallProviderProps) {
 
   const toggleVideo = useCallback(async () => {
     const newState = !isVideoEnabled;
-    logger.debug(`CallContext: Toggling video. New state: enabled=${newState}`);
     setIsVideoEnabledState(newState);
 
-    if(isActiveCallReady){
+    if (isActiveCallReady) {
       try {
         await sendWidgetAction(WIDGET_MEDIA_STATE_UPDATE_ACTION, {
           audio_enabled: isAudioEnabled,
           video_enabled: newState,
         });
-        logger.debug(`CallContext: Successfully sent video toggle action.`);
       } catch (error) {
         setIsVideoEnabledState(!newState);
         throw error;
@@ -212,7 +189,6 @@ export function CallProvider({ children }: CallProviderProps) {
     }
   }, [isVideoEnabled, isAudioEnabled, sendWidgetAction, isActiveCallReady]);
 
-
   useEffect(() => {
     if (!activeCallRoomId && !viewedCallRoomId) {
       return;
@@ -227,29 +203,19 @@ export function CallProvider({ children }: CallProviderProps) {
       if (isActiveCallReady && ev.detail.widgetId === activeClientWidgetApi.widget.id) {
         activeClientWidgetApi.transport.reply(ev.detail, {});
       }
-      logger.debug(
-        `CallContext: Received hangup action from widget in room ${activeCallRoomId}.`,
-        ev
-      );
     };
 
     const handleMediaStateUpdate = (ev: CustomEvent<MediaStatePayload>) => {
-      if(!isActiveCallReady) return;
+      if (!isActiveCallReady) return;
       ev.preventDefault();
-      logger.debug(
-        `CallContext: Received media state update from widget in room ${activeCallRoomId}:`,
-        ev.detail
-      );
 
       /* eslint-disable camelcase */
       const { audio_enabled, video_enabled } = ev.detail.data ?? {};
 
       if (typeof audio_enabled === 'boolean' && audio_enabled !== isAudioEnabled) {
-        logger.debug(`CallContext: Updating audio enabled state from widget: ${audio_enabled}`);
         setIsAudioEnabledState(audio_enabled);
       }
       if (typeof video_enabled === 'boolean' && video_enabled !== isVideoEnabled) {
-        logger.debug(`CallContext: Updating video enabled state from widget: ${video_enabled}`);
         setIsVideoEnabledState(video_enabled);
       }
       /* eslint-enable camelcase */
@@ -272,31 +238,24 @@ export function CallProvider({ children }: CallProviderProps) {
       activeClientWidgetApi.transport.reply(ev.detail, {});
 
       const iframeDoc =
-        activeClientWidgetIframeRef?.contentWindow?.document || 
+        activeClientWidgetIframeRef?.contentWindow?.document ||
         activeClientWidgetIframeRef?.contentDocument;
 
-      if(iframeDoc){
+      if (iframeDoc) {
-
         const observer = new MutationObserver(() => {
           const button = iframeDoc.querySelector('[data-testid="incall_leave"]');
           if (button) {
             button.addEventListener('click', () => {
-              hangUp()
+              hangUp();
             });
           }
           observer.disconnect();
         });
-        logger.debug('Join Call');
         observer.observe(iframeDoc, { childList: true, subtree: true });
       }
-      
+
       setIsActiveCallReady(true);
-      
     };
-    
-    logger.debug(
-      `CallContext: Setting up listeners for clientWidgetApi in room ${activeCallRoomId}`
-    );
 
     sendWidgetAction(WIDGET_MEDIA_STATE_UPDATE_ACTION, {
       audio_enabled: isAudioEnabled,
@@ -308,7 +267,6 @@ export function CallProvider({ children }: CallProviderProps) {
     activeClientWidgetApi.on(`action:${WIDGET_TILE_UPDATE}`, handleOnTileLayout);
     activeClientWidgetApi.on(`action:${WIDGET_ON_SCREEN_ACTION}`, handleOnScreenStateUpdate);
     activeClientWidgetApi.on(`action:${WIDGET_JOIN_ACTION}`, handleJoin);
-
   }, [
     activeClientWidgetIframeRef,
     activeClientWidgetApi,
@@ -324,7 +282,7 @@ export function CallProvider({ children }: CallProviderProps) {
     setViewedCallRoomId,
     activeClientWidget?.iframe?.contentDocument,
     activeClientWidget?.iframe?.contentWindow?.document,
-    sendWidgetAction
+    sendWidgetAction,
   ]);
 
   const toggleChat = useCallback(async () => {
@@ -349,7 +307,7 @@ export function CallProvider({ children }: CallProviderProps) {
       isActiveCallReady,
       toggleAudio,
       toggleVideo,
-      toggleChat
+      toggleChat,
     }),
     [
       activeCallRoomId,
@@ -367,7 +325,7 @@ export function CallProvider({ children }: CallProviderProps) {
       isActiveCallReady,
       toggleAudio,
       toggleVideo,
-      toggleChat
+      toggleChat,
     ]
   );
 

src/app/pages/client/call/PersistentCallContainer.tsx

@@ -1,5 +1,4 @@
 import React, { createContext, ReactNode, useCallback, useEffect, useMemo, useRef } from 'react';
-import { logger } from 'matrix-js-sdk/lib/logger';
 import { ClientWidgetApi } from 'matrix-widget-api';
 import { Box } from 'folds';
 import { useCallState } from './CallProvider';
@@ -18,7 +17,8 @@ interface PersistentCallContainerProps {
   children: ReactNode;
 }
 
-export const CallRefContext = createContext<React.MutableRefObject<HTMLIFrameElement | null> | null>(null);
+export const CallRefContext =
+  createContext<React.MutableRefObject<HTMLIFrameElement | null> | null>(null);
 
 export function PersistentCallContainer({ children }: PersistentCallContainerProps) {
   const callIframeRef = useRef<HTMLIFrameElement | null>(null);
@@ -36,7 +36,7 @@ export function PersistentCallContainer({ children }: PersistentCallContainerPro
   const mx = useMatrixClient();
   const clientConfig = useClientConfig();
   const screenSize = useScreenSizeContext();
-  const theme = useTheme()
+  const theme = useTheme();
   const isMobile = screenSize === ScreenSize.Mobile;
 
   /* eslint-disable no-param-reassign */
@@ -50,13 +50,11 @@ export function PersistentCallContainer({ children }: PersistentCallContainerPro
       themeKind: ThemeKind | null
     ) => {
       if (mx?.getUserId()) {
-        logger.debug(`PersistentCallContainer: (setupWidget) activeCallRoomId: ${activeCallRoomId} viewedId: ${viewedCallRoomId} isactive: ${isActiveCallReady}`)
         if (
           (activeCallRoomId !== viewedCallRoomId && isActiveCallReady) ||
           (activeCallRoomId && !isActiveCallReady) ||
           (!activeCallRoomId && viewedCallRoomId && !isActiveCallReady)
         ) {
-
           const roomIdToSet = (skipLobby ? activeCallRoomId : viewedCallRoomId) ?? '';
 
           if (roomIdToSet === '') {
@@ -73,18 +71,22 @@ export function PersistentCallContainer({ children }: PersistentCallContainerPro
               skipLobby: skipLobby.toString(),
               returnToLobby: 'true',
               perParticipantE2EE: 'true',
-              theme: themeKind
+              theme: themeKind,
             }
           );
 
           if (
             callSmallWidgetRef.current?.roomId &&
-            (activeClientWidget?.roomId && activeClientWidget.roomId === callSmallWidgetRef.current?.roomId)
+            activeClientWidget?.roomId &&
+            activeClientWidget.roomId === callSmallWidgetRef.current?.roomId
           ) {
             return;
           }
 
-          if (iframeRef.current && (!iframeRef.current.src || iframeRef.current.src !== newUrl.toString())) {
+          if (
+            iframeRef.current &&
+            (!iframeRef.current.src || iframeRef.current.src !== newUrl.toString())
+          ) {
             iframeRef.current.src = newUrl.toString();
           }
 
@@ -111,11 +113,12 @@ export function PersistentCallContainer({ children }: PersistentCallContainerPro
 
           const widgetApiInstance = smallWidget.startMessaging(iframeElement);
           widgetApiRef.current = widgetApiInstance;
-          registerActiveClientWidgetApi(roomIdToSet, widgetApiRef.current, smallWidget, iframeElement);
+          registerActiveClientWidgetApi(
-          
+            roomIdToSet,
-          widgetApiInstance.once('ready', () => {
+            widgetApiRef.current,
-            logger.info(`PersistentCallContainer: Widget for ${roomIdToSet} is ready.`);
+            smallWidget,
-          });
+            iframeElement
+          );
         }
       }
     },
@@ -131,9 +134,8 @@ export function PersistentCallContainer({ children }: PersistentCallContainerPro
   );
 
   useEffect(() => {
-    if (activeCallRoomId){
+    if (activeCallRoomId) {
       setupWidget(callWidgetApiRef, callSmallWidgetRef, callIframeRef, true, theme.kind);
-      logger.debug(`PersistentCallContainer: set call widget: ${callWidgetApiRef.current?.eventNames()} ${callSmallWidgetRef.current} ${callIframeRef.current?.baseURI}`)
     }
   }, [
     theme,
@@ -144,50 +146,50 @@ export function PersistentCallContainer({ children }: PersistentCallContainerPro
     registerActiveClientWidgetApi,
     activeCallRoomId,
     viewedCallRoomId,
-    isActiveCallReady
+    isActiveCallReady,
   ]);
 
   const memoizedIframeRef = useMemo(() => callIframeRef, [callIframeRef]);
 
   return (
     <CallRefContext.Provider value={memoizedIframeRef}>
-        <Box grow="No">
+      <Box grow="No">
+        <Box
+          direction="Column"
+          style={{
+            position: 'relative',
+            zIndex: 0,
+            display: isMobile && isChatOpen ? 'none' : 'flex',
+            width: isMobile && isChatOpen ? '0%' : '100%',
+            height: isMobile && isChatOpen ? '0%' : '100%',
+          }}
+        >
           <Box
-            direction="Column"
+            grow="Yes"
             style={{
               position: 'relative',
-              zIndex: 0,
-              display: isMobile && isChatOpen ? 'none' : 'flex',
-              width: isMobile && isChatOpen ? '0%' : '100%',
-              height: isMobile && isChatOpen ? '0%' : '100%',
             }}
           >
-            <Box
+            <iframe
-              grow="Yes"
+              ref={callIframeRef}
               style={{
-                position: 'relative',
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                display: 'flex',
+                width: '100%',
+                height: '100%',
+                border: 'none',
               }}
-            >
+              title="Persistent Element Call"
-              <iframe
+              sandbox="allow-forms allow-scripts allow-same-origin allow-popups allow-modals allow-downloads"
-                ref={callIframeRef}
+              allow="microphone; camera; display-capture; autoplay; clipboard-write;"
-                style={{
+              src="about:blank"
-                  position: 'absolute',
+            />
-                  top: 0,
-                  left: 0,
-                  display: 'flex',
-                  width: '100%',
-                  height: '100%',
-                  border: 'none',
-                }}
-                title="Persistent Element Call"
-                sandbox="allow-forms allow-scripts allow-same-origin allow-popups allow-modals allow-downloads"
-                allow="microphone; camera; display-capture; autoplay; clipboard-write;"
-                src="about:blank"
-              />
-            </Box>
           </Box>
         </Box>
-        {children}
+      </Box>
+      {children}
     </CallRefContext.Provider>
   );
 }