abner/for-legacy-web
1
0
Fork 1
mirror of https://github.com/stoatchat/for-legacy-web.git synced 2026-03-06 08:38:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add vortex / voice client.

Browse Source
This commit is contained in:
Paul
2021-06-23 14:52:33 +01:00
parent babb53c794
commit 11c524d6a9
11 changed files with 998 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/pages/channels/ChannelHeader.tsx
View File

@@ -1,19 +1,17 @@
import styled from "styled-components";
import { Channel, User } from "revolt.js";
import { useContext } from "preact/hooks";
import { useHistory } from "react-router-dom";
import Header from "../../components/ui/Header";
import IconButton from "../../components/ui/IconButton";
import HeaderActions from "./actions/HeaderActions";
import Markdown from "../../components/markdown/Markdown";
import { getChannelName } from "../../context/revoltjs/util";
import UserStatus from "../../components/common/user/UserStatus";
import { AppContext } from "../../context/revoltjs/RevoltClient";
import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
import { Save, AtSign, Users, Hash } from "@styled-icons/feather";
import { useStatusColour } from "../../components/common/user/UserIcon";
import { useIntermediate } from "../../context/intermediate/Intermediate";
import { Save, AtSign, Users, Hash, UserPlus, Settings, Sidebar as SidebarIcon } from "@styled-icons/feather";
interface Props {
export interface ChannelHeaderProps {
channel: Channel,
toggleSidebar?: () => void
}
@@ -51,10 +49,9 @@ const Info = styled.div`
}
`;
export default function ChannelHeader({ channel, toggleSidebar }: Props) {
export default function ChannelHeader({ channel, toggleSidebar }: ChannelHeaderProps) {
const { openScreen } = useIntermediate();
const client = useContext(AppContext);
const history = useHistory();
const name = getChannelName(client, channel);
let icon, recipient;
@@ -105,32 +102,7 @@ export default function ChannelHeader({ channel, toggleSidebar }: Props) {
</>
)}
</Info>
<>
{ channel.channel_type === "Group" && (
<>
<IconButton onClick={() =>
openScreen({
id: "user_picker",
omit: channel.recipients,
callback: async users => {
for (const user of users) {
await client.channels.addMember(channel._id, user);
}
}
})}>
<UserPlus size={22} />
</IconButton>
<IconButton onClick={() => history.push(`/channel/${channel._id}/settings`)}>
<Settings size={22} />
</IconButton>
</>
) }
{ channel.channel_type === "Group" && !isTouchscreenDevice && (
<IconButton onClick={toggleSidebar}>
<SidebarIcon size={22} />
</IconButton>
) }
</>
<HeaderActions channel={channel} toggleSidebar={toggleSidebar} />
</Header>
)
}

78
src/pages/channels/actions/HeaderActions.tsx Normal file
View File

@@ -0,0 +1,78 @@
import { useContext } from "preact/hooks";
import { useHistory } from "react-router-dom";
import { ChannelHeaderProps } from "../ChannelHeader";
import IconButton from "../../../components/ui/IconButton";
import { AppContext } from "../../../context/revoltjs/RevoltClient";
import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
import { useIntermediate } from "../../../context/intermediate/Intermediate";
import { VoiceContext, VoiceOperationsContext, VoiceStatus } from "../../../context/Voice";
import { UserPlus, Settings, Sidebar as SidebarIcon, PhoneCall, PhoneOff } from "@styled-icons/feather";
export default function HeaderActions({ channel, toggleSidebar }: ChannelHeaderProps) {
const { openScreen } = useIntermediate();
const client = useContext(AppContext);
const history = useHistory();
return (
<>
{ channel.channel_type === "Group" && (
<>
<IconButton onClick={() =>
openScreen({
id: "user_picker",
omit: channel.recipients,
callback: async users => {
for (const user of users) {
await client.channels.addMember(channel._id, user);
}
}
})}>
<UserPlus size={22} />
</IconButton>
<IconButton onClick={() => history.push(`/channel/${channel._id}/settings`)}>
<Settings size={22} />
</IconButton>
</>
) }
<VoiceActions channel={channel} />
{ channel.channel_type === "Group" && !isTouchscreenDevice && (
<IconButton onClick={toggleSidebar}>
<SidebarIcon size={22} />
</IconButton>
) }
</>
)
}
function VoiceActions({ channel }: Pick<ChannelHeaderProps, 'channel'>) {
if (channel.channel_type === 'SavedMessages' ||
channel.channel_type === 'TextChannel') return null;
const voice = useContext(VoiceContext);
const { connect, disconnect } = useContext(VoiceOperationsContext);
if (voice.status >= VoiceStatus.READY) {
if (voice.roomId === channel._id) {
return (
<IconButton onClick={disconnect}>
<PhoneOff size={22} />
</IconButton>
)
} else {
return (
<IconButton onClick={() => {
disconnect();
connect(channel._id);
}}>
<PhoneCall size={22} />
</IconButton>
)
}
} else {
return (
<IconButton>
<PhoneCall size={22} /** ! FIXME: TEMP */ color="red" />
</IconButton>
)
}
}