Use new matrixRTC calling (#11792)

* initial

Signed-off-by: Timo K <[email protected]>

* cleanup1

Signed-off-by: Timo K <[email protected]>

* bring back call timer

Signed-off-by: Timo K <[email protected]>

* more cleanup and test removals

Signed-off-by: Timo K <[email protected]>

* remove event

Signed-off-by: Timo K <[email protected]>

* cleanups and minor fixes

Signed-off-by: Timo K <[email protected]>

* add matrixRTC to stubClient

Signed-off-by: Timo K <[email protected]>

* 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 <[email protected]>

* cleanups

Signed-off-by: Timo K <[email protected]>

* mock the session

Signed-off-by: Timo K <[email protected]>

* lint

Signed-off-by: Timo K <[email protected]>

* remove GroupCallDuration

Signed-off-by: Timo K <[email protected]>

* review and fixing tests

Signed-off-by: Timo K <[email protected]>

---------

Signed-off-by: Timo K <[email protected]>

Author: toger5

src/components/views/beacon/RoomCallBanner.tsx

@@ -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}>

src/components/views/messages/CallEvent.tsx

@@ -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}

src/components/views/rooms/LegacyRoomHeader.tsx

@@ -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" />

src/components/views/voip/CallDuration.tsx

@@ -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} />;
 };