diff --git a/src/app/features/call/SmallWidget.ts b/src/app/features/call/SmallWidget.ts index 82efc2b4..cf331e9f 100644 --- a/src/app/features/call/SmallWidget.ts +++ b/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) => { - logger.error('Error sending event to widget: ', e); - }); + this.messaging.feedEvent(raw as IRoomEvent, this.roomId ?? '').catch(() => null); } } } @@ -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; } } diff --git a/src/app/pages/client/call/CallProvider.tsx b/src/app/pages/client/call/CallProvider.tsx index 5f6c448d..fa550a6c 100644 --- a/src/app/pages/client/call/CallProvider.tsx +++ b/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 { WidgetApiToWidgetAction, WidgetApiAction, ClientWidgetApi, IWidgetApiRequestData } from 'matrix-widget-api'; +import { + 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(null); const [viewedCallRoomId, setViewedCallRoomIdState] = useState(null); - const [activeClientWidgetApi, setActiveClientWidgetApiState] = useState(null); + const [activeClientWidgetApi, setActiveClientWidgetApiState] = useState( + null + ); const [activeClientWidget, setActiveClientWidget] = useState(null); - const [activeClientWidgetApiRoomId, setActiveClientWidgetApiRoomId] = useState(null); - const [activeClientWidgetIframeRef, setActiveClientWidgetIframeRef] = useState(null) + const [activeClientWidgetApiRoomId, setActiveClientWidgetApiRoomId] = useState( + null + ); + const [activeClientWidgetIframeRef, setActiveClientWidgetIframeRef] = + useState(null); const [isAudioEnabled, setIsAudioEnabledState] = useState(DEFAULT_AUDIO_ENABLED); const [isVideoEnabled, setIsVideoEnabledState] = useState(DEFAULT_VIDEO_ENABLED); @@ -78,17 +87,12 @@ export function CallProvider({ children }: CallProviderProps) { const { roomIdOrAlias: viewedRoomId } = useParams<{ roomIdOrAlias: string }>(); - const setActiveCallRoomId = useCallback( - (roomId: string | null) => { - logger.warn(`CallContext: Setting activeCallRoomId to ${roomId}`); - setActiveCallRoomIdState(roomId); - }, - [] - ); + const setActiveCallRoomId = useCallback((roomId: string | null) => { + 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] - ); - - 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, - ] + [activeClientWidgetApiRoomId, 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 (action: WidgetApiToWidgetAction | string, data: T): Promise => { + async ( + action: WidgetApiToWidgetAction | string, + data: T + ): Promise => { 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) => { - 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, ] ); diff --git a/src/app/pages/client/call/PersistentCallContainer.tsx b/src/app/pages/client/call/PersistentCallContainer.tsx index 4256bffd..faded7c4 100644 --- a/src/app/pages/client/call/PersistentCallContainer.tsx +++ b/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 | null>(null); +export const CallRefContext = + createContext | null>(null); export function PersistentCallContainer({ children }: PersistentCallContainerProps) { const callIframeRef = useRef(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); - - widgetApiInstance.once('ready', () => { - logger.info(`PersistentCallContainer: Widget for ${roomIdToSet} is ready.`); - }); + registerActiveClientWidgetApi( + roomIdToSet, + widgetApiRef.current, + 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 ( - + + - -