Use new matrixRTC calling (#11792)
* initial Signed-off-by: Timo K <toger5@hotmail.de> * cleanup1 Signed-off-by: Timo K <toger5@hotmail.de> * bring back call timer Signed-off-by: Timo K <toger5@hotmail.de> * more cleanup and test removals Signed-off-by: Timo K <toger5@hotmail.de> * remove event Signed-off-by: Timo K <toger5@hotmail.de> * cleanups and minor fixes Signed-off-by: Timo K <toger5@hotmail.de> * add matrixRTC to stubClient Signed-off-by: Timo K <toger5@hotmail.de> * update tests (some got removed) The removal is a consequence of EW now doing less call logic. More logic is done by the js sdk (MatrixRTCSession) And therefore in EC itself. Signed-off-by: Timo K <toger5@hotmail.de> * cleanups Signed-off-by: Timo K <toger5@hotmail.de> * mock the session Signed-off-by: Timo K <toger5@hotmail.de> * lint Signed-off-by: Timo K <toger5@hotmail.de> * remove GroupCallDuration Signed-off-by: Timo K <toger5@hotmail.de> * review and fixing tests Signed-off-by: Timo K <toger5@hotmail.de> --------- Signed-off-by: Timo K <toger5@hotmail.de>
This commit is contained in:
Timo
GitHub
parent
c4852dd216
commit
860764c057
13 changed files with 176 additions and 255 deletions
|
|
@ -15,7 +15,7 @@ limitations under the License.
|
|||
*/
|
||||
|
||||
import React, { useCallback } from "react";
|
||||
import { EventType, Room } from "matrix-js-sdk/src/matrix";
|
||||
import { Room } from "matrix-js-sdk/src/matrix";
|
||||
import { logger } from "matrix-js-sdk/src/logger";
|
||||
|
||||
import { _t } from "../../../languageHandler";
|
||||
|
|
@ -27,7 +27,7 @@ import { ConnectionState, ElementCall } from "../../../models/Call";
|
|||
import { useCall } from "../../../hooks/useCall";
|
||||
import { useEventEmitterState } from "../../../hooks/useEventEmitter";
|
||||
import { OwnBeaconStore, OwnBeaconStoreEvent } from "../../../stores/OwnBeaconStore";
|
||||
import { GroupCallDuration } from "../voip/CallDuration";
|
||||
import { SessionDuration } from "../voip/CallDuration";
|
||||
import { SdkContextClass } from "../../../contexts/SDKContext";
|
||||
|
||||
interface RoomCallBannerProps {
|
||||
|
|
@ -49,12 +49,13 @@ const RoomCallBannerInner: React.FC<RoomCallBannerProps> = ({ roomId, call }) =>
|
|||
[roomId],
|
||||
);
|
||||
|
||||
// TODO matrix rtc
|
||||
const onClick = useCallback(() => {
|
||||
const event = call.groupCall.room.currentState.getStateEvents(
|
||||
EventType.GroupCallPrefix,
|
||||
call.groupCall.groupCallId,
|
||||
);
|
||||
if (event === null) {
|
||||
logger.log("clicking on the call banner is not supported anymore - there are no timeline events anymore.");
|
||||
let messageLikeEventId: string | undefined;
|
||||
if (!messageLikeEventId) {
|
||||
// Until we have a timeline event for calls this will always be true.
|
||||
// We will never jump to the non existing timeline event.
|
||||
logger.error("Couldn't find a group call event to jump to");
|
||||
return;
|
||||
}
|
||||
|
|
@ -63,17 +64,17 @@ const RoomCallBannerInner: React.FC<RoomCallBannerProps> = ({ roomId, call }) =>
|
|||
action: Action.ViewRoom,
|
||||
room_id: roomId,
|
||||
metricsTrigger: undefined,
|
||||
event_id: event.getId(),
|
||||
event_id: messageLikeEventId,
|
||||
scroll_into_view: true,
|
||||
highlighted: true,
|
||||
});
|
||||
}, [call, roomId]);
|
||||
}, [roomId]);
|
||||
|
||||
return (
|
||||
<div className="mx_RoomCallBanner" onClick={onClick}>
|
||||
<div className="mx_RoomCallBanner_text">
|
||||
<span className="mx_RoomCallBanner_label">{_t("voip|video_call")}</span>
|
||||
<GroupCallDuration groupCall={call.groupCall} />
|
||||
<SessionDuration session={call.session} />
|
||||
</div>
|
||||
|
||||
<AccessibleButton onClick={connect} kind="primary" element="button" disabled={false}>
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ import MemberAvatar from "../avatars/MemberAvatar";
|
|||
import { LiveContentSummary, LiveContentType } from "../rooms/LiveContentSummary";
|
||||
import FacePile from "../elements/FacePile";
|
||||
import MatrixClientContext from "../../../contexts/MatrixClientContext";
|
||||
import { CallDuration, GroupCallDuration } from "../voip/CallDuration";
|
||||
import { CallDuration, SessionDuration } from "../voip/CallDuration";
|
||||
import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
|
||||
|
||||
const MAX_FACES = 8;
|
||||
|
|
@ -77,7 +77,7 @@ const ActiveCallEvent = forwardRef<any, ActiveCallEventProps>(
|
|||
/>
|
||||
<FacePile members={facePileMembers} size="24px" overflow={facePileOverflow} />
|
||||
</div>
|
||||
{call && <GroupCallDuration groupCall={call.groupCall} />}
|
||||
{call && <SessionDuration session={call.session} />}
|
||||
<AccessibleTooltipButton
|
||||
className="mx_CallEvent_button"
|
||||
kind={buttonKind}
|
||||
|
|
|
|||
|
|
@ -65,7 +65,7 @@ import IconizedContextMenu, {
|
|||
IconizedContextMenuRadio,
|
||||
} from "../context_menus/IconizedContextMenu";
|
||||
import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
|
||||
import { GroupCallDuration } from "../voip/CallDuration";
|
||||
import { SessionDuration } from "../voip/CallDuration";
|
||||
import { Alignment } from "../elements/Tooltip";
|
||||
import RoomCallBanner from "../beacon/RoomCallBanner";
|
||||
import { shouldShowComponent } from "../../../customisations/helpers/UIComponents";
|
||||
|
|
@ -787,7 +787,7 @@ export default class RoomHeader extends React.Component<IProps, IState> {
|
|||
{icon}
|
||||
{name}
|
||||
{this.props.activeCall instanceof ElementCall && (
|
||||
<GroupCallDuration groupCall={this.props.activeCall.groupCall} />
|
||||
<SessionDuration session={this.props.activeCall?.session} />
|
||||
)}
|
||||
{/* Empty topic element to fill out space */}
|
||||
<div className="mx_LegacyRoomHeader_topic" />
|
||||
|
|
|
|||
|
|
@ -15,7 +15,8 @@ limitations under the License.
|
|||
*/
|
||||
|
||||
import React, { FC, useState, useEffect, memo } from "react";
|
||||
import { GroupCall } from "matrix-js-sdk/src/matrix";
|
||||
// eslint-disable-next-line no-restricted-imports
|
||||
import { MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSession";
|
||||
|
||||
import { formatPreciseDuration } from "../../../DateUtils";
|
||||
|
||||
|
|
@ -32,20 +33,25 @@ export const CallDuration: FC<CallDurationProps> = memo(({ delta }) => {
|
|||
return <div className="mx_CallDuration">{formatPreciseDuration(delta)}</div>;
|
||||
});
|
||||
|
||||
interface GroupCallDurationProps {
|
||||
groupCall: GroupCall;
|
||||
interface SessionDurationProps {
|
||||
session: MatrixRTCSession | undefined;
|
||||
}
|
||||
|
||||
/**
|
||||
* A call duration counter that automatically counts up, given a live GroupCall
|
||||
* A call duration counter that automatically counts up, given a matrixRTC session
|
||||
* object.
|
||||
*/
|
||||
export const GroupCallDuration: FC<GroupCallDurationProps> = ({ groupCall }) => {
|
||||
export const SessionDuration: FC<SessionDurationProps> = ({ session }) => {
|
||||
const [now, setNow] = useState(() => Date.now());
|
||||
|
||||
useEffect(() => {
|
||||
const timer = window.setInterval(() => setNow(Date.now()), 1000);
|
||||
return () => clearInterval(timer);
|
||||
}, []);
|
||||
|
||||
return groupCall.creationTs === null ? null : <CallDuration delta={now - groupCall.creationTs} />;
|
||||
// This is a temporal solution.
|
||||
// Using the oldest membership will update when this user leaves.
|
||||
// This implies that the displayed call duration will also update consequently.
|
||||
const createdTs = session?.getOldestMembership()?.createdTs();
|
||||
return createdTs ? <CallDuration delta={now - createdTs} /> : <CallDuration delta={0} />;
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue