diff --git a/src/room/useGroupCall.js b/src/room/useGroupCall.ts similarity index 76% rename from src/room/useGroupCall.js rename to src/room/useGroupCall.ts index 51900c5..6816bcf 100644 --- a/src/room/useGroupCall.js +++ b/src/room/useGroupCall.ts @@ -18,10 +18,57 @@ import { useCallback, useEffect, useState } from "react"; import { GroupCallEvent, GroupCallState, + GroupCall, } from "matrix-js-sdk/src/webrtc/groupCall"; +import { MatrixCall } from "matrix-js-sdk/src/webrtc/call"; +import { CallFeed } from "matrix-js-sdk/src/webrtc/callFeed"; +import { RoomMember } from "matrix-js-sdk/src/models/room-member"; + import { usePageUnload } from "./usePageUnload"; -export function useGroupCall(groupCall) { +export interface UseGroupCallType { + state: GroupCallState; + calls: MatrixCall[]; + localCallFeed: CallFeed; + activeSpeaker: string; + userMediaFeeds: CallFeed[]; + microphoneMuted: boolean; + localVideoMuted: boolean; + error: Error; + initLocalCallFeed: () => void; + enter: () => void; + leave: () => void; + toggleLocalVideoMuted: () => void; + toggleMicrophoneMuted: () => void; + toggleScreensharing: () => void; + requestingScreenshare: boolean; + isScreensharing: boolean; + screenshareFeeds: CallFeed[]; + localScreenshareFeed: CallFeed; + localDesktopCapturerSourceId: string; + participants: RoomMember[]; + hasLocalParticipant: boolean; +} + +interface State { + state: GroupCallState; + calls: MatrixCall[]; + localCallFeed: CallFeed; + activeSpeaker: string; + userMediaFeeds: CallFeed[]; + error: Error; + microphoneMuted: boolean; + localVideoMuted: boolean; + screenshareFeeds: CallFeed[]; + localScreenshareFeed: CallFeed; + localDesktopCapturerSourceId: string; + isScreensharing: boolean; + requestingScreenshare: boolean; + participants: RoomMember[]; + hasLocalParticipant: boolean; +} + +export function useGroupCall(groupCall: GroupCall): UseGroupCallType { const [ { state, @@ -41,20 +88,25 @@ export function useGroupCall(groupCall) { requestingScreenshare, }, setState, - ] = useState({ + ] = useState({ state: GroupCallState.LocalCallFeedUninitialized, calls: [], + localCallFeed: null, + activeSpeaker: null, userMediaFeeds: [], + error: null, microphoneMuted: false, localVideoMuted: false, - screenshareFeeds: [], isScreensharing: false, + screenshareFeeds: [], + localScreenshareFeed: null, + localDesktopCapturerSourceId: null, requestingScreenshare: false, participants: [], hasLocalParticipant: false, }); - const updateState = (state) => + const updateState = (state: Partial) => setState((prevState) => ({ ...prevState, ...state })); useEffect(() => { @@ -75,25 +127,28 @@ export function useGroupCall(groupCall) { }); } - function onUserMediaFeedsChanged(userMediaFeeds) { + function onUserMediaFeedsChanged(userMediaFeeds: CallFeed[]): void { updateState({ userMediaFeeds: [...userMediaFeeds], }); } - function onScreenshareFeedsChanged(screenshareFeeds) { + function onScreenshareFeedsChanged(screenshareFeeds: CallFeed[]): void { updateState({ screenshareFeeds: [...screenshareFeeds], }); } - function onActiveSpeakerChanged(activeSpeaker) { + function onActiveSpeakerChanged(activeSpeaker: string): void { updateState({ activeSpeaker: activeSpeaker, }); } - function onLocalMuteStateChanged(microphoneMuted, localVideoMuted) { + function onLocalMuteStateChanged( + microphoneMuted: boolean, + localVideoMuted: boolean + ): void { updateState({ microphoneMuted, localVideoMuted, @@ -101,10 +156,10 @@ export function useGroupCall(groupCall) { } function onLocalScreenshareStateChanged( - isScreensharing, - localScreenshareFeed, - localDesktopCapturerSourceId - ) { + isScreensharing: boolean, + localScreenshareFeed: CallFeed, + localDesktopCapturerSourceId: string + ): void { updateState({ isScreensharing, localScreenshareFeed, @@ -112,13 +167,13 @@ export function useGroupCall(groupCall) { }); } - function onCallsChanged(calls) { + function onCallsChanged(calls: MatrixCall[]): void { updateState({ calls: [...calls], }); } - function onParticipantsChanged(participants) { + function onParticipantsChanged(participants: RoomMember[]): void { updateState({ participants: [...participants], hasLocalParticipant: groupCall.hasLocalParticipant(),