revite/src/pages/channels/Channel.tsx

172 lines
4.9 KiB
TypeScript
Raw Normal View History

import { Hash } from "@styled-icons/boxicons-regular";
import { Ghost } from "@styled-icons/boxicons-solid";
import { reaction } from "mobx";
2021-07-29 13:41:01 -04:00
import { observer } from "mobx-react-lite";
import { useParams } from "react-router-dom";
import { Channel as ChannelI } from "revolt.js/dist/maps/Channels";
2021-07-05 06:23:23 -04:00
import styled from "styled-components";
2021-09-07 20:40:57 -04:00
import { Text } from "preact-i18n";
import { useEffect } from "preact/hooks";
2021-07-05 06:23:23 -04:00
import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
2021-07-05 06:23:23 -04:00
import { useApplicationState } from "../../mobx/State";
import { SIDEBAR_MEMBERS } from "../../mobx/stores/Layout";
import { useClient } from "../../context/revoltjs/RevoltClient";
import AgeGate from "../../components/common/AgeGate";
2021-07-05 06:23:23 -04:00
import MessageBox from "../../components/common/messaging/MessageBox";
import JumpToBottom from "../../components/common/messaging/bars/JumpToBottom";
import TypingIndicator from "../../components/common/messaging/bars/TypingIndicator";
2021-09-07 20:40:57 -04:00
import Header from "../../components/ui/Header";
2021-07-05 06:23:23 -04:00
import RightSidebar from "../../components/navigation/RightSidebar";
2021-07-05 06:23:23 -04:00
import ChannelHeader from "./ChannelHeader";
import { MessageArea } from "./messaging/MessageArea";
import VoiceHeader from "./voice/VoiceHeader";
const ChannelMain = styled.div`
2021-07-05 06:25:20 -04:00
flex-grow: 1;
display: flex;
min-height: 0;
overflow: hidden;
flex-direction: row;
`;
const ChannelContent = styled.div`
2021-07-05 06:25:20 -04:00
flex-grow: 1;
display: flex;
overflow: hidden;
flex-direction: column;
`;
2021-09-07 20:40:57 -04:00
const PlaceholderBase = styled.div`
flex-grow: 1;
display: flex;
overflow: hidden;
flex-direction: column;
.placeholder {
justify-content: center;
text-align: center;
margin: auto;
2021-09-07 20:40:57 -04:00
.primary {
color: var(--secondary-foreground);
font-weight: 700;
font-size: 22px;
margin: 0 0 5px 0;
}
2021-09-07 20:40:57 -04:00
.secondary {
color: var(--tertiary-foreground);
font-weight: 400;
}
2021-09-07 20:40:57 -04:00
svg {
margin: 2em auto;
fill-opacity: 0.8;
}
}
`;
export function Channel({ id }: { id: string }) {
const client = useClient();
const channel = client.channels.get(id);
2021-09-07 20:40:57 -04:00
if (!channel) return <ChannelPlaceholder />;
2021-06-23 08:52:16 -04:00
2021-07-05 06:25:20 -04:00
if (channel.channel_type === "VoiceChannel") {
return <VoiceChannel channel={channel} />;
}
2021-07-29 13:41:01 -04:00
return <TextChannel channel={channel} />;
2021-06-23 08:52:16 -04:00
}
const TextChannel = observer(({ channel }: { channel: ChannelI }) => {
const layout = useApplicationState().layout;
// Mark channel as read.
useEffect(() => {
const checkUnread = () =>
channel.unread &&
channel.client.unreads!.markRead(
channel._id,
channel.last_message_id!,
true,
);
checkUnread();
return reaction(
() => channel.last_message_id,
() => checkUnread(),
);
}, [channel]);
2021-07-05 06:25:20 -04:00
return (
<AgeGate
type="channel"
channel={channel}
gated={
2021-08-05 09:47:00 -04:00
!!(
(channel.channel_type === "TextChannel" ||
channel.channel_type === "Group") &&
channel.nsfw
2021-08-05 09:47:00 -04:00
)
}>
<ChannelHeader channel={channel} />
2021-07-05 06:25:20 -04:00
<ChannelMain>
<ChannelContent>
<VoiceHeader id={channel._id} />
2021-08-07 15:43:08 -04:00
<MessageArea channel={channel} />
2021-07-31 08:48:26 -04:00
<TypingIndicator channel={channel} />
2021-08-07 15:43:08 -04:00
<JumpToBottom channel={channel} />
2021-07-05 06:25:20 -04:00
<MessageBox channel={channel} />
</ChannelContent>
{!isTouchscreenDevice &&
layout.getSectionState(SIDEBAR_MEMBERS, true) && (
<RightSidebar />
)}
2021-07-05 06:25:20 -04:00
</ChannelMain>
</AgeGate>
2021-07-05 06:25:20 -04:00
);
2021-07-29 13:41:01 -04:00
});
2021-06-23 08:52:16 -04:00
function VoiceChannel({ channel }: { channel: ChannelI }) {
2021-07-05 06:25:20 -04:00
return (
<>
<ChannelHeader channel={channel} />
<VoiceHeader id={channel._id} />
</>
);
}
2021-09-07 20:40:57 -04:00
function ChannelPlaceholder() {
return (
<PlaceholderBase>
<Header placement="primary">
<Hash size={24} />
<span className="name">
<Text id="app.main.channel.errors.nochannel" />
</span>
2021-09-07 20:40:57 -04:00
</Header>
<div className="placeholder">
<Ghost width={80} />
<div className="primary">
<Text id="app.main.channel.errors.title" />
</div>
<div className="secondary">
<Text id="app.main.channel.errors.nochannels" />
</div>
2021-09-07 20:40:57 -04:00
</div>
</PlaceholderBase>
);
}
2021-08-05 09:47:00 -04:00
export default function ChannelComponent() {
2021-07-05 06:25:20 -04:00
const { channel } = useParams<{ channel: string }>();
return <Channel id={channel} key={channel} />;
}