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

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

@ -7,28 +7,28 @@ export const CallViewUserGrid = style({
flexWrap: 'wrap', flexWrap: 'wrap',
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
marginInline: "20px", marginInline: '20px',
gap: config.space.S400, gap: config.space.S400,
}) });
export const CallViewUser = style([ export const CallViewUser = style([
DefaultReset, DefaultReset,
ContainerColor({ variant: 'SurfaceVariant' }), ContainerColor({ variant: 'SurfaceVariant' }),
{ {
height: "90px", height: '90px',
width: "150px", width: '150px',
borderRadius: config.radii.R500, borderRadius: config.radii.R500,
}, },
]) ]);
export const UserLink = style({ export const UserLink = style({
color: 'inherit', color: 'inherit',
minWidth: 0, minWidth: 0,
cursor: 'pointer', cursor: 'pointer',
flexGrow: 0, flexGrow: 0,
transition: "all ease-out 200ms", transition: 'all ease-out 200ms',
':hover': { ':hover': {
transform: "translateY(-3px)", transform: 'translateY(-3px)',
textDecoration: 'unset', textDecoration: 'unset',
}, },
':focus': { ':focus': {

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

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

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

@ -16,7 +16,6 @@ type CallViewUserProps = {
callMembership: CallMembership; callMembership: CallMembership;
}; };
export const UserProfileButton = as<'button'>( export const UserProfileButton = as<'button'>(
({ as: AsUserProfileButton = 'button', className, ...props }, ref) => ( ({ as: AsUserProfileButton = 'button', className, ...props }, ref) => (
<AsUserProfileButton className={classNames(css.UserLink, className)} {...props} ref={ref} /> <AsUserProfileButton className={classNames(css.UserLink, className)} {...props} ref={ref} />

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

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

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

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

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

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

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

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