fix: PTT iframe focus, folds-native PTT badge styling

This commit is contained in:
root
2026-05-14 19:37:19 -04:00
parent 3513608435
commit d76cd0f7ee
3 changed files with 37 additions and 13 deletions
+17
View File
@@ -0,0 +1,17 @@
{
"defaultHomeserver": 0,
"homeserverList": [
"matrix.lotusguild.org"
],
"allowCustomHomeservers": false,
"featuredCommunities": {
"openAsDefault": false,
"spaces": [],
"rooms": [],
"servers": []
},
"hashRouter": {
"enabled": false,
"basename": "/"
}
}
+4 -4
View File
@@ -182,14 +182,14 @@ export function CallControl({
<Box alignItems="Inherit" gap="200"> <Box alignItems="Inherit" gap="200">
{pttMode && ( {pttMode && (
<Chip <Chip
variant="Critical" variant={microphone ? 'Success' : 'Warning'}
fill="Soft" fill="Soft"
radii="300" radii="400"
size="300" size="300"
outlined outlined
style={{ pointerEvents: 'none', fontWeight: 700, letterSpacing: '0.06em' }} style={{ pointerEvents: 'none', fontWeight: 700 }}
> >
<Text size="T200">PTT {pttKeyLabel}</Text> <Text size="T200">{microphone ? '● Live' : `PTT ${pttKeyLabel}`}</Text>
</Chip> </Chip>
)} )}
<MicrophoneButton <MicrophoneButton
+16 -9
View File
@@ -2,6 +2,7 @@ import React, { MouseEventHandler, useCallback, useEffect, useRef, useState } fr
import { import {
Box, Box,
Button, Button,
Chip,
config, config,
Icon, Icon,
IconButton, IconButton,
@@ -110,13 +111,19 @@ export function CallControls({ callEmbed }: CallControlsProps) {
callEmbed.control.setMicrophone(false); callEmbed.control.setMicrophone(false);
setPttActive(false); setPttActive(false);
}; };
// The EC iframe captures keyboard events when it has focus, so listen on it too
const iframeWindow = callEmbed.iframe.contentWindow;
window.addEventListener('keydown', onKeyDown); window.addEventListener('keydown', onKeyDown);
window.addEventListener('keyup', onKeyUp); window.addEventListener('keyup', onKeyUp);
window.addEventListener('blur', onBlur); window.addEventListener('blur', onBlur);
iframeWindow?.addEventListener('keydown', onKeyDown);
iframeWindow?.addEventListener('keyup', onKeyUp);
return () => { return () => {
window.removeEventListener('keydown', onKeyDown); window.removeEventListener('keydown', onKeyDown);
window.removeEventListener('keyup', onKeyUp); window.removeEventListener('keyup', onKeyUp);
window.removeEventListener('blur', onBlur); window.removeEventListener('blur', onBlur);
iframeWindow?.removeEventListener('keydown', onKeyDown);
iframeWindow?.removeEventListener('keyup', onKeyUp);
}; };
}, [pttMode, pttKey, callEmbed, microphone]); }, [pttMode, pttKey, callEmbed, microphone]);
@@ -136,24 +143,24 @@ export function CallControls({ callEmbed }: CallControlsProps) {
alignItems="Center" alignItems="Center"
> >
{pttMode && ( {pttMode && (
<Box <Chip
variant={pttActive ? 'Success' : 'Warning'}
fill="Soft"
radii="400"
style={{ style={{
position: 'absolute', position: 'absolute',
top: '-2.5rem', top: '-2.2rem',
left: '50%', left: '50%',
transform: 'translateX(-50%)', transform: 'translateX(-50%)',
background: pttActive ? 'rgba(0,255,136,0.18)' : 'rgba(255,107,0,0.12)',
border: `1px solid ${pttActive ? 'rgba(0,255,136,0.55)' : 'rgba(255,107,0,0.35)'}`,
borderRadius: '99px',
padding: '0.2rem 0.9rem',
pointerEvents: 'none', pointerEvents: 'none',
whiteSpace: 'nowrap', whiteSpace: 'nowrap',
}} }}
outlined
> >
<Text size="T200" style={{ color: pttActive ? '#00FF88' : '#FF6B00', fontWeight: 700, letterSpacing: '0.08em' }}> <Text size="T200" style={{ fontWeight: 700 }}>
{pttActive ? '● LIVE' : `PTT — Hold ${pttKeyLabel}`} {pttActive ? '● Live' : `PTT — Hold ${pttKeyLabel}`}
</Text> </Text>
</Box> </Chip>
)} )}
{shareConfirm && ( {shareConfirm && (
<Box <Box