feat: poll voting, location sharing, image captions, message forwarding
- Poll voting: PollContent sends m.poll.response on answer click - Location: MLocation shows OSM map embed + share-location button in toolbar - Image captions: caption field on media uploads sets message body - Message forwarding: ForwardMessageDialog with searchable room picker - Also includes ring timeout fix and earlier session patches
This commit is contained in:
root
@@ -0,0 +1,152 @@
|
||||
import React, { useCallback } from 'react';
|
||||
import FocusTrap from 'focus-trap-react';
|
||||
import { Grid, SearchBar, SearchContext, SearchContextManager } from '@giphy/react-components';
|
||||
import { IGif } from '@giphy/js-types';
|
||||
import { Box } from 'folds';
|
||||
import { useSetting } from '../state/hooks/settings';
|
||||
import { settingsAtom } from '../state/settings';
|
||||
|
||||
const PICKER_WIDTH = 312;
|
||||
|
||||
const TERMINAL_CSS = `
|
||||
[data-gif-terminal] input,
|
||||
[data-gif-terminal] form {
|
||||
background: #030c14 !important;
|
||||
color: #e8edf5 !important;
|
||||
font-family: 'JetBrains Mono', 'Cascadia Code', 'Fira Code', monospace !important;
|
||||
border: 1px solid rgba(255,107,0,0.35) !important;
|
||||
border-radius: 4px !important;
|
||||
font-size: 12px !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
[data-gif-terminal] input:focus {
|
||||
border-color: rgba(255,107,0,0.7) !important;
|
||||
box-shadow: 0 0 0 2px rgba(255,107,0,0.12) !important;
|
||||
outline: none !important;
|
||||
}
|
||||
[data-gif-terminal] input::placeholder {
|
||||
color: rgba(255,107,0,0.4) !important;
|
||||
font-family: 'JetBrains Mono', monospace !important;
|
||||
}
|
||||
[data-gif-terminal] svg,
|
||||
[data-gif-terminal] button[type="reset"] {
|
||||
display: none !important;
|
||||
}
|
||||
[data-gif-terminal] ::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
[data-gif-terminal] ::-webkit-scrollbar-track {
|
||||
background: #030508;
|
||||
}
|
||||
[data-gif-terminal] ::-webkit-scrollbar-thumb {
|
||||
background: rgba(255,107,0,0.4);
|
||||
border-radius: 2px;
|
||||
}
|
||||
`;
|
||||
|
||||
type GifPickerInnerProps = {
|
||||
onSelect: (url: string, width: number, height: number) => void;
|
||||
requestClose: () => void;
|
||||
lotusTerminal: boolean;
|
||||
};
|
||||
|
||||
function GifPickerInner({ onSelect, requestClose, lotusTerminal }: GifPickerInnerProps) {
|
||||
const { fetchGifs, searchKey } = React.useContext(SearchContext);
|
||||
|
||||
const handleClick = useCallback(
|
||||
(gif: IGif, e: React.SyntheticEvent) => {
|
||||
e.preventDefault();
|
||||
const r = gif.images.downsized ?? gif.images.original;
|
||||
const url = r.url;
|
||||
const width = Number(r.width) || 200;
|
||||
const height = Number(r.height) || 200;
|
||||
onSelect(url, width, height);
|
||||
requestClose();
|
||||
},
|
||||
[onSelect, requestClose]
|
||||
);
|
||||
|
||||
return (
|
||||
<Box direction="Column" style={{ width: `${PICKER_WIDTH}px` }}>
|
||||
{lotusTerminal && (
|
||||
<div style={{
|
||||
padding: '5px 10px 4px',
|
||||
borderBottom: '1px solid rgba(255,107,0,0.2)',
|
||||
fontFamily: "'JetBrains Mono', 'Cascadia Code', monospace",
|
||||
fontSize: '10px',
|
||||
fontWeight: 700,
|
||||
letterSpacing: '0.1em',
|
||||
color: '#FF6B00',
|
||||
userSelect: 'none',
|
||||
}}>
|
||||
// GIF_SEARCH
|
||||
</div>
|
||||
)}
|
||||
<Box style={{ padding: '8px 8px 4px' }}>
|
||||
<SearchBar style={{ width: '100%', borderRadius: lotusTerminal ? '4px' : '8px' }} />
|
||||
</Box>
|
||||
<div style={{ overflowY: 'auto', overflowX: 'hidden', maxHeight: '340px', padding: '0 8px 8px' }}>
|
||||
<Grid
|
||||
key={searchKey}
|
||||
fetchGifs={fetchGifs}
|
||||
width={PICKER_WIDTH - 16}
|
||||
columns={2}
|
||||
gutter={4}
|
||||
onGifClick={handleClick}
|
||||
hideAttribution={false}
|
||||
noLink
|
||||
/>
|
||||
</div>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
type GifPickerProps = {
|
||||
apiKey: string;
|
||||
onSelect: (url: string, width: number, height: number) => void;
|
||||
requestClose: () => void;
|
||||
};
|
||||
|
||||
export function GifPicker({ apiKey, onSelect, requestClose }: GifPickerProps) {
|
||||
const [lotusTerminal] = useSetting(settingsAtom, 'lotusTerminal');
|
||||
|
||||
const containerStyle = lotusTerminal
|
||||
? {
|
||||
background: '#060c14',
|
||||
border: '1px solid rgba(255,107,0,0.35)',
|
||||
borderRadius: '4px',
|
||||
overflow: 'hidden',
|
||||
boxShadow: '0 4px 24px rgba(255,107,0,0.10), 0 0 0 1px rgba(255,107,0,0.08)',
|
||||
width: `${PICKER_WIDTH}px`,
|
||||
}
|
||||
: {
|
||||
background: 'var(--bg-surface)',
|
||||
border: '1px solid rgba(255,255,255,0.08)',
|
||||
borderRadius: '12px',
|
||||
overflow: 'hidden',
|
||||
boxShadow: '0 8px 32px rgba(0,0,0,0.4)',
|
||||
width: `${PICKER_WIDTH}px`,
|
||||
};
|
||||
|
||||
return (
|
||||
<FocusTrap
|
||||
focusTrapOptions={{
|
||||
initialFocus: false,
|
||||
onDeactivate: requestClose,
|
||||
clickOutsideDeactivates: true,
|
||||
allowOutsideClick: true,
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
direction="Column"
|
||||
data-gif-terminal={lotusTerminal ? '' : undefined}
|
||||
style={containerStyle}
|
||||
>
|
||||
{lotusTerminal && <style>{TERMINAL_CSS}</style>}
|
||||
<SearchContextManager apiKey={apiKey} initialTerm="">
|
||||
<GifPickerInner onSelect={onSelect} requestClose={requestClose} lotusTerminal={!!lotusTerminal} />
|
||||
</SearchContextManager>
|
||||
</Box>
|
||||
</FocusTrap>
|
||||
);
|
||||
}
|
||||
@@ -391,9 +391,28 @@ export function MLocation({ content }: MLocationProps) {
|
||||
const location = parseGeoUri(geoUri);
|
||||
if (!location) return <BrokenContent />;
|
||||
|
||||
const lat = parseFloat(location.latitude);
|
||||
const lon = parseFloat(location.longitude);
|
||||
const mapSrc = `https://www.openstreetmap.org/export/embed.html?bbox=${lon - 0.007},${lat - 0.004},${lon + 0.007},${lat + 0.004}&layer=mapnik&marker=${lat},${lon}`;
|
||||
|
||||
return (
|
||||
<Box direction="Column" alignItems="Start" gap="100">
|
||||
<Text size="T400">{geoUri}</Text>
|
||||
<Box direction="Column" alignItems="Start" gap="200">
|
||||
<iframe
|
||||
title="Location"
|
||||
src={mapSrc}
|
||||
style={{
|
||||
width: '280px',
|
||||
height: '160px',
|
||||
border: '1px solid var(--bg-surface-border)',
|
||||
borderRadius: '8px',
|
||||
display: 'block',
|
||||
}}
|
||||
scrolling="no"
|
||||
loading="lazy"
|
||||
/>
|
||||
<Text size="T300" style={{ opacity: 0.65 }}>
|
||||
{`${lat.toFixed(5)}, ${lon.toFixed(5)}`}
|
||||
</Text>
|
||||
<Chip
|
||||
as="a"
|
||||
size="400"
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import React from 'react';
|
||||
import React, { useState } from 'react';
|
||||
import { Box, Text } from 'folds';
|
||||
import { useMatrixClient } from '../../../hooks/useMatrixClient';
|
||||
|
||||
type PollTextValue = Array<{ body: string }> | string;
|
||||
|
||||
@@ -21,7 +22,19 @@ type PollData = {
|
||||
answers?: PollAnswer[];
|
||||
};
|
||||
|
||||
export function PollContent({ content }: { content: Record<string, unknown> }) {
|
||||
export function PollContent({
|
||||
content,
|
||||
roomId,
|
||||
eventId,
|
||||
}: {
|
||||
content: Record<string, unknown>;
|
||||
roomId?: string;
|
||||
eventId?: string;
|
||||
}) {
|
||||
const mx = useMatrixClient();
|
||||
const [myVote, setMyVote] = useState<string | null>(null);
|
||||
const isStable = !!content['m.poll'];
|
||||
|
||||
const poll = (
|
||||
content['m.poll'] ?? content['org.matrix.msc3381.poll.start']
|
||||
) as PollData | undefined;
|
||||
@@ -39,8 +52,30 @@ export function PollContent({ content }: { content: Record<string, unknown> }) {
|
||||
(poll.question as any)?.body ||
|
||||
'Untitled poll';
|
||||
|
||||
const canVote = !!roomId && !!eventId;
|
||||
|
||||
const handleVote = (answerId: string) => {
|
||||
if (!roomId || !eventId) return;
|
||||
setMyVote(answerId);
|
||||
if (isStable) {
|
||||
mx.sendEvent(roomId, 'm.poll.response' as any, {
|
||||
'm.relates_to': { rel_type: 'm.reference', event_id: eventId },
|
||||
'm.responses': [{ 'm.id': answerId }],
|
||||
});
|
||||
} else {
|
||||
mx.sendEvent(roomId, 'org.matrix.msc3381.poll.response' as any, {
|
||||
'm.relates_to': { rel_type: 'm.reference', event_id: eventId },
|
||||
'org.matrix.msc3381.poll.response': { answers: [answerId] },
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Box direction="Column" gap="200" style={{ maxWidth: '340px', paddingTop: '2px', paddingBottom: '4px' }}>
|
||||
<Box
|
||||
direction="Column"
|
||||
gap="200"
|
||||
style={{ maxWidth: '340px', paddingTop: '2px', paddingBottom: '4px' }}
|
||||
>
|
||||
<Box
|
||||
alignItems="Center"
|
||||
gap="100"
|
||||
@@ -65,26 +100,45 @@ export function PollContent({ content }: { content: Record<string, unknown> }) {
|
||||
(answer as any)['org.matrix.msc3381.poll.answer']?.body ||
|
||||
`Option ${i + 1}`;
|
||||
const id = answer['m.id'] ?? answer.id ?? String(i);
|
||||
const selected = myVote === id;
|
||||
return (
|
||||
<div
|
||||
<button
|
||||
key={id}
|
||||
type="button"
|
||||
onClick={canVote ? () => handleVote(id) : undefined}
|
||||
style={{
|
||||
padding: '7px 12px',
|
||||
borderRadius: '8px',
|
||||
background: 'var(--bg-surface-low)',
|
||||
border: '1px solid var(--bg-surface-border)',
|
||||
background: selected ? 'var(--bg-surface-active)' : 'var(--bg-surface-low)',
|
||||
border: `1px solid ${selected ? 'var(--text-primary)' : 'var(--bg-surface-border)'}`,
|
||||
fontSize: '0.88rem',
|
||||
lineHeight: 1.4,
|
||||
textAlign: 'left',
|
||||
cursor: canVote ? 'pointer' : 'default',
|
||||
color: 'var(--text-primary)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '8px',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
{text}
|
||||
</div>
|
||||
<span style={{ flexGrow: 1 }}>{text}</span>
|
||||
{selected && (
|
||||
<span style={{ opacity: 0.8, fontSize: '1rem', flexShrink: 0 }}>✓</span>
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</Box>
|
||||
<Text size="T200" style={{ opacity: 0.4, marginTop: '2px' }}>
|
||||
<i>Open in Element to vote</i>
|
||||
</Text>
|
||||
{canVote ? (
|
||||
<Text size="T200" style={{ opacity: 0.5, marginTop: '2px' }}>
|
||||
<i>{myVote ? 'Vote cast — click another to change' : 'Click an option to vote'}</i>
|
||||
</Text>
|
||||
) : (
|
||||
<Text size="T200" style={{ opacity: 0.4, marginTop: '2px' }}>
|
||||
<i>Open in Element to vote</i>
|
||||
</Text>
|
||||
)}
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -182,6 +182,27 @@ export function UploadCardRenderer({
|
||||
<PreviewVideo fileItem={fileItem} />
|
||||
</MediaPreview>
|
||||
)}
|
||||
{(fileItem.originalFile.type.startsWith('image') ||
|
||||
fileItem.originalFile.type.startsWith('video')) && (
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Add a caption… (optional)"
|
||||
value={metadata.caption ?? ''}
|
||||
onChange={(e) => setMetadata(fileItem, { ...metadata, caption: e.target.value })}
|
||||
style={{
|
||||
marginTop: '6px',
|
||||
width: '100%',
|
||||
background: 'var(--bg-surface-low)',
|
||||
border: '1px solid var(--bg-surface-border)',
|
||||
borderRadius: '6px',
|
||||
padding: '5px 8px',
|
||||
fontSize: '0.85rem',
|
||||
color: 'var(--text-primary)',
|
||||
outline: 'none',
|
||||
boxSizing: 'border-box',
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{upload.status === UploadStatus.Idle && !fileSizeExceeded && (
|
||||
<UploadCardProgress sentBytes={0} totalBytes={file.size} />
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user