Compare commits
10 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
298bcfd1e3 | ||
| fce1736312 | |||
|
|
e11304d093 | ||
| 60d76d5165 | |||
|
|
373e700a07 | ||
| f7b25261cc | |||
|
|
41e1b0db9d | ||
| d1022635d2 | |||
|
|
2e6be4b0b3 | ||
| 0d97676edd |
@@ -5,6 +5,7 @@ import FocusTrap from 'focus-trap-react';
|
|||||||
import {
|
import {
|
||||||
Avatar,
|
Avatar,
|
||||||
Box,
|
Box,
|
||||||
|
Button,
|
||||||
Header,
|
Header,
|
||||||
Icon,
|
Icon,
|
||||||
IconButton,
|
IconButton,
|
||||||
@@ -62,6 +63,7 @@ export function ShareRoomPicker({ share, onPick, onDismiss }: ShareRoomPickerPro
|
|||||||
const mx = useMatrixClient();
|
const mx = useMatrixClient();
|
||||||
const useAuthentication = useMediaAuthentication();
|
const useAuthentication = useMediaAuthentication();
|
||||||
const scrollRef = useRef<HTMLDivElement>(null);
|
const scrollRef = useRef<HTMLDivElement>(null);
|
||||||
|
const [confirmRoomId, setConfirmRoomId] = useState<string | null>(null);
|
||||||
|
|
||||||
const mDirects = useAtomValue(mDirectAtom);
|
const mDirects = useAtomValue(mDirectAtom);
|
||||||
const allRoomsSet = useAllJoinedRoomsSet();
|
const allRoomsSet = useAllJoinedRoomsSet();
|
||||||
@@ -107,149 +109,202 @@ export function ShareRoomPicker({ share, onPick, onDismiss }: ShareRoomPickerPro
|
|||||||
const handleRoomClick: React.MouseEventHandler<HTMLButtonElement> = (evt) => {
|
const handleRoomClick: React.MouseEventHandler<HTMLButtonElement> = (evt) => {
|
||||||
const roomId = evt.currentTarget.getAttribute('data-room-id');
|
const roomId = evt.currentTarget.getAttribute('data-room-id');
|
||||||
if (roomId) {
|
if (roomId) {
|
||||||
onPick(roomId);
|
setConfirmRoomId(roomId);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const handleConfirm = useCallback(() => {
|
||||||
|
if (confirmRoomId) {
|
||||||
|
onPick(confirmRoomId);
|
||||||
|
}
|
||||||
|
}, [confirmRoomId, onPick]);
|
||||||
|
|
||||||
|
const handleCancelConfirm = useCallback(() => {
|
||||||
|
setConfirmRoomId(null);
|
||||||
|
}, []);
|
||||||
|
|
||||||
const previewText = share.text?.slice(0, 80) ?? share.subject?.slice(0, 80);
|
const previewText = share.text?.slice(0, 80) ?? share.subject?.slice(0, 80);
|
||||||
const fileCount = share.files.length;
|
const fileCount = share.files.length;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Overlay open backdrop={<OverlayBackdrop />}>
|
<Overlay open backdrop={<OverlayBackdrop />}>
|
||||||
<OverlayCenter>
|
<FocusTrap
|
||||||
<FocusTrap
|
focusTrapOptions={{
|
||||||
focusTrapOptions={{
|
initialFocus: false,
|
||||||
initialFocus: false,
|
clickOutsideDeactivates: true,
|
||||||
clickOutsideDeactivates: true,
|
onDeactivate: onDismiss,
|
||||||
onDeactivate: onDismiss,
|
escapeDeactivates: stopPropagation,
|
||||||
escapeDeactivates: stopPropagation,
|
}}
|
||||||
|
>
|
||||||
|
<Box
|
||||||
|
grow="Yes"
|
||||||
|
direction="Column"
|
||||||
|
style={{
|
||||||
|
position: 'fixed',
|
||||||
|
inset: 0,
|
||||||
|
zIndex: 999,
|
||||||
|
backgroundColor: '#1a1d23',
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Modal size="300">
|
<Header
|
||||||
<Box grow="Yes" direction="Column" style={{ maxHeight: '85vh' }}>
|
size="500"
|
||||||
<Header
|
style={{ padding: config.space.S400, paddingTop: '60px' }}
|
||||||
size="500"
|
>
|
||||||
style={{ padding: config.space.S200, paddingLeft: config.space.S400 }}
|
<Box grow="Yes" direction="Column" gap="100">
|
||||||
>
|
<Text size="H4">Share to Room</Text>
|
||||||
<Box grow="Yes" direction="Column" gap="100">
|
{(previewText || fileCount > 0) && (
|
||||||
<Text size="H4">Share to Room</Text>
|
<Text size="T200" priority="300" style={{ opacity: 0.7 }}>
|
||||||
{(previewText || fileCount > 0) && (
|
{previewText
|
||||||
<Text size="T200" priority="300" style={{ opacity: 0.7 }}>
|
? `"${previewText}${(share.text?.length ?? 0) > 80 ? '…' : ''}"`
|
||||||
{previewText
|
: `${fileCount} file${fileCount !== 1 ? 's' : ''}`}
|
||||||
? `"${previewText}${(share.text?.length ?? 0) > 80 ? '…' : ''}"`
|
</Text>
|
||||||
: `${fileCount} file${fileCount !== 1 ? 's' : ''}`}
|
)}
|
||||||
</Text>
|
</Box>
|
||||||
)}
|
<Box shrink="No">
|
||||||
</Box>
|
<IconButton size="300" radii="300" onClick={onDismiss}>
|
||||||
<Box shrink="No">
|
<Icon src={Icons.Cross} />
|
||||||
<IconButton size="300" radii="300" onClick={onDismiss}>
|
</IconButton>
|
||||||
<Icon src={Icons.Cross} />
|
</Box>
|
||||||
</IconButton>
|
</Header>
|
||||||
</Box>
|
|
||||||
</Header>
|
|
||||||
|
|
||||||
<Box
|
<Box
|
||||||
style={{
|
style={{
|
||||||
padding: `0 ${config.space.S300}`,
|
padding: config.space.S200,
|
||||||
paddingTop: config.space.S200,
|
}}
|
||||||
paddingBottom: config.space.S200,
|
>
|
||||||
}}
|
<Input
|
||||||
>
|
onChange={handleSearchChange}
|
||||||
<Input
|
before={<Icon size="200" src={Icons.Search} />}
|
||||||
onChange={handleSearchChange}
|
placeholder="Search rooms…"
|
||||||
before={<Icon size="200" src={Icons.Search} />}
|
size="400"
|
||||||
placeholder="Search rooms…"
|
variant="Background"
|
||||||
size="400"
|
outlined
|
||||||
variant="Background"
|
autoFocus
|
||||||
outlined
|
style={{ width: '100%' }}
|
||||||
autoFocus
|
/>
|
||||||
/>
|
</Box>
|
||||||
</Box>
|
|
||||||
|
|
||||||
<Scroll ref={scrollRef} size="300" hideTrack style={{ flex: 1, minHeight: 0 }}>
|
<Scroll ref={scrollRef} size="300" hideTrack style={{ flex: 1, minHeight: 0 }}>
|
||||||
|
<Box style={{ padding: config.space.S300, paddingTop: config.space.S300 }} direction="Column">
|
||||||
|
{vItems.length === 0 && (
|
||||||
<Box
|
<Box
|
||||||
style={{ padding: config.space.S300, paddingTop: 0 }}
|
style={{ padding: `${config.space.S700} 0` }}
|
||||||
|
alignItems="Center"
|
||||||
|
justifyContent="Center"
|
||||||
direction="Column"
|
direction="Column"
|
||||||
|
gap="100"
|
||||||
>
|
>
|
||||||
{vItems.length === 0 && (
|
<Text size="H6" align="Center">
|
||||||
<Box
|
{searchResult ? 'No Match Found' : 'No Rooms'}
|
||||||
style={{ padding: `${config.space.S700} 0` }}
|
</Text>
|
||||||
alignItems="Center"
|
<Text size="T200" align="Center" priority="300">
|
||||||
justifyContent="Center"
|
{searchResult
|
||||||
direction="Column"
|
? `No rooms found for "${searchResult.query}".`
|
||||||
gap="100"
|
: 'You have no rooms to share into.'}
|
||||||
|
</Text>
|
||||||
|
</Box>
|
||||||
|
)}
|
||||||
|
<Box style={{ position: 'relative', height: virtualizer.getTotalSize() }}>
|
||||||
|
{vItems.map((vItem) => {
|
||||||
|
const roomId = items[vItem.index];
|
||||||
|
const room = getRoom(roomId);
|
||||||
|
if (!room) return null;
|
||||||
|
const isDm = mDirects.has(roomId);
|
||||||
|
|
||||||
|
const avatarSrc = isDm
|
||||||
|
? getDirectRoomAvatarUrl(mx, room, 96, useAuthentication)
|
||||||
|
: getRoomAvatarUrl(mx, room, 96, useAuthentication);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<VirtualTile
|
||||||
|
virtualItem={vItem}
|
||||||
|
style={{ paddingBottom: config.space.S100 }}
|
||||||
|
ref={virtualizer.measureElement}
|
||||||
|
key={roomId}
|
||||||
>
|
>
|
||||||
<Text size="H6" align="Center">
|
<MenuItem
|
||||||
{searchResult ? 'No Match Found' : 'No Rooms'}
|
data-room-id={roomId}
|
||||||
</Text>
|
onClick={handleRoomClick}
|
||||||
<Text size="T200" align="Center" priority="300">
|
variant="Surface"
|
||||||
{searchResult
|
size="400"
|
||||||
? `No rooms found for "${searchResult.query}".`
|
radii="400"
|
||||||
: 'You have no rooms to share into.'}
|
before={
|
||||||
</Text>
|
<Avatar size="300" radii={isDm ? '400' : '300'}>
|
||||||
</Box>
|
{avatarSrc ? (
|
||||||
)}
|
<RoomAvatar
|
||||||
<Box
|
roomId={roomId}
|
||||||
style={{ position: 'relative', height: virtualizer.getTotalSize() }}
|
src={avatarSrc}
|
||||||
>
|
alt={room.name}
|
||||||
{vItems.map((vItem) => {
|
renderFallback={() => (
|
||||||
const roomId = items[vItem.index];
|
<Text as="span" size="H6">
|
||||||
const room = getRoom(roomId);
|
{nameInitials(room.name)}
|
||||||
if (!room) return null;
|
</Text>
|
||||||
const isDm = mDirects.has(roomId);
|
|
||||||
|
|
||||||
const avatarSrc = isDm
|
|
||||||
? getDirectRoomAvatarUrl(mx, room, 96, useAuthentication)
|
|
||||||
: getRoomAvatarUrl(mx, room, 96, useAuthentication);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<VirtualTile
|
|
||||||
virtualItem={vItem}
|
|
||||||
style={{ paddingBottom: config.space.S100 }}
|
|
||||||
ref={virtualizer.measureElement}
|
|
||||||
key={roomId}
|
|
||||||
>
|
|
||||||
<MenuItem
|
|
||||||
data-room-id={roomId}
|
|
||||||
onClick={handleRoomClick}
|
|
||||||
variant="Surface"
|
|
||||||
size="400"
|
|
||||||
radii="400"
|
|
||||||
before={
|
|
||||||
<Avatar size="300" radii={isDm ? '400' : '300'}>
|
|
||||||
{avatarSrc ? (
|
|
||||||
<RoomAvatar
|
|
||||||
roomId={roomId}
|
|
||||||
src={avatarSrc}
|
|
||||||
alt={room.name}
|
|
||||||
renderFallback={() => (
|
|
||||||
<Text as="span" size="H6">
|
|
||||||
{nameInitials(room.name)}
|
|
||||||
</Text>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<RoomIcon room={room} size="200" filled />
|
|
||||||
)}
|
)}
|
||||||
</Avatar>
|
/>
|
||||||
}
|
) : (
|
||||||
>
|
<RoomIcon room={room} size="200" filled />
|
||||||
<Box grow="Yes" direction="Column">
|
)}
|
||||||
<Text size="B400" truncate>
|
</Avatar>
|
||||||
{room.name}
|
}
|
||||||
</Text>
|
>
|
||||||
</Box>
|
<Box grow="Yes" direction="Column">
|
||||||
</MenuItem>
|
<Text size="B400" truncate>
|
||||||
</VirtualTile>
|
{room.name}
|
||||||
);
|
</Text>
|
||||||
})}
|
</Box>
|
||||||
|
</MenuItem>
|
||||||
|
</VirtualTile>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
</Scroll>
|
||||||
|
</Box>
|
||||||
|
</FocusTrap>
|
||||||
|
|
||||||
|
{confirmRoomId && (() => {
|
||||||
|
const room = getRoom(confirmRoomId);
|
||||||
|
const roomName = room?.name ?? confirmRoomId;
|
||||||
|
const isDm = mDirects.has(confirmRoomId);
|
||||||
|
return (
|
||||||
|
<OverlayCenter style={{ zIndex: 9999 }}>
|
||||||
|
<FocusTrap
|
||||||
|
focusTrapOptions={{
|
||||||
|
initialFocus: false,
|
||||||
|
onDeactivate: handleCancelConfirm,
|
||||||
|
escapeDeactivates: stopPropagation,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Modal size="300" style={{ zIndex: 9999 }}>
|
||||||
|
<Box direction="Column" gap="100" style={{ padding: config.space.S400 }}>
|
||||||
|
<Box direction="Column" gap="200">
|
||||||
|
<Text size="H4">Share to {isDm ? 'Person' : 'Room'}?</Text>
|
||||||
|
<Text size="T300" priority="300">
|
||||||
|
Send to <strong>{roomName}</strong>?
|
||||||
|
</Text>
|
||||||
|
</Box>
|
||||||
|
<Box gap="200" justifyContent="End">
|
||||||
|
<Button
|
||||||
|
onClick={handleCancelConfirm}
|
||||||
|
variant="Secondary"
|
||||||
|
size="400"
|
||||||
|
>
|
||||||
|
<Text size="B400">Cancel</Text>
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
onClick={handleConfirm}
|
||||||
|
variant="Primary"
|
||||||
|
size="400"
|
||||||
|
>
|
||||||
|
<Text size="B400">Share</Text>
|
||||||
|
</Button>
|
||||||
</Box>
|
</Box>
|
||||||
</Box>
|
</Box>
|
||||||
</Scroll>
|
</Modal>
|
||||||
</Box>
|
</FocusTrap>
|
||||||
</Modal>
|
</OverlayCenter>
|
||||||
</FocusTrap>
|
);
|
||||||
</OverlayCenter>
|
})()}
|
||||||
</Overlay>
|
</Overlay>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -518,11 +518,7 @@ function TaskbarFlashStopper() {
|
|||||||
function AndroidShareIntentHandler() {
|
function AndroidShareIntentHandler() {
|
||||||
const mx = useMatrixClient();
|
const mx = useMatrixClient();
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
const [isMarkdown] = useSetting(settingsAtom, 'isMarkdown');
|
|
||||||
const [pendingShare, setPendingShare] = useState<AndroidSharePayload | null>(null);
|
const [pendingShare, setPendingShare] = useState<AndroidSharePayload | null>(null);
|
||||||
const [pickedRoomId, setPickedRoomId] = useState<string | null>(null);
|
|
||||||
const [msgDraft, setMsgDraft] = useAtom(roomIdToMsgDraftAtomFamily(pickedRoomId ?? '__android_share__'));
|
|
||||||
const setUploadItems = useSetAtom(roomIdToUploadItemsAtomFamily(pickedRoomId ?? '__android_share__'));
|
|
||||||
const mDirects = useAtomValue(mDirectAtom);
|
const mDirects = useAtomValue(mDirectAtom);
|
||||||
const roomToParents = useAtomValue(roomToParentsAtom);
|
const roomToParents = useAtomValue(roomToParentsAtom);
|
||||||
|
|
||||||
@@ -531,60 +527,81 @@ function AndroidShareIntentHandler() {
|
|||||||
const room = mx.getRoom(roomId);
|
const room = mx.getRoom(roomId);
|
||||||
if (!room) return false;
|
if (!room) return false;
|
||||||
|
|
||||||
|
// Send text message if present
|
||||||
const nextParts = [share.subject?.trim(), share.text?.trim()].filter(
|
const nextParts = [share.subject?.trim(), share.text?.trim()].filter(
|
||||||
(value): value is string => !!value
|
(value): value is string => !!value
|
||||||
);
|
);
|
||||||
if (nextParts.length > 0) {
|
if (nextParts.length > 0) {
|
||||||
const existingText = toPlainText(msgDraft, isMarkdown).trim();
|
const textContent = {
|
||||||
const nextText = existingText ? `${existingText}\n${nextParts.join('\n')}` : nextParts.join('\n');
|
msgtype: 'm.text' as const,
|
||||||
setMsgDraft(plainToEditorInput(nextText, isMarkdown));
|
body: nextParts.join('\n'),
|
||||||
|
};
|
||||||
|
await mx.sendMessage(roomId, textContent);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Upload and send files if present
|
||||||
if (share.files.length > 0) {
|
if (share.files.length > 0) {
|
||||||
const uploadItems: TUploadItem[] = [];
|
|
||||||
for (const sharedFile of share.files) {
|
for (const sharedFile of share.files) {
|
||||||
const originalFile = await materializeSharedFile(sharedFile, share.receivedAt);
|
const originalFile = await materializeSharedFile(sharedFile, share.receivedAt);
|
||||||
|
|
||||||
|
let fileToUpload = originalFile;
|
||||||
|
let encInfo: any = undefined;
|
||||||
|
|
||||||
if (room.hasEncryptionStateEvent()) {
|
if (room.hasEncryptionStateEvent()) {
|
||||||
const encrypted = await encryptFile(originalFile);
|
const encrypted = await encryptFile(originalFile);
|
||||||
uploadItems.push({
|
fileToUpload = encrypted.file;
|
||||||
file: encrypted.file,
|
encInfo = encrypted.encInfo;
|
||||||
originalFile,
|
|
||||||
metadata: { markedAsSpoiler: false },
|
|
||||||
encInfo: encrypted.encInfo,
|
|
||||||
});
|
|
||||||
continue;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
uploadItems.push({
|
// Upload file
|
||||||
file: originalFile,
|
const uploadResult = await mx.uploadContent(fileToUpload);
|
||||||
originalFile,
|
const mxc = uploadResult?.content_uri;
|
||||||
metadata: { markedAsSpoiler: false },
|
if (!mxc) continue;
|
||||||
encInfo: undefined,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
setUploadItems({
|
// Determine message type and send
|
||||||
type: 'PUT',
|
const fileType = originalFile.type;
|
||||||
item: uploadItems,
|
let msgtype = 'm.file' as const;
|
||||||
});
|
if (fileType.startsWith('image/')) msgtype = 'm.image' as const;
|
||||||
|
else if (fileType.startsWith('video/')) msgtype = 'm.video' as const;
|
||||||
|
else if (fileType.startsWith('audio/')) msgtype = 'm.audio' as const;
|
||||||
|
|
||||||
|
const fileContent: any = {
|
||||||
|
msgtype,
|
||||||
|
body: originalFile.name,
|
||||||
|
filename: originalFile.name,
|
||||||
|
info: {
|
||||||
|
mimetype: originalFile.type,
|
||||||
|
size: originalFile.size,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
if (encInfo) {
|
||||||
|
fileContent.file = {
|
||||||
|
...encInfo,
|
||||||
|
url: mxc,
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
fileContent.url = mxc;
|
||||||
|
}
|
||||||
|
|
||||||
|
await mx.sendMessage(roomId, fileContent);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
await clearPendingAndroidShare();
|
await clearPendingAndroidShare();
|
||||||
return true;
|
return true;
|
||||||
},
|
},
|
||||||
[isMarkdown, msgDraft, mx, setMsgDraft, setUploadItems]
|
[mx]
|
||||||
);
|
);
|
||||||
|
|
||||||
const handlePickRoom = useCallback(
|
const handlePickRoom = useCallback(
|
||||||
(roomId: string) => {
|
(roomId: string) => {
|
||||||
setPickedRoomId(roomId);
|
|
||||||
if (!pendingShare) return;
|
if (!pendingShare) return;
|
||||||
|
|
||||||
applyPendingShare(pendingShare, roomId)
|
applyPendingShare(pendingShare, roomId)
|
||||||
.then((applied) => {
|
.then((applied) => {
|
||||||
if (applied) {
|
if (applied) {
|
||||||
setPendingShare(null);
|
setPendingShare(null);
|
||||||
setPickedRoomId(null);
|
|
||||||
|
|
||||||
// Navigate to the selected room
|
// Navigate to the selected room
|
||||||
const isDirect = mDirects.has(roomId);
|
const isDirect = mDirects.has(roomId);
|
||||||
@@ -604,7 +621,6 @@ function AndroidShareIntentHandler() {
|
|||||||
.catch((err) => {
|
.catch((err) => {
|
||||||
console.error('[AndroidShare] Failed to apply share after pick:', err);
|
console.error('[AndroidShare] Failed to apply share after pick:', err);
|
||||||
setPendingShare(null);
|
setPendingShare(null);
|
||||||
setPickedRoomId(null);
|
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
[applyPendingShare, pendingShare, navigate, mDirects, roomToParents]
|
[applyPendingShare, pendingShare, navigate, mDirects, roomToParents]
|
||||||
@@ -613,7 +629,6 @@ function AndroidShareIntentHandler() {
|
|||||||
const handleDismiss = useCallback(() => {
|
const handleDismiss = useCallback(() => {
|
||||||
clearPendingAndroidShare().catch(() => {});
|
clearPendingAndroidShare().catch(() => {});
|
||||||
setPendingShare(null);
|
setPendingShare(null);
|
||||||
setPickedRoomId(null);
|
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "paarrot",
|
"name": "paarrot",
|
||||||
"version": "4.11.101",
|
"version": "4.11.106",
|
||||||
"description": "Paarrot - A Matrix client based on Cinny",
|
"description": "Paarrot - A Matrix client based on Cinny",
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": ">=18.0.0"
|
"node": ">=18.0.0"
|
||||||
|
|||||||
Reference in New Issue
Block a user