hippoz/cinny
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Renamed channels to rooms (#30)

Browse source
This commit is contained in:
unknown 2021-08-31 18:43:31 +05:30
parent b5dfc337ec
commit 705910d9e0
42 changed files with 291 additions and 291 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
src/app/molecules/channel-intro/ChannelIntro.jsx → src/app/molecules/room-intro/RoomIntro.jsx
View file

@ -1,6 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
import './ChannelIntro.scss';
import './RoomIntro.scss';
import Linkify from 'linkifyjs/react';
import colorMXID from '../../../util/colorMXID';
@ -12,27 +12,27 @@ function linkifyContent(content) {
return <Linkify options={{ target: { url: '_blank' } }}>{content}</Linkify>;
}
function ChannelIntro({
function RoomIntro({
roomId, avatarSrc, name, heading, desc, time,
}) {
return (
<div className="channel-intro">
<div className="room-intro">
<Avatar imageSrc={avatarSrc} text={name.slice(0, 1)} bgColor={colorMXID(roomId)} size="large" />
<div className="channel-intro__content">
<Text className="channel-intro__name" variant="h1">{heading}</Text>
<Text className="channel-intro__desc" variant="b1">{linkifyContent(desc)}</Text>
{ time !== null && <Text className="channel-intro__time" variant="b3">{time}</Text>}
<div className="room-intro__content">
<Text className="room-intro__name" variant="h1">{heading}</Text>
<Text className="room-intro__desc" variant="b1">{linkifyContent(desc)}</Text>
{ time !== null && <Text className="room-intro__time" variant="b3">{time}</Text>}
</div>
</div>
);
}
ChannelIntro.defaultProps = {
RoomIntro.defaultProps = {
avatarSrc: false,
time: null,
};
ChannelIntro.propTypes = {
RoomIntro.propTypes = {
roomId: PropTypes.string.isRequired,
avatarSrc: PropTypes.oneOfType([
PropTypes.string,
@ -44,4 +44,4 @@ ChannelIntro.propTypes = {
time: PropTypes.string,
};
export default ChannelIntro;
export default RoomIntro;

4
src/app/molecules/channel-intro/ChannelIntro.scss → src/app/molecules/room-intro/RoomIntro.scss
View file

@ -1,4 +1,4 @@
.channel-intro {
.room-intro {
margin-top: calc(2 * var(--sp-extra-loose));
margin-bottom: var(--sp-extra-loose);
padding-left: calc(var(--sp-normal) + var(--av-small) + var(--sp-tight));
@ -11,7 +11,7 @@
}
}
.channel-intro__content {
.room-intro__content {
margin-top: var(--sp-extra-loose);
max-width: 640px;
}

26
src/app/molecules/channel-selector/ChannelSelector.jsx → src/app/molecules/room-selector/RoomSelector.jsx
View file

@ -1,6 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
import './ChannelSelector.scss';
import './RoomSelector.scss';
import colorMXID from '../../../util/colorMXID';
@ -9,40 +9,40 @@ import Avatar from '../../atoms/avatar/Avatar';
import NotificationBadge from '../../atoms/badge/NotificationBadge';
import { blurOnBubbling } from '../../atoms/button/script';
function ChannelSelectorWrapper({
function RoomSelectorWrapper({
isSelected, onClick, content, options,
}) {
return (
<div className={`channel-selector${isSelected ? ' channel-selector--selected' : ''}`}>
<div className={`room-selector${isSelected ? ' room-selector--selected' : ''}`}>
<button
className="channel-selector__content"
className="room-selector__content"
type="button"
onClick={onClick}
onMouseUp={(e) => blurOnBubbling(e, '.channel-selector')}
onMouseUp={(e) => blurOnBubbling(e, '.room-selector')}
>
{content}
</button>
<div className="channel-selector__options">{options}</div>
<div className="room-selector__options">{options}</div>
</div>
);
}
ChannelSelectorWrapper.defaultProps = {
RoomSelectorWrapper.defaultProps = {
options: null,
};
ChannelSelectorWrapper.propTypes = {
RoomSelectorWrapper.propTypes = {
isSelected: PropTypes.bool.isRequired,
onClick: PropTypes.func.isRequired,
content: PropTypes.node.isRequired,
options: PropTypes.node,
};
function ChannelSelector({
function RoomSelector({
name, roomId, imageSrc, iconSrc,
isSelected, isUnread, notificationCount, isAlert,
options, onClick,
}) {
return (
<ChannelSelectorWrapper
<RoomSelectorWrapper
isSelected={isSelected}
content={(
<>
@ -67,12 +67,12 @@ function ChannelSelector({
/>
);
}
ChannelSelector.defaultProps = {
RoomSelector.defaultProps = {
imageSrc: null,
iconSrc: null,
options: null,
};
ChannelSelector.propTypes = {
RoomSelector.propTypes = {
name: PropTypes.string.isRequired,
roomId: PropTypes.string.isRequired,
imageSrc: PropTypes.string,
@ -85,4 +85,4 @@ ChannelSelector.propTypes = {
onClick: PropTypes.func.isRequired,
};
export default ChannelSelector;
export default RoomSelector;

24
src/app/molecules/channel-selector/ChannelSelector.scss → src/app/molecules/room-selector/RoomSelector.scss
View file

@ -1,15 +1,15 @@
.channel-selector-flex {
.room-selector-flex {
display: flex;
align-items: center;
}
.channel-selector-flexItem {
.room-selector-flexItem {
flex: 1;
min-width: 0;
min-height: 0;
}
.channel-selector {
@extend .channel-selector-flex;
.room-selector {
@extend .room-selector-flex;
border: 1px solid transparent;
border-radius: var(--bo-radius);
@ -19,7 +19,7 @@
background-color: var(--bg-surface);
border-color: var(--bg-surface-border);
& .channel-selector__options {
& .room-selector__options {
display: flex;
}
}
@ -27,7 +27,7 @@
@media (hover: hover) {
&:hover {
background-color: var(--bg-surface-hover);
& .channel-selector__options {
& .room-selector__options {
display: flex;
}
}
@ -46,9 +46,9 @@
}
}
.channel-selector__content {
@extend .channel-selector-flexItem;
@extend .channel-selector-flex;
.room-selector__content {
@extend .room-selector-flexItem;
@extend .room-selector-flex;
padding: 0 var(--sp-extra-tight);
min-height: 40px;
cursor: inherit;
@ -58,7 +58,7 @@
}
& > .text {
@extend .channel-selector-flexItem;
@extend .room-selector-flexItem;
margin: 0 var(--sp-extra-tight);
color: var(--tc-surface-normal);
@ -67,8 +67,8 @@
text-overflow: ellipsis;
}
}
.channel-selector__options {
@extend .channel-selector-flex;
.room-selector__options {
@extend .room-selector-flex;
display: none;
margin-right: var(--sp-ultra-tight);

20
src/app/molecules/channel-tile/ChannelTile.jsx → src/app/molecules/room-tile/RoomTile.jsx
View file

@ -1,6 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
import './ChannelTile.scss';
import './RoomTile.scss';
import Linkify from 'linkifyjs/react';
import colorMXID from '../../../util/colorMXID';
@ -12,20 +12,20 @@ function linkifyContent(content) {
return <Linkify options={{ target: { url: '_blank' } }}>{content}</Linkify>;
}
function ChannelTile({
function RoomTile({
avatarSrc, name, id,
inviterName, memberCount, desc, options,
}) {
return (
<div className="channel-tile">
<div className="channel-tile__avatar">
<div className="room-tile">
<div className="room-tile__avatar">
<Avatar
imageSrc={avatarSrc}
bgColor={colorMXID(id)}
text={name.slice(0, 1)}
/>
</div>
<div className="channel-tile__content">
<div className="room-tile__content">
<Text variant="s1">{name}</Text>
<Text variant="b3">
{
@ -36,12 +36,12 @@ function ChannelTile({
</Text>
{
desc !== null && (typeof desc === 'string')
? <Text className="channel-tile__content__desc" variant="b2">{linkifyContent(desc)}</Text>
? <Text className="room-tile__content__desc" variant="b2">{linkifyContent(desc)}</Text>
: desc
}
</div>
{ options !== null && (
<div className="channel-tile__options">
<div className="room-tile__options">
{options}
</div>
)}
@ -49,14 +49,14 @@ function ChannelTile({
);
}
ChannelTile.defaultProps = {
RoomTile.defaultProps = {
avatarSrc: null,
inviterName: null,
options: null,
desc: null,
memberCount: null,
};
ChannelTile.propTypes = {
RoomTile.propTypes = {
avatarSrc: PropTypes.string,
name: PropTypes.string.isRequired,
id: PropTypes.string.isRequired,
@ -69,4 +69,4 @@ ChannelTile.propTypes = {
options: PropTypes.node,
};
export default ChannelTile;
export default RoomTile;

2
src/app/molecules/channel-tile/ChannelTile.scss → src/app/molecules/room-tile/RoomTile.scss
View file

@ -1,4 +1,4 @@
.channel-tile {
.room-tile {
display: flex;
&__content {

38
src/app/organisms/create-channel/CreateChannel.jsx → src/app/organisms/create-room/CreateRoom.jsx
View file

@ -1,6 +1,6 @@
import React, { useState, useRef } from 'react';
import PropTypes from 'prop-types';
import './CreateChannel.scss';
import './CreateRoom.scss';
import initMatrix from '../../../client/initMatrix';
import { isRoomAliasAvailable } from '../../../util/matrixUtil';
@ -18,7 +18,7 @@ import SettingTile from '../../molecules/setting-tile/SettingTile';
import HashPlusIC from '../../../../public/res/ic/outlined/hash-plus.svg';
import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
function CreateChannel({ isOpen, onRequestClose }) {
function CreateRoom({ isOpen, onRequestClose }) {
const [isPublic, togglePublic] = useState(false);
const [isEncrypted, toggleEncrypted] = useState(true);
const [isValidAddress, updateIsValidAddress] = useState(null);
@ -69,10 +69,10 @@ function CreateChannel({ isOpen, onRequestClose }) {
onRequestClose();
} catch (e) {
if (e.message === 'M_UNKNOWN: Invalid characters in room alias') {
updateCreatingError('ERROR: Invalid characters in channel address');
updateCreatingError('ERROR: Invalid characters in room address');
updateIsValidAddress(false);
} else if (e.message === 'M_ROOM_IN_USE: Room alias already taken') {
updateCreatingError('ERROR: Channel address is already in use');
updateCreatingError('ERROR: Room address is already in use');
updateIsValidAddress(false);
} else updateCreatingError(e.message);
}
@ -110,26 +110,26 @@ function CreateChannel({ isOpen, onRequestClose }) {
return (
<PopupWindow
isOpen={isOpen}
title="Create channel"
title="Create room"
contentOptions={<IconButton src={CrossIC} onClick={onRequestClose} tooltip="Close" />}
onRequestClose={onRequestClose}
>
<div className="create-channel">
<form className="create-channel__form" onSubmit={(e) => { e.preventDefault(); createRoom(); }}>
<div className="create-room">
<form className="create-room__form" onSubmit={(e) => { e.preventDefault(); createRoom(); }}>
<SettingTile
title="Make channel public"
title="Make room public"
options={<Toggle isActive={isPublic} onToggle={togglePublic} />}
content={<Text variant="b3">Public channel can be joined by anyone.</Text>}
content={<Text variant="b3">Public room can be joined by anyone.</Text>}
/>
{isPublic && (
<div>
<Text className="create-channel__address__label" variant="b2">Channel address</Text>
<div className="create-channel__address">
<Text className="create-room__address__label" variant="b2">Room address</Text>
<div className="create-room__address">
<Text variant="b1">#</Text>
<Input value={addressValue} onChange={validateAddress} state={(isValidAddress === false) ? 'error' : 'normal'} forwardRef={addressRef} placeholder="my_room" required />
<Text variant="b1">{hsString}</Text>
</div>
{isValidAddress === false && <Text className="create-channel__address__tip" variant="b3"><span style={{ color: 'var(--bg-danger)' }}>{`#${addressValue}${hsString} is already in use`}</span></Text>}
{isValidAddress === false && <Text className="create-room__address__tip" variant="b3"><span style={{ color: 'var(--bg-danger)' }}>{`#${addressValue}${hsString} is already in use`}</span></Text>}
</div>
)}
{!isPublic && (
@ -140,26 +140,26 @@ function CreateChannel({ isOpen, onRequestClose }) {
/>
)}
<Input value={topicValue} onChange={handleTopicChange} forwardRef={topicRef} minHeight={174} resizable label="Topic (optional)" />
<div className="create-channel__name-wrapper">
<Input value={titleValue} onChange={handleTitleChange} forwardRef={nameRef} label="Channel name" required />
<div className="create-room__name-wrapper">
<Input value={titleValue} onChange={handleTitleChange} forwardRef={nameRef} label="Room name" required />
<Button disabled={isValidAddress === false || isCreatingRoom} iconSrc={HashPlusIC} type="submit" variant="primary">Create</Button>
</div>
{isCreatingRoom && (
<div className="create-channel__loading">
<div className="create-room__loading">
<Spinner size="small" />
<Text>Creating channel...</Text>
<Text>Creating room...</Text>
</div>
)}
{typeof creatingError === 'string' && <Text className="create-channel__error" variant="b3">{creatingError}</Text>}
{typeof creatingError === 'string' && <Text className="create-room__error" variant="b3">{creatingError}</Text>}
</form>
</div>
</PopupWindow>
);
}
CreateChannel.propTypes = {
CreateRoom.propTypes = {
isOpen: PropTypes.bool.isRequired,
onRequestClose: PropTypes.func.isRequired,
};
export default CreateChannel;
export default CreateRoom;

2
src/app/organisms/create-channel/CreateChannel.scss → src/app/organisms/create-room/CreateRoom.scss
View file

@ -1,4 +1,4 @@
.create-channel {
.create-room {
margin: 0 var(--sp-normal);
margin-right: var(--sp-extra-tight);

14
src/app/organisms/invite-list/InviteList.jsx
View file

@ -11,7 +11,7 @@ import Button from '../../atoms/button/Button';
import IconButton from '../../atoms/button/IconButton';
import Spinner from '../../atoms/spinner/Spinner';
import PopupWindow from '../../molecules/popup-window/PopupWindow';
import ChannelTile from '../../molecules/channel-tile/ChannelTile';
import RoomTile from '../../molecules/room-tile/RoomTile';
import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
@ -47,13 +47,13 @@ function InviteList({ isOpen, onRequestClose }) {
};
}, [procInvite]);
function renderChannelTile(roomId) {
function renderRoomTile(roomId) {
const myRoom = initMatrix.matrixClient.getRoom(roomId);
const roomName = myRoom.name;
let roomAlias = myRoom.getCanonicalAlias();
if (roomAlias === null) roomAlias = myRoom.roomId;
return (
<ChannelTile
<RoomTile
key={myRoom.roomId}
name={roomName}
avatarSrc={initMatrix.matrixClient.getRoom(roomId).getAvatarUrl(initMatrix.matrixClient.baseUrl, 42, 42, 'crop')}
@ -91,7 +91,7 @@ function InviteList({ isOpen, onRequestClose }) {
const myRoom = initMatrix.matrixClient.getRoom(roomId);
const roomName = myRoom.name;
return (
<ChannelTile
<RoomTile
key={myRoom.roomId}
name={roomName}
id={myRoom.getDMInviter()}
@ -114,14 +114,14 @@ function InviteList({ isOpen, onRequestClose }) {
<Text variant="b3">Spaces</Text>
</div>
)}
{ Array.from(initMatrix.roomList.inviteSpaces).map(renderChannelTile) }
{ Array.from(initMatrix.roomList.inviteSpaces).map(renderRoomTile) }
{ initMatrix.roomList.inviteRooms.size !== 0 && (
<div className="invites-content__subheading">
<Text variant="b3">Channels</Text>
<Text variant="b3">Rooms</Text>
</div>
)}
{ Array.from(initMatrix.roomList.inviteRooms).map(renderChannelTile) }
{ Array.from(initMatrix.roomList.inviteRooms).map(renderRoomTile) }
</div>
</PopupWindow>
);

2
src/app/organisms/invite-list/InviteList.scss
View file

@ -14,7 +14,7 @@
}
}
& .channel-tile {
& .room-tile {
margin-top: var(--sp-normal);
&__options {
align-self: flex-end;

4
src/app/organisms/invite-user/InviteUser.jsx
View file

@ -13,7 +13,7 @@ import IconButton from '../../atoms/button/IconButton';
import Spinner from '../../atoms/spinner/Spinner';
import Input from '../../atoms/input/Input';
import PopupWindow from '../../molecules/popup-window/PopupWindow';
import ChannelTile from '../../molecules/channel-tile/ChannelTile';
import RoomTile from '../../molecules/room-tile/RoomTile';
import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
import UserIC from '../../../../public/res/ic/outlined/user.svg';
@ -188,7 +188,7 @@ function InviteUser({
const userId = user.user_id;
const name = typeof user.display_name === 'string' ? user.display_name : userId;
return (
<ChannelTile
<RoomTile
key={userId}
avatarSrc={typeof user.avatar_url === 'string' ? mx.mxcUrlToHttp(user.avatar_url, 42, 42, 'crop') : null}
name={name}

2
src/app/organisms/invite-user/InviteUser.scss
View file

@ -39,7 +39,7 @@
border-top: 1px solid var(--bg-surface-border);
}
& .channel-tile {
& .room-tile {
margin-top: var(--sp-normal);
&__options {
align-self: flex-end;

4
src/app/organisms/navigation/Drawer.jsx
View file

@ -40,9 +40,9 @@ function Drawer() {
<DrawerHeader activeTab={activeTab} />
<div className="drawer__content-wrapper">
<DrawerBradcrumb />
<div className="channels__wrapper">
<div className="rooms__wrapper">
<ScrollView autoHide>
<div className="channels-container">
<div className="rooms-container">
{
activeTab === 'home'
? <Home />

8
src/app/organisms/navigation/Drawer.scss
View file

@ -28,14 +28,14 @@
display: none;
height: var(--header-height);
}
.channels__wrapper {
.rooms__wrapper {
@extend .drawer-flexItem;
}
.channels-container {
.rooms-container {
padding-bottom: var(--sp-extra-loose);
& > .channel-selector {
& > .room-selector {
width: calc(100% - var(--sp-extra-tight));
margin-left: auto;
@ -46,7 +46,7 @@
}
& > .channel-selector:first-child {
& > .room-selector:first-child {
margin-top: var(--sp-extra-tight);
}

14
src/app/organisms/navigation/DrawerHeader.jsx
View file

@ -2,7 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import {
openPublicChannels, openCreateChannel, openInviteUser,
openPublicRooms, openCreateRoom, openInviteUser,
} from '../../../client/action/navigation';
import Text from '../../atoms/text/Text';
@ -26,22 +26,22 @@ function DrawerHeader({ activeTab }) {
<ContextMenu
content={(hideMenu) => (
<>
<MenuHeader>Add channel</MenuHeader>
<MenuHeader>Add room</MenuHeader>
<MenuItem
iconSrc={HashPlusIC}
onClick={() => { hideMenu(); openCreateChannel(); }}
onClick={() => { hideMenu(); openCreateRoom(); }}
>
Create new channel
Create new room
</MenuItem>
<MenuItem
iconSrc={HashSearchIC}
onClick={() => { hideMenu(); openPublicChannels(); }}
onClick={() => { hideMenu(); openPublicRooms(); }}
>
Add Public channel
Add public room
</MenuItem>
</>
)}
render={(toggleMenu) => (<IconButton onClick={toggleMenu} tooltip="Add channel" src={PlusIC} size="normal" />)}
render={(toggleMenu) => (<IconButton onClick={toggleMenu} tooltip="Add room" src={PlusIC} size="normal" />)}
/>
)}
{/* <IconButton onClick={() => ''} tooltip="Menu" src={VerticalMenuIC} size="normal" /> */}

2
src/app/organisms/navigation/Home.jsx
View file

@ -70,7 +70,7 @@ function Home() {
/>
))}
{ roomIds.length !== 0 && <Text className="cat-header" variant="b3">Channels</Text> }
{ roomIds.length !== 0 && <Text className="cat-header" variant="b3">Rooms</Text> }
{ roomIds.map((id) => (
<Selector
key={id}

4
src/app/organisms/navigation/Selector.jsx
View file

@ -7,7 +7,7 @@ import { doesRoomHaveUnread } from '../../../util/matrixUtil';
import { selectRoom } from '../../../client/action/navigation';
import navigation from '../../../client/state/navigation';
import ChannelSelector from '../../molecules/channel-selector/ChannelSelector';
import RoomSelector from '../../molecules/room-selector/RoomSelector';
import HashIC from '../../../../public/res/ic/outlined/hash.svg';
import HashLockIC from '../../../../public/res/ic/outlined/hash-lock.svg';
@ -39,7 +39,7 @@ function Selector({ roomId, isDM, drawerPostie }) {
}, []);
return (
<ChannelSelector
<RoomSelector
key={roomId}
name={room.name}
roomId={roomId}

6
src/app/organisms/navigation/SideBar.jsx
View file

@ -6,7 +6,7 @@ import cons from '../../../client/state/cons';
import colorMXID from '../../../util/colorMXID';
import logout from '../../../client/action/logout';
import {
changeTab, openInviteList, openPublicChannels, openSettings,
changeTab, openInviteList, openPublicRooms, openSettings,
} from '../../../client/action/navigation';
import navigation from '../../../client/state/navigation';
@ -92,8 +92,8 @@ function SideBar() {
<div className="scrollable-content">
<div className="featured-container">
<SidebarAvatar active={activeTab === 'home'} onClick={() => changeTab('home')} tooltip="Home" iconSrc={HomeIC} />
<SidebarAvatar active={activeTab === 'dms'} onClick={() => changeTab('dms')} tooltip="People" iconSrc={UserIC} />
<SidebarAvatar onClick={() => openPublicChannels()} tooltip="Public channels" iconSrc={HashSearchIC} />
<SidebarAvatar active={activeTab === 'dm'} onClick={() => changeTab('dm')} tooltip="People" iconSrc={UserIC} />
<SidebarAvatar onClick={() => openPublicRooms()} tooltip="Public rooms" iconSrc={HashSearchIC} />
</div>
<div className="sidebar-divider" />
<div className="space-container" />

124
src/app/organisms/public-channels/PublicChannels.jsx → src/app/organisms/public-rooms/PublicRooms.jsx
View file

@ -1,6 +1,6 @@
import React, { useState, useEffect, useRef } from 'react';
import PropTypes from 'prop-types';
import './PublicChannels.scss';
import './PublicRooms.scss';
import initMatrix from '../../../client/initMatrix';
import cons from '../../../client/state/cons';
@ -13,7 +13,7 @@ import IconButton from '../../atoms/button/IconButton';
import Spinner from '../../atoms/spinner/Spinner';
import Input from '../../atoms/input/Input';
import PopupWindow from '../../molecules/popup-window/PopupWindow';
import ChannelTile from '../../molecules/channel-tile/ChannelTile';
import RoomTile from '../../molecules/room-tile/RoomTile';
import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
import HashSearchIC from '../../../../public/res/ic/outlined/hash-search.svg';
@ -53,7 +53,7 @@ function TryJoinWithAlias({ alias, onRequestClose }) {
} catch (e) {
setStatus({
isJoining: false,
error: `Unable to join ${alias}. Either channel is private or doesn't exist.`,
error: `Unable to join ${alias}. Either room is private or doesn't exist.`,
roomId: null,
tempRoomId: null,
});
@ -84,38 +84,38 @@ TryJoinWithAlias.propTypes = {
onRequestClose: PropTypes.func.isRequired,
};
function PublicChannels({ isOpen, searchTerm, onRequestClose }) {
function PublicRooms({ isOpen, searchTerm, onRequestClose }) {
const [isSearching, updateIsSearching] = useState(false);
const [isViewMore, updateIsViewMore] = useState(false);
const [publicChannels, updatePublicChannels] = useState([]);
const [publicRooms, updatePublicRooms] = useState([]);
const [nextBatch, updateNextBatch] = useState(undefined);
const [searchQuery, updateSearchQuery] = useState({});
const [joiningChannels, updateJoiningChannels] = useState(new Set());
const [joiningRooms, updateJoiningRooms] = useState(new Set());
const channelNameRef = useRef(null);
const roomNameRef = useRef(null);
const hsRef = useRef(null);
const userId = initMatrix.matrixClient.getUserId();
async function searchChannels(viewMore) {
let inputChannelName = channelNameRef?.current?.value || searchTerm;
async function searchRooms(viewMore) {
let inputRoomName = roomNameRef?.current?.value || searchTerm;
let isInputAlias = false;
if (typeof inputChannelName === 'string') {
isInputAlias = inputChannelName[0] === '#' && inputChannelName.indexOf(':') > 1;
if (typeof inputRoomName === 'string') {
isInputAlias = inputRoomName[0] === '#' && inputRoomName.indexOf(':') > 1;
}
const hsFromAlias = (isInputAlias) ? inputChannelName.slice(inputChannelName.indexOf(':') + 1) : null;
const hsFromAlias = (isInputAlias) ? inputRoomName.slice(inputRoomName.indexOf(':') + 1) : null;
let inputHs = hsFromAlias || hsRef?.current?.value;
if (typeof inputHs !== 'string') inputHs = userId.slice(userId.indexOf(':') + 1);
if (typeof inputChannelName !== 'string') inputChannelName = '';
if (typeof inputRoomName !== 'string') inputRoomName = '';
if (isSearching) return;
if (viewMore !== true
&& inputChannelName === searchQuery.name
&& inputRoomName === searchQuery.name
&& inputHs === searchQuery.homeserver
) return;
updateSearchQuery({
name: inputChannelName,
name: inputRoomName,
homeserver: inputHs,
});
if (isViewMore !== viewMore) updateIsViewMore(viewMore);
@ -128,26 +128,26 @@ function PublicChannels({ isOpen, searchTerm, onRequestClose }) {
since: viewMore ? nextBatch : undefined,
include_all_networks: true,
filter: {
generic_search_term: inputChannelName,
generic_search_term: inputRoomName,
},
});
const totalChannels = viewMore ? publicChannels.concat(result.chunk) : result.chunk;
updatePublicChannels(totalChannels);
const totalRooms = viewMore ? publicRooms.concat(result.chunk) : result.chunk;
updatePublicRooms(totalRooms);
updateNextBatch(result.next_batch);
updateIsSearching(false);
updateIsViewMore(false);
if (totalChannels.length === 0) {
if (totalRooms.length === 0) {
updateSearchQuery({
error: `No result found for "${inputChannelName}" on ${inputHs}`,
alias: isInputAlias ? inputChannelName : null,
error: `No result found for "${inputRoomName}" on ${inputHs}`,
alias: isInputAlias ? inputRoomName : null,
});
}
} catch (e) {
updatePublicChannels([]);
updatePublicRooms([]);
updateSearchQuery({
error: 'Something went wrong!',
alias: isInputAlias ? inputChannelName : null,
alias: isInputAlias ? inputRoomName : null,
});
updateIsSearching(false);
updateNextBatch(undefined);
@ -156,13 +156,13 @@ function PublicChannels({ isOpen, searchTerm, onRequestClose }) {
}
useEffect(() => {
if (isOpen) searchChannels();
if (isOpen) searchRooms();
}, [isOpen]);
function handleOnRoomAdded(roomId) {
if (joiningChannels.has(roomId)) {
joiningChannels.delete(roomId);
updateJoiningChannels(new Set(Array.from(joiningChannels)));
if (joiningRooms.has(roomId)) {
joiningRooms.delete(roomId);
updateJoiningRooms(new Set(Array.from(joiningRooms)));
}
}
useEffect(() => {
@ -170,36 +170,36 @@ function PublicChannels({ isOpen, searchTerm, onRequestClose }) {
return () => {
initMatrix.roomList.removeListener(cons.events.roomList.ROOM_JOINED, handleOnRoomAdded);
};
}, [joiningChannels]);
}, [joiningRooms]);
function handleViewChannel(roomId) {
function handleViewRoom(roomId) {
selectRoom(roomId);
onRequestClose();
}
function joinChannel(roomIdOrAlias) {
joiningChannels.add(roomIdOrAlias);
updateJoiningChannels(new Set(Array.from(joiningChannels)));
function joinRoom(roomIdOrAlias) {
joiningRooms.add(roomIdOrAlias);
updateJoiningRooms(new Set(Array.from(joiningRooms)));
roomActions.join(roomIdOrAlias, false);
}
function renderChannelList(channels) {
return channels.map((channel) => {
const alias = typeof channel.canonical_alias === 'string' ? channel.canonical_alias : channel.room_id;
const name = typeof channel.name === 'string' ? channel.name : alias;
const isJoined = initMatrix.roomList.rooms.has(channel.room_id);
function renderRoomList(rooms) {
return rooms.map((room) => {
const alias = typeof room.canonical_alias === 'string' ? room.canonical_alias : room.room_id;
const name = typeof room.name === 'string' ? room.name : alias;
const isJoined = initMatrix.roomList.rooms.has(room.room_id);
return (
<ChannelTile
key={channel.room_id}
avatarSrc={typeof channel.avatar_url === 'string' ? initMatrix.matrixClient.mxcUrlToHttp(channel.avatar_url, 42, 42, 'crop') : null}
<RoomTile
key={room.room_id}
avatarSrc={typeof room.avatar_url === 'string' ? initMatrix.matrixClient.mxcUrlToHttp(room.avatar_url, 42, 42, 'crop') : null}
name={name}
id={alias}
memberCount={channel.num_joined_members}
desc={typeof channel.topic === 'string' ? channel.topic : null}
memberCount={room.num_joined_members}
desc={typeof room.topic === 'string' ? room.topic : null}
options={(
<>
{isJoined && <Button onClick={() => handleViewChannel(channel.room_id)}>Open</Button>}
{!isJoined && (joiningChannels.has(channel.room_id) ? <Spinner size="small" /> : <Button onClick={() => joinChannel(channel.aliases?.[0] || channel.room_id)} variant="primary">Join</Button>)}
{isJoined && <Button onClick={() => handleViewRoom(room.room_id)}>Open</Button>}
{!isJoined && (joiningRooms.has(room.room_id) ? <Spinner size="small" /> : <Button onClick={() => joinRoom(room.aliases?.[0] || room.room_id)} variant="primary">Join</Button>)}
</>
)}
/>
@ -210,26 +210,26 @@ function PublicChannels({ isOpen, searchTerm, onRequestClose }) {
return (
<PopupWindow
isOpen={isOpen}
title="Public channels"
title="Public rooms"
contentOptions={<IconButton src={CrossIC} onClick={onRequestClose} tooltip="Close" />}
onRequestClose={onRequestClose}
>
<div className="public-channels">
<form className="public-channels__form" onSubmit={(e) => { e.preventDefault(); searchChannels(); }}>
<div className="public-channels__input-wrapper">
<Input value={searchTerm} forwardRef={channelNameRef} label="Channel name or alias" />
<div className="public-rooms">
<form className="public-rooms__form" onSubmit={(e) => { e.preventDefault(); searchRooms(); }}>
<div className="public-rooms__input-wrapper">
<Input value={searchTerm} forwardRef={roomNameRef} label="Room name or alias" />
<Input forwardRef={hsRef} value={userId.slice(userId.indexOf(':') + 1)} label="Homeserver" required />
</div>
<Button disabled={isSearching} iconSrc={HashSearchIC} variant="primary" type="submit">Search</Button>
</form>
<div className="public-channels__search-status">
<div className="public-rooms__search-status">
{
typeof searchQuery.name !== 'undefined' && isSearching && (
searchQuery.name === ''
? (
<div className="flex--center">
<Spinner size="small" />
<Text variant="b2">{`Loading public channels from ${searchQuery.homeserver}...`}</Text>
<Text variant="b2">{`Loading public rooms from ${searchQuery.homeserver}...`}</Text>
</div>
)
: (
@ -243,28 +243,28 @@ function PublicChannels({ isOpen, searchTerm, onRequestClose }) {
{
typeof searchQuery.name !== 'undefined' && !isSearching && (
searchQuery.name === ''
? <Text variant="b2">{`Public channels on ${searchQuery.homeserver}.`}</Text>
? <Text variant="b2">{`Public rooms on ${searchQuery.homeserver}.`}</Text>
: <Text variant="b2">{`Search result for "${searchQuery.name}" on ${searchQuery.homeserver}.`}</Text>
)
}
{ searchQuery.error && (
<>
<Text className="public-channels__search-error" variant="b2">{searchQuery.error}</Text>
<Text className="public-rooms__search-error" variant="b2">{searchQuery.error}</Text>
{typeof searchQuery.alias === 'string' && (
<TryJoinWithAlias onRequestClose={onRequestClose} alias={searchQuery.alias} />
)}
</>
)}
</div>
{ publicChannels.length !== 0 && (
<div className="public-channels__content">
{ renderChannelList(publicChannels) }
{ publicRooms.length !== 0 && (
<div className="public-rooms__content">
{ renderRoomList(publicRooms) }
</div>
)}
{ publicChannels.length !== 0 && publicChannels.length % SEARCH_LIMIT === 0 && (
<div className="public-channels__view-more">
{ publicRooms.length !== 0 && publicRooms.length % SEARCH_LIMIT === 0 && (
<div className="public-rooms__view-more">
{ isViewMore !== true && (
<Button onClick={() => searchChannels(true)}>View more</Button>
<Button onClick={() => searchRooms(true)}>View more</Button>
)}
{ isViewMore && <Spinner /> }
</div>
@ -274,14 +274,14 @@ function PublicChannels({ isOpen, searchTerm, onRequestClose }) {
);
}
PublicChannels.defaultProps = {
PublicRooms.defaultProps = {
searchTerm: undefined,
};
PublicChannels.propTypes = {
PublicRooms.propTypes = {
isOpen: PropTypes.bool.isRequired,
searchTerm: PropTypes.string,
onRequestClose: PropTypes.func.isRequired,
};
export default PublicChannels;
export default PublicRooms;

4
src/app/organisms/public-channels/PublicChannels.scss → src/app/organisms/public-rooms/PublicRooms.scss
View file

@ -1,4 +1,4 @@
.public-channels {
.public-rooms {
margin: 0 var(--sp-normal);
margin-right: var(--sp-extra-tight);
margin-top: var(--sp-extra-tight);
@ -75,7 +75,7 @@
}
}
& .channel-tile {
& .room-tile {
margin-top: var(--sp-normal);
&__options {
align-self: flex-end;

38
src/app/organisms/pw/Windows.jsx
View file

@ -4,17 +4,17 @@ import cons from '../../../client/state/cons';
import navigation from '../../../client/state/navigation';
import InviteList from '../invite-list/InviteList';
import PublicChannels from '../public-channels/PublicChannels';
import CreateChannel from '../create-channel/CreateChannel';
import PublicRooms from '../public-rooms/PublicRooms';
import CreateRoom from '../create-room/CreateRoom';
import InviteUser from '../invite-user/InviteUser';
import Settings from '../settings/Settings';
function Windows() {
const [isInviteList, changeInviteList] = useState(false);
const [publicChannels, changePublicChannels] = useState({
const [publicRooms, changePublicRooms] = useState({
isOpen: false, searchTerm: undefined,
});
const [isCreateChannel, changeCreateChannel] = useState(false);
const [isCreateRoom, changeCreateRoom] = useState(false);
const [inviteUser, changeInviteUser] = useState({
isOpen: false, roomId: undefined, term: undefined,
});
@ -23,14 +23,14 @@ function Windows() {
function openInviteList() {
changeInviteList(true);
}
function openPublicChannels(searchTerm) {
changePublicChannels({
function openPublicRooms(searchTerm) {
changePublicRooms({
isOpen: true,
searchTerm,
});
}
function openCreateChannel() {
changeCreateChannel(true);
function openCreateRoom() {
changeCreateRoom(true);
}
function openInviteUser(roomId, searchTerm) {
changeInviteUser({
@ -45,14 +45,14 @@ function Windows() {
useEffect(() => {
navigation.on(cons.events.navigation.INVITE_LIST_OPENED, openInviteList);
navigation.on(cons.events.navigation.PUBLIC_CHANNELS_OPENED, openPublicChannels);
navigation.on(cons.events.navigation.CREATE_CHANNEL_OPENED, openCreateChannel);
navigation.on(cons.events.navigation.PUBLIC_ROOMS_OPENED, openPublicRooms);
navigation.on(cons.events.navigation.CREATE_ROOM_OPENED, openCreateRoom);
navigation.on(cons.events.navigation.INVITE_USER_OPENED, openInviteUser);
navigation.on(cons.events.navigation.SETTINGS_OPENED, openSettings);
return () => {
navigation.removeListener(cons.events.navigation.INVITE_LIST_OPENED, openInviteList);
navigation.removeListener(cons.events.navigation.PUBLIC_CHANNELS_OPENED, openPublicChannels);
navigation.removeListener(cons.events.navigation.CREATE_CHANNEL_OPENED, openCreateChannel);
navigation.removeListener(cons.events.navigation.PUBLIC_ROOMS_OPENED, openPublicRooms);
navigation.removeListener(cons.events.navigation.CREATE_ROOM_OPENED, openCreateRoom);
navigation.removeListener(cons.events.navigation.INVITE_USER_OPENED, openInviteUser);
navigation.removeListener(cons.events.navigation.SETTINGS_OPENED, openSettings);
};
@ -64,14 +64,14 @@ function Windows() {
isOpen={isInviteList}
onRequestClose={() => changeInviteList(false)}
/>
<PublicChannels
isOpen={publicChannels.isOpen}
searchTerm={publicChannels.searchTerm}
onRequestClose={() => changePublicChannels({ isOpen: false, searchTerm: undefined })}
<PublicRooms
isOpen={publicRooms.isOpen}
searchTerm={publicRooms.searchTerm}
onRequestClose={() => changePublicRooms({ isOpen: false, searchTerm: undefined })}
/>
<CreateChannel
isOpen={isCreateChannel}
onRequestClose={() => changeCreateChannel(false)}
<CreateRoom
isOpen={isCreateRoom}
onRequestClose={() => changeCreateRoom(false)}
/>
<InviteUser
isOpen={inviteUser.isOpen}

0
src/app/organisms/channel/PeopleDrawer.jsx → src/app/organisms/room/PeopleDrawer.jsx
View file

0
src/app/organisms/channel/PeopleDrawer.scss → src/app/organisms/room/PeopleDrawer.scss
View file

12
src/app/organisms/channel/Channel.jsx → src/app/organisms/room/Room.jsx
View file

@ -1,14 +1,14 @@
import React, { useState, useEffect } from 'react';
import './Channel.scss';
import './Room.scss';
import cons from '../../../client/state/cons';
import navigation from '../../../client/state/navigation';
import Welcome from '../welcome/Welcome';
import ChannelView from './ChannelView';
import RoomView from './RoomView';
import PeopleDrawer from './PeopleDrawer';
function Channel() {
function Room() {
const [selectedRoomId, changeSelectedRoomId] = useState(null);
const [isDrawerVisible, toggleDrawerVisiblity] = useState(navigation.isPeopleDrawerVisible);
useEffect(() => {
@ -30,11 +30,11 @@ function Channel() {
if (selectedRoomId === null) return <Welcome />;
return (
<div className="channel-container">
<ChannelView roomId={selectedRoomId} />
<div className="room-container">
<RoomView roomId={selectedRoomId} />
{ isDrawerVisible && <PeopleDrawer roomId={selectedRoomId} />}
</div>
);
}
export default Channel;
export default Room;

2
src/app/organisms/channel/Channel.scss → src/app/organisms/room/Room.scss
View file

@ -1,4 +1,4 @@
.channel-container {
.room-container {
display: flex;
height: 100%;
}

36
src/app/organisms/channel/ChannelView.jsx → src/app/organisms/room/RoomView.jsx
View file

@ -1,6 +1,6 @@
import React, { useState, useEffect, useRef } from 'react';
import PropTypes from 'prop-types';
import './ChannelView.scss';
import './RoomView.scss';
import EventEmitter from 'events';
@ -8,11 +8,11 @@ import RoomTimeline from '../../../client/state/RoomTimeline';
import ScrollView from '../../atoms/scroll/ScrollView';
import ChannelViewHeader from './ChannelViewHeader';
import ChannelViewContent from './ChannelViewContent';
import ChannelViewFloating from './ChannelViewFloating';
import ChannelViewInput from './ChannelViewInput';
import ChannelViewCmdBar from './ChannelViewCmdBar';
import RoomViewHeader from './RoomViewHeader';
import RoomViewContent from './RoomViewContent';
import RoomViewFloating from './RoomViewFloating';
import RoomViewInput from './RoomViewInput';
import RoomViewCmdBar from './RoomViewCmdBar';
import { scrollToBottom, isAtBottom, autoScrollToBottom } from './common';
@ -22,7 +22,7 @@ let lastScrollTop = 0;
let lastScrollHeight = 0;
let isReachedBottom = true;
let isReachedTop = false;
function ChannelView({ roomId }) {
function RoomView({ roomId }) {
const [roomTimeline, updateRoomTimeline] = useState(null);
const timelineSVRef = useRef(null);
@ -101,13 +101,13 @@ function ChannelView({ roomId }) {
}
return (
<div className="channel-view">
<ChannelViewHeader roomId={roomId} />
<div className="channel-view__content-wrapper">
<div className="channel-view__scrollable">
<div className="room-view">
<RoomViewHeader roomId={roomId} />
<div className="room-view__content-wrapper">
<div className="room-view__scrollable">
<ScrollView onScroll={onTimelineScroll} ref={timelineSVRef} autoHide>
{roomTimeline !== null && (
<ChannelViewContent
<RoomViewContent
roomId={roomId}
roomTimeline={roomTimeline}
timelineScroll={timelineScroll}
@ -116,7 +116,7 @@ function ChannelView({ roomId }) {
)}
</ScrollView>
{roomTimeline !== null && (
<ChannelViewFloating
<RoomViewFloating
roomId={roomId}
roomTimeline={roomTimeline}
timelineScroll={timelineScroll}
@ -125,14 +125,14 @@ function ChannelView({ roomId }) {
)}
</div>
{roomTimeline !== null && (
<div className="channel-view__sticky">
<ChannelViewInput
<div className="room-view__sticky">
<RoomViewInput
roomId={roomId}
roomTimeline={roomTimeline}
timelineScroll={timelineScroll}
viewEvent={viewEvent}
/>
<ChannelViewCmdBar
<RoomViewCmdBar
roomId={roomId}
roomTimeline={roomTimeline}
viewEvent={viewEvent}
@ -143,8 +143,8 @@ function ChannelView({ roomId }) {
</div>
);
}
ChannelView.propTypes = {
RoomView.propTypes = {
roomId: PropTypes.string.isRequired,
};
export default ChannelView;
export default RoomView;

16
src/app/organisms/channel/ChannelView.scss → src/app/organisms/room/RoomView.scss
View file

@ -1,24 +1,24 @@
.channel-view-flexBox {
.room-view-flexBox {
display: flex;
flex-direction: column;
}
.channel-view-flexItem {
.room-view-flexItem {
flex: 1;
min-height: 0;
min-width: 0;
}
.channel-view {
@extend .channel-view-flexItem;
@extend .channel-view-flexBox;
.room-view {
@extend .room-view-flexItem;
@extend .room-view-flexBox;
&__content-wrapper {
@extend .channel-view-flexItem;
@extend .channel-view-flexBox;
@extend .room-view-flexItem;
@extend .room-view-flexBox;
}
&__scrollable {
@extend .channel-view-flexItem;
@extend .room-view-flexItem;
position: relative;
}

34
src/app/organisms/channel/ChannelViewCmdBar.jsx → src/app/organisms/room/RoomViewCmdBar.jsx
View file

@ -1,7 +1,7 @@
/* eslint-disable react/prop-types */
import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import './ChannelViewCmdBar.scss';
import './RoomViewCmdBar.scss';
import parse from 'html-react-parser';
import twemoji from 'twemoji';
@ -11,8 +11,8 @@ import { toggleMarkdown } from '../../../client/action/settings';
import * as roomActions from '../../../client/action/room';
import {
selectRoom,
openCreateChannel,
openPublicChannels,
openCreateRoom,
openPublicRooms,
openInviteUser,
openReadReceipts,
} from '../../../client/action/navigation';
@ -41,17 +41,17 @@ const commands = [{
description: 'Start direct message with user. Example: /startDM/@johndoe.matrix.org',
exe: (roomId, searchTerm) => openInviteUser(undefined, searchTerm),
}, {
name: 'createChannel',
description: 'Create new channel',
exe: () => openCreateChannel(),
name: 'createRoom',
description: 'Create new room',
exe: () => openCreateRoom(),
}, {
name: 'join',
isOptions: true,
description: 'Join channel with alias. Example: /join/#cinny:matrix.org',
exe: (roomId, searchTerm) => openPublicChannels(searchTerm),
description: 'Join room with alias. Example: /join/#cinny:matrix.org',
exe: (roomId, searchTerm) => openPublicRooms(searchTerm),
}, {
name: 'leave',
description: 'Leave current channel',
description: 'Leave current room',
exe: (roomId) => roomActions.leave(roomId),
}, {
name: 'invite',
@ -70,10 +70,10 @@ function CmdHelp() {
<Text variant="b2">/command_name</Text>
<MenuHeader>Go-to commands</MenuHeader>
<Text variant="b2">{'>*space_name'}</Text>
<Text variant="b2">{'>#channel_name'}</Text>
<Text variant="b2">{'>#room_name'}</Text>
<Text variant="b2">{'>@people_name'}</Text>
<MenuHeader>Autofill command</MenuHeader>
<Text variant="b2">:emoji_name:</Text>
<MenuHeader>Autofill commands</MenuHeader>
<Text variant="b2">:emoji_name</Text>
<Text variant="b2">@name</Text>
</>
)}
@ -174,7 +174,7 @@ function getCmdActivationMessage(prefix) {
const cmd = {
'/': () => genMessage('General command mode activated. ', 'Type command name for suggestions.'),
'>*': () => genMessage('Go-to command mode activated. ', 'Type space name for suggestions.'),
'>#': () => genMessage('Go-to command mode activated. ', 'Type channel name for suggestions.'),
'>#': () => genMessage('Go-to command mode activated. ', 'Type room name for suggestions.'),
'>@': () => genMessage('Go-to command mode activated. ', 'Type people name for suggestions.'),
':': () => genMessage('Emoji autofill command mode activated. ', 'Type emoji shortcut for suggestions.'),
'@': () => genMessage('Name autofill command mode activated. ', 'Type name for suggestions.'),
@ -273,7 +273,7 @@ function getCmdSuggestions({ prefix, option, suggestions }, fireCmd) {
const cmd = {
'/': (cmds) => getGenCmdSuggestions(prefix, cmds),
'>*': (spaces) => getRoomsSuggestion(prefix, spaces),
'>#': (channels) => getRoomsSuggestion(prefix, channels),
'>#': (rooms) => getRoomsSuggestion(prefix, rooms),
'>@': (peoples) => getRoomsSuggestion(prefix, peoples),
':': (emos) => getEmojiSuggestion(prefix, emos),
'@': (members) => getNameSuggestion(prefix, members),
@ -284,7 +284,7 @@ function getCmdSuggestions({ prefix, option, suggestions }, fireCmd) {
const asyncSearch = new AsyncSearch();
let cmdPrefix;
let cmdOption;
function ChannelViewCmdBar({ roomId, roomTimeline, viewEvent }) {
function RoomViewCmdBar({ roomId, roomTimeline, viewEvent }) {
const [cmd, setCmd] = useState(null);
function displaySuggestions(suggestions) {
@ -466,10 +466,10 @@ function ChannelViewCmdBar({ roomId, roomTimeline, viewEvent }) {
</div>
);
}
ChannelViewCmdBar.propTypes = {
RoomViewCmdBar.propTypes = {
roomId: PropTypes.string.isRequired,
roomTimeline: PropTypes.shape({}).isRequired,
viewEvent: PropTypes.shape({}).isRequired,
};
export default ChannelViewCmdBar;
export default RoomViewCmdBar;

0
src/app/organisms/channel/ChannelViewCmdBar.scss → src/app/organisms/room/RoomViewCmdBar.scss
View file

24
src/app/organisms/channel/ChannelViewContent.jsx → src/app/organisms/room/RoomViewContent.jsx
View file

@ -1,7 +1,7 @@
/* eslint-disable react/prop-types */
import React, { useState, useEffect, useLayoutEffect } from 'react';
import PropTypes from 'prop-types';
import './ChannelViewContent.scss';
import './RoomViewContent.scss';
import dateFormat from 'dateformat';
@ -29,7 +29,7 @@ import {
PlaceholderMessage,
} from '../../molecules/message/Message';
import * as Media from '../../molecules/media/Media';
import ChannelIntro from '../../molecules/channel-intro/ChannelIntro';
import RoomIntro from '../../molecules/room-intro/RoomIntro';
import TimelineChange from '../../molecules/message/TimelineChange';
import ReplyArrowIC from '../../../../public/res/ic/outlined/reply-arrow.svg';
@ -131,20 +131,20 @@ function genMediaContent(mE) {
}
}
function genChannelIntro(mEvent, roomTimeline) {
function genRoomIntro(mEvent, roomTimeline) {
const mx = initMatrix.matrixClient;
const roomTopic = roomTimeline.room.currentState.getStateEvents('m.room.topic')[0]?.getContent().topic;
const isDM = initMatrix.roomList.directs.has(roomTimeline.roomId);
let avatarSrc = roomTimeline.room.getAvatarUrl(mx.baseUrl, 80, 80, 'crop');
avatarSrc = isDM ? roomTimeline.room.getAvatarFallbackMember()?.getAvatarUrl(mx.baseUrl, 80, 80, 'crop') : avatarSrc;
return (
<ChannelIntro
key={mEvent ? mEvent.getId() : 'channel-intro'}
<RoomIntro
key={mEvent ? mEvent.getId() : 'room-intro'}
roomId={roomTimeline.roomId}
avatarSrc={avatarSrc}
name={roomTimeline.room.name}
heading={`Welcome to ${roomTimeline.room.name}`}
desc={`This is the beginning of ${roomTimeline.room.name} channel.${typeof roomTopic !== 'undefined' ? (` Topic: ${roomTopic}`) : ''}`}
desc={`This is the beginning of ${roomTimeline.room.name} room.${typeof roomTopic !== 'undefined' ? (` Topic: ${roomTopic}`) : ''}`}
time={mEvent ? `Created at ${dateFormat(mEvent.getDate(), 'dd mmmm yyyy, hh:MM TT')}` : null}
/>
);
@ -188,7 +188,7 @@ function pickEmoji(e, roomId, eventId, roomTimeline) {
}
let wasAtBottom = true;
function ChannelViewContent({
function RoomViewContent({
roomId, roomTimeline, timelineScroll, viewEvent,
}) {
const [isReachedTimelineEnd, setIsReachedTimelineEnd] = useState(false);
@ -517,7 +517,7 @@ function ChannelViewContent({
}
function renderMessage(mEvent) {
if (mEvent.getType() === 'm.room.create') return genChannelIntro(mEvent, roomTimeline);
if (mEvent.getType() === 'm.room.create') return genRoomIntro(mEvent, roomTimeline);
if (
mEvent.getType() !== 'm.room.message'
&& mEvent.getType() !== 'm.room.encrypted'
@ -562,20 +562,20 @@ function ChannelViewContent({
}
return (
<div className="channel-view__content">
<div className="room-view__content">
<div className="timeline__wrapper">
{ roomTimeline.timeline[0].getType() !== 'm.room.create' && !isReachedTimelineEnd && genPlaceholders() }
{ roomTimeline.timeline[0].getType() !== 'm.room.create' && isReachedTimelineEnd && genChannelIntro(undefined, roomTimeline)}
{ roomTimeline.timeline[0].getType() !== 'm.room.create' && isReachedTimelineEnd && genRoomIntro(undefined, roomTimeline)}
{ roomTimeline.timeline.map(renderMessage) }
</div>
</div>
);
}
ChannelViewContent.propTypes = {
RoomViewContent.propTypes = {
roomId: PropTypes.string.isRequired,
roomTimeline: PropTypes.shape({}).isRequired,
timelineScroll: PropTypes.shape({}).isRequired,
viewEvent: PropTypes.shape({}).isRequired,
};
export default ChannelViewContent;
export default RoomViewContent;

2
src/app/organisms/channel/ChannelViewContent.scss → src/app/organisms/room/RoomViewContent.scss
View file

@ -1,4 +1,4 @@
.channel-view__content {
.room-view__content {
min-height: 100%;
display: flex;
flex-direction: column;

12
src/app/organisms/channel/ChannelViewFloating.jsx → src/app/organisms/room/RoomViewFloating.jsx
View file

@ -1,7 +1,7 @@
/* eslint-disable react/prop-types */
import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import './ChannelViewFloating.scss';
import './RoomViewFloating.scss';
import initMatrix from '../../../client/initMatrix';
import cons from '../../../client/state/cons';
@ -13,7 +13,7 @@ import ChevronBottomIC from '../../../../public/res/ic/outlined/chevron-bottom.s
import { getUsersActionJsx } from './common';
function ChannelViewFloating({
function RoomViewFloating({
roomId, roomTimeline, timelineScroll, viewEvent,
}) {
const [reachedBottom, setReachedBottom] = useState(true);
@ -53,11 +53,11 @@ function ChannelViewFloating({
return (
<>
<div className={`channel-view__typing${isSomeoneTyping(typingMembers) ? ' channel-view__typing--open' : ''}`}>
<div className={`room-view__typing${isSomeoneTyping(typingMembers) ? ' room-view__typing--open' : ''}`}>
<div className="bouncingLoader"><div /></div>
<Text variant="b2">{getTypingMessage(typingMembers)}</Text>
</div>
<div className={`channel-view__STB${reachedBottom ? '' : ' channel-view__STB--open'}`}>
<div className={`room-view__STB${reachedBottom ? '' : ' room-view__STB--open'}`}>
<IconButton
onClick={() => {
timelineScroll.enableSmoothScroll();
@ -71,7 +71,7 @@ function ChannelViewFloating({
</>
);
}
ChannelViewFloating.propTypes = {
RoomViewFloating.propTypes = {
roomId: PropTypes.string.isRequired,
roomTimeline: PropTypes.shape({}).isRequired,
timelineScroll: PropTypes.shape({
@ -80,4 +80,4 @@ ChannelViewFloating.propTypes = {
viewEvent: PropTypes.shape({}).isRequired,
};
export default ChannelViewFloating;
export default RoomViewFloating;

2
src/app/organisms/channel/ChannelViewFloating.scss → src/app/organisms/room/RoomViewFloating.scss
View file

@ -1,4 +1,4 @@
.channel-view {
.room-view {
&__typing {
display: flex;
padding: var(--sp-ultra-tight) var(--sp-normal);

6
src/app/organisms/channel/ChannelViewHeader.jsx → src/app/organisms/room/RoomViewHeader.jsx
View file

@ -17,7 +17,7 @@ import VerticalMenuIC from '../../../../public/res/ic/outlined/vertical-menu.svg
import LeaveArrowIC from '../../../../public/res/ic/outlined/leave-arrow.svg';
import AddUserIC from '../../../../public/res/ic/outlined/add-user.svg';
function ChannelViewHeader({ roomId }) {
function RoomViewHeader({ roomId }) {
const mx = initMatrix.matrixClient;
const isDM = initMatrix.roomList.directs.has(roomId);
let avatarSrc = mx.getRoom(roomId).getAvatarUrl(mx.baseUrl, 36, 36, 'crop');
@ -55,8 +55,8 @@ function ChannelViewHeader({ roomId }) {
</Header>
);
}
ChannelViewHeader.propTypes = {
RoomViewHeader.propTypes = {
roomId: PropTypes.string.isRequired,
};
export default ChannelViewHeader;
export default RoomViewHeader;

28
src/app/organisms/channel/ChannelViewInput.jsx → src/app/organisms/room/RoomViewInput.jsx
View file

@ -1,7 +1,7 @@
/* eslint-disable react/prop-types */
import React, { useState, useEffect, useRef } from 'react';
import PropTypes from 'prop-types';
import './ChannelViewInput.scss';
import './RoomViewInput.scss';
import TextareaAutosize from 'react-autosize-textarea';
@ -33,7 +33,7 @@ const CMD_REGEX = /(\/|>[#*@]|:|@)(\S*)$/;
let isTyping = false;
let isCmdActivated = false;
let cmdCursorPos = null;
function ChannelViewInput({
function RoomViewInput({
roomId, roomTimeline, timelineScroll, viewEvent,
}) {
const [attachment, setAttachment] = useState(null);
@ -304,14 +304,14 @@ function ChannelViewInput({
function renderInputs() {
return (
<>
<div className={`channel-input__option-container${attachment === null ? '' : ' channel-attachment__option'}`}>
<div className={`room-input__option-container${attachment === null ? '' : ' room-attachment__option'}`}>
<input onChange={uploadFileChange} style={{ display: 'none' }} ref={uploadInputRef} type="file" />
<IconButton onClick={handleUploadClick} tooltip={attachment === null ? 'Upload' : 'Cancel'} src={CirclePlusIC} />
</div>
<div ref={inputBaseRef} className="channel-input__input-container">
<div ref={inputBaseRef} className="room-input__input-container">
{roomTimeline.isEncryptedRoom() && <RawIcon size="extra-small" src={ShieldIC} />}
<ScrollView autoHide>
<Text className="channel-input__textarea-wrapper">
<Text className="room-input__textarea-wrapper">
<TextareaAutosize
ref={textAreaRef}
onChange={handleMsgTyping}
@ -324,7 +324,7 @@ function ChannelViewInput({
{isMarkdown && <RawIcon size="extra-small" src={MarkdownIC} />}
<button ref={escBtnRef} tabIndex="-1" onClick={deactivateCmdAndEmit} className="btn-cmd-esc" type="button"><Text variant="b3">ESC</Text></button>
</div>
<div ref={rightOptionsRef} className="channel-input__option-container">
<div ref={rightOptionsRef} className="room-input__option-container">
<IconButton
onClick={(e) => {
const boxInfo = e.target.getBoundingClientRect();
@ -346,14 +346,14 @@ function ChannelViewInput({
function attachFile() {
const fileType = attachment.type.slice(0, attachment.type.indexOf('/'));
return (
<div className="channel-attachment">
<div className={`channel-attachment__preview${fileType !== 'image' ? ' channel-attachment__icon' : ''}`}>
<div className="room-attachment">
<div className={`room-attachment__preview${fileType !== 'image' ? ' room-attachment__icon' : ''}`}>
{fileType === 'image' && <img alt={attachment.name} src={URL.createObjectURL(attachment)} />}
{fileType === 'video' && <RawIcon src={VLCIC} />}
{fileType === 'audio' && <RawIcon src={VolumeFullIC} />}
{fileType !== 'image' && fileType !== 'video' && fileType !== 'audio' && <RawIcon src={FileIC} />}
</div>
<div className="channel-attachment__info">
<div className="room-attachment__info">
<Text variant="b1">{attachment.name}</Text>
<Text variant="b3"><span ref={uploadProgressRef}>{`size: ${bytesToSize(attachment.size)}`}</span></Text>
</div>
@ -363,7 +363,7 @@ function ChannelViewInput({
function attachReply() {
return (
<div className="channel-reply">
<div className="room-reply">
<IconButton
onClick={() => {
roomsInput.cancelReplyTo(roomId);
@ -387,17 +387,17 @@ function ChannelViewInput({
<>
{ replyTo !== null && attachReply()}
{ attachment !== null && attachFile() }
<form className="channel-input" onSubmit={(e) => { e.preventDefault(); }}>
<form className="room-input" onSubmit={(e) => { e.preventDefault(); }}>
{
roomTimeline.room.isSpaceRoom()
? <Text className="channel-input__space" variant="b1">Spaces are yet to be implemented</Text>
? <Text className="room-input__space" variant="b1">Spaces are yet to be implemented</Text>
: renderInputs()
}
</form>
</>
);
}
ChannelViewInput.propTypes = {
RoomViewInput.propTypes = {
roomId: PropTypes.string.isRequired,
roomTimeline: PropTypes.shape({}).isRequired,
timelineScroll: PropTypes.shape({
@ -410,4 +410,4 @@ ChannelViewInput.propTypes = {
viewEvent: PropTypes.shape({}).isRequired,
};
export default ChannelViewInput;
export default RoomViewInput;

6
src/app/organisms/channel/ChannelViewInput.scss → src/app/organisms/room/RoomViewInput.scss
View file

@ -1,4 +1,4 @@
.channel-input {
.room-input {
padding: var(--sp-extra-tight) calc(var(--sp-normal) - 2px);
display: flex;
min-height: 48px;
@ -73,7 +73,7 @@
}
}
.channel-attachment {
.room-attachment {
--side-spacing: calc(var(--sp-normal) + var(--av-small) + var(--sp-tight));
display: flex;
align-items: center;
@ -112,7 +112,7 @@
}
}
.channel-reply {
.room-reply {
display: flex;
align-items: center;
background-color: var(--bg-surface-low);

4
src/app/organisms/channel/common.jsx → src/app/organisms/room/common.jsx
View file

@ -9,7 +9,7 @@ function getTimelineJSXMessages() {
return (
<>
<b>{user}</b>
{' joined the channel'}
{' joined the room'}
</>
);
},
@ -18,7 +18,7 @@ function getTimelineJSXMessages() {
return (
<>
<b>{user}</b>
{' left the channel'}
{' left the room'}
{reasonMsg}
</>
);

6
src/app/templates/client/Client.jsx
View file

@ -4,7 +4,7 @@ import './Client.scss';
import Text from '../../atoms/text/Text';
import Spinner from '../../atoms/spinner/Spinner';
import Navigation from '../../organisms/navigation/Navigation';
import Channel from '../../organisms/channel/Channel';
import Room from '../../organisms/room/Room';
import Windows from '../../organisms/pw/Windows';
import Dialogs from '../../organisms/pw/Dialogs';
import EmojiBoardOpener from '../../organisms/emoji-board/EmojiBoardOpener';
@ -38,8 +38,8 @@ function Client() {
<div className="navigation__wrapper">
<Navigation />
</div>
<div className="channel__wrapper">
<Channel />
<div className="room__wrapper">
<Room />
</div>
<Windows />
<Dialogs />

2
src/app/templates/client/Client.scss
View file

@ -6,7 +6,7 @@
.navigation__wrapper {
width: var(--navigation-width);
}
.channel__wrapper {
.room__wrapper {
flex: 1;
min-width: 0;
background-color: var(--bg-surface);

12
src/client/action/navigation.js
View file

@ -27,16 +27,16 @@ function openInviteList() {
});
}
function openPublicChannels(searchTerm) {
function openPublicRooms(searchTerm) {
appDispatcher.dispatch({
type: cons.actions.navigation.OPEN_PUBLIC_CHANNELS,
type: cons.actions.navigation.OPEN_PUBLIC_ROOMS,
searchTerm,
});
}
function openCreateChannel() {
function openCreateRoom() {
appDispatcher.dispatch({
type: cons.actions.navigation.OPEN_CREATE_CHANNEL,
type: cons.actions.navigation.OPEN_CREATE_ROOM,
});
}
@ -75,8 +75,8 @@ export {
selectRoom,
togglePeopleDrawer,
openInviteList,
openPublicChannels,
openCreateChannel,
openPublicRooms,
openCreateRoom,
openInviteUser,
openSettings,
openEmojiBoard,

8
src/client/state/cons.js
View file

@ -12,8 +12,8 @@ const cons = {
SELECT_ROOM: 'SELECT_ROOM',
TOGGLE_PEOPLE_DRAWER: 'TOGGLE_PEOPLE_DRAWER',
OPEN_INVITE_LIST: 'OPEN_INVITE_LIST',
OPEN_PUBLIC_CHANNELS: 'OPEN_PUBLIC_CHANNELS',
OPEN_CREATE_CHANNEL: 'OPEN_CREATE_CHANNEL',
OPEN_PUBLIC_ROOMS: 'OPEN_PUBLIC_ROOMS',
OPEN_CREATE_ROOM: 'OPEN_CREATE_ROOM',
OPEN_INVITE_USER: 'OPEN_INVITE_USER',
OPEN_SETTINGS: 'OPEN_SETTINGS',
OPEN_EMOJIBOARD: 'OPEN_EMOJIBOARD',
@ -37,8 +37,8 @@ const cons = {
ROOM_SELECTED: 'ROOM_SELECTED',
PEOPLE_DRAWER_TOGGLED: 'PEOPLE_DRAWER_TOGGLED',
INVITE_LIST_OPENED: 'INVITE_LIST_OPENED',
PUBLIC_CHANNELS_OPENED: 'PUBLIC_CHANNELS_OPENED',
CREATE_CHANNEL_OPENED: 'CREATE_CHANNEL_OPENED',
PUBLIC_ROOMS_OPENED: 'PUBLIC_ROOMS_OPENED',
CREATE_ROOM_OPENED: 'CREATE_ROOM_OPENED',
INVITE_USER_OPENED: 'INVITE_USER_OPENED',
SETTINGS_OPENED: 'SETTINGS_OPENED',
EMOJIBOARD_OPENED: 'EMOJIBOARD_OPENED',

8
src/client/state/navigation.js
View file

@ -37,11 +37,11 @@ class Navigation extends EventEmitter {
[cons.actions.navigation.OPEN_INVITE_LIST]: () => {
this.emit(cons.events.navigation.INVITE_LIST_OPENED);
},
[cons.actions.navigation.OPEN_PUBLIC_CHANNELS]: () => {
this.emit(cons.events.navigation.PUBLIC_CHANNELS_OPENED, action.searchTerm);
[cons.actions.navigation.OPEN_PUBLIC_ROOMS]: () => {
this.emit(cons.events.navigation.PUBLIC_ROOMS_OPENED, action.searchTerm);
},
[cons.actions.navigation.OPEN_CREATE_CHANNEL]: () => {
this.emit(cons.events.navigation.CREATE_CHANNEL_OPENED);
[cons.actions.navigation.OPEN_CREATE_ROOM]: () => {
this.emit(cons.events.navigation.CREATE_ROOM_OPENED);
},
[cons.actions.navigation.OPEN_INVITE_USER]: () => {
this.emit(cons.events.navigation.INVITE_USER_OPENED, action.roomId, action.searchTerm);