mirror of
https://github.com/cinnyapp/cinny.git
synced 2025-11-16 04:00:29 +03:00
(chore) remove outdated code (#1765)
* optimize room typing members hook * remove unused code - WIP * remove old code from initMatrix * remove twemojify function * remove old sanitize util * delete old markdown util * delete Math atom component * uninstall unused dependencies * remove old notification system * decrypt message in inbox notification center and fix refresh in background * improve notification --------- Co-authored-by: Krishan <33421343+kfiven@users.noreply.github.com>
This commit is contained in:
Ajay Bura
GitHub
parent
60e022035f
commit
4f09e6bbb5
147 changed files with 1164 additions and 15330 deletions
|
|
@ -2,16 +2,21 @@ import React from 'react';
|
|||
import PropTypes from 'prop-types';
|
||||
import './Dialog.scss';
|
||||
|
||||
import { twemojify } from '../../../util/twemojify';
|
||||
|
||||
import Text from '../../atoms/text/Text';
|
||||
import Header, { TitleWrapper } from '../../atoms/header/Header';
|
||||
import ScrollView from '../../atoms/scroll/ScrollView';
|
||||
import RawModal from '../../atoms/modal/RawModal';
|
||||
|
||||
function Dialog({
|
||||
className, isOpen, title, onAfterOpen, onAfterClose,
|
||||
contentOptions, onRequestClose, closeFromOutside, children,
|
||||
className,
|
||||
isOpen,
|
||||
title,
|
||||
onAfterOpen,
|
||||
onAfterClose,
|
||||
contentOptions,
|
||||
onRequestClose,
|
||||
closeFromOutside,
|
||||
children,
|
||||
invisibleScroll,
|
||||
}) {
|
||||
return (
|
||||
|
|
@ -28,19 +33,19 @@ function Dialog({
|
|||
<div className="dialog__content">
|
||||
<Header>
|
||||
<TitleWrapper>
|
||||
{
|
||||
typeof title === 'string'
|
||||
? <Text variant="h2" weight="medium" primary>{twemojify(title)}</Text>
|
||||
: title
|
||||
}
|
||||
{typeof title === 'string' ? (
|
||||
<Text variant="h2" weight="medium" primary>
|
||||
{title}
|
||||
</Text>
|
||||
) : (
|
||||
title
|
||||
)}
|
||||
</TitleWrapper>
|
||||
{contentOptions}
|
||||
</Header>
|
||||
<div className="dialog__content__wrapper">
|
||||
<ScrollView autoHide={!invisibleScroll} invisible={invisibleScroll}>
|
||||
<div className="dialog__content-container">
|
||||
{children}
|
||||
</div>
|
||||
<div className="dialog__content-container">{children}</div>
|
||||
</ScrollView>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,61 +0,0 @@
|
|||
/* eslint-disable react/prop-types */
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import './FollowingMembers.scss';
|
||||
|
||||
import initMatrix from '../../../client/initMatrix';
|
||||
import cons from '../../../client/state/cons';
|
||||
import { openReadReceipts } from '../../../client/action/navigation';
|
||||
|
||||
import Text from '../../atoms/text/Text';
|
||||
import RawIcon from '../../atoms/system-icons/RawIcon';
|
||||
import TickMarkIC from '../../../../public/res/ic/outlined/tick-mark.svg';
|
||||
|
||||
import { getUsersActionJsx } from '../../organisms/room/common';
|
||||
|
||||
function FollowingMembers({ roomTimeline }) {
|
||||
const [followingMembers, setFollowingMembers] = useState([]);
|
||||
const { roomId } = roomTimeline;
|
||||
const mx = initMatrix.matrixClient;
|
||||
const myUserId = mx.getUserId();
|
||||
|
||||
useEffect(() => {
|
||||
const updateFollowingMembers = () => {
|
||||
setFollowingMembers(roomTimeline.getLiveReaders());
|
||||
};
|
||||
const updateOnEvent = (event, room) => {
|
||||
if (room.roomId !== roomId) return;
|
||||
setFollowingMembers(roomTimeline.getLiveReaders());
|
||||
};
|
||||
updateFollowingMembers();
|
||||
roomTimeline.on(cons.events.roomTimeline.LIVE_RECEIPT, updateFollowingMembers);
|
||||
mx.on('Room.timeline', updateOnEvent);
|
||||
return () => {
|
||||
roomTimeline.removeListener(cons.events.roomTimeline.LIVE_RECEIPT, updateFollowingMembers);
|
||||
mx.removeListener('Room.timeline', updateOnEvent);
|
||||
};
|
||||
}, [roomTimeline, roomId]);
|
||||
|
||||
const filteredM = followingMembers.filter((userId) => userId !== myUserId);
|
||||
|
||||
return (
|
||||
filteredM.length !== 0 && (
|
||||
<button
|
||||
className="following-members"
|
||||
onClick={() => openReadReceipts(roomId, followingMembers)}
|
||||
type="button"
|
||||
>
|
||||
<RawIcon size="extra-small" src={TickMarkIC} />
|
||||
<Text variant="b2">
|
||||
{getUsersActionJsx(roomId, filteredM, 'following the conversation.')}
|
||||
</Text>
|
||||
</button>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
FollowingMembers.propTypes = {
|
||||
roomTimeline: PropTypes.shape({}).isRequired,
|
||||
};
|
||||
|
||||
export default FollowingMembers;
|
||||
|
|
@ -1,31 +0,0 @@
|
|||
@use '../../partials/text';
|
||||
|
||||
.following-members {
|
||||
width: 100%;
|
||||
padding: 0 var(--sp-normal);
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
|
||||
& .ic-raw {
|
||||
min-width: var(--ic-extra-small);
|
||||
opacity: 0.4;
|
||||
margin: 0 var(--sp-extra-tight);
|
||||
}
|
||||
& .text {
|
||||
@extend .cp-txt__ellipsis;
|
||||
color: var(--tc-surface-low);
|
||||
b {
|
||||
color: var(--tc-surface-normal);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: var(--bg-surface-hover);
|
||||
}
|
||||
&:active {
|
||||
background-color: var(--bg-surface-active);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,47 +0,0 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import './ImageLightbox.scss';
|
||||
import FileSaver from 'file-saver';
|
||||
|
||||
import Text from '../../atoms/text/Text';
|
||||
import RawModal from '../../atoms/modal/RawModal';
|
||||
import IconButton from '../../atoms/button/IconButton';
|
||||
|
||||
import DownloadSVG from '../../../../public/res/ic/outlined/download.svg';
|
||||
import ExternalSVG from '../../../../public/res/ic/outlined/external.svg';
|
||||
|
||||
function ImageLightbox({
|
||||
url, alt, isOpen, onRequestClose,
|
||||
}) {
|
||||
const handleDownload = () => {
|
||||
FileSaver.saveAs(url, alt);
|
||||
};
|
||||
|
||||
return (
|
||||
<RawModal
|
||||
className="image-lightbox__modal"
|
||||
overlayClassName="image-lightbox__overlay"
|
||||
isOpen={isOpen}
|
||||
onRequestClose={onRequestClose}
|
||||
size="large"
|
||||
>
|
||||
<div className="image-lightbox__header">
|
||||
<Text variant="b2" weight="medium">{alt}</Text>
|
||||
<IconButton onClick={() => window.open(url)} size="small" src={ExternalSVG} />
|
||||
<IconButton onClick={handleDownload} size="small" src={DownloadSVG} />
|
||||
</div>
|
||||
<div className="image-lightbox__content">
|
||||
<img src={url} alt={alt} />
|
||||
</div>
|
||||
</RawModal>
|
||||
);
|
||||
}
|
||||
|
||||
ImageLightbox.propTypes = {
|
||||
url: PropTypes.string.isRequired,
|
||||
alt: PropTypes.string.isRequired,
|
||||
isOpen: PropTypes.bool.isRequired,
|
||||
onRequestClose: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
export default ImageLightbox;
|
||||
|
|
@ -1,50 +0,0 @@
|
|||
@use '../../partials/flex';
|
||||
@use '../../partials/text';
|
||||
|
||||
.image-lightbox__modal {
|
||||
box-shadow: none;
|
||||
width: unset;
|
||||
gap: var(--sp-normal);
|
||||
|
||||
border-radius: 0;
|
||||
pointer-events: none;
|
||||
|
||||
& .text {
|
||||
color: white;
|
||||
}
|
||||
& .ic-raw {
|
||||
background-color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.image-lightbox__overlay {
|
||||
background-color: var(--bg-overlay-low);
|
||||
}
|
||||
|
||||
|
||||
.image-lightbox__header > *,
|
||||
.image-lightbox__content > * {
|
||||
pointer-events: all;
|
||||
}
|
||||
.image-lightbox__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
& > .text {
|
||||
@extend .cp-fx__item-one;
|
||||
@extend .cp-txt__ellipsis;
|
||||
}
|
||||
}
|
||||
.image-lightbox__content {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
max-height: 80vh;
|
||||
|
||||
& img {
|
||||
background-color: var(--bg-surface-low);
|
||||
object-fit: contain;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
border-radius: var(--bo-radius);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,366 +0,0 @@
|
|||
import React, { useState, useEffect } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import './Media.scss';
|
||||
|
||||
import encrypt from 'browser-encrypt-attachment';
|
||||
|
||||
import { BlurhashCanvas } from 'react-blurhash';
|
||||
import Text from '../../atoms/text/Text';
|
||||
import IconButton from '../../atoms/button/IconButton';
|
||||
import Spinner from '../../atoms/spinner/Spinner';
|
||||
import ImageLightbox from '../image-lightbox/ImageLightbox';
|
||||
|
||||
import DownloadSVG from '../../../../public/res/ic/outlined/download.svg';
|
||||
import ExternalSVG from '../../../../public/res/ic/outlined/external.svg';
|
||||
import PlaySVG from '../../../../public/res/ic/outlined/play.svg';
|
||||
|
||||
import { getBlobSafeMimeType } from '../../../util/mimetypes';
|
||||
|
||||
async function getDecryptedBlob(response, type, decryptData) {
|
||||
const arrayBuffer = await response.arrayBuffer();
|
||||
const dataArray = await encrypt.decryptAttachment(arrayBuffer, decryptData);
|
||||
const blob = new Blob([dataArray], { type: getBlobSafeMimeType(type) });
|
||||
return blob;
|
||||
}
|
||||
|
||||
async function getUrl(link, type, decryptData) {
|
||||
try {
|
||||
const response = await fetch(link, { method: 'GET' });
|
||||
if (decryptData !== null) {
|
||||
return URL.createObjectURL(await getDecryptedBlob(response, type, decryptData));
|
||||
}
|
||||
const blob = await response.blob();
|
||||
return URL.createObjectURL(blob);
|
||||
} catch (e) {
|
||||
return link;
|
||||
}
|
||||
}
|
||||
|
||||
function getNativeHeight(width, height, maxWidth = 296) {
|
||||
const scale = maxWidth / width;
|
||||
return scale * height;
|
||||
}
|
||||
|
||||
function FileHeader({
|
||||
name, link, external,
|
||||
file, type,
|
||||
}) {
|
||||
const [url, setUrl] = useState(null);
|
||||
|
||||
async function getFile() {
|
||||
const myUrl = await getUrl(link, type, file);
|
||||
setUrl(myUrl);
|
||||
}
|
||||
|
||||
async function handleDownload(e) {
|
||||
if (file !== null && url === null) {
|
||||
e.preventDefault();
|
||||
await getFile();
|
||||
e.target.click();
|
||||
}
|
||||
}
|
||||
return (
|
||||
<div className="file-header">
|
||||
<Text className="file-name" variant="b3">{name}</Text>
|
||||
{ link !== null && (
|
||||
<>
|
||||
{
|
||||
external && (
|
||||
<IconButton
|
||||
size="extra-small"
|
||||
tooltip="Open in new tab"
|
||||
src={ExternalSVG}
|
||||
onClick={() => window.open(url || link)}
|
||||
/>
|
||||
)
|
||||
}
|
||||
<a href={url || link} download={name} target="_blank" rel="noreferrer">
|
||||
<IconButton
|
||||
size="extra-small"
|
||||
tooltip="Download"
|
||||
src={DownloadSVG}
|
||||
onClick={handleDownload}
|
||||
/>
|
||||
</a>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
FileHeader.defaultProps = {
|
||||
external: false,
|
||||
file: null,
|
||||
link: null,
|
||||
};
|
||||
FileHeader.propTypes = {
|
||||
name: PropTypes.string.isRequired,
|
||||
link: PropTypes.string,
|
||||
external: PropTypes.bool,
|
||||
file: PropTypes.shape({}),
|
||||
type: PropTypes.string.isRequired,
|
||||
};
|
||||
|
||||
function File({
|
||||
name, link, file, type,
|
||||
}) {
|
||||
return (
|
||||
<div className="file-container">
|
||||
<FileHeader name={name} link={link} file={file} type={type} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
File.defaultProps = {
|
||||
file: null,
|
||||
type: '',
|
||||
};
|
||||
File.propTypes = {
|
||||
name: PropTypes.string.isRequired,
|
||||
link: PropTypes.string.isRequired,
|
||||
type: PropTypes.string,
|
||||
file: PropTypes.shape({}),
|
||||
};
|
||||
|
||||
function Image({
|
||||
name, width, height, link, file, type, blurhash,
|
||||
}) {
|
||||
const [url, setUrl] = useState(null);
|
||||
const [blur, setBlur] = useState(true);
|
||||
const [lightbox, setLightbox] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
let unmounted = false;
|
||||
async function fetchUrl() {
|
||||
const myUrl = await getUrl(link, type, file);
|
||||
if (unmounted) return;
|
||||
setUrl(myUrl);
|
||||
}
|
||||
fetchUrl();
|
||||
return () => {
|
||||
unmounted = true;
|
||||
};
|
||||
}, []);
|
||||
|
||||
const toggleLightbox = () => {
|
||||
if (!url) return;
|
||||
setLightbox(!lightbox);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="file-container">
|
||||
<div
|
||||
style={{ height: width !== null ? getNativeHeight(width, height) : 'unset' }}
|
||||
className="image-container"
|
||||
role="button"
|
||||
tabIndex="0"
|
||||
onClick={toggleLightbox}
|
||||
onKeyDown={toggleLightbox}
|
||||
>
|
||||
{ blurhash && blur && <BlurhashCanvas hash={blurhash} punch={1} />}
|
||||
{ url !== null && (
|
||||
<img
|
||||
style={{ display: blur ? 'none' : 'unset' }}
|
||||
onLoad={() => setBlur(false)}
|
||||
src={url || link}
|
||||
alt={name}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{url && (
|
||||
<ImageLightbox
|
||||
url={url}
|
||||
alt={name}
|
||||
isOpen={lightbox}
|
||||
onRequestClose={toggleLightbox}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
Image.defaultProps = {
|
||||
file: null,
|
||||
width: null,
|
||||
height: null,
|
||||
type: '',
|
||||
blurhash: '',
|
||||
};
|
||||
Image.propTypes = {
|
||||
name: PropTypes.string.isRequired,
|
||||
width: PropTypes.number,
|
||||
height: PropTypes.number,
|
||||
link: PropTypes.string.isRequired,
|
||||
file: PropTypes.shape({}),
|
||||
type: PropTypes.string,
|
||||
blurhash: PropTypes.string,
|
||||
};
|
||||
|
||||
function Sticker({
|
||||
name, height, width, link, file, type,
|
||||
}) {
|
||||
const [url, setUrl] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
let unmounted = false;
|
||||
async function fetchUrl() {
|
||||
const myUrl = await getUrl(link, type, file);
|
||||
if (unmounted) return;
|
||||
setUrl(myUrl);
|
||||
}
|
||||
fetchUrl();
|
||||
return () => {
|
||||
unmounted = true;
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="sticker-container" style={{ height: width !== null ? getNativeHeight(width, height, 128) : 'unset' }}>
|
||||
{ url !== null && <img src={url || link} title={name} alt={name} />}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Sticker.defaultProps = {
|
||||
file: null,
|
||||
type: '',
|
||||
width: null,
|
||||
height: null,
|
||||
};
|
||||
Sticker.propTypes = {
|
||||
name: PropTypes.string.isRequired,
|
||||
width: PropTypes.number,
|
||||
height: PropTypes.number,
|
||||
link: PropTypes.string.isRequired,
|
||||
file: PropTypes.shape({}),
|
||||
type: PropTypes.string,
|
||||
};
|
||||
|
||||
function Audio({
|
||||
name, link, type, file,
|
||||
}) {
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [url, setUrl] = useState(null);
|
||||
|
||||
async function loadAudio() {
|
||||
const myUrl = await getUrl(link, type, file);
|
||||
setUrl(myUrl);
|
||||
setIsLoading(false);
|
||||
}
|
||||
function handlePlayAudio() {
|
||||
setIsLoading(true);
|
||||
loadAudio();
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="file-container">
|
||||
<FileHeader name={name} link={file !== null ? url : url || link} type={type} external />
|
||||
<div className="audio-container">
|
||||
{ url === null && isLoading && <Spinner size="small" /> }
|
||||
{ url === null && !isLoading && <IconButton onClick={handlePlayAudio} tooltip="Play audio" src={PlaySVG} />}
|
||||
{ url !== null && (
|
||||
/* eslint-disable-next-line jsx-a11y/media-has-caption */
|
||||
<audio autoPlay controls>
|
||||
<source src={url} type={getBlobSafeMimeType(type)} />
|
||||
</audio>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Audio.defaultProps = {
|
||||
file: null,
|
||||
type: '',
|
||||
};
|
||||
Audio.propTypes = {
|
||||
name: PropTypes.string.isRequired,
|
||||
link: PropTypes.string.isRequired,
|
||||
type: PropTypes.string,
|
||||
file: PropTypes.shape({}),
|
||||
};
|
||||
|
||||
function Video({
|
||||
name, link, thumbnail, thumbnailFile, thumbnailType,
|
||||
width, height, file, type, blurhash,
|
||||
}) {
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [url, setUrl] = useState(null);
|
||||
const [thumbUrl, setThumbUrl] = useState(null);
|
||||
const [blur, setBlur] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
let unmounted = false;
|
||||
async function fetchUrl() {
|
||||
const myThumbUrl = await getUrl(thumbnail, thumbnailType, thumbnailFile);
|
||||
if (unmounted) return;
|
||||
setThumbUrl(myThumbUrl);
|
||||
}
|
||||
if (thumbnail !== null) fetchUrl();
|
||||
return () => {
|
||||
unmounted = true;
|
||||
};
|
||||
}, []);
|
||||
|
||||
const loadVideo = async () => {
|
||||
const myUrl = await getUrl(link, type, file);
|
||||
setUrl(myUrl);
|
||||
setIsLoading(false);
|
||||
};
|
||||
|
||||
const handlePlayVideo = () => {
|
||||
setIsLoading(true);
|
||||
loadVideo();
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="file-container">
|
||||
<FileHeader name={name} link={file !== null ? url : url || link} type={type} external />
|
||||
<div
|
||||
style={{
|
||||
height: width !== null ? getNativeHeight(width, height) : 'unset',
|
||||
}}
|
||||
className="video-container"
|
||||
>
|
||||
{ url === null ? (
|
||||
<>
|
||||
{ blurhash && blur && <BlurhashCanvas hash={blurhash} punch={1} />}
|
||||
{ thumbUrl !== null && (
|
||||
<img style={{ display: blur ? 'none' : 'unset' }} src={thumbUrl} onLoad={() => setBlur(false)} alt={name} />
|
||||
)}
|
||||
{isLoading && <Spinner size="small" />}
|
||||
{!isLoading && <IconButton onClick={handlePlayVideo} tooltip="Play video" src={PlaySVG} />}
|
||||
</>
|
||||
) : (
|
||||
/* eslint-disable-next-line jsx-a11y/media-has-caption */
|
||||
<video autoPlay controls poster={thumbUrl}>
|
||||
<source src={url} type={getBlobSafeMimeType(type)} />
|
||||
</video>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Video.defaultProps = {
|
||||
width: null,
|
||||
height: null,
|
||||
file: null,
|
||||
thumbnail: null,
|
||||
thumbnailType: null,
|
||||
thumbnailFile: null,
|
||||
type: '',
|
||||
blurhash: null,
|
||||
};
|
||||
Video.propTypes = {
|
||||
name: PropTypes.string.isRequired,
|
||||
link: PropTypes.string.isRequired,
|
||||
thumbnail: PropTypes.string,
|
||||
thumbnailFile: PropTypes.shape({}),
|
||||
thumbnailType: PropTypes.string,
|
||||
width: PropTypes.number,
|
||||
height: PropTypes.number,
|
||||
file: PropTypes.shape({}),
|
||||
type: PropTypes.string,
|
||||
blurhash: PropTypes.string,
|
||||
};
|
||||
|
||||
export {
|
||||
File, Image, Sticker, Audio, Video,
|
||||
};
|
||||
|
|
@ -1,90 +0,0 @@
|
|||
@use '../../partials/text';
|
||||
|
||||
.file-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: var(--sp-ultra-tight) var(--sp-tight);
|
||||
min-height: 42px;
|
||||
|
||||
& .file-name {
|
||||
@extend .cp-txt__ellipsis;
|
||||
flex: 1;
|
||||
color: var(--tc-surface-low);
|
||||
}
|
||||
|
||||
& a {
|
||||
line-height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.file-container {
|
||||
--media-max-width: 296px;
|
||||
|
||||
background-color: var(--bg-surface-hover);
|
||||
border-radius: calc(var(--bo-radius) / 2);
|
||||
overflow: hidden;
|
||||
max-width: var(--media-max-width);
|
||||
white-space: initial;
|
||||
}
|
||||
|
||||
.sticker-container {
|
||||
display: inline-flex;
|
||||
max-width: 128px;
|
||||
width: 100%;
|
||||
& img {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
.image-container,
|
||||
.video-container,
|
||||
.audio-container {
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.image-container,
|
||||
.video-container {
|
||||
& img,
|
||||
& canvas {
|
||||
max-width: unset !important;
|
||||
width: 100% !important;
|
||||
height: 100%;
|
||||
border-radius: 0 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
}
|
||||
.image-container {
|
||||
max-height: 460px;
|
||||
img {
|
||||
cursor: pointer;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.video-container {
|
||||
position: relative;
|
||||
& .ic-btn-surface {
|
||||
background-color: var(--bg-surface-low);
|
||||
}
|
||||
& .ic-btn-surface,
|
||||
& .donut-spinner {
|
||||
position: absolute;
|
||||
}
|
||||
video {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.audio-container {
|
||||
audio {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,853 +0,0 @@
|
|||
/* eslint-disable react/prop-types */
|
||||
import React, {
|
||||
useState, useEffect, useCallback, useRef,
|
||||
} from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import './Message.scss';
|
||||
|
||||
import { twemojify } from '../../../util/twemojify';
|
||||
|
||||
import initMatrix from '../../../client/initMatrix';
|
||||
import {
|
||||
getUsername, getUsernameOfRoomMember, parseReply, trimHTMLReply,
|
||||
} from '../../../util/matrixUtil';
|
||||
import colorMXID from '../../../util/colorMXID';
|
||||
import { getEventCords } from '../../../util/common';
|
||||
import { redactEvent, sendReaction } from '../../../client/action/roomTimeline';
|
||||
import {
|
||||
openEmojiBoard, openProfileViewer, openReadReceipts, openViewSource, replyTo,
|
||||
} from '../../../client/action/navigation';
|
||||
import { sanitizeCustomHtml } from '../../../util/sanitize';
|
||||
|
||||
import Text from '../../atoms/text/Text';
|
||||
import RawIcon from '../../atoms/system-icons/RawIcon';
|
||||
import Button from '../../atoms/button/Button';
|
||||
import Tooltip from '../../atoms/tooltip/Tooltip';
|
||||
import Input from '../../atoms/input/Input';
|
||||
import Avatar from '../../atoms/avatar/Avatar';
|
||||
import IconButton from '../../atoms/button/IconButton';
|
||||
import Time from '../../atoms/time/Time';
|
||||
import ContextMenu, { MenuHeader, MenuItem, MenuBorder } from '../../atoms/context-menu/ContextMenu';
|
||||
import * as Media from '../media/Media';
|
||||
|
||||
import ReplyArrowIC from '../../../../public/res/ic/outlined/reply-arrow.svg';
|
||||
import EmojiAddIC from '../../../../public/res/ic/outlined/emoji-add.svg';
|
||||
import VerticalMenuIC from '../../../../public/res/ic/outlined/vertical-menu.svg';
|
||||
import PencilIC from '../../../../public/res/ic/outlined/pencil.svg';
|
||||
import TickMarkIC from '../../../../public/res/ic/outlined/tick-mark.svg';
|
||||
import CmdIC from '../../../../public/res/ic/outlined/cmd.svg';
|
||||
import BinIC from '../../../../public/res/ic/outlined/bin.svg';
|
||||
|
||||
import { confirmDialog } from '../confirm-dialog/ConfirmDialog';
|
||||
import { getBlobSafeMimeType } from '../../../util/mimetypes';
|
||||
import { html, plain } from '../../../util/markdown';
|
||||
|
||||
function PlaceholderMessage() {
|
||||
return (
|
||||
<div className="ph-msg">
|
||||
<div className="ph-msg__avatar-container">
|
||||
<div className="ph-msg__avatar" />
|
||||
</div>
|
||||
<div className="ph-msg__main-container">
|
||||
<div className="ph-msg__header" />
|
||||
<div className="ph-msg__body">
|
||||
<div />
|
||||
<div />
|
||||
<div />
|
||||
<div />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const MessageAvatar = React.memo(({
|
||||
roomId, avatarSrc, userId, username,
|
||||
}) => (
|
||||
<div className="message__avatar-container">
|
||||
<button type="button" onClick={() => openProfileViewer(userId, roomId)}>
|
||||
<Avatar imageSrc={avatarSrc} text={username} bgColor={colorMXID(userId)} size="small" />
|
||||
</button>
|
||||
</div>
|
||||
));
|
||||
|
||||
const MessageHeader = React.memo(({
|
||||
userId, username, timestamp, fullTime,
|
||||
}) => (
|
||||
<div className="message__header">
|
||||
<Text
|
||||
style={{ color: colorMXID(userId) }}
|
||||
className="message__profile"
|
||||
variant="b1"
|
||||
weight="medium"
|
||||
span
|
||||
>
|
||||
<span>{twemojify(username)}</span>
|
||||
<span>{twemojify(userId)}</span>
|
||||
</Text>
|
||||
<div className="message__time">
|
||||
<Text variant="b3">
|
||||
<Time timestamp={timestamp} fullTime={fullTime} />
|
||||
</Text>
|
||||
</div>
|
||||
</div>
|
||||
));
|
||||
MessageHeader.defaultProps = {
|
||||
fullTime: false,
|
||||
};
|
||||
MessageHeader.propTypes = {
|
||||
userId: PropTypes.string.isRequired,
|
||||
username: PropTypes.string.isRequired,
|
||||
timestamp: PropTypes.number.isRequired,
|
||||
fullTime: PropTypes.bool,
|
||||
};
|
||||
|
||||
function MessageReply({ name, color, body }) {
|
||||
return (
|
||||
<div className="message__reply">
|
||||
<Text variant="b2">
|
||||
<RawIcon color={color} size="extra-small" src={ReplyArrowIC} />
|
||||
<span style={{ color }}>{twemojify(name)}</span>
|
||||
{' '}
|
||||
{twemojify(body)}
|
||||
</Text>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
MessageReply.propTypes = {
|
||||
name: PropTypes.string.isRequired,
|
||||
color: PropTypes.string.isRequired,
|
||||
body: PropTypes.string.isRequired,
|
||||
};
|
||||
|
||||
const MessageReplyWrapper = React.memo(({ roomTimeline, eventId }) => {
|
||||
const [reply, setReply] = useState(null);
|
||||
const isMountedRef = useRef(true);
|
||||
|
||||
useEffect(() => {
|
||||
const mx = initMatrix.matrixClient;
|
||||
const timelineSet = roomTimeline.getUnfilteredTimelineSet();
|
||||
const loadReply = async () => {
|
||||
try {
|
||||
const eTimeline = await mx.getEventTimeline(timelineSet, eventId);
|
||||
await roomTimeline.decryptAllEventsOfTimeline(eTimeline);
|
||||
|
||||
let mEvent = eTimeline.getTimelineSet().findEventById(eventId);
|
||||
const editedList = roomTimeline.editedTimeline.get(mEvent.getId());
|
||||
if (editedList) {
|
||||
mEvent = editedList[editedList.length - 1];
|
||||
}
|
||||
|
||||
const rawBody = mEvent.getContent().body;
|
||||
const username = getUsernameOfRoomMember(mEvent.sender);
|
||||
|
||||
if (isMountedRef.current === false) return;
|
||||
const fallbackBody = mEvent.isRedacted() ? '*** This message has been deleted ***' : '*** Unable to load reply ***';
|
||||
let parsedBody = parseReply(rawBody)?.body ?? rawBody ?? fallbackBody;
|
||||
if (editedList && parsedBody.startsWith(' * ')) {
|
||||
parsedBody = parsedBody.slice(3);
|
||||
}
|
||||
|
||||
setReply({
|
||||
to: username,
|
||||
color: colorMXID(mEvent.getSender()),
|
||||
body: parsedBody,
|
||||
event: mEvent,
|
||||
});
|
||||
} catch {
|
||||
setReply({
|
||||
to: '** Unknown user **',
|
||||
color: 'var(--tc-danger-normal)',
|
||||
body: '*** Unable to load reply ***',
|
||||
event: null,
|
||||
});
|
||||
}
|
||||
};
|
||||
loadReply();
|
||||
|
||||
return () => {
|
||||
isMountedRef.current = false;
|
||||
};
|
||||
}, []);
|
||||
|
||||
const focusReply = (ev) => {
|
||||
if (!ev.key || ev.key === ' ' || ev.key === 'Enter') {
|
||||
if (ev.key) ev.preventDefault();
|
||||
if (reply?.event === null) return;
|
||||
if (reply?.event.isRedacted()) return;
|
||||
roomTimeline.loadEventTimeline(eventId);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className="message__reply-wrapper"
|
||||
onClick={focusReply}
|
||||
onKeyDown={focusReply}
|
||||
role="button"
|
||||
tabIndex="0"
|
||||
>
|
||||
{reply !== null && <MessageReply name={reply.to} color={reply.color} body={reply.body} />}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
MessageReplyWrapper.propTypes = {
|
||||
roomTimeline: PropTypes.shape({}).isRequired,
|
||||
eventId: PropTypes.string.isRequired,
|
||||
};
|
||||
|
||||
const MessageBody = React.memo(({
|
||||
senderName,
|
||||
body,
|
||||
isCustomHTML,
|
||||
isEdited,
|
||||
msgType,
|
||||
}) => {
|
||||
// if body is not string it is a React element.
|
||||
if (typeof body !== 'string') return <div className="message__body">{body}</div>;
|
||||
|
||||
let content = null;
|
||||
if (isCustomHTML) {
|
||||
try {
|
||||
content = twemojify(
|
||||
sanitizeCustomHtml(initMatrix.matrixClient, body),
|
||||
undefined,
|
||||
true,
|
||||
false,
|
||||
true,
|
||||
);
|
||||
} catch {
|
||||
console.error('Malformed custom html: ', body);
|
||||
content = twemojify(body, undefined);
|
||||
}
|
||||
} else {
|
||||
content = twemojify(body, undefined, true);
|
||||
}
|
||||
|
||||
// Determine if this message should render with large emojis
|
||||
// Criteria:
|
||||
// - Contains only emoji
|
||||
// - Contains no more than 10 emoji
|
||||
let emojiOnly = false;
|
||||
if (content.type === 'img') {
|
||||
// If this messages contains only a single (inline) image
|
||||
emojiOnly = true;
|
||||
} else if (content.constructor.name === 'Array') {
|
||||
// Otherwise, it might be an array of images / texb
|
||||
|
||||
// Count the number of emojis
|
||||
const nEmojis = content.filter((e) => e.type === 'img').length;
|
||||
|
||||
// Make sure there's no text besides whitespace and variation selector U+FE0F
|
||||
if (nEmojis <= 10 && content.every((element) => (
|
||||
(typeof element === 'object' && element.type === 'img')
|
||||
|| (typeof element === 'string' && /^[\s\ufe0f]*$/g.test(element))
|
||||
))) {
|
||||
emojiOnly = true;
|
||||
}
|
||||
}
|
||||
|
||||
if (!isCustomHTML) {
|
||||
// If this is a plaintext message, wrap it in a <p> element (automatically applying
|
||||
// white-space: pre-wrap) in order to preserve newlines
|
||||
content = (<p className="message__body-plain">{content}</p>);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="message__body">
|
||||
<div dir="auto" className={`text ${emojiOnly ? 'text-h1' : 'text-b1'}`}>
|
||||
{ msgType === 'm.emote' && (
|
||||
<>
|
||||
{'* '}
|
||||
{twemojify(senderName)}
|
||||
{' '}
|
||||
</>
|
||||
)}
|
||||
{ content }
|
||||
</div>
|
||||
{ isEdited && <Text className="message__body-edited" variant="b3">(edited)</Text>}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
MessageBody.defaultProps = {
|
||||
isCustomHTML: false,
|
||||
isEdited: false,
|
||||
msgType: null,
|
||||
};
|
||||
MessageBody.propTypes = {
|
||||
senderName: PropTypes.string.isRequired,
|
||||
body: PropTypes.node.isRequired,
|
||||
isCustomHTML: PropTypes.bool,
|
||||
isEdited: PropTypes.bool,
|
||||
msgType: PropTypes.string,
|
||||
};
|
||||
|
||||
function MessageEdit({ body, onSave, onCancel }) {
|
||||
const editInputRef = useRef(null);
|
||||
|
||||
useEffect(() => {
|
||||
// makes the cursor end up at the end of the line instead of the beginning
|
||||
editInputRef.current.value = '';
|
||||
editInputRef.current.value = body;
|
||||
}, []);
|
||||
|
||||
const handleKeyDown = (e) => {
|
||||
if (e.key === 'Escape') {
|
||||
e.preventDefault();
|
||||
onCancel();
|
||||
}
|
||||
|
||||
if (e.key === 'Enter' && e.shiftKey === false) {
|
||||
e.preventDefault();
|
||||
onSave(editInputRef.current.value, body);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<form className="message__edit" onSubmit={(e) => { e.preventDefault(); onSave(editInputRef.current.value, body); }}>
|
||||
<Input
|
||||
forwardRef={editInputRef}
|
||||
onKeyDown={handleKeyDown}
|
||||
value={body}
|
||||
placeholder="Edit message"
|
||||
required
|
||||
resizable
|
||||
autoFocus
|
||||
/>
|
||||
<div className="message__edit-btns">
|
||||
<Button type="submit" variant="primary">Save</Button>
|
||||
<Button onClick={onCancel}>Cancel</Button>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
MessageEdit.propTypes = {
|
||||
body: PropTypes.string.isRequired,
|
||||
onSave: PropTypes.func.isRequired,
|
||||
onCancel: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
function getMyEmojiEvent(emojiKey, eventId, roomTimeline) {
|
||||
const mx = initMatrix.matrixClient;
|
||||
const rEvents = roomTimeline.reactionTimeline.get(eventId);
|
||||
let rEvent = null;
|
||||
rEvents?.find((rE) => {
|
||||
if (rE.getRelation() === null) return false;
|
||||
if (rE.getRelation().key === emojiKey && rE.getSender() === mx.getUserId()) {
|
||||
rEvent = rE;
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
});
|
||||
return rEvent;
|
||||
}
|
||||
|
||||
function toggleEmoji(roomId, eventId, emojiKey, shortcode, roomTimeline) {
|
||||
const myAlreadyReactEvent = getMyEmojiEvent(emojiKey, eventId, roomTimeline);
|
||||
if (myAlreadyReactEvent) {
|
||||
const rId = myAlreadyReactEvent.getId();
|
||||
if (rId.startsWith('~')) return;
|
||||
redactEvent(roomId, rId);
|
||||
return;
|
||||
}
|
||||
sendReaction(roomId, eventId, emojiKey, shortcode);
|
||||
}
|
||||
|
||||
function pickEmoji(e, roomId, eventId, roomTimeline) {
|
||||
openEmojiBoard(getEventCords(e), (emoji) => {
|
||||
toggleEmoji(roomId, eventId, emoji.mxc ?? emoji.unicode, emoji.shortcodes[0], roomTimeline);
|
||||
e.target.click();
|
||||
});
|
||||
}
|
||||
|
||||
function genReactionMsg(userIds, reaction, shortcode) {
|
||||
return (
|
||||
<>
|
||||
{userIds.map((userId, index) => (
|
||||
<React.Fragment key={userId}>
|
||||
{twemojify(getUsername(userId))}
|
||||
{index < userIds.length - 1 && (
|
||||
<span style={{ opacity: '.6' }}>
|
||||
{index === userIds.length - 2 ? ' and ' : ', '}
|
||||
</span>
|
||||
)}
|
||||
</React.Fragment>
|
||||
))}
|
||||
<span style={{ opacity: '.6' }}>{' reacted with '}</span>
|
||||
{twemojify(shortcode ? `:${shortcode}:` : reaction, { className: 'react-emoji' })}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function MessageReaction({
|
||||
reaction, shortcode, count, users, isActive, onClick,
|
||||
}) {
|
||||
let customEmojiUrl = null;
|
||||
if (reaction.match(/^mxc:\/\/\S+$/)) {
|
||||
customEmojiUrl = initMatrix.matrixClient.mxcUrlToHttp(reaction);
|
||||
}
|
||||
return (
|
||||
<Tooltip
|
||||
className="msg__reaction-tooltip"
|
||||
content={<Text variant="b2">{users.length > 0 ? genReactionMsg(users, reaction, shortcode) : 'Unable to load who has reacted'}</Text>}
|
||||
>
|
||||
<button
|
||||
onClick={onClick}
|
||||
type="button"
|
||||
className={`msg__reaction${isActive ? ' msg__reaction--active' : ''}`}
|
||||
>
|
||||
{
|
||||
customEmojiUrl
|
||||
? <img className="react-emoji" draggable="false" alt={shortcode ?? reaction} src={customEmojiUrl} />
|
||||
: twemojify(reaction, { className: 'react-emoji' })
|
||||
}
|
||||
<Text variant="b3" className="msg__reaction-count">{count}</Text>
|
||||
</button>
|
||||
</Tooltip>
|
||||
);
|
||||
}
|
||||
MessageReaction.defaultProps = {
|
||||
shortcode: undefined,
|
||||
};
|
||||
MessageReaction.propTypes = {
|
||||
reaction: PropTypes.node.isRequired,
|
||||
shortcode: PropTypes.string,
|
||||
count: PropTypes.number.isRequired,
|
||||
users: PropTypes.arrayOf(PropTypes.string).isRequired,
|
||||
isActive: PropTypes.bool.isRequired,
|
||||
onClick: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
function MessageReactionGroup({ roomTimeline, mEvent }) {
|
||||
const { roomId, room, reactionTimeline } = roomTimeline;
|
||||
const mx = initMatrix.matrixClient;
|
||||
const reactions = {};
|
||||
const canSendReaction = room.currentState.maySendEvent('m.reaction', mx.getUserId());
|
||||
|
||||
const eventReactions = reactionTimeline.get(mEvent.getId());
|
||||
const addReaction = (key, shortcode, count, senderId, isActive) => {
|
||||
let reaction = reactions[key];
|
||||
if (reaction === undefined) {
|
||||
reaction = {
|
||||
count: 0,
|
||||
users: [],
|
||||
isActive: false,
|
||||
};
|
||||
}
|
||||
if (shortcode) reaction.shortcode = shortcode;
|
||||
if (count) {
|
||||
reaction.count = count;
|
||||
} else {
|
||||
reaction.users.push(senderId);
|
||||
reaction.count = reaction.users.length;
|
||||
if (isActive) reaction.isActive = isActive;
|
||||
}
|
||||
|
||||
reactions[key] = reaction;
|
||||
};
|
||||
if (eventReactions) {
|
||||
eventReactions.forEach((rEvent) => {
|
||||
if (rEvent.getRelation() === null) return;
|
||||
const reaction = rEvent.getRelation();
|
||||
const senderId = rEvent.getSender();
|
||||
const { shortcode } = rEvent.getContent();
|
||||
const isActive = senderId === mx.getUserId();
|
||||
|
||||
addReaction(reaction.key, shortcode, undefined, senderId, isActive);
|
||||
});
|
||||
} else {
|
||||
// Use aggregated reactions
|
||||
const aggregatedReaction = mEvent.getServerAggregatedRelation('m.annotation')?.chunk;
|
||||
if (!aggregatedReaction) return null;
|
||||
aggregatedReaction.forEach((reaction) => {
|
||||
if (reaction.type !== 'm.reaction') return;
|
||||
addReaction(reaction.key, undefined, reaction.count, undefined, false);
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="message__reactions text text-b3 noselect">
|
||||
{
|
||||
Object.keys(reactions).map((key) => (
|
||||
<MessageReaction
|
||||
key={key}
|
||||
reaction={key}
|
||||
shortcode={reactions[key].shortcode}
|
||||
count={reactions[key].count}
|
||||
users={reactions[key].users}
|
||||
isActive={reactions[key].isActive}
|
||||
onClick={() => {
|
||||
toggleEmoji(roomId, mEvent.getId(), key, reactions[key].shortcode, roomTimeline);
|
||||
}}
|
||||
/>
|
||||
))
|
||||
}
|
||||
{canSendReaction && (
|
||||
<IconButton
|
||||
onClick={(e) => {
|
||||
pickEmoji(e, roomId, mEvent.getId(), roomTimeline);
|
||||
}}
|
||||
src={EmojiAddIC}
|
||||
size="extra-small"
|
||||
tooltip="Add reaction"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
MessageReactionGroup.propTypes = {
|
||||
roomTimeline: PropTypes.shape({}).isRequired,
|
||||
mEvent: PropTypes.shape({}).isRequired,
|
||||
};
|
||||
|
||||
function isMedia(mE) {
|
||||
return (
|
||||
mE.getContent()?.msgtype === 'm.file'
|
||||
|| mE.getContent()?.msgtype === 'm.image'
|
||||
|| mE.getContent()?.msgtype === 'm.audio'
|
||||
|| mE.getContent()?.msgtype === 'm.video'
|
||||
|| mE.getType() === 'm.sticker'
|
||||
);
|
||||
}
|
||||
|
||||
// if editedTimeline has mEventId then pass editedMEvent else pass mEvent to openViewSource
|
||||
function handleOpenViewSource(mEvent, roomTimeline) {
|
||||
const eventId = mEvent.getId();
|
||||
const { editedTimeline } = roomTimeline ?? {};
|
||||
let editedMEvent;
|
||||
if (editedTimeline?.has(eventId)) {
|
||||
const editedList = editedTimeline.get(eventId);
|
||||
editedMEvent = editedList[editedList.length - 1];
|
||||
}
|
||||
openViewSource(editedMEvent !== undefined ? editedMEvent : mEvent);
|
||||
}
|
||||
|
||||
const MessageOptions = React.memo(({
|
||||
roomTimeline, mEvent, edit, reply,
|
||||
}) => {
|
||||
const { roomId, room } = roomTimeline;
|
||||
const mx = initMatrix.matrixClient;
|
||||
const senderId = mEvent.getSender();
|
||||
|
||||
const myPowerlevel = room.getMember(mx.getUserId())?.powerLevel;
|
||||
const canIRedact = room.currentState.hasSufficientPowerLevelFor('redact', myPowerlevel);
|
||||
const canSendReaction = room.currentState.maySendEvent('m.reaction', mx.getUserId());
|
||||
|
||||
return (
|
||||
<div className="message__options">
|
||||
{canSendReaction && (
|
||||
<IconButton
|
||||
onClick={(e) => pickEmoji(e, roomId, mEvent.getId(), roomTimeline)}
|
||||
src={EmojiAddIC}
|
||||
size="extra-small"
|
||||
tooltip="Add reaction"
|
||||
/>
|
||||
)}
|
||||
<IconButton
|
||||
onClick={() => reply()}
|
||||
src={ReplyArrowIC}
|
||||
size="extra-small"
|
||||
tooltip="Reply"
|
||||
/>
|
||||
{(senderId === mx.getUserId() && !isMedia(mEvent)) && (
|
||||
<IconButton
|
||||
onClick={() => edit(true)}
|
||||
src={PencilIC}
|
||||
size="extra-small"
|
||||
tooltip="Edit"
|
||||
/>
|
||||
)}
|
||||
<ContextMenu
|
||||
content={() => (
|
||||
<>
|
||||
<MenuHeader>Options</MenuHeader>
|
||||
<MenuItem
|
||||
iconSrc={TickMarkIC}
|
||||
onClick={() => openReadReceipts(roomId, roomTimeline.getEventReaders(mEvent))}
|
||||
>
|
||||
Read receipts
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
iconSrc={CmdIC}
|
||||
onClick={() => handleOpenViewSource(mEvent, roomTimeline)}
|
||||
>
|
||||
View source
|
||||
</MenuItem>
|
||||
{(canIRedact || senderId === mx.getUserId()) && (
|
||||
<>
|
||||
<MenuBorder />
|
||||
<MenuItem
|
||||
variant="danger"
|
||||
iconSrc={BinIC}
|
||||
onClick={async () => {
|
||||
const isConfirmed = await confirmDialog(
|
||||
'Delete message',
|
||||
'Are you sure that you want to delete this message?',
|
||||
'Delete',
|
||||
'danger',
|
||||
);
|
||||
if (!isConfirmed) return;
|
||||
redactEvent(roomId, mEvent.getId());
|
||||
}}
|
||||
>
|
||||
Delete
|
||||
</MenuItem>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
render={(toggleMenu) => (
|
||||
<IconButton
|
||||
onClick={toggleMenu}
|
||||
src={VerticalMenuIC}
|
||||
size="extra-small"
|
||||
tooltip="Options"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
MessageOptions.propTypes = {
|
||||
roomTimeline: PropTypes.shape({}).isRequired,
|
||||
mEvent: PropTypes.shape({}).isRequired,
|
||||
edit: PropTypes.func.isRequired,
|
||||
reply: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
function genMediaContent(mE) {
|
||||
const mx = initMatrix.matrixClient;
|
||||
const mContent = mE.getContent();
|
||||
if (!mContent || !mContent.body) return <span style={{ color: 'var(--bg-danger)' }}>Malformed event</span>;
|
||||
|
||||
let mediaMXC = mContent?.url;
|
||||
const isEncryptedFile = typeof mediaMXC === 'undefined';
|
||||
if (isEncryptedFile) mediaMXC = mContent?.file?.url;
|
||||
|
||||
let thumbnailMXC = mContent?.info?.thumbnail_url;
|
||||
|
||||
if (typeof mediaMXC === 'undefined' || mediaMXC === '') return <span style={{ color: 'var(--bg-danger)' }}>Malformed event</span>;
|
||||
|
||||
let msgType = mE.getContent()?.msgtype;
|
||||
const safeMimetype = getBlobSafeMimeType(mContent.info?.mimetype);
|
||||
if (mE.getType() === 'm.sticker') {
|
||||
msgType = 'm.sticker';
|
||||
} else if (safeMimetype === 'application/octet-stream') {
|
||||
msgType = 'm.file';
|
||||
}
|
||||
|
||||
const blurhash = mContent?.info?.['xyz.amorgan.blurhash'];
|
||||
|
||||
switch (msgType) {
|
||||
case 'm.file':
|
||||
return (
|
||||
<Media.File
|
||||
name={mContent.body}
|
||||
link={mx.mxcUrlToHttp(mediaMXC)}
|
||||
type={mContent.info?.mimetype}
|
||||
file={mContent.file || null}
|
||||
/>
|
||||
);
|
||||
case 'm.image':
|
||||
return (
|
||||
<Media.Image
|
||||
name={mContent.body}
|
||||
width={typeof mContent.info?.w === 'number' ? mContent.info?.w : null}
|
||||
height={typeof mContent.info?.h === 'number' ? mContent.info?.h : null}
|
||||
link={mx.mxcUrlToHttp(mediaMXC)}
|
||||
file={isEncryptedFile ? mContent.file : null}
|
||||
type={mContent.info?.mimetype}
|
||||
blurhash={blurhash}
|
||||
/>
|
||||
);
|
||||
case 'm.sticker':
|
||||
return (
|
||||
<Media.Sticker
|
||||
name={mContent.body}
|
||||
width={typeof mContent.info?.w === 'number' ? mContent.info?.w : null}
|
||||
height={typeof mContent.info?.h === 'number' ? mContent.info?.h : null}
|
||||
link={mx.mxcUrlToHttp(mediaMXC)}
|
||||
file={isEncryptedFile ? mContent.file : null}
|
||||
type={mContent.info?.mimetype}
|
||||
/>
|
||||
);
|
||||
case 'm.audio':
|
||||
return (
|
||||
<Media.Audio
|
||||
name={mContent.body}
|
||||
link={mx.mxcUrlToHttp(mediaMXC)}
|
||||
type={mContent.info?.mimetype}
|
||||
file={mContent.file || null}
|
||||
/>
|
||||
);
|
||||
case 'm.video':
|
||||
if (typeof thumbnailMXC === 'undefined') {
|
||||
thumbnailMXC = mContent.info?.thumbnail_file?.url || null;
|
||||
}
|
||||
return (
|
||||
<Media.Video
|
||||
name={mContent.body}
|
||||
link={mx.mxcUrlToHttp(mediaMXC)}
|
||||
thumbnail={thumbnailMXC === null ? null : mx.mxcUrlToHttp(thumbnailMXC)}
|
||||
thumbnailFile={isEncryptedFile ? mContent.info?.thumbnail_file : null}
|
||||
thumbnailType={mContent.info?.thumbnail_info?.mimetype || null}
|
||||
width={typeof mContent.info?.w === 'number' ? mContent.info?.w : null}
|
||||
height={typeof mContent.info?.h === 'number' ? mContent.info?.h : null}
|
||||
file={isEncryptedFile ? mContent.file : null}
|
||||
type={mContent.info?.mimetype}
|
||||
blurhash={blurhash}
|
||||
/>
|
||||
);
|
||||
default:
|
||||
return <span style={{ color: 'var(--bg-danger)' }}>Malformed event</span>;
|
||||
}
|
||||
}
|
||||
|
||||
function getEditedBody(editedMEvent) {
|
||||
const newContent = editedMEvent.getContent()['m.new_content'];
|
||||
if (typeof newContent === 'undefined') return [null, false, null];
|
||||
|
||||
const isCustomHTML = newContent.format === 'org.matrix.custom.html';
|
||||
const parsedContent = parseReply(newContent.body);
|
||||
if (parsedContent === null) {
|
||||
return [newContent.body, isCustomHTML, newContent.formatted_body ?? null];
|
||||
}
|
||||
return [parsedContent.body, isCustomHTML, newContent.formatted_body ?? null];
|
||||
}
|
||||
|
||||
function Message({
|
||||
mEvent, isBodyOnly, roomTimeline,
|
||||
focus, fullTime, isEdit, setEdit, cancelEdit,
|
||||
}) {
|
||||
const roomId = mEvent.getRoomId();
|
||||
const { editedTimeline, reactionTimeline } = roomTimeline ?? {};
|
||||
|
||||
const className = ['message', (isBodyOnly ? 'message--body-only' : 'message--full')];
|
||||
if (focus) className.push('message--focus');
|
||||
const content = mEvent.getContent();
|
||||
const eventId = mEvent.getId();
|
||||
const msgType = content?.msgtype;
|
||||
const senderId = mEvent.getSender();
|
||||
let { body } = content;
|
||||
const username = mEvent.sender ? getUsernameOfRoomMember(mEvent.sender) : getUsername(senderId);
|
||||
const avatarSrc = mEvent.sender?.getAvatarUrl(initMatrix.matrixClient.baseUrl, 36, 36, 'crop') ?? null;
|
||||
let isCustomHTML = content.format === 'org.matrix.custom.html';
|
||||
let customHTML = isCustomHTML ? content.formatted_body : null;
|
||||
|
||||
const edit = useCallback(() => {
|
||||
setEdit(eventId);
|
||||
}, []);
|
||||
const reply = useCallback(() => {
|
||||
replyTo(senderId, mEvent.getId(), body, customHTML);
|
||||
}, [body, customHTML]);
|
||||
|
||||
if (msgType === 'm.emote') className.push('message--type-emote');
|
||||
|
||||
const isEdited = roomTimeline ? editedTimeline.has(eventId) : false;
|
||||
const haveReactions = roomTimeline
|
||||
? reactionTimeline.has(eventId) || !!mEvent.getServerAggregatedRelation('m.annotation')
|
||||
: false;
|
||||
const isReply = !!mEvent.replyEventId;
|
||||
|
||||
if (isEdited) {
|
||||
const editedList = editedTimeline.get(eventId);
|
||||
const editedMEvent = editedList[editedList.length - 1];
|
||||
[body, isCustomHTML, customHTML] = getEditedBody(editedMEvent);
|
||||
}
|
||||
|
||||
if (isReply) {
|
||||
body = parseReply(body)?.body ?? body;
|
||||
customHTML = trimHTMLReply(customHTML);
|
||||
}
|
||||
|
||||
if (typeof body !== 'string') body = '';
|
||||
|
||||
return (
|
||||
<div className={className.join(' ')}>
|
||||
{
|
||||
isBodyOnly
|
||||
? <div className="message__avatar-container" />
|
||||
: (
|
||||
<MessageAvatar
|
||||
roomId={roomId}
|
||||
avatarSrc={avatarSrc}
|
||||
userId={senderId}
|
||||
username={username}
|
||||
/>
|
||||
)
|
||||
}
|
||||
<div className="message__main-container">
|
||||
{!isBodyOnly && (
|
||||
<MessageHeader
|
||||
userId={senderId}
|
||||
username={username}
|
||||
timestamp={mEvent.getTs()}
|
||||
fullTime={fullTime}
|
||||
/>
|
||||
)}
|
||||
{roomTimeline && isReply && (
|
||||
<MessageReplyWrapper
|
||||
roomTimeline={roomTimeline}
|
||||
eventId={mEvent.replyEventId}
|
||||
/>
|
||||
)}
|
||||
{!isEdit && (
|
||||
<MessageBody
|
||||
senderName={username}
|
||||
isCustomHTML={isCustomHTML}
|
||||
body={isMedia(mEvent) ? genMediaContent(mEvent) : customHTML ?? body}
|
||||
msgType={msgType}
|
||||
isEdited={isEdited}
|
||||
/>
|
||||
)}
|
||||
{isEdit && (
|
||||
<MessageEdit
|
||||
body={(customHTML
|
||||
? html(customHTML, { kind: 'edit', onlyPlain: true }).plain
|
||||
: plain(body, { kind: 'edit', onlyPlain: true }).plain)}
|
||||
onSave={(newBody, oldBody) => {
|
||||
if (newBody !== oldBody) {
|
||||
initMatrix.roomsInput.sendEditedMessage(roomId, mEvent, newBody);
|
||||
}
|
||||
cancelEdit();
|
||||
}}
|
||||
onCancel={cancelEdit}
|
||||
/>
|
||||
)}
|
||||
{haveReactions && (
|
||||
<MessageReactionGroup roomTimeline={roomTimeline} mEvent={mEvent} />
|
||||
)}
|
||||
{roomTimeline && !isEdit && (
|
||||
<MessageOptions
|
||||
roomTimeline={roomTimeline}
|
||||
mEvent={mEvent}
|
||||
edit={edit}
|
||||
reply={reply}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Message.defaultProps = {
|
||||
isBodyOnly: false,
|
||||
focus: false,
|
||||
roomTimeline: null,
|
||||
fullTime: false,
|
||||
isEdit: false,
|
||||
setEdit: null,
|
||||
cancelEdit: null,
|
||||
};
|
||||
Message.propTypes = {
|
||||
mEvent: PropTypes.shape({}).isRequired,
|
||||
isBodyOnly: PropTypes.bool,
|
||||
roomTimeline: PropTypes.shape({}),
|
||||
focus: PropTypes.bool,
|
||||
fullTime: PropTypes.bool,
|
||||
isEdit: PropTypes.bool,
|
||||
setEdit: PropTypes.func,
|
||||
cancelEdit: PropTypes.func,
|
||||
};
|
||||
|
||||
export { Message, MessageReply, PlaceholderMessage };
|
||||
|
|
@ -1,479 +0,0 @@
|
|||
@use '../../atoms/scroll/scrollbar';
|
||||
@use '../../partials/text';
|
||||
@use '../../partials/dir';
|
||||
@use '../../partials/screen';
|
||||
|
||||
.message,
|
||||
.ph-msg {
|
||||
padding: var(--sp-ultra-tight);
|
||||
@include dir.side(padding, var(--sp-normal), var(--sp-extra-tight));
|
||||
display: flex;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--bg-surface-hover);
|
||||
& .message__options {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
&__avatar-container {
|
||||
padding-top: 6px;
|
||||
@include dir.side(margin, 0, var(--sp-tight));
|
||||
|
||||
& .avatar-container {
|
||||
transition: transform 200ms var(--fluid-push);
|
||||
&:hover {
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
}
|
||||
|
||||
& button {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
&__main-container {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.message {
|
||||
&--full + &--full,
|
||||
&--body-only + &--full,
|
||||
& + .timeline-change,
|
||||
.timeline-change + & {
|
||||
margin-top: var(--sp-normal);
|
||||
}
|
||||
&__avatar-container {
|
||||
width: var(--av-small);
|
||||
}
|
||||
&--focus {
|
||||
--ltr: inset 2px 0 0 var(--bg-caution);
|
||||
--rtl: inset -2px 0 0 var(--bg-caution);
|
||||
@include dir.prop(box-shadow, var(--ltr), var(--rtl));
|
||||
background-color: var(--bg-caution-hover);
|
||||
}
|
||||
}
|
||||
|
||||
.ph-msg {
|
||||
&__avatar {
|
||||
width: var(--av-small);
|
||||
height: var(--av-small);
|
||||
background-color: var(--bg-surface-hover);
|
||||
border-radius: var(--bo-radius);
|
||||
}
|
||||
|
||||
&__header,
|
||||
&__body > div {
|
||||
margin: var(--sp-ultra-tight);
|
||||
@include dir.side(margin, 0, var(--sp-extra-tight));
|
||||
height: var(--fs-b1);
|
||||
width: 100%;
|
||||
max-width: 100px;
|
||||
background-color: var(--bg-surface-hover);
|
||||
border-radius: calc(var(--bo-radius) / 2);
|
||||
}
|
||||
&__body {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
&__body > div:nth-child(1n) {
|
||||
max-width: 10%;
|
||||
}
|
||||
&__body > div:nth-child(2n) {
|
||||
max-width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.message__reply,
|
||||
.message__body,
|
||||
.message__body__wrapper,
|
||||
.message__edit,
|
||||
.message__reactions {
|
||||
max-width: calc(100% - 88px);
|
||||
min-width: 0;
|
||||
@include screen.smallerThan(tabletBreakpoint) {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.message__header {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
|
||||
& .message__profile {
|
||||
min-width: 0;
|
||||
color: var(--tc-surface-high);
|
||||
@include dir.side(margin, 0, var(--sp-tight));
|
||||
|
||||
& > span {
|
||||
@extend .cp-txt__ellipsis;
|
||||
color: inherit;
|
||||
}
|
||||
& > span:last-child {
|
||||
display: none;
|
||||
}
|
||||
&:hover {
|
||||
& > span:first-child {
|
||||
display: none;
|
||||
}
|
||||
& > span:last-child {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& .message__time {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
& > .text {
|
||||
white-space: nowrap;
|
||||
color: var(--tc-surface-low);
|
||||
}
|
||||
}
|
||||
}
|
||||
.message__reply {
|
||||
&-wrapper {
|
||||
min-height: 20px;
|
||||
cursor: pointer;
|
||||
&:empty {
|
||||
border-radius: calc(var(--bo-radius) / 2);
|
||||
background-color: var(--bg-surface-hover);
|
||||
max-width: 200px;
|
||||
cursor: auto;
|
||||
}
|
||||
&:hover .text {
|
||||
color: var(--tc-surface-high);
|
||||
}
|
||||
}
|
||||
.text {
|
||||
@extend .cp-txt__ellipsis;
|
||||
color: var(--tc-surface-low);
|
||||
}
|
||||
.ic-raw {
|
||||
width: 16px;
|
||||
height: 14px;
|
||||
}
|
||||
}
|
||||
.message__body {
|
||||
word-break: break-word;
|
||||
|
||||
& > .text > .message__body-plain {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
& a {
|
||||
word-break: break-word;
|
||||
}
|
||||
& > .text > a {
|
||||
white-space: initial !important;
|
||||
}
|
||||
|
||||
& > .text > p + p {
|
||||
margin-top: var(--sp-normal);
|
||||
}
|
||||
|
||||
& span[data-mx-pill] {
|
||||
background-color: hsla(0, 0%, 64%, 0.15);
|
||||
padding: 0 2px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-weight: var(--fw-medium);
|
||||
&:hover {
|
||||
background-color: hsla(0, 0%, 64%, 0.3);
|
||||
color: var(--tc-surface-high);
|
||||
}
|
||||
|
||||
&[data-mx-ping] {
|
||||
background-color: var(--bg-ping);
|
||||
&:hover {
|
||||
background-color: var(--bg-ping-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& span[data-mx-spoiler] {
|
||||
border-radius: 4px;
|
||||
background-color: rgba(124, 124, 124, 0.5);
|
||||
color: transparent;
|
||||
cursor: pointer;
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
& > * {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.data-mx-spoiler--visible {
|
||||
background-color: var(--bg-surface-active) !important;
|
||||
color: inherit !important;
|
||||
user-select: initial !important;
|
||||
& > * {
|
||||
opacity: inherit !important;
|
||||
}
|
||||
}
|
||||
&-edited {
|
||||
color: var(--tc-surface-low);
|
||||
}
|
||||
}
|
||||
.message__edit {
|
||||
padding: var(--sp-extra-tight) 0;
|
||||
&-btns button {
|
||||
margin: var(--sp-tight) 0 0 0;
|
||||
padding: var(--sp-ultra-tight) var(--sp-tight);
|
||||
min-width: 0;
|
||||
@include dir.side(margin, 0, var(--sp-tight));
|
||||
}
|
||||
}
|
||||
.message__reactions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
& .ic-btn-surface {
|
||||
display: none;
|
||||
padding: var(--sp-ultra-tight);
|
||||
margin-top: var(--sp-extra-tight);
|
||||
}
|
||||
&:hover .ic-btn-surface {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.msg__reaction {
|
||||
margin: var(--sp-extra-tight) 0 0 0;
|
||||
@include dir.side(margin, 0, var(--sp-extra-tight));
|
||||
padding: 0 var(--sp-ultra-tight);
|
||||
min-height: 26px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
color: var(--tc-surface-normal);
|
||||
background-color: var(--bg-surface-low);
|
||||
border: 1px solid var(--bg-surface-border);
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
|
||||
& .react-emoji {
|
||||
height: 16px;
|
||||
margin: 2px;
|
||||
}
|
||||
&-count {
|
||||
margin: 0 var(--sp-ultra-tight);
|
||||
color: var(--tc-surface-normal);
|
||||
}
|
||||
&-tooltip .react-emoji {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin: 0 var(--sp-ultra-tight);
|
||||
margin-bottom: -2px;
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
&:hover {
|
||||
background-color: var(--bg-surface-hover);
|
||||
}
|
||||
}
|
||||
&:active {
|
||||
background-color: var(--bg-surface-active);
|
||||
}
|
||||
|
||||
&--active {
|
||||
background-color: var(--bg-caution-active);
|
||||
|
||||
@media (hover: hover) {
|
||||
&:hover {
|
||||
background-color: var(--bg-caution-hover);
|
||||
}
|
||||
}
|
||||
&:active {
|
||||
background-color: var(--bg-caution-active);
|
||||
}
|
||||
}
|
||||
}
|
||||
.message__options {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
@include dir.prop(right, 60px, unset);
|
||||
@include dir.prop(left, unset, 60px);
|
||||
|
||||
z-index: 99;
|
||||
transform: translateY(-100%);
|
||||
|
||||
border-radius: var(--bo-radius);
|
||||
box-shadow: var(--bs-surface-border);
|
||||
background-color: var(--bg-surface-low);
|
||||
display: none;
|
||||
}
|
||||
|
||||
// markdown formating
|
||||
.message__body {
|
||||
& h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin: 0;
|
||||
margin-bottom: var(--sp-ultra-tight);
|
||||
font-weight: var(--fw-medium);
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
& h1,
|
||||
& h2 {
|
||||
color: var(--tc-surface-high);
|
||||
margin-top: var(--sp-normal);
|
||||
font-size: var(--fs-h2);
|
||||
line-height: var(--lh-h2);
|
||||
letter-spacing: var(--ls-h2);
|
||||
}
|
||||
& h3,
|
||||
& h4 {
|
||||
color: var(--tc-surface-high);
|
||||
margin-top: var(--sp-tight);
|
||||
font-size: var(--fs-s1);
|
||||
line-height: var(--lh-s1);
|
||||
letter-spacing: var(--ls-s1);
|
||||
}
|
||||
& h5,
|
||||
& h6 {
|
||||
color: var(--tc-surface-high);
|
||||
margin-top: var(--sp-extra-tight);
|
||||
font-size: var(--fs-b1);
|
||||
line-height: var(--lh-b1);
|
||||
letter-spacing: var(--ls-b1);
|
||||
}
|
||||
& hr {
|
||||
border-color: var(--bg-divider);
|
||||
}
|
||||
|
||||
.text img {
|
||||
margin: var(--sp-ultra-tight) 0;
|
||||
max-width: 296px;
|
||||
border-radius: calc(var(--bo-radius) / 2);
|
||||
}
|
||||
|
||||
& p,
|
||||
& pre,
|
||||
& blockquote {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
& pre,
|
||||
& blockquote {
|
||||
margin: var(--sp-ultra-tight) 0;
|
||||
padding: var(--sp-extra-tight);
|
||||
background-color: var(--bg-surface-hover) !important;
|
||||
border-radius: calc(var(--bo-radius) / 2);
|
||||
}
|
||||
& pre {
|
||||
div {
|
||||
background: none !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
span {
|
||||
background: none !important;
|
||||
}
|
||||
.linenumber {
|
||||
min-width: 2.25em !important;
|
||||
}
|
||||
}
|
||||
& code {
|
||||
padding: 0 !important;
|
||||
color: var(--tc-code) !important;
|
||||
white-space: pre-wrap;
|
||||
@include scrollbar.scroll;
|
||||
@include scrollbar.scroll__h;
|
||||
@include scrollbar.scroll--auto-hide;
|
||||
}
|
||||
& pre {
|
||||
width: fit-content;
|
||||
max-width: 100%;
|
||||
@include scrollbar.scroll;
|
||||
@include scrollbar.scroll__h;
|
||||
@include scrollbar.scroll--auto-hide;
|
||||
& code {
|
||||
color: var(--tc-surface-normal) !important;
|
||||
white-space: pre;
|
||||
}
|
||||
}
|
||||
& blockquote {
|
||||
width: fit-content;
|
||||
max-width: 100%;
|
||||
@include dir.side(border, 4px solid var(--bg-surface-active), 0);
|
||||
white-space: initial !important;
|
||||
|
||||
& > * {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
}
|
||||
& ul,
|
||||
& ol {
|
||||
margin: var(--sp-ultra-tight) 0;
|
||||
@include dir.side(padding, 24px, 0);
|
||||
white-space: initial !important;
|
||||
}
|
||||
& ul.contains-task-list {
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
& table {
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
white-space: normal !important;
|
||||
background-color: var(--bg-surface-hover);
|
||||
border-radius: calc(var(--bo-radius) / 2);
|
||||
border-spacing: 0;
|
||||
border: 1px solid var(--bg-surface-border);
|
||||
@include scrollbar.scroll;
|
||||
@include scrollbar.scroll__h;
|
||||
@include scrollbar.scroll--auto-hide;
|
||||
|
||||
& td,
|
||||
& th {
|
||||
padding: var(--sp-extra-tight);
|
||||
border: 1px solid var(--bg-surface-border);
|
||||
border-width: 0 1px 1px 0;
|
||||
white-space: pre;
|
||||
&:last-child {
|
||||
border-width: 0;
|
||||
border-bottom-width: 1px;
|
||||
[dir='rtl'] & {
|
||||
border-width: 0 1px 1px 0;
|
||||
}
|
||||
}
|
||||
[dir='rtl'] &:first-child {
|
||||
border-width: 0;
|
||||
border-bottom-width: 1px;
|
||||
}
|
||||
}
|
||||
& tbody tr:nth-child(2n + 1) {
|
||||
background-color: var(--bg-surface-hover);
|
||||
}
|
||||
& tr:last-child td {
|
||||
border-bottom-width: 0px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.message.message--type-emote {
|
||||
.message__body {
|
||||
font-style: italic;
|
||||
|
||||
// Remove blockness of first `<p>` so that markdown emotes stay on one line.
|
||||
p:first-of-type {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,78 +0,0 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import './TimelineChange.scss';
|
||||
|
||||
import Text from '../../atoms/text/Text';
|
||||
import RawIcon from '../../atoms/system-icons/RawIcon';
|
||||
import Time from '../../atoms/time/Time';
|
||||
|
||||
import JoinArraowIC from '../../../../public/res/ic/outlined/join-arrow.svg';
|
||||
import LeaveArraowIC from '../../../../public/res/ic/outlined/leave-arrow.svg';
|
||||
import InviteArraowIC from '../../../../public/res/ic/outlined/invite-arrow.svg';
|
||||
import InviteCancelArraowIC from '../../../../public/res/ic/outlined/invite-cancel-arrow.svg';
|
||||
import UserIC from '../../../../public/res/ic/outlined/user.svg';
|
||||
|
||||
function TimelineChange({
|
||||
variant, content, timestamp, onClick,
|
||||
}) {
|
||||
let iconSrc;
|
||||
|
||||
switch (variant) {
|
||||
case 'join':
|
||||
iconSrc = JoinArraowIC;
|
||||
break;
|
||||
case 'leave':
|
||||
iconSrc = LeaveArraowIC;
|
||||
break;
|
||||
case 'invite':
|
||||
iconSrc = InviteArraowIC;
|
||||
break;
|
||||
case 'invite-cancel':
|
||||
iconSrc = InviteCancelArraowIC;
|
||||
break;
|
||||
case 'avatar':
|
||||
iconSrc = UserIC;
|
||||
break;
|
||||
default:
|
||||
iconSrc = JoinArraowIC;
|
||||
break;
|
||||
}
|
||||
|
||||
return (
|
||||
<button style={{ cursor: onClick === null ? 'default' : 'pointer' }} onClick={onClick} type="button" className="timeline-change">
|
||||
<div className="timeline-change__avatar-container">
|
||||
<RawIcon src={iconSrc} size="extra-small" />
|
||||
</div>
|
||||
<div className="timeline-change__content">
|
||||
<Text variant="b2">
|
||||
{content}
|
||||
</Text>
|
||||
</div>
|
||||
<div className="timeline-change__time">
|
||||
<Text variant="b3">
|
||||
<Time timestamp={timestamp} />
|
||||
</Text>
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
TimelineChange.defaultProps = {
|
||||
variant: 'other',
|
||||
onClick: null,
|
||||
};
|
||||
|
||||
TimelineChange.propTypes = {
|
||||
variant: PropTypes.oneOf([
|
||||
'join', 'leave', 'invite',
|
||||
'invite-cancel', 'avatar', 'other',
|
||||
]),
|
||||
content: PropTypes.oneOfType([
|
||||
PropTypes.string,
|
||||
PropTypes.node,
|
||||
]).isRequired,
|
||||
timestamp: PropTypes.number.isRequired,
|
||||
onClick: PropTypes.func,
|
||||
};
|
||||
|
||||
export default TimelineChange;
|
||||
|
|
@ -1,37 +0,0 @@
|
|||
@use '../../partials/dir';
|
||||
|
||||
.timeline-change {
|
||||
padding: var(--sp-ultra-tight);
|
||||
@include dir.side(padding, var(--sp-normal), var(--sp-extra-tight));
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--bg-surface-hover);
|
||||
}
|
||||
|
||||
&__avatar-container {
|
||||
width: var(--av-small);
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
opacity: 0.38;
|
||||
.ic-raw {
|
||||
background-color: var(--tc-surface-low);
|
||||
}
|
||||
}
|
||||
|
||||
& .text {
|
||||
color: var(--tc-surface-low);
|
||||
}
|
||||
|
||||
&__content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
|
||||
margin: 0 var(--sp-tight);
|
||||
word-break: break-word;
|
||||
}
|
||||
}
|
||||
|
|
@ -2,16 +2,12 @@ import React from 'react';
|
|||
import PropTypes from 'prop-types';
|
||||
import './PeopleSelector.scss';
|
||||
|
||||
import { twemojify } from '../../../util/twemojify';
|
||||
|
||||
import { blurOnBubbling } from '../../atoms/button/script';
|
||||
|
||||
import Text from '../../atoms/text/Text';
|
||||
import Avatar from '../../atoms/avatar/Avatar';
|
||||
|
||||
function PeopleSelector({
|
||||
avatarSrc, name, color, peopleRole, onClick,
|
||||
}) {
|
||||
function PeopleSelector({ avatarSrc, name, color, peopleRole, onClick }) {
|
||||
return (
|
||||
<div className="people-selector__container">
|
||||
<button
|
||||
|
|
@ -21,8 +17,14 @@ function PeopleSelector({
|
|||
type="button"
|
||||
>
|
||||
<Avatar imageSrc={avatarSrc} text={name} bgColor={color} size="extra-small" />
|
||||
<Text className="people-selector__name" variant="b1">{twemojify(name)}</Text>
|
||||
{peopleRole !== null && <Text className="people-selector__role" variant="b3">{peopleRole}</Text>}
|
||||
<Text className="people-selector__name" variant="b1">
|
||||
{name}
|
||||
</Text>
|
||||
{peopleRole !== null && (
|
||||
<Text className="people-selector__role" variant="b3">
|
||||
{peopleRole}
|
||||
</Text>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -2,8 +2,6 @@ import React from 'react';
|
|||
import PropTypes from 'prop-types';
|
||||
import './PopupWindow.scss';
|
||||
|
||||
import { twemojify } from '../../../util/twemojify';
|
||||
|
||||
import Text from '../../atoms/text/Text';
|
||||
import IconButton from '../../atoms/button/IconButton';
|
||||
import { MenuItem } from '../../atoms/context-menu/ContextMenu';
|
||||
|
|
@ -13,19 +11,11 @@ import RawModal from '../../atoms/modal/RawModal';
|
|||
|
||||
import ChevronLeftIC from '../../../../public/res/ic/outlined/chevron-left.svg';
|
||||
|
||||
function PWContentSelector({
|
||||
selected, variant, iconSrc,
|
||||
type, onClick, children,
|
||||
}) {
|
||||
function PWContentSelector({ selected, variant, iconSrc, type, onClick, children }) {
|
||||
const pwcsClass = selected ? ' pw-content-selector--selected' : '';
|
||||
return (
|
||||
<div className={`pw-content-selector${pwcsClass}`}>
|
||||
<MenuItem
|
||||
variant={variant}
|
||||
iconSrc={iconSrc}
|
||||
type={type}
|
||||
onClick={onClick}
|
||||
>
|
||||
<MenuItem variant={variant} iconSrc={iconSrc} type={type} onClick={onClick}>
|
||||
{children}
|
||||
</MenuItem>
|
||||
</div>
|
||||
|
|
@ -49,9 +39,16 @@ PWContentSelector.propTypes = {
|
|||
};
|
||||
|
||||
function PopupWindow({
|
||||
className, isOpen, title, contentTitle,
|
||||
drawer, drawerOptions, contentOptions,
|
||||
onAfterClose, onRequestClose, children,
|
||||
className,
|
||||
isOpen,
|
||||
title,
|
||||
contentTitle,
|
||||
drawer,
|
||||
drawerOptions,
|
||||
contentOptions,
|
||||
onAfterClose,
|
||||
onRequestClose,
|
||||
children,
|
||||
}) {
|
||||
const haveDrawer = drawer !== null;
|
||||
const cTitle = contentTitle !== null ? contentTitle : title;
|
||||
|
|
@ -69,21 +66,26 @@ function PopupWindow({
|
|||
{haveDrawer && (
|
||||
<div className="pw__drawer">
|
||||
<Header>
|
||||
<IconButton size="small" src={ChevronLeftIC} onClick={onRequestClose} tooltip="Back" />
|
||||
<IconButton
|
||||
size="small"
|
||||
src={ChevronLeftIC}
|
||||
onClick={onRequestClose}
|
||||
tooltip="Back"
|
||||
/>
|
||||
<TitleWrapper>
|
||||
{
|
||||
typeof title === 'string'
|
||||
? <Text variant="s1" weight="medium" primary>{twemojify(title)}</Text>
|
||||
: title
|
||||
}
|
||||
{typeof title === 'string' ? (
|
||||
<Text variant="s1" weight="medium" primary>
|
||||
{title}
|
||||
</Text>
|
||||
) : (
|
||||
title
|
||||
)}
|
||||
</TitleWrapper>
|
||||
{drawerOptions}
|
||||
</Header>
|
||||
<div className="pw__drawer__content__wrapper">
|
||||
<ScrollView invisible>
|
||||
<div className="pw__drawer__content">
|
||||
{drawer}
|
||||
</div>
|
||||
<div className="pw__drawer__content">{drawer}</div>
|
||||
</ScrollView>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -91,19 +93,19 @@ function PopupWindow({
|
|||
<div className="pw__content">
|
||||
<Header>
|
||||
<TitleWrapper>
|
||||
{
|
||||
typeof cTitle === 'string'
|
||||
? <Text variant="h2" weight="medium" primary>{twemojify(cTitle)}</Text>
|
||||
: cTitle
|
||||
}
|
||||
{typeof cTitle === 'string' ? (
|
||||
<Text variant="h2" weight="medium" primary>
|
||||
{cTitle}
|
||||
</Text>
|
||||
) : (
|
||||
cTitle
|
||||
)}
|
||||
</TitleWrapper>
|
||||
{contentOptions}
|
||||
</Header>
|
||||
<div className="pw__content__wrapper">
|
||||
<ScrollView autoHide>
|
||||
<div className="pw__content-container">
|
||||
{children}
|
||||
</div>
|
||||
<div className="pw__content-container">{children}</div>
|
||||
</ScrollView>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -13,28 +13,33 @@ import BellIC from '../../../../public/res/ic/outlined/bell.svg';
|
|||
import BellRingIC from '../../../../public/res/ic/outlined/bell-ring.svg';
|
||||
import BellPingIC from '../../../../public/res/ic/outlined/bell-ping.svg';
|
||||
import BellOffIC from '../../../../public/res/ic/outlined/bell-off.svg';
|
||||
import { getNotificationType } from '../../utils/room';
|
||||
|
||||
const items = [{
|
||||
iconSrc: BellIC,
|
||||
text: 'Global',
|
||||
type: cons.notifs.DEFAULT,
|
||||
}, {
|
||||
iconSrc: BellRingIC,
|
||||
text: 'All messages',
|
||||
type: cons.notifs.ALL_MESSAGES,
|
||||
}, {
|
||||
iconSrc: BellPingIC,
|
||||
text: 'Mentions & Keywords',
|
||||
type: cons.notifs.MENTIONS_AND_KEYWORDS,
|
||||
}, {
|
||||
iconSrc: BellOffIC,
|
||||
text: 'Mute',
|
||||
type: cons.notifs.MUTE,
|
||||
}];
|
||||
const items = [
|
||||
{
|
||||
iconSrc: BellIC,
|
||||
text: 'Global',
|
||||
type: cons.notifs.DEFAULT,
|
||||
},
|
||||
{
|
||||
iconSrc: BellRingIC,
|
||||
text: 'All messages',
|
||||
type: cons.notifs.ALL_MESSAGES,
|
||||
},
|
||||
{
|
||||
iconSrc: BellPingIC,
|
||||
text: 'Mentions & Keywords',
|
||||
type: cons.notifs.MENTIONS_AND_KEYWORDS,
|
||||
},
|
||||
{
|
||||
iconSrc: BellOffIC,
|
||||
text: 'Mute',
|
||||
type: cons.notifs.MUTE,
|
||||
},
|
||||
];
|
||||
|
||||
function setRoomNotifType(roomId, newType) {
|
||||
const mx = initMatrix.matrixClient;
|
||||
const { notifications } = initMatrix;
|
||||
let roomPushRule;
|
||||
try {
|
||||
roomPushRule = mx.getRoomPushRule('global', roomId);
|
||||
|
|
@ -47,22 +52,22 @@ function setRoomNotifType(roomId, newType) {
|
|||
if (roomPushRule) {
|
||||
promises.push(mx.deletePushRule('global', 'room', roomPushRule.rule_id));
|
||||
}
|
||||
promises.push(mx.addPushRule('global', 'override', roomId, {
|
||||
conditions: [
|
||||
{
|
||||
kind: 'event_match',
|
||||
key: 'room_id',
|
||||
pattern: roomId,
|
||||
},
|
||||
],
|
||||
actions: [
|
||||
'dont_notify',
|
||||
],
|
||||
}));
|
||||
promises.push(
|
||||
mx.addPushRule('global', 'override', roomId, {
|
||||
conditions: [
|
||||
{
|
||||
kind: 'event_match',
|
||||
key: 'room_id',
|
||||
pattern: roomId,
|
||||
},
|
||||
],
|
||||
actions: ['dont_notify'],
|
||||
})
|
||||
);
|
||||
return promises;
|
||||
}
|
||||
|
||||
const oldState = notifications.getNotiType(roomId);
|
||||
const oldState = getNotificationType(mx, roomId);
|
||||
if (oldState === cons.notifs.MUTE) {
|
||||
promises.push(mx.deletePushRule('global', 'override', roomId));
|
||||
}
|
||||
|
|
@ -75,25 +80,27 @@ function setRoomNotifType(roomId, newType) {
|
|||
}
|
||||
|
||||
if (newType === cons.notifs.MENTIONS_AND_KEYWORDS) {
|
||||
promises.push(mx.addPushRule('global', 'room', roomId, {
|
||||
actions: [
|
||||
'dont_notify',
|
||||
],
|
||||
}));
|
||||
promises.push(
|
||||
mx.addPushRule('global', 'room', roomId, {
|
||||
actions: ['dont_notify'],
|
||||
})
|
||||
);
|
||||
promises.push(mx.setPushRuleEnabled('global', 'room', roomId, true));
|
||||
return Promise.all(promises);
|
||||
}
|
||||
|
||||
// cons.notifs.ALL_MESSAGES
|
||||
promises.push(mx.addPushRule('global', 'room', roomId, {
|
||||
actions: [
|
||||
'notify',
|
||||
{
|
||||
set_tweak: 'sound',
|
||||
value: 'default',
|
||||
},
|
||||
],
|
||||
}));
|
||||
promises.push(
|
||||
mx.addPushRule('global', 'room', roomId, {
|
||||
actions: [
|
||||
'notify',
|
||||
{
|
||||
set_tweak: 'sound',
|
||||
value: 'default',
|
||||
},
|
||||
],
|
||||
})
|
||||
);
|
||||
|
||||
promises.push(mx.setPushRuleEnabled('global', 'room', roomId, true));
|
||||
|
||||
|
|
@ -101,17 +108,20 @@ function setRoomNotifType(roomId, newType) {
|
|||
}
|
||||
|
||||
function useNotifications(roomId) {
|
||||
const { notifications } = initMatrix;
|
||||
const [activeType, setActiveType] = useState(notifications.getNotiType(roomId));
|
||||
const mx = initMatrix.matrixClient;
|
||||
const [activeType, setActiveType] = useState(getNotificationType(mx, roomId));
|
||||
useEffect(() => {
|
||||
setActiveType(notifications.getNotiType(roomId));
|
||||
}, [roomId]);
|
||||
setActiveType(getNotificationType(mx, roomId));
|
||||
}, [mx, roomId]);
|
||||
|
||||
const setNotification = useCallback((item) => {
|
||||
if (item.type === activeType.type) return;
|
||||
setActiveType(item.type);
|
||||
setRoomNotifType(roomId, item.type);
|
||||
}, [activeType, roomId]);
|
||||
const setNotification = useCallback(
|
||||
(item) => {
|
||||
if (item.type === activeType.type) return;
|
||||
setActiveType(item.type);
|
||||
setRoomNotifType(roomId, item.type);
|
||||
},
|
||||
[activeType, roomId]
|
||||
);
|
||||
return [activeType, setNotification];
|
||||
}
|
||||
|
||||
|
|
@ -120,21 +130,19 @@ function RoomNotification({ roomId }) {
|
|||
|
||||
return (
|
||||
<div className="room-notification">
|
||||
{
|
||||
items.map((item) => (
|
||||
<MenuItem
|
||||
variant={activeType === item.type ? 'positive' : 'surface'}
|
||||
key={item.type}
|
||||
iconSrc={item.iconSrc}
|
||||
onClick={() => setNotification(item)}
|
||||
>
|
||||
<Text varient="b1">
|
||||
<span>{item.text}</span>
|
||||
<RadioButton isActive={activeType === item.type} />
|
||||
</Text>
|
||||
</MenuItem>
|
||||
))
|
||||
}
|
||||
{items.map((item) => (
|
||||
<MenuItem
|
||||
variant={activeType === item.type ? 'positive' : 'surface'}
|
||||
key={item.type}
|
||||
iconSrc={item.iconSrc}
|
||||
onClick={() => setNotification(item)}
|
||||
>
|
||||
<Text varient="b1">
|
||||
<span>{item.text}</span>
|
||||
<RadioButton isActive={activeType === item.type} />
|
||||
</Text>
|
||||
</MenuItem>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,73 +0,0 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import { twemojify } from '../../../util/twemojify';
|
||||
|
||||
import initMatrix from '../../../client/initMatrix';
|
||||
import { openInviteUser } from '../../../client/action/navigation';
|
||||
import * as roomActions from '../../../client/action/room';
|
||||
import { markAsRead } from '../../../client/action/notifications';
|
||||
|
||||
import { MenuHeader, MenuItem } from '../../atoms/context-menu/ContextMenu';
|
||||
import RoomNotification from '../room-notification/RoomNotification';
|
||||
|
||||
import TickMarkIC from '../../../../public/res/ic/outlined/tick-mark.svg';
|
||||
import AddUserIC from '../../../../public/res/ic/outlined/add-user.svg';
|
||||
import LeaveArrowIC from '../../../../public/res/ic/outlined/leave-arrow.svg';
|
||||
|
||||
import { confirmDialog } from '../confirm-dialog/ConfirmDialog';
|
||||
|
||||
function RoomOptions({ roomId, afterOptionSelect }) {
|
||||
const mx = initMatrix.matrixClient;
|
||||
const room = mx.getRoom(roomId);
|
||||
const canInvite = room?.canInvite(mx.getUserId());
|
||||
|
||||
const handleMarkAsRead = () => {
|
||||
markAsRead(roomId);
|
||||
afterOptionSelect();
|
||||
};
|
||||
|
||||
const handleInviteClick = () => {
|
||||
openInviteUser(roomId);
|
||||
afterOptionSelect();
|
||||
};
|
||||
const handleLeaveClick = async () => {
|
||||
afterOptionSelect();
|
||||
const isConfirmed = await confirmDialog(
|
||||
'Leave room',
|
||||
`Are you sure that you want to leave "${room.name}" room?`,
|
||||
'Leave',
|
||||
'danger',
|
||||
);
|
||||
if (!isConfirmed) return;
|
||||
roomActions.leave(roomId);
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{ maxWidth: '256px' }}>
|
||||
<MenuHeader>{twemojify(`Options for ${initMatrix.matrixClient.getRoom(roomId)?.name}`)}</MenuHeader>
|
||||
<MenuItem iconSrc={TickMarkIC} onClick={handleMarkAsRead}>Mark as read</MenuItem>
|
||||
<MenuItem
|
||||
iconSrc={AddUserIC}
|
||||
onClick={handleInviteClick}
|
||||
disabled={!canInvite}
|
||||
>
|
||||
Invite
|
||||
</MenuItem>
|
||||
<MenuItem iconSrc={LeaveArrowIC} variant="danger" onClick={handleLeaveClick}>Leave</MenuItem>
|
||||
<MenuHeader>Notification</MenuHeader>
|
||||
<RoomNotification roomId={roomId} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
RoomOptions.defaultProps = {
|
||||
afterOptionSelect: null,
|
||||
};
|
||||
|
||||
RoomOptions.propTypes = {
|
||||
roomId: PropTypes.string.isRequired,
|
||||
afterOptionSelect: PropTypes.func,
|
||||
};
|
||||
|
||||
export default RoomOptions;
|
||||
|
|
@ -1,9 +1,9 @@
|
|||
import React, { useState, useEffect } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { useAtomValue } from 'jotai';
|
||||
import Linkify from 'linkify-react';
|
||||
import './RoomProfile.scss';
|
||||
|
||||
import { twemojify } from '../../../util/twemojify';
|
||||
|
||||
import initMatrix from '../../../client/initMatrix';
|
||||
import cons from '../../../client/state/cons';
|
||||
import colorMXID from '../../../util/colorMXID';
|
||||
|
|
@ -20,6 +20,8 @@ import PencilIC from '../../../../public/res/ic/outlined/pencil.svg';
|
|||
import { useStore } from '../../hooks/useStore';
|
||||
import { useForceUpdate } from '../../hooks/useForceUpdate';
|
||||
import { confirmDialog } from '../confirm-dialog/ConfirmDialog';
|
||||
import { mDirectAtom } from '../../state/mDirectList';
|
||||
import { LINKIFY_OPTS } from '../../plugins/react-custom-html-parser';
|
||||
|
||||
function RoomProfile({ roomId }) {
|
||||
const isMountStore = useStore();
|
||||
|
|
@ -31,9 +33,12 @@ function RoomProfile({ roomId }) {
|
|||
});
|
||||
|
||||
const mx = initMatrix.matrixClient;
|
||||
const isDM = initMatrix.roomList.directs.has(roomId);
|
||||
const mDirects = useAtomValue(mDirectAtom);
|
||||
const isDM = mDirects.has(roomId);
|
||||
let avatarSrc = mx.getRoom(roomId).getAvatarUrl(mx.baseUrl, 36, 36, 'crop');
|
||||
avatarSrc = isDM ? mx.getRoom(roomId).getAvatarFallbackMember()?.getAvatarUrl(mx.baseUrl, 36, 36, 'crop') : avatarSrc;
|
||||
avatarSrc = isDM
|
||||
? mx.getRoom(roomId).getAvatarFallbackMember()?.getAvatarUrl(mx.baseUrl, 36, 36, 'crop')
|
||||
: avatarSrc;
|
||||
const room = mx.getRoom(roomId);
|
||||
const { currentState } = room;
|
||||
const roomName = room.name;
|
||||
|
|
@ -47,15 +52,14 @@ function RoomProfile({ roomId }) {
|
|||
|
||||
useEffect(() => {
|
||||
isMountStore.setItem(true);
|
||||
const { roomList } = initMatrix;
|
||||
const handleProfileUpdate = (rId) => {
|
||||
if (roomId !== rId) return;
|
||||
const handleStateEvent = (mEvent) => {
|
||||
if (mEvent.event.room_id !== roomId) return;
|
||||
forceUpdate();
|
||||
};
|
||||
|
||||
roomList.on(cons.events.roomList.ROOM_PROFILE_UPDATED, handleProfileUpdate);
|
||||
mx.on('RoomState.events', handleStateEvent);
|
||||
return () => {
|
||||
roomList.removeListener(cons.events.roomList.ROOM_PROFILE_UPDATED, handleProfileUpdate);
|
||||
mx.removeListener('RoomState.events', handleStateEvent);
|
||||
isMountStore.setItem(false);
|
||||
setStatus({
|
||||
msg: null,
|
||||
|
|
@ -122,7 +126,7 @@ function RoomProfile({ roomId }) {
|
|||
'Remove avatar',
|
||||
'Are you sure that you want to remove room avatar?',
|
||||
'Remove',
|
||||
'caution',
|
||||
'caution'
|
||||
);
|
||||
if (isConfirmed) {
|
||||
await mx.sendStateEvent(roomId, 'm.room.avatar', { url }, '');
|
||||
|
|
@ -132,15 +136,45 @@ function RoomProfile({ roomId }) {
|
|||
|
||||
const renderEditNameAndTopic = () => (
|
||||
<form className="room-profile__edit-form" onSubmit={handleOnSubmit}>
|
||||
{canChangeName && <Input value={roomName} name="room-name" disabled={status.type === cons.status.IN_FLIGHT} label="Name" />}
|
||||
{canChangeTopic && <Input value={roomTopic} name="room-topic" disabled={status.type === cons.status.IN_FLIGHT} minHeight={100} resizable label="Topic" />}
|
||||
{(!canChangeName || !canChangeTopic) && <Text variant="b3">{`You have permission to change ${room.isSpaceRoom() ? 'space' : 'room'} ${canChangeName ? 'name' : 'topic'} only.`}</Text>}
|
||||
{ status.type === cons.status.IN_FLIGHT && <Text variant="b2">{status.msg}</Text>}
|
||||
{ status.type === cons.status.SUCCESS && <Text style={{ color: 'var(--tc-positive-high)' }} variant="b2">{status.msg}</Text>}
|
||||
{ status.type === cons.status.ERROR && <Text style={{ color: 'var(--tc-danger-high)' }} variant="b2">{status.msg}</Text>}
|
||||
{ status.type !== cons.status.IN_FLIGHT && (
|
||||
{canChangeName && (
|
||||
<Input
|
||||
value={roomName}
|
||||
name="room-name"
|
||||
disabled={status.type === cons.status.IN_FLIGHT}
|
||||
label="Name"
|
||||
/>
|
||||
)}
|
||||
{canChangeTopic && (
|
||||
<Input
|
||||
value={roomTopic}
|
||||
name="room-topic"
|
||||
disabled={status.type === cons.status.IN_FLIGHT}
|
||||
minHeight={100}
|
||||
resizable
|
||||
label="Topic"
|
||||
/>
|
||||
)}
|
||||
{(!canChangeName || !canChangeTopic) && (
|
||||
<Text variant="b3">{`You have permission to change ${
|
||||
room.isSpaceRoom() ? 'space' : 'room'
|
||||
} ${canChangeName ? 'name' : 'topic'} only.`}</Text>
|
||||
)}
|
||||
{status.type === cons.status.IN_FLIGHT && <Text variant="b2">{status.msg}</Text>}
|
||||
{status.type === cons.status.SUCCESS && (
|
||||
<Text style={{ color: 'var(--tc-positive-high)' }} variant="b2">
|
||||
{status.msg}
|
||||
</Text>
|
||||
)}
|
||||
{status.type === cons.status.ERROR && (
|
||||
<Text style={{ color: 'var(--tc-danger-high)' }} variant="b2">
|
||||
{status.msg}
|
||||
</Text>
|
||||
)}
|
||||
{status.type !== cons.status.IN_FLIGHT && (
|
||||
<div>
|
||||
<Button type="submit" variant="primary">Save</Button>
|
||||
<Button type="submit" variant="primary">
|
||||
Save
|
||||
</Button>
|
||||
<Button onClick={handleCancelEditing}>Cancel</Button>
|
||||
</div>
|
||||
)}
|
||||
|
|
@ -148,10 +182,15 @@ function RoomProfile({ roomId }) {
|
|||
);
|
||||
|
||||
const renderNameAndTopic = () => (
|
||||
<div className="room-profile__display" style={{ marginBottom: avatarSrc && canChangeAvatar ? '24px' : '0' }}>
|
||||
<div
|
||||
className="room-profile__display"
|
||||
style={{ marginBottom: avatarSrc && canChangeAvatar ? '24px' : '0' }}
|
||||
>
|
||||
<div>
|
||||
<Text variant="h2" weight="medium" primary>{twemojify(roomName)}</Text>
|
||||
{ (canChangeName || canChangeTopic) && (
|
||||
<Text variant="h2" weight="medium" primary>
|
||||
{roomName}
|
||||
</Text>
|
||||
{(canChangeName || canChangeTopic) && (
|
||||
<IconButton
|
||||
src={PencilIC}
|
||||
size="extra-small"
|
||||
|
|
@ -161,15 +200,21 @@ function RoomProfile({ roomId }) {
|
|||
)}
|
||||
</div>
|
||||
<Text variant="b3">{room.getCanonicalAlias() || room.roomId}</Text>
|
||||
{roomTopic && <Text variant="b2">{twemojify(roomTopic, undefined, true)}</Text>}
|
||||
{roomTopic && (
|
||||
<Text variant="b2">
|
||||
<Linkify options={LINKIFY_OPTS}>{roomTopic}</Linkify>
|
||||
</Text>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="room-profile">
|
||||
<div className="room-profile__content">
|
||||
{ !canChangeAvatar && <Avatar imageSrc={avatarSrc} text={roomName} bgColor={colorMXID(roomId)} size="large" />}
|
||||
{ canChangeAvatar && (
|
||||
{!canChangeAvatar && (
|
||||
<Avatar imageSrc={avatarSrc} text={roomName} bgColor={colorMXID(roomId)} size="large" />
|
||||
)}
|
||||
{canChangeAvatar && (
|
||||
<ImageUpload
|
||||
text={roomName}
|
||||
bgColor={colorMXID(roomId)}
|
||||
|
|
|
|||
|
|
@ -1,201 +0,0 @@
|
|||
import React, { useState, useEffect } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import './RoomSearch.scss';
|
||||
|
||||
import initMatrix from '../../../client/initMatrix';
|
||||
import cons from '../../../client/state/cons';
|
||||
import { selectRoom } from '../../../client/action/navigation';
|
||||
|
||||
import Text from '../../atoms/text/Text';
|
||||
import RawIcon from '../../atoms/system-icons/RawIcon';
|
||||
import Button from '../../atoms/button/Button';
|
||||
import Input from '../../atoms/input/Input';
|
||||
import Spinner from '../../atoms/spinner/Spinner';
|
||||
import { MenuHeader } from '../../atoms/context-menu/ContextMenu';
|
||||
import { Message } from '../message/Message';
|
||||
|
||||
import SearchIC from '../../../../public/res/ic/outlined/search.svg';
|
||||
|
||||
import { useStore } from '../../hooks/useStore';
|
||||
|
||||
const roomIdToBackup = new Map();
|
||||
|
||||
function useRoomSearch(roomId) {
|
||||
const [searchData, setSearchData] = useState(roomIdToBackup.get(roomId) ?? null);
|
||||
const [status, setStatus] = useState({
|
||||
type: cons.status.PRE_FLIGHT,
|
||||
term: null,
|
||||
});
|
||||
const mountStore = useStore(roomId);
|
||||
const mx = initMatrix.matrixClient;
|
||||
|
||||
useEffect(() => {
|
||||
mountStore.setItem(true)
|
||||
}, [roomId]);
|
||||
|
||||
useEffect(() => {
|
||||
if (searchData?.results?.length > 0) {
|
||||
roomIdToBackup.set(roomId, searchData);
|
||||
} else {
|
||||
roomIdToBackup.delete(roomId);
|
||||
}
|
||||
}, [searchData]);
|
||||
|
||||
const search = async (term) => {
|
||||
setSearchData(null);
|
||||
if (term === '') {
|
||||
setStatus({ type: cons.status.PRE_FLIGHT, term: null });
|
||||
return;
|
||||
}
|
||||
setStatus({ type: cons.status.IN_FLIGHT, term });
|
||||
const body = {
|
||||
search_categories: {
|
||||
room_events: {
|
||||
search_term: term,
|
||||
filter: {
|
||||
limit: 10,
|
||||
rooms: [roomId],
|
||||
},
|
||||
order_by: 'recent',
|
||||
event_context: {
|
||||
before_limit: 0,
|
||||
after_limit: 0,
|
||||
include_profile: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
try {
|
||||
const res = await mx.search({ body });
|
||||
const data = mx.processRoomEventsSearch({
|
||||
_query: body,
|
||||
results: [],
|
||||
highlights: [],
|
||||
}, res);
|
||||
if (!mountStore.getItem()) return;
|
||||
setStatus({ type: cons.status.SUCCESS, term });
|
||||
setSearchData(data);
|
||||
if (!mountStore.getItem()) return;
|
||||
} catch (error) {
|
||||
setSearchData(null);
|
||||
setStatus({ type: cons.status.ERROR, term });
|
||||
}
|
||||
};
|
||||
|
||||
const paginate = async () => {
|
||||
if (searchData === null) return;
|
||||
const term = searchData._query.search_categories.room_events.search_term;
|
||||
|
||||
setStatus({ type: cons.status.IN_FLIGHT, term });
|
||||
try {
|
||||
const data = await mx.backPaginateRoomEventsSearch(searchData);
|
||||
if (!mountStore.getItem()) return;
|
||||
setStatus({ type: cons.status.SUCCESS, term });
|
||||
setSearchData(data);
|
||||
} catch (error) {
|
||||
if (!mountStore.getItem()) return;
|
||||
setSearchData(null);
|
||||
setStatus({ type: cons.status.ERROR, term });
|
||||
}
|
||||
};
|
||||
|
||||
return [searchData, search, paginate, status];
|
||||
}
|
||||
|
||||
function RoomSearch({ roomId }) {
|
||||
const [searchData, search, paginate, status] = useRoomSearch(roomId);
|
||||
const mx = initMatrix.matrixClient;
|
||||
const isRoomEncrypted = mx.isRoomEncrypted(roomId);
|
||||
const searchTerm = searchData?._query.search_categories.room_events.search_term ?? '';
|
||||
|
||||
const handleSearch = (e) => {
|
||||
e.preventDefault();
|
||||
if (isRoomEncrypted) return;
|
||||
const searchTermInput = e.target.elements['room-search-input'];
|
||||
const term = searchTermInput.value.trim();
|
||||
|
||||
search(term);
|
||||
};
|
||||
|
||||
const renderTimeline = (timeline) => (
|
||||
<div className="room-search__result-item" key={timeline[0].getId()}>
|
||||
{ timeline.map((mEvent) => {
|
||||
const id = mEvent.getId();
|
||||
return (
|
||||
<React.Fragment key={id}>
|
||||
<Message
|
||||
mEvent={mEvent}
|
||||
isBodyOnly={false}
|
||||
fullTime
|
||||
/>
|
||||
<Button onClick={() => selectRoom(roomId, id)}>View</Button>
|
||||
</React.Fragment>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="room-search">
|
||||
<form className="room-search__form" onSubmit={handleSearch}>
|
||||
<MenuHeader>Room search</MenuHeader>
|
||||
<div>
|
||||
<Input
|
||||
placeholder="Search for keywords"
|
||||
name="room-search-input"
|
||||
disabled={isRoomEncrypted}
|
||||
autoFocus
|
||||
/>
|
||||
<Button iconSrc={SearchIC} variant="primary" type="submit">Search</Button>
|
||||
</div>
|
||||
{searchData?.results.length > 0 && (
|
||||
<Text>{`${searchData.count} results for "${searchTerm}"`}</Text>
|
||||
)}
|
||||
{!isRoomEncrypted && searchData === null && (
|
||||
<div className="room-search__help">
|
||||
{status.type === cons.status.IN_FLIGHT && <Spinner />}
|
||||
{status.type === cons.status.IN_FLIGHT && <Text>Searching room messages...</Text>}
|
||||
{status.type === cons.status.PRE_FLIGHT && <RawIcon src={SearchIC} size="large" />}
|
||||
{status.type === cons.status.PRE_FLIGHT && <Text>Search room messages</Text>}
|
||||
{status.type === cons.status.ERROR && <Text>Failed to search messages</Text>}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!isRoomEncrypted && searchData?.results.length === 0 && (
|
||||
<div className="room-search__help">
|
||||
<Text>No results found</Text>
|
||||
</div>
|
||||
)}
|
||||
{isRoomEncrypted && (
|
||||
<div className="room-search__help">
|
||||
<Text>Search does not work in encrypted room</Text>
|
||||
</div>
|
||||
)}
|
||||
</form>
|
||||
{searchData?.results.length > 0 && (
|
||||
<>
|
||||
<div className="room-search__content">
|
||||
{searchData.results.map((searchResult) => {
|
||||
const { timeline } = searchResult.context;
|
||||
return renderTimeline(timeline);
|
||||
})}
|
||||
</div>
|
||||
{searchData?.next_batch && (
|
||||
<div className="room-search__more">
|
||||
{status.type !== cons.status.IN_FLIGHT && (
|
||||
<Button onClick={paginate}>Load more</Button>
|
||||
)}
|
||||
{status.type === cons.status.IN_FLIGHT && <Spinner />}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
RoomSearch.propTypes = {
|
||||
roomId: PropTypes.string.isRequired,
|
||||
};
|
||||
|
||||
export default RoomSearch;
|
||||
|
|
@ -1,62 +0,0 @@
|
|||
@use '../../partials/flex';
|
||||
@use '../../partials/dir';
|
||||
|
||||
.room-search {
|
||||
&__form {
|
||||
& div:nth-child(2) {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
padding: var(--sp-normal);;
|
||||
|
||||
& .input-container {
|
||||
@extend .cp-fx__item-one;
|
||||
@include dir.side(margin, 0, var(--sp-normal));
|
||||
}
|
||||
& button {
|
||||
height: 46px;
|
||||
}
|
||||
}
|
||||
& .context-menu__header {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
& > .text {
|
||||
padding: 0 var(--sp-normal) var(--sp-tight);
|
||||
}
|
||||
}
|
||||
|
||||
&__help {
|
||||
height: 248px;
|
||||
@extend .cp-fx__column--c-c;
|
||||
|
||||
& .ic-raw {
|
||||
opacity: .5;
|
||||
}
|
||||
.text {
|
||||
margin-top: var(--sp-normal);
|
||||
}
|
||||
}
|
||||
&__more {
|
||||
margin-bottom: var(--sp-normal);
|
||||
@extend .cp-fx__row--c-c;
|
||||
button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
&__result-item {
|
||||
padding: var(--sp-tight) var(--sp-normal);
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
|
||||
.message {
|
||||
@include dir.side(margin, 0, var(--sp-normal));
|
||||
@extend .cp-fx__item-one;
|
||||
padding: 0;
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
& .message__time {
|
||||
flex: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -2,7 +2,6 @@ import React from 'react';
|
|||
import PropTypes from 'prop-types';
|
||||
import './RoomSelector.scss';
|
||||
|
||||
import { twemojify } from '../../../util/twemojify';
|
||||
import colorMXID from '../../../util/colorMXID';
|
||||
|
||||
import Text from '../../atoms/text/Text';
|
||||
|
|
@ -11,8 +10,13 @@ import NotificationBadge from '../../atoms/badge/NotificationBadge';
|
|||
import { blurOnBubbling } from '../../atoms/button/script';
|
||||
|
||||
function RoomSelectorWrapper({
|
||||
isSelected, isMuted, isUnread, onClick,
|
||||
content, options, onContextMenu,
|
||||
isSelected,
|
||||
isMuted,
|
||||
isUnread,
|
||||
onClick,
|
||||
content,
|
||||
options,
|
||||
onContextMenu,
|
||||
}) {
|
||||
const classes = ['room-selector'];
|
||||
if (isMuted) classes.push('room-selector--muted');
|
||||
|
|
@ -50,16 +54,26 @@ RoomSelectorWrapper.propTypes = {
|
|||
};
|
||||
|
||||
function RoomSelector({
|
||||
name, parentName, roomId, imageSrc, iconSrc,
|
||||
isSelected, isMuted, isUnread, notificationCount, isAlert,
|
||||
options, onClick, onContextMenu,
|
||||
name,
|
||||
parentName,
|
||||
roomId,
|
||||
imageSrc,
|
||||
iconSrc,
|
||||
isSelected,
|
||||
isMuted,
|
||||
isUnread,
|
||||
notificationCount,
|
||||
isAlert,
|
||||
options,
|
||||
onClick,
|
||||
onContextMenu,
|
||||
}) {
|
||||
return (
|
||||
<RoomSelectorWrapper
|
||||
isSelected={isSelected}
|
||||
isMuted={isMuted}
|
||||
isUnread={isUnread}
|
||||
content={(
|
||||
content={
|
||||
<>
|
||||
<Avatar
|
||||
text={name}
|
||||
|
|
@ -70,22 +84,22 @@ function RoomSelector({
|
|||
size="extra-small"
|
||||
/>
|
||||
<Text variant="b1" weight={isUnread ? 'medium' : 'normal'}>
|
||||
{twemojify(name)}
|
||||
{name}
|
||||
{parentName && (
|
||||
<Text variant="b3" span>
|
||||
{' — '}
|
||||
{twemojify(parentName)}
|
||||
{parentName}
|
||||
</Text>
|
||||
)}
|
||||
</Text>
|
||||
{ isUnread && (
|
||||
{isUnread && (
|
||||
<NotificationBadge
|
||||
alert={isAlert}
|
||||
content={notificationCount !== 0 ? notificationCount : null}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
}
|
||||
options={options}
|
||||
onClick={onClick}
|
||||
onContextMenu={onContextMenu}
|
||||
|
|
@ -110,10 +124,7 @@ RoomSelector.propTypes = {
|
|||
isSelected: PropTypes.bool,
|
||||
isMuted: PropTypes.bool,
|
||||
isUnread: PropTypes.bool.isRequired,
|
||||
notificationCount: PropTypes.oneOfType([
|
||||
PropTypes.string,
|
||||
PropTypes.number,
|
||||
]).isRequired,
|
||||
notificationCount: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
|
||||
isAlert: PropTypes.bool.isRequired,
|
||||
options: PropTypes.node,
|
||||
onClick: PropTypes.func.isRequired,
|
||||
|
|
|
|||
|
|
@ -2,46 +2,35 @@ import React from 'react';
|
|||
import PropTypes from 'prop-types';
|
||||
import './RoomTile.scss';
|
||||
|
||||
import { twemojify } from '../../../util/twemojify';
|
||||
|
||||
import colorMXID from '../../../util/colorMXID';
|
||||
|
||||
import Text from '../../atoms/text/Text';
|
||||
import Avatar from '../../atoms/avatar/Avatar';
|
||||
|
||||
function RoomTile({
|
||||
avatarSrc, name, id,
|
||||
inviterName, memberCount, desc, options,
|
||||
}) {
|
||||
function RoomTile({ avatarSrc, name, id, inviterName, memberCount, desc, options }) {
|
||||
return (
|
||||
<div className="room-tile">
|
||||
<div className="room-tile__avatar">
|
||||
<Avatar
|
||||
imageSrc={avatarSrc}
|
||||
bgColor={colorMXID(id)}
|
||||
text={name}
|
||||
/>
|
||||
<Avatar imageSrc={avatarSrc} bgColor={colorMXID(id)} text={name} />
|
||||
</div>
|
||||
<div className="room-tile__content">
|
||||
<Text variant="s1">{twemojify(name)}</Text>
|
||||
<Text variant="s1">{name}</Text>
|
||||
<Text variant="b3">
|
||||
{
|
||||
inviterName !== null
|
||||
? `Invited by ${inviterName} to ${id}${memberCount === null ? '' : ` • ${memberCount} members`}`
|
||||
: id + (memberCount === null ? '' : ` • ${memberCount} members`)
|
||||
}
|
||||
{inviterName !== null
|
||||
? `Invited by ${inviterName} to ${id}${
|
||||
memberCount === null ? '' : ` • ${memberCount} members`
|
||||
}`
|
||||
: id + (memberCount === null ? '' : ` • ${memberCount} members`)}
|
||||
</Text>
|
||||
{
|
||||
desc !== null && (typeof desc === 'string')
|
||||
? <Text className="room-tile__content__desc" variant="b2">{twemojify(desc, undefined, true)}</Text>
|
||||
: desc
|
||||
}
|
||||
{desc !== null && typeof desc === 'string' ? (
|
||||
<Text className="room-tile__content__desc" variant="b2">
|
||||
{desc}
|
||||
</Text>
|
||||
) : (
|
||||
desc
|
||||
)}
|
||||
</div>
|
||||
{ options !== null && (
|
||||
<div className="room-tile__options">
|
||||
{options}
|
||||
</div>
|
||||
)}
|
||||
{options !== null && <div className="room-tile__options">{options}</div>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -58,10 +47,7 @@ RoomTile.propTypes = {
|
|||
name: PropTypes.string.isRequired,
|
||||
id: PropTypes.string.isRequired,
|
||||
inviterName: PropTypes.string,
|
||||
memberCount: PropTypes.oneOfType([
|
||||
PropTypes.string,
|
||||
PropTypes.number,
|
||||
]),
|
||||
memberCount: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
||||
desc: PropTypes.node,
|
||||
options: PropTypes.node,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,55 +0,0 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import './SidebarAvatar.scss';
|
||||
|
||||
import { twemojify } from '../../../util/twemojify';
|
||||
|
||||
import Text from '../../atoms/text/Text';
|
||||
import Tooltip from '../../atoms/tooltip/Tooltip';
|
||||
import { blurOnBubbling } from '../../atoms/button/script';
|
||||
|
||||
const SidebarAvatar = React.forwardRef(({
|
||||
className, tooltip, active, onClick,
|
||||
onContextMenu, avatar, notificationBadge,
|
||||
}, ref) => {
|
||||
const classes = ['sidebar-avatar'];
|
||||
if (active) classes.push('sidebar-avatar--active');
|
||||
if (className) classes.push(className);
|
||||
return (
|
||||
<Tooltip
|
||||
content={<Text variant="b1">{twemojify(tooltip)}</Text>}
|
||||
placement="right"
|
||||
>
|
||||
<button
|
||||
ref={ref}
|
||||
className={classes.join(' ')}
|
||||
type="button"
|
||||
onMouseUp={(e) => blurOnBubbling(e, '.sidebar-avatar')}
|
||||
onClick={onClick}
|
||||
onContextMenu={onContextMenu}
|
||||
>
|
||||
{avatar}
|
||||
{notificationBadge}
|
||||
</button>
|
||||
</Tooltip>
|
||||
);
|
||||
});
|
||||
SidebarAvatar.defaultProps = {
|
||||
className: null,
|
||||
active: false,
|
||||
onClick: null,
|
||||
onContextMenu: null,
|
||||
notificationBadge: null,
|
||||
};
|
||||
|
||||
SidebarAvatar.propTypes = {
|
||||
className: PropTypes.string,
|
||||
tooltip: PropTypes.string.isRequired,
|
||||
active: PropTypes.bool,
|
||||
onClick: PropTypes.func,
|
||||
onContextMenu: PropTypes.func,
|
||||
avatar: PropTypes.node.isRequired,
|
||||
notificationBadge: PropTypes.node,
|
||||
};
|
||||
|
||||
export default SidebarAvatar;
|
||||
|
|
@ -1,64 +0,0 @@
|
|||
@use '../../partials/dir';
|
||||
|
||||
.sidebar-avatar {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
|
||||
& .notification-badge {
|
||||
position: absolute;
|
||||
@include dir.prop(left, unset, 0);
|
||||
@include dir.prop(right, 0, unset);
|
||||
top: 0;
|
||||
box-shadow: 0 0 0 2px var(--bg-surface-low);
|
||||
@include dir.prop(transform, translate(20%, -20%), translate(-20%, -20%));
|
||||
|
||||
margin: 0 !important;
|
||||
}
|
||||
& .avatar-container,
|
||||
& .notification-badge {
|
||||
transition: transform 200ms var(--fluid-push);
|
||||
}
|
||||
&:hover .avatar-container {
|
||||
@include dir.prop(transform, translateX(4px), translateX(-4px));
|
||||
}
|
||||
&:hover .notification-badge {
|
||||
--ltr: translate(calc(20% + 4px), -20%);
|
||||
--rtl: translate(calc(-20% - 4px), -20%);
|
||||
@include dir.prop(transform, var(--ltr), var(--rtl));
|
||||
}
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
&:active .avatar-container {
|
||||
box-shadow: var(--bs-surface-outline);
|
||||
}
|
||||
|
||||
&:hover::before,
|
||||
&:focus::before,
|
||||
&--active::before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
@include dir.prop(left, -11px, unset);
|
||||
@include dir.prop(right, unset, -11px);
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
|
||||
width: 3px;
|
||||
height: 12px;
|
||||
background-color: var(--tc-surface-high);
|
||||
@include dir.prop(border-radius, 0 4px 4px 0, 4px 0 0 4px);
|
||||
transition: height 200ms linear;
|
||||
}
|
||||
&--active:hover::before,
|
||||
&--active:focus::before,
|
||||
&--active::before {
|
||||
height: 28px;
|
||||
}
|
||||
&--active .avatar-container {
|
||||
background-color: var(--bg-surface);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,9 +1,8 @@
|
|||
import React, { useState, useEffect, useCallback } from 'react';
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { useAtomValue } from 'jotai';
|
||||
import './SpaceAddExisting.scss';
|
||||
|
||||
import { twemojify } from '../../../util/twemojify';
|
||||
|
||||
import initMatrix from '../../../client/initMatrix';
|
||||
import cons from '../../../client/state/cons';
|
||||
import navigation from '../../../client/state/navigation';
|
||||
|
|
@ -24,6 +23,9 @@ import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
|
|||
import SearchIC from '../../../../public/res/ic/outlined/search.svg';
|
||||
|
||||
import { useStore } from '../../hooks/useStore';
|
||||
import { roomToParentsAtom } from '../../state/room/roomToParents';
|
||||
import { useDirects, useRooms, useSpaces } from '../../state/hooks/roomList';
|
||||
import { allRoomsAtom } from '../../state/room-list/roomList';
|
||||
|
||||
function SpaceAddExistingContent({ roomId, spaces: onlySpaces }) {
|
||||
const mountStore = useStore(roomId);
|
||||
|
|
@ -33,7 +35,10 @@ function SpaceAddExistingContent({ roomId, spaces: onlySpaces }) {
|
|||
const [selected, setSelected] = useState([]);
|
||||
const [searchIds, setSearchIds] = useState(null);
|
||||
const mx = initMatrix.matrixClient;
|
||||
const { spaces, rooms, directs, roomIdToParents } = initMatrix.roomList;
|
||||
const roomIdToParents = useAtomValue(roomToParentsAtom);
|
||||
const spaces = useSpaces(mx, allRoomsAtom);
|
||||
const rooms = useRooms(mx, allRoomsAtom);
|
||||
const directs = useDirects(mx, allRoomsAtom);
|
||||
|
||||
useEffect(() => {
|
||||
const roomIds = onlySpaces ? [...spaces] : [...rooms, ...directs];
|
||||
|
|
@ -217,7 +222,7 @@ function SpaceAddExisting() {
|
|||
className="space-add-existing"
|
||||
title={
|
||||
<Text variant="s1" weight="medium" primary>
|
||||
{room && twemojify(room.name)}
|
||||
{room && room.name}
|
||||
<span style={{ color: 'var(--tc-surface-low)' }}>
|
||||
{' '}
|
||||
— add existing {data?.spaces ? 'spaces' : 'rooms'}
|
||||
|
|
|
|||
|
|
@ -1,128 +0,0 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import { twemojify } from '../../../util/twemojify';
|
||||
|
||||
import initMatrix from '../../../client/initMatrix';
|
||||
import { openSpaceSettings, openSpaceManage, openInviteUser } from '../../../client/action/navigation';
|
||||
import { markAsRead } from '../../../client/action/notifications';
|
||||
import { leave } from '../../../client/action/room';
|
||||
import {
|
||||
createSpaceShortcut,
|
||||
deleteSpaceShortcut,
|
||||
categorizeSpace,
|
||||
unCategorizeSpace,
|
||||
} from '../../../client/action/accountData';
|
||||
|
||||
import { MenuHeader, MenuItem } from '../../atoms/context-menu/ContextMenu';
|
||||
|
||||
import CategoryIC from '../../../../public/res/ic/outlined/category.svg';
|
||||
import CategoryFilledIC from '../../../../public/res/ic/filled/category.svg';
|
||||
import TickMarkIC from '../../../../public/res/ic/outlined/tick-mark.svg';
|
||||
import AddUserIC from '../../../../public/res/ic/outlined/add-user.svg';
|
||||
import SettingsIC from '../../../../public/res/ic/outlined/settings.svg';
|
||||
import HashSearchIC from '../../../../public/res/ic/outlined/hash-search.svg';
|
||||
import LeaveArrowIC from '../../../../public/res/ic/outlined/leave-arrow.svg';
|
||||
import PinIC from '../../../../public/res/ic/outlined/pin.svg';
|
||||
import PinFilledIC from '../../../../public/res/ic/filled/pin.svg';
|
||||
|
||||
import { confirmDialog } from '../confirm-dialog/ConfirmDialog';
|
||||
|
||||
function SpaceOptions({ roomId, afterOptionSelect }) {
|
||||
const mx = initMatrix.matrixClient;
|
||||
const { roomList } = initMatrix;
|
||||
const room = mx.getRoom(roomId);
|
||||
const canInvite = room?.canInvite(mx.getUserId());
|
||||
const isPinned = initMatrix.accountData.spaceShortcut.has(roomId);
|
||||
const isCategorized = initMatrix.accountData.categorizedSpaces.has(roomId);
|
||||
|
||||
const handleMarkAsRead = () => {
|
||||
const spaceChildren = roomList.getCategorizedSpaces([roomId]);
|
||||
spaceChildren?.forEach((childIds) => {
|
||||
childIds?.forEach((childId) => {
|
||||
markAsRead(childId);
|
||||
});
|
||||
});
|
||||
afterOptionSelect();
|
||||
};
|
||||
const handleInviteClick = () => {
|
||||
openInviteUser(roomId);
|
||||
afterOptionSelect();
|
||||
};
|
||||
const handlePinClick = () => {
|
||||
if (isPinned) deleteSpaceShortcut(roomId);
|
||||
else createSpaceShortcut(roomId);
|
||||
afterOptionSelect();
|
||||
};
|
||||
const handleCategorizeClick = () => {
|
||||
if (isCategorized) unCategorizeSpace(roomId);
|
||||
else categorizeSpace(roomId);
|
||||
afterOptionSelect();
|
||||
};
|
||||
const handleSettingsClick = () => {
|
||||
openSpaceSettings(roomId);
|
||||
afterOptionSelect();
|
||||
};
|
||||
const handleManageRoom = () => {
|
||||
openSpaceManage(roomId);
|
||||
afterOptionSelect();
|
||||
};
|
||||
|
||||
const handleLeaveClick = async () => {
|
||||
afterOptionSelect();
|
||||
const isConfirmed = await confirmDialog(
|
||||
'Leave space',
|
||||
`Are you sure that you want to leave "${room.name}" space?`,
|
||||
'Leave',
|
||||
'danger',
|
||||
);
|
||||
if (!isConfirmed) return;
|
||||
leave(roomId);
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{ maxWidth: 'calc(var(--navigation-drawer-width) - var(--sp-normal))' }}>
|
||||
<MenuHeader>{twemojify(`Options for ${initMatrix.matrixClient.getRoom(roomId)?.name}`)}</MenuHeader>
|
||||
<MenuItem iconSrc={TickMarkIC} onClick={handleMarkAsRead}>Mark as read</MenuItem>
|
||||
<MenuItem
|
||||
onClick={handleCategorizeClick}
|
||||
iconSrc={isCategorized ? CategoryFilledIC : CategoryIC}
|
||||
>
|
||||
{isCategorized ? 'Uncategorize subspaces' : 'Categorize subspaces'}
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
onClick={handlePinClick}
|
||||
iconSrc={isPinned ? PinFilledIC : PinIC}
|
||||
>
|
||||
{isPinned ? 'Unpin from sidebar' : 'Pin to sidebar'}
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
iconSrc={AddUserIC}
|
||||
onClick={handleInviteClick}
|
||||
disabled={!canInvite}
|
||||
>
|
||||
Invite
|
||||
</MenuItem>
|
||||
<MenuItem onClick={handleManageRoom} iconSrc={HashSearchIC}>Manage rooms</MenuItem>
|
||||
<MenuItem onClick={handleSettingsClick} iconSrc={SettingsIC}>Settings</MenuItem>
|
||||
<MenuItem
|
||||
variant="danger"
|
||||
onClick={handleLeaveClick}
|
||||
iconSrc={LeaveArrowIC}
|
||||
>
|
||||
Leave
|
||||
</MenuItem>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
SpaceOptions.defaultProps = {
|
||||
afterOptionSelect: null,
|
||||
};
|
||||
|
||||
SpaceOptions.propTypes = {
|
||||
roomId: PropTypes.string.isRequired,
|
||||
afterOptionSelect: PropTypes.func,
|
||||
};
|
||||
|
||||
export default SpaceOptions;
|
||||
|
|
@ -1,41 +0,0 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import './SSOButtons.scss';
|
||||
|
||||
import { createTemporaryClient, startSsoLogin } from '../../../client/action/auth';
|
||||
|
||||
import Button from '../../atoms/button/Button';
|
||||
|
||||
function SSOButtons({ type, identityProviders, baseUrl }) {
|
||||
const tempClient = createTemporaryClient(baseUrl);
|
||||
function handleClick(id) {
|
||||
startSsoLogin(baseUrl, type, id);
|
||||
}
|
||||
return (
|
||||
<div className="sso-buttons">
|
||||
{identityProviders
|
||||
.sort((idp, idp2) => {
|
||||
if (typeof idp.icon !== 'string') return -1;
|
||||
return idp.name.toLowerCase() > idp2.name.toLowerCase() ? 1 : -1;
|
||||
})
|
||||
.map((idp) => (
|
||||
idp.icon
|
||||
? (
|
||||
<button key={idp.id} type="button" className="sso-btn" onClick={() => handleClick(idp.id)}>
|
||||
<img className="sso-btn__img" src={tempClient.mxcUrlToHttp(idp.icon)} alt={idp.name} />
|
||||
</button>
|
||||
) : <Button key={idp.id} className="sso-btn__text-only" onClick={() => handleClick(idp.id)}>{`Login with ${idp.name}`}</Button>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
SSOButtons.propTypes = {
|
||||
identityProviders: PropTypes.arrayOf(
|
||||
PropTypes.shape({}),
|
||||
).isRequired,
|
||||
baseUrl: PropTypes.string.isRequired,
|
||||
type: PropTypes.oneOf(['sso', 'cas']).isRequired,
|
||||
};
|
||||
|
||||
export default SSOButtons;
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
.sso-buttons {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.sso-btn {
|
||||
margin: var(--sp-tight);
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
&__img {
|
||||
height: var(--av-small);
|
||||
width: var(--av-small);
|
||||
}
|
||||
&__text-only {
|
||||
margin-top: var(--sp-normal);
|
||||
flex-basis: 100%;
|
||||
& .text {
|
||||
color: var(--tc-link);
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue