rzerres/element-call
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Format code

Browse Source
This commit is contained in:
Robin
2023-10-11 10:42:04 -04:00
parent b28e465122
commit 614bc82402
112 changed files with 628 additions and 602 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/room/AppSelectionModal.tsx
View File

@@ -40,14 +40,14 @@ export const AppSelectionModal: FC<Props> = ({ roomId }) => {
e.stopPropagation();
setOpen(false);
},
[setOpen]
[setOpen],
);
const roomSharedKey = useRoomSharedKey(roomId ?? "");
const roomIsEncrypted = useIsRoomE2EE(roomId ?? "");
if (roomIsEncrypted && roomSharedKey === undefined) {
logger.error(
"Generating app redirect URL for encrypted room but don't have key available!"
"Generating app redirect URL for encrypted room but don't have key available!",
);
}
@@ -60,7 +60,7 @@ export const AppSelectionModal: FC<Props> = ({ roomId }) => {
const url = new URL(
roomId === null
? window.location.href
: getAbsoluteRoomUrl(roomId, undefined, roomSharedKey ?? undefined)
: getAbsoluteRoomUrl(roomId, undefined, roomSharedKey ?? undefined),
);
// Edit the URL to prevent the app selection prompt from appearing a second
// time within the app, and to keep the user confined to the current room

4
src/room/CallEndedView.tsx
View File

@@ -64,7 +64,7 @@ export const CallEndedView: FC<Props> = ({
PosthogAnalytics.instance.eventQualitySurvey.track(
endedCallId,
feedbackText,
starRating
starRating,
);
setSubmitting(true);
@@ -83,7 +83,7 @@ export const CallEndedView: FC<Props> = ({
}, 1000);
}, 1000);
},
[endedCallId, history, isPasswordlessUser, confineToRoom, starRating]
[endedCallId, history, isPasswordlessUser, confineToRoom, starRating],
);
const createAccountDialog = isPasswordlessUser && (

4
src/room/GroupCallLoader.tsx
View File

@@ -47,7 +47,7 @@ export function GroupCallLoader({
ev.preventDefault();
history.push("/");
},
[history]
[history],
);
switch (groupCallState.kind) {
@@ -66,7 +66,7 @@ export function GroupCallLoader({
<Heading>{t("Call not found")}</Heading>
<Text>
{t(
"Calls are now end-to-end encrypted and need to be created from the home page. This helps make sure everyone's using the same encryption key."
"Calls are now end-to-end encrypted and need to be created from the home page. This helps make sure everyone's using the same encryption key.",
)}
</Text>
{/* XXX: A 'create it for me' button would be the obvious UX here. Two screens already have

32
src/room/GroupCallView.tsx
View File

@@ -111,7 +111,7 @@ export const GroupCallView: FC<Props> = ({
// Count each member only once, regardless of how many devices they use
const participantCount = useMemo(
() => new Set<string>(memberships.map((m) => m.sender!)).size,
[memberships]
[memberships],
);
const deviceContext = useMediaDevices();
@@ -126,7 +126,7 @@ export const GroupCallView: FC<Props> = ({
if (widget && preload) {
// In preload mode, wait for a join action before entering
const onJoin = async (
ev: CustomEvent<IWidgetApiRequest>
ev: CustomEvent<IWidgetApiRequest>,
): Promise<void> => {
// XXX: I think this is broken currently - LiveKit *won't* request
// permissions and give you device names unless you specify a kind, but
@@ -143,14 +143,14 @@ export const GroupCallView: FC<Props> = ({
const deviceId = await findDeviceByName(
audioInput,
"audioinput",
devices
devices,
);
if (!deviceId) {
logger.warn("Unknown audio input: " + audioInput);
latestMuteStates.current!.audio.setEnabled?.(false);
} else {
logger.debug(
`Found audio input ID ${deviceId} for name ${audioInput}`
`Found audio input ID ${deviceId} for name ${audioInput}`,
);
latestDevices.current!.audioInput.select(deviceId);
latestMuteStates.current!.audio.setEnabled?.(true);
@@ -163,14 +163,14 @@ export const GroupCallView: FC<Props> = ({
const deviceId = await findDeviceByName(
videoInput,
"videoinput",
devices
devices,
);
if (!deviceId) {
logger.warn("Unknown video input: " + videoInput);
latestMuteStates.current!.video.setEnabled?.(false);
} else {
logger.debug(
`Found video input ID ${deviceId} for name ${videoInput}`
`Found video input ID ${deviceId} for name ${videoInput}`,
);
latestDevices.current!.videoInput.select(deviceId);
latestMuteStates.current!.video.setEnabled?.(true);
@@ -182,7 +182,7 @@ export const GroupCallView: FC<Props> = ({
PosthogAnalytics.instance.eventCallEnded.cacheStartCall(new Date());
// we only have room sessions right now, so call ID is the emprty string - we use the room ID
PosthogAnalytics.instance.eventCallStarted.track(
rtcSession.room.roomId
rtcSession.room.roomId,
);
await Promise.all([
@@ -213,7 +213,7 @@ export const GroupCallView: FC<Props> = ({
PosthogAnalytics.instance.eventCallEnded.track(
rtcSession.room.roomId,
rtcSession.memberships.length,
sendInstantly
sendInstantly,
);
await leaveRTCSession(rtcSession);
@@ -237,13 +237,13 @@ export const GroupCallView: FC<Props> = ({
history.push("/");
}
},
[rtcSession, isPasswordlessUser, confineToRoom, history]
[rtcSession, isPasswordlessUser, confineToRoom, history],
);
useEffect(() => {
if (widget && isJoined) {
const onHangup = async (
ev: CustomEvent<IWidgetApiRequest>
ev: CustomEvent<IWidgetApiRequest>,
): Promise<void> => {
leaveRTCSession(rtcSession);
widget!.api.transport.reply(ev.detail, {});
@@ -260,7 +260,7 @@ export const GroupCallView: FC<Props> = ({
const e2eeConfig = useMemo(
() => (e2eeSharedKey ? { sharedKey: e2eeSharedKey } : undefined),
[e2eeSharedKey]
[e2eeSharedKey],
);
const onReconnect = useCallback(() => {
@@ -274,12 +274,12 @@ export const GroupCallView: FC<Props> = ({
const [shareModalOpen, setInviteModalOpen] = useState(false);
const onDismissInviteModal = useCallback(
() => setInviteModalOpen(false),
[setInviteModalOpen]
[setInviteModalOpen],
);
const onShareClickFn = useCallback(
() => setInviteModalOpen(true),
[setInviteModalOpen]
[setInviteModalOpen],
);
const onShareClick = joinRule === JoinRule.Public ? onShareClickFn : null;
@@ -288,7 +288,7 @@ export const GroupCallView: FC<Props> = ({
ev.preventDefault();
history.push("/");
},
[history]
[history],
);
const { t } = useTranslation();
@@ -298,7 +298,7 @@ export const GroupCallView: FC<Props> = ({
<ErrorView
error={
new Error(
"No E2EE key provided: please make sure the URL you're using to join this call has been retrieved using the in-app button."
"No E2EE key provided: please make sure the URL you're using to join this call has been retrieved using the in-app button.",
)
}
/>
@@ -309,7 +309,7 @@ export const GroupCallView: FC<Props> = ({
<Heading>Incompatible Browser</Heading>
<Text>
{t(
"Your web browser does not support media end-to-end encryption. Supported Browsers are Chrome, Safari, Firefox >=117"
"Your web browser does not support media end-to-end encryption. Supported Browsers are Chrome, Safari, Firefox >=117",
)}
</Text>
<Link href="/" onClick={onHomeClick}>

48
src/room/InCallView.tsx
View File

@@ -105,7 +105,7 @@ export const ActiveCall: FC<ActiveCallProps> = (props) => {
const { livekitRoom, connState } = useLiveKit(
props.muteStates,
sfuConfig,
props.e2eeConfig
props.e2eeConfig,
);
if (!livekitRoom) {
@@ -172,10 +172,10 @@ export const InCallView: FC<InCallViewProps> = ({
[{ source: Track.Source.ScreenShare, withPlaceholder: false }],
{
room: livekitRoom,
}
},
);
const { layout, setLayout } = useVideoGridLayout(
screenSharingTracks.length > 0
screenSharingTracks.length > 0,
);
const [showConnectionStats] = useShowConnectionStats();
@@ -188,11 +188,11 @@ export const InCallView: FC<InCallViewProps> = ({
const toggleMicrophone = useCallback(
() => muteStates.audio.setEnabled?.((e) => !e),
[muteStates]
[muteStates],
);
const toggleCamera = useCallback(
() => muteStates.video.setEnabled?.((e) => !e),
[muteStates]
[muteStates],
);
// This function incorrectly assumes that there is a camera and microphone, which is not always the case.
@@ -201,7 +201,7 @@ export const InCallView: FC<InCallViewProps> = ({
containerRef1,
toggleMicrophone,
toggleCamera,
(muted) => muteStates.audio.setEnabled?.(!muted)
(muted) => muteStates.audio.setEnabled?.(!muted),
);
const onLeavePress = useCallback(() => {
@@ -213,7 +213,7 @@ export const InCallView: FC<InCallViewProps> = ({
layout === "grid"
? ElementWidgetActions.TileLayout
: ElementWidgetActions.SpotlightLayout,
{}
{},
);
}, [layout]);
@@ -231,14 +231,14 @@ export const InCallView: FC<InCallViewProps> = ({
widget.lazyActions.on(ElementWidgetActions.TileLayout, onTileLayout);
widget.lazyActions.on(
ElementWidgetActions.SpotlightLayout,
onSpotlightLayout
onSpotlightLayout,
);
return () => {
widget!.lazyActions.off(ElementWidgetActions.TileLayout, onTileLayout);
widget!.lazyActions.off(
ElementWidgetActions.SpotlightLayout,
onSpotlightLayout
onSpotlightLayout,
);
};
}
@@ -261,7 +261,7 @@ export const InCallView: FC<InCallViewProps> = ({
(noControls
? items.find((item) => item.isSpeaker) ?? items.at(0) ?? null
: null),
[fullscreenItem, noControls, items]
[fullscreenItem, noControls, items],
);
const Grid =
@@ -320,18 +320,18 @@ export const InCallView: FC<InCallViewProps> = ({
};
const rageshakeRequestModalProps = useRageshakeRequestModal(
rtcSession.room.roomId
rtcSession.room.roomId,
);
const [settingsModalOpen, setSettingsModalOpen] = useState(false);
const openSettings = useCallback(
() => setSettingsModalOpen(true),
[setSettingsModalOpen]
[setSettingsModalOpen],
);
const closeSettings = useCallback(
() => setSettingsModalOpen(false),
[setSettingsModalOpen]
[setSettingsModalOpen],
);
const toggleScreensharing = useCallback(async () => {
@@ -365,7 +365,7 @@ export const InCallView: FC<InCallViewProps> = ({
onPress={toggleCamera}
disabled={muteStates.video.setEnabled === null}
data-testid="incall_videomute"
/>
/>,
);
if (!reducedControls) {
@@ -376,14 +376,18 @@ export const InCallView: FC<InCallViewProps> = ({
enabled={isScreenShareEnabled}
onPress={toggleScreensharing}
data-testid="incall_screenshare"
/>
/>,
);
}
buttons.push(<SettingsButton key="4" onPress={openSettings} />);
}
buttons.push(
<HangupButton key="6" onPress={onLeavePress} data-testid="incall_leave" />
<HangupButton
key="6"
onPress={onLeavePress}
data-testid="incall_leave"
/>,
);
footer = (
<div className={styles.footer}>
@@ -447,7 +451,7 @@ export const InCallView: FC<InCallViewProps> = ({
function findMatrixMember(
room: MatrixRoom,
id: string
id: string,
): RoomMember | undefined {
if (!id) return undefined;
@@ -455,7 +459,7 @@ function findMatrixMember(
// must be at least 3 parts because we know the first part is a userId which must necessarily contain a colon
if (parts.length < 3) {
logger.warn(
"Livekit participants ID doesn't look like a userId:deviceId combination"
"Livekit participants ID doesn't look like a userId:deviceId combination",
);
return undefined;
}
@@ -469,7 +473,7 @@ function findMatrixMember(
function useParticipantTiles(
livekitRoom: Room,
matrixRoom: MatrixRoom,
connState: ECConnectionState
connState: ECConnectionState,
): TileDescriptor<ItemData>[] {
const previousTiles = useRef<TileDescriptor<ItemData>[]>([]);
@@ -498,7 +502,7 @@ function useParticipantTiles(
// connected, this is fine and we'll be in "all ghosts" mode.
if (id !== "" && member === undefined) {
logger.warn(
`Ruh, roh! No matrix member found for SFU participant '${id}': creating g-g-g-ghost!`
`Ruh, roh! No matrix member found for SFU participant '${id}': creating g-g-g-ghost!`,
);
}
allGhosts &&= member === undefined;
@@ -542,11 +546,11 @@ function useParticipantTiles(
return screenShareTile
? [userMediaTile, screenShareTile]
: [userMediaTile];
}
},
);
PosthogAnalytics.instance.eventCallEnded.cacheParticipantCountChanged(
tiles.length
tiles.length,
);
// If every item is a ghost, that probably means we're still connecting and

4
src/room/InviteModal.tsx
View File

@@ -40,7 +40,7 @@ export const InviteModal: FC<Props> = ({ room, open, onDismiss }) => {
const url = useMemo(
() =>
getAbsoluteRoomUrl(room.roomId, room.name, roomSharedKey ?? undefined),
[room, roomSharedKey]
[room, roomSharedKey],
);
const [, setCopied] = useClipboard(url);
const [toastOpen, setToastOpen] = useState(false);
@@ -53,7 +53,7 @@ export const InviteModal: FC<Props> = ({ room, open, onDismiss }) => {
onDismiss();
setToastOpen(true);
},
[setCopied, onDismiss]
[setCopied, onDismiss],
);
return (

2
src/room/LayoutToggle.tsx
View File

@@ -36,7 +36,7 @@ export const LayoutToggle: FC<Props> = ({ layout, setLayout, className }) => {
const onChange = useCallback(
(e: ChangeEvent<HTMLInputElement>) => setLayout(e.target.value as Layout),
[setLayout]
[setLayout],
);
const spotlightId = useId();

8
src/room/LobbyView.tsx
View File

@@ -63,22 +63,22 @@ export const LobbyView: FC<Props> = ({
const onAudioPress = useCallback(
() => muteStates.audio.setEnabled?.((e) => !e),
[muteStates]
[muteStates],
);
const onVideoPress = useCallback(
() => muteStates.video.setEnabled?.((e) => !e),
[muteStates]
[muteStates],
);
const [settingsModalOpen, setSettingsModalOpen] = useState(false);
const openSettings = useCallback(
() => setSettingsModalOpen(true),
[setSettingsModalOpen]
[setSettingsModalOpen],
);
const closeSettings = useCallback(
() => setSettingsModalOpen(false),
[setSettingsModalOpen]
[setSettingsModalOpen],
);
const history = useHistory();

8
src/room/MuteStates.ts
View File

@@ -49,18 +49,18 @@ export interface MuteStates {
function useMuteState(
device: MediaDevice,
enabledByDefault: () => boolean
enabledByDefault: () => boolean,
): MuteState {
const [enabled, setEnabled] = useReactiveState<boolean>(
(prev) => device.available.length > 0 && (prev ?? enabledByDefault()),
[device]
[device],
);
return useMemo(
() =>
device.available.length === 0
? deviceUnavailable
: { enabled, setEnabled },
[device, enabled, setEnabled]
[device, enabled, setEnabled],
);
}
@@ -69,7 +69,7 @@ export function useMuteStates(participantCount: number): MuteStates {
const audio = useMuteState(
devices.audioInput,
() => participantCount <= MUTE_PARTICIPANT_COUNT
() => participantCount <= MUTE_PARTICIPANT_COUNT,
);
const video = useMuteState(devices.videoInput, () => true);

2
src/room/RageshakeRequestModal.tsx
View File

@@ -47,7 +47,7 @@ export const RageshakeRequestModal: FC<Props> = ({
<Modal title={t("Debug log request")} open={open} onDismiss={onDismiss}>
<Body>
{t(
"Another user on this call is having an issue. In order to better diagnose these issues we'd like to collect a debug log."
"Another user on this call is having an issue. In order to better diagnose these issues we'd like to collect a debug log.",
)}
</Body>
<FieldRow>

2
src/room/RoomAuthView.tsx
View File

@@ -52,7 +52,7 @@ export const RoomAuthView: FC = () => {
setError(error);
});
},
[registerPasswordlessUser]
[registerPasswordlessUser],
);
const { t } = useTranslation();

2
src/room/RoomPage.tsx
View File

@@ -81,7 +81,7 @@ export const RoomPage: FC = () => {
hideHeader={hideHeader}
/>
),
[client, passwordlessUser, confineToRoom, preload, hideHeader]
[client, passwordlessUser, confineToRoom, preload, hideHeader],
);
let content: ReactNode;

4
src/room/VideoPreview.tsx
View File

@@ -82,14 +82,14 @@ export const VideoPreview: FC<Props> = ({
},
(error) => {
logger.error("Error while creating preview Tracks:", error);
}
},
);
const videoTrack = useMemo(
() =>
tracks?.find((t) => t.kind === Track.Kind.Video) as
| LocalVideoTrack
| undefined,
[tracks]
[tracks],
);
const videoEl = useRef<HTMLVideoElement | null>(null);

10
src/room/useActiveFocus.ts
View File

@@ -24,7 +24,7 @@ import { deepCompare } from "matrix-js-sdk/src/utils";
import { LivekitFocus } from "../livekit/LivekitFocus";
function getActiveFocus(
rtcSession: MatrixRTCSession
rtcSession: MatrixRTCSession,
): LivekitFocus | undefined {
const oldestMembership = rtcSession.getOldestMembership();
return oldestMembership?.getActiveFoci()[0] as LivekitFocus;
@@ -36,10 +36,10 @@ function getActiveFocus(
* and the same focus.
*/
export function useActiveFocus(
rtcSession: MatrixRTCSession
rtcSession: MatrixRTCSession,
): LivekitFocus | undefined {
const [activeFocus, setActiveFocus] = useState(() =>
getActiveFocus(rtcSession)
getActiveFocus(rtcSession),
);
const onMembershipsChanged = useCallback(() => {
@@ -53,13 +53,13 @@ export function useActiveFocus(
useEffect(() => {
rtcSession.on(
MatrixRTCSessionEvent.MembershipsChanged,
onMembershipsChanged
onMembershipsChanged,
);
return () => {
rtcSession.off(
MatrixRTCSessionEvent.MembershipsChanged,
onMembershipsChanged
onMembershipsChanged,
);
};
});

10
src/room/useFullscreen.ts
View File

@@ -66,7 +66,7 @@ export function useFullscreen<T>(items: TileDescriptor<T>[]): {
prevItem == null
? null
: items.find((i) => i.id === prevItem.id) ?? null,
[items]
[items],
);
const latestItems = useRef<TileDescriptor<T>[]>(items);
@@ -80,15 +80,15 @@ export function useFullscreen<T>(items: TileDescriptor<T>[]): {
setFullscreenItem(
latestFullscreenItem.current === null
? latestItems.current.find((i) => i.id === itemId) ?? null
: null
: null,
);
},
[setFullscreenItem]
[setFullscreenItem],
);
const exitFullscreenCallback = useCallback(
() => setFullscreenItem(null),
[setFullscreenItem]
[setFullscreenItem],
);
useLayoutEffect(() => {
@@ -103,7 +103,7 @@ export function useFullscreen<T>(items: TileDescriptor<T>[]): {
useFullscreenChange(
useCallback(() => {
if (!isFullscreen()) setFullscreenItem(null);
}, [setFullscreenItem])
}, [setFullscreenItem]),
);
return {

2
src/room/useJoinRule.ts
View File

@@ -23,6 +23,6 @@ import { useRoomState } from "./useRoomState";
export function useJoinRule(room: Room): JoinRule {
return useRoomState(
room,
useCallback((state) => state.getJoinRule(), [])
useCallback((state) => state.getJoinRule(), []),
);
}

10
src/room/useLoadGroupCall.ts
View File

@@ -52,7 +52,7 @@ export interface GroupCallLoadState {
export const useLoadGroupCall = (
client: MatrixClient,
roomIdOrAlias: string,
viaServers: string[]
viaServers: string[],
): GroupCallStatus => {
const { t } = useTranslation();
const [state, setState] = useState<GroupCallStatus>({ kind: "loading" });
@@ -70,7 +70,7 @@ export const useLoadGroupCall = (
// join anyway but the js-sdk recreates the room if you pass the alias for a
// room you're already joined to (which it probably ought not to).
const lookupResult = await client.getRoomIdForAlias(
roomIdOrAlias.toLowerCase()
roomIdOrAlias.toLowerCase(),
);
logger.info(`${roomIdOrAlias} resolved to ${lookupResult.room_id}`);
room = client.getRoom(lookupResult.room_id);
@@ -81,7 +81,7 @@ export const useLoadGroupCall = (
});
} else {
logger.info(
`Already in room ${lookupResult.room_id}, not rejoining.`
`Already in room ${lookupResult.room_id}, not rejoining.`,
);
}
} else {
@@ -92,7 +92,7 @@ export const useLoadGroupCall = (
}
logger.info(
`Joined ${roomIdOrAlias}, waiting room to be ready for group calls`
`Joined ${roomIdOrAlias}, waiting room to be ready for group calls`,
);
await client.waitUntilRoomReadyForGroupCalls(room.roomId);
logger.info(`${roomIdOrAlias}, is ready for group calls`);
@@ -110,7 +110,7 @@ export const useLoadGroupCall = (
const waitForClientSyncing = async (): Promise<void> => {
if (client.getSyncState() !== SyncState.Syncing) {
logger.debug(
"useLoadGroupCall: waiting for client to start syncing..."
"useLoadGroupCall: waiting for client to start syncing...",
);
await new Promise<void>((resolve) => {
const onSync = (): void => {

2
src/room/useRoomAvatar.ts
View File

@@ -22,6 +22,6 @@ import { useRoomState } from "./useRoomState";
export function useRoomAvatar(room: Room): string | null {
return useRoomState(
room,
useCallback(() => room.getMxcAvatarUrl(), [room])
useCallback(() => room.getMxcAvatarUrl(), [room]),
);
}

2
src/room/useRoomState.ts
View File

@@ -31,7 +31,7 @@ export const useRoomState = <T>(room: Room, f: (state: RoomState) => T): T => {
useTypedEventEmitter(
room,
RoomStateEvent.Update,
useCallback(() => setNumUpdates((n) => n + 1), [setNumUpdates])
useCallback(() => setNumUpdates((n) => n + 1), [setNumUpdates]),
);
// We want any change to the update counter to trigger an update here
// eslint-disable-next-line react-hooks/exhaustive-deps