Compare commits
12
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
  Lotus CIandClaude Opus 5.5
|
1ea6987083 | ||
 jared
|
be8e49a2bb | ||
|
Lotus CIandClaude Opus 5.5
|
1e217592fc | ||
|
jared
|
ffe1d5a81e | ||
|
Lotus CIandClaude Opus 5.5
|
fff583fca5 | ||
|
jared
|
e2b23397bd | ||
|
Lotus CIandClaude Opus 5.5
|
b929cbf74b | ||
|
Lotus CIandClaude Opus 5.5
|
8520de232d | ||
|
jared
|
773e41311e | ||
|
Lotus CIandClaude Opus 5.5
|
da78bff316 | ||
|
Lotus CIandClaude Opus 5.5
|
4dcc5176e2 | ||
|
Lotus CIandClaude Opus 5.5
|
df395776b4 |
Generated
+4
-4
@@ -81,7 +81,7 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@axe-core/playwright": "4.13.0",
|
||||
"@lotusguild/element-call-embedded": "0.25.0-lotus.20",
|
||||
"@lotusguild/element-call-embedded": "0.25.0-lotus.22",
|
||||
"@playwright/test": "1.63.0",
|
||||
"@rollup/plugin-inject": "5.0.5",
|
||||
"@rollup/plugin-wasm": "6.2.2",
|
||||
@@ -2695,9 +2695,9 @@
|
||||
"integrity": "sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA=="
|
||||
},
|
||||
"node_modules/@lotusguild/element-call-embedded": {
|
||||
"version": "0.25.0-lotus.20",
|
||||
"resolved": "https://code.lotusguild.org/api/packages/LotusGuild/npm/%40lotusguild%2Felement-call-embedded/-/0.25.0-lotus.20/element-call-embedded-0.25.0-lotus.20.tgz",
|
||||
"integrity": "sha512-USac8cunc+nlkyivxV0dXshzJoSWTyNHc6Aq/xIpphKbkON05NzhEWBX+qNwgwdyVWacdmYAEX97z6jHA5J+Kw==",
|
||||
"version": "0.25.0-lotus.22",
|
||||
"resolved": "https://code.lotusguild.org/api/packages/LotusGuild/npm/%40lotusguild%2Felement-call-embedded/-/0.25.0-lotus.22/element-call-embedded-0.25.0-lotus.22.tgz",
|
||||
"integrity": "sha512-AimDKZA4xUKEEyl2XUFUSUDl03tBKFv88T/3igKyH2VqNSPMGnqcQJC5HXIkHLTWrOmg8kLcJ//FFbqlUZiLcA==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@matrix-org/matrix-sdk-crypto-wasm": {
|
||||
|
||||
+1
-1
@@ -108,7 +108,7 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@axe-core/playwright": "4.13.0",
|
||||
"@lotusguild/element-call-embedded": "0.25.0-lotus.20",
|
||||
"@lotusguild/element-call-embedded": "0.25.0-lotus.22",
|
||||
"@playwright/test": "1.63.0",
|
||||
"@rollup/plugin-inject": "5.0.5",
|
||||
"@rollup/plugin-wasm": "6.2.2",
|
||||
|
||||
@@ -38,7 +38,7 @@ import {
|
||||
} from '../hooks/useCallEmbed';
|
||||
import { callChatAtom, callEmbedAtom } from '../state/callEmbed';
|
||||
import { toastQueueAtom } from '../state/toast';
|
||||
import { CallEmbed, useCallControlState } from '../plugins/call';
|
||||
import { CallEmbed, useCallControlState, useScreensharePromptOpen } from '../plugins/call';
|
||||
import { hangupCallAndWait } from '../plugins/call/hangup';
|
||||
import { useSelectedRoom } from '../hooks/router/useSelectedRoom';
|
||||
import { ScreenSize, useScreenSizeContext } from '../hooks/useScreenSize';
|
||||
@@ -82,6 +82,7 @@ import { useRoomCallPolicy } from '../hooks/useRoomCallPolicy';
|
||||
import { useNotificationsQuiet } from '../hooks/useNotificationsQuiet';
|
||||
import { CallAvatarAnimation } from '../styles/Animations.css';
|
||||
import { webRTCSupported } from '../utils/rtc';
|
||||
import { CallsUnavailableMessage } from '../features/call/CallsUnavailable';
|
||||
import { zIndices } from '../styles/zIndex';
|
||||
|
||||
const PIP_MIN_W = 200;
|
||||
@@ -231,13 +232,7 @@ function IncomingCall({ dm, info, onIgnore, onAnswer, onReject }: IncomingCallPr
|
||||
</Text>
|
||||
)}
|
||||
{!webRTCSupported() && (
|
||||
<Text
|
||||
style={{ margin: 'auto', color: color.Critical.Main }}
|
||||
size="L400"
|
||||
align="Center"
|
||||
>
|
||||
Your browser does not support WebRTC, which is required for calling.
|
||||
</Text>
|
||||
<CallsUnavailableMessage roomId={room.roomId} actionLabel="Answer in browser" />
|
||||
)}
|
||||
<Box direction="Column" gap="300">
|
||||
{willAnswerWithCamera && (
|
||||
@@ -882,6 +877,7 @@ export function CallEmbedProvider({ children }: CallEmbedProviderProps) {
|
||||
const callActive = callEmbed && joined;
|
||||
const callVisible = inCallRoom && callActive && !chatOnlyView;
|
||||
const pipMode = callActive && !inCallRoom;
|
||||
const pipPromptOpen = useScreensharePromptOpen(callEmbed?.control);
|
||||
const { navigateRoom } = useRoomNavigate();
|
||||
|
||||
const { screenshare: pipScreenshare } = useCallControlState(callEmbed?.control);
|
||||
@@ -1363,6 +1359,9 @@ export function CallEmbedProvider({ children }: CallEmbedProviderProps) {
|
||||
zIndex: 1,
|
||||
background: 'transparent',
|
||||
cursor: 'grab',
|
||||
// [Gitea #43] The call's "Share your screen?" prompt is drawn
|
||||
// inside the frame: let the click reach its Share button.
|
||||
pointerEvents: pipPromptOpen ? 'none' : undefined,
|
||||
display: 'flex',
|
||||
alignItems: 'flex-start',
|
||||
justifyContent: 'flex-end',
|
||||
|
||||
@@ -261,52 +261,69 @@ export function PollContent({
|
||||
handleVote(answers[idx].id);
|
||||
};
|
||||
|
||||
const headerLabel = isEnded
|
||||
? 'Poll closed · Final results'
|
||||
: `Poll · ${isMultiple ? 'Multiple choice' : 'Single choice'}`;
|
||||
// [Gitea #246] Type line under the "Poll" label.
|
||||
const typeLabel = (() => {
|
||||
if (isEnded) return 'Final results';
|
||||
if (isUndisclosed) return 'Results hidden until the end';
|
||||
return isMultiple ? `Pick up to ${maxSelections}` : 'Single choice';
|
||||
})();
|
||||
|
||||
// Multiple choice counts people, not answers ("1 voter" who picked two).
|
||||
const unit = isMultiple ? 'voter' : 'vote';
|
||||
const footerNote = (() => {
|
||||
const totalPart = total > 0 ? `${total} ${unit}${total === 1 ? '' : 's'}` : `No ${unit}s yet`;
|
||||
if (isUndisclosed && !isEnded) {
|
||||
return canVote
|
||||
? 'Voting open · Results hidden until the poll ends'
|
||||
: 'Results hidden until the poll ends';
|
||||
? `${myVotes.size > 0 ? 'You voted' : 'Voting open'} · results shown when the poll ends`
|
||||
: 'Results shown when the poll ends';
|
||||
}
|
||||
const votesPart = total > 0 ? `${total} vote${total === 1 ? '' : 's'}` : 'No votes yet';
|
||||
if (isEnded) return `${votesPart} · Poll closed`;
|
||||
if (!canVote) return votesPart;
|
||||
if (isMultiple) return `${votesPart} · Select up to ${maxSelections}`;
|
||||
return `${votesPart} · ${myVotes.size > 0 ? 'Click to change' : 'Click to vote'}`;
|
||||
if (isEnded) return `${totalPart} · Poll closed`;
|
||||
if (!canVote) return totalPart;
|
||||
return `${totalPart} · ${myVotes.size > 0 ? 'Select another answer to change your vote' : 'Select an answer to vote'}`;
|
||||
})();
|
||||
|
||||
// Neutral tones derived from the theme's text colour, so they have contrast
|
||||
// in every theme (the Container/ContainerLine tokens were near-invisible).
|
||||
const muted = (pct: number) =>
|
||||
`color-mix(in srgb, ${color.SurfaceVariant.OnContainer} ${pct}%, transparent)`;
|
||||
|
||||
return (
|
||||
<Box
|
||||
data-poll-content
|
||||
direction="Column"
|
||||
gap="200"
|
||||
style={{ maxWidth: '340px', paddingTop: '2px', paddingBottom: '4px' }}
|
||||
gap="300"
|
||||
style={{
|
||||
// Same width for every poll (the message body shrink-wraps its content).
|
||||
width: toRem(460),
|
||||
maxWidth: '100%',
|
||||
margin: `${config.space.S100} 0`,
|
||||
padding: config.space.S300,
|
||||
borderRadius: config.radii.R400,
|
||||
border: `${config.borderWidth.B300} solid ${muted(18)}`,
|
||||
background: muted(4),
|
||||
boxSizing: 'border-box',
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
as="div"
|
||||
size="T200"
|
||||
priority="300"
|
||||
data-poll-content-label
|
||||
style={{
|
||||
fontWeight: 700,
|
||||
letterSpacing: '0.12em',
|
||||
textTransform: 'uppercase',
|
||||
marginBottom: config.space.S100,
|
||||
}}
|
||||
>
|
||||
<span aria-hidden>◉ </span>
|
||||
{headerLabel}
|
||||
</Text>
|
||||
<Text size="T400" style={{ fontWeight: 600 }}>
|
||||
{question}
|
||||
</Text>
|
||||
<Box direction="Column" gap="100">
|
||||
<Box alignItems="Center" gap="200" wrap="Wrap" data-poll-content-label>
|
||||
<Icon size="100" src={Icons.OrderList} style={{ opacity: 0.8 }} />
|
||||
<Text as="span" size="L400" style={{ fontWeight: 600 }}>
|
||||
Poll
|
||||
</Text>
|
||||
<Text as="span" size="T200" priority="300">
|
||||
·
|
||||
</Text>
|
||||
<Text as="span" size="T200" priority="300">
|
||||
{typeLabel}
|
||||
</Text>
|
||||
</Box>
|
||||
<Text size="T400" style={{ fontWeight: 600, overflowWrap: 'anywhere' }}>
|
||||
{question}
|
||||
</Text>
|
||||
</Box>
|
||||
<Box
|
||||
direction="Column"
|
||||
gap="100"
|
||||
style={{ marginTop: '2px' }}
|
||||
gap="200"
|
||||
role={isMultiple ? 'group' : 'radiogroup'}
|
||||
aria-label={question}
|
||||
onKeyDown={handleRadioKeyDown}
|
||||
@@ -316,20 +333,32 @@ export function PollContent({
|
||||
const text = answer.text;
|
||||
const selected = myVotes.has(id);
|
||||
const voteCount = counts.get(id) ?? 0;
|
||||
const pct = showResults && total > 0 ? Math.round((voteCount / total) * 100) : 0;
|
||||
const showBar = showResults && total > 0;
|
||||
const pct = showBar ? Math.round((voteCount / total) * 100) : 0;
|
||||
const isWinner = winners.has(id);
|
||||
const resultText = `${voteCount} ${voteCount === 1 ? 'vote' : 'votes'} · ${pct}%`;
|
||||
// Roving tabindex for the single-choice radiogroup; checkboxes stay tabbable.
|
||||
const tabIndex = isMultiple ? 0 : selected || (myVotes.size === 0 && i === 0) ? 0 : -1;
|
||||
let barColor = muted(40);
|
||||
if (isWinner) barColor = color.Success.Main;
|
||||
else if (selected) barColor = color.Primary.Main;
|
||||
let rowBorder = muted(22);
|
||||
if (isWinner) rowBorder = color.Success.Main;
|
||||
else if (selected) rowBorder = color.Primary.Main;
|
||||
const labelParts = [text];
|
||||
if (showBar) labelParts.push(resultText);
|
||||
if (isWinner) labelParts.push('winning answer');
|
||||
return (
|
||||
<React.Fragment key={id}>
|
||||
<button
|
||||
type="button"
|
||||
data-poll-answer
|
||||
data-selected={selected}
|
||||
data-winner={isWinner || undefined}
|
||||
role={isMultiple ? 'checkbox' : 'radio'}
|
||||
aria-checked={selected}
|
||||
aria-disabled={!canVote}
|
||||
aria-label={isWinner ? `${text}, winning answer` : undefined}
|
||||
aria-label={labelParts.join(', ')}
|
||||
aria-describedby={
|
||||
showVoters && canShowVoters && (voters.get(id)?.length ?? 0) > 0
|
||||
? `poll-voters-${eventId}-${id}`
|
||||
@@ -340,60 +369,36 @@ export function PollContent({
|
||||
style={{
|
||||
padding: `${config.space.S200} ${config.space.S300}`,
|
||||
borderRadius: config.radii.R300,
|
||||
background: selected ? color.Primary.Container : color.SurfaceVariant.Container,
|
||||
border: `${config.borderWidth.B300} solid ${
|
||||
isWinner
|
||||
? color.Success.Main
|
||||
: selected
|
||||
? color.Primary.Main
|
||||
: color.SurfaceVariant.ContainerLine
|
||||
}`,
|
||||
background: selected ? muted(8) : 'transparent',
|
||||
border: `${config.borderWidth.B300} solid ${rowBorder}`,
|
||||
lineHeight: 1.4,
|
||||
textAlign: 'left',
|
||||
cursor: canVote ? 'pointer' : 'default',
|
||||
color: 'inherit',
|
||||
font: 'inherit',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: config.space.S100,
|
||||
gap: config.space.S200,
|
||||
width: '100%',
|
||||
position: 'relative',
|
||||
overflow: 'hidden',
|
||||
transition: 'border-color 0.15s, background 0.15s',
|
||||
}}
|
||||
>
|
||||
{showResults && total > 0 && (
|
||||
<span
|
||||
aria-hidden
|
||||
style={{
|
||||
position: 'absolute',
|
||||
inset: 0,
|
||||
right: 'auto',
|
||||
width: `${pct}%`,
|
||||
background: selected
|
||||
? color.Primary.ContainerActive
|
||||
: color.SurfaceVariant.ContainerActive,
|
||||
pointerEvents: 'none',
|
||||
transition: 'width 0.3s ease',
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
<span
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: config.space.S200,
|
||||
position: 'relative',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<span
|
||||
aria-hidden
|
||||
style={{
|
||||
flexShrink: 0,
|
||||
width: toRem(14),
|
||||
height: toRem(14),
|
||||
border: `${config.borderWidth.B300} solid ${
|
||||
selected ? color.Primary.Main : color.Primary.ContainerLine
|
||||
}`,
|
||||
boxSizing: 'border-box',
|
||||
width: toRem(18),
|
||||
height: toRem(18),
|
||||
border: `2px solid ${selected ? color.Primary.Main : muted(55)}`,
|
||||
borderRadius: isMultiple ? config.radii.R300 : config.radii.Pill,
|
||||
background: selected ? color.Primary.Main : 'transparent',
|
||||
display: 'flex',
|
||||
@@ -405,29 +410,72 @@ export function PollContent({
|
||||
>
|
||||
{selected ? <Icon size="50" src={Icons.Check} /> : null}
|
||||
</span>
|
||||
<Text as="span" size="T300" style={{ flexGrow: 1 }}>
|
||||
<Text
|
||||
as="span"
|
||||
size="T300"
|
||||
style={{ flexGrow: 1, minWidth: 0, overflowWrap: 'anywhere' }}
|
||||
>
|
||||
{text}
|
||||
</Text>
|
||||
{isWinner && (
|
||||
<Icon
|
||||
size="50"
|
||||
src={Icons.Check}
|
||||
style={{ flexShrink: 0, color: color.Success.Main }}
|
||||
/>
|
||||
<Text
|
||||
as="span"
|
||||
size="T200"
|
||||
style={{
|
||||
flexShrink: 0,
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
gap: config.space.S100,
|
||||
color: color.Success.Main,
|
||||
fontWeight: 600,
|
||||
}}
|
||||
>
|
||||
<Icon size="50" src={Icons.Star} filled />
|
||||
Winner
|
||||
</Text>
|
||||
)}
|
||||
{showResults && total > 0 && (
|
||||
<Text as="span" size="T200" priority="300" style={{ flexShrink: 0 }}>
|
||||
{pct}%
|
||||
{showBar && (
|
||||
<Text
|
||||
as="span"
|
||||
size="T200"
|
||||
priority="300"
|
||||
style={{ flexShrink: 0, fontVariantNumeric: 'tabular-nums' }}
|
||||
>
|
||||
{resultText}
|
||||
</Text>
|
||||
)}
|
||||
</span>
|
||||
{showBar && (
|
||||
<span
|
||||
aria-hidden
|
||||
style={{
|
||||
display: 'block',
|
||||
width: '100%',
|
||||
height: toRem(6),
|
||||
borderRadius: config.radii.Pill,
|
||||
background: muted(12),
|
||||
overflow: 'hidden',
|
||||
}}
|
||||
>
|
||||
<span
|
||||
style={{
|
||||
display: 'block',
|
||||
height: '100%',
|
||||
width: `${pct}%`,
|
||||
borderRadius: config.radii.Pill,
|
||||
background: barColor,
|
||||
transition: 'width 0.3s ease',
|
||||
}}
|
||||
/>
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
{showVoters && canShowVoters && (voters.get(id)?.length ?? 0) > 0 && (
|
||||
<Text
|
||||
id={`poll-voters-${eventId}-${id}`}
|
||||
size="T200"
|
||||
priority="300"
|
||||
style={{ padding: `0 ${config.space.S300} ${config.space.S100}` }}
|
||||
style={{ padding: `0 ${config.space.S300}`, marginTop: `-${config.space.S100}` }}
|
||||
>
|
||||
{`Voted by ${(voters.get(id) ?? []).map((s) => getMemberName(room, s)).join(', ')}`}
|
||||
</Text>
|
||||
@@ -436,48 +484,56 @@ export function PollContent({
|
||||
);
|
||||
})}
|
||||
</Box>
|
||||
{canShowVoters && (
|
||||
<Box>
|
||||
<Chip
|
||||
variant={showVoters ? 'Primary' : 'SurfaceVariant'}
|
||||
radii="Pill"
|
||||
aria-pressed={showVoters}
|
||||
onClick={() => setShowVoters((v) => !v)}
|
||||
before={<Icon size="50" src={Icons.User} />}
|
||||
>
|
||||
<Text size="T200">{showVoters ? 'Hide voters' : 'Show who voted'}</Text>
|
||||
</Chip>
|
||||
</Box>
|
||||
)}
|
||||
<Box alignItems="Center" justifyContent="SpaceBetween" gap="200">
|
||||
<Text size="T200" priority="300" style={{ minWidth: 0 }}>
|
||||
<i>{footerNote}</i>
|
||||
<Box alignItems="Center" justifyContent="SpaceBetween" gap="200" wrap="Wrap">
|
||||
<Text size="T200" priority="300" style={{ minWidth: 0, flex: '1 1 12rem' }}>
|
||||
{footerNote}
|
||||
</Text>
|
||||
{canEnd &&
|
||||
(confirmEnd ? (
|
||||
<Box gap="100" shrink="No" alignItems="Center">
|
||||
<Chip
|
||||
variant="Critical"
|
||||
radii="Pill"
|
||||
aria-disabled={ending}
|
||||
onClick={ending ? undefined : handleEndPoll}
|
||||
>
|
||||
<Text size="T200">{ending ? 'Ending…' : 'End poll'}</Text>
|
||||
</Chip>
|
||||
<Chip variant="Secondary" radii="Pill" onClick={() => setConfirmEnd(false)}>
|
||||
<Text size="T200">Cancel</Text>
|
||||
</Chip>
|
||||
</Box>
|
||||
) : (
|
||||
<Box gap="100" shrink="No" alignItems="Center" wrap="Wrap">
|
||||
{canShowVoters && (
|
||||
<Chip
|
||||
variant="SurfaceVariant"
|
||||
variant={showVoters ? 'Primary' : 'SurfaceVariant'}
|
||||
radii="Pill"
|
||||
onClick={() => setConfirmEnd(true)}
|
||||
before={<Icon size="50" src={Icons.Cross} />}
|
||||
aria-pressed={showVoters}
|
||||
onClick={() => setShowVoters((v) => !v)}
|
||||
before={<Icon size="50" src={Icons.User} />}
|
||||
>
|
||||
<Text size="T200">End poll</Text>
|
||||
<Text size="T200" style={{ whiteSpace: 'nowrap' }}>
|
||||
{showVoters ? 'Hide voters' : 'Who voted'}
|
||||
</Text>
|
||||
</Chip>
|
||||
))}
|
||||
)}
|
||||
{canEnd &&
|
||||
(confirmEnd ? (
|
||||
<>
|
||||
<Chip
|
||||
variant="Critical"
|
||||
radii="Pill"
|
||||
aria-disabled={ending}
|
||||
onClick={ending ? undefined : handleEndPoll}
|
||||
>
|
||||
<Text size="T200" style={{ whiteSpace: 'nowrap' }}>
|
||||
{ending ? 'Ending…' : 'End poll'}
|
||||
</Text>
|
||||
</Chip>
|
||||
<Chip variant="Secondary" radii="Pill" onClick={() => setConfirmEnd(false)}>
|
||||
<Text size="T200" style={{ whiteSpace: 'nowrap' }}>
|
||||
Cancel
|
||||
</Text>
|
||||
</Chip>
|
||||
</>
|
||||
) : (
|
||||
<Chip
|
||||
variant="SurfaceVariant"
|
||||
radii="Pill"
|
||||
onClick={() => setConfirmEnd(true)}
|
||||
before={<Icon size="50" src={Icons.Cross} />}
|
||||
>
|
||||
<Text size="T200" style={{ whiteSpace: 'nowrap' }}>
|
||||
End poll
|
||||
</Text>
|
||||
</Chip>
|
||||
))}
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
|
||||
@@ -7,7 +7,7 @@ import {
|
||||
CallEmbed,
|
||||
useCallControlState,
|
||||
useCallMicLevel,
|
||||
useFrameScreenshare,
|
||||
useScreenshareMode,
|
||||
} from '../../plugins/call';
|
||||
import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
|
||||
import { callEmbedAtom } from '../../state/callEmbed';
|
||||
@@ -197,10 +197,16 @@ export function CallControl({
|
||||
// Keep a forbidden control visible while its track is still live (so the user
|
||||
// can stop it); otherwise hide it entirely.
|
||||
const showCamera = allowCamera || video;
|
||||
// [Gitea #43] Hidden where EC shows its own screenshare button in the frame.
|
||||
const frameScreenshare = useFrameScreenshare(callEmbed.control);
|
||||
const showScreenshare = !frameScreenshare && (allowScreenshare || screenshare);
|
||||
// [Gitea #43] Hidden where EC shows its own screenshare button in the frame;
|
||||
// where the click can't be delegated, starting asks for the in-frame prompt.
|
||||
const screenshareMode = useScreenshareMode(callEmbed.control);
|
||||
const showScreenshare = screenshareMode !== 'hidden' && (allowScreenshare || screenshare);
|
||||
const [shareConfirm, setShareConfirm] = useState(false);
|
||||
const handleScreenshareToggle = () => {
|
||||
if (screenshare) callEmbed.control.toggleScreenshare();
|
||||
else if (screenshareMode === 'prompt') callEmbed.control.promptScreenshare();
|
||||
else setShareConfirm(true);
|
||||
};
|
||||
|
||||
const handleMicrophoneToggle = useCallback(
|
||||
() => callEmbed.control.toggleMicrophone(),
|
||||
@@ -255,9 +261,7 @@ export function CallControl({
|
||||
{!compact && showScreenshare && (
|
||||
<ScreenShareButton
|
||||
enabled={screenshare}
|
||||
onToggle={() =>
|
||||
screenshare ? callEmbed.control.toggleScreenshare() : setShareConfirm(true)
|
||||
}
|
||||
onToggle={() => handleScreenshareToggle()}
|
||||
disabled={!callJoined}
|
||||
/>
|
||||
)}
|
||||
|
||||
@@ -33,7 +33,7 @@ import {
|
||||
CallEmbed,
|
||||
useCallControlState,
|
||||
useCallMicLevel,
|
||||
useFrameScreenshare,
|
||||
useScreenshareMode,
|
||||
} from '../../plugins/call';
|
||||
import { useSetting } from '../../state/hooks/settings';
|
||||
import { settingsAtom } from '../../state/settings';
|
||||
@@ -112,9 +112,14 @@ export function CallControls({ callEmbed }: CallControlsProps) {
|
||||
// can stop it); otherwise hide it entirely.
|
||||
const showCamera = allowCamera || video;
|
||||
// [Gitea #43] Where EC shows its own screenshare button in the frame, ours
|
||||
// is hidden (this engine can't start a share from the host); the
|
||||
// screenshare-audio mute stays.
|
||||
const frameScreenshare = useFrameScreenshare(callEmbed.control);
|
||||
// is hidden (the screenshare-audio mute stays); where the click can't be
|
||||
// delegated, starting asks for the fork's in-frame "Share your screen?".
|
||||
const screenshareMode = useScreenshareMode(callEmbed.control);
|
||||
const handleScreenshareToggle = () => {
|
||||
if (screenshare) callEmbed.control.toggleScreenshare();
|
||||
else if (screenshareMode === 'prompt') callEmbed.control.promptScreenshare();
|
||||
else setShareConfirm(true);
|
||||
};
|
||||
const showScreenshare = allowScreenshare || screenshare;
|
||||
const showVideoGroup = showCamera || showScreenshare || !!document.fullscreenEnabled;
|
||||
const handleOpenMenu: MouseEventHandler<HTMLButtonElement> = (evt) => {
|
||||
@@ -225,12 +230,10 @@ export function CallControls({ callEmbed }: CallControlsProps) {
|
||||
{showCamera && <VideoButton enabled={video} onToggle={handleVideoToggle} />}
|
||||
{showScreenshare && (
|
||||
<>
|
||||
{!frameScreenshare && (
|
||||
{screenshareMode !== 'hidden' && (
|
||||
<ScreenShareButton
|
||||
enabled={screenshare}
|
||||
onToggle={() =>
|
||||
screenshare ? callEmbed.control.toggleScreenshare() : setShareConfirm(true)
|
||||
}
|
||||
onToggle={() => handleScreenshareToggle()}
|
||||
/>
|
||||
)}
|
||||
{/* Mute-screenshare-audio sits directly next to the screenshare
|
||||
|
||||
@@ -115,7 +115,12 @@ export function CallSoundboard({ callEmbed }: CallSoundboardProps) {
|
||||
try {
|
||||
const url = await resolveClipObjectUrl(mx, flat.clip.url);
|
||||
const vol = (flat.clip.volume / 100) * master;
|
||||
const result = await callEmbed.control.injectAudio(url, vol);
|
||||
// [Gitea #43] Send the bytes too: the call page may be on another
|
||||
// origin, where this blob: URL can't be fetched.
|
||||
const clipBytes = await fetch(url)
|
||||
.then((r) => r.arrayBuffer())
|
||||
.catch(() => undefined);
|
||||
const result = await callEmbed.control.injectAudio(url, vol, clipBytes);
|
||||
if (!result.played) {
|
||||
// [EC#13] Refused fork-side (only reason today: local mic muted) —
|
||||
// don't play it locally either, or the user would think it went out.
|
||||
|
||||
@@ -23,6 +23,7 @@ import { CallMemberRenderer } from './CallMemberCard';
|
||||
import * as css from './styles.css';
|
||||
import { CallControls } from './CallControls';
|
||||
import { useLivekitSupport } from '../../hooks/useLivekitSupport';
|
||||
import { CallsUnavailableMessage } from './CallsUnavailable';
|
||||
import { webRTCSupported } from '../../utils/rtc';
|
||||
|
||||
function LivekitServerMissingMessage() {
|
||||
@@ -33,25 +34,19 @@ function LivekitServerMissingMessage() {
|
||||
);
|
||||
}
|
||||
|
||||
function WebRTCMissingError() {
|
||||
return (
|
||||
<Text style={{ margin: 'auto', color: color.Critical.Main }} size="L400" align="Center">
|
||||
Your browser does not support WebRTC, which is required for calling.
|
||||
</Text>
|
||||
);
|
||||
}
|
||||
|
||||
function JoinMessage({
|
||||
roomId,
|
||||
hasParticipant,
|
||||
livekitSupported,
|
||||
rtcSupported,
|
||||
}: {
|
||||
roomId: string;
|
||||
hasParticipant?: boolean;
|
||||
livekitSupported?: boolean;
|
||||
rtcSupported?: boolean;
|
||||
}) {
|
||||
if (rtcSupported === false) {
|
||||
return <WebRTCMissingError />;
|
||||
return <CallsUnavailableMessage roomId={roomId} />;
|
||||
}
|
||||
|
||||
if (livekitSupported === false) {
|
||||
@@ -144,6 +139,7 @@ function CallPrescreen() {
|
||||
)}
|
||||
{!inOtherCall && hasPermission && !channelFull && (
|
||||
<JoinMessage
|
||||
roomId={room.roomId}
|
||||
hasParticipant={hasParticipant}
|
||||
livekitSupported={livekitSupported}
|
||||
rtcSupported={rtcSupported}
|
||||
|
||||
@@ -0,0 +1,76 @@
|
||||
import React, { useMemo } from 'react';
|
||||
import { Box, Button, Icon, Icons, Text, color } from 'folds';
|
||||
import { useClientConfig } from '../../hooks/useClientConfig';
|
||||
import { isTauri } from '../../hooks/useTauri';
|
||||
import { webRTCSupported } from '../../utils/rtc';
|
||||
import { getCallInBrowserUrl, resolveWebAppUrl } from '../../utils/callInBrowser';
|
||||
|
||||
/**
|
||||
* [cinny-desktop: Linux calls] The desktop app on Linux runs on WebKitGTK,
|
||||
* which ships without WebRTC (disabled in 2.54; a libwebrtc backend is due
|
||||
* around 2.56). Where calls can't work here, send the user to the room in the
|
||||
* web app instead of a dead end. Only in the desktop app, and only when
|
||||
* config.json sets `webAppUrl`.
|
||||
*/
|
||||
export const useCallInBrowserUrl = (roomId: string): string | undefined => {
|
||||
const { webAppUrl } = useClientConfig();
|
||||
return useMemo(
|
||||
() =>
|
||||
isTauri() && !webRTCSupported()
|
||||
? getCallInBrowserUrl(resolveWebAppUrl(webAppUrl), roomId)
|
||||
: undefined,
|
||||
[webAppUrl, roomId],
|
||||
);
|
||||
};
|
||||
|
||||
/** Opens through the desktop's new-window handler → the system browser. */
|
||||
export const openCallInBrowser = (url: string): void => {
|
||||
window.open(url, '_blank', 'noopener,noreferrer');
|
||||
};
|
||||
|
||||
const desktopUnavailableText = (): string =>
|
||||
typeof navigator !== 'undefined' && /Linux/i.test(navigator.userAgent)
|
||||
? 'Calls aren’t available in the desktop app on Linux yet: its web engine has no WebRTC.'
|
||||
: 'Calls aren’t available in this desktop app: its web engine has no WebRTC.';
|
||||
|
||||
type CallsUnavailableMessageProps = {
|
||||
roomId: string;
|
||||
/** Button label, e.g. "Answer in browser" for an incoming call. */
|
||||
actionLabel?: string;
|
||||
};
|
||||
|
||||
export function CallsUnavailableMessage({
|
||||
roomId,
|
||||
actionLabel = 'Open in browser',
|
||||
}: CallsUnavailableMessageProps) {
|
||||
const url = useCallInBrowserUrl(roomId);
|
||||
|
||||
if (!isTauri()) {
|
||||
return (
|
||||
<Text style={{ margin: 'auto', color: color.Critical.Main }} size="L400" align="Center">
|
||||
Your browser does not support WebRTC, which is required for calling.
|
||||
</Text>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Box direction="Column" alignItems="Center" gap="200" style={{ margin: 'auto' }}>
|
||||
<Text style={{ color: color.Warning.Main }} size="L400" align="Center">
|
||||
{desktopUnavailableText()}
|
||||
{url ? ' You can join from the web app in your browser.' : ''}
|
||||
</Text>
|
||||
{url && (
|
||||
<Button
|
||||
size="300"
|
||||
variant="Secondary"
|
||||
fill="Soft"
|
||||
radii="300"
|
||||
before={<Icon size="100" src={Icons.External} />}
|
||||
onClick={() => openCallInBrowser(url)}
|
||||
>
|
||||
<Text size="B300">{actionLabel}</Text>
|
||||
</Button>
|
||||
)}
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
@@ -80,6 +80,7 @@ import { widgetsPanelAtom } from '../../state/widgetsPanel';
|
||||
import { mobileMembersPanelAtom } from '../../state/mobileMembersPanel';
|
||||
import { threadsListAtom } from '../../state/threadsList';
|
||||
import { usePendingKnocks } from '../../hooks/usePendingKnocks';
|
||||
import { openCallInBrowser, useCallInBrowserUrl } from '../call/CallsUnavailable';
|
||||
import { bookmarksPanelAtom } from '../../state/bookmarksPanel';
|
||||
|
||||
type RoomMenuProps = {
|
||||
@@ -465,6 +466,36 @@ function CallRulesChip({ room }: { room: Room }) {
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* [cinny-desktop: Linux calls] Stand-in for CallButton where this app can't
|
||||
* make calls (desktop on WebKitGTK): opens the room in the web app instead.
|
||||
*/
|
||||
function CallInBrowserButton({ url }: { url: string }) {
|
||||
return (
|
||||
<TooltipProvider
|
||||
position="Bottom"
|
||||
offset={4}
|
||||
tooltip={
|
||||
<Tooltip>
|
||||
<Text>Call in your browser (this desktop app can’t make calls here)</Text>
|
||||
</Tooltip>
|
||||
}
|
||||
>
|
||||
{(triggerRef) => (
|
||||
<IconButton
|
||||
variant="Surface"
|
||||
fill="None"
|
||||
ref={triggerRef}
|
||||
aria-label="Start call in browser"
|
||||
onClick={() => openCallInBrowser(url)}
|
||||
>
|
||||
<Icon size="400" src={Icons.VideoCamera} />
|
||||
</IconButton>
|
||||
)}
|
||||
</TooltipProvider>
|
||||
);
|
||||
}
|
||||
|
||||
function CallButton() {
|
||||
const room = useRoom();
|
||||
const direct = useIsDirectRoom();
|
||||
@@ -555,6 +586,7 @@ export function RoomViewHeader({ callView }: { callView?: boolean }) {
|
||||
);
|
||||
const livekitSupported = useLivekitSupport();
|
||||
const rtcSupported = webRTCSupported();
|
||||
const callInBrowserUrl = useCallInBrowserUrl(room.roomId);
|
||||
|
||||
const [menuAnchor, setMenuAnchor] = useState<RectCords>();
|
||||
const [pinMenuAnchor, setPinMenuAnchor] = useState<RectCords>();
|
||||
@@ -782,11 +814,16 @@ export function RoomViewHeader({ callView }: { callView?: boolean }) {
|
||||
{screenSize === ScreenSize.Desktop && <CallRulesChip room={room} />}
|
||||
{!room.isCallRoom() &&
|
||||
livekitSupported &&
|
||||
rtcSupported &&
|
||||
(rtcSupported || callInBrowserUrl) &&
|
||||
hasCallPermission &&
|
||||
(direct ||
|
||||
(room.getJoinRule() === 'invite' &&
|
||||
getStateEvents(room, StateEvent.SpaceParent).length === 0)) && <CallButton />}
|
||||
getStateEvents(room, StateEvent.SpaceParent).length === 0)) &&
|
||||
(rtcSupported ? (
|
||||
<CallButton />
|
||||
) : (
|
||||
callInBrowserUrl && <CallInBrowserButton url={callInBrowserUrl} />
|
||||
))}
|
||||
{screenSize === ScreenSize.Desktop && (
|
||||
<TooltipProvider
|
||||
position="Bottom"
|
||||
|
||||
@@ -83,8 +83,6 @@ import { copyToClipboard } from '../../../utils/dom';
|
||||
import { stopPropagation } from '../../../utils/keyboard';
|
||||
import { getMatrixToRoomEvent } from '../../../plugins/matrix-to';
|
||||
import { getLotusRoomPermalink } from '../../../plugins/lotus-permalink';
|
||||
import { getOriginBaseUrl } from '../../../pages/pathUtils';
|
||||
import { useClientConfig } from '../../../hooks/useClientConfig';
|
||||
import { getViaServers } from '../../../plugins/via-servers';
|
||||
import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
|
||||
import { useRoomPinnedEvents } from '../../../hooks/useRoomPinnedEvents';
|
||||
@@ -98,6 +96,7 @@ import { useLongPress } from '../../../hooks/useLongPress';
|
||||
import { ActionSheet } from '../../../components/action-sheet';
|
||||
import { useBookmarks } from '../../../hooks/useBookmarks';
|
||||
import { PresenceRingAvatar } from '../../../components/presence';
|
||||
import { useLotusShareBase } from '../../../hooks/useLotusLinkBase';
|
||||
import { AvatarDecoration } from '../../../components/avatar-decoration/AvatarDecoration';
|
||||
|
||||
// Delivery status indicator for own messages
|
||||
@@ -460,18 +459,11 @@ export const MessageCopyLotusLinkItem = as<
|
||||
onClose?: () => void;
|
||||
}
|
||||
>(({ room, mEvent, onClose, ...props }, ref) => {
|
||||
const { hashRouter } = useClientConfig();
|
||||
const lotusBase = useLotusShareBase();
|
||||
const handleCopy = () => {
|
||||
const eventId = mEvent.getId();
|
||||
if (!eventId) return;
|
||||
copyToClipboard(
|
||||
getLotusRoomPermalink(
|
||||
getOriginBaseUrl(hashRouter),
|
||||
room.roomId,
|
||||
eventId,
|
||||
getViaServers(room),
|
||||
),
|
||||
);
|
||||
copyToClipboard(getLotusRoomPermalink(lotusBase, room.roomId, eventId, getViaServers(room)));
|
||||
onClose?.();
|
||||
};
|
||||
|
||||
|
||||
@@ -12,6 +12,7 @@ import { Capability, ClientWidgetApi, IRoomEvent, Widget } from 'matrix-widget-a
|
||||
import { useMatrixClient } from '../../../hooks/useMatrixClient';
|
||||
import { GeneralWidgetDriver } from './GeneralWidgetDriver';
|
||||
import { WidgetPermissionRequest, isWidgetUrlSafe } from './widgetUtils';
|
||||
import { restrictWidgetMessages } from '../../../plugins/widgetTransport';
|
||||
import { WidgetPermissionPrompt } from './WidgetPermissionPrompt';
|
||||
|
||||
type PendingAsk = {
|
||||
@@ -96,6 +97,9 @@ export function RoomWidgetView({ room, widget }: RoomWidgetViewProps) {
|
||||
}),
|
||||
);
|
||||
const clientApi = new ClientWidgetApi(current, iframe, driver);
|
||||
// Only messages from this widget's own frame and origin are handled, so a
|
||||
// widget can't impersonate another one (or the call).
|
||||
restrictWidgetMessages(clientApi, iframe, current.origin);
|
||||
clientApi.setViewedRoomId(room.roomId);
|
||||
|
||||
// Live room events for widgets that were allowed to see them
|
||||
|
||||
@@ -19,6 +19,18 @@ export type ClientConfig = {
|
||||
|
||||
hashRouter?: HashRouterConfig;
|
||||
gifApiKey?: string;
|
||||
|
||||
/**
|
||||
* [Gitea #43] Absolute https URL of the Element Call page on its own origin.
|
||||
* Unset: the bundled copy on this origin. Ignored in the desktop app.
|
||||
*/
|
||||
elementCallUrl?: string;
|
||||
|
||||
/**
|
||||
* Absolute https URL of the public web app (e.g. https://chat.lotusguild.org).
|
||||
* The desktop app sets it so it can hand calls it can't make to the browser.
|
||||
*/
|
||||
webAppUrl?: string;
|
||||
};
|
||||
|
||||
const ClientConfigContext = createContext<ClientConfig | null>(null);
|
||||
|
||||
@@ -0,0 +1,23 @@
|
||||
import { test } from 'node:test';
|
||||
import assert from 'node:assert/strict';
|
||||
import { lotusLinkBases, lotusShareBase } from './useLotusLinkBase';
|
||||
|
||||
const LOCAL = 'http://localhost:44548/#/';
|
||||
const WEB = 'https://chat.lotusguild.org';
|
||||
|
||||
test('web: shared links use the page origin', () => {
|
||||
assert.equal(lotusShareBase(WEB, false, WEB), WEB);
|
||||
assert.deepEqual(lotusLinkBases(WEB, false, undefined), [WEB]);
|
||||
});
|
||||
|
||||
test('desktop with webAppUrl: shared links use the public web app', () => {
|
||||
assert.equal(lotusShareBase(LOCAL, true, `${WEB}/`), WEB);
|
||||
assert.deepEqual(lotusLinkBases(LOCAL, true, WEB), [LOCAL, WEB]);
|
||||
});
|
||||
|
||||
test('desktop without a valid webAppUrl falls back to the origin', () => {
|
||||
[undefined, '', 'http://chat.lotusguild.org', 'nonsense'].forEach((v) => {
|
||||
assert.equal(lotusShareBase(LOCAL, true, v), LOCAL, String(v));
|
||||
assert.deepEqual(lotusLinkBases(LOCAL, true, v), [LOCAL]);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,37 @@
|
||||
import { useMemo } from 'react';
|
||||
import { useClientConfig } from './useClientConfig';
|
||||
import { isTauri } from './useTauri';
|
||||
import { getOriginBaseUrl } from '../pages/pathUtils';
|
||||
import { resolveWebAppUrl } from '../utils/callInBrowser';
|
||||
|
||||
/**
|
||||
* [Gitea #248] Base URL for Lotus links meant for other people.
|
||||
*
|
||||
* On the web that's this page's origin. In the desktop app the page is served
|
||||
* from a local address (and hash-routed), which nobody else can open, so use
|
||||
* the public web app from config `webAppUrl` (web path routing) instead.
|
||||
* Without a valid `webAppUrl` it falls back to the origin, as before.
|
||||
*/
|
||||
export const lotusShareBase = (originBase: string, desktop: boolean, webAppUrl: unknown): string =>
|
||||
(desktop && resolveWebAppUrl(webAppUrl)) || originBase;
|
||||
|
||||
/**
|
||||
* Every base a Lotus link to this deployment may start with: the origin, plus
|
||||
* the public web app in the desktop app, so a shared https link opens in-app.
|
||||
*/
|
||||
export const lotusLinkBases = (
|
||||
originBase: string,
|
||||
desktop: boolean,
|
||||
webAppUrl: unknown,
|
||||
): string[] => {
|
||||
const shared = lotusShareBase(originBase, desktop, webAppUrl);
|
||||
return shared === originBase ? [originBase] : [originBase, shared];
|
||||
};
|
||||
|
||||
export const useLotusShareBase = (): string => {
|
||||
const { hashRouter, webAppUrl } = useClientConfig();
|
||||
return useMemo(
|
||||
() => lotusShareBase(getOriginBaseUrl(hashRouter), isTauri(), webAppUrl),
|
||||
[hashRouter, webAppUrl],
|
||||
);
|
||||
};
|
||||
+22
-17
@@ -36,6 +36,7 @@ import { applyCustomAccent, removeCustomAccent } from '../utils/accentColor';
|
||||
import { zIndices } from '../styles/zIndex';
|
||||
import { OIDC_CALLBACK_PATH } from './paths';
|
||||
import { OidcCallback } from './auth/oidc/OidcCallback';
|
||||
import { resolveCallPageUrl, setCallPageUrl } from '../plugins/call/callPageUrl';
|
||||
|
||||
// The emoji families (Twemoji when "Twitter emoji" is on, Twemoji flags on
|
||||
// Windows — see SystemEmojiFeature) must sit before the generic family, or the
|
||||
@@ -220,23 +221,27 @@ function App() {
|
||||
<ConfigConfigError error={err} retry={retry} ignore={ignore} />
|
||||
)}
|
||||
>
|
||||
{(clientConfig) => (
|
||||
<ClientConfigProvider value={clientConfig}>
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<JotaiProvider>
|
||||
<AppearanceEffects />
|
||||
<TauriEffects />
|
||||
<DesktopChrome>
|
||||
<RouterProvider router={createRouter(clientConfig, screenSize)} />
|
||||
</DesktopChrome>
|
||||
<SeasonalEffect />
|
||||
<NightLightOverlay />
|
||||
<LotusToastContainer />
|
||||
</JotaiProvider>
|
||||
<ReactQueryDevtools initialIsOpen={false} />
|
||||
</QueryClientProvider>
|
||||
</ClientConfigProvider>
|
||||
)}
|
||||
{(clientConfig) => {
|
||||
// [Gitea #43] Idempotent: where the call page is loaded from.
|
||||
setCallPageUrl(resolveCallPageUrl(clientConfig.elementCallUrl, isTauri()));
|
||||
return (
|
||||
<ClientConfigProvider value={clientConfig}>
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<JotaiProvider>
|
||||
<AppearanceEffects />
|
||||
<TauriEffects />
|
||||
<DesktopChrome>
|
||||
<RouterProvider router={createRouter(clientConfig, screenSize)} />
|
||||
</DesktopChrome>
|
||||
<SeasonalEffect />
|
||||
<NightLightOverlay />
|
||||
<LotusToastContainer />
|
||||
</JotaiProvider>
|
||||
<ReactQueryDevtools initialIsOpen={false} />
|
||||
</QueryClientProvider>
|
||||
</ClientConfigProvider>
|
||||
);
|
||||
}}
|
||||
</ClientConfigLoader>
|
||||
</FeatureCheck>
|
||||
</ScreenSizeProvider>
|
||||
|
||||
@@ -77,6 +77,7 @@ import { KeyboardShortcutsDialog, useKeyboardShortcutsTrigger } from '../../feat
|
||||
import { useRoomsListener } from '../../hooks/useRoomsListener';
|
||||
import { threadNotificationsAtom } from '../../state/threadNotifications';
|
||||
import { roomIdToActiveThreadIdAtomFamily } from '../../state/room/thread';
|
||||
import { lotusLinkBases } from '../../hooks/useLotusLinkBase';
|
||||
import {
|
||||
getThreadNotificationMode,
|
||||
shouldNotifyThreadReply,
|
||||
@@ -118,11 +119,12 @@ function SystemEmojiFeature() {
|
||||
|
||||
// [Gitea #103] Mirror the privacy toggle into the html parser's module flag.
|
||||
function LotusPermalinkFeature() {
|
||||
const { hashRouter } = useClientConfig();
|
||||
const { hashRouter, webAppUrl } = useClientConfig();
|
||||
useEffect(() => {
|
||||
setLotusPermalinkBase(getOriginBaseUrl(hashRouter));
|
||||
// [Gitea #248] In the desktop app, links to the public web app count too.
|
||||
setLotusPermalinkBase(lotusLinkBases(getOriginBaseUrl(hashRouter), isTauriApp(), webAppUrl));
|
||||
return () => setLotusPermalinkBase(undefined);
|
||||
}, [hashRouter]);
|
||||
}, [hashRouter, webAppUrl]);
|
||||
return null;
|
||||
}
|
||||
|
||||
|
||||
@@ -49,13 +49,7 @@ import { roomToParentsAtom } from '../../../state/room/roomToParents';
|
||||
import { allRoomsAtom } from '../../../state/room-list/roomList';
|
||||
import { useAnyRoomLiveCall } from '../../../hooks/useSpaceLiveCall';
|
||||
import { LiveDot } from './SpaceTabs.css';
|
||||
import {
|
||||
getOriginBaseUrl,
|
||||
getSpaceLobbyPath,
|
||||
getSpacePath,
|
||||
joinPathComponent,
|
||||
} from '../../pathUtils';
|
||||
import { useClientConfig } from '../../../hooks/useClientConfig';
|
||||
import { getSpaceLobbyPath, getSpacePath, joinPathComponent } from '../../pathUtils';
|
||||
import {
|
||||
SidebarAvatar,
|
||||
SidebarItem,
|
||||
@@ -102,6 +96,7 @@ import { settingsAtom } from '../../../state/settings';
|
||||
import { useOpenSpaceSettings } from '../../../state/hooks/spaceSettings';
|
||||
import { useRoomCreators } from '../../../hooks/useRoomCreators';
|
||||
import { useRoomPermissions } from '../../../hooks/useRoomPermissions';
|
||||
import { useLotusShareBase } from '../../../hooks/useLotusLinkBase';
|
||||
import { InviteUserPrompt } from '../../../components/invite-user-prompt';
|
||||
|
||||
type SpaceMenuProps = {
|
||||
@@ -112,7 +107,7 @@ type SpaceMenuProps = {
|
||||
const SpaceMenu = forwardRef<HTMLDivElement, SpaceMenuProps>(
|
||||
({ room, requestClose, onUnpin }, ref) => {
|
||||
const mx = useMatrixClient();
|
||||
const { hashRouter } = useClientConfig();
|
||||
const lotusBase = useLotusShareBase();
|
||||
const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
|
||||
const roomToParents = useAtomValue(roomToParentsAtom);
|
||||
const powerLevels = usePowerLevels(room);
|
||||
@@ -152,9 +147,7 @@ const SpaceMenu = forwardRef<HTMLDivElement, SpaceMenuProps>(
|
||||
const handleCopyLotusLink = () => {
|
||||
const roomIdOrAlias = getCanonicalAliasOrRoomId(mx, room.roomId);
|
||||
const viaServers = isRoomAlias(roomIdOrAlias) ? undefined : getViaServers(room);
|
||||
copyToClipboard(
|
||||
getLotusSpacePermalink(getOriginBaseUrl(hashRouter), roomIdOrAlias, viaServers),
|
||||
);
|
||||
copyToClipboard(getLotusSpacePermalink(lotusBase, roomIdOrAlias, viaServers));
|
||||
requestClose();
|
||||
};
|
||||
|
||||
|
||||
@@ -39,13 +39,7 @@ import {
|
||||
NavItemContent,
|
||||
NavLink,
|
||||
} from '../../../components/nav';
|
||||
import {
|
||||
getOriginBaseUrl,
|
||||
getSpaceLobbyPath,
|
||||
getSpaceRoomPath,
|
||||
getSpaceSearchPath,
|
||||
} from '../../pathUtils';
|
||||
import { useClientConfig } from '../../../hooks/useClientConfig';
|
||||
import { getSpaceLobbyPath, getSpaceRoomPath, getSpaceSearchPath } from '../../pathUtils';
|
||||
import { getCanonicalAliasOrRoomId, isRoomAlias } from '../../../utils/matrix';
|
||||
import { useSelectedRoom } from '../../../hooks/router/useSelectedRoom';
|
||||
import {
|
||||
@@ -92,6 +86,7 @@ import { ContainerColor } from '../../../styles/ContainerColor.css';
|
||||
import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
|
||||
import { BreakWord } from '../../../styles/Text.css';
|
||||
import { InviteUserPrompt } from '../../../components/invite-user-prompt';
|
||||
import { useLotusShareBase } from '../../../hooks/useLotusLinkBase';
|
||||
import { useCallEmbed } from '../../../hooks/useCallEmbed';
|
||||
|
||||
type SpaceMenuProps = {
|
||||
@@ -100,7 +95,7 @@ type SpaceMenuProps = {
|
||||
};
|
||||
const SpaceMenu = forwardRef<HTMLDivElement, SpaceMenuProps>(({ room, requestClose }, ref) => {
|
||||
const mx = useMatrixClient();
|
||||
const { hashRouter } = useClientConfig();
|
||||
const lotusBase = useLotusShareBase();
|
||||
const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
|
||||
const [developerTools] = useSetting(settingsAtom, 'developerTools');
|
||||
const roomToParents = useAtomValue(roomToParentsAtom);
|
||||
@@ -137,9 +132,7 @@ const SpaceMenu = forwardRef<HTMLDivElement, SpaceMenuProps>(({ room, requestClo
|
||||
const handleCopyLotusLink = () => {
|
||||
const roomIdOrAlias = getCanonicalAliasOrRoomId(mx, room.roomId);
|
||||
const viaServers = isRoomAlias(roomIdOrAlias) ? undefined : getViaServers(room);
|
||||
copyToClipboard(
|
||||
getLotusSpacePermalink(getOriginBaseUrl(hashRouter), roomIdOrAlias, viaServers),
|
||||
);
|
||||
copyToClipboard(getLotusSpacePermalink(lotusBase, roomIdOrAlias, viaServers));
|
||||
requestClose();
|
||||
};
|
||||
|
||||
|
||||
@@ -261,6 +261,15 @@ export class CallControl extends EventEmitter implements CallControlState {
|
||||
|
||||
private frameScreenshareListeners = new Set<() => void>();
|
||||
|
||||
// [Gitea #43] The fork draws the "Share your screen?" prompt inside the frame
|
||||
// on request (io.lotus.prompt_screenshare), so where the click can't be
|
||||
// delegated our call-bar button asks for that instead of starting the share.
|
||||
private _screensharePrompt = false;
|
||||
|
||||
// [Gitea #43] The fork's in-frame prompt is showing: anything the host lays
|
||||
// over the frame (the picture-in-picture overlay) must let clicks through.
|
||||
private _screensharePromptOpen = false;
|
||||
|
||||
// [Gitea #43] Whether the room's call policy allows screensharing; the fork
|
||||
// hides its in-frame button when it doesn't.
|
||||
private frameScreenshareAllowed = true;
|
||||
@@ -274,7 +283,32 @@ export class CallControl extends EventEmitter implements CallControlState {
|
||||
return this._frameScreenshare;
|
||||
}
|
||||
|
||||
/** Subscribe to `frameScreenshare` changes. Returns an unsubscribe. */
|
||||
/**
|
||||
* Starting a share must go through the fork's in-frame prompt: this engine
|
||||
* can't delegate the click (Firefox, Safari, WebKitGTK) and the fork has
|
||||
* the prompt. Stopping never needs it.
|
||||
*/
|
||||
public get screenshareNeedsPrompt(): boolean {
|
||||
return this._screensharePrompt && !canDelegateCapability();
|
||||
}
|
||||
|
||||
/** The fork's in-frame "Share your screen?" prompt is showing. */
|
||||
public get screensharePromptOpen(): boolean {
|
||||
return this._screensharePromptOpen;
|
||||
}
|
||||
|
||||
/**
|
||||
* Ask the fork to show "Share your screen?" inside the call frame; its Share
|
||||
* button starts the share with the frame's own click.
|
||||
*/
|
||||
public promptScreenshare(): void {
|
||||
this.sendForkAction('io.lotus.prompt_screenshare', {});
|
||||
}
|
||||
|
||||
/**
|
||||
* Subscribe to `frameScreenshare` / `screenshareNeedsPrompt` /
|
||||
* `screensharePromptOpen` changes. Returns an unsubscribe.
|
||||
*/
|
||||
public onFrameScreenshareChange(cb: () => void): () => void {
|
||||
this.frameScreenshareListeners.add(cb);
|
||||
return () => {
|
||||
@@ -289,7 +323,8 @@ export class CallControl extends EventEmitter implements CallControlState {
|
||||
}
|
||||
|
||||
private sendFrameScreenshareAllowed(): void {
|
||||
if (!this.joined || !this.forkReady || !this._frameScreenshare) return;
|
||||
if (!this.joined || !this.forkReady) return;
|
||||
if (!this._frameScreenshare && !this._screensharePrompt) return;
|
||||
this.sendForkAction('io.lotus.set_frame_screenshare', {
|
||||
visible: this.frameScreenshareAllowed,
|
||||
});
|
||||
@@ -324,17 +359,31 @@ export class CallControl extends EventEmitter implements CallControlState {
|
||||
/** [Gitea #43] The fork's `io.lotus.controls_state` report. */
|
||||
public onControlsState(data: unknown) {
|
||||
if (typeof data !== 'object' || data === null) return;
|
||||
const { screensharing, layout, frameScreenshare } = data as {
|
||||
screensharing?: unknown;
|
||||
layout?: unknown;
|
||||
frameScreenshare?: unknown;
|
||||
};
|
||||
const { screensharing, layout, frameScreenshare, screensharePrompt, screensharePromptOpen } =
|
||||
data as {
|
||||
screensharing?: unknown;
|
||||
layout?: unknown;
|
||||
frameScreenshare?: unknown;
|
||||
screensharePrompt?: unknown;
|
||||
screensharePromptOpen?: unknown;
|
||||
};
|
||||
const firstReport = !this.forkReady;
|
||||
this.forkReady = true;
|
||||
const frame = frameScreenshare === true;
|
||||
if (frame !== this._frameScreenshare) {
|
||||
const prompt = screensharePrompt === true;
|
||||
const promptOpen = screensharePromptOpen === true;
|
||||
if (promptOpen !== this._screensharePromptOpen) {
|
||||
this._screensharePromptOpen = promptOpen;
|
||||
if (frame === this._frameScreenshare && prompt === this._screensharePrompt) {
|
||||
this.frameScreenshareListeners.forEach((l) => l());
|
||||
}
|
||||
}
|
||||
if (frame !== this._frameScreenshare || prompt !== this._screensharePrompt) {
|
||||
const promptTurnedOn = prompt && !this._screensharePrompt;
|
||||
this._frameScreenshare = frame;
|
||||
this._screensharePrompt = prompt;
|
||||
this.frameScreenshareListeners.forEach((l) => l());
|
||||
if (promptTurnedOn && !firstReport) this.sendFrameScreenshareAllowed();
|
||||
}
|
||||
if (firstReport) {
|
||||
this.sendHotkeyCodes();
|
||||
@@ -564,19 +613,27 @@ export class CallControl extends EventEmitter implements CallControlState {
|
||||
* track (`io.lotus.inject_audio`) rather than splicing the mic. `url` must be
|
||||
* an https/blob URL the widget can fetch WITHOUT credentials — the host
|
||||
* resolves an mxc clip to a `blob:` object URL first (authenticated media
|
||||
* can't be fetched cross-realm by the widget). `volume` is 0–1.
|
||||
* can't be fetched cross-realm by the widget) — and `audio` the same clip's
|
||||
* bytes, which the fork prefers. `volume` is 0–1.
|
||||
*
|
||||
* The local user does not hear their own published track, so callers should
|
||||
* also play the clip locally for feedback.
|
||||
*/
|
||||
public injectAudio(url: string, volume = 1): Promise<{ played: boolean; reason?: string }> {
|
||||
public injectAudio(
|
||||
url: string,
|
||||
volume = 1,
|
||||
audio?: ArrayBuffer,
|
||||
): Promise<{ played: boolean; reason?: string }> {
|
||||
// [EC#13] The fork now refuses while the local mic is muted and replies
|
||||
// { played:false, reason:"muted" }; older forks reply {} (treated as played).
|
||||
// [Gitea #43] `audio` carries the clip's bytes: a `blob:` URL only works on
|
||||
// this origin, so a call page on its own origin can't fetch it. Forks that
|
||||
// predate `audio` ignore it and use `url`.
|
||||
return this.call.transport
|
||||
.send<{ url: string; volume: number }, { played?: boolean; reason?: string }>(
|
||||
'io.lotus.inject_audio',
|
||||
{ url, volume },
|
||||
)
|
||||
.send<
|
||||
{ url: string; volume: number; audio?: ArrayBuffer },
|
||||
{ played?: boolean; reason?: string }
|
||||
>('io.lotus.inject_audio', audio ? { url, volume, audio } : { url, volume })
|
||||
.then((r) => ({ played: r?.played !== false, reason: r?.reason }))
|
||||
.catch(() => ({ played: true }));
|
||||
}
|
||||
|
||||
@@ -29,6 +29,8 @@ import { CallControl } from './CallControl';
|
||||
import { CallControlState } from './CallControlState';
|
||||
import { verifyDenoiseAssets } from './denoiseSmokeCheck';
|
||||
import { canDelegateCapability } from './utils';
|
||||
import { getCallPageUrl } from './callPageUrl';
|
||||
import { restrictWidgetMessages } from '../widgetTransport';
|
||||
|
||||
// Maximum time to wait for the embedded Element Call iframe to progress from
|
||||
// initial load to a ready/joined state. If it hasn't by then, we assume the
|
||||
@@ -253,10 +255,14 @@ export class CallEmbed {
|
||||
params.append('sendNotificationType', CallEmbed.dmCall(intent) ? 'ring' : 'notification');
|
||||
}
|
||||
|
||||
const widgetUrl = new URL(
|
||||
`${trimTrailingSlash(import.meta.env.BASE_URL)}/public/element-call/index.html`,
|
||||
window.location.origin,
|
||||
);
|
||||
// [Gitea #43] On its own origin when config.json sets elementCallUrl.
|
||||
const externalPage = getCallPageUrl();
|
||||
const widgetUrl = externalPage
|
||||
? new URL(externalPage)
|
||||
: new URL(
|
||||
`${trimTrailingSlash(import.meta.env.BASE_URL)}/public/element-call/index.html`,
|
||||
window.location.origin,
|
||||
);
|
||||
widgetUrl.search = params.toString();
|
||||
|
||||
const options: IWidget = {
|
||||
@@ -305,6 +311,8 @@ export class CallEmbed {
|
||||
|
||||
const callWidgetDriver: WidgetDriver = new CallWidgetDriver(mx, room.roomId);
|
||||
const call: ClientWidgetApi = new ClientWidgetApi(widget, iframe, callWidgetDriver);
|
||||
// Only messages from the call's own frame and origin reach the widget API.
|
||||
restrictWidgetMessages(call, iframe, widget.origin);
|
||||
|
||||
this.mx = mx;
|
||||
this.call = call;
|
||||
|
||||
@@ -0,0 +1,40 @@
|
||||
import { test } from 'node:test';
|
||||
import assert from 'node:assert/strict';
|
||||
import { resolveCallPageUrl } from './callPageUrl';
|
||||
|
||||
const URL_OK = 'https://call.chat.example.org/public/element-call/index.html';
|
||||
|
||||
test('uses an absolute https URL on the web', () => {
|
||||
assert.equal(resolveCallPageUrl(URL_OK, false), URL_OK);
|
||||
});
|
||||
|
||||
test('strips a query or hash (the app adds its own parameters)', () => {
|
||||
assert.equal(resolveCallPageUrl(`${URL_OK}?x=1#y`, false), URL_OK);
|
||||
});
|
||||
|
||||
test('allows http only on localhost (development)', () => {
|
||||
assert.equal(
|
||||
resolveCallPageUrl('http://127.0.0.1:5174/public/element-call/index.html', false),
|
||||
'http://127.0.0.1:5174/public/element-call/index.html',
|
||||
);
|
||||
assert.equal(resolveCallPageUrl('http://call.example.org/index.html', false), undefined);
|
||||
});
|
||||
|
||||
test('desktop keeps the bundled page', () => {
|
||||
assert.equal(resolveCallPageUrl(URL_OK, true), undefined);
|
||||
});
|
||||
|
||||
test('anything else falls back to the bundled page', () => {
|
||||
[
|
||||
undefined,
|
||||
null,
|
||||
42,
|
||||
'',
|
||||
' ',
|
||||
'not a url',
|
||||
'/public/element-call/index.html',
|
||||
'http://call.chat.example.org/index.html',
|
||||
['javascript', 'alert(1)'].join(':'),
|
||||
'data:text/html,x',
|
||||
].forEach((v) => assert.equal(resolveCallPageUrl(v, false), undefined, String(v)));
|
||||
});
|
||||
@@ -0,0 +1,37 @@
|
||||
/**
|
||||
* [Gitea #43] Where the Element Call page is loaded from.
|
||||
*
|
||||
* By default it's the copy bundled with this app (same origin). With
|
||||
* `elementCallUrl` in config.json (e.g.
|
||||
* "https://call.chat.lotusguild.org/public/element-call/index.html") the web
|
||||
* app loads it from that origin instead, so the call frame can no longer
|
||||
* reach this origin's storage (login token, crypto store) or service worker.
|
||||
*
|
||||
* Web only: the desktop app keeps its bundled copy (its CSP doesn't allow
|
||||
* another frame origin, and a network copy could drift from the bundle).
|
||||
* Anything that isn't an absolute https URL (http only on localhost, for
|
||||
* development) is ignored, so a bad value falls
|
||||
* back to the bundled page instead of breaking calls.
|
||||
*/
|
||||
export const resolveCallPageUrl = (value: unknown, desktop: boolean): string | undefined => {
|
||||
if (desktop || typeof value !== 'string' || value.trim() === '') return undefined;
|
||||
try {
|
||||
const url = new URL(value);
|
||||
// http only for local development (localhost is a secure context).
|
||||
const local = url.hostname === 'localhost' || url.hostname === '127.0.0.1';
|
||||
if (url.protocol !== 'https:' && !(url.protocol === 'http:' && local)) return undefined;
|
||||
url.search = '';
|
||||
url.hash = '';
|
||||
return url.href;
|
||||
} catch {
|
||||
return undefined;
|
||||
}
|
||||
};
|
||||
|
||||
let callPageUrl: string | undefined;
|
||||
|
||||
export const setCallPageUrl = (url: string | undefined): void => {
|
||||
callPageUrl = url;
|
||||
};
|
||||
|
||||
export const getCallPageUrl = (): string | undefined => callPageUrl;
|
||||
@@ -75,19 +75,46 @@ export const useCallMicLevel = (callEmbed: CallEmbed | undefined): number => {
|
||||
};
|
||||
|
||||
/**
|
||||
* [Gitea #43] True when EC's own screenshare button is shown inside the call
|
||||
* frame (no Capability Delegation in this engine), so the host bar hides its.
|
||||
* [Gitea #43] How the call bar's screenshare button behaves:
|
||||
* - `hidden`: EC's own button is inside the frame (fork lotus.20/21), so ours hides;
|
||||
* - `prompt`: starting asks the fork for its in-frame "Share your screen?"
|
||||
* (no Capability Delegation in this engine);
|
||||
* - `direct`: our own confirm, then a (delegated) set_screenshare.
|
||||
*/
|
||||
export const useFrameScreenshare = (control: CallControl | undefined): boolean => {
|
||||
const [frame, setFrame] = useState(() => control?.frameScreenshare ?? false);
|
||||
export type ScreenshareMode = 'hidden' | 'prompt' | 'direct';
|
||||
|
||||
const screenshareMode = (control: CallControl): ScreenshareMode => {
|
||||
if (control.frameScreenshare) return 'hidden';
|
||||
return control.screenshareNeedsPrompt ? 'prompt' : 'direct';
|
||||
};
|
||||
|
||||
export const useScreenshareMode = (control: CallControl | undefined): ScreenshareMode => {
|
||||
const [mode, setMode] = useState<ScreenshareMode>(() =>
|
||||
control ? screenshareMode(control) : 'direct',
|
||||
);
|
||||
useEffect(() => {
|
||||
if (!control) {
|
||||
setFrame(false);
|
||||
setMode('direct');
|
||||
return undefined;
|
||||
}
|
||||
const sync = () => setFrame(control.frameScreenshare);
|
||||
const sync = () => setMode(screenshareMode(control));
|
||||
sync();
|
||||
return control.onFrameScreenshareChange(sync);
|
||||
}, [control]);
|
||||
return frame;
|
||||
return mode;
|
||||
};
|
||||
|
||||
/** [Gitea #43] The fork's in-frame "Share your screen?" prompt is showing. */
|
||||
export const useScreensharePromptOpen = (control: CallControl | undefined): boolean => {
|
||||
const [open, setOpen] = useState(() => control?.screensharePromptOpen ?? false);
|
||||
useEffect(() => {
|
||||
if (!control) {
|
||||
setOpen(false);
|
||||
return undefined;
|
||||
}
|
||||
const sync = () => setOpen(control.screensharePromptOpen);
|
||||
sync();
|
||||
return control.onFrameScreenshareChange(sync);
|
||||
}, [control]);
|
||||
return open;
|
||||
};
|
||||
|
||||
@@ -122,11 +122,15 @@ const cleanHref = (href: string): string =>
|
||||
stripTrackingOnRender ? stripTrackingParams(href) : href;
|
||||
|
||||
// [Gitea #130] Links to THIS deployment's room routes render and click like
|
||||
// matrix.to links. The base is set once from the client config
|
||||
// (ClientNonUIFeatures) because this module has no access to hooks.
|
||||
let lotusPermalinkBase: string | undefined;
|
||||
export const setLotusPermalinkBase = (baseUrl: string | undefined): void => {
|
||||
lotusPermalinkBase = baseUrl;
|
||||
// matrix.to links. The bases are set once from the client config
|
||||
// (ClientNonUIFeatures) because this module has no access to hooks. [Gitea
|
||||
// #248] Several: the desktop app knows both its local origin and the public web
|
||||
// app (`webAppUrl`), and people share the public one.
|
||||
let lotusPermalinkBases: string[] = [];
|
||||
export const setLotusPermalinkBase = (baseUrls: string | string[] | undefined): void => {
|
||||
lotusPermalinkBases = (Array.isArray(baseUrls) ? baseUrls : [baseUrls]).filter(
|
||||
(b): b is string => !!b,
|
||||
);
|
||||
};
|
||||
/**
|
||||
* The matrix.to form of `href` when it is a matrix.to link or a Lotus
|
||||
@@ -134,7 +138,11 @@ export const setLotusPermalinkBase = (baseUrl: string | undefined): void => {
|
||||
*/
|
||||
export const toMatrixToHref = (href: string): string | undefined => {
|
||||
if (testMatrixTo(href)) return href;
|
||||
return lotusPermalinkBase ? lotusPermalinkToMatrixTo(lotusPermalinkBase, href) : undefined;
|
||||
for (const base of lotusPermalinkBases) {
|
||||
const matrixTo = lotusPermalinkToMatrixTo(base, href);
|
||||
if (matrixTo) return matrixTo;
|
||||
}
|
||||
return undefined;
|
||||
};
|
||||
|
||||
export const LINKIFY_OPTS: LinkifyOpts = {
|
||||
|
||||
@@ -0,0 +1,46 @@
|
||||
import { test } from 'node:test';
|
||||
import assert from 'node:assert/strict';
|
||||
import { ClientWidgetApi } from 'matrix-widget-api';
|
||||
import { isFromWidgetFrame, restrictWidgetMessages } from './widgetTransport';
|
||||
|
||||
const frame = {} as Window;
|
||||
const other = {} as Window;
|
||||
const ORIGIN = 'https://call.example.org';
|
||||
|
||||
test('isFromWidgetFrame: only the widget frame at its origin', () => {
|
||||
assert.equal(isFromWidgetFrame({ source: frame, origin: ORIGIN }, frame, ORIGIN), true);
|
||||
assert.equal(isFromWidgetFrame({ source: other, origin: ORIGIN }, frame, ORIGIN), false);
|
||||
assert.equal(isFromWidgetFrame({ source: frame, origin: 'null' }, frame, ORIGIN), false);
|
||||
assert.equal(
|
||||
isFromWidgetFrame({ source: frame, origin: 'https://evil.example' }, frame, ORIGIN),
|
||||
false,
|
||||
);
|
||||
assert.equal(isFromWidgetFrame({ source: null, origin: ORIGIN }, null, ORIGIN), false);
|
||||
});
|
||||
|
||||
test('restrictWidgetMessages swaps the listener and drops foreign messages', () => {
|
||||
const seen: unknown[] = [];
|
||||
const original = (ev: MessageEvent) => {
|
||||
seen.push(ev.data);
|
||||
};
|
||||
const transport = { handleMessage: original };
|
||||
const api = { transport } as unknown as ClientWidgetApi;
|
||||
const iframe = { contentWindow: frame } as HTMLIFrameElement;
|
||||
const listeners = new Set<EventListener>([original as EventListener]);
|
||||
const inbound = {
|
||||
addEventListener: (_t: string, l: EventListener) => listeners.add(l),
|
||||
removeEventListener: (_t: string, l: EventListener) => listeners.delete(l),
|
||||
} as unknown as Window;
|
||||
|
||||
restrictWidgetMessages(api, iframe, ORIGIN, inbound);
|
||||
assert.equal(listeners.has(original as EventListener), false);
|
||||
assert.equal(listeners.size, 1);
|
||||
assert.equal(transport.handleMessage === original, false);
|
||||
|
||||
const dispatch = (ev: Partial<MessageEvent>) =>
|
||||
listeners.forEach((l) => l(ev as unknown as Event));
|
||||
dispatch({ source: other, origin: ORIGIN, data: 'spoof' });
|
||||
dispatch({ source: frame, origin: 'null', data: 'wrong-origin' });
|
||||
dispatch({ source: frame, origin: ORIGIN, data: 'real' });
|
||||
assert.deepEqual(seen, ['real']);
|
||||
});
|
||||
@@ -0,0 +1,47 @@
|
||||
import { ClientWidgetApi } from 'matrix-widget-api';
|
||||
|
||||
type MessageLike = Pick<MessageEvent, 'source' | 'origin'>;
|
||||
|
||||
/**
|
||||
* True when a message came from the widget's own frame, at the origin the
|
||||
* widget was loaded from.
|
||||
*/
|
||||
export const isFromWidgetFrame = (
|
||||
ev: MessageLike,
|
||||
frameWindow: Window | null | undefined,
|
||||
widgetOrigin: string,
|
||||
): boolean => !!frameWindow && ev.source === frameWindow && ev.origin === widgetOrigin;
|
||||
|
||||
type InboundTransport = {
|
||||
handleMessage: (ev: MessageEvent) => void;
|
||||
};
|
||||
|
||||
/**
|
||||
* matrix-widget-api's host transport accepts a message from ANY window on the
|
||||
* page as long as it carries the widget's id (its `strictOriginCheck` only
|
||||
* compares against the host's own origin, and is off by default). The call
|
||||
* widget's id is fixed ('call-embed'), so any other frame (a room widget, a
|
||||
* URL-preview embed) could post fromWidget actions as the call: e.g. a fake
|
||||
* push-to-talk keydown turned the user's mic on.
|
||||
*
|
||||
* Swap the transport's listener for one that only lets through messages from
|
||||
* this widget's iframe and origin. `stop()` removes `handleMessage`, which is
|
||||
* the guarded one after this. Call right after `new ClientWidgetApi(...)`,
|
||||
* which has already started the transport.
|
||||
*/
|
||||
export const restrictWidgetMessages = (
|
||||
api: ClientWidgetApi,
|
||||
iframe: HTMLIFrameElement,
|
||||
widgetOrigin: string,
|
||||
inbound: Pick<Window, 'addEventListener' | 'removeEventListener'> = window,
|
||||
): void => {
|
||||
const transport = api.transport as unknown as InboundTransport;
|
||||
const original = transport.handleMessage;
|
||||
const guarded = (ev: MessageEvent) => {
|
||||
if (!isFromWidgetFrame(ev, iframe.contentWindow, widgetOrigin)) return;
|
||||
original(ev);
|
||||
};
|
||||
inbound.removeEventListener('message', original as EventListener);
|
||||
transport.handleMessage = guarded;
|
||||
inbound.addEventListener('message', guarded as EventListener);
|
||||
};
|
||||
@@ -0,0 +1,32 @@
|
||||
import { test } from 'node:test';
|
||||
import assert from 'node:assert/strict';
|
||||
import { getCallInBrowserUrl, resolveWebAppUrl } from './callInBrowser';
|
||||
|
||||
test('resolveWebAppUrl keeps an https origin (+ path) without a trailing slash', () => {
|
||||
assert.equal(resolveWebAppUrl('https://chat.example.org'), 'https://chat.example.org');
|
||||
assert.equal(resolveWebAppUrl('https://chat.example.org/'), 'https://chat.example.org');
|
||||
assert.equal(resolveWebAppUrl('https://example.org/chat/'), 'https://example.org/chat');
|
||||
assert.equal(resolveWebAppUrl('https://chat.example.org/?x=1#y'), 'https://chat.example.org');
|
||||
});
|
||||
|
||||
test('resolveWebAppUrl rejects anything but absolute https', () => {
|
||||
[
|
||||
undefined,
|
||||
null,
|
||||
1,
|
||||
'',
|
||||
' ',
|
||||
'/home',
|
||||
'http://chat.example.org',
|
||||
'not a url',
|
||||
['javascript', 'alert(1)'].join(':'),
|
||||
'data:text/html,x',
|
||||
].forEach((v) => assert.equal(resolveWebAppUrl(v), undefined, String(v)));
|
||||
});
|
||||
|
||||
test('getCallInBrowserUrl points at the room in the web app (no auto-join)', () => {
|
||||
const url = getCallInBrowserUrl('https://chat.example.org', '!room:example.org');
|
||||
assert.equal(url, 'https://chat.example.org/home/!room%3Aexample.org');
|
||||
assert.ok(!/join|call=/i.test(url ?? ''));
|
||||
assert.equal(getCallInBrowserUrl(undefined, '!room:example.org'), undefined);
|
||||
});
|
||||
@@ -0,0 +1,27 @@
|
||||
import { getLotusRoomPermalink } from '../plugins/lotus-permalink';
|
||||
|
||||
/**
|
||||
* The public web app's address from config.json `webAppUrl` (the desktop app
|
||||
* sets it; its own origin is a local server). Absolute https only; anything
|
||||
* else is ignored.
|
||||
*/
|
||||
export const resolveWebAppUrl = (value: unknown): string | undefined => {
|
||||
if (typeof value !== 'string' || value.trim() === '') return undefined;
|
||||
try {
|
||||
const url = new URL(value);
|
||||
if (url.protocol !== 'https:') return undefined;
|
||||
return url.origin + url.pathname.replace(/\/+$/, '');
|
||||
} catch {
|
||||
return undefined;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Where to send the user to take a call this app can't make: the room in the
|
||||
* web app (they press Join there themselves — never an auto-join link, which
|
||||
* a crafted URL could abuse to open someone's mic).
|
||||
*/
|
||||
export const getCallInBrowserUrl = (
|
||||
webAppUrl: string | undefined,
|
||||
roomId: string,
|
||||
): string | undefined => (webAppUrl ? getLotusRoomPermalink(webAppUrl, roomId) : undefined);
|
||||
@@ -898,6 +898,14 @@ globalStyle(
|
||||
boxShadow: '0 0 10px rgba(255,107,0,0.10)',
|
||||
},
|
||||
);
|
||||
// [Gitea #246] The poll's winning answer (after it ends).
|
||||
globalStyle(
|
||||
`body.${lotusTerminalBodyClass} [data-poll-content] [data-poll-answer][data-winner="true"]`,
|
||||
{
|
||||
border: '1px solid rgba(0,255,136,0.55) !important',
|
||||
boxShadow: '0 0 10px rgba(0,255,136,0.10)',
|
||||
},
|
||||
);
|
||||
globalStyle(`body.${lotusTerminalBodyClass} [data-poll-content] [data-poll-content-label]`, {
|
||||
color: 'rgba(0,212,255,0.60) !important',
|
||||
opacity: '1 !important',
|
||||
|
||||
Reference in New Issue
Block a user