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">
|
<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
|
||||||
|
|||||||
@@ -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
|
||||||
|
|||||||
Reference in New Issue
Block a user