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

format using prettier rules from project prettierrc

Browse source
This commit is contained in:
YoJames2019 2026-02-10 22:55:26 -05:00
parent 9562103210
commit 008669efdf
7 changed files with 145 additions and 117 deletions
Download patch file Download diff file Expand all files Collapse all files

36
src/app/features/call/CallView.css.ts
View file

@ -3,35 +3,35 @@ 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,
})
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,
},
])
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",
transition: 'all ease-out 200ms',
':hover': {
transform: "translateY(-3px)",
transform: 'translateY(-3px)',
textDecoration: 'unset',
},
':focus': {
outline: 'none',
},
});
});

140
src/app/features/call/CallView.tsx
View file

@ -1,12 +1,18 @@
import { Room } from 'matrix-js-sdk';
import React, { useContext, useCallback, useEffect, useRef, MouseEventHandler, useState, ReactNode } from 'react';
import React, {
useContext,
useCallback,
useEffect,
useRef,
MouseEventHandler,
useState,
ReactNode,
} from 'react';
import { Box, Button, config, Spinner, Text } from 'folds';
import { useCallState } from '../../pages/client/call/CallProvider';
import { useCallMembers } from '../../hooks/useCallMemberships';
import {
CallRefContext,
} from '../../pages/client/call/PersistentCallContainer';
import { CallRefContext } from '../../pages/client/call/PersistentCallContainer';
import { ScreenSize, useScreenSizeContext } from '../../hooks/useScreenSize';
import { useDebounce } from '../../hooks/useDebounce';
import { useMatrixClient } from '../../hooks/useMatrixClient';
@ -14,8 +20,7 @@ import { CallViewUser } from './CallViewUser';
import { useRoomNavigate } from '../../hooks/useRoomNavigate';
import { getMemberDisplayName } from '../../utils/room';
import { getMxIdLocalPart } from '../../utils/matrix';
import * as css from "./CallView.css"
import * as css from './CallView.css';
type OriginalStyles = {
position?: string;
@ -32,46 +37,51 @@ type OriginalStyles = {
export function CallViewUserGrid({ children }: { children: ReactNode }) {
return (
<Box className={css.CallViewUserGrid} style={{
maxWidth: React.Children.count(children) === 4 ? "336px" : "503px"
}}>
<Box
className={css.CallViewUserGrid}
style={{
maxWidth: React.Children.count(children) === 4 ? '336px' : '503px',
}}
>
{children}
</Box>
);
}
export function CallView({ room }: { room: Room }) {
const callIframeRef = useContext(CallRefContext);
const iframeHostRef = useRef<HTMLDivElement>(null);
const originalIframeStylesRef = useRef<OriginalStyles | null>(null);
const mx = useMatrixClient();
const [visibleCallNames, setVisibleCallNames] = useState("")
const {
isActiveCallReady,
activeCallRoomId,
isChatOpen,
setActiveCallRoomId,
hangUp,
setViewedCallRoomId
const [visibleCallNames, setVisibleCallNames] = useState('');
const {
isActiveCallReady,
activeCallRoomId,
isChatOpen,
setActiveCallRoomId,
hangUp,
setViewedCallRoomId,
} = useCallState();
const isActiveCallRoom = activeCallRoomId === room.roomId
const isActiveCallRoom = activeCallRoomId === room.roomId;
const callIsCurrentAndReady = isActiveCallRoom && isActiveCallReady;
const callMembers = useCallMembers(mx, room.roomId)
const callMembers = useCallMembers(mx, room.roomId);
const getName = (userId: string) => getMemberDisplayName(room, userId) ?? getMxIdLocalPart(userId);
const memberDisplayNames = callMembers.map(callMembership => getName(callMembership.sender ?? ''))
const getName = (userId: string) =>
getMemberDisplayName(room, userId) ?? getMxIdLocalPart(userId);
const memberDisplayNames = callMembers.map((callMembership) =>
getName(callMembership.sender ?? '')
);
const { navigateRoom } = useRoomNavigate();
const screenSize = useScreenSizeContext();
const isMobile = screenSize === ScreenSize.Mobile;
const activeIframeDisplayRef = callIframeRef
const activeIframeDisplayRef = callIframeRef;
const applyFixedPositioningToIframe = useCallback(() => {
const iframeElement = activeIframeDisplayRef?.current;
@ -149,31 +159,32 @@ export function CallView({ room }: { room: Room }) {
room,
]);
const handleJoinVCClick: MouseEventHandler<HTMLElement> = (evt) => {
if (isMobile) {
evt.stopPropagation();
setViewedCallRoomId(room.roomId);
navigateRoom(room.roomId);
}
if (!callIsCurrentAndReady) {
hangUp();
setActiveCallRoomId(room.roomId);
}
if (isMobile) {
evt.stopPropagation();
setViewedCallRoomId(room.roomId);
navigateRoom(room.roomId);
}
if (!callIsCurrentAndReady) {
hangUp();
setActiveCallRoomId(room.roomId);
}
};
const isCallViewVisible = room.isCallRoom() && (screenSize === ScreenSize.Desktop || !isChatOpen);
useEffect(() => {
if(memberDisplayNames.length <= 2){
setVisibleCallNames(memberDisplayNames.join(" and "))
if (memberDisplayNames.length <= 2) {
setVisibleCallNames(memberDisplayNames.join(' and '));
} else {
const visible = memberDisplayNames.slice(0, 2);
const remaining = memberDisplayNames.length - 2;
setVisibleCallNames(`${visible.join(", ")}, and ${remaining} other${remaining > 1 ? "s" : ""}`)
setVisibleCallNames(
`${visible.join(', ')}, and ${remaining} other${remaining > 1 ? 's' : ''}`
);
}
}, [memberDisplayNames])
}, [memberDisplayNames]);
return (
<Box grow="Yes" direction="Column" style={{ display: isCallViewVisible ? 'flex' : 'none' }}>
@ -187,28 +198,47 @@ export function CallView({ room }: { room: Room }) {
display: callIsCurrentAndReady ? 'flex' : 'none',
}}
/>
<Box grow='Yes' justifyContent='Center' alignItems='Center' direction="Column" gap="300" style={{
display: callIsCurrentAndReady ? 'none' : 'flex',
}}>
<Box
grow="Yes"
justifyContent="Center"
alignItems="Center"
direction="Column"
gap="300"
style={{
display: callIsCurrentAndReady ? 'none' : 'flex',
}}
>
<CallViewUserGrid>
{callMembers.map(callMember => (
<CallViewUser room={room} callMembership={callMember}/>
)).slice(0, 6)}
{callMembers
.map((callMember) => <CallViewUser room={room} callMembership={callMember} />)
.slice(0, 6)}
</CallViewUserGrid>
<Box direction="Column" alignItems="Center" style={{
paddingBlock: config.space.S200
}}>
<Text size="H1" style={{
paddingBottom: config.space.S300
}}>{room.name}</Text>
<Text size="T200">{visibleCallNames !== "" ? visibleCallNames : "No one"} {memberDisplayNames.length > 1 ? "are" : "is"} currently in voice</Text>
<Box
direction="Column"
alignItems="Center"
style={{
paddingBlock: config.space.S200,
}}
>
<Text
size="H1"
style={{
paddingBottom: config.space.S300,
}}
>
{room.name}
</Text>
<Text size="T200">
{visibleCallNames !== '' ? visibleCallNames : 'No one'}{' '}
{memberDisplayNames.length > 1 ? 'are' : 'is'} currently in voice
</Text>
</Box>
<Button variant='Secondary' disabled={isActiveCallRoom} onClick={handleJoinVCClick}>
<Button variant="Secondary" disabled={isActiveCallRoom} onClick={handleJoinVCClick}>
{isActiveCallRoom ? (
<Box justifyContent='Center' alignItems='Center' gap='200'>
<Box justifyContent="Center" alignItems="Center" gap="200">
<Spinner />
<Text size="B500">{activeCallRoomId === room.roomId ? `Joining` : "Join Voice"}</Text>
<Text size="B500">{activeCallRoomId === room.roomId ? `Joining` : 'Join Voice'}</Text>
</Box>
) : (
<Text size="B500">Join Voice</Text>

31
src/app/features/call/CallViewUser.tsx
View file

@ -16,7 +16,6 @@ type CallViewUserProps = {
callMembership: CallMembership;
};
export const UserProfileButton = as<'button'>(
({ as: AsUserProfileButton = 'button', className, ...props }, ref) => (
<AsUserProfileButton className={classNames(css.UserLink, className)} {...props} ref={ref} />
@ -49,21 +48,21 @@ export function CallViewUser({ room, callMembership }: CallViewUserProps) {
return (
<UserProfileButton onClick={handleUserClick} aria-label={getName}>
<CallViewUserBase>
<Box direction="Column" grow="Yes" alignItems="Center" gap="200" justifyContent="Center">
<Avatar size="200">
<UserAvatar
userId={userId}
src={avatarUrl ?? undefined}
alt={getName}
renderFallback={() => <Icon size="50" src={Icons.User} filled />}
/>
</Avatar>
<Text size="B400" priority="300" truncate>
{getName}
</Text>
</Box>
</CallViewUserBase>
<CallViewUserBase>
<Box direction="Column" grow="Yes" alignItems="Center" gap="200" justifyContent="Center">
<Avatar size="200">
<UserAvatar
userId={userId}
src={avatarUrl ?? undefined}
alt={getName}
renderFallback={() => <Icon size="50" src={Icons.User} filled />}
/>
</Avatar>
<Text size="B400" priority="300" truncate>
{getName}
</Text>
</Box>
</CallViewUserBase>
</UserProfileButton>
);
}

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

@ -145,8 +145,8 @@ export class SmallWidget extends EventEmitter {
// force later code to think the room is fresh
if (roomEvent) {
const eventId = roomEvent.getId();
if(eventId) this.readUpToMap[room.roomId] = eventId;
}
if (eventId) this.readUpToMap[room.roomId] = eventId;
}
}
this.messaging.on('action:org.matrix.msc2876.read_events', (ev: CustomEvent) => {
@ -165,9 +165,9 @@ export class SmallWidget extends EventEmitter {
const stateEvents = state.events?.get(type);
Array.from(stateEvents?.values() ?? []).forEach(eventObject => {
events.push(eventObject.event)
})
Array.from(stateEvents?.values() ?? []).forEach((eventObject) => {
events.push(eventObject.event);
});
return this.messaging?.transport.reply(ev.detail, { events });
});
@ -263,7 +263,7 @@ export class SmallWidget extends EventEmitter {
let advanced = false;
events.some(timelineEvent => {
events.some((timelineEvent) => {
const id = timelineEvent.getId();
if (id === upToEventId) {

24
src/app/features/room-nav/RoomCallNavStatus.tsx
View file

@ -8,8 +8,8 @@ export function CallNavStatus() {
const {
activeCallRoomId,
isAudioEnabled,
isVideoEnabled,
isActiveCallReady,
isVideoEnabled,
isActiveCallReady,
toggleAudio,
toggleVideo,
hangUp,
@ -31,7 +31,7 @@ export function CallNavStatus() {
justifyContent: 'center',
}}
>
<Box direction="Row" justifyContent='SpaceBetween' alignItems='Center'>
<Box direction="Row" justifyContent="SpaceBetween" alignItems="Center">
{/* Going to need better icons for this */}
<Box>
@ -54,13 +54,13 @@ export function CallNavStatus() {
ref={triggerRef}
style={{
display: isActiveCallReady ? 'flex' : 'none',
alignItems: "center",
justifyContent: "center"
alignItems: 'center',
justifyContent: 'center',
}}
>
<Icon src={Icons.VolumeHigh}/>
<Icon src={Icons.VolumeHigh} />
<Text style={{ flexGrow: 1 }} size="B400" truncate>
{activeCallRoomId ? mx.getRoom(activeCallRoomId)?.name : ""}
{activeCallRoomId ? mx.getRoom(activeCallRoomId)?.name : ''}
</Text>
</Chip>
)}
@ -109,14 +109,14 @@ export function CallNavStatus() {
}
>
{(triggerRef) => (
<IconButton
variant="Background"
ref={triggerRef}
<IconButton
variant="Background"
ref={triggerRef}
onClick={hangUp}
style={{
display: isActiveCallReady ? 'block' : 'none'
display: isActiveCallReady ? 'block' : 'none',
}}
>
>
<Icon src={Icons.Phone} />
</IconButton>
)}

15
src/app/features/room-settings/permissions/usePermissionItems.ts
View file

@ -46,26 +46,25 @@ export const usePermissionGroups = (): PermissionGroup[] => {
],
};
const callSettingsGroup: PermissionGroup = {
name: 'Calls',
items: [
{
location: {
state: true,
key: StateEvent.GroupCallPrefix
key: StateEvent.GroupCallPrefix,
},
name: "Start Call"
name: 'Start Call',
},
{
location: {
state: true,
key: StateEvent.GroupCallMemberPrefix
key: StateEvent.GroupCallMemberPrefix,
},
name: "Join Call"
}
]
}
name: 'Join Call',
},
],
};
const moderationGroup: PermissionGroup = {
name: 'Moderation',

4
src/types/matrix/room.ts
View file

@ -30,8 +30,8 @@ export enum StateEvent {
RoomGuestAccess = 'm.room.guest_access',
RoomServerAcl = 'm.room.server_acl',
RoomTombstone = 'm.room.tombstone',
GroupCallPrefix = "org.matrix.msc3401.call",
GroupCallMemberPrefix = "org.matrix.msc3401.call.member",
GroupCallPrefix = 'org.matrix.msc3401.call',
GroupCallMemberPrefix = 'org.matrix.msc3401.call.member',
SpaceChild = 'm.space.child',
SpaceParent = 'm.space.parent',