imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #5248 from matrix-org/dbkr/callhandler_to_ts

Browse source 
Convert CallHandler to typescript
This commit is contained in:
David Baker 2020-09-25 15:52:21 +01:00 • committed by GitHub
commit 585c7637d6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
17 changed files with 516 additions and 853 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/components/structures/LoggedInView.tsx
View file

@ -85,7 +85,6 @@ interface IProps {
threepidInvite?: IThreepidInvite;
roomOobData?: object;
currentRoomId: string;
ConferenceHandler?: object;
collapseLhs: boolean;
config: {
piwik: {
@ -637,7 +636,6 @@ class LoggedInView extends React.Component<IProps, IState> {
viaServers={this.props.viaServers}
key={this.props.currentRoomId || 'roomview'}
disabled={this.props.middleDisabled}
ConferenceHandler={this.props.ConferenceHandler}
resizeNotifier={this.props.resizeNotifier}
/>;
break;

1
src/components/structures/MatrixChat.tsx
View file

@ -149,7 +149,6 @@ interface IRoomInfo {
interface IProps { // TODO type things better
config: Record<string, any>;
serverConfig?: ValidatedServerConfig;
ConferenceHandler?: any;
onNewScreen: (screen: string, replaceLast: boolean) => void;
enableGuest?: boolean;
// the queryParams extracted from the [real] query-string of the URI

41
src/components/structures/RoomView.tsx
View file

@ -69,7 +69,6 @@ import PinnedEventsPanel from "../views/rooms/PinnedEventsPanel";
import AuxPanel from "../views/rooms/AuxPanel";
import RoomHeader from "../views/rooms/RoomHeader";
import TintableSvg from "../views/elements/TintableSvg";
import type * as ConferenceHandler from '../../VectorConferenceHandler';
import {XOR} from "../../@types/common";
import { IThreepidInvite } from "../../stores/ThreepidInviteStore";
@ -84,8 +83,6 @@ if (DEBUG) {
}
interface IProps {
ConferenceHandler?: ConferenceHandler;
threepidInvite: IThreepidInvite,
// Any data about the room that would normally come from the homeserver
@ -181,7 +178,6 @@ export interface IState {
matrixClientIsReady: boolean;
showUrlPreview?: boolean;
e2eStatus?: E2EStatus;
displayConfCallNotification?: boolean;
rejecting?: boolean;
rejectError?: Error;
}
@ -488,8 +484,6 @@ export default class RoomView extends React.Component<IProps, IState> {
callState: callState,
});
this.updateConfCallNotification();
window.addEventListener('beforeunload', this.onPageUnload);
if (this.props.resizeNotifier) {
this.props.resizeNotifier.on("middlePanelResized", this.onResize);
@ -724,10 +718,6 @@ export default class RoomView extends React.Component<IProps, IState> {
callState = call.call_state;
}
// possibly remove the conf call notification if we're now in
// the conf
this.updateConfCallNotification();
this.setState({
callState: callState,
});
@ -1018,9 +1008,6 @@ export default class RoomView extends React.Component<IProps, IState> {
// rate limited because a power level change will emit an event for every member in the room.
private updateRoomMembers = rateLimitedFunc((dueToMember) => {
// a member state changed in this room
// refresh the conf call notification state
this.updateConfCallNotification();
this.updateDMState();
let memberCountInfluence = 0;
@ -1049,30 +1036,6 @@ export default class RoomView extends React.Component<IProps, IState> {
this.setState({isAlone: joinedOrInvitedMemberCount === 1});
}
private updateConfCallNotification() {
const room = this.state.room;
if (!room || !this.props.ConferenceHandler) {
return;
}
const confMember = room.getMember(
this.props.ConferenceHandler.getConferenceUserIdForRoom(room.roomId),
);
if (!confMember) {
return;
}
const confCall = this.props.ConferenceHandler.getConferenceCallForRoom(confMember.roomId);
// A conf call notification should be displayed if there is an ongoing
// conf call but this cilent isn't a part of it.
this.setState({
displayConfCallNotification: (
(!confCall || confCall.call_state === "ended") &&
confMember.membership === "join"
),
});
}
private updateDMState() {
const room = this.state.room;
if (room.getMyMembership() != "join") {
@ -1681,7 +1644,7 @@ export default class RoomView extends React.Component<IProps, IState> {
if (!this.state.room) {
return null;
}
return CallHandler.getCallForRoom(this.state.room.roomId);
return CallHandler.sharedInstance().getCallForRoom(this.state.room.roomId);
}
// this has to be a proper method rather than an unnamed function,
@ -1925,9 +1888,7 @@ export default class RoomView extends React.Component<IProps, IState> {
room={this.state.room}
fullHeight={false}
userId={this.context.credentials.userId}
conferenceHandler={this.props.ConferenceHandler}
draggingFile={this.state.draggingFile}
displayConfCallNotification={this.state.displayConfCallNotification}
maxHeight={this.state.auxPanelMaxHeight}
showApps={this.state.showApps}
hideAppsDrawer={false}

37
src/components/views/rooms/AuxPanel.js
View file

@ -39,15 +39,9 @@ export default class AuxPanel extends React.Component {
showApps: PropTypes.bool, // Render apps
hideAppsDrawer: PropTypes.bool, // Do not display apps drawer and content (may still be rendered)
// Conference Handler implementation
conferenceHandler: PropTypes.object,
// set to true to show the file drop target
draggingFile: PropTypes.bool,
// set to true to show the 'active conf call' banner
displayConfCallNotification: PropTypes.bool,
// maxHeight attribute for the aux panel and the video
// therein
maxHeight: PropTypes.number,
@ -161,39 +155,9 @@ export default class AuxPanel extends React.Component {
);
}
let conferenceCallNotification = null;
if (this.props.displayConfCallNotification) {
let supportedText = '';
let joinNode;
if (!MatrixClientPeg.get().supportsVoip()) {
supportedText = _t(" (unsupported)");
} else {
joinNode = (<span>
{ _t(
"Join as <voiceText>voice</voiceText> or <videoText>video</videoText>.",
{},
{
'voiceText': (sub) => <a onClick={(event)=>{ this.onConferenceNotificationClick(event, 'voice');}} href="#">{ sub }</a>,
'videoText': (sub) => <a onClick={(event)=>{ this.onConferenceNotificationClick(event, 'video');}} href="#">{ sub }</a>,
},
) }
</span>);
}
// XXX: the translation here isn't great: appending ' (unsupported)' is likely to not make sense in many languages,
// but there are translations for this in the languages we do have so I'm leaving it for now.
conferenceCallNotification = (
<div className="mx_RoomView_ongoingConfCallNotification">
{ _t("Ongoing conference call%(supportedText)s.", {supportedText: supportedText}) }
&nbsp;
{ joinNode }
</div>
);
}
const callView = (
<CallView
room={this.props.room}
ConferenceHandler={this.props.conferenceHandler}
onResize={this.props.onResize}
maxVideoHeight={this.props.maxHeight}
/>
@ -276,7 +240,6 @@ export default class AuxPanel extends React.Component {
{ appsDrawer }
{ fileDropTarget }
{ callView }
{ conferenceCallNotification }
{ this.props.children }
</AutoHideScrollbar>
);

6
src/components/views/rooms/MemberList.js
View file

@ -24,7 +24,6 @@ import {isValid3pidInvite} from "../../../RoomInvite";
import rate_limited_func from "../../../ratelimitedfunc";
import {MatrixClientPeg} from "../../../MatrixClientPeg";
import * as sdk from "../../../index";
import CallHandler from "../../../CallHandler";
import {CommunityPrototypeStore} from "../../../stores/CommunityPrototypeStore";
import BaseCard from "../right_panel/BaseCard";
import {RightPanelPhases} from "../../../stores/RightPanelStorePhases";
@ -233,15 +232,10 @@ export default class MemberList extends React.Component {
}
roomMembers() {
const ConferenceHandler = CallHandler.getConferenceHandler();
const allMembers = this.getMembersWithUser();
const filteredAndSortedMembers = allMembers.filter((m) => {
return (
m.membership === 'join' || m.membership === 'invite'
) && (
!ConferenceHandler ||
(ConferenceHandler && !ConferenceHandler.isConferenceUser(m.userId))
);
});
filteredAndSortedMembers.sort(this.memberSort);

2
src/components/views/rooms/MessageComposer.js
View file

@ -87,7 +87,7 @@ VideoCallButton.propTypes = {
function HangupButton(props) {
const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
const onHangupClick = () => {
const call = CallHandler.getCallForRoom(props.roomId);
const call = CallHandler.sharedInstance().getCallForRoom(props.roomId);
if (!call) {
return;
}

3
src/components/views/voip/CallContainer.tsx
View file

@ -17,7 +17,6 @@ limitations under the License.
import React from 'react';
import IncomingCallBox from './IncomingCallBox';
import CallPreview from './CallPreview';
import * as VectorConferenceHandler from '../../../VectorConferenceHandler';
interface IProps {
@ -31,7 +30,7 @@ export default class CallContainer extends React.PureComponent<IProps, IState> {
public render() {
return <div className="mx_CallContainer">
<IncomingCallBox />
<CallPreview ConferenceHandler={VectorConferenceHandler} />
<CallPreview />
</div>;
}
}

13
src/components/views/voip/CallPreview.tsx
View file

@ -26,10 +26,6 @@ import PersistentApp from "../elements/PersistentApp";
import SettingsStore from "../../../settings/SettingsStore";
interface IProps {
// A Conference Handler implementation
// Must have a function signature:
// getConferenceCallForRoom(roomId: string): MatrixCall
ConferenceHandler: any;
}
interface IState {
@ -47,7 +43,7 @@ export default class CallPreview extends React.Component<IProps, IState> {
this.state = {
roomId: RoomViewStore.getRoomId(),
activeCall: CallHandler.getAnyActiveCall(),
activeCall: CallHandler.sharedInstance().getAnyActiveCall(),
};
}
@ -77,14 +73,14 @@ export default class CallPreview extends React.Component<IProps, IState> {
// may hide the global CallView if the call it is tracking is dead
case 'call_state':
this.setState({
activeCall: CallHandler.getAnyActiveCall(),
activeCall: CallHandler.sharedInstance().getAnyActiveCall(),
});
break;
}
};
private onCallViewClick = () => {
const call = CallHandler.getAnyActiveCall();
const call = CallHandler.sharedInstance().getAnyActiveCall();
if (call) {
dis.dispatch({
action: 'view_room',
@ -94,7 +90,7 @@ export default class CallPreview extends React.Component<IProps, IState> {
};
public render() {
const callForRoom = CallHandler.getCallForRoom(this.state.roomId);
const callForRoom = CallHandler.sharedInstance().getCallForRoom(this.state.roomId);
const showCall = (
this.state.activeCall &&
this.state.activeCall.call_state === 'connected' &&
@ -106,7 +102,6 @@ export default class CallPreview extends React.Component<IProps, IState> {
<CallView
className="mx_CallPreview"
onClick={this.onCallViewClick}
ConferenceHandler={this.props.ConferenceHandler}
showHangup={true}
/>
);

33
src/components/views/voip/CallView.tsx
View file

@ -31,11 +31,6 @@ interface IProps {
// room; if not, we will show any active call.
room?: Room;
// A Conference Handler implementation
// Must have a function signature:
// getConferenceCallForRoom(roomId: string): MatrixCall
ConferenceHandler?: any;
// maxHeight style attribute for the video panel
maxVideoHeight?: number;
@ -96,14 +91,13 @@ export default class CallView extends React.Component<IProps, IState> {
if (this.props.room) {
const roomId = this.props.room.roomId;
call = CallHandler.getCallForRoom(roomId) ||
(this.props.ConferenceHandler ? this.props.ConferenceHandler.getConferenceCallForRoom(roomId) : null);
call = CallHandler.sharedInstance().getCallForRoom(roomId);
if (this.call) {
this.setState({ call: call });
}
} else {
call = CallHandler.getAnyActiveCall();
call = CallHandler.sharedInstance().getAnyActiveCall();
// Ignore calls if we can't get the room associated with them.
// I think the underlying problem is that the js-sdk sends events
// for calls before it has made the rooms available in the store,
@ -115,20 +109,19 @@ export default class CallView extends React.Component<IProps, IState> {
}
if (call) {
call.setLocalVideoElement(this.getVideoView().getLocalVideoElement());
call.setRemoteVideoElement(this.getVideoView().getRemoteVideoElement());
// always use a separate element for audio stream playback.
// this is to let us move CallView around the DOM without interrupting remote audio
// during playback, by having the audio rendered by a top-level <audio/> element.
// rather than being rendered by the main remoteVideo <video/> element.
call.setRemoteAudioElement(this.getVideoView().getRemoteAudioElement());
if (this.getVideoView()) {
call.setLocalVideoElement(this.getVideoView().getLocalVideoElement());
call.setRemoteVideoElement(this.getVideoView().getRemoteVideoElement());
// always use a separate element for audio stream playback.
// this is to let us move CallView around the DOM without interrupting remote audio
// during playback, by having the audio rendered by a top-level <audio/> element.
// rather than being rendered by the main remoteVideo <video/> element.
call.setRemoteAudioElement(this.getVideoView().getRemoteAudioElement());
}
}
if (call && call.type === "video" && call.call_state !== "ended" && call.call_state !== "ringing") {
// if this call is a conf call, don't display local video as the
// conference will have us in it
this.getVideoView().getLocalVideoElement().style.display = (
call.confUserId ? "none" : "block"
);
this.getVideoView().getLocalVideoElement().style.display = "block";
this.getVideoView().getRemoteVideoElement().style.display = "block";
} else {
this.getVideoView().getLocalVideoElement().style.display = "none";

2
src/components/views/voip/IncomingCallBox.tsx
View file

@ -52,7 +52,7 @@ export default class IncomingCallBox extends React.Component<IProps, IState> {
private onAction = (payload: ActionPayload) => {
switch (payload.action) {
case 'call_state': {
const call = CallHandler.getCall(payload.room_id);
const call = CallHandler.sharedInstance().getCallForRoom(payload.room_id);
if (call && call.call_state === 'ringing') {
this.setState({
incomingCall: call,