Merge pull request #5 from Tymek-V/feat/channel-type-selector

Channel type selector

src/app/components/create-room/CreateRoomKindSelector.tsx

@@ -2,12 +2,8 @@ import React from 'react';
 import { Box, Text, Icon, Icons, config, IconSrc } from 'folds';
 import { SequenceCard } from '../sequence-card';
 import { SettingTile } from '../setting-tile';
+import { CreateRoomKind } from './types';
 
-export enum CreateRoomKind {
-  Private = 'private',
-  Restricted = 'restricted',
-  Public = 'public',
-}
 type CreateRoomKindSelectorProps = {
   value?: CreateRoomKind;
   onSelect: (value: CreateRoomKind) => void;

src/app/components/create-room/CreateRoomVoiceSelector.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import { Box, Text, Icon, Icons, config, IconSrc } from 'folds';
+import { SequenceCard } from '../sequence-card';
+import { SettingTile } from '../setting-tile';
+import { CreateRoomVoice } from './types';
+
+type CreateRoomVoiceSelectorProps = {
+  value?: CreateRoomVoice;
+  onSelect: (value: CreateRoomVoice) => void;
+  disabled?: boolean;
+  getIcon: (kind: CreateRoomVoice) => IconSrc;
+};
+export function CreateRoomVoiceSelector({
+  value,
+  onSelect,
+  disabled,
+  getIcon,
+}: CreateRoomVoiceSelectorProps) {
+  return (
+    <Box shrink="No" direction="Column" gap="100">
+      <SequenceCard
+        style={{ padding: config.space.S300 }}
+        variant={value === CreateRoomVoice.TextRoom ? 'Primary' : 'SurfaceVariant'}
+        direction="Column"
+        gap="100"
+        as="button"
+        type="button"
+        aria-pressed={value === CreateRoomVoice.TextRoom}
+        onClick={() => onSelect(CreateRoomVoice.TextRoom)}
+        disabled={disabled}
+      >
+        <SettingTile
+          before={<Icon size="400" src={getIcon(CreateRoomVoice.TextRoom)} />}
+          after={value === CreateRoomVoice.TextRoom && <Icon src={Icons.Check} />}
+        >
+          <Text size="H6">Text</Text>
+          <Text size="T300" priority="300">
+            Send text messages, videos and GIFs.
+          </Text>
+        </SettingTile>
+      </SequenceCard>
+      <SequenceCard
+        style={{ padding: config.space.S300 }}
+        variant={value === CreateRoomVoice.VoiceRoom ? 'Primary' : 'SurfaceVariant'}
+        direction="Column"
+        gap="100"
+        as="button"
+        type="button"
+        aria-pressed={value === CreateRoomVoice.VoiceRoom}
+        onClick={() => onSelect(CreateRoomVoice.VoiceRoom)}
+        disabled={disabled}
+      >
+        <SettingTile
+          before={<Icon size="400" src={getIcon(CreateRoomVoice.VoiceRoom)} />}
+          after={value === CreateRoomVoice.VoiceRoom && <Icon src={Icons.Check} />}
+        >
+          <Text size="H6">Voice</Text>
+          <Text size="T300" priority="300">
+            A room optimized for voice calls.
+          </Text>
+        </SettingTile>
+      </SequenceCard>
+    </Box>
+  );
+}

src/app/components/create-room/index.ts

@@ -3,3 +3,4 @@ export * from './CreateRoomAliasInput';
 export * from './RoomVersionSelector';
 export * from './utils';
 export * from './AdditionalCreatorInput';
+export * from './types';

src/app/components/create-room/types.ts

@@ -0,0 +1,10 @@
+export enum CreateRoomVoice {
+  TextRoom = 'text',
+  VoiceRoom = 'voice',
+}
+
+export enum CreateRoomKind {
+  Private = 'private',
+  Restricted = 'restricted',
+  Public = 'public',
+}

src/app/components/create-room/utils.ts

@@ -7,11 +7,11 @@ import {
   Room,
 } from 'matrix-js-sdk';
 import { RoomJoinRulesEventContent } from 'matrix-js-sdk/lib/types';
-import { CreateRoomKind } from './CreateRoomKindSelector';
 import { RoomType, StateEvent } from '../../../types/matrix/room';
 import { getViaServers } from '../../plugins/via-servers';
 import { getMxIdServer } from '../../utils/matrix';
 import { IPowerLevels } from '../../hooks/usePowerLevels';
+import { CreateRoomKind } from './types';
 
 export const createRoomCreationContent = (
   type: RoomType | undefined,

src/app/features/create-room/CreateRoom.tsx

@@ -1,5 +1,5 @@
 import React, { FormEventHandler, useCallback, useEffect, useState } from 'react';
-import { MatrixError, Room } from 'matrix-js-sdk';
+import { MatrixError, Room, JoinRule } from 'matrix-js-sdk';
 import {
   Box,
   Button,
@@ -37,22 +37,40 @@ import {
   CreateRoomKindSelector,
   RoomVersionSelector,
   useAdditionalCreators,
+  CreateRoomVoice,
 } from '../../components/create-room';
 import { RoomType, StateEvent } from '../../../types/matrix/room';
 import { IPowerLevels } from '../../hooks/usePowerLevels';
+import { CreateRoomVoiceSelector } from '../../components/create-room/CreateRoomVoiceSelector';
+import { getRoomIconSrc } from '../../utils/room';
 
-const getCreateRoomKindToIcon = (kind: CreateRoomKind) => {
-  if (kind === CreateRoomKind.Private) return Icons.HashLock;
-  if (kind === CreateRoomKind.Restricted) return Icons.Hash;
-  return Icons.HashGlobe;
+const getCreateRoomKindToIcon = (kind: CreateRoomKind, voice?: CreateRoomVoice) => {
+  const isVoiceRoom = voice === CreateRoomVoice.VoiceRoom;
+
+  let joinRule: JoinRule = JoinRule.Public;
+  if (kind === CreateRoomKind.Restricted) joinRule = JoinRule.Restricted;
+  if (kind === CreateRoomKind.Private) joinRule = JoinRule.Knock;
+
+  return getRoomIconSrc(Icons, isVoiceRoom ? RoomType.Call : undefined, joinRule);
+};
+
+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 +84,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 +93,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 +141,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 +168,17 @@ export function CreateRoomForm({ defaultKind, space, onCreate }: CreateRoomFormP
 
   return (
     <Box as="form" onSubmit={handleSubmit} grow="Yes" direction="Column" gap="500">
+      {!space && (
+        <Box direction="Column" gap="100">
+          <Text size="L400">Type</Text>
+          <CreateRoomVoiceSelector
+            value={voice}
+            onSelect={setVoice}
+            disabled={disabled}
+            getIcon={getCreateRoomVoiceToIcon}
+          />
+        </Box>
+      )}
       <Box direction="Column" gap="100">
         <Text size="L400">Access</Text>
         <CreateRoomKindSelector
@@ -157,14 +186,14 @@ export function CreateRoomForm({ defaultKind, space, onCreate }: CreateRoomFormP
           onSelect={setKind}
           canRestrict={allowRestricted}
           disabled={disabled}
-          getIcon={getCreateRoomKindToIcon}
+          getIcon={(roomKind) => getCreateRoomKindToIcon(roomKind, voice)}
         />
       </Box>
       <Box shrink="No" direction="Column" gap="100">
         <Text size="L400">Name</Text>
         <Input
           required
-          before={<Icon size="100" src={getCreateRoomKindToIcon(kind)} />}
+          before={<Icon size="100" src={getCreateRoomKindToIcon(kind, voice)} />}
           name="nameInput"
           autoFocus
           size="500"
@@ -184,20 +213,6 @@ export function CreateRoomForm({ defaultKind, space, onCreate }: CreateRoomFormP
           disabled={disabled}
         />
       </Box>
-      <SequenceCard
-        style={{ padding: config.space.S300 }}
-        variant="SurfaceVariant"
-        direction="Column"
-        gap="500"
-      >
-        <SettingTile
-          title="Call Room"
-          description="Enable this to create a room optimized for voice calls."
-          after={
-            <Switch variant="Primary" value={callRoom} onChange={setCallRoom} disabled={disabled} />
-          }
-        />
-      </SequenceCard>
 
       {kind === CreateRoomKind.Public && <CreateRoomAliasInput disabled={disabled} />}
 

src/app/features/create-room/CreateRoomModal.tsx

@@ -23,12 +23,13 @@ import {
 } from '../../state/hooks/createRoomModal';
 import { CreateRoomModalState } from '../../state/createRoomModal';
 import { stopPropagation } from '../../utils/keyboard';
+import { CreateRoomVoice } from '../../components/create-room/types';
 
 type CreateRoomModalProps = {
   state: CreateRoomModalState;
 };
 function CreateRoomModal({ state }: CreateRoomModalProps) {
-  const { spaceId } = state;
+  const { spaceId, voice } = state;
   const closeDialog = useCloseCreateRoomModal();
 
   const allJoinedRooms = useAllJoinedRoomsSet();
@@ -57,7 +58,7 @@ function CreateRoomModal({ state }: CreateRoomModalProps) {
                   }}
                 >
                   <Box grow="Yes">
-                    <Text size="H4">New Room</Text>
+                    <Text size="H4">New {voice === CreateRoomVoice.VoiceRoom && 'Voice '}Room</Text>
                   </Box>
                   <Box shrink="No">
                     <IconButton size="300" radii="300" onClick={closeDialog}>
@@ -74,7 +75,7 @@ function CreateRoomModal({ state }: CreateRoomModalProps) {
                     direction="Column"
                     gap="500"
                   >
-                    <CreateRoomForm space={space} onCreate={closeDialog} />
+                    <CreateRoomForm space={space} onCreate={closeDialog} defaultVoice={voice} />
                   </Box>
                 </Scroll>
               </Box>

src/app/features/lobby/SpaceItem.tsx

@@ -36,6 +36,7 @@ import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
 import { useOpenCreateRoomModal } from '../../state/hooks/createRoomModal';
 import { useOpenCreateSpaceModal } from '../../state/hooks/createSpaceModal';
 import { AddExistingModal } from '../add-existing';
+import { CreateRoomVoice } from '../../components/create-room/types';
 
 function SpaceProfileLoading() {
   return (
@@ -249,8 +250,8 @@ function AddRoomButton({ item }: { item: HierarchyItem }) {
     setCords(evt.currentTarget.getBoundingClientRect());
   };
 
-  const handleCreateRoom = () => {
-    openCreateRoomModal(item.roomId);
+  const handleCreateRoom = (voice?: CreateRoomVoice) => {
+    openCreateRoomModal(item.roomId, voice);
     setCords(undefined);
   };
 
@@ -281,10 +282,19 @@ function AddRoomButton({ item }: { item: HierarchyItem }) {
               radii="300"
               variant="Primary"
               fill="None"
-              onClick={handleCreateRoom}
+              onClick={() => handleCreateRoom(CreateRoomVoice.TextRoom)}
             >
               <Text size="T300">New Room</Text>
             </MenuItem>
+            <MenuItem
+              size="300"
+              radii="300"
+              variant="Primary"
+              fill="None"
+              onClick={() => handleCreateRoom(CreateRoomVoice.VoiceRoom)}
+            >
+              <Text size="T300">New Voice Room</Text>
+            </MenuItem>
             <MenuItem size="300" radii="300" fill="None" onClick={handleAddExisting}>
               <Text size="T300">Existing Room</Text>
             </MenuItem>

src/app/state/createRoomModal.ts

@@ -1,7 +1,9 @@
 import { atom } from 'jotai';
+import { CreateRoomVoice } from '../components/create-room/types';
 
 export type CreateRoomModalState = {
   spaceId?: string;
+  voice?: CreateRoomVoice;
 };
 
 export const createRoomModalAtom = atom<CreateRoomModalState | undefined>(undefined);

src/app/state/hooks/createRoomModal.ts

@@ -1,6 +1,7 @@
 import { useCallback } from 'react';
 import { useAtomValue, useSetAtom } from 'jotai';
 import { createRoomModalAtom, CreateRoomModalState } from '../createRoomModal';
+import { CreateRoomVoice } from '../../components/create-room/types';
 
 export const useCreateRoomModalState = (): CreateRoomModalState | undefined => {
   const data = useAtomValue(createRoomModalAtom);
@@ -19,13 +20,13 @@ export const useCloseCreateRoomModal = (): CloseCallback => {
   return close;
 };
 
-type OpenCallback = (space?: string) => void;
+type OpenCallback = (space?: string, voice?: CreateRoomVoice) => void;
 export const useOpenCreateRoomModal = (): OpenCallback => {
   const setSettings = useSetAtom(createRoomModalAtom);
 
   const open: OpenCallback = useCallback(
-    (spaceId) => {
-      setSettings({ spaceId });
+    (spaceId, voice) => {
+      setSettings({ spaceId, voice });
     },
     [setSettings]
   );