misty.cafe/minty
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

updated vc pr
Some checks are pending
Deploy to Netlify (dev) / Deploy to Netlify (push) Waiting to run
Details

Browse source
This commit is contained in:
illuc 2026-02-19 22:50:19 +02:00
commit 7b87f4bb6c
16 changed files with 232 additions and 126 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/app/components/create-room/CreateRoomKindSelector.tsx
View file

@ -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;

65
src/app/components/create-room/CreateRoomVoiceSelector.tsx Normal file
View file

@ -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>
);
}

1
src/app/components/create-room/index.ts
View file

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

10
src/app/components/create-room/types.ts Normal file
View file

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

2
src/app/components/create-room/utils.ts
View file

@ -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,

11
src/app/features/call/SmallWidget.ts
View file

@ -40,7 +40,7 @@ export const getWidgetUrl = (
roomId: string,
elementCallUrl: string,
widgetId: string,
setParams: any
setParams: any,
): URL => {
const baseUrl = window.location.origin;
const url = elementCallUrl
@ -54,6 +54,7 @@ export const getWidgetUrl = (
skipLobby: setParams.skipLobby ?? 'true', // TODO: skipLobby is deprecated, use intent instead (intent doesn't produce the same effect?)
returnToLobby: setParams.returnToLobby ?? 'true',
perParticipantE2EE: setParams.perParticipantE2EE ?? 'true',
callIntent: setParams.callIntent ?? 'video',
header: 'none',
confineToRoom: 'true',
theme: setParams.theme ?? 'dark',
@ -123,7 +124,7 @@ export class SmallWidget extends EventEmitter {
this.mockWidget,
WidgetKind.Room,
true,
this.roomId
this.roomId,
);
this.iframe = iframe;
this.messaging = new ClientWidgetApi(this.mockWidget, iframe, driver);
@ -189,7 +190,7 @@ export class SmallWidget extends EventEmitter {
// MAKE PERSISTENT HERE
// Send the ack after the widget actually has become sticky.
}
}
},
);
return this.messaging;
@ -345,7 +346,7 @@ export const getWidgetData = (
client: MatrixClient,
roomId: string,
currentData: object,
overwriteData: object
overwriteData: object,
): IWidgetData => {
// Example: Determine E2EE based on room state if needed
const perParticipantE2EE = true; // Default or based on logic
@ -381,7 +382,7 @@ export const createVirtualWidget = (
url: URL,
waitForIframeLoad: boolean,
data: IWidgetData,
roomId: string
roomId: string,
): IApp => ({
client,
id,

63
src/app/features/create-room/CreateRoom.tsx
View file

@ -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} />}

7
src/app/features/create-room/CreateRoomModal.tsx
View file

@ -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>

16
src/app/features/lobby/SpaceItem.tsx
View file

@ -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>

2
src/app/features/room-nav/RoomNavItem.tsx
View file

@ -302,7 +302,7 @@ export function RoomNavItem({
navigateRoom(room.roomId);
}
} else {
navigateRoom(room.roomId);
navigate(linkPath);
}
};

148
src/app/features/room/RoomViewHeader.tsx
View file

@ -268,7 +268,7 @@ export function RoomViewHeader() {
const { isChatOpen, toggleChat } = useCallState();
const pinnedEvents = useRoomPinnedEvents(room);
const encryptionEvent = useStateEvent(room, StateEvent.RoomEncryption);
const ecryptedRoom = !!encryptionEvent;
const encryptedRoom = !!encryptionEvent;
const avatarMxc = useRoomAvatar(room, direct);
const name = useRoomName(room);
const topic = useRoomTopic(room);
@ -371,83 +371,83 @@ export function RoomViewHeader() {
</Box>
<Box shrink="No">
{!ecryptedRoom && (!room.isCallRoom() || isChatOpen) && (
<TooltipProvider
position="Bottom"
offset={4}
tooltip={
<Tooltip>
<Text>Search</Text>
</Tooltip>
}
>
{(triggerRef) => (
<IconButton fill="None" ref={triggerRef} onClick={handleSearchClick}>
<Icon size="400" src={Icons.Search} />
</IconButton>
)}
</TooltipProvider>
)}
{(!room.isCallRoom() || isChatOpen) && (
<TooltipProvider
position="Bottom"
offset={4}
tooltip={
<Tooltip>
<Text>Pinned Messages</Text>
</Tooltip>
}
>
{(triggerRef) => (
<IconButton
fill="None"
style={{ position: 'relative' }}
onClick={handleOpenPinMenu}
ref={triggerRef}
aria-pressed={!!pinMenuAnchor}
<>
{!encryptedRoom && (
<TooltipProvider
position="Bottom"
offset={4}
tooltip={
<Tooltip>
<Text>Search</Text>
</Tooltip>
}
>
{pinnedEvents.length > 0 && (
<Badge
style={{
position: 'absolute',
left: toRem(3),
top: toRem(3),
}}
variant="Secondary"
size="400"
fill="Solid"
radii="Pill"
>
<Text as="span" size="L400">
{pinnedEvents.length}
</Text>
</Badge>
{(triggerRef) => (
<IconButton fill="None" ref={triggerRef} onClick={handleSearchClick}>
<Icon size="400" src={Icons.Search} />
</IconButton>
)}
<Icon size="400" src={Icons.Pin} filled={!!pinMenuAnchor} />
</IconButton>
</TooltipProvider>
)}
</TooltipProvider>
)}
{(!room.isCallRoom() || isChatOpen) && (
<PopOut
anchor={pinMenuAnchor}
position="Bottom"
content={
<FocusTrap
focusTrapOptions={{
initialFocus: false,
returnFocusOnDeactivate: false,
onDeactivate: () => setPinMenuAnchor(undefined),
clickOutsideDeactivates: true,
isKeyForward: (evt: KeyboardEvent) => evt.key === 'ArrowDown',
isKeyBackward: (evt: KeyboardEvent) => evt.key === 'ArrowUp',
escapeDeactivates: stopPropagation,
}}
>
<RoomPinMenu room={room} requestClose={() => setPinMenuAnchor(undefined)} />
</FocusTrap>
}
/>
<TooltipProvider
position="Bottom"
offset={4}
tooltip={
<Tooltip>
<Text>Pinned Messages</Text>
</Tooltip>
}
>
{(triggerRef) => (
<IconButton
fill="None"
style={{ position: 'relative' }}
onClick={handleOpenPinMenu}
ref={triggerRef}
aria-pressed={!!pinMenuAnchor}
>
{pinnedEvents.length > 0 && (
<Badge
style={{
position: 'absolute',
left: toRem(3),
top: toRem(3),
}}
variant="Secondary"
size="400"
fill="Solid"
radii="Pill"
>
<Text as="span" size="L400">
{pinnedEvents.length}
</Text>
</Badge>
)}
<Icon size="400" src={Icons.Pin} filled={!!pinMenuAnchor} />
</IconButton>
)}
</TooltipProvider>
<PopOut
anchor={pinMenuAnchor}
position="Bottom"
content={
<FocusTrap
focusTrapOptions={{
initialFocus: false,
returnFocusOnDeactivate: false,
onDeactivate: () => setPinMenuAnchor(undefined),
clickOutsideDeactivates: true,
isKeyForward: (evt: KeyboardEvent) => evt.key === 'ArrowDown',
isKeyBackward: (evt: KeyboardEvent) => evt.key === 'ArrowUp',
escapeDeactivates: stopPropagation,
}}
>
<RoomPinMenu room={room} requestClose={() => setPinMenuAnchor(undefined)} />
</FocusTrap>
}
/>
</>
)}
{!room.isCallRoom() && screenSize === ScreenSize.Desktop && (

2
src/app/hooks/useRoomMeta.ts
View file

@ -20,6 +20,8 @@ export const useRoomName = (room: Room): string => {
const [name, setName] = useState(room.name);
useEffect(() => {
setName(room.name);
const handleRoomNameChange: RoomEventHandlerMap[RoomEvent.Name] = () => {
setName(room.name);
};

3
src/app/pages/Router.tsx
View file

@ -68,9 +68,10 @@ import { Create } from './client/create';
import { CreateSpaceModalRenderer } from '../features/create-space';
import { SearchModalRenderer } from '../features/search';
import { getFallbackSession } from '../state/sessions';
import { pushSessionToSW } from '../../sw-session';
import { CallProvider } from './client/call/CallProvider';
import { PersistentCallContainer } from './client/call/PersistentCallContainer';
import { pushSessionToSW } from '../../sw-session';
export const createRouter = (clientConfig: ClientConfig, screenSize: ScreenSize) => {
const { hashRouter } = clientConfig;

13
src/app/pages/client/call/PersistentCallContainer.tsx
View file

@ -47,7 +47,7 @@ export function PersistentCallContainer({ children }: PersistentCallContainerPro
smallWidgetRef: React.MutableRefObject<SmallWidget | null>,
iframeRef: React.MutableRefObject<HTMLIFrameElement | null>,
skipLobby: boolean,
themeKind: ThemeKind | null
themeKind: ThemeKind | null,
) => {
if (mx?.getUserId()) {
if (activeCallRoomId && !isActiveCallReady) {
@ -64,7 +64,8 @@ export function PersistentCallContainer({ children }: PersistentCallContainerPro
returnToLobby: 'true',
perParticipantE2EE: 'true',
theme: themeKind,
}
callIntent: 'audio',
},
);
if (
@ -96,8 +97,8 @@ export function PersistentCallContainer({ children }: PersistentCallContainerPro
'm.call',
newUrl,
true,
getWidgetData(mx, roomIdToSet, {}, { skipLobby: true }),
roomIdToSet
getWidgetData(mx, roomIdToSet, {}, { skipLobby: true, callIntent: 'audio' }),
roomIdToSet,
);
const smallWidget = new SmallWidget(app);
@ -109,7 +110,7 @@ export function PersistentCallContainer({ children }: PersistentCallContainerPro
roomIdToSet,
widgetApiRef.current,
smallWidget,
iframeElement
iframeElement,
);
}
}
@ -121,7 +122,7 @@ export function PersistentCallContainer({ children }: PersistentCallContainerPro
clientConfig.elementCallUrl,
activeClientWidget,
registerActiveClientWidgetApi,
]
],
);
useEffect(() => {

2
src/app/state/createRoomModal.ts
View file

@ -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);

7
src/app/state/hooks/createRoomModal.ts
View file

@ -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]
);