studio/element-call
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update to use matrix-react-sdk

Browse Source
This commit is contained in:
Robert Long
2021-09-29 14:34:29 -07:00
parent c4a626b530
commit 5e4736eba5
13 changed files with 2571 additions and 4231 deletions
Download Patch File Download Diff File Expand all files Collapse all files

225
src/ConferenceCallManagerHooks.js
View File

@@ -14,25 +14,8 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import { useCallback, useEffect, useRef, useState } from "react";
import matrix from "matrix-js-sdk/src/index";
import { ConferenceCallDebugger } from "./ConferenceCallDebugger";
// https://stackoverflow.com/a/9039885
function isIOS() {
return (
[
"iPad Simulator",
"iPhone Simulator",
"iPod Simulator",
"iPad",
"iPhone",
"iPod",
].includes(navigator.platform) ||
// iPad on iOS 13 detection
(navigator.userAgent.includes("Mac") && "ontouchend" in document)
);
}
import { useCallback, useEffect, useState } from "react";
import matrix from "matrix-js-sdk/src/browser-index";
function waitForSync(client) {
return new Promise((resolve, reject) => {
@@ -245,210 +228,6 @@ export function useClient(homeserverUrl) {
};
}
function usePageUnload(callback) {
useEffect(() => {
let pageVisibilityTimeout;
function onBeforeUnload(event) {
if (event.type === "visibilitychange") {
if (document.visibilityState === "visible") {
clearTimeout(pageVisibilityTimeout);
} else {
// Wait 5 seconds before closing the page to avoid accidentally leaving
// TODO: Make this configurable?
pageVisibilityTimeout = setTimeout(() => {
callback();
}, 5000);
}
} else {
callback();
}
}
// iOS doesn't fire beforeunload event, so leave the call when you hide the page.
if (isIOS()) {
window.addEventListener("pagehide", onBeforeUnload);
document.addEventListener("visibilitychange", onBeforeUnload);
}
window.addEventListener("beforeunload", onBeforeUnload);
return () => {
window.removeEventListener("pagehide", onBeforeUnload);
document.removeEventListener("visibilitychange", onBeforeUnload);
window.removeEventListener("beforeunload", onBeforeUnload);
clearTimeout(pageVisibilityTimeout);
};
}, []);
}
function getParticipants(groupCall) {
return [...groupCall.participants];
}
export function useGroupCall(client, roomId, debug = false) {
const groupCallRef = useRef(null);
const [
{
loading,
entered,
entering,
room,
participants,
error,
microphoneMuted,
localVideoMuted,
callDebugger,
},
setState,
] = useState({
loading: true,
entered: false,
entering: false,
room: null,
participants: [],
error: null,
microphoneMuted: false,
localVideoMuted: false,
callDebugger: null,
});
const updateState = (state) =>
setState((prevState) => ({ ...prevState, ...state }));
useEffect(() => {
function onParticipantsChanged(...args) {
updateState({ participants: getParticipants(groupCallRef.current) });
}
function onLocalMuteStateChanged(microphoneMuted, localVideoMuted) {
updateState({
microphoneMuted,
localVideoMuted,
});
}
async function init() {
const room = await fetchRoom(client, roomId, true);
const groupCall = client.createGroupCall(roomId, "video");
groupCallRef.current = groupCall;
groupCall.on("active_speaker_changed", onParticipantsChanged);
groupCall.on("participants_changed", onParticipantsChanged);
groupCall.on("speaking", onParticipantsChanged);
groupCall.on("mute_state_changed", onParticipantsChanged);
groupCall.on("call_replaced", onParticipantsChanged);
groupCall.on("call_feeds_changed", onParticipantsChanged);
groupCall.on("local_mute_state_changed", onLocalMuteStateChanged);
updateState({
room,
loading: false,
callDebugger: debug
? new ConferenceCallDebugger(client, groupCall)
: null,
});
}
init().catch((error) => {
if (groupCallRef.current) {
const groupCall = groupCallRef.current;
groupCall.removeListener(
"active_speaker_changed",
onParticipantsChanged
);
groupCall.removeListener("participants_changed", onParticipantsChanged);
groupCall.removeListener("speaking", onParticipantsChanged);
groupCall.removeListener("mute_state_changed", onParticipantsChanged);
groupCall.removeListener("call_replaced", onParticipantsChanged);
groupCall.removeListener("call_feeds_changed", onParticipantsChanged);
groupCall.removeListener(
"local_mute_state_changed",
onLocalMuteStateChanged
);
groupCall.leave();
}
updateState({ error, loading: false });
});
return () => {
if (groupCallRef.current) {
groupCallRef.current.leave();
}
};
}, [client, roomId]);
usePageUnload(() => {
if (groupCallRef.current) {
groupCallRef.current.leave();
}
});
const initLocalParticipant = useCallback(
() => groupCallRef.current.initLocalParticipant(),
[]
);
const enter = useCallback(() => {
updateState({ entering: true });
groupCallRef.current
.enter()
.then(() => {
updateState({
entered: true,
entering: false,
participants: getParticipants(groupCallRef.current),
});
})
.catch((error) => {
updateState({ error, entering: false });
});
}, []);
const leave = useCallback(() => {
groupCallRef.current.leave();
updateState({
entered: false,
participants: [],
microphoneMuted: false,
localVideoMuted: false,
});
}, []);
const toggleLocalVideoMuted = useCallback(() => {
groupCallRef.current.setLocalVideoMuted(
!groupCallRef.current.isLocalVideoMuted()
);
}, []);
const toggleMicrophoneMuted = useCallback(() => {
groupCallRef.current.setMicrophoneMuted(
!groupCallRef.current.isMicrophoneMuted()
);
}, []);
return {
loading,
entered,
entering,
roomName: room ? room.name : null,
participants,
groupCall: groupCallRef.current,
callDebugger: callDebugger,
microphoneMuted,
localVideoMuted,
error,
initLocalParticipant,
enter,
leave,
toggleLocalVideoMuted,
toggleMicrophoneMuted,
};
}
const tsCache = {};
function getLastTs(client, r) {