misty.cafe/minty
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

redo roomcallnavstatus ui, force user preferred mute/video states when first joining calls, update variable names and remove unnecessary logic

Browse source
This commit is contained in:
YoJames2019 2026-02-09 22:17:28 -05:00
parent e481116b04
commit 990a92a32c
4 changed files with 175 additions and 169 deletions
Download patch file Download diff file Expand all files Collapse all files

19
src/app/features/call/CallView.tsx
View file

@ -5,7 +5,7 @@ import { useCallState } from '../../pages/client/call/CallProvider';
import { useCallMembers } from '../../hooks/useCallMemberships';
import {
PrimaryRefContext,
CallRefContext,
} from '../../pages/client/call/PersistentCallContainer';
import { ScreenSize, useScreenSizeContext } from '../../hooks/useScreenSize';
import { useDebounce } from '../../hooks/useDebounce';
@ -42,7 +42,7 @@ export function CallViewUserGrid({ children }: { children: ReactNode }) {
export function CallView({ room }: { room: Room }) {
const primaryIframeRef = useContext(PrimaryRefContext);
const callIframeRef = useContext(CallRefContext);
const iframeHostRef = useRef<HTMLDivElement>(null);
const originalIframeStylesRef = useRef<OriginalStyles | null>(null);
@ -60,7 +60,7 @@ export function CallView({ room }: { room: Room }) {
} = useCallState();
const isActiveCallRoom = activeCallRoomId === room.roomId
const shouldDisplayCall = isActiveCallRoom && isActiveCallReady;
const callIsCurrentAndReady = isActiveCallRoom && isActiveCallReady;
const callMembers = useCallMembers(mx, room.roomId)
const getName = (userId: string) => getMemberDisplayName(room, userId) ?? getMxIdLocalPart(userId);
@ -71,8 +71,7 @@ export function CallView({ room }: { room: Room }) {
const screenSize = useScreenSizeContext();
const isMobile = screenSize === ScreenSize.Mobile;
/* eslint-disable-next-line no-nested-ternary */
const activeIframeDisplayRef = primaryIframeRef
const activeIframeDisplayRef = callIframeRef
const applyFixedPositioningToIframe = useCallback(() => {
const iframeElement = activeIframeDisplayRef?.current;
@ -118,7 +117,7 @@ export function CallView({ room }: { room: Room }) {
const iframeElement = activeIframeDisplayRef?.current;
const hostElement = iframeHostRef?.current;
if (room.isCallRoom() || (shouldDisplayCall && iframeElement && hostElement)) {
if (room.isCallRoom() || (callIsCurrentAndReady && iframeElement && hostElement)) {
applyFixedPositioningToIframe();
const resizeObserver = new ResizeObserver(debouncedApplyFixedPositioning);
@ -146,7 +145,7 @@ export function CallView({ room }: { room: Room }) {
activeIframeDisplayRef,
applyFixedPositioningToIframe,
debouncedApplyFixedPositioning,
shouldDisplayCall,
callIsCurrentAndReady,
room,
]);
@ -157,7 +156,7 @@ export function CallView({ room }: { room: Room }) {
setViewedCallRoomId(room.roomId);
navigateRoom(room.roomId);
}
if (!shouldDisplayCall) {
if (!callIsCurrentAndReady) {
hangUp(room.roomId);
setActiveCallRoomId(room.roomId);
}
@ -185,11 +184,11 @@ export function CallView({ room }: { room: Room }) {
height: '100%',
position: 'relative',
pointerEvents: 'none',
display: shouldDisplayCall ? 'flex' : 'none',
display: callIsCurrentAndReady ? 'flex' : 'none',
}}
/>
<Box grow='Yes' justifyContent='Center' alignItems='Center' direction="Column" gap="300" style={{
display: shouldDisplayCall ? 'none' : 'flex',
display: callIsCurrentAndReady ? 'none' : 'flex',
}}>
<CallViewUserGrid>
{callMembers.map(callMember => (

119
src/app/features/room-nav/RoomCallNavStatus.tsx
View file

@ -8,8 +8,8 @@ export function CallNavStatus() {
const {
activeCallRoomId,
isAudioEnabled,
isVideoEnabled,
isActiveCallReady,
isVideoEnabled,
isActiveCallReady,
toggleAudio,
toggleVideo,
hangUp,
@ -21,9 +21,6 @@ export function CallNavStatus() {
navigateRoom(activeCallRoomId);
}
};
if (!isActiveCallReady) {
return null;
}
return (
<Box
@ -34,56 +31,10 @@ export function CallNavStatus() {
justifyContent: 'center',
}}
>
<Box direction="Row" style={{ justifyContent: 'center' }}>
<Box direction="Row" justifyContent='SpaceBetween' alignItems='Center'>
{/* Going to need better icons for this */}
<TooltipProvider
position="Top"
offset={4}
tooltip={
<Tooltip>
<Text>{!isAudioEnabled ? 'Unmute' : 'Mute'}</Text>
</Tooltip>
}
>
{(triggerRef) => (
<IconButton variant="Background" ref={triggerRef} onClick={toggleAudio}>
<Icon src={!isAudioEnabled ? Icons.MicMute : Icons.Mic} />
</IconButton>
)}
</TooltipProvider>
<TooltipProvider
position="Top"
offset={4}
tooltip={
<Tooltip>
<Text>{!isVideoEnabled ? 'Video On' : 'Video Off'}</Text>
</Tooltip>
}
>
{(triggerRef) => (
<IconButton variant="Background" ref={triggerRef} onClick={toggleVideo}>
<Icon src={!isVideoEnabled ? Icons.VideoCameraMute : Icons.VideoCamera} />
</IconButton>
)}
</TooltipProvider>
<TooltipProvider
position="Top"
offset={4}
tooltip={
<Tooltip>
<Text>Hang Up</Text>
</Tooltip>
}
>
{(triggerRef) => (
<IconButton variant="Background" ref={triggerRef} onClick={hangUp}>
<Icon src={Icons.Phone} />
</IconButton>
)}
</TooltipProvider>
<Box grow="Yes" justifyContent="Center" alignItems="Center">
<Box>
<TooltipProvider
position="Top"
offset={4}
@ -101,7 +52,13 @@ export function CallNavStatus() {
as="button"
onClick={handleGoToCallRoom}
ref={triggerRef}
style={{
display: isActiveCallReady ? 'flex' : 'none',
alignItems: "center",
justifyContent: "center"
}}
>
<Icon src={Icons.VolumeHigh}/>
<Text style={{ flexGrow: 1 }} size="B400" truncate>
{mx.getRoom(activeCallRoomId)?.name}
</Text>
@ -109,6 +66,62 @@ export function CallNavStatus() {
)}
</TooltipProvider>
</Box>
<Box>
<TooltipProvider
position="Top"
offset={4}
tooltip={
<Tooltip>
<Text>{!isAudioEnabled ? 'Unmute' : 'Mute'}</Text>
</Tooltip>
}
>
{(triggerRef) => (
<IconButton variant="Background" ref={triggerRef} onClick={toggleAudio}>
<Icon src={!isAudioEnabled ? Icons.MicMute : Icons.Mic} />
</IconButton>
)}
</TooltipProvider>
<TooltipProvider
position="Top"
offset={4}
tooltip={
<Tooltip>
<Text>{!isVideoEnabled ? 'Video On' : 'Video Off'}</Text>
</Tooltip>
}
>
{(triggerRef) => (
<IconButton variant="Background" ref={triggerRef} onClick={toggleVideo}>
<Icon src={!isVideoEnabled ? Icons.VideoCameraMute : Icons.VideoCamera} />
</IconButton>
)}
</TooltipProvider>
<TooltipProvider
position="Top"
offset={4}
tooltip={
<Tooltip>
<Text>Hang Up</Text>
</Tooltip>
}
>
{(triggerRef) => (
<IconButton
variant="Background"
ref={triggerRef}
onClick={hangUp}
style={{
display: isActiveCallReady ? 'block' : 'none'
}}
>
<Icon src={Icons.Phone} />
</IconButton>
)}
</TooltipProvider>
</Box>
</Box>
</Box>
);

162
src/app/pages/client/call/CallProvider.tsx
View file

@ -65,39 +65,24 @@ const DEFAULT_CALL_ACTIVE = false;
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>(null);
const [isAudioEnabled, setIsAudioEnabledState] = useState<boolean>(DEFAULT_AUDIO_ENABLED);
const [isVideoEnabled, setIsVideoEnabledState] = useState<boolean>(DEFAULT_VIDEO_ENABLED);
const [isChatOpen, setIsChatOpenState] = useState<boolean>(DEFAULT_CHAT_OPENED);
const [isActiveCallReady, setIsCallActive] = useState<boolean>(DEFAULT_CALL_ACTIVE);
const [isActiveCallReady, setIsActiveCallReady] = useState<boolean>(DEFAULT_CALL_ACTIVE);
const { roomIdOrAlias: viewedRoomId } = useParams<{ roomIdOrAlias: string }>();
const resetMediaState = useCallback(() => {
logger.debug('CallContext: Resetting media state to defaults.');
setIsAudioEnabledState(DEFAULT_AUDIO_ENABLED);
setIsVideoEnabledState(DEFAULT_VIDEO_ENABLED);
}, []);
const setActiveCallRoomId = useCallback(
(roomId: string | null) => {
logger.warn(`CallContext: Setting activeCallRoomId to ${roomId}`);
const previousRoomId = activeCallRoomId;
setActiveCallRoomIdState(roomId);
if (roomId !== previousRoomId) {
logger.debug(`CallContext: Active call room changed, resetting media state.`);
resetMediaState();
}
},
[resetMediaState, activeCallRoomId]
[]
);
const setViewedCallRoomId = useCallback(
@ -136,10 +121,9 @@ export function CallProvider({ children }: CallProviderProps) {
setActiveClientWidgetApi(clientWidgetApi, clientWidget, roomId);
} else if (roomId === activeClientWidgetApiRoomId || roomId === null) {
setActiveClientWidgetApi(null, null, null);
resetMediaState();
}
},
[activeClientWidgetApi, activeClientWidgetApiRoomId, setActiveClientWidgetApi, resetMediaState]
[activeClientWidgetApi, activeClientWidgetApiRoomId, setActiveClientWidgetApi]
);
const hangUp = useCallback(
@ -147,7 +131,7 @@ export function CallProvider({ children }: CallProviderProps) {
setActiveClientWidgetApi(null, null, null);
setActiveCallRoomIdState(null);
activeClientWidgetApi?.transport.send(`${WIDGET_HANGUP_ACTION}`, {});
setIsCallActive(false);
setIsActiveCallReady(false);
logger.debug(`CallContext: Hang up called.`);
},
@ -157,6 +141,71 @@ export function CallProvider({ children }: CallProviderProps) {
]
);
const sendWidgetAction = useCallback(
async <T = unknown,>(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);
},
[activeClientWidgetApi, activeCallRoomId, activeClientWidgetApiRoomId]
);
const toggleAudio = useCallback(async () => {
const newState = !isAudioEnabled;
logger.debug(`CallContext: Toggling audio. New state: enabled=${newState}`);
setIsAudioEnabledState(newState);
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;
}
}
}, [isAudioEnabled, isVideoEnabled, sendWidgetAction, isActiveCallReady]);
const toggleVideo = useCallback(async () => {
const newState = !isVideoEnabled;
logger.debug(`CallContext: Toggling video. New state: enabled=${newState}`);
setIsVideoEnabledState(newState);
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;
}
}
}, [isVideoEnabled, isAudioEnabled, sendWidgetAction, isActiveCallReady]);
useEffect(() => {
if (!activeCallRoomId && !viewedCallRoomId) {
return;
@ -179,6 +228,7 @@ export function CallProvider({ children }: CallProviderProps) {
};
const handleMediaStateUpdate = (ev: CustomEvent<MediaStatePayload>) => {
if(!isActiveCallReady) return;
ev.preventDefault();
logger.debug(
`CallContext: Received media state update from widget in room ${activeCallRoomId}:`,
@ -228,13 +278,19 @@ export function CallProvider({ children }: CallProviderProps) {
});
logger.debug('Join Call');
observer.observe(iframeDoc, { childList: true, subtree: true });
setIsCallActive(true);
setIsActiveCallReady(true);
};
logger.debug(
`CallContext: Setting up listeners for clientWidgetApi in room ${activeCallRoomId}`
);
sendWidgetAction(WIDGET_MEDIA_STATE_UPDATE_ACTION, {
audio_enabled: isAudioEnabled,
video_enabled: isVideoEnabled,
});
api.on(`action:${WIDGET_HANGUP_ACTION}`, handleHangup);
api.on(`action:${WIDGET_MEDIA_STATE_UPDATE_ACTION}`, handleMediaStateUpdate);
api.on(`action:${WIDGET_TILE_UPDATE}`, handleOnTileLayout);
@ -255,65 +311,9 @@ export function CallProvider({ children }: CallProviderProps) {
setViewedCallRoomId,
activeClientWidget?.iframe?.contentDocument,
activeClientWidget?.iframe?.contentWindow?.document,
sendWidgetAction
]);
const sendWidgetAction = useCallback(
async <T = unknown,>(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);
},
[activeClientWidgetApi, activeCallRoomId, activeClientWidgetApiRoomId]
);
const toggleAudio = useCallback(async () => {
const newState = !isAudioEnabled;
logger.debug(`CallContext: Toggling audio. New state: enabled=${newState}`);
setIsAudioEnabledState(newState);
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;
}
}, [isAudioEnabled, isVideoEnabled, sendWidgetAction]);
const toggleVideo = useCallback(async () => {
const newState = !isVideoEnabled;
logger.debug(`CallContext: Toggling video. New state: enabled=${newState}`);
setIsVideoEnabledState(newState);
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;
}
}, [isVideoEnabled, isAudioEnabled, sendWidgetAction]);
const toggleChat = useCallback(async () => {
const newState = !isChatOpen;
setIsChatOpenState(newState);

44
src/app/pages/client/call/PersistentCallContainer.tsx
View file

@ -19,12 +19,12 @@ interface PersistentCallContainerProps {
children: ReactNode;
}
export const PrimaryRefContext = createContext(null);
export const CallRefContext = createContext(null);
export function PersistentCallContainer({ children }: PersistentCallContainerProps) {
const primaryIframeRef = useRef<HTMLIFrameElement | null>(null);
const primaryWidgetApiRef = useRef<ClientWidgetApi | null>(null);
const primarySmallWidgetRef = useRef<SmallWidget | null>(null);
const callIframeRef = useRef<HTMLIFrameElement | null>(null);
const callWidgetApiRef = useRef<ClientWidgetApi | null>(null);
const callSmallWidgetRef = useRef<SmallWidget | null>(null);
const {
activeCallRoomId,
@ -39,11 +39,6 @@ export function PersistentCallContainer({ children }: PersistentCallContainerPro
const screenSize = useScreenSizeContext();
const theme = useTheme()
const isMobile = screenSize === ScreenSize.Mobile;
const { roomIdOrAlias: viewedRoomId } = useParams();
const isViewingActiveCall = useMemo(
() => activeCallRoomId !== null && activeCallRoomId === viewedRoomId,
[activeCallRoomId, viewedRoomId]
);
/* eslint-disable no-param-reassign */
@ -56,17 +51,19 @@ export function PersistentCallContainer({ children }: PersistentCallContainerPro
themeKind: ThemeKind | null
) => {
if (mx?.getUserId()) {
logger.debug(`CallContextJ: iframe src - ${iframeRef.current.src}`)
logger.debug(`CallContextJ: activeCallRoomId: ${activeCallRoomId} viewedId: ${viewedCallRoomId} isactive: ${isActiveCallReady}`)
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 === '') {
return;
}
const widgetId = `element-call-${roomIdToSet}-${Date.now()}`;
const newUrl = getWidgetUrl(
mx,
@ -82,8 +79,8 @@ export function PersistentCallContainer({ children }: PersistentCallContainerPro
);
if (
primarySmallWidgetRef.current?.roomId &&
(activeClientWidget?.roomId && activeClientWidget.roomId === primarySmallWidgetRef.current?.roomId)
callSmallWidgetRef.current?.roomId &&
(activeClientWidget?.roomId && activeClientWidget.roomId === callSmallWidgetRef.current?.roomId)
) {
return;
}
@ -134,30 +131,27 @@ export function PersistentCallContainer({ children }: PersistentCallContainerPro
]
);
useEffect(() => {
logger.debug(`CallContextJ: ${isActiveCallReady} ${isViewingActiveCall}`)
}, [isActiveCallReady, isViewingActiveCall])
useEffect(() => {
if (activeCallRoomId){
setupWidget(primaryWidgetApiRef, primarySmallWidgetRef, primaryIframeRef, true, theme.kind);
logger.debug(`CallContextJ: set primary widget: ${primaryWidgetApiRef.current?.eventNames()} ${primarySmallWidgetRef.current} ${primaryIframeRef.current?.baseURI}`)
setupWidget(callWidgetApiRef, callSmallWidgetRef, callIframeRef, true, theme.kind);
logger.debug(`PersistentCallContainer: set call widget: ${callWidgetApiRef.current?.eventNames()} ${callSmallWidgetRef.current} ${callIframeRef.current?.baseURI}`)
}
}, [
theme,
setupWidget,
primaryWidgetApiRef,
primarySmallWidgetRef,
primaryIframeRef,
callWidgetApiRef,
callSmallWidgetRef,
callIframeRef,
registerActiveClientWidgetApi,
activeCallRoomId,
viewedCallRoomId,
isActiveCallReady
]);
const memoizedIframeRef = useMemo(() => primaryIframeRef, [primaryIframeRef]);
const memoizedIframeRef = useMemo(() => callIframeRef, [callIframeRef]);
return (
<PrimaryRefContext.Provider value={memoizedIframeRef}>
<CallRefContext.Provider value={memoizedIframeRef}>
<Box grow="No">
<Box
direction="Column"
@ -176,7 +170,7 @@ export function PersistentCallContainer({ children }: PersistentCallContainerPro
}}
>
<iframe
ref={primaryIframeRef}
ref={callIframeRef}
style={{
position: 'absolute',
top: 0,
@ -195,6 +189,6 @@ export function PersistentCallContainer({ children }: PersistentCallContainerPro
</Box>
</Box>
{children}
</PrimaryRefContext.Provider>
</CallRefContext.Provider>
);
}