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 && }