Merge pull request #291 from vector-im/remove-matrix-react-sdk-dep

Remove dependency on matrix-react-sdk
This commit is contained in:
Robert Long 2022-04-07 15:43:55 -07:00 committed by GitHub
commit c05b6c5118
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
30 changed files with 2610 additions and 1211 deletions

View file

@ -18,11 +18,6 @@ module.exports = {
);
config.plugins.push(svgrPlugin());
config.resolve = config.resolve || {};
config.resolve.alias = config.resolve.alias || {};
config.resolve.alias["$(res)"] = path.resolve(
__dirname,
"../node_modules/matrix-react-sdk/res"
);
config.resolve.dedupe = config.resolve.dedupe || [];
config.resolve.dedupe.push("react", "react-dom", "matrix-js-sdk");
return config;

View file

@ -2,13 +2,13 @@ FROM node:16-buster as builder
WORKDIR /src
COPY . /src/matrix-video-chat
RUN matrix-video-chat/scripts/dockerbuild.sh
COPY . /src/element-call
RUN element-call/scripts/dockerbuild.sh
# App
FROM nginxinc/nginx-unprivileged:alpine
COPY --from=builder /src/matrix-video-chat/dist /app
COPY --from=builder /src/element-call/dist /app
COPY scripts/default.conf /etc/nginx/conf.d/
USER root

View file

@ -6,7 +6,7 @@ Discussion in [#webrtc:matrix.org: ![#webrtc:matrix.org](https://img.shields.io/
## Getting Started
`element-call` is built against the `robertlong/group-call` branch of both [matrix-js-sdk](https://github.com/matrix-org/matrix-js-sdk/pull/1902) and [matrix-react-sdk](https://github.com/matrix-org/matrix-react-sdk/pull/6848). Because of how these packages are configured and Vite's requirements, you will need to clone them locally and use `yarn link` to stich things together.
`element-call` is built against the `robertlong/group-call` branch of [matrix-js-sdk](https://github.com/matrix-org/matrix-js-sdk/pull/1902). Because of how this package is configured and Vite's requirements, you will need to clone it locally and use `yarn link` to stich things together.
First clone, install, and link `matrix-js-sdk`
@ -18,17 +18,6 @@ yarn
yarn link
```
Then clone, install, link `matrix-js-sdk` into `matrix-react-sdk`, and link `matrix-react-sdk`
```
git clone https://github.com/matrix-org/matrix-react-sdk.git
cd matrix-react-sdk
git checkout robertlong/group-call
yarn
yarn link matrix-js-sdk
yarn link
```
Next you'll also need [Synapse](https://matrix-org.github.io/synapse/latest/setup/installation.html) installed locally and running on port 8008.
Finally we can set up this project.
@ -38,7 +27,6 @@ git clone https://github.com/vector-im/element-call.git
cd element-call
yarn
yarn link matrix-js-sdk
yarn link matrix-react-sdk
yarn dev
```

View file

@ -18,6 +18,7 @@
"@react-aria/tabs": "^3.1.0",
"@react-aria/tooltip": "^3.1.3",
"@react-aria/utils": "^3.10.0",
"@react-spring/web": "^9.4.4",
"@react-stately/collections": "^3.3.4",
"@react-stately/overlays": "^3.1.3",
"@react-stately/select": "^3.1.3",
@ -25,11 +26,12 @@
"@react-stately/tree": "^3.2.0",
"@sentry/react": "^6.13.3",
"@sentry/tracing": "^6.13.3",
"@use-gesture/react": "^10.2.11",
"classnames": "^2.3.1",
"color-hash": "^2.0.1",
"events": "^3.3.0",
"lodash-move": "^1.1.1",
"matrix-js-sdk": "github:matrix-org/matrix-js-sdk#robertlong/group-call",
"matrix-react-sdk": "github:matrix-org/matrix-react-sdk#robertlong/group-call",
"mermaid": "^8.13.8",
"normalize.css": "^8.0.1",
"pako": "^2.0.4",

View file

@ -13,22 +13,11 @@ git checkout robertlong/group-call
yarn install
yarn run build
yarn link
cd ..
git clone https://github.com/matrix-org/matrix-react-sdk.git
cd matrix-react-sdk
git checkout robertlong/group-call
yarn link matrix-js-sdk
yarn install
yarn run build
yarn link
cd ..
cd matrix-video-chat
cd ../element-call
export VITE_APP_VERSION=$(git describe --tags --abbrev=0)
yarn link matrix-js-sdk
yarn link matrix-react-sdk
yarn install
yarn run build

5
src/icons/MicMuted.svg Normal file
View file

@ -0,0 +1,5 @@
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1.9206 1.0544C1.68141 0.815201 1.29359 0.815201 1.0544 1.0544C0.815201 1.29359 0.815201 1.68141 1.0544 1.9206L4.55 5.41621V7C4.55 8.3531 5.6469 9.45 7 9.45C7.45436 9.45 7.87983 9.32632 8.24458 9.11079L9.12938 9.99558C8.52863 10.4234 7.7937 10.675 7 10.675C4.97035 10.675 3.325 9.02965 3.325 7C3.325 6.66173 3.05077 6.3875 2.7125 6.3875C2.37423 6.3875 2.1 6.66173 2.1 7C2.1 9.49877 3.97038 11.5607 6.3875 11.8621V12.5125C6.3875 12.8508 6.66173 13.125 7 13.125C7.33827 13.125 7.6125 12.8508 7.6125 12.5125V11.8621C8.50718 11.7505 9.32696 11.3978 10.0047 10.8709L12.0794 12.9456C12.3186 13.1848 12.7064 13.1848 12.9456 12.9456C13.1848 12.7064 13.1848 12.3186 12.9456 12.0794L1.9206 1.0544Z" fill="white"/>
<path d="M10.5474 7.96338L11.5073 8.92525C11.7601 8.33424 11.9 7.68346 11.9 7C11.9 6.66173 11.6258 6.3875 11.2875 6.3875C10.9492 6.3875 10.675 6.66173 10.675 7C10.675 7.33336 10.6306 7.65634 10.5474 7.96338Z" fill="white"/>
<path d="M4.81385 2.21784L9.45 6.86366V3.325C9.45 1.9719 8.3531 0.875 7 0.875C6.04532 0.875 5.21818 1.42104 4.81385 2.21784Z" fill="white"/>
</svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

6
src/icons/VideoMuted.svg Normal file
View file

@ -0,0 +1,6 @@
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.20333 0.963373C0.474437 0.690007 0.913989 0.690007 1.1851 0.963373L11.5983 11.4633C11.8694 11.7367 11.8694 12.1799 11.5983 12.4533C11.3272 12.7267 10.8876 12.7267 10.6165 12.4533L0.20333 1.95332C-0.0677768 1.67995 -0.0677768 1.23674 0.20333 0.963373Z" fill="white"/>
<path d="M0.418261 3.63429C0.226267 3.95219 0.115674 4.32557 0.115674 4.725V9.85832C0.115674 11.0181 1.0481 11.9583 2.19831 11.9583H8.65411L0.447396 3.66596C0.437225 3.65568 0.427513 3.64511 0.418261 3.63429Z" fill="white"/>
<path d="M9.95036 4.725V8.33212L4.30219 2.625H7.86772C9.01793 2.625 9.95036 3.5652 9.95036 4.725Z" fill="white"/>
<path d="M12.8721 4.11817L11.1074 5.54167V9.04166L12.8721 10.4652C13.3266 10.8318 14 10.5055 14 9.91855V4.66478C14 4.07782 13.3266 3.7515 12.8721 4.11817Z" fill="white"/>
</svg>

After

Width:  |  Height:  |  Size: 892 B

View file

@ -22,10 +22,10 @@ import App from "./App";
import * as Sentry from "@sentry/react";
import { Integrations } from "@sentry/tracing";
import { ErrorView } from "./FullScreenView";
import * as rageshake from "matrix-react-sdk/src/rageshake/rageshake";
import { init as initRageshake } from "./settings/rageshake";
import { InspectorContextProvider } from "./room/GroupCallInspector";
rageshake.init();
initRageshake();
console.info(`matrix-video-chat ${import.meta.env.VITE_APP_VERSION || "dev"}`);

View file

@ -2,7 +2,10 @@ import React, { useCallback, useEffect } from "react";
import { Modal, ModalContent } from "../Modal";
import { Button } from "../button";
import { FieldRow, InputField, ErrorMessage } from "../input/Input";
import { useSubmitRageshake, useRageshakeRequest } from "../settings/rageshake";
import {
useSubmitRageshake,
useRageshakeRequest,
} from "../settings/submit-rageshake";
import { Body } from "../typography/Typography";
import { randomString } from "matrix-js-sdk/src/randomstring";

View file

@ -1,7 +1,7 @@
import React, { useCallback, useEffect, useState } from "react";
import { useHistory } from "react-router-dom";
import { GroupCallState } from "matrix-js-sdk/src/webrtc/groupCall";
import { useGroupCall } from "matrix-react-sdk/src/hooks/useGroupCall";
import { useGroupCall } from "./useGroupCall";
import { ErrorView, FullScreenView } from "../FullScreenView";
import { LobbyView } from "./LobbyView";
import { InCallView } from "./InCallView";
@ -14,7 +14,6 @@ export function GroupCallView({
isPasswordlessUser,
roomId,
groupCall,
simpleGrid,
}) {
const [showInspector, setShowInspector] = useState(
() => !!localStorage.getItem("matrix-group-call-inspector")
@ -89,7 +88,6 @@ export function GroupCallView({
isScreensharing={isScreensharing}
localScreenshareFeed={localScreenshareFeed}
screenshareFeeds={screenshareFeeds}
simpleGrid={simpleGrid}
setShowInspector={onChangeShowInspector}
showInspector={showInspector}
roomId={roomId}

View file

@ -7,19 +7,15 @@ import {
ScreenshareButton,
} from "../button";
import { Header, LeftNav, RightNav, RoomHeaderInfo } from "../Header";
import VideoGrid, {
useVideoGridLayout,
} from "matrix-react-sdk/src/components/views/voip/GroupCallView/VideoGrid";
import { VideoTileContainer } from "matrix-react-sdk/src/components/views/voip/GroupCallView/VideoTileContainer";
import SimpleVideoGrid from "matrix-react-sdk/src/components/views/voip/GroupCallView/SimpleVideoGrid";
import "matrix-react-sdk/res/css/views/voip/GroupCallView/_VideoGrid.scss";
import { VideoGrid, useVideoGridLayout } from "../video-grid/VideoGrid";
import { VideoTileContainer } from "../video-grid/VideoTileContainer";
import { getAvatarUrl } from "../matrix-utils";
import { GroupCallInspector } from "./GroupCallInspector";
import { OverflowMenu } from "./OverflowMenu";
import { GridLayoutMenu } from "./GridLayoutMenu";
import { Avatar } from "../Avatar";
import { UserMenuContainer } from "../UserMenuContainer";
import { useRageshakeRequestModal } from "../settings/rageshake";
import { useRageshakeRequestModal } from "../settings/submit-rageshake";
import { RageshakeRequestModal } from "./RageshakeRequestModal";
import { usePreventScroll } from "@react-aria/overlays";
import { useMediaHandler } from "../settings/useMediaHandler";
@ -44,7 +40,6 @@ export function InCallView({
toggleScreensharing,
isScreensharing,
screenshareFeeds,
simpleGrid,
setShowInspector,
showInspector,
roomId,
@ -149,8 +144,6 @@ export function InCallView({
<div className={styles.centerMessage}>
<p>Waiting for other participants...</p>
</div>
) : simpleGrid ? (
<SimpleVideoGrid items={items} />
) : (
<VideoGrid
items={items}

View file

@ -3,8 +3,8 @@ import styles from "./LobbyView.module.css";
import { Button, CopyButton, MicButton, VideoButton } from "../button";
import { Header, LeftNav, RightNav, RoomHeaderInfo } from "../Header";
import { GroupCallState } from "matrix-js-sdk/src/webrtc/groupCall";
import { useCallFeed } from "matrix-react-sdk/src/hooks/useCallFeed";
import { useMediaStream } from "matrix-react-sdk/src/hooks/useMediaStream";
import { useCallFeed } from "../video-grid/useCallFeed";
import { useMediaStream } from "../video-grid/useMediaStream";
import { getRoomUrl } from "../matrix-utils";
import { OverflowMenu } from "./OverflowMenu";
import { UserMenuContainer } from "../UserMenuContainer";

View file

@ -2,7 +2,7 @@ import React, { useEffect } from "react";
import { Modal, ModalContent } from "../Modal";
import { Button } from "../button";
import { FieldRow, ErrorMessage } from "../input/Input";
import { useSubmitRageshake } from "../settings/rageshake";
import { useSubmitRageshake } from "../settings/submit-rageshake";
import { Body } from "../typography/Typography";
export function RageshakeRequestModal({ rageshakeRequestId, roomId, ...rest }) {

View file

@ -29,9 +29,9 @@ export function RoomPage() {
const { roomId: maybeRoomId } = useParams();
const { hash, search } = useLocation();
const [simpleGrid, viaServers] = useMemo(() => {
const [viaServers] = useMemo(() => {
const params = new URLSearchParams(search);
return [params.has("simple"), params.getAll("via")];
return [params.getAll("via")];
}, [search]);
const roomId = (maybeRoomId || hash || "").toLowerCase();
@ -56,7 +56,6 @@ export function RoomPage() {
roomId={roomId}
groupCall={groupCall}
isPasswordlessUser={isPasswordlessUser}
simpleGrid={simpleGrid}
/>
)}
</GroupCallLoader>

252
src/room/useGroupCall.js Normal file
View file

@ -0,0 +1,252 @@
import { useCallback, useEffect, useState } from "react";
import {
GroupCallEvent,
GroupCallState,
} from "matrix-js-sdk/src/webrtc/groupCall";
import { usePageUnload } from "./usePageUnload";
export function useGroupCall(groupCall) {
const [
{
state,
calls,
localCallFeed,
activeSpeaker,
userMediaFeeds,
error,
microphoneMuted,
localVideoMuted,
isScreensharing,
screenshareFeeds,
localScreenshareFeed,
localDesktopCapturerSourceId,
participants,
hasLocalParticipant,
requestingScreenshare,
},
setState,
] = useState({
state: GroupCallState.LocalCallFeedUninitialized,
calls: [],
userMediaFeeds: [],
microphoneMuted: false,
localVideoMuted: false,
screenshareFeeds: [],
isScreensharing: false,
requestingScreenshare: false,
participants: [],
hasLocalParticipant: false,
});
const updateState = (state) =>
setState((prevState) => ({ ...prevState, ...state }));
useEffect(() => {
function onGroupCallStateChanged() {
updateState({
state: groupCall.state,
calls: [...groupCall.calls],
localCallFeed: groupCall.localCallFeed,
activeSpeaker: groupCall.activeSpeaker,
userMediaFeeds: [...groupCall.userMediaFeeds],
microphoneMuted: groupCall.isMicrophoneMuted(),
localVideoMuted: groupCall.isLocalVideoMuted(),
isScreensharing: groupCall.isScreensharing(),
localScreenshareFeed: groupCall.localScreenshareFeed,
localDesktopCapturerSourceId: groupCall.localDesktopCapturerSourceId,
screenshareFeeds: [...groupCall.screenshareFeeds],
participants: [...groupCall.participants],
});
}
function onUserMediaFeedsChanged(userMediaFeeds) {
updateState({
userMediaFeeds: [...userMediaFeeds],
});
}
function onScreenshareFeedsChanged(screenshareFeeds) {
updateState({
screenshareFeeds: [...screenshareFeeds],
});
}
function onActiveSpeakerChanged(activeSpeaker) {
updateState({
activeSpeaker: activeSpeaker,
});
}
function onLocalMuteStateChanged(microphoneMuted, localVideoMuted) {
updateState({
microphoneMuted,
localVideoMuted,
});
}
function onLocalScreenshareStateChanged(
isScreensharing,
localScreenshareFeed,
localDesktopCapturerSourceId
) {
updateState({
isScreensharing,
localScreenshareFeed,
localDesktopCapturerSourceId,
});
}
function onCallsChanged(calls) {
updateState({
calls: [...calls],
});
}
function onParticipantsChanged(participants) {
updateState({
participants: [...participants],
hasLocalParticipant: groupCall.hasLocalParticipant(),
});
}
groupCall.on(GroupCallEvent.GroupCallStateChanged, onGroupCallStateChanged);
groupCall.on(GroupCallEvent.UserMediaFeedsChanged, onUserMediaFeedsChanged);
groupCall.on(
GroupCallEvent.ScreenshareFeedsChanged,
onScreenshareFeedsChanged
);
groupCall.on(GroupCallEvent.ActiveSpeakerChanged, onActiveSpeakerChanged);
groupCall.on(GroupCallEvent.LocalMuteStateChanged, onLocalMuteStateChanged);
groupCall.on(
GroupCallEvent.LocalScreenshareStateChanged,
onLocalScreenshareStateChanged
);
groupCall.on(GroupCallEvent.CallsChanged, onCallsChanged);
groupCall.on(GroupCallEvent.ParticipantsChanged, onParticipantsChanged);
updateState({
error: null,
state: groupCall.state,
calls: [...groupCall.calls],
localCallFeed: groupCall.localCallFeed,
activeSpeaker: groupCall.activeSpeaker,
userMediaFeeds: [...groupCall.userMediaFeeds],
microphoneMuted: groupCall.isMicrophoneMuted(),
localVideoMuted: groupCall.isLocalVideoMuted(),
isScreensharing: groupCall.isScreensharing(),
localScreenshareFeed: groupCall.localScreenshareFeed,
localDesktopCapturerSourceId: groupCall.localDesktopCapturerSourceId,
screenshareFeeds: [...groupCall.screenshareFeeds],
participants: [...groupCall.participants],
hasLocalParticipant: groupCall.hasLocalParticipant(),
});
return () => {
groupCall.removeListener(
GroupCallEvent.GroupCallStateChanged,
onGroupCallStateChanged
);
groupCall.removeListener(
GroupCallEvent.UserMediaFeedsChanged,
onUserMediaFeedsChanged
);
groupCall.removeListener(
GroupCallEvent.ScreenshareFeedsChanged,
onScreenshareFeedsChanged
);
groupCall.removeListener(
GroupCallEvent.ActiveSpeakerChanged,
onActiveSpeakerChanged
);
groupCall.removeListener(
GroupCallEvent.LocalMuteStateChanged,
onLocalMuteStateChanged
);
groupCall.removeListener(
GroupCallEvent.LocalScreenshareStateChanged,
onLocalScreenshareStateChanged
);
groupCall.removeListener(GroupCallEvent.CallsChanged, onCallsChanged);
groupCall.removeListener(
GroupCallEvent.ParticipantsChanged,
onParticipantsChanged
);
groupCall.leave();
};
}, [groupCall]);
usePageUnload(() => {
groupCall.leave();
});
const initLocalCallFeed = useCallback(
() => groupCall.initLocalCallFeed(),
[groupCall]
);
const enter = useCallback(() => {
if (
groupCall.state !== GroupCallState.LocalCallFeedUninitialized &&
groupCall.state !== GroupCallState.LocalCallFeedInitialized
) {
return;
}
groupCall.enter().catch((error) => {
console.error(error);
updateState({ error });
});
}, [groupCall]);
const leave = useCallback(() => groupCall.leave(), [groupCall]);
const toggleLocalVideoMuted = useCallback(() => {
groupCall.setLocalVideoMuted(!groupCall.isLocalVideoMuted());
}, [groupCall]);
const toggleMicrophoneMuted = useCallback(() => {
groupCall.setMicrophoneMuted(!groupCall.isMicrophoneMuted());
}, [groupCall]);
const toggleScreensharing = useCallback(() => {
updateState({ requestingScreenshare: true });
groupCall.setScreensharingEnabled(!groupCall.isScreensharing()).then(() => {
updateState({ requestingScreenshare: false });
});
}, [groupCall]);
useEffect(() => {
if (window.RTCPeerConnection === undefined) {
const error = new Error(
"WebRTC is not supported or is being blocked in this browser."
);
console.error(error);
updateState({ error });
}
}, []);
return {
state,
calls,
localCallFeed,
activeSpeaker,
userMediaFeeds,
microphoneMuted,
localVideoMuted,
error,
initLocalCallFeed,
enter,
leave,
toggleLocalVideoMuted,
toggleMicrophoneMuted,
toggleScreensharing,
requestingScreenshare,
isScreensharing,
screenshareFeeds,
localScreenshareFeed,
localDesktopCapturerSourceId,
participants,
hasLocalParticipant,
};
}

54
src/room/usePageUnload.js Normal file
View file

@ -0,0 +1,54 @@
import { useEffect } from "react";
// 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)
);
}
export 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);
};
}, [callback]);
}

View file

@ -10,7 +10,7 @@ import { Item } from "@react-stately/collections";
import { useMediaHandler } from "./useMediaHandler";
import { FieldRow, InputField } from "../input/Input";
import { Button } from "../button";
import { useDownloadDebugLog } from "./rageshake";
import { useDownloadDebugLog } from "./submit-rageshake";
import { Body } from "../typography/Typography";
export function SettingsModal({ setShowInspector, showInspector, ...rest }) {

View file

@ -1,300 +1,535 @@
import { useCallback, useContext, useEffect, useState } from "react";
import * as rageshake from "matrix-react-sdk/src/rageshake/rageshake";
import pako from "pako";
import { useClient } from "../ClientContext";
import { InspectorContext } from "../room/GroupCallInspector";
import { useModalTriggerState } from "../Modal";
/*
Copyright 2017 OpenMarket Ltd
Copyright 2018 New Vector Ltd
Copyright 2019 The Matrix.org Foundation C.I.C.
export function useSubmitRageshake() {
const { client } = useClient();
const [{ json }] = useContext(InspectorContext);
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
const [{ sending, sent, error }, setState] = useState({
sending: false,
sent: false,
error: null,
});
http://www.apache.org/licenses/LICENSE-2.0
const submitRageshake = useCallback(
async (opts) => {
if (sending) {
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
// This module contains all the code needed to log the console, persist it to
// disk and submit bug reports. Rationale is as follows:
// - Monkey-patching the console is preferable to having a log library because
// we can catch logs by other libraries more easily, without having to all
// depend on the same log framework / pass the logger around.
// - We use IndexedDB to persists logs because it has generous disk space
// limits compared to local storage. IndexedDB does not work in incognito
// mode, in which case this module will not be able to write logs to disk.
// However, the logs will still be stored in-memory, so can still be
// submitted in a bug report should the user wish to: we can also store more
// logs in-memory than in local storage, which does work in incognito mode.
// We also need to handle the case where there are 2+ tabs. Each JS runtime
// generates a random string which serves as the "ID" for that tab/session.
// These IDs are stored along with the log lines.
// - Bug reports are sent as a POST over HTTPS: it purposefully does not use
// Matrix as bug reports may be made when Matrix is not responsive (which may
// be the cause of the bug). We send the most recent N MB of UTF-8 log data,
// starting with the most recent, which we know because the "ID"s are
// actually timestamps. We then purge the remaining logs. We also do this
// purge on startup to prevent logs from accumulating.
// the frequency with which we flush to indexeddb
import { logger } from "matrix-js-sdk/src/logger";
const FLUSH_RATE_MS = 30 * 1000;
// the length of log data we keep in indexeddb (and include in the reports)
const MAX_LOG_SIZE = 1024 * 1024 * 5; // 5 MB
// A class which monkey-patches the global console and stores log lines.
export class ConsoleLogger {
logs = "";
monkeyPatch(consoleObj) {
// Monkey-patch console logging
const consoleFunctionsToLevels = {
log: "I",
info: "I",
warn: "W",
error: "E",
};
Object.keys(consoleFunctionsToLevels).forEach((fnName) => {
const level = consoleFunctionsToLevels[fnName];
const originalFn = consoleObj[fnName].bind(consoleObj);
consoleObj[fnName] = (...args) => {
this.log(level, ...args);
originalFn(...args);
};
});
}
log(level, ...args) {
// We don't know what locale the user may be running so use ISO strings
const ts = new Date().toISOString();
// Convert objects and errors to helpful things
args = args.map((arg) => {
if (arg instanceof DOMException) {
return arg.message + ` (${arg.name} | ${arg.code})`;
} else if (arg instanceof Error) {
return arg.message + (arg.stack ? `\n${arg.stack}` : "");
} else if (typeof arg === "object") {
try {
return JSON.stringify(arg);
} catch (e) {
// In development, it can be useful to log complex cyclic
// objects to the console for inspection. This is fine for
// the console, but default `stringify` can't handle that.
// We workaround this by using a special replacer function
// to only log values of the root object and avoid cycles.
return JSON.stringify(arg, (key, value) => {
if (key && typeof value === "object") {
return "<object>";
}
return value;
});
}
} else {
return arg;
}
});
// Some browsers support string formatting which we're not doing here
// so the lines are a little more ugly but easy to implement / quick to
// run.
// Example line:
// 2017-01-18T11:23:53.214Z W Failed to set badge count
let line = `${ts} ${level} ${args.join(" ")}\n`;
// Do some cleanup
line = line.replace(/token=[a-zA-Z0-9-]+/gm, "token=xxxxx");
// Using + really is the quickest way in JS
// http://jsperf.com/concat-vs-plus-vs-join
this.logs += line;
}
/**
* Retrieve log lines to flush to disk.
* @param {boolean} keepLogs True to not delete logs after flushing.
* @return {string} \n delimited log lines to flush.
*/
flush(keepLogs) {
// The ConsoleLogger doesn't care how these end up on disk, it just
// flushes them to the caller.
if (keepLogs) {
return this.logs;
}
const logsToFlush = this.logs;
this.logs = "";
return logsToFlush;
}
}
// A class which stores log lines in an IndexedDB instance.
export class IndexedDBLogStore {
index = 0;
db = null;
flushPromise = null;
flushAgainPromise = null;
constructor(indexedDB, logger) {
this.indexedDB = indexedDB;
this.logger = logger;
this.id = "instance-" + Math.random() + Date.now();
}
/**
* @return {Promise} Resolves when the store is ready.
*/
connect() {
const req = this.indexedDB.open("logs");
return new Promise((resolve, reject) => {
req.onsuccess = (event) => {
// @ts-ignore
this.db = event.target.result;
// Periodically flush logs to local storage / indexeddb
setInterval(this.flush.bind(this), FLUSH_RATE_MS);
resolve();
};
req.onerror = (event) => {
const err =
// @ts-ignore
"Failed to open log database: " + event.target.error.name;
logger.error(err);
reject(new Error(err));
};
// First time: Setup the object store
req.onupgradeneeded = (event) => {
// @ts-ignore
const db = event.target.result;
const logObjStore = db.createObjectStore("logs", {
keyPath: ["id", "index"],
});
// Keys in the database look like: [ "instance-148938490", 0 ]
// Later on we need to query everything based on an instance id.
// In order to do this, we need to set up indexes "id".
logObjStore.createIndex("id", "id", { unique: false });
logObjStore.add(
this.generateLogEntry(new Date() + " ::: Log database was created.")
);
const lastModifiedStore = db.createObjectStore("logslastmod", {
keyPath: "id",
});
lastModifiedStore.add(this.generateLastModifiedTime());
};
});
}
/**
* Flush logs to disk.
*
* There are guards to protect against race conditions in order to ensure
* that all previous flushes have completed before the most recent flush.
* Consider without guards:
* - A calls flush() periodically.
* - B calls flush() and wants to send logs immediately afterwards.
* - If B doesn't wait for A's flush to complete, B will be missing the
* contents of A's flush.
* To protect against this, we set 'flushPromise' when a flush is ongoing.
* Subsequent calls to flush() during this period will chain another flush,
* then keep returning that same chained flush.
*
* This guarantees that we will always eventually do a flush when flush() is
* called.
*
* @return {Promise} Resolved when the logs have been flushed.
*/
flush() {
// check if a flush() operation is ongoing
if (this.flushPromise) {
if (this.flushAgainPromise) {
// this is the 3rd+ time we've called flush() : return the same promise.
return this.flushAgainPromise;
}
// queue up a flush to occur immediately after the pending one completes.
this.flushAgainPromise = this.flushPromise
.then(() => {
return this.flush();
})
.then(() => {
this.flushAgainPromise = null;
});
return this.flushAgainPromise;
}
// there is no flush promise or there was but it has finished, so do
// a brand new one, destroying the chain which may have been built up.
this.flushPromise = new Promise((resolve, reject) => {
if (!this.db) {
// not connected yet or user rejected access for us to r/w to the db.
reject(new Error("No connected database"));
return;
}
try {
setState({ sending: true, sent: false, error: null });
let userAgent = "UNKNOWN";
if (window.navigator && window.navigator.userAgent) {
userAgent = window.navigator.userAgent;
}
let touchInput = "UNKNOWN";
try {
// MDN claims broad support across browsers
touchInput = String(window.matchMedia("(pointer: coarse)").matches);
} catch (e) {}
const body = new FormData();
body.append(
"text",
opts.description || "User did not supply any additional text."
);
body.append("app", "matrix-video-chat");
body.append("version", import.meta.env.VITE_APP_VERSION || "dev");
body.append("user_agent", userAgent);
body.append("installed_pwa", false);
body.append("touch_input", touchInput);
if (client) {
const userId = client.getUserId();
const user = client.getUser(userId);
body.append("display_name", user?.displayName);
body.append("user_id", client.credentials.userId);
body.append("device_id", client.deviceId);
if (opts.roomId) {
body.append("room_id", opts.roomId);
}
if (client.isCryptoEnabled()) {
const keys = [`ed25519:${client.getDeviceEd25519Key()}`];
if (client.getDeviceCurve25519Key) {
keys.push(`curve25519:${client.getDeviceCurve25519Key()}`);
}
body.append("device_keys", keys.join(", "));
body.append("cross_signing_key", client.getCrossSigningId());
// add cross-signing status information
const crossSigning = client.crypto.crossSigningInfo;
const secretStorage = client.crypto.secretStorage;
body.append(
"cross_signing_ready",
String(await client.isCrossSigningReady())
);
body.append(
"cross_signing_supported_by_hs",
String(
await client.doesServerSupportUnstableFeature(
"org.matrix.e2e_cross_signing"
)
)
);
body.append("cross_signing_key", crossSigning.getId());
body.append(
"cross_signing_privkey_in_secret_storage",
String(
!!(await crossSigning.isStoredInSecretStorage(secretStorage))
)
);
const pkCache = client.getCrossSigningCacheCallbacks();
body.append(
"cross_signing_master_privkey_cached",
String(
!!(pkCache && (await pkCache.getCrossSigningKeyCache("master")))
)
);
body.append(
"cross_signing_self_signing_privkey_cached",
String(
!!(
pkCache &&
(await pkCache.getCrossSigningKeyCache("self_signing"))
)
)
);
body.append(
"cross_signing_user_signing_privkey_cached",
String(
!!(
pkCache &&
(await pkCache.getCrossSigningKeyCache("user_signing"))
)
)
);
body.append(
"secret_storage_ready",
String(await client.isSecretStorageReady())
);
body.append(
"secret_storage_key_in_account",
String(!!(await secretStorage.hasKey()))
);
body.append(
"session_backup_key_in_secret_storage",
String(!!(await client.isKeyBackupKeyStored()))
);
const sessionBackupKeyFromCache =
await client.crypto.getSessionBackupPrivateKey();
body.append(
"session_backup_key_cached",
String(!!sessionBackupKeyFromCache)
);
body.append(
"session_backup_key_well_formed",
String(sessionBackupKeyFromCache instanceof Uint8Array)
);
}
}
if (opts.label) {
body.append("label", opts.label);
}
// add storage persistence/quota information
if (navigator.storage && navigator.storage.persisted) {
try {
body.append(
"storageManager_persisted",
String(await navigator.storage.persisted())
);
} catch (e) {}
} else if (document.hasStorageAccess) {
// Safari
try {
body.append(
"storageManager_persisted",
String(await document.hasStorageAccess())
);
} catch (e) {}
}
if (navigator.storage && navigator.storage.estimate) {
try {
const estimate = await navigator.storage.estimate();
body.append("storageManager_quota", String(estimate.quota));
body.append("storageManager_usage", String(estimate.usage));
if (estimate.usageDetails) {
Object.keys(estimate.usageDetails).forEach((k) => {
body.append(
`storageManager_usage_${k}`,
String(estimate.usageDetails[k])
);
});
}
} catch (e) {}
}
if (opts.sendLogs) {
const logs = await rageshake.getLogsForReport();
for (const entry of logs) {
// encode as UTF-8
let buf = new TextEncoder().encode(entry.lines);
// compress
buf = pako.gzip(buf);
body.append("compressed-log", new Blob([buf]), entry.id);
}
if (json) {
body.append(
"file",
new Blob([JSON.stringify(json)], { type: "text/plain" }),
"groupcall.txt"
);
}
}
if (opts.rageshakeRequestId) {
body.append(
"group_call_rageshake_request_id",
opts.rageshakeRequestId
);
}
await fetch(
import.meta.env.VITE_RAGESHAKE_SUBMIT_URL ||
"https://element.io/bugreports/submit",
{
method: "POST",
body,
}
);
setState({ sending: false, sent: true, error: null });
} catch (error) {
setState({ sending: false, sent: false, error });
console.error(error);
const lines = this.logger.flush();
if (lines.length === 0) {
resolve();
return;
}
},
[client]
);
const txn = this.db.transaction(["logs", "logslastmod"], "readwrite");
const objStore = txn.objectStore("logs");
txn.oncomplete = (event) => {
resolve();
};
txn.onerror = (event) => {
logger.error("Failed to flush logs : ", event);
reject(new Error("Failed to write logs: " + event.target.errorCode));
};
objStore.add(this.generateLogEntry(lines));
const lastModStore = txn.objectStore("logslastmod");
lastModStore.put(this.generateLastModifiedTime());
}).then(() => {
this.flushPromise = null;
});
return this.flushPromise;
}
return {
submitRageshake,
sending,
sent,
error,
};
}
/**
* Consume the most recent logs and return them. Older logs which are not
* returned are deleted at the same time, so this can be called at startup
* to do house-keeping to keep the logs from growing too large.
*
* @return {Promise<Object[]>} Resolves to an array of objects. The array is
* sorted in time (oldest first) based on when the log file was created (the
* log ID). The objects have said log ID in an "id" field and "lines" which
* is a big string with all the new-line delimited logs.
*/
async consume() {
const db = this.db;
export function useDownloadDebugLog() {
const [{ json }] = useContext(InspectorContext);
// Returns: a string representing the concatenated logs for this ID.
// Stops adding log fragments when the size exceeds maxSize
function fetchLogs(id, maxSize) {
const objectStore = db
.transaction("logs", "readonly")
.objectStore("logs");
const downloadDebugLog = useCallback(() => {
const blob = new Blob([JSON.stringify(json)], { type: "application/json" });
const url = URL.createObjectURL(blob);
const el = document.createElement("a");
el.href = url;
el.download = "groupcall.json";
el.style.display = "none";
document.body.appendChild(el);
el.click();
setTimeout(() => {
URL.revokeObjectURL(url);
el.parentNode.removeChild(el);
}, 0);
}, [json]);
return downloadDebugLog;
}
export function useRageshakeRequest() {
const { client } = useClient();
const sendRageshakeRequest = useCallback(
(roomId, rageshakeRequestId) => {
client.sendEvent(roomId, "org.matrix.rageshake_request", {
request_id: rageshakeRequestId,
return new Promise((resolve, reject) => {
const query = objectStore
.index("id")
.openCursor(IDBKeyRange.only(id), "prev");
let lines = "";
query.onerror = (event) => {
reject(new Error("Query failed: " + event.target.errorCode));
};
query.onsuccess = (event) => {
const cursor = event.target.result;
if (!cursor) {
resolve(lines);
return; // end of results
}
lines = cursor.value.lines + lines;
if (lines.length >= maxSize) {
resolve(lines);
} else {
cursor.continue();
}
};
});
},
[client]
);
}
return sendRageshakeRequest;
}
// Returns: A sorted array of log IDs. (newest first)
function fetchLogIds() {
// To gather all the log IDs, query for all records in logslastmod.
const o = db
.transaction("logslastmod", "readonly")
.objectStore("logslastmod");
return selectQuery(o, undefined, (cursor) => {
return {
id: cursor.value.id,
ts: cursor.value.ts,
};
}).then((res) => {
// Sort IDs by timestamp (newest first)
return res
.sort((a, b) => {
return b.ts - a.ts;
})
.map((a) => a.id);
});
}
export function useRageshakeRequestModal(roomId) {
const { modalState, modalProps } = useModalTriggerState();
const { client } = useClient();
const [rageshakeRequestId, setRageshakeRequestId] = useState();
function deleteLogs(id) {
return new Promise((resolve, reject) => {
const txn = db.transaction(["logs", "logslastmod"], "readwrite");
const o = txn.objectStore("logs");
// only load the key path, not the data which may be huge
const query = o.index("id").openKeyCursor(IDBKeyRange.only(id));
query.onsuccess = (event) => {
const cursor = event.target.result;
if (!cursor) {
return;
}
o.delete(cursor.primaryKey);
cursor.continue();
};
txn.oncomplete = () => {
resolve();
};
txn.onerror = (event) => {
reject(
new Error(
"Failed to delete logs for " +
`'${id}' : ${event.target.errorCode}`
)
);
};
// delete last modified entries
const lastModStore = txn.objectStore("logslastmod");
lastModStore.delete(id);
});
}
useEffect(() => {
const onEvent = (event) => {
const type = event.getType();
const allLogIds = await fetchLogIds();
let removeLogIds = [];
const logs = [];
let size = 0;
for (let i = 0; i < allLogIds.length; i++) {
const lines = await fetchLogs(allLogIds[i], MAX_LOG_SIZE - size);
if (
type === "org.matrix.rageshake_request" &&
roomId === event.getRoomId() &&
client.getUserId() !== event.getSender()
) {
setRageshakeRequestId(event.getContent().request_id);
modalState.open();
// always add the log file: fetchLogs will truncate once the maxSize we give it is
// exceeded, so we'll go over the max but only by one fragment's worth.
logs.push({
lines: lines,
id: allLogIds[i],
});
size += lines.length;
// If fetchLogs truncated we'll now be at or over the size limit,
// in which case we should stop and remove the rest of the log files.
if (size >= MAX_LOG_SIZE) {
// the remaining log IDs should be removed. If we go out of
// bounds this is just []
removeLogIds = allLogIds.slice(i + 1);
break;
}
}
if (removeLogIds.length > 0) {
logger.log("Removing logs: ", removeLogIds);
// Don't await this because it's non-fatal if we can't clean up
// logs.
Promise.all(removeLogIds.map((id) => deleteLogs(id))).then(
() => {
logger.log(`Removed ${removeLogIds.length} old logs.`);
},
(err) => {
logger.error(err);
}
);
}
return logs;
}
generateLogEntry(lines) {
return {
id: this.id,
lines: lines,
index: this.index++,
};
}
client.on("event", onEvent);
return () => {
client.removeListener("event", onEvent);
generateLastModifiedTime() {
return {
id: this.id,
ts: Date.now(),
};
}, [modalState.open, roomId]);
return { modalState, modalProps: { ...modalProps, rageshakeRequestId } };
}
}
/**
* Helper method to collect results from a Cursor and promiseify it.
* @param {ObjectStore|Index} store The store to perform openCursor on.
* @param {IDBKeyRange=} keyRange Optional key range to apply on the cursor.
* @param {Function} resultMapper A function which is repeatedly called with a
* Cursor.
* Return the data you want to keep.
* @return {Promise<T[]>} Resolves to an array of whatever you returned from
* resultMapper.
*/
function selectQuery(store, keyRange, resultMapper) {
const query = store.openCursor(keyRange);
return new Promise((resolve, reject) => {
const results = [];
query.onerror = (event) => {
// @ts-ignore
reject(new Error("Query failed: " + event.target.errorCode));
};
// collect results
query.onsuccess = (event) => {
// @ts-ignore
const cursor = event.target.result;
if (!cursor) {
resolve(results);
return; // end of results
}
results.push(resultMapper(cursor));
cursor.continue();
};
});
}
/**
* Configure rage shaking support for sending bug reports.
* Modifies globals.
* @param {boolean} setUpPersistence When true (default), the persistence will
* be set up immediately for the logs.
* @return {Promise} Resolves when set up.
*/
export function init(setUpPersistence = true) {
if (global.mx_rage_initPromise) {
return global.mx_rage_initPromise;
}
global.mx_rage_logger = new ConsoleLogger();
global.mx_rage_logger.monkeyPatch(window.console);
if (setUpPersistence) {
return tryInitStorage();
}
global.mx_rage_initPromise = Promise.resolve();
return global.mx_rage_initPromise;
}
/**
* Try to start up the rageshake storage for logs. If not possible (client unsupported)
* then this no-ops.
* @return {Promise} Resolves when complete.
*/
export function tryInitStorage() {
if (global.mx_rage_initStoragePromise) {
return global.mx_rage_initStoragePromise;
}
logger.log("Configuring rageshake persistence...");
// just *accessing* indexedDB throws an exception in firefox with
// indexeddb disabled.
let indexedDB;
try {
indexedDB = window.indexedDB;
} catch (e) {}
if (indexedDB) {
global.mx_rage_store = new IndexedDBLogStore(
indexedDB,
global.mx_rage_logger
);
global.mx_rage_initStoragePromise = global.mx_rage_store.connect();
return global.mx_rage_initStoragePromise;
}
global.mx_rage_initStoragePromise = Promise.resolve();
return global.mx_rage_initStoragePromise;
}
export function flush() {
if (!global.mx_rage_store) {
return;
}
global.mx_rage_store.flush();
}
/**
* Clean up old logs.
* @return {Promise} Resolves if cleaned logs.
*/
export async function cleanup() {
if (!global.mx_rage_store) {
return;
}
await global.mx_rage_store.consume();
}
/**
* Get a recent snapshot of the logs, ready for attaching to a bug report
*
* @return {Array<{lines: string, id, string}>} list of log data
*/
export async function getLogsForReport() {
if (!global.mx_rage_logger) {
throw new Error("No console logger, did you forget to call init()?");
}
// If in incognito mode, store is null, but we still want bug report
// sending to work going off the in-memory console logs.
if (global.mx_rage_store) {
// flush most recent logs
await global.mx_rage_store.flush();
return await global.mx_rage_store.consume();
} else {
return [
{
lines: global.mx_rage_logger.flush(true),
id: "-",
},
];
}
}

View file

@ -0,0 +1,300 @@
import { useCallback, useContext, useEffect, useState } from "react";
import { getLogsForReport } from "./rageshake";
import pako from "pako";
import { useClient } from "../ClientContext";
import { InspectorContext } from "../room/GroupCallInspector";
import { useModalTriggerState } from "../Modal";
export function useSubmitRageshake() {
const { client } = useClient();
const [{ json }] = useContext(InspectorContext);
const [{ sending, sent, error }, setState] = useState({
sending: false,
sent: false,
error: null,
});
const submitRageshake = useCallback(
async (opts) => {
if (sending) {
return;
}
try {
setState({ sending: true, sent: false, error: null });
let userAgent = "UNKNOWN";
if (window.navigator && window.navigator.userAgent) {
userAgent = window.navigator.userAgent;
}
let touchInput = "UNKNOWN";
try {
// MDN claims broad support across browsers
touchInput = String(window.matchMedia("(pointer: coarse)").matches);
} catch (e) {}
const body = new FormData();
body.append(
"text",
opts.description || "User did not supply any additional text."
);
body.append("app", "matrix-video-chat");
body.append("version", import.meta.env.VITE_APP_VERSION || "dev");
body.append("user_agent", userAgent);
body.append("installed_pwa", false);
body.append("touch_input", touchInput);
if (client) {
const userId = client.getUserId();
const user = client.getUser(userId);
body.append("display_name", user?.displayName);
body.append("user_id", client.credentials.userId);
body.append("device_id", client.deviceId);
if (opts.roomId) {
body.append("room_id", opts.roomId);
}
if (client.isCryptoEnabled()) {
const keys = [`ed25519:${client.getDeviceEd25519Key()}`];
if (client.getDeviceCurve25519Key) {
keys.push(`curve25519:${client.getDeviceCurve25519Key()}`);
}
body.append("device_keys", keys.join(", "));
body.append("cross_signing_key", client.getCrossSigningId());
// add cross-signing status information
const crossSigning = client.crypto.crossSigningInfo;
const secretStorage = client.crypto.secretStorage;
body.append(
"cross_signing_ready",
String(await client.isCrossSigningReady())
);
body.append(
"cross_signing_supported_by_hs",
String(
await client.doesServerSupportUnstableFeature(
"org.matrix.e2e_cross_signing"
)
)
);
body.append("cross_signing_key", crossSigning.getId());
body.append(
"cross_signing_privkey_in_secret_storage",
String(
!!(await crossSigning.isStoredInSecretStorage(secretStorage))
)
);
const pkCache = client.getCrossSigningCacheCallbacks();
body.append(
"cross_signing_master_privkey_cached",
String(
!!(pkCache && (await pkCache.getCrossSigningKeyCache("master")))
)
);
body.append(
"cross_signing_self_signing_privkey_cached",
String(
!!(
pkCache &&
(await pkCache.getCrossSigningKeyCache("self_signing"))
)
)
);
body.append(
"cross_signing_user_signing_privkey_cached",
String(
!!(
pkCache &&
(await pkCache.getCrossSigningKeyCache("user_signing"))
)
)
);
body.append(
"secret_storage_ready",
String(await client.isSecretStorageReady())
);
body.append(
"secret_storage_key_in_account",
String(!!(await secretStorage.hasKey()))
);
body.append(
"session_backup_key_in_secret_storage",
String(!!(await client.isKeyBackupKeyStored()))
);
const sessionBackupKeyFromCache =
await client.crypto.getSessionBackupPrivateKey();
body.append(
"session_backup_key_cached",
String(!!sessionBackupKeyFromCache)
);
body.append(
"session_backup_key_well_formed",
String(sessionBackupKeyFromCache instanceof Uint8Array)
);
}
}
if (opts.label) {
body.append("label", opts.label);
}
// add storage persistence/quota information
if (navigator.storage && navigator.storage.persisted) {
try {
body.append(
"storageManager_persisted",
String(await navigator.storage.persisted())
);
} catch (e) {}
} else if (document.hasStorageAccess) {
// Safari
try {
body.append(
"storageManager_persisted",
String(await document.hasStorageAccess())
);
} catch (e) {}
}
if (navigator.storage && navigator.storage.estimate) {
try {
const estimate = await navigator.storage.estimate();
body.append("storageManager_quota", String(estimate.quota));
body.append("storageManager_usage", String(estimate.usage));
if (estimate.usageDetails) {
Object.keys(estimate.usageDetails).forEach((k) => {
body.append(
`storageManager_usage_${k}`,
String(estimate.usageDetails[k])
);
});
}
} catch (e) {}
}
if (opts.sendLogs) {
const logs = await getLogsForReport();
for (const entry of logs) {
// encode as UTF-8
let buf = new TextEncoder().encode(entry.lines);
// compress
buf = pako.gzip(buf);
body.append("compressed-log", new Blob([buf]), entry.id);
}
if (json) {
body.append(
"file",
new Blob([JSON.stringify(json)], { type: "text/plain" }),
"groupcall.txt"
);
}
}
if (opts.rageshakeRequestId) {
body.append(
"group_call_rageshake_request_id",
opts.rageshakeRequestId
);
}
await fetch(
import.meta.env.VITE_RAGESHAKE_SUBMIT_URL ||
"https://element.io/bugreports/submit",
{
method: "POST",
body,
}
);
setState({ sending: false, sent: true, error: null });
} catch (error) {
setState({ sending: false, sent: false, error });
console.error(error);
}
},
[client]
);
return {
submitRageshake,
sending,
sent,
error,
};
}
export function useDownloadDebugLog() {
const [{ json }] = useContext(InspectorContext);
const downloadDebugLog = useCallback(() => {
const blob = new Blob([JSON.stringify(json)], { type: "application/json" });
const url = URL.createObjectURL(blob);
const el = document.createElement("a");
el.href = url;
el.download = "groupcall.json";
el.style.display = "none";
document.body.appendChild(el);
el.click();
setTimeout(() => {
URL.revokeObjectURL(url);
el.parentNode.removeChild(el);
}, 0);
}, [json]);
return downloadDebugLog;
}
export function useRageshakeRequest() {
const { client } = useClient();
const sendRageshakeRequest = useCallback(
(roomId, rageshakeRequestId) => {
client.sendEvent(roomId, "org.matrix.rageshake_request", {
request_id: rageshakeRequestId,
});
},
[client]
);
return sendRageshakeRequest;
}
export function useRageshakeRequestModal(roomId) {
const { modalState, modalProps } = useModalTriggerState();
const { client } = useClient();
const [rageshakeRequestId, setRageshakeRequestId] = useState();
useEffect(() => {
const onEvent = (event) => {
const type = event.getType();
if (
type === "org.matrix.rageshake_request" &&
roomId === event.getRoomId() &&
client.getUserId() !== event.getSender()
) {
setRageshakeRequestId(event.getContent().request_id);
modalState.open();
}
};
client.on("event", onEvent);
return () => {
client.removeListener("event", onEvent);
};
}, [modalState.open, roomId]);
return { modalState, modalProps: { ...modalProps, rageshakeRequestId } };
}

1017
src/video-grid/VideoGrid.jsx Normal file

File diff suppressed because it is too large Load diff

View file

@ -0,0 +1,7 @@
.videoGrid {
position: relative;
overflow: hidden;
flex: 1;
touch-action: none;
}

View file

@ -1,9 +1,6 @@
import React, { useState } from "react";
import VideoGrid, {
useVideoGridLayout,
} from "matrix-react-sdk/src/components/views/voip/GroupCallView/VideoGrid";
import VideoTile from "matrix-react-sdk/src/components/views/voip/GroupCallView/VideoTile";
import "matrix-react-sdk/res/css/views/voip/GroupCallView/_VideoGrid.scss";
import { VideoGrid, useVideoGridLayout } from "./VideoGrid";
import { VideoTile } from "./VideoTile";
import { useMemo } from "react";
import { Button } from "../button";

View file

@ -0,0 +1,54 @@
import React from "react";
import { animated } from "@react-spring/web";
import classNames from "classnames";
import styles from "./VideoTile.module.css";
import { ReactComponent as MicMutedIcon } from "../icons/MicMuted.svg";
import { ReactComponent as VideoMutedIcon } from "../icons/VideoMuted.svg";
export function VideoTile({
className,
isLocal,
speaking,
audioMuted,
noVideo,
videoMuted,
screenshare,
avatar,
name,
showName,
mediaRef,
...rest
}) {
return (
<animated.div
className={classNames(styles.videoTile, className, {
[styles.isLocal]: isLocal,
[styles.speaking]: speaking,
[styles.muted]: audioMuted,
[styles.screenshare]: screenshare,
})}
{...rest}
>
{(videoMuted || noVideo) && (
<>
<div className={styles.videoMutedOverlay} />
{avatar}
</>
)}
{screenshare ? (
<div className={styles.presenterLabel}>
<span>{`${name} is presenting`}</span>
</div>
) : (
(showName || audioMuted || (videoMuted && !noVideo)) && (
<div className={styles.memberName}>
{audioMuted && !(videoMuted && !noVideo) && <MicMutedIcon />}
{videoMuted && !noVideo && <VideoMutedIcon />}
{showName && <span title={name}>{name}</span>}
</div>
)
)}
<video ref={mediaRef} playsInline disablePictureInPicture />
</animated.div>
);
}

View file

@ -0,0 +1,113 @@
.videoTile {
position: absolute;
will-change: transform, width, height, opacity, box-shadow;
border-radius: 20px;
overflow: hidden;
cursor: pointer;
touch-action: none;
}
.videoTile * {
touch-action: none;
-moz-user-select: none;
-webkit-user-drag: none;
user-select: none;
}
.videoTile video {
width: 100%;
height: 100%;
object-fit: cover;
background-color: #444;
}
.videoTile.isLocal:not(.screenshare) video {
transform: scaleX(-1);
}
.videoTile.speaking::after {
position: absolute;
top: -1px;
left: -1px;
right: -1px;
bottom: -1px;
content: "";
border-radius: 20px;
box-shadow: inset 0 0 0 4px #0dbd8b !important;
}
.videoTile.screenshare > video {
object-fit: contain;
}
.memberName {
position: absolute;
bottom: 16px;
left: 16px;
height: 24px;
padding: 0 8px;
color: white;
background-color: rgba(23, 25, 28, 0.85);
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
user-select: none;
max-width: calc(100% - 48px);
overflow: hidden;
z-index: 1;
}
.memberName > * {
margin-right: 6px;
}
.memberName > :last-child {
margin-right: 0px;
}
.memberName span {
font-size: 12px;
font-weight: 400;
line-height: 16px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.videoMutedAvatar {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.videoMutedOverlay {
width: 100%;
height: 100%;
background-color: #21262C;
}
.presenterLabel {
position: absolute;
top: 20px;
left: 50%;
transform: translateX(-50%);
background-color: #17191C;
border-radius: 4px;
display: flex;
justify-content: center;
align-items: center;
padding: 4px 8px;
font-weight: normal;
font-size: 12px;
line-height: 15px;
}
.screensharePIP {
bottom: 8px;
right: 8px;
width: 25%;
max-width: 360px;
border-radius: 20px;
}

View file

@ -0,0 +1,49 @@
import { SDPStreamMetadataPurpose } from "matrix-js-sdk/src/webrtc/callEventTypes";
import React from "react";
import { useCallFeed } from "./useCallFeed";
import { useMediaStream } from "./useMediaStream";
import { useRoomMemberName } from "./useRoomMemberName";
import { VideoTile } from "./VideoTile";
export function VideoTileContainer({
item,
width,
height,
getAvatar,
showName,
audioOutputDevice,
disableSpeakingIndicator,
...rest
}) {
const {
isLocal,
audioMuted,
videoMuted,
noVideo,
speaking,
stream,
purpose,
member,
} = useCallFeed(item.callFeed);
const { rawDisplayName } = useRoomMemberName(member);
const mediaRef = useMediaStream(stream, audioOutputDevice, isLocal);
// Firefox doesn't respect the disablePictureInPicture attribute
// https://bugzilla.mozilla.org/show_bug.cgi?id=1611831
return (
<VideoTile
isLocal={isLocal}
speaking={speaking && !disableSpeakingIndicator}
audioMuted={audioMuted}
noVideo={noVideo}
videoMuted={videoMuted}
screenshare={purpose === SDPStreamMetadataPurpose.Screenshare}
name={rawDisplayName}
showName={showName}
mediaRef={mediaRef}
avatar={getAvatar && getAvatar(member, width, height)}
{...rest}
/>
);
}

View file

@ -0,0 +1,56 @@
import { useState, useEffect } from "react";
import { CallFeedEvent } from "matrix-js-sdk/src/webrtc/callFeed";
function getCallFeedState(callFeed) {
return {
member: callFeed ? callFeed.getMember() : null,
isLocal: callFeed ? callFeed.isLocal() : false,
speaking: callFeed ? callFeed.isSpeaking() : false,
noVideo: callFeed
? !callFeed.stream || callFeed.stream.getVideoTracks().length === 0
: true,
videoMuted: callFeed ? callFeed.isVideoMuted() : true,
audioMuted: callFeed ? callFeed.isAudioMuted() : true,
stream: callFeed ? callFeed.stream : undefined,
purpose: callFeed ? callFeed.purpose : undefined,
};
}
export function useCallFeed(callFeed) {
const [state, setState] = useState(() => getCallFeedState(callFeed));
useEffect(() => {
function onSpeaking(speaking) {
setState((prevState) => ({ ...prevState, speaking }));
}
function onMuteStateChanged(audioMuted, videoMuted) {
setState((prevState) => ({ ...prevState, audioMuted, videoMuted }));
}
function onUpdateCallFeed() {
setState(getCallFeedState(callFeed));
}
if (callFeed) {
callFeed.on(CallFeedEvent.Speaking, onSpeaking);
callFeed.on(CallFeedEvent.MuteStateChanged, onMuteStateChanged);
callFeed.on(CallFeedEvent.NewStream, onUpdateCallFeed);
}
onUpdateCallFeed();
return () => {
if (callFeed) {
callFeed.removeListener(CallFeedEvent.Speaking, onSpeaking);
callFeed.removeListener(
CallFeedEvent.MuteStateChanged,
onMuteStateChanged
);
callFeed.removeListener(CallFeedEvent.NewStream, onUpdateCallFeed);
}
};
}, [callFeed]);
return state;
}

View file

@ -0,0 +1,48 @@
import { useRef, useEffect } from "react";
export function useMediaStream(stream, audioOutputDevice, mute = false) {
const mediaRef = useRef();
useEffect(() => {
console.log(
`useMediaStream update stream mediaRef.current ${!!mediaRef.current} stream ${
stream && stream.id
}`
);
if (mediaRef.current) {
if (stream) {
mediaRef.current.muted = mute;
mediaRef.current.srcObject = stream;
mediaRef.current.play();
} else {
mediaRef.current.srcObject = null;
}
}
}, [stream, mute]);
useEffect(() => {
if (
mediaRef.current &&
audioOutputDevice &&
mediaRef.current !== undefined
) {
console.log(`useMediaStream setSinkId ${audioOutputDevice}`);
mediaRef.current.setSinkId(audioOutputDevice);
}
}, [audioOutputDevice]);
useEffect(() => {
const mediaEl = mediaRef.current;
return () => {
if (mediaEl) {
// Ensure we set srcObject to null before unmounting to prevent memory leak
// https://webrtchacks.com/srcobject-intervention/
mediaEl.srcObject = null;
}
};
}, []);
return mediaRef;
}

View file

@ -0,0 +1,24 @@
import { useState, useEffect } from "react";
export function useRoomMemberName(member) {
const [state, setState] = useState({
name: member.name,
rawDisplayName: member.rawDisplayName,
});
useEffect(() => {
function updateName() {
setState({ name: member.name, rawDisplayName: member.rawDisplayName });
}
updateName();
member.on("RoomMember.name", updateName);
return () => {
member.removeListener("RoomMember.name", updateName);
};
}, [member]);
return state;
}

View file

@ -36,16 +36,8 @@ export default defineConfig(({ mode }) => {
proxy: {
"/_matrix": env.VITE_DEFAULT_HOMESERVER || "http://localhost:8008",
},
fs: {
// Current we're bundling files linked in from matrix-react-sdk
// We should re-enable this if we plan to run Vite outside the dev server mode
strict: false,
},
},
resolve: {
alias: {
"$(res)": path.resolve(__dirname, "node_modules/matrix-react-sdk/res"),
},
dedupe: [
"react",
"react-dom",

943
yarn.lock

File diff suppressed because it is too large Load diff