forked from github/cinny
Refactor timeline (#1346)
* fix intersection & resize observer * add binary search util * add scroll info util * add virtual paginator hook - WIP * render timeline using paginator hook * add continuous pagination to fill timeline * add doc comments in virtual paginator hook * add scroll to element func in virtual paginator * extract timeline pagination login into hook * add sliding name for timeline messages - testing * scroll with live event * change message rending style * make message timestamp smaller * remove unused imports * add random number between util * add compact message component * add sanitize html types * fix sending alias in room mention * get room member display name util * add get room with canonical alias util * add sanitize html util * render custom html with new styles * fix linkifying link text * add reaction component * display message reactions in timeline * Change mention color * show edited message * add event sent by function factory * add functions to get emoji shortcode * add component for reaction msg * add tooltip for who has reacted * add message layouts & placeholder * fix reaction size * fix dark theme colors * add code highlight with prismjs * add options to configure spacing in msgs * render message reply * fix trim reply from body regex * fix crash when loading reply * fix reply hover style * decrypt event on timeline paginate * update custom html code style * remove console logs * fix virtual paginator scroll to func * fix virtual paginator scroll to types * add stop scroll for in view item options * fix virtual paginator out of range scroll to index * scroll to and highlight reply on click * fix reply hover style * make message avatar clickable * fix scrollTo issue in virtual paginator * load reply from fetch * import virtual paginator restore scroll * load timeline for specific event * Fix back pagination recalibration * fix reply min height * revert code block colors to secondary * stop sanitizing text in code block * add decrypt file util * add image media component * update folds * fix code block font style * add msg event type * add scale dimension util * strict msg layout type * add image renderer component * add message content fallback components * add message matrix event renderer components * render matrix event using hooks * add attachment component * add attachment content types * handle error when rendering image in timeline * add video component * render video * include blurhash in thumbnails * generate thumbnails for image message * fix reactToDom spoiler opts * add hooks for HTMLMediaElement * render audio file in timeline * add msg image content component * fix image content props * add video content component * render new image/video component in timeline * remove console.log * convert seconds to milliseconds in video info * add load thumbnail prop to video content component * add file saver types * add file header component * add file content component * render file in timeline * add media control component * render audio message in room timeline * remove moved components * safely load message reply * add media loading hook * update media control layout * add loading indication in audio component * fill audio play icon when playing audio * fix media expanding * add image viewer - WIP * add pan and zoom control to image viewer * add text based file viewer * add pdf viewer * add error handling in pdf viewer * add download btn to pdf viewer * fix file button spinner fill * fix file opens on re-render * add range slider in audio content player * render location in timeline * update folds * display membership event in timeline * make reactions toggle * render sticker messages in timeline * render room name, topic, avatar change and event * fix typos * update render state event type style * add room intro in start of timeline * add power levels context * fix wrong param passing in RoomView * fix sending typing notification in wrong room Slate onChange callback was not updating with react re-renders. * send typing status on key up * add typing indicator component * add typing member atom * display typing status in member drawer * add room view typing member component * display typing members in room view * remove old roomTimeline uses * add event readers hook * add latest event hook * display following members in room view * fetch event instead of event context for reply * fix typo in virtual paginator hook * add scroll to latest btn in timeline * change scroll to latest chip variant * destructure paginator object to improve perf * restore forward dir scroll in virtual paginator * run scroll to bottom in layout effect * display unread message indicator in timeline * make component for room timeline float * add timeline divider component * add day divider and format message time * apply message spacing to dividers * format date in room intro * send read receipt on message arrive * add event readers component * add reply, read receipt, source delete opt * bug fixes * update timeline on delete & show reason * fix empty reaction container style * show msg selection effect on msg option open * add report message options * add options to send quick reactions * add emoji board in message options * add reaction viewer * fix styles * show view reaction in msg options menu * fix spacing between two msg by same person * add option menu in other rendered event * handle m.room.encrypted messages * fix italic reply text overflow cut * handle encrypted sticker messages * remove console log * prevent message context menu with alt key pressed * make mentions clickable in messages * add options to show and hidden events in timeline * add option to disable media autoload * remove old emojiboard opener * add options to use system emoji * refresh timeline on reset * fix stuck typing member in member drawer
This commit is contained in:
Ajay Bura
250
src/app/organisms/room/message/FileContent.tsx
Normal file
250
src/app/organisms/room/message/FileContent.tsx
Normal file
@@ -0,0 +1,250 @@
|
||||
import React, { useCallback, useState } from 'react';
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Icon,
|
||||
Icons,
|
||||
Modal,
|
||||
Overlay,
|
||||
OverlayBackdrop,
|
||||
OverlayCenter,
|
||||
Spinner,
|
||||
Text,
|
||||
Tooltip,
|
||||
TooltipProvider,
|
||||
as,
|
||||
} from 'folds';
|
||||
import FileSaver from 'file-saver';
|
||||
import { EncryptedAttachmentInfo } from 'browser-encrypt-attachment';
|
||||
import FocusTrap from 'focus-trap-react';
|
||||
import { IFileInfo } from '../../../../types/matrix/common';
|
||||
import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
|
||||
import { useMatrixClient } from '../../../hooks/useMatrixClient';
|
||||
import { getFileSrcUrl, getSrcFile } from './util';
|
||||
import { bytesToSize } from '../../../utils/common';
|
||||
import { TextViewer } from '../../../components/text-viewer';
|
||||
import { READABLE_TEXT_MIME_TYPES } from '../../../utils/mimeTypes';
|
||||
import { PdfViewer } from '../../../components/Pdf-viewer';
|
||||
|
||||
export type FileContentProps = {
|
||||
body: string;
|
||||
mimeType: string;
|
||||
url: string;
|
||||
info: IFileInfo;
|
||||
encInfo?: EncryptedAttachmentInfo;
|
||||
};
|
||||
|
||||
const renderErrorButton = (retry: () => void, text: string) => (
|
||||
<TooltipProvider
|
||||
tooltip={
|
||||
<Tooltip variant="Critical">
|
||||
<Text>Failed to load file!</Text>
|
||||
</Tooltip>
|
||||
}
|
||||
position="Top"
|
||||
align="Center"
|
||||
>
|
||||
{(triggerRef) => (
|
||||
<Button
|
||||
ref={triggerRef}
|
||||
size="400"
|
||||
variant="Critical"
|
||||
fill="Soft"
|
||||
outlined
|
||||
radii="300"
|
||||
onClick={retry}
|
||||
before={<Icon size="100" src={Icons.Warning} filled />}
|
||||
>
|
||||
<Text size="B400" truncate>
|
||||
{text}
|
||||
</Text>
|
||||
</Button>
|
||||
)}
|
||||
</TooltipProvider>
|
||||
);
|
||||
|
||||
function ReadTextFile({ body, mimeType, url, encInfo }: Omit<FileContentProps, 'info'>) {
|
||||
const mx = useMatrixClient();
|
||||
const [textViewer, setTextViewer] = useState(false);
|
||||
|
||||
const loadSrc = useCallback(
|
||||
() => getFileSrcUrl(mx.mxcUrlToHttp(url) ?? '', mimeType, encInfo),
|
||||
[mx, url, mimeType, encInfo]
|
||||
);
|
||||
|
||||
const [textState, loadText] = useAsyncCallback(
|
||||
useCallback(async () => {
|
||||
const src = await loadSrc();
|
||||
const blob = await getSrcFile(src);
|
||||
const text = blob.text();
|
||||
setTextViewer(true);
|
||||
return text;
|
||||
}, [loadSrc])
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
{textState.status === AsyncStatus.Success && (
|
||||
<Overlay open={textViewer} backdrop={<OverlayBackdrop />}>
|
||||
<OverlayCenter>
|
||||
<FocusTrap
|
||||
focusTrapOptions={{
|
||||
initialFocus: false,
|
||||
onDeactivate: () => setTextViewer(false),
|
||||
clickOutsideDeactivates: true,
|
||||
}}
|
||||
>
|
||||
<Modal size="500">
|
||||
<TextViewer
|
||||
name={body}
|
||||
text={textState.data}
|
||||
mimeType={mimeType}
|
||||
requestClose={() => setTextViewer(false)}
|
||||
/>
|
||||
</Modal>
|
||||
</FocusTrap>
|
||||
</OverlayCenter>
|
||||
</Overlay>
|
||||
)}
|
||||
{textState.status === AsyncStatus.Error ? (
|
||||
renderErrorButton(loadText, 'Open File')
|
||||
) : (
|
||||
<Button
|
||||
variant="Secondary"
|
||||
fill="Solid"
|
||||
radii="300"
|
||||
size="400"
|
||||
onClick={() =>
|
||||
textState.status === AsyncStatus.Success ? setTextViewer(true) : loadText()
|
||||
}
|
||||
disabled={textState.status === AsyncStatus.Loading}
|
||||
before={
|
||||
textState.status === AsyncStatus.Loading ? (
|
||||
<Spinner fill="Solid" size="100" variant="Secondary" />
|
||||
) : (
|
||||
<Icon size="100" src={Icons.ArrowRight} filled />
|
||||
)
|
||||
}
|
||||
>
|
||||
<Text size="B400" truncate>
|
||||
Open File
|
||||
</Text>
|
||||
</Button>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function ReadPdfFile({ body, mimeType, url, encInfo }: Omit<FileContentProps, 'info'>) {
|
||||
const mx = useMatrixClient();
|
||||
const [pdfViewer, setPdfViewer] = useState(false);
|
||||
|
||||
const [pdfState, loadPdf] = useAsyncCallback(
|
||||
useCallback(async () => {
|
||||
const httpUrl = await getFileSrcUrl(mx.mxcUrlToHttp(url) ?? '', mimeType, encInfo);
|
||||
setPdfViewer(true);
|
||||
return httpUrl;
|
||||
}, [mx, url, mimeType, encInfo])
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
{pdfState.status === AsyncStatus.Success && (
|
||||
<Overlay open={pdfViewer} backdrop={<OverlayBackdrop />}>
|
||||
<OverlayCenter>
|
||||
<FocusTrap
|
||||
focusTrapOptions={{
|
||||
initialFocus: false,
|
||||
onDeactivate: () => setPdfViewer(false),
|
||||
clickOutsideDeactivates: true,
|
||||
}}
|
||||
>
|
||||
<Modal size="500">
|
||||
<PdfViewer
|
||||
name={body}
|
||||
src={pdfState.data}
|
||||
requestClose={() => setPdfViewer(false)}
|
||||
/>
|
||||
</Modal>
|
||||
</FocusTrap>
|
||||
</OverlayCenter>
|
||||
</Overlay>
|
||||
)}
|
||||
{pdfState.status === AsyncStatus.Error ? (
|
||||
renderErrorButton(loadPdf, 'Open PDF')
|
||||
) : (
|
||||
<Button
|
||||
variant="Secondary"
|
||||
fill="Solid"
|
||||
radii="300"
|
||||
size="400"
|
||||
onClick={() => (pdfState.status === AsyncStatus.Success ? setPdfViewer(true) : loadPdf())}
|
||||
disabled={pdfState.status === AsyncStatus.Loading}
|
||||
before={
|
||||
pdfState.status === AsyncStatus.Loading ? (
|
||||
<Spinner fill="Solid" size="100" variant="Secondary" />
|
||||
) : (
|
||||
<Icon size="100" src={Icons.ArrowRight} filled />
|
||||
)
|
||||
}
|
||||
>
|
||||
<Text size="B400" truncate>
|
||||
Open PDF
|
||||
</Text>
|
||||
</Button>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function DownloadFile({ body, mimeType, url, info, encInfo }: FileContentProps) {
|
||||
const mx = useMatrixClient();
|
||||
|
||||
const [downloadState, download] = useAsyncCallback(
|
||||
useCallback(async () => {
|
||||
const httpUrl = await getFileSrcUrl(mx.mxcUrlToHttp(url) ?? '', mimeType, encInfo);
|
||||
FileSaver.saveAs(httpUrl, body);
|
||||
return httpUrl;
|
||||
}, [mx, url, mimeType, encInfo, body])
|
||||
);
|
||||
|
||||
return downloadState.status === AsyncStatus.Error ? (
|
||||
renderErrorButton(download, `Retry Download (${bytesToSize(info.size ?? 0)})`)
|
||||
) : (
|
||||
<Button
|
||||
variant="Secondary"
|
||||
fill="Soft"
|
||||
radii="300"
|
||||
size="400"
|
||||
onClick={() =>
|
||||
downloadState.status === AsyncStatus.Success
|
||||
? FileSaver.saveAs(downloadState.data, body)
|
||||
: download()
|
||||
}
|
||||
disabled={downloadState.status === AsyncStatus.Loading}
|
||||
before={
|
||||
downloadState.status === AsyncStatus.Loading ? (
|
||||
<Spinner fill="Soft" size="100" variant="Secondary" />
|
||||
) : (
|
||||
<Icon size="100" src={Icons.Download} filled />
|
||||
)
|
||||
}
|
||||
>
|
||||
<Text size="B400" truncate>{`Download (${bytesToSize(info.size ?? 0)})`}</Text>
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
|
||||
export const FileContent = as<'div', FileContentProps>(
|
||||
({ body, mimeType, url, info, encInfo, ...props }, ref) => (
|
||||
<Box direction="Column" gap="300" {...props} ref={ref}>
|
||||
{READABLE_TEXT_MIME_TYPES.includes(mimeType) && (
|
||||
<ReadTextFile body={body} mimeType={mimeType} url={url} encInfo={encInfo} />
|
||||
)}
|
||||
{mimeType === 'application/pdf' && (
|
||||
<ReadPdfFile body={body} mimeType={mimeType} url={url} encInfo={encInfo} />
|
||||
)}
|
||||
<DownloadFile body={body} mimeType={mimeType} url={url} info={info} encInfo={encInfo} />
|
||||
</Box>
|
||||
)
|
||||
);
|
||||
Reference in New Issue
Block a user