From c4a626b53055d109b4c172a6aec660e54c966a3b Mon Sep 17 00:00:00 2001 From: Robert Long Date: Wed, 29 Sep 2021 10:50:39 -0700 Subject: [PATCH] Use matrix-react-sdk directly --- package-lock.json | 541 +++++++++++++++++++++++++++++- package.json | 2 + src/ConferenceCallManagerHooks.js | 2 +- src/Room.jsx | 291 ++++++++-------- 4 files changed, 672 insertions(+), 164 deletions(-) diff --git a/package-lock.json b/package-lock.json index 63f6ade4..b9f5b897 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,12 +13,14 @@ "events": "^3.3.0", "lodash-move": "^1.1.1", "matrix-js-sdk": "file:../matrix-js-sdk", + "matrix-react-sdk": "file:../matrix-react-sdk", "re-resizable": "^6.9.0", "react": "^17.0.0", "react-dom": "^17.0.0", "react-router-dom": "^5.2.0", "react-use-gesture": "^9.1.3", "react-use-measure": "^2.0.4", + "sass": "^1.42.1", "vite-plugin-svgr": "^0.4.0" }, "devDependencies": { @@ -27,7 +29,7 @@ } }, "../matrix-js-sdk": { - "version": "12.4.0", + "version": "13.0.0", "license": "Apache-2.0", "dependencies": { "@babel/runtime": "^7.12.5", @@ -82,6 +84,142 @@ "typescript": "^4.1.3" } }, + "../matrix-react-sdk": { + "version": "3.31.0", + "license": "Apache-2.0", + "dependencies": { + "@babel/runtime": "^7.12.5", + "@react-spring/web": "^9.2.4", + "@sentry/browser": "^6.11.0", + "@sentry/tracing": "^6.11.0", + "await-lock": "^2.1.0", + "blurhash": "^1.1.3", + "browser-encrypt-attachment": "^0.3.0", + "browser-request": "^0.3.3", + "cheerio": "^1.0.0-rc.9", + "classnames": "^2.2.6", + "commonmark": "^0.29.3", + "counterpart": "^0.18.6", + "diff-dom": "^4.2.2", + "diff-match-patch": "^1.0.5", + "emojibase-data": "^6.2.0", + "emojibase-regex": "^5.1.3", + "escape-html": "^1.0.3", + "file-saver": "^2.0.5", + "filesize": "6.1.0", + "flux": "2.1.1", + "focus-visible": "^5.2.0", + "gfm.css": "^1.1.2", + "glob-to-regexp": "^0.4.1", + "highlight.js": "^10.5.0", + "html-entities": "^1.4.0", + "is-ip": "^3.1.0", + "katex": "^0.12.0", + "linkifyjs": "^2.1.9", + "lodash": "^4.17.20", + "lodash-move": "^1.1.1", + "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#develop", + "matrix-widget-api": "^0.1.0-beta.16", + "minimist": "^1.2.5", + "opus-recorder": "^8.0.3", + "pako": "^2.0.3", + "parse5": "^6.0.1", + "png-chunks-extract": "^1.0.0", + "posthog-js": "1.12.2", + "prop-types": "^15.7.2", + "qrcode": "^1.4.4", + "re-resizable": "^6.9.0", + "react": "17.0.2", + "react-beautiful-dnd": "^13.1.0", + "react-blurhash": "^0.1.3", + "react-dom": "17.0.2", + "react-focus-lock": "^2.5.0", + "react-transition-group": "^4.4.1", + "react-use-gesture": "^9.1.3", + "react-use-measure": "^2.0.4", + "resize-observer-polyfill": "^1.5.1", + "rfc4648": "^1.4.0", + "sanitize-html": "^2.3.2", + "tar-js": "^0.3.0", + "url": "^0.11.0", + "what-input": "^5.2.10", + "zxcvbn": "^4.4.2" + }, + "bin": { + "reskindex": "scripts/reskindex.js" + }, + "devDependencies": { + "@babel/cli": "^7.12.10", + "@babel/core": "^7.12.10", + "@babel/eslint-parser": "^7.12.10", + "@babel/eslint-plugin": "^7.12.10", + "@babel/parser": "^7.12.11", + "@babel/plugin-proposal-class-properties": "^7.12.1", + "@babel/plugin-proposal-decorators": "^7.12.12", + "@babel/plugin-proposal-export-default-from": "^7.12.1", + "@babel/plugin-proposal-numeric-separator": "^7.12.7", + "@babel/plugin-proposal-object-rest-spread": "^7.12.1", + "@babel/plugin-transform-runtime": "^7.12.10", + "@babel/preset-env": "^7.12.11", + "@babel/preset-react": "^7.12.10", + "@babel/preset-typescript": "^7.12.7", + "@babel/register": "^7.12.10", + "@babel/traverse": "^7.12.12", + "@matrix-org/olm": "https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.3.tgz", + "@peculiar/webcrypto": "^1.1.4", + "@sentry/types": "^6.10.0", + "@sinonjs/fake-timers": "^7.0.2", + "@types/classnames": "^2.2.11", + "@types/commonmark": "^0.27.4", + "@types/counterpart": "^0.18.1", + "@types/css-font-loading-module": "^0.0.6", + "@types/diff-match-patch": "^1.0.32", + "@types/flux": "^3.1.9", + "@types/jest": "^26.0.20", + "@types/linkifyjs": "^2.1.3", + "@types/lodash": "^4.14.168", + "@types/modernizr": "^3.5.3", + "@types/node": "^14.14.22", + "@types/pako": "^1.0.1", + "@types/parse5": "^6.0.0", + "@types/qrcode": "^1.3.5", + "@types/react": "17.0.14", + "@types/react-beautiful-dnd": "^13.0.0", + "@types/react-dom": "17.0.9", + "@types/react-transition-group": "^4.4.0", + "@types/sanitize-html": "^2.3.1", + "@types/zxcvbn": "^4.4.0", + "@typescript-eslint/eslint-plugin": "^4.17.0", + "@typescript-eslint/parser": "^4.17.0", + "@wojtekmaj/enzyme-adapter-react-17": "^0.6.1", + "allchange": "^1.0.3", + "babel-jest": "^26.6.3", + "chokidar": "^3.5.1", + "concurrently": "^5.3.0", + "enzyme": "^3.11.0", + "eslint": "7.18.0", + "eslint-config-google": "^0.14.0", + "eslint-plugin-matrix-org": "github:matrix-org/eslint-plugin-matrix-org#2306b3d4da4eba908b256014b979f1d3d43d2945", + "eslint-plugin-react": "^7.22.0", + "eslint-plugin-react-hooks": "^4.2.0", + "glob": "^7.1.6", + "jest": "^26.6.3", + "jest-canvas-mock": "^2.3.0", + "jest-environment-jsdom-sixteen": "^1.0.3", + "jest-fetch-mock": "^3.0.3", + "matrix-mock-request": "^1.2.3", + "matrix-react-test-utils": "^0.2.3", + "matrix-web-i18n": "github:matrix-org/matrix-web-i18n", + "react-test-renderer": "^17.0.2", + "rimraf": "^3.0.2", + "rrweb-snapshot": "1.1.7", + "stylelint": "^13.9.0", + "stylelint-config-standard": "^20.0.0", + "stylelint-scss": "^3.18.0", + "typescript": "4.3.5", + "walk": "^2.3.14" + } + }, "node_modules/@babel/code-frame": { "version": "7.14.5", "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.14.5.tgz", @@ -708,6 +846,37 @@ "node": ">=4" } }, + "node_modules/anymatch": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz", + "integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==", + "dependencies": { + "normalize-path": "^3.0.0", + "picomatch": "^2.0.4" + }, + "engines": { + "node": ">= 8" + } + }, + "node_modules/binary-extensions": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz", + "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==", + "engines": { + "node": ">=8" + } + }, + "node_modules/braces": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz", + "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==", + "dependencies": { + "fill-range": "^7.0.1" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/browserslist": { "version": "4.16.6", "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.16.6.tgz", @@ -771,6 +940,26 @@ "node": ">=4" } }, + "node_modules/chokidar": { + "version": "3.5.2", + "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.2.tgz", + "integrity": "sha512-ekGhOnNVPgT77r4K/U3GDhu+FQ2S8TnK/s2KbIGXi0SZWuwkZ2QNyfWdZW+TVfn84DpEP7rLeCt2UI6bJ8GwbQ==", + "dependencies": { + "anymatch": "~3.1.2", + "braces": "~3.0.2", + "glob-parent": "~5.1.2", + "is-binary-path": "~2.1.0", + "is-glob": "~4.0.1", + "normalize-path": "~3.0.0", + "readdirp": "~3.6.0" + }, + "engines": { + "node": ">= 8.10.0" + }, + "optionalDependencies": { + "fsevents": "~2.3.2" + } + }, "node_modules/classnames": { "version": "2.3.1", "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz", @@ -900,6 +1089,17 @@ "resolved": "https://registry.npmjs.org/fast-memoize/-/fast-memoize-2.5.2.tgz", "integrity": "sha512-Ue0LwpDYErFbmNnZSF0UH6eImUwDmogUO1jyE+JbN2gsQz/jICm1Ve7t9QT0rNSsfJt+Hs4/S3GnsDVjL4HVrw==" }, + "node_modules/fill-range": { + "version": "7.0.1", + "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", + "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==", + "dependencies": { + "to-regex-range": "^5.0.1" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/fsevents": { "version": "2.3.2", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", @@ -926,6 +1126,17 @@ "node": ">=6.9.0" } }, + "node_modules/glob-parent": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", + "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", + "dependencies": { + "is-glob": "^4.0.1" + }, + "engines": { + "node": ">= 6" + } + }, "node_modules/globals": { "version": "11.12.0", "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz", @@ -994,6 +1205,17 @@ "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz", "integrity": "sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=" }, + "node_modules/is-binary-path": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", + "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==", + "dependencies": { + "binary-extensions": "^2.0.0" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/is-core-module": { "version": "2.5.0", "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.5.0.tgz", @@ -1005,6 +1227,33 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/is-extglob": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", + "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/is-glob": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.2.tgz", + "integrity": "sha512-ZZTOjRcDjuAAAv2cTBQP/lL59ZTArx77+7UzHdWW/XB1mrfp7DEaVpKmZ0XIzx+M7AxfhKcqV+nMetUQmFifwg==", + "dependencies": { + "is-extglob": "^2.1.1" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/is-number": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", + "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==", + "engines": { + "node": ">=0.12.0" + } + }, "node_modules/isarray": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz", @@ -1078,6 +1327,10 @@ "resolved": "../matrix-js-sdk", "link": true }, + "node_modules/matrix-react-sdk": { + "resolved": "../matrix-react-sdk", + "link": true + }, "node_modules/mini-create-react-context": { "version": "0.4.1", "resolved": "https://registry.npmjs.org/mini-create-react-context/-/mini-create-react-context-0.4.1.tgz", @@ -1117,6 +1370,14 @@ "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.73.tgz", "integrity": "sha512-uW7fodD6pyW2FZNZnp/Z3hvWKeEW1Y8R1+1CnErE8cXFXzl5blBOoVB41CvMer6P6Q0S5FXDwcHgFd1Wj0U9zg==" }, + "node_modules/normalize-path": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", + "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/object-assign": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", @@ -1178,7 +1439,6 @@ "version": "2.3.0", "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.0.tgz", "integrity": "sha512-lY1Q/PiJGC2zOv/z391WOTD+Z02bCgsFfvxoXXf6h7kv9o+WmsmzYqrAwY63sNgOxE4xEdq0WyUnXfKeBrSvYw==", - "dev": true, "engines": { "node": ">=8.6" }, @@ -1321,6 +1581,17 @@ "react-dom": ">=16.13" } }, + "node_modules/readdirp": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", + "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==", + "dependencies": { + "picomatch": "^2.2.1" + }, + "engines": { + "node": ">=8.10.0" + } + }, "node_modules/regenerator-runtime": { "version": "0.13.7", "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz", @@ -1370,6 +1641,20 @@ "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==" }, + "node_modules/sass": { + "version": "1.42.1", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.42.1.tgz", + "integrity": "sha512-/zvGoN8B7dspKc5mC6HlaygyCBRvnyzzgD5khiaCfglWztY99cYoiTUksVx11NlnemrcfH5CEaCpsUKoW0cQqg==", + "dependencies": { + "chokidar": ">=3.0.0 <4.0.0" + }, + "bin": { + "sass": "sass.js" + }, + "engines": { + "node": ">=8.9.0" + } + }, "node_modules/scheduler": { "version": "0.20.2", "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz", @@ -1437,6 +1722,17 @@ "node": ">=4" } }, + "node_modules/to-regex-range": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", + "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==", + "dependencies": { + "is-number": "^7.0.0" + }, + "engines": { + "node": ">=8.0" + } + }, "node_modules/value-equal": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz", @@ -1902,6 +2198,28 @@ "color-convert": "^1.9.0" } }, + "anymatch": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz", + "integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==", + "requires": { + "normalize-path": "^3.0.0", + "picomatch": "^2.0.4" + } + }, + "binary-extensions": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz", + "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==" + }, + "braces": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz", + "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==", + "requires": { + "fill-range": "^7.0.1" + } + }, "browserslist": { "version": "4.16.6", "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.16.6.tgz", @@ -1939,6 +2257,21 @@ "supports-color": "^5.3.0" } }, + "chokidar": { + "version": "3.5.2", + "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.2.tgz", + "integrity": "sha512-ekGhOnNVPgT77r4K/U3GDhu+FQ2S8TnK/s2KbIGXi0SZWuwkZ2QNyfWdZW+TVfn84DpEP7rLeCt2UI6bJ8GwbQ==", + "requires": { + "anymatch": "~3.1.2", + "braces": "~3.0.2", + "fsevents": "~2.3.2", + "glob-parent": "~5.1.2", + "is-binary-path": "~2.1.0", + "is-glob": "~4.0.1", + "normalize-path": "~3.0.0", + "readdirp": "~3.6.0" + } + }, "classnames": { "version": "2.3.1", "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz", @@ -2044,6 +2377,14 @@ "resolved": "https://registry.npmjs.org/fast-memoize/-/fast-memoize-2.5.2.tgz", "integrity": "sha512-Ue0LwpDYErFbmNnZSF0UH6eImUwDmogUO1jyE+JbN2gsQz/jICm1Ve7t9QT0rNSsfJt+Hs4/S3GnsDVjL4HVrw==" }, + "fill-range": { + "version": "7.0.1", + "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", + "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==", + "requires": { + "to-regex-range": "^5.0.1" + } + }, "fsevents": { "version": "2.3.2", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", @@ -2060,6 +2401,14 @@ "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz", "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==" }, + "glob-parent": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", + "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", + "requires": { + "is-glob": "^4.0.1" + } + }, "globals": { "version": "11.12.0", "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz", @@ -2113,6 +2462,14 @@ "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz", "integrity": "sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=" }, + "is-binary-path": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", + "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==", + "requires": { + "binary-extensions": "^2.0.0" + } + }, "is-core-module": { "version": "2.5.0", "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.5.0.tgz", @@ -2121,6 +2478,24 @@ "has": "^1.0.3" } }, + "is-extglob": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", + "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=" + }, + "is-glob": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.2.tgz", + "integrity": "sha512-ZZTOjRcDjuAAAv2cTBQP/lL59ZTArx77+7UzHdWW/XB1mrfp7DEaVpKmZ0XIzx+M7AxfhKcqV+nMetUQmFifwg==", + "requires": { + "is-extglob": "^2.1.1" + } + }, + "is-number": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", + "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==" + }, "isarray": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz", @@ -2228,6 +2603,136 @@ "unhomoglyph": "^1.0.6" } }, + "matrix-react-sdk": { + "version": "file:../matrix-react-sdk", + "requires": { + "@babel/cli": "^7.12.10", + "@babel/core": "^7.12.10", + "@babel/eslint-parser": "^7.12.10", + "@babel/eslint-plugin": "^7.12.10", + "@babel/parser": "^7.12.11", + "@babel/plugin-proposal-class-properties": "^7.12.1", + "@babel/plugin-proposal-decorators": "^7.12.12", + "@babel/plugin-proposal-export-default-from": "^7.12.1", + "@babel/plugin-proposal-numeric-separator": "^7.12.7", + "@babel/plugin-proposal-object-rest-spread": "^7.12.1", + "@babel/plugin-transform-runtime": "^7.12.10", + "@babel/preset-env": "^7.12.11", + "@babel/preset-react": "^7.12.10", + "@babel/preset-typescript": "^7.12.7", + "@babel/register": "^7.12.10", + "@babel/runtime": "^7.12.5", + "@babel/traverse": "^7.12.12", + "@matrix-org/olm": "https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.3.tgz", + "@peculiar/webcrypto": "^1.1.4", + "@react-spring/web": "^9.2.4", + "@sentry/browser": "^6.11.0", + "@sentry/tracing": "^6.11.0", + "@sentry/types": "^6.10.0", + "@sinonjs/fake-timers": "^7.0.2", + "@types/classnames": "^2.2.11", + "@types/commonmark": "^0.27.4", + "@types/counterpart": "^0.18.1", + "@types/css-font-loading-module": "^0.0.6", + "@types/diff-match-patch": "^1.0.32", + "@types/flux": "^3.1.9", + "@types/jest": "^26.0.20", + "@types/linkifyjs": "^2.1.3", + "@types/lodash": "^4.14.168", + "@types/modernizr": "^3.5.3", + "@types/node": "^14.14.22", + "@types/pako": "^1.0.1", + "@types/parse5": "^6.0.0", + "@types/qrcode": "^1.3.5", + "@types/react": "17.0.14", + "@types/react-beautiful-dnd": "^13.0.0", + "@types/react-dom": "17.0.9", + "@types/react-transition-group": "^4.4.0", + "@types/sanitize-html": "^2.3.1", + "@types/zxcvbn": "^4.4.0", + "@typescript-eslint/eslint-plugin": "^4.17.0", + "@typescript-eslint/parser": "^4.17.0", + "@wojtekmaj/enzyme-adapter-react-17": "^0.6.1", + "allchange": "^1.0.3", + "await-lock": "^2.1.0", + "babel-jest": "^26.6.3", + "blurhash": "^1.1.3", + "browser-encrypt-attachment": "^0.3.0", + "browser-request": "^0.3.3", + "cheerio": "^1.0.0-rc.9", + "chokidar": "^3.5.1", + "classnames": "^2.2.6", + "commonmark": "^0.29.3", + "concurrently": "^5.3.0", + "counterpart": "^0.18.6", + "diff-dom": "^4.2.2", + "diff-match-patch": "^1.0.5", + "emojibase-data": "^6.2.0", + "emojibase-regex": "^5.1.3", + "enzyme": "^3.11.0", + "escape-html": "^1.0.3", + "eslint": "7.18.0", + "eslint-config-google": "^0.14.0", + "eslint-plugin-matrix-org": "github:matrix-org/eslint-plugin-matrix-org#2306b3d4da4eba908b256014b979f1d3d43d2945", + "eslint-plugin-react": "^7.22.0", + "eslint-plugin-react-hooks": "^4.2.0", + "file-saver": "^2.0.5", + "filesize": "6.1.0", + "flux": "2.1.1", + "focus-visible": "^5.2.0", + "gfm.css": "^1.1.2", + "glob": "^7.1.6", + "glob-to-regexp": "^0.4.1", + "highlight.js": "^10.5.0", + "html-entities": "^1.4.0", + "is-ip": "^3.1.0", + "jest": "^26.6.3", + "jest-canvas-mock": "^2.3.0", + "jest-environment-jsdom-sixteen": "^1.0.3", + "jest-fetch-mock": "^3.0.3", + "katex": "^0.12.0", + "linkifyjs": "^2.1.9", + "lodash": "^4.17.20", + "lodash-move": "^1.1.1", + "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#develop", + "matrix-mock-request": "^1.2.3", + "matrix-react-test-utils": "^0.2.3", + "matrix-web-i18n": "github:matrix-org/matrix-web-i18n", + "matrix-widget-api": "^0.1.0-beta.16", + "minimist": "^1.2.5", + "opus-recorder": "^8.0.3", + "pako": "^2.0.3", + "parse5": "^6.0.1", + "png-chunks-extract": "^1.0.0", + "posthog-js": "1.12.2", + "prop-types": "^15.7.2", + "qrcode": "^1.4.4", + "re-resizable": "^6.9.0", + "react": "17.0.2", + "react-beautiful-dnd": "^13.1.0", + "react-blurhash": "^0.1.3", + "react-dom": "17.0.2", + "react-focus-lock": "^2.5.0", + "react-test-renderer": "^17.0.2", + "react-transition-group": "^4.4.1", + "react-use-gesture": "^9.1.3", + "react-use-measure": "^2.0.4", + "resize-observer-polyfill": "^1.5.1", + "rfc4648": "^1.4.0", + "rimraf": "^3.0.2", + "rrweb-snapshot": "1.1.7", + "sanitize-html": "^2.3.2", + "stylelint": "^13.9.0", + "stylelint-config-standard": "^20.0.0", + "stylelint-scss": "^3.18.0", + "tar-js": "^0.3.0", + "typescript": "4.3.5", + "url": "^0.11.0", + "walk": "^2.3.14", + "what-input": "^5.2.10", + "zxcvbn": "^4.4.2" + } + }, "mini-create-react-context": { "version": "0.4.1", "resolved": "https://registry.npmjs.org/mini-create-react-context/-/mini-create-react-context-0.4.1.tgz", @@ -2257,6 +2762,11 @@ "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.73.tgz", "integrity": "sha512-uW7fodD6pyW2FZNZnp/Z3hvWKeEW1Y8R1+1CnErE8cXFXzl5blBOoVB41CvMer6P6Q0S5FXDwcHgFd1Wj0U9zg==" }, + "normalize-path": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", + "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==" + }, "object-assign": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", @@ -2302,8 +2812,7 @@ "picomatch": { "version": "2.3.0", "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.0.tgz", - "integrity": "sha512-lY1Q/PiJGC2zOv/z391WOTD+Z02bCgsFfvxoXXf6h7kv9o+WmsmzYqrAwY63sNgOxE4xEdq0WyUnXfKeBrSvYw==", - "dev": true + "integrity": "sha512-lY1Q/PiJGC2zOv/z391WOTD+Z02bCgsFfvxoXXf6h7kv9o+WmsmzYqrAwY63sNgOxE4xEdq0WyUnXfKeBrSvYw==" }, "postcss": { "version": "8.3.5", @@ -2408,6 +2917,14 @@ "debounce": "^1.2.0" } }, + "readdirp": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", + "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==", + "requires": { + "picomatch": "^2.2.1" + } + }, "regenerator-runtime": { "version": "0.13.7", "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz", @@ -2445,6 +2962,14 @@ "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==" }, + "sass": { + "version": "1.42.1", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.42.1.tgz", + "integrity": "sha512-/zvGoN8B7dspKc5mC6HlaygyCBRvnyzzgD5khiaCfglWztY99cYoiTUksVx11NlnemrcfH5CEaCpsUKoW0cQqg==", + "requires": { + "chokidar": ">=3.0.0 <4.0.0" + } + }, "scheduler": { "version": "0.20.2", "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz", @@ -2497,6 +3022,14 @@ "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=" }, + "to-regex-range": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", + "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==", + "requires": { + "is-number": "^7.0.0" + } + }, "value-equal": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz", diff --git a/package.json b/package.json index b27007b2..b5162d96 100644 --- a/package.json +++ b/package.json @@ -12,12 +12,14 @@ "events": "^3.3.0", "lodash-move": "^1.1.1", "matrix-js-sdk": "file:../matrix-js-sdk", + "matrix-react-sdk": "file:../matrix-react-sdk", "re-resizable": "^6.9.0", "react": "^17.0.0", "react-dom": "^17.0.0", "react-router-dom": "^5.2.0", "react-use-gesture": "^9.1.3", "react-use-measure": "^2.0.4", + "sass": "^1.42.1", "vite-plugin-svgr": "^0.4.0" }, "devDependencies": { diff --git a/src/ConferenceCallManagerHooks.js b/src/ConferenceCallManagerHooks.js index b9796add..7c53ee2b 100644 --- a/src/ConferenceCallManagerHooks.js +++ b/src/ConferenceCallManagerHooks.js @@ -15,7 +15,7 @@ limitations under the License. */ import { useCallback, useEffect, useRef, useState } from "react"; -import matrix from "matrix-js-sdk"; +import matrix from "matrix-js-sdk/src/index"; import { ConferenceCallDebugger } from "./ConferenceCallDebugger"; // https://stackoverflow.com/a/9039885 diff --git a/src/Room.jsx b/src/Room.jsx index ae9f1c1d..431877e7 100644 --- a/src/Room.jsx +++ b/src/Room.jsx @@ -14,143 +14,138 @@ See the License for the specific language governing permissions and limitations under the License. */ -import React, { - useEffect, - useMemo, - useState, - useRef, - useCallback, -} from "react"; +import React, { useEffect, useMemo, useState } from "react"; import styles from "./Room.module.css"; -import { useParams, useLocation, useHistory, Link } from "react-router-dom"; -import { useGroupCall } from "./ConferenceCallManagerHooks"; -import { DevTools } from "./DevTools"; -import { VideoGrid } from "./VideoGrid"; +import { useParams } from "react-router-dom"; import { HangupButton, - SettingsButton, MicButton, VideoButton, LayoutToggleButton, } from "./RoomButton"; import { Header, LeftNav, RightNav, CenterNav } from "./Header"; -import { Button, FieldRow, InputField, ErrorMessage } from "./Input"; -import { Center, Content, Info, Modal } from "./Layout"; +import { Button, ErrorMessage } from "./Input"; +import { + GroupCallIntent, + GroupCallState, + GroupCallType, +} from "matrix-js-sdk/src/webrtc/groupCall"; +import VideoGrid from "matrix-react-sdk/src/components/views/voip/GroupCallView/VideoGrid"; +import "matrix-react-sdk/res/css/views/voip/GroupCallView/_VideoGrid.scss"; +import { useGroupCall } from "matrix-react-sdk/src/hooks/useGroupCall"; +import { useCallFeed } from "matrix-react-sdk/src/hooks/useCallFeed"; +import { useMediaStream } from "matrix-react-sdk/src/hooks/useMediaStream"; +import { fetchRoom } from "./ConferenceCallManagerHooks"; -function useQuery() { - const location = useLocation(); - return useMemo(() => new URLSearchParams(location.search), [location.search]); -} - -function useDebugMode() { - const query = useQuery(); - const debugStr = query.get("debug"); - const debugEnabled = query.has("debug"); - const [debugMode, setDebugMode] = useState( - debugStr === "" || debugStr === "true" - ); - - const toggleDebugMode = useCallback(() => { - setDebugMode((prevDebugMode) => !prevDebugMode); - }, []); +function useLoadGroupCall(client, roomId) { + const [state, setState] = useState({ + loading: true, + error: undefined, + groupCall: undefined, + }); useEffect(() => { - function onKeyDown(event) { - if ( - document.activeElement.tagName !== "input" && - event.code === "Backquote" - ) { - toggleDebugMode(); + async function load() { + await fetchRoom(client, roomId); + + let groupCall = client.getGroupCallForRoom(roomId); + + if (!groupCall) { + groupCall = await client.createGroupCall( + roomId, + GroupCallType.Video, + GroupCallIntent.Prompt + ); } + + return groupCall; } - window.addEventListener("keydown", onKeyDown); + setState({ loading: true }); - return () => { - window.removeEventListener("keydown", onKeyDown); - }; - }, []); + load() + .then((groupCall) => setState({ loading: false, groupCall })) + .catch((error) => setState({ loading: false, error })); + }, [roomId]); - return { debugEnabled, debugMode, toggleDebugMode }; -} - -function useRoomLayout() { - const [layout, setLayout] = useState("gallery"); - - const toggleLayout = useCallback(() => { - setLayout(layout === "spotlight" ? "gallery" : "spotlight"); - }, [layout]); - - return [layout, toggleLayout]; + return state; } export function Room({ client }) { - const { debugEnabled, debugMode, toggleDebugMode } = useDebugMode(); const { roomId } = useParams(); + const { loading, error, groupCall } = useLoadGroupCall(client, roomId); + + if (loading) { + return ( +
+ +
+ ); + } + + if (error) { + return ( +
+ +
+ ); + } + + return ( +
+ +
+ ); +} + +export function GroupCallView({ groupCall }) { const { - loading, - entered, - entering, - roomName, - participants, - groupCall, + state, + error, + activeSpeaker, + userMediaFeeds, microphoneMuted, localVideoMuted, - error, - initLocalParticipant, + localCallFeed, + initLocalCallFeed, enter, leave, toggleLocalVideoMuted, toggleMicrophoneMuted, - callDebugger, - } = useGroupCall(client, roomId, debugEnabled); + } = useGroupCall(groupCall); - const content = () => { - if (error) { - return ; - } - - if (loading) { - return ; - } - - if (entering) { - return ; - } - - if (!entered) { - return ( - - ); - } else { - return ( - - ); - } - }; - - return
{content()}
; + if (error) { + return ; + } else if (state === GroupCallState.Entered) { + return ( + + ); + } else if (state === GroupCallState.Entering) { + return ; + } else { + return ( + + ); + } } export function LoadingRoomView() { @@ -187,43 +182,23 @@ export function LoadingErrorView({ error }) { ); } -const PermissionState = { - Waiting: "waiting", - Granted: "granted", - Denied: "denied", -}; - function RoomSetupView({ roomName, - onInitLocalParticipant, + state, + onInitLocalCallFeed, onEnter, + localCallFeed, microphoneMuted, localVideoMuted, toggleLocalVideoMuted, toggleMicrophoneMuted, }) { - const videoRef = useRef(); - const [permissionState, setPermissionState] = useState( - PermissionState.Waiting - ); + const { stream } = useCallFeed(localCallFeed); + const videoRef = useMediaStream(stream, true); useEffect(() => { - onInitLocalParticipant() - .then((localParticipant) => { - if (videoRef.current) { - videoRef.current.srcObject = localParticipant.usermediaStream; - videoRef.current.play(); - setPermissionState(PermissionState.Granted); - } - }) - .catch((error) => { - console.error(error); - - if (videoRef.current) { - setPermissionState(PermissionState.Denied); - } - }); - }, [onInitLocalParticipant]); + onInitLocalCallFeed(); + }, [onInitLocalCallFeed]); return ( <> @@ -235,14 +210,14 @@ function RoomSetupView({
- {permissionState === PermissionState.Denied && ( + {state !== GroupCallState.LocalCallFeedInitialized && (

Webcam permissions needed to join the call.

)}
- {permissionState === PermissionState.Granted && ( + {state === GroupCallState.LocalCallFeedInitialized && (
)}