fix: PTT iframe focus, folds-native PTT badge styling
This commit is contained in:
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"defaultHomeserver": 0,
|
||||
"homeserverList": [
|
||||
"matrix.lotusguild.org"
|
||||
],
|
||||
"allowCustomHomeservers": false,
|
||||
"featuredCommunities": {
|
||||
"openAsDefault": false,
|
||||
"spaces": [],
|
||||
"rooms": [],
|
||||
"servers": []
|
||||
},
|
||||
"hashRouter": {
|
||||
"enabled": false,
|
||||
"basename": "/"
|
||||
}
|
||||
}
|
||||
@@ -182,14 +182,14 @@ export function CallControl({
|
||||
<Box alignItems="Inherit" gap="200">
|
||||
{pttMode && (
|
||||
<Chip
|
||||
variant="Critical"
|
||||
variant={microphone ? 'Success' : 'Warning'}
|
||||
fill="Soft"
|
||||
radii="300"
|
||||
radii="400"
|
||||
size="300"
|
||||
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>
|
||||
)}
|
||||
<MicrophoneButton
|
||||
|
||||
@@ -2,6 +2,7 @@ import React, { MouseEventHandler, useCallback, useEffect, useRef, useState } fr
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Chip,
|
||||
config,
|
||||
Icon,
|
||||
IconButton,
|
||||
@@ -110,13 +111,19 @@ export function CallControls({ callEmbed }: CallControlsProps) {
|
||||
callEmbed.control.setMicrophone(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('keyup', onKeyUp);
|
||||
window.addEventListener('blur', onBlur);
|
||||
iframeWindow?.addEventListener('keydown', onKeyDown);
|
||||
iframeWindow?.addEventListener('keyup', onKeyUp);
|
||||
return () => {
|
||||
window.removeEventListener('keydown', onKeyDown);
|
||||
window.removeEventListener('keyup', onKeyUp);
|
||||
window.removeEventListener('blur', onBlur);
|
||||
iframeWindow?.removeEventListener('keydown', onKeyDown);
|
||||
iframeWindow?.removeEventListener('keyup', onKeyUp);
|
||||
};
|
||||
}, [pttMode, pttKey, callEmbed, microphone]);
|
||||
|
||||
@@ -136,24 +143,24 @@ export function CallControls({ callEmbed }: CallControlsProps) {
|
||||
alignItems="Center"
|
||||
>
|
||||
{pttMode && (
|
||||
<Box
|
||||
<Chip
|
||||
variant={pttActive ? 'Success' : 'Warning'}
|
||||
fill="Soft"
|
||||
radii="400"
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: '-2.5rem',
|
||||
top: '-2.2rem',
|
||||
left: '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',
|
||||
whiteSpace: 'nowrap',
|
||||
}}
|
||||
outlined
|
||||
>
|
||||
<Text size="T200" style={{ color: pttActive ? '#00FF88' : '#FF6B00', fontWeight: 700, letterSpacing: '0.08em' }}>
|
||||
{pttActive ? '● LIVE' : `PTT — Hold ${pttKeyLabel}`}
|
||||
<Text size="T200" style={{ fontWeight: 700 }}>
|
||||
{pttActive ? '● Live' : `PTT — Hold ${pttKeyLabel}`}
|
||||
</Text>
|
||||
</Box>
|
||||
</Chip>
|
||||
)}
|
||||
{shareConfirm && (
|
||||
<Box
|
||||
|
||||
Reference in New Issue
Block a user