diff --git a/src/app/components/create-room/CreateRoomVoiceSelector.tsx b/src/app/components/create-room/CreateRoomVoiceSelector.tsx new file mode 100644 index 00000000..9ed2a0f8 --- /dev/null +++ b/src/app/components/create-room/CreateRoomVoiceSelector.tsx @@ -0,0 +1,68 @@ +import React from 'react'; +import { Box, Text, Icon, Icons, config, IconSrc } from 'folds'; +import { SequenceCard } from '../sequence-card'; +import { SettingTile } from '../setting-tile'; + +export enum CreateRoomVoice { + TextRoom = 'text', + VoiceRoom = 'voice', +} +type CreateRoomVoiceSelectorProps = { + value?: CreateRoomVoice; + onSelect: (value: CreateRoomVoice) => void; + disabled?: boolean; + getIcon: (kind: CreateRoomVoice) => IconSrc; +}; +export function CreateRoomVoiceSelector({ + value, + onSelect, + disabled, + getIcon, +}: CreateRoomVoiceSelectorProps) { + return ( + + onSelect(CreateRoomVoice.TextRoom)} + disabled={disabled} + > + } + after={value === CreateRoomVoice.TextRoom && } + > + Text + + Send text messages, videos and GIFs. + + + + onSelect(CreateRoomVoice.VoiceRoom)} + disabled={disabled} + > + } + after={value === CreateRoomVoice.VoiceRoom && } + > + Voice + + A room optimized for voice calls. + + + + + ); +} diff --git a/src/app/features/create-room/CreateRoom.tsx b/src/app/features/create-room/CreateRoom.tsx index ef8e67be..6cf9f708 100644 --- a/src/app/features/create-room/CreateRoom.tsx +++ b/src/app/features/create-room/CreateRoom.tsx @@ -40,6 +40,10 @@ import { } from '../../components/create-room'; import { RoomType, StateEvent } from '../../../types/matrix/room'; import { IPowerLevels } from '../../hooks/usePowerLevels'; +import { + CreateRoomVoice, + CreateRoomVoiceSelector, +} from '../../components/create-room/CreateRoomVoiceSelector'; const getCreateRoomKindToIcon = (kind: CreateRoomKind) => { if (kind === CreateRoomKind.Private) return Icons.HashLock; @@ -47,12 +51,23 @@ const getCreateRoomKindToIcon = (kind: CreateRoomKind) => { return Icons.HashGlobe; }; +const getCreateRoomVoiceToIcon = (kind: CreateRoomVoice) => { + if (kind === CreateRoomVoice.VoiceRoom) return Icons.VolumeHigh; + return Icons.Hash; +}; + type CreateRoomFormProps = { defaultKind?: CreateRoomKind; + defaultVoice?: CreateRoomVoice; space?: Room; onCreate?: (roomId: string) => void; }; -export function CreateRoomForm({ defaultKind, space, onCreate }: CreateRoomFormProps) { +export function CreateRoomForm({ + defaultKind, + defaultVoice, + space, + onCreate, +}: CreateRoomFormProps) { const mx = useMatrixClient(); const alive = useAlive(); @@ -66,6 +81,7 @@ export function CreateRoomForm({ defaultKind, space, onCreate }: CreateRoomFormP const allowRestricted = space && restrictedSupported(selectedRoomVersion); + const [voice, setVoice] = useState(defaultVoice ?? CreateRoomVoice.TextRoom); const [kind, setKind] = useState( defaultKind ?? allowRestricted ? CreateRoomKind.Restricted : CreateRoomKind.Private ); @@ -74,7 +90,6 @@ export function CreateRoomForm({ defaultKind, space, onCreate }: CreateRoomFormP useAdditionalCreators(); const [federation, setFederation] = useState(true); const [encryption, setEncryption] = useState(false); - const [callRoom, setCallRoom] = useState(false); const [knock, setKnock] = useState(false); const [advance, setAdvance] = useState(false); @@ -123,7 +138,7 @@ export function CreateRoomForm({ defaultKind, space, onCreate }: CreateRoomFormP const powerOverrides: IPowerLevels = { events: {}, }; - if (callRoom) { + if (voice === CreateRoomVoice.VoiceRoom) { roomType = RoomType.Call; powerOverrides.events![StateEvent.GroupCallMemberPrefix] = 0; } @@ -150,6 +165,15 @@ export function CreateRoomForm({ defaultKind, space, onCreate }: CreateRoomFormP return ( + + Type + + Access - - - } - /> - {kind === CreateRoomKind.Public && }