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

Remove dependency on matrix-react-sdk

.storybook/main.js

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

Dockerfile

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

README.md

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

package.json

@@ -18,18 +18,20 @@
     "@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",
     "@react-stately/tooltip": "^3.0.5",
     "@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",

scripts/dockerbuild.sh

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

src/main.jsx

@@ -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"}`);
 

src/room/FeedbackModal.jsx

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

src/room/GroupCallView.jsx

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

src/room/InCallView.jsx

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

src/room/LobbyView.jsx

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

src/room/RageshakeRequestModal.jsx

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

src/room/RoomPage.jsx

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