feat: Add video call support

config.json

@@ -8,6 +8,7 @@
     "xmr.se"
   ],
   "allowCustomHomeservers": true,
+  "elementCallUrl": null,
 
   "featuredCommunities": {
     "openAsDefault": false,

docker-nginx.conf

@@ -14,6 +14,8 @@ server {
     rewrite ^/public/(.*)$ /public/$1 break;
     rewrite ^/assets/(.*)$ /assets/$1 break;
 
+    rewrite ^/element-call/dist/(.*)$ /element-call/dist/$1 break;
+
     rewrite ^(.+)$ /index.html break;
   }
 }

package.json

@@ -10,6 +10,7 @@
   "scripts": {
     "start": "vite",
     "build": "vite build",
+    "preview": "vite preview",
     "lint": "yarn check:eslint && yarn check:prettier",
     "check:eslint": "eslint src/*",
     "check:prettier": "prettier --check .",
@@ -24,6 +25,7 @@
     "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "1.3.0",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "1.0.3",
     "@fontsource/inter": "4.5.14",
+    "@matrix-org/react-sdk-module-api": "2.5.0",
     "@tanstack/react-query": "5.24.1",
     "@tanstack/react-query-devtools": "5.24.1",
     "@tanstack/react-virtual": "3.2.0",
@@ -54,6 +56,7 @@
     "jotai": "2.6.0",
     "linkify-react": "4.1.3",
     "linkifyjs": "4.1.3",
+    "matrix-widget-api": "1.11.0",
     "matrix-js-sdk": "38.2.0",
     "millify": "6.1.0",
     "pdfjs-dist": "4.2.67",
@@ -76,6 +79,7 @@
     "ua-parser-js": "1.0.35"
   },
   "devDependencies": {
+    "@element-hq/element-call-embedded": "0.16.3",
     "@esbuild-plugins/node-globals-polyfill": "0.2.3",
     "@rollup/plugin-inject": "5.0.3",
     "@rollup/plugin-wasm": "6.1.1",
@@ -107,4 +111,4 @@
     "vite-plugin-static-copy": "1.0.4",
     "vite-plugin-top-level-await": "1.4.4"
   }
-}
+}

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,10 +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,
@@ -82,6 +83,44 @@ export const createRoomEncryptionState = () => ({
   },
 });
 
+export const createRoomCallState = () => ({
+  type: 'org.matrix.msc3401.call',
+  state_key: '',
+  content: {},
+});
+
+export const createPowerLevelContentOverrides = (
+  base: IPowerLevels,
+  overrides: Partial<IPowerLevels>
+): IPowerLevels => ({
+  ...base,
+  ...overrides,
+  ...(base.events || overrides.events
+    ? {
+        events: {
+          ...base.events,
+          ...overrides.events,
+        },
+      }
+    : {}),
+  ...(base.users || overrides.users
+    ? {
+        users: {
+          ...base.users,
+          ...overrides.users,
+        },
+      }
+    : {}),
+  ...(base.notifications || overrides.notifications
+    ? {
+        notifications: {
+          ...base.notifications,
+          ...overrides.notifications,
+        },
+      }
+    : {}),
+});
+
 export type CreateRoomData = {
   version: string;
   type?: RoomType;
@@ -94,6 +133,7 @@ export type CreateRoomData = {
   knock: boolean;
   allowFederation: boolean;
   additionalCreators?: string[];
+  powerLevelContentOverrides?: IPowerLevels;
 };
 export const createRoom = async (mx: MatrixClient, data: CreateRoomData): Promise<string> => {
   const initialState: ICreateRoomStateEvent[] = [];
@@ -106,6 +146,10 @@ export const createRoom = async (mx: MatrixClient, data: CreateRoomData): Promis
     initialState.push(createRoomParentState(data.parent));
   }
 
+  if (data.type === RoomType.Call) {
+    initialState.push(createRoomCallState());
+  }
+
   initialState.push(createRoomJoinRulesState(data.kind, data.parent, data.knock));
 
   const options: ICreateRoomOpts = {
@@ -136,5 +180,15 @@ export const createRoom = async (mx: MatrixClient, data: CreateRoomData): Promis
     );
   }
 
+  if (data.powerLevelContentOverrides) {
+    const roomPowers = await mx.getStateEvent(result.room_id, StateEvent.RoomPowerLevels, '');
+    const updatedPowers = createPowerLevelContentOverrides(
+      roomPowers,
+      data.powerLevelContentOverrides
+    );
+
+    await mx.sendStateEvent(result.room_id, StateEvent.RoomPowerLevels as any, updatedPowers, '');
+  }
+
   return result.room_id;
 };

src/app/components/editor/autocomplete/RoomMentionAutocomplete.tsx

@@ -174,7 +174,7 @@ export function RoomMentionAutocomplete({
                       )}
                     />
                   ) : (
-                    <RoomIcon size="100" joinRule={room.getJoinRule()} space={room.isSpaceRoom()} />
+                    <RoomIcon size="100" joinRule={room.getJoinRule()} roomType={room.getType()} />
                   )}
                 </Avatar>
               }

src/app/components/room-avatar/RoomAvatar.tsx

@@ -2,7 +2,7 @@ import { JoinRule } from 'matrix-js-sdk';
 import { AvatarFallback, AvatarImage, Icon, Icons, color } from 'folds';
 import React, { ComponentProps, ReactEventHandler, ReactNode, forwardRef, useState } from 'react';
 import * as css from './RoomAvatar.css';
-import { joinRuleToIconSrc } from '../../utils/room';
+import { getRoomIconSrc } from '../../utils/room';
 import colorMXID from '../../../util/colorMXID';
 
 type RoomAvatarProps = {
@@ -44,13 +44,10 @@ export function RoomAvatar({ roomId, src, alt, renderFallback }: RoomAvatarProps
 export const RoomIcon = forwardRef<
   SVGSVGElement,
   Omit<ComponentProps<typeof Icon>, 'src'> & {
-    joinRule: JoinRule;
-    space?: boolean;
+    joinRule?: JoinRule;
+    roomType?: string;
+    locked?: boolean;
   }
->(({ joinRule, space, ...props }, ref) => (
-  <Icon
-    src={joinRuleToIconSrc(Icons, joinRule, space || false) ?? Icons.Hash}
-    {...props}
-    ref={ref}
-  />
+>(({ joinRule, roomType, locked, ...props }, ref) => (
+  <Icon src={getRoomIconSrc(Icons, roomType, joinRule, locked)} {...props} ref={ref} />
 ));

src/app/features/call/CallView.css.ts

@@ -0,0 +1,37 @@
+import { style } from '@vanilla-extract/css';
+import { DefaultReset, config } from 'folds';
+import { ContainerColor } from '../../styles/ContainerColor.css';
+
+export const CallViewUserGrid = style({
+  display: 'flex',
+  flexWrap: 'wrap',
+  justifyContent: 'center',
+  alignItems: 'center',
+  marginInline: '20px',
+  gap: config.space.S400,
+});
+
+export const CallViewUser = style([
+  DefaultReset,
+  ContainerColor({ variant: 'SurfaceVariant' }),
+  {
+    height: '90px',
+    width: '150px',
+    borderRadius: config.radii.R500,
+  },
+]);
+
+export const UserLink = style({
+  color: 'inherit',
+  minWidth: 0,
+  cursor: 'pointer',
+  flexGrow: 0,
+  transition: 'all ease-out 200ms',
+  ':hover': {
+    transform: 'translateY(-3px)',
+    textDecoration: 'unset',
+  },
+  ':focus': {
+    outline: 'none',
+  },
+});