diff --git a/package.json b/package.json index f55feb6b..9287a931 100644 --- a/package.json +++ b/package.json @@ -38,7 +38,7 @@ "classnames": "^2.3.1", "color-hash": "^2.0.1", "events": "^3.3.0", - "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#984dd26a138411ef73903ff4e635f2752e0829f2", + "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#8ba2d257ae24bbed61cd7fe99af081324337161c", "matrix-widget-api": "^0.1.0-beta.18", "mermaid": "^8.13.8", "normalize.css": "^8.0.1", diff --git a/src/App.jsx b/src/App.jsx index 3c882c51..1782f69e 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -26,37 +26,45 @@ import { RoomRedirect } from "./room/RoomRedirect"; import { ClientProvider } from "./ClientContext"; import { usePageFocusStyle } from "./usePageFocusStyle"; import { SequenceDiagramViewerPage } from "./SequenceDiagramViewerPage"; +import { InspectorContextProvider } from "./room/GroupCallInspector"; +import { CrashView } from "./FullScreenView"; const SentryRoute = Sentry.withSentryRouting(Route); export default function App({ history }) { usePageFocusStyle(); + const errorPage = ; + return ( - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + ); diff --git a/src/FullScreenView.jsx b/src/FullScreenView.jsx index fc252868..6dd71277 100644 --- a/src/FullScreenView.jsx +++ b/src/FullScreenView.jsx @@ -4,6 +4,8 @@ import styles from "./FullScreenView.module.css"; import { Header, HeaderLogo, LeftNav, RightNav } from "./Header"; import classNames from "classnames"; import { LinkButton, Button } from "./button"; +import { useSubmitRageshake } from "./settings/submit-rageshake"; +import { ErrorMessage } from "./input/Input"; export function FullScreenView({ className, children }) { return ( @@ -59,6 +61,56 @@ export function ErrorView({ error }) { ); } +export function CrashView() { + const { submitRageshake, sending, sent, error } = useSubmitRageshake(); + + const sendDebugLogs = useCallback(() => { + submitRageshake({ + description: "**Soft Crash**", + sendLogs: true, + }); + }, [submitRageshake]); + + const onReload = useCallback(() => { + window.location = "/"; + }, []); + + let logsComponent; + if (sent) { + logsComponent =
Thanks! We'll get right on it.
; + } else if (sending) { + logsComponent =
Sending...
; + } else { + logsComponent = ( + + ); + } + + return ( + +

Oops, something's gone wrong.

+

Submitting debug logs will help us track down the problem.

+
{logsComponent}
+ {error && Couldn't send debug logs!} + + + ); +} + export function LoadingView() { return ( diff --git a/src/FullScreenView.module.css b/src/FullScreenView.module.css index f30d9f6c..9d8fc665 100644 --- a/src/FullScreenView.module.css +++ b/src/FullScreenView.module.css @@ -36,6 +36,12 @@ margin-bottom: 0; } -.homeLink { +/* Make the buttons the same width */ +.wideButton { width: 291px; } + +/* Fixed height to avoid content jumping around*/ +.sendLogsSection { + height: 50px; +} diff --git a/src/button/Button.tsx b/src/button/Button.tsx index 83e3697c..bd7a0dd4 100644 --- a/src/button/Button.tsx +++ b/src/button/Button.tsx @@ -30,6 +30,7 @@ import { ReactComponent as SettingsIcon } from "../icons/Settings.svg"; import { ReactComponent as AddUserIcon } from "../icons/AddUser.svg"; import { ReactComponent as ArrowDownIcon } from "../icons/ArrowDown.svg"; import { TooltipTrigger } from "../Tooltip"; +import { ReactComponent as OverflowIcon } from "../icons/Overflow.svg"; export type ButtonVariant = | "default" @@ -237,3 +238,14 @@ export function InviteButton({ ); } + +export function OptionsButton(props: Omit) { + return ( + + + {() => "Options"} + + ); +} diff --git a/src/main.tsx b/src/main.tsx index 50aa6cd4..2330bedc 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -28,9 +28,7 @@ import { Integrations } from "@sentry/tracing"; import "./index.css"; import App from "./App"; -import { ErrorView } from "./FullScreenView"; import { init as initRageshake } from "./settings/rageshake"; -import { InspectorContextProvider } from "./room/GroupCallInspector"; initRageshake(); @@ -104,11 +102,7 @@ Sentry.init({ ReactDOM.render( - - - - - + , document.getElementById("root") ); diff --git a/src/room/useGroupCall.ts b/src/room/useGroupCall.ts index b3697ccf..1e01ad5c 100644 --- a/src/room/useGroupCall.ts +++ b/src/room/useGroupCall.ts @@ -302,9 +302,11 @@ export function useGroupCall(groupCall: GroupCall): UseGroupCallType { const toggleScreensharing = useCallback(() => { updateState({ requestingScreenshare: true }); - groupCall.setScreensharingEnabled(!groupCall.isScreensharing()).then(() => { - updateState({ requestingScreenshare: false }); - }); + groupCall + .setScreensharingEnabled(!groupCall.isScreensharing(), { audio: true }) + .then(() => { + updateState({ requestingScreenshare: false }); + }); }, [groupCall]); useEffect(() => { diff --git a/src/video-grid/VideoTile.jsx b/src/video-grid/VideoTile.jsx index 2dd41921..206f8a46 100644 --- a/src/video-grid/VideoTile.jsx +++ b/src/video-grid/VideoTile.jsx @@ -20,6 +20,7 @@ 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"; +import { OptionsButton } from "../button/Button"; export const VideoTile = forwardRef( ( @@ -35,6 +36,8 @@ export const VideoTile = forwardRef( name, showName, mediaRef, + onOptionsPress, + showOptions, ...rest }, ref @@ -62,13 +65,18 @@ export const VideoTile = forwardRef( ) : ( (showName || audioMuted || (videoMuted && !noVideo)) && ( -
+
{audioMuted && !(videoMuted && !noVideo) && } {videoMuted && !noVideo && } {showName && {name}}
) )} + {showOptions && ( +
+ +
+ )}