Use native js-sdk group call support (#9625)
* Use native js-sdk group call support Now that the js-sdk supports group calls natively, our group call implementation can be simplified a bit. Switching to the js-sdk implementation also brings the react-sdk up to date with recent MSC3401 changes, and adds support for joining calls from multiple devices. (So, the previous logic which sent to-device messages to prevent multi-device sessions is no longer necessary.) * Fix strings * Fix strict type errors
This commit is contained in:
parent
3c7781a561
commit
2c612d5aa1
20 changed files with 383 additions and 567 deletions
|
@ -14,9 +14,9 @@ See the License for the specific language governing permissions and
|
|||
limitations under the License.
|
||||
*/
|
||||
|
||||
import React, { FC, useState, useEffect } from "react";
|
||||
import React, { FC, useState, useEffect, memo } from "react";
|
||||
import { GroupCall } from "matrix-js-sdk/src/webrtc/groupCall";
|
||||
|
||||
import type { MatrixEvent } from "matrix-js-sdk/src/models/event";
|
||||
import { formatCallTime } from "../../../DateUtils";
|
||||
|
||||
interface CallDurationProps {
|
||||
|
@ -26,26 +26,28 @@ interface CallDurationProps {
|
|||
/**
|
||||
* A call duration counter.
|
||||
*/
|
||||
export const CallDuration: FC<CallDurationProps> = ({ delta }) => {
|
||||
export const CallDuration: FC<CallDurationProps> = memo(({ delta }) => {
|
||||
// Clock desync could lead to a negative duration, so just hide it if that happens
|
||||
if (delta <= 0) return null;
|
||||
return <div className="mx_CallDuration">{ formatCallTime(new Date(delta)) }</div>;
|
||||
};
|
||||
});
|
||||
|
||||
interface CallDurationFromEventProps {
|
||||
mxEvent: MatrixEvent;
|
||||
interface GroupCallDurationProps {
|
||||
groupCall: GroupCall;
|
||||
}
|
||||
|
||||
/**
|
||||
* A call duration counter that automatically counts up, given the event that
|
||||
* started the call.
|
||||
* A call duration counter that automatically counts up, given a live GroupCall
|
||||
* object.
|
||||
*/
|
||||
export const CallDurationFromEvent: FC<CallDurationFromEventProps> = ({ mxEvent }) => {
|
||||
export const GroupCallDuration: FC<GroupCallDurationProps> = ({ groupCall }) => {
|
||||
const [now, setNow] = useState(() => Date.now());
|
||||
useEffect(() => {
|
||||
const timer = setInterval(() => setNow(Date.now()), 1000);
|
||||
return () => clearInterval(timer);
|
||||
}, []);
|
||||
|
||||
return <CallDuration delta={now - mxEvent.getTs()} />;
|
||||
return groupCall.creationTs === null
|
||||
? null
|
||||
: <CallDuration delta={now - groupCall.creationTs} />;
|
||||
};
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue