From b72eba33e20738feb6e14a7bd1b641a00322f679 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Tue, 26 Sep 2023 19:36:47 +0000 Subject: [PATCH 01/16] Update dependency vite-plugin-svgr to v4 --- package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 9b6eb301..84ef350a 100644 --- a/package.json +++ b/package.json @@ -121,7 +121,7 @@ "typescript": "^5.1.6", "vite": "^4.2.0", "vite-plugin-html-template": "^1.1.0", - "vite-plugin-svgr": "^3.2.0" + "vite-plugin-svgr": "^4.0.0" }, "jest": { "testEnvironment": "./test/environment.ts", diff --git a/yarn.lock b/yarn.lock index 13a44384..263e1986 100644 --- a/yarn.lock +++ b/yarn.lock @@ -16191,10 +16191,10 @@ vite-plugin-mdx@^3.5.6: resolve "^1.20.0" unified "^9.2.1" -vite-plugin-svgr@^3.2.0: - version "3.3.0" - resolved "https://registry.yarnpkg.com/vite-plugin-svgr/-/vite-plugin-svgr-3.3.0.tgz#024f083c0f0831497d8507b82e49a8ee2b29701a" - integrity sha512-vWZMCcGNdPqgziYFKQ3Y95XP0d0YGp28+MM3Dp9cTa/px5CKcHHrIoPl2Jw81rgVm6/ZUNONzjXbZQZ7Kw66og== +vite-plugin-svgr@^4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/vite-plugin-svgr/-/vite-plugin-svgr-4.0.0.tgz#2fb2537bde793602784c126f04210eaf130304bd" + integrity sha512-ingW8FEJ4vz9mQumnMDhNysE+YleiaThYmgflhUIVI4iIjVsVA1SswYIKprWVmyFsiIk1DqcwUeTFCnUJA3Vvg== dependencies: "@rollup/pluginutils" "^5.0.4" "@svgr/core" "^8.1.0" From 55f129e651f7f076b01aeddd219a45c595edc902 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Tue, 26 Sep 2023 22:41:39 +0000 Subject: [PATCH 02/16] Update dependency @vector-im/compound-web to v0.4.5 --- yarn.lock | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/yarn.lock b/yarn.lock index 13a44384..b0defda2 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5113,9 +5113,9 @@ svg2vectordrawable "^2.9.1" "@vector-im/compound-web@^0.4.0": - version "0.4.4" - resolved "https://registry.yarnpkg.com/@vector-im/compound-web/-/compound-web-0.4.4.tgz#b7374336f51ad57c40bef67e06b733aca5ef8a48" - integrity sha512-Ox/5PgwXSue/1fnnxMogl83iW18dnIMIh/JTnogFHn6zCkyz4Zl2pTKO32FiPzID5kdd0Zf7Li5fMdY1ekS3sA== + version "0.4.5" + resolved "https://registry.yarnpkg.com/@vector-im/compound-web/-/compound-web-0.4.5.tgz#6e0e066fc3a51d6daf17251d9590647b51fe7434" + integrity sha512-XkuBqJlj4Brsj+IfwkXtlGhyFGXvc6VoxFO1wDipM9d48SrNUGtK8IOQVZVeBYtML6XPET5lmp9ORnSpzWI3Ig== dependencies: "@radix-ui/react-form" "^0.0.3" "@radix-ui/react-tooltip" "^1.0.6" From 9cfaff8cdbf4e6cb3f66524943da6fef3601f543 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Wed, 27 Sep 2023 01:08:38 +0000 Subject: [PATCH 03/16] Update sentry-javascript monorepo to v7 --- package.json | 4 +- yarn.lock | 129 ++++++++++++++++++++++++--------------------------- 2 files changed, 62 insertions(+), 71 deletions(-) diff --git a/package.json b/package.json index 9b6eb301..09b239d4 100644 --- a/package.json +++ b/package.json @@ -44,8 +44,8 @@ "@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", + "@sentry/react": "^7.0.0", + "@sentry/tracing": "^7.0.0", "@use-gesture/react": "^10.2.11", "@vector-im/compound-design-tokens": "^0.0.6", "@vector-im/compound-web": "^0.4.0", diff --git a/yarn.lock b/yarn.lock index 13a44384..04121e09 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3331,15 +3331,27 @@ "@sentry/utils" "7.69.0" tslib "^2.4.1 || ^1.9.3" -"@sentry/browser@6.19.7": - version "6.19.7" - resolved "https://registry.yarnpkg.com/@sentry/browser/-/browser-6.19.7.tgz#a40b6b72d911b5f1ed70ed3b4e7d4d4e625c0b5f" - integrity sha512-oDbklp4O3MtAM4mtuwyZLrgO1qDVYIujzNJQzXmi9YzymJCuzMLSRDvhY83NNDCRxf0pds4DShgYeZdbSyKraA== +"@sentry-internal/tracing@7.72.0": + version "7.72.0" + resolved "https://registry.yarnpkg.com/@sentry-internal/tracing/-/tracing-7.72.0.tgz#6293a08b8b3dff80499207a4b4994ae70aafc34c" + integrity sha512-DToryaRSHk9R5RLgN4ktYEXZjQdqncOAWPqyyIurji8lIobXFRfmLtGL1wjoCK6sQNgWsjhSM9kXxwGnva1DNw== dependencies: - "@sentry/core" "6.19.7" - "@sentry/types" "6.19.7" - "@sentry/utils" "6.19.7" - tslib "^1.9.3" + "@sentry/core" "7.72.0" + "@sentry/types" "7.72.0" + "@sentry/utils" "7.72.0" + tslib "^2.4.1 || ^1.9.3" + +"@sentry/browser@7.72.0": + version "7.72.0" + resolved "https://registry.yarnpkg.com/@sentry/browser/-/browser-7.72.0.tgz#8920d32920031de7ef70140ac13de267e773e5c7" + integrity sha512-fcFDTzqhPd3VZAmmYW3KvBTBaEfrKjPmRhlAsfhkGWYLCHqVkNtzsFER4cmUNRGNxjyt9tcG3WlTTqgLRucycQ== + dependencies: + "@sentry-internal/tracing" "7.72.0" + "@sentry/core" "7.72.0" + "@sentry/replay" "7.72.0" + "@sentry/types" "7.72.0" + "@sentry/utils" "7.72.0" + tslib "^2.4.1 || ^1.9.3" "@sentry/bundler-plugin-core@2.7.1": version "2.7.1" @@ -3366,17 +3378,6 @@ proxy-from-env "^1.1.0" which "^2.0.2" -"@sentry/core@6.19.7": - version "6.19.7" - resolved "https://registry.yarnpkg.com/@sentry/core/-/core-6.19.7.tgz#156aaa56dd7fad8c89c145be6ad7a4f7209f9785" - integrity sha512-tOfZ/umqB2AcHPGbIrsFLcvApdTm9ggpi/kQZFkej7kMphjT+SGBiQfYtjyg9jcRW+ilAR4JXC9BGKsdEQ+8Vw== - dependencies: - "@sentry/hub" "6.19.7" - "@sentry/minimal" "6.19.7" - "@sentry/types" "6.19.7" - "@sentry/utils" "6.19.7" - tslib "^1.9.3" - "@sentry/core@7.69.0": version "7.69.0" resolved "https://registry.yarnpkg.com/@sentry/core/-/core-7.69.0.tgz#ebbe01df573f438f8613107020a4e18eb9adca4d" @@ -3386,23 +3387,14 @@ "@sentry/utils" "7.69.0" tslib "^2.4.1 || ^1.9.3" -"@sentry/hub@6.19.7": - version "6.19.7" - resolved "https://registry.yarnpkg.com/@sentry/hub/-/hub-6.19.7.tgz#58ad7776bbd31e9596a8ec46365b45cd8b9cfd11" - integrity sha512-y3OtbYFAqKHCWezF0EGGr5lcyI2KbaXW2Ik7Xp8Mu9TxbSTuwTe4rTntwg8ngPjUQU3SUHzgjqVB8qjiGqFXCA== +"@sentry/core@7.72.0": + version "7.72.0" + resolved "https://registry.yarnpkg.com/@sentry/core/-/core-7.72.0.tgz#df19f9dc1c2cfc5993a73c0c36283c35f9c52f94" + integrity sha512-G03JdQ5ZsFNRjcNNi+QvCjqOuBvYqU92Gs1T2iK3GE8dSBTu2khThydMpG4xrKZQLIpHOyiIhlFZiuPtZ66W8w== dependencies: - "@sentry/types" "6.19.7" - "@sentry/utils" "6.19.7" - tslib "^1.9.3" - -"@sentry/minimal@6.19.7": - version "6.19.7" - resolved "https://registry.yarnpkg.com/@sentry/minimal/-/minimal-6.19.7.tgz#b3ee46d6abef9ef3dd4837ebcb6bdfd01b9aa7b4" - integrity sha512-wcYmSJOdvk6VAPx8IcmZgN08XTXRwRtB1aOLZm+MVHjIZIhHoBGZJYTVQS/BWjldsamj2cX3YGbGXNunaCfYJQ== - dependencies: - "@sentry/hub" "6.19.7" - "@sentry/types" "6.19.7" - tslib "^1.9.3" + "@sentry/types" "7.72.0" + "@sentry/utils" "7.72.0" + tslib "^2.4.1 || ^1.9.3" "@sentry/node@^7.60.0": version "7.69.0" @@ -3418,46 +3410,42 @@ lru_map "^0.3.3" tslib "^2.4.1 || ^1.9.3" -"@sentry/react@^6.13.3": - version "6.19.7" - resolved "https://registry.yarnpkg.com/@sentry/react/-/react-6.19.7.tgz#58cc2d6da20f7d3b0df40638dfbbbc86c9c85caf" - integrity sha512-VzJeBg/v41jfxUYPkH2WYrKjWc4YiMLzDX0f4Zf6WkJ4v3IlDDSkX6DfmWekjTKBho6wiMkSNy2hJ1dHfGZ9jA== +"@sentry/react@^7.0.0": + version "7.72.0" + resolved "https://registry.yarnpkg.com/@sentry/react/-/react-7.72.0.tgz#badb4b5e28d27c892917210a6816cb6a2af2c2a5" + integrity sha512-BYFO3uyB9FfdUq05NtsS+OfU636HMZ7avbSEALo24x+OPuaD+fCByTdgxYVpDRYrBPa7lALYzCge0PDcGnGiig== dependencies: - "@sentry/browser" "6.19.7" - "@sentry/minimal" "6.19.7" - "@sentry/types" "6.19.7" - "@sentry/utils" "6.19.7" + "@sentry/browser" "7.72.0" + "@sentry/types" "7.72.0" + "@sentry/utils" "7.72.0" hoist-non-react-statics "^3.3.2" - tslib "^1.9.3" + tslib "^2.4.1 || ^1.9.3" -"@sentry/tracing@^6.13.3": - version "6.19.7" - resolved "https://registry.yarnpkg.com/@sentry/tracing/-/tracing-6.19.7.tgz#54bb99ed5705931cd33caf71da347af769f02a4c" - integrity sha512-ol4TupNnv9Zd+bZei7B6Ygnr9N3Gp1PUrNI761QSlHtPC25xXC5ssSD3GMhBgyQrcvpuRcCFHVNNM97tN5cZiA== +"@sentry/replay@7.72.0": + version "7.72.0" + resolved "https://registry.yarnpkg.com/@sentry/replay/-/replay-7.72.0.tgz#39da5d971045a6d9bf5d3bd16ccc1f5c0c42c4c8" + integrity sha512-dHH/mYCFBwJ/kYmL9L5KihjwQKcefiuvcH0otHSwKSpbbeEoM/BV+SHQoYGd6OMSYnL9fq1dHfF7Zo26p5Yu0Q== dependencies: - "@sentry/hub" "6.19.7" - "@sentry/minimal" "6.19.7" - "@sentry/types" "6.19.7" - "@sentry/utils" "6.19.7" - tslib "^1.9.3" + "@sentry/core" "7.72.0" + "@sentry/types" "7.72.0" + "@sentry/utils" "7.72.0" -"@sentry/types@6.19.7": - version "6.19.7" - resolved "https://registry.yarnpkg.com/@sentry/types/-/types-6.19.7.tgz#c6b337912e588083fc2896eb012526cf7cfec7c7" - integrity sha512-jH84pDYE+hHIbVnab3Hr+ZXr1v8QABfhx39KknxqKWr2l0oEItzepV0URvbEhB446lk/S/59230dlUUIBGsXbg== +"@sentry/tracing@^7.0.0": + version "7.72.0" + resolved "https://registry.yarnpkg.com/@sentry/tracing/-/tracing-7.72.0.tgz#1b6a0475d1e9e19ffb5ead87be011e9c6a0941ae" + integrity sha512-DOMlyviMLNwWgN4gJw/TrHaAdBcZWvm8xLbgwMwrihRn/m84kmH2Ui1FUYpL30o/mH+mQS+53IHZukrgQjHkZA== + dependencies: + "@sentry-internal/tracing" "7.72.0" "@sentry/types@7.69.0": version "7.69.0" resolved "https://registry.yarnpkg.com/@sentry/types/-/types-7.69.0.tgz#012b8d90d270a473cc2a5cf58a56870542739292" integrity sha512-zPyCox0mzitzU6SIa1KIbNoJAInYDdUpdiA+PoUmMn2hFMH1llGU/cS7f4w/mAsssTlbtlBi72RMnWUCy578bw== -"@sentry/utils@6.19.7": - version "6.19.7" - resolved "https://registry.yarnpkg.com/@sentry/utils/-/utils-6.19.7.tgz#6edd739f8185fd71afe49cbe351c1bbf5e7b7c79" - integrity sha512-z95ECmE3i9pbWoXQrD/7PgkBAzJYR+iXtPuTkpBjDKs86O3mT+PXOT3BAn79w2wkn7/i3vOGD2xVr1uiMl26dA== - dependencies: - "@sentry/types" "6.19.7" - tslib "^1.9.3" +"@sentry/types@7.72.0": + version "7.72.0" + resolved "https://registry.yarnpkg.com/@sentry/types/-/types-7.72.0.tgz#b474d3821338a545fb2db109715d9aad502bc810" + integrity sha512-g6u0mk62yGshx02rfFADIfyR/S9VXcf3RG2qQPuvykrWtOfN/BOTrZypF7I+MiqKwRW76r3Pcu2C/AB+6z9XQA== "@sentry/utils@7.69.0", "@sentry/utils@^7.60.0": version "7.69.0" @@ -3467,6 +3455,14 @@ "@sentry/types" "7.69.0" tslib "^2.4.1 || ^1.9.3" +"@sentry/utils@7.72.0": + version "7.72.0" + resolved "https://registry.yarnpkg.com/@sentry/utils/-/utils-7.72.0.tgz#798c764ac61bb658e2117792010ccd20ad8c7b02" + integrity sha512-o/MtqI7WJXuswidH0bSgBP40KN2lrnyQEIx5uoyJUJi/QEaboIsqbxU62vaFJpde8SYrbA+rTnP3J3ujF2gUag== + dependencies: + "@sentry/types" "7.72.0" + tslib "^2.4.1 || ^1.9.3" + "@sentry/vite-plugin@^2.0.0": version "2.7.1" resolved "https://registry.yarnpkg.com/@sentry/vite-plugin/-/vite-plugin-2.7.1.tgz#23fa4c95079c3f2ba10b851dce7452c16adc82c8" @@ -15560,11 +15556,6 @@ tsconfig-paths@^3.14.2: minimist "^1.2.6" strip-bom "^3.0.0" -tslib@^1.9.3: - version "1.14.1" - resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00" - integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg== - tslib@^2.0.0, tslib@^2.0.1, tslib@^2.0.3, tslib@^2.1.0, tslib@^2.3.0, tslib@^2.4.0, "tslib@^2.4.1 || ^1.9.3": version "2.6.2" resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.2.tgz#703ac29425e7b37cd6fd456e92404d46d1f3e4ae" From 752ba126dcdcc0b563e0e52fb951754c23943cd8 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Wed, 27 Sep 2023 11:58:13 +0000 Subject: [PATCH 04/16] Update dependency @types/request to v2.48.9 --- yarn.lock | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/yarn.lock b/yarn.lock index 13a44384..2dac6b62 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4397,9 +4397,9 @@ "@babel/types" "^7.20.7" "@types/caseless@*": - version "0.12.2" - resolved "https://registry.yarnpkg.com/@types/caseless/-/caseless-0.12.2.tgz#f65d3d6389e01eeb458bd54dc8f52b95a9463bc8" - integrity sha512-6ckxMjBBD8URvjB6J3NcnuAn5Pkl7t3TizAg+xdlzzQGSPSmBcXf8KoIH0ua/i+tio+ZRUHEXp0HEmvaR4kt0w== + version "0.12.3" + resolved "https://registry.yarnpkg.com/@types/caseless/-/caseless-0.12.3.tgz#8f7d6c8b536af838966b77ce73d63562561d2b92" + integrity sha512-ZD/NsIJYq/2RH+hY7lXmstfp/v9djGt9ah+xRQ3pcgR79qiKsG4pLl25AI7IcXxVO8dH9GiBE5rAknC0ePntlw== "@types/content-type@^1.1.5": version "1.1.6" @@ -4801,9 +4801,9 @@ form-data "^3.0.0" "@types/node@*": - version "20.6.2" - resolved "https://registry.yarnpkg.com/@types/node/-/node-20.6.2.tgz#a065925409f59657022e9063275cd0b9bd7e1b12" - integrity sha512-Y+/1vGBHV/cYk6OI1Na/LHzwnlNCAfU3ZNGrc1LdRe/LAIbdDPTTv/HU3M7yXN448aTVDq3eKRm2cg7iKLb8gw== + version "20.7.0" + resolved "https://registry.yarnpkg.com/@types/node/-/node-20.7.0.tgz#c03de4572f114a940bc2ca909a33ddb2b925e470" + integrity sha512-zI22/pJW2wUZOVyguFaUL1HABdmSVxpXrzIqkjsHmyUjNhPoWM1CKfvVuXfetHhIok4RY573cqS0mZ1SJEnoTg== "@types/node@^14.0.10 || ^16.0.0", "@types/node@^14.14.20 || ^16.0.0": version "16.18.46" @@ -4889,9 +4889,9 @@ csstype "^3.0.2" "@types/request@^2.48.8": - version "2.48.8" - resolved "https://registry.yarnpkg.com/@types/request/-/request-2.48.8.tgz#0b90fde3b655ab50976cb8c5ac00faca22f5a82c" - integrity sha512-whjk1EDJPcAR2kYHRbFl/lKeeKYTi05A15K9bnLInCVroNDCtXce57xKdI0/rQaA3K+6q0eFyUBPmqfSndUZdQ== + version "2.48.9" + resolved "https://registry.yarnpkg.com/@types/request/-/request-2.48.9.tgz#43e123e93b10bd740a298e25430de6fab7e726c2" + integrity sha512-4mi2hYsvPAhe8RXjk5DKB09sAUzbK68T2XjORehHdWyxFoX2zUnfi1VQ5wU4Md28H/5+uB4DkxY9BS4B87N/0A== dependencies: "@types/caseless" "*" "@types/node" "*" From c11b71abf6cb6c9b9b50760bbaeb37036fc9da83 Mon Sep 17 00:00:00 2001 From: raspin0 Date: Wed, 27 Sep 2023 12:16:41 +0000 Subject: [PATCH 05/16] Translated using Weblate (Polish) Currently translated at 100.0% (124 of 124 strings) Translation: Element Call/element-call Translate-URL: https://translate.element.io/projects/element-call/element-call/pl/ --- public/locales/pl/app.json | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/public/locales/pl/app.json b/public/locales/pl/app.json index c70620ae..7dbeedc4 100644 --- a/public/locales/pl/app.json +++ b/public/locales/pl/app.json @@ -107,5 +107,20 @@ "Share this call": "Udostępnij to połączenie", "Sharing screen": "Udostępnianie ekranu", "{{count, number}}|one": "{{count, number}}", - "{{names, list(style: short;)}}": "{{names, list(style: short;)}}" + "{{names, list(style: short;)}}": "{{names, list(style: short;)}}", + "Continue in browser": "Kontynuuj w przeglądarce", + "Mute microphone": "Wycisz mikrofon", + "Name of call": "Nazwa połączenia", + "Open in the app": "Otwórz w aplikacji", + "Ready to join?": "Gotowy, by dołączyć?", + "Select app": "Wybierz aplikację", + "Start new call": "Rozpocznij nowe połączenie", + "Start video": "Rozpocznij wideo", + "Back to recents": "Wróć do ostatnie", + "Stop video": "Zakończ wideo", + "Unmute microphone": "Odcisz mikrofon", + "Call not found": "Nie znaleziono połączenia", + "Calls are now end-to-end encrypted and need to be created from the home page. This helps make sure everyone's using the same encryption key.": "Połączenia są teraz szyfrowane end-to-end i muszą zostać utworzone ze strony głównej. Pomaga to upewnić się, że każdy korzysta z tego samego klucza szyfrującego.", + "You": "Ty", + "Your web browser does not support media end-to-end encryption. Supported Browsers are Chrome, Safari, Firefox >=117": "Twoja przeglądarka nie wspiera szyfrowania end-to-end. Wspierane przeglądarki to Chrome, Safari, Firefox >=117" } From 60f264620c6fbfe3fd24501f9397ab7962f36f76 Mon Sep 17 00:00:00 2001 From: random Date: Wed, 27 Sep 2023 13:37:42 +0000 Subject: [PATCH 06/16] Translated using Weblate (Italian) Currently translated at 100.0% (124 of 124 strings) Translation: Element Call/element-call Translate-URL: https://translate.element.io/projects/element-call/element-call/it/ --- public/locales/it/app.json | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/public/locales/it/app.json b/public/locales/it/app.json index 38188f72..d8fa7065 100644 --- a/public/locales/it/app.json +++ b/public/locales/it/app.json @@ -119,7 +119,8 @@ "Stop video": "Ferma video", "Unmute microphone": "Riaccendi il microfono", "Back to recents": "Torna ai recenti", - "Start new call": "Inizia nuova chiamata", + "Start new call": "Inizia una nuova chiamata", "Call not found": "Chiamata non trovata", - "Calls are now end-to-end encrypted and need to be created from the home page. This helps make sure everyone's using the same encryption key.": "Le chiamate ora sono cifrate end-to-end e devono essere create dalla pagina principale. Ciò assicura che chiunque usi la stessa chiave di crittografia." + "Calls are now end-to-end encrypted and need to be created from the home page. This helps make sure everyone's using the same encryption key.": "Le chiamate ora sono cifrate end-to-end e devono essere create dalla pagina principale. Ciò assicura che chiunque usi la stessa chiave di crittografia.", + "Your web browser does not support media end-to-end encryption. Supported Browsers are Chrome, Safari, Firefox >=117": "Il tuo browser non supporta la crittografia end-to-end dei media. I browser supportati sono Chrome, Safari, Firefox >=117" } From a959436ac7ae27da049e58b8fe0b170a88e2f9b6 Mon Sep 17 00:00:00 2001 From: Robin Date: Wed, 27 Sep 2023 15:17:04 -0400 Subject: [PATCH 07/16] Change wording from 'share' to 'invite' This was updated in the designs. --- .../{ShareButton.tsx => InviteButton.tsx} | 4 ++-- src/room/GroupCallView.tsx | 18 +++++++++--------- src/room/InCallView.tsx | 4 ++-- ...Modal.module.css => InviteModal.module.css} | 0 src/room/{ShareModal.tsx => InviteModal.tsx} | 6 +++--- src/room/LobbyView.tsx | 4 ++-- 6 files changed, 18 insertions(+), 18 deletions(-) rename src/button/{ShareButton.tsx => InviteButton.tsx} (95%) rename src/room/{ShareModal.module.css => InviteModal.module.css} (100%) rename src/room/{ShareModal.tsx => InviteModal.tsx} (87%) diff --git a/src/button/ShareButton.tsx b/src/button/InviteButton.tsx similarity index 95% rename from src/button/ShareButton.tsx rename to src/button/InviteButton.tsx index 2f7f1334..158b3297 100644 --- a/src/button/ShareButton.tsx +++ b/src/button/InviteButton.tsx @@ -19,13 +19,13 @@ import { Button } from "@vector-im/compound-web"; import { useTranslation } from "react-i18next"; import { ReactComponent as UserAddSolidIcon } from "@vector-im/compound-design-tokens/icons/user-add-solid.svg"; -export const ShareButton: FC< +export const InviteButton: FC< Omit, "children"> > = (props) => { const { t } = useTranslation(); return ( ); }; diff --git a/src/room/GroupCallView.tsx b/src/room/GroupCallView.tsx index ab96926a..de4b1ed4 100644 --- a/src/room/GroupCallView.tsx +++ b/src/room/GroupCallView.tsx @@ -47,7 +47,7 @@ import { useEnableE2EE } from "../settings/useSetting"; import { useRoomAvatar } from "./useRoomAvatar"; import { useRoomName } from "./useRoomName"; import { useJoinRule } from "./useJoinRule"; -import { ShareModal } from "./ShareModal"; +import { InviteModal } from "./InviteModal"; declare global { interface Window { @@ -274,15 +274,15 @@ export function GroupCallView({ const joinRule = useJoinRule(rtcSession.room); - const [shareModalOpen, setShareModalOpen] = useState(false); - const onDismissShareModal = useCallback( - () => setShareModalOpen(false), - [setShareModalOpen] + const [shareModalOpen, setInviteModalOpen] = useState(false); + const onDismissInviteModal = useCallback( + () => setInviteModalOpen(false), + [setInviteModalOpen] ); const onShareClickFn = useCallback( - () => setShareModalOpen(true), - [setShareModalOpen] + () => setInviteModalOpen(true), + [setInviteModalOpen] ); const onShareClick = joinRule === JoinRule.Public ? onShareClickFn : null; @@ -325,10 +325,10 @@ export function GroupCallView({ } const shareModal = ( - ); diff --git a/src/room/InCallView.tsx b/src/room/InCallView.tsx index 313cc42f..06191f6c 100644 --- a/src/room/InCallView.tsx +++ b/src/room/InCallView.tsx @@ -69,7 +69,7 @@ import { useWakeLock } from "../useWakeLock"; import { useMergedRefs } from "../useMergedRefs"; import { MuteStates } from "./MuteStates"; import { MatrixInfo } from "./VideoPreview"; -import { ShareButton } from "../button/ShareButton"; +import { InviteButton } from "../button/InviteButton"; import { LayoutToggle } from "./LayoutToggle"; import { ECAddonConnectionState, @@ -417,7 +417,7 @@ export function InCallView({ {!reducedControls && onShareClick !== null && ( - + )} diff --git a/src/room/ShareModal.module.css b/src/room/InviteModal.module.css similarity index 100% rename from src/room/ShareModal.module.css rename to src/room/InviteModal.module.css diff --git a/src/room/ShareModal.tsx b/src/room/InviteModal.tsx similarity index 87% rename from src/room/ShareModal.tsx rename to src/room/InviteModal.tsx index 0439f10a..6a04e2ef 100644 --- a/src/room/ShareModal.tsx +++ b/src/room/InviteModal.tsx @@ -21,7 +21,7 @@ import { Room } from "matrix-js-sdk"; import { Modal } from "../Modal"; import { CopyButton } from "../button"; import { getAbsoluteRoomUrl } from "../matrix-utils"; -import styles from "./ShareModal.module.css"; +import styles from "./InviteModal.module.css"; import { useRoomSharedKey } from "../e2ee/sharedKeyManagement"; interface Props { @@ -30,12 +30,12 @@ interface Props { onDismiss: () => void; } -export const ShareModal: FC = ({ room, open, onDismiss }) => { +export const InviteModal: FC = ({ room, open, onDismiss }) => { const { t } = useTranslation(); const roomSharedKey = useRoomSharedKey(room.roomId); return ( - +

{t("Copy and share this call link")}

= ({ /> - {onShareClick !== null && } + {onShareClick !== null && } )} From 6865a13c3c9ffbafb904ba7a114ba5ed8a6d4b07 Mon Sep 17 00:00:00 2001 From: Robin Date: Wed, 27 Sep 2023 17:06:57 -0400 Subject: [PATCH 08/16] Revert "Merge pull request #1603 from vector-im/renovate/babel-monorepo" This reverts commit 03a2350e5c7b7715267b8511c28de5379ae28603, reversing changes made to db6734313331c76aafd49208d6fb3d88d790cdba. --- yarn.lock | 83 ++++++++++++++++++++++++++++++++++++++++++++++--------- 1 file changed, 70 insertions(+), 13 deletions(-) diff --git a/yarn.lock b/yarn.lock index 13a44384..f308df03 100644 --- a/yarn.lock +++ b/yarn.lock @@ -65,7 +65,28 @@ semver "^5.4.1" source-map "^0.5.0" -"@babel/core@^7.11.6", "@babel/core@^7.12.10", "@babel/core@^7.12.3", "@babel/core@^7.16.5", "@babel/core@^7.17.10", "@babel/core@^7.21.3", "@babel/core@^7.22.20", "@babel/core@^7.7.5": +"@babel/core@^7.11.6", "@babel/core@^7.12.10", "@babel/core@^7.12.3", "@babel/core@^7.16.5", "@babel/core@^7.17.10", "@babel/core@^7.7.5": + version "7.22.20" + resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.22.20.tgz#e3d0eed84c049e2a2ae0a64d27b6a37edec385b7" + integrity sha512-Y6jd1ahLubuYweD/zJH+vvOY141v4f9igNQAQ+MBgq9JlHS2iTsZKn1aMsb3vGccZsXI16VzTBw52Xx0DWmtnA== + dependencies: + "@ampproject/remapping" "^2.2.0" + "@babel/code-frame" "^7.22.13" + "@babel/generator" "^7.22.15" + "@babel/helper-compilation-targets" "^7.22.15" + "@babel/helper-module-transforms" "^7.22.20" + "@babel/helpers" "^7.22.15" + "@babel/parser" "^7.22.16" + "@babel/template" "^7.22.15" + "@babel/traverse" "^7.22.20" + "@babel/types" "^7.22.19" + convert-source-map "^1.7.0" + debug "^4.1.0" + gensync "^1.0.0-beta.2" + json5 "^2.2.3" + semver "^6.3.1" + +"@babel/core@^7.21.3", "@babel/core@^7.22.20": version "7.23.0" resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.23.0.tgz#f8259ae0e52a123eb40f552551e647b506a94d83" integrity sha512-97z/ju/Jy1rZmDxybphrBuI+jtJjFVoz7Mr9yUQVVVi+DNZE333uFQeMOqcCIy1x3WYBIbWftUSLmbNXNT7qFQ== @@ -96,6 +117,16 @@ "@jridgewell/trace-mapping" "^0.3.17" jsesc "^2.5.1" +"@babel/generator@^7.22.15", "@babel/generator@^7.7.2": + version "7.22.15" + resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.22.15.tgz#1564189c7ec94cb8f77b5e8a90c4d200d21b2339" + integrity sha512-Zu9oWARBqeVOW0dZOjXc3JObrzuqothQ3y/n1kUtrjCoCPLkXUwMvOo/F/TCfoHMbWIFlWwpZtkZVb9ga4U2pA== + dependencies: + "@babel/types" "^7.22.15" + "@jridgewell/gen-mapping" "^0.3.2" + "@jridgewell/trace-mapping" "^0.3.17" + jsesc "^2.5.1" + "@babel/generator@^7.23.0": version "7.23.0" resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.23.0.tgz#df5c386e2218be505b34837acbcb874d7a983420" @@ -106,16 +137,6 @@ "@jridgewell/trace-mapping" "^0.3.17" jsesc "^2.5.1" -"@babel/generator@^7.7.2": - version "7.22.15" - resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.22.15.tgz#1564189c7ec94cb8f77b5e8a90c4d200d21b2339" - integrity sha512-Zu9oWARBqeVOW0dZOjXc3JObrzuqothQ3y/n1kUtrjCoCPLkXUwMvOo/F/TCfoHMbWIFlWwpZtkZVb9ga4U2pA== - dependencies: - "@babel/types" "^7.22.15" - "@jridgewell/gen-mapping" "^0.3.2" - "@jridgewell/trace-mapping" "^0.3.17" - jsesc "^2.5.1" - "@babel/helper-annotate-as-pure@^7.18.6", "@babel/helper-annotate-as-pure@^7.22.5": version "7.22.5" resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.22.5.tgz#e7f06737b197d580a01edf75d97e2c8be99d3882" @@ -253,6 +274,17 @@ "@babel/helper-split-export-declaration" "^7.22.6" "@babel/helper-validator-identifier" "^7.22.5" +"@babel/helper-module-transforms@^7.22.20": + version "7.22.20" + resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.22.20.tgz#da9edc14794babbe7386df438f3768067132f59e" + integrity sha512-dLT7JVWIUUxKOs1UnJUBR3S70YK+pKX6AbJgB2vMIvEkZkrfJDbYDJesnPshtKV4LhDOR3Oc5YULeDizRek+5A== + dependencies: + "@babel/helper-environment-visitor" "^7.22.20" + "@babel/helper-module-imports" "^7.22.15" + "@babel/helper-simple-access" "^7.22.5" + "@babel/helper-split-export-declaration" "^7.22.6" + "@babel/helper-validator-identifier" "^7.22.20" + "@babel/helper-module-transforms@^7.22.5", "@babel/helper-module-transforms@^7.23.0": version "7.23.0" resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.23.0.tgz#3ec246457f6c842c0aee62a01f60739906f7047e" @@ -353,6 +385,15 @@ "@babel/traverse" "^7.22.11" "@babel/types" "^7.22.11" +"@babel/helpers@^7.22.15": + version "7.22.15" + resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.22.15.tgz#f09c3df31e86e3ea0b7ff7556d85cdebd47ea6f1" + integrity sha512-7pAjK0aSdxOwR+CcYAqgWOGy5dcfvzsTIfFTb2odQqW47MDfv14UaJDY6eng8ylM2EaeKXdxaSWESbkmaQHTmw== + dependencies: + "@babel/template" "^7.22.15" + "@babel/traverse" "^7.22.15" + "@babel/types" "^7.22.15" + "@babel/helpers@^7.23.0": version "7.23.1" resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.23.1.tgz#44e981e8ce2b9e99f8f0b703f3326a4636c16d15" @@ -381,7 +422,7 @@ resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.22.14.tgz#c7de58e8de106e88efca42ce17f0033209dfd245" integrity sha512-1KucTHgOvaw/LzCVrEOAyXkr9rQlp0A1HiHRYnSUE9dmb8PvPW7o5sscg+5169r54n3vGlbx6GevTE/Iw/P3AQ== -"@babel/parser@^7.14.7": +"@babel/parser@^7.14.7", "@babel/parser@^7.22.16": version "7.22.16" resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.22.16.tgz#180aead7f247305cce6551bea2720934e2fa2c95" integrity sha512-+gPfKv8UWeKKeJTUxe59+OobVcrYHETCsORl61EmSkmgymguYk/X5bp7GuUIXaFsc6y++v8ZxPsLSSuujqDphA== @@ -1362,6 +1403,22 @@ debug "^4.1.0" globals "^11.1.0" +"@babel/traverse@^7.22.15", "@babel/traverse@^7.22.20": + version "7.22.20" + resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.22.20.tgz#db572d9cb5c79e02d83e5618b82f6991c07584c9" + integrity sha512-eU260mPZbU7mZ0N+X10pxXhQFMGTeLb9eFS0mxehS8HZp9o1uSnFeWQuG1UPrlxgA7QoUzFhOnilHDp0AXCyHw== + dependencies: + "@babel/code-frame" "^7.22.13" + "@babel/generator" "^7.22.15" + "@babel/helper-environment-visitor" "^7.22.20" + "@babel/helper-function-name" "^7.22.5" + "@babel/helper-hoist-variables" "^7.22.5" + "@babel/helper-split-export-declaration" "^7.22.6" + "@babel/parser" "^7.22.16" + "@babel/types" "^7.22.19" + debug "^4.1.0" + globals "^11.1.0" + "@babel/traverse@^7.23.0": version "7.23.0" resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.23.0.tgz#18196ddfbcf4ccea324b7f6d3ada00d8c5a99c53" @@ -1396,7 +1453,7 @@ "@babel/helper-validator-identifier" "^7.22.5" to-fast-properties "^2.0.0" -"@babel/types@^7.3.3": +"@babel/types@^7.22.19", "@babel/types@^7.3.3": version "7.22.19" resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.22.19.tgz#7425343253556916e440e662bb221a93ddb75684" integrity sha512-P7LAw/LbojPzkgp5oznjE6tQEIWbp4PkkfrZDINTro9zgBRtI324/EYsiSI7lhPbpIQ+DCeR2NNmMWANGGfZsg== From 8a14d60cb4126b6bda7b6496c14fe287c0fe9d37 Mon Sep 17 00:00:00 2001 From: Robin Date: Wed, 27 Sep 2023 17:34:41 -0400 Subject: [PATCH 09/16] Implement the new invite modal designs --- package.json | 1 + src/Modal.module.css | 78 ----------------- src/Modal.tsx | 20 ++++- src/Overlay.module.css | 99 ++++++++++++++++++++++ src/Toast.module.css | 38 +++++++++ src/Toast.tsx | 108 ++++++++++++++++++++++++ src/room/InviteModal.module.css | 8 +- src/room/InviteModal.tsx | 61 ++++++++++--- test/Toast-test.tsx | 59 +++++++++++++ test/__snapshots__/Toast-test.tsx.snap | 22 +++++ test/room/checkForParallelCalls-test.ts | 10 +-- test/utils.ts | 24 ++++++ yarn.lock | 5 ++ 13 files changed, 427 insertions(+), 106 deletions(-) create mode 100644 src/Overlay.module.css create mode 100644 src/Toast.module.css create mode 100644 src/Toast.tsx create mode 100644 test/Toast-test.tsx create mode 100644 test/__snapshots__/Toast-test.tsx.snap create mode 100644 test/utils.ts diff --git a/package.json b/package.json index 9b6eb301..ba8765e2 100644 --- a/package.json +++ b/package.json @@ -87,6 +87,7 @@ "@storybook/react": "^6.5.0-alpha.5", "@testing-library/jest-dom": "^6.0.0", "@testing-library/react": "^14.0.0", + "@testing-library/user-event": "^14.5.1", "@types/content-type": "^1.1.5", "@types/d3": "^7.4.0", "@types/dom-screen-wake-lock": "^1.0.1", diff --git a/src/Modal.module.css b/src/Modal.module.css index e72f6496..d6af51df 100644 --- a/src/Modal.module.css +++ b/src/Modal.module.css @@ -14,96 +14,18 @@ See the License for the specific language governing permissions and limitations under the License. */ -.overlay { - position: fixed; - z-index: 100; - inset: 0; - background: rgba(3, 12, 27, 0.528); -} - -@keyframes fade-in { - from { - opacity: 0; - } - to { - opacity: 1; - } -} - -.dialogOverlay[data-state="open"] { - animation: fade-in 200ms; -} - -@keyframes fade-out { - from { - opacity: 1; - } - to { - opacity: 0; - } -} - -.dialogOverlay[data-state="closed"] { - animation: fade-out 130ms; -} - .modal { - position: fixed; - z-index: 101; display: flex; flex-direction: column; } .dialog { - left: 50%; - top: 50%; - transform: translate(-50%, -50%); box-sizing: border-box; inline-size: 520px; max-inline-size: 90%; max-block-size: 600px; } -@keyframes zoom-in { - from { - opacity: 0; - transform: translate(-50%, -50%) scale(80%); - } - to { - opacity: 1; - transform: translate(-50%, -50%) scale(100%); - } -} - -@keyframes zoom-out { - from { - opacity: 1; - transform: translate(-50%, -50%) scale(100%); - } - to { - opacity: 0; - transform: translate(-50%, -50%) scale(80%); - } -} - -.dialog[data-state="open"] { - animation: zoom-in 200ms; -} - -.dialog[data-state="closed"] { - animation: zoom-out 130ms; -} - -@media (prefers-reduced-motion) { - .dialog[data-state="open"] { - animation-name: fade-in; - } - - .dialog[data-state="closed"] { - animation-name: fade-out; - } -} - .content { display: flex; flex-direction: column; diff --git a/src/Modal.tsx b/src/Modal.tsx index b644abe4..cacb24fe 100644 --- a/src/Modal.tsx +++ b/src/Modal.tsx @@ -32,6 +32,7 @@ import classNames from "classnames"; import { Heading } from "@vector-im/compound-web"; import styles from "./Modal.module.css"; +import overlayStyles from "./Overlay.module.css"; import { useMediaQuery } from "./useMediaQuery"; import { Glass } from "./Glass"; @@ -85,9 +86,14 @@ export function Modal({ dismissible={onDismiss !== undefined} > - +
@@ -108,12 +114,18 @@ export function Modal({
diff --git a/src/Overlay.module.css b/src/Overlay.module.css new file mode 100644 index 00000000..37bcf95d --- /dev/null +++ b/src/Overlay.module.css @@ -0,0 +1,99 @@ +/* +Copyright 2023 New Vector Ltd + +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 + + http://www.apache.org/licenses/LICENSE-2.0 + +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. +*/ + +.bg { + position: fixed; + z-index: 100; + inset: 0; + background: rgba(3, 12, 27, 0.528); +} + +@keyframes fade-in { + from { + opacity: 0; + } + to { + opacity: 1; + } +} + +.bg.animate[data-state="open"] { + animation: fade-in 200ms; +} + +@keyframes fade-out { + from { + opacity: 1; + } + to { + opacity: 0; + } +} + +.bg.animate[data-state="closed"] { + animation: fade-out 130ms; +} + +.overlay { + position: fixed; + z-index: 101; +} + +.overlay.animate { + left: 50%; + top: 50%; + transform: translate(-50%, -50%); +} + +@keyframes zoom-in { + from { + opacity: 0; + transform: translate(-50%, -50%) scale(80%); + } + to { + opacity: 1; + transform: translate(-50%, -50%) scale(100%); + } +} + +@keyframes zoom-out { + from { + opacity: 1; + transform: translate(-50%, -50%) scale(100%); + } + to { + opacity: 0; + transform: translate(-50%, -50%) scale(80%); + } +} + +.overlay.animate[data-state="open"] { + animation: zoom-in 200ms; +} + +.overlay.animate[data-state="closed"] { + animation: zoom-out 130ms; +} + +@media (prefers-reduced-motion) { + .overlay.animate[data-state="open"] { + animation-name: fade-in; + } + + .overlay.animate[data-state="closed"] { + animation-name: fade-out; + } +} diff --git a/src/Toast.module.css b/src/Toast.module.css new file mode 100644 index 00000000..5f19b3b2 --- /dev/null +++ b/src/Toast.module.css @@ -0,0 +1,38 @@ +/* +Copyright 2023 New Vector Ltd + +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 + + http://www.apache.org/licenses/LICENSE-2.0 + +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. +*/ + +.toast { + color: var(--cpd-color-text-on-solid-primary); + background: var(--cpd-color-alpha-gray-1200); + padding-inline: var(--cpd-space-3x); + padding-block: var(--cpd-space-1x); + border: none; + border-radius: var(--cpd-radius-pill-effect); + box-shadow: var(--small-drop-shadow); + display: flex; + align-items: center; + gap: var(--cpd-space-1x); +} + +.toast > h3 { + margin: 0; +} + +.toast > svg { + color: var(--cpd-color-icon-on-solid-primary); + flex-shrink: 0; + margin-inline-end: calc(-1 * var(--cpd-space-1x)); +} diff --git a/src/Toast.tsx b/src/Toast.tsx new file mode 100644 index 00000000..de532cde --- /dev/null +++ b/src/Toast.tsx @@ -0,0 +1,108 @@ +/* +Copyright 2023 New Vector Ltd + +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 + + http://www.apache.org/licenses/LICENSE-2.0 + +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. +*/ + +import { + ComponentType, + FC, + SVGAttributes, + useCallback, + useEffect, +} from "react"; +import { + Root as DialogRoot, + Portal as DialogPortal, + Overlay as DialogOverlay, + Content as DialogContent, + Close as DialogClose, + Title as DialogTitle, +} from "@radix-ui/react-dialog"; +import classNames from "classnames"; +import { Text } from "@vector-im/compound-web"; + +import styles from "./Toast.module.css"; +import overlayStyles from "./Overlay.module.css"; + +interface Props { + /** + * The controlled open state of the toast. + */ + open: boolean; + /** + * Callback for when the user dismisses the toast. + */ + onDismiss: () => void; + /** + * A number of milliseconds after which the toast should be automatically + * dismissed. + */ + autoDismiss?: number; + children: string; + /** + * A supporting icon to display within the toast. + */ + Icon?: ComponentType>; +} + +/** + * A temporary message shown in an overlay in the center of the screen. + */ +export const Toast: FC = ({ + open, + onDismiss, + autoDismiss, + children, + Icon, +}) => { + const onOpenChange = useCallback( + (open: boolean) => { + if (!open) onDismiss(); + }, + [onDismiss] + ); + + useEffect(() => { + if (open && autoDismiss !== undefined) { + const timeout = setTimeout(onDismiss, autoDismiss); + return () => clearTimeout(timeout); + } + }, [open, autoDismiss, onDismiss]); + + return ( + + + + + + + + {children} + + + {Icon && } + + + + + ); +}; diff --git a/src/room/InviteModal.module.css b/src/room/InviteModal.module.css index dec0c304..dd7aa755 100644 --- a/src/room/InviteModal.module.css +++ b/src/room/InviteModal.module.css @@ -14,6 +14,12 @@ See the License for the specific language governing permissions and limitations under the License. */ -.copyButton { +.url { + text-align: center; + color: var(--cpd-color-text-secondary); + margin-block-end: var(--cpd-space-8x); +} + +.button { width: 100%; } diff --git a/src/room/InviteModal.tsx b/src/room/InviteModal.tsx index 6a04e2ef..7c2a9e73 100644 --- a/src/room/InviteModal.tsx +++ b/src/room/InviteModal.tsx @@ -14,15 +14,19 @@ See the License for the specific language governing permissions and limitations under the License. */ -import { FC } from "react"; +import { FC, MouseEvent, useCallback, useMemo, useState } from "react"; import { useTranslation } from "react-i18next"; import { Room } from "matrix-js-sdk"; +import { Button, Text } from "@vector-im/compound-web"; +import { ReactComponent as LinkIcon } from "@vector-im/compound-design-tokens/icons/link.svg"; +import { ReactComponent as CheckIcon } from "@vector-im/compound-design-tokens/icons/check.svg"; +import useClipboard from "react-use-clipboard"; import { Modal } from "../Modal"; -import { CopyButton } from "../button"; import { getAbsoluteRoomUrl } from "../matrix-utils"; import styles from "./InviteModal.module.css"; import { useRoomSharedKey } from "../e2ee/sharedKeyManagement"; +import { Toast } from "../Toast"; interface Props { room: Room; @@ -33,19 +37,48 @@ interface Props { export const InviteModal: FC = ({ room, open, onDismiss }) => { const { t } = useTranslation(); const roomSharedKey = useRoomSharedKey(room.roomId); + const url = useMemo( + () => + getAbsoluteRoomUrl(room.roomId, room.name, roomSharedKey ?? undefined), + [room, roomSharedKey] + ); + const [, setCopied] = useClipboard(url); + const [toastOpen, setToastOpen] = useState(false); + const onToastDismiss = useCallback(() => setToastOpen(false), [setToastOpen]); + + const onButtonClick = useCallback( + (e: MouseEvent) => { + e.stopPropagation(); + setCopied(); + onDismiss(); + setToastOpen(true); + }, + [setCopied, onDismiss] + ); return ( - -

{t("Copy and share this call link")}

- - + <> + + + {url} + + + + + {t("Link copied to clipboard")} + + ); }; diff --git a/test/Toast-test.tsx b/test/Toast-test.tsx new file mode 100644 index 00000000..605feaea --- /dev/null +++ b/test/Toast-test.tsx @@ -0,0 +1,59 @@ +/* +Copyright 2023 New Vector Ltd + +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 + + http://www.apache.org/licenses/LICENSE-2.0 + +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. +*/ + +import { screen, render } from "@testing-library/react"; +import { Toast } from "../src/Toast"; +import userEvent from "@testing-library/user-event"; +import { withFakeTimers } from "./utils"; + +test("Toast renders", () => { + render( + {}}> + Hello world! + + ); + expect(screen.queryByRole("dialog")).toBe(null); + render( + {}}> + Hello world! + + ); + expect(screen.getByRole("dialog")).toMatchSnapshot(); +}); + +test("Toast dismisses when clicked", async () => { + const onDismiss = jest.fn(); + render( + + Hello world! + + ); + await userEvent.click(screen.getByRole("dialog")); + expect(onDismiss).toHaveBeenCalled(); +}); + +test("Toast dismisses itself after the specified timeout", async () => { + withFakeTimers(() => { + const onDismiss = jest.fn(); + render( + + Hello world! + + ); + jest.advanceTimersByTime(2000); + expect(onDismiss).toHaveBeenCalled(); + }); +}); diff --git a/test/__snapshots__/Toast-test.tsx.snap b/test/__snapshots__/Toast-test.tsx.snap new file mode 100644 index 00000000..3391de02 --- /dev/null +++ b/test/__snapshots__/Toast-test.tsx.snap @@ -0,0 +1,22 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Toast renders 1`] = ` + +`; diff --git a/test/room/checkForParallelCalls-test.ts b/test/room/checkForParallelCalls-test.ts index 6b5f0166..0a1344df 100644 --- a/test/room/checkForParallelCalls-test.ts +++ b/test/room/checkForParallelCalls-test.ts @@ -18,15 +18,7 @@ import { Mocked, mocked } from "jest-mock"; import { RoomState } from "matrix-js-sdk/src/models/room-state"; import { PosthogAnalytics } from "../../src/analytics/PosthogAnalytics"; import { checkForParallelCalls } from "../../src/room/checkForParallelCalls"; - -const withFakeTimers = (continuation: () => void) => { - jest.useFakeTimers(); - try { - continuation(); - } finally { - jest.useRealTimers(); - } -}; +import { withFakeTimers } from "../utils"; const withMockedPosthog = ( continuation: (posthog: Mocked) => void diff --git a/test/utils.ts b/test/utils.ts new file mode 100644 index 00000000..9fb282ef --- /dev/null +++ b/test/utils.ts @@ -0,0 +1,24 @@ +/* +Copyright 2023 New Vector Ltd + +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 + + http://www.apache.org/licenses/LICENSE-2.0 + +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. +*/ + +export function withFakeTimers(continuation: () => void): void { + jest.useFakeTimers(); + try { + continuation(); + } finally { + jest.useRealTimers(); + } +} diff --git a/yarn.lock b/yarn.lock index f308df03..593a64af 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4394,6 +4394,11 @@ "@testing-library/dom" "^9.0.0" "@types/react-dom" "^18.0.0" +"@testing-library/user-event@^14.5.1": + version "14.5.1" + resolved "https://registry.yarnpkg.com/@testing-library/user-event/-/user-event-14.5.1.tgz#27337d72046d5236b32fd977edee3f74c71d332f" + integrity sha512-UCcUKrUYGj7ClomOo2SpNVvx4/fkd/2BbIHDCle8A0ax+P3bU7yJwDBDrS6ZwdTMARWTGODX1hEsCcO+7beJjg== + "@tootallnate/once@2": version "2.0.0" resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-2.0.0.tgz#f544a148d3ab35801c1f633a7441fd87c2e484bf" From 2069c13bb8650dcec80e180a84ada39f7c6de98d Mon Sep 17 00:00:00 2001 From: Robin Date: Wed, 27 Sep 2023 17:52:43 -0400 Subject: [PATCH 10/16] Regenerate strings --- public/locales/en-GB/app.json | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/public/locales/en-GB/app.json b/public/locales/en-GB/app.json index 6dd6e72b..a8f5f256 100644 --- a/public/locales/en-GB/app.json +++ b/public/locales/en-GB/app.json @@ -30,7 +30,7 @@ "Continue in browser": "Continue in browser", "Copied!": "Copied!", "Copy": "Copy", - "Copy and share this call link": "Copy and share this call link", + "Copy link": "Copy link", "Create account": "Create account", "Debug log": "Debug log", "Debug log request": "Debug log request", @@ -55,9 +55,12 @@ "If you are experiencing issues or simply would like to provide some feedback, please send us a short description below.": "If you are experiencing issues or simply would like to provide some feedback, please send us a short description below.", "Include debug logs": "Include debug logs", "Inspector": "Inspector", + "Invite": "Invite", + "Invite to this call": "Invite to this call", "Join call": "Join call", "Join call now": "Join call now", "Join existing call?": "Join existing call?", + "Link copied to clipboard": "Link copied to clipboard", "Loading…": "Loading…", "Local volume": "Local volume", "Logging in…": "Logging in…", @@ -92,9 +95,7 @@ "Sending debug logs…": "Sending debug logs…", "Sending…": "Sending…", "Settings": "Settings", - "Share": "Share", "Share screen": "Share screen", - "Share this call": "Share this call", "Sharing screen": "Sharing screen", "Show call inspector": "Show call inspector", "Show connection stats": "Show connection stats", From d0416e71cb4355e4fd9ea8f5a2afa071fc47bffb Mon Sep 17 00:00:00 2001 From: Robin Date: Wed, 27 Sep 2023 17:53:04 -0400 Subject: [PATCH 11/16] Fix the i18n string scanner Apparently the upgrade to i18next-parser v8 came with the deprecation of this 'useKeysAsDefaultValues' option, and this is the new way to configure that behavior. --- i18next-parser.config.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/i18next-parser.config.js b/i18next-parser.config.js index a12797ee..e5c99251 100644 --- a/i18next-parser.config.js +++ b/i18next-parser.config.js @@ -18,5 +18,6 @@ export default { output: "public/locales/$LOCALE/$NAMESPACE.json", input: ["src/**/*.{ts,tsx}"], sort: true, - useKeysAsDefaultValue: true, + // The key becomes the English version of the string + defaultValue: (_l, _ns, key) => key, }; From 916a88712a677c0ef03dbdcb2463a01e1483a666 Mon Sep 17 00:00:00 2001 From: Robin Date: Wed, 27 Sep 2023 18:12:04 -0400 Subject: [PATCH 12/16] Replace the avatar stack in the header with an icon This is a design update. --- public/locales/en-GB/app.json | 2 +- src/Facepile.tsx | 66 ----------------------------------- src/Header.module.css | 1 - src/Header.tsx | 23 ++++++------ src/room/GroupCallView.tsx | 23 +++++------- src/room/InCallView.tsx | 7 ++-- src/room/LobbyView.tsx | 9 +++-- 7 files changed, 29 insertions(+), 102 deletions(-) delete mode 100644 src/Facepile.tsx diff --git a/public/locales/en-GB/app.json b/public/locales/en-GB/app.json index 6dd6e72b..14ee2185 100644 --- a/public/locales/en-GB/app.json +++ b/public/locales/en-GB/app.json @@ -5,7 +5,6 @@ "{{count}} stars|other": "{{count}} stars", "{{displayName}} is presenting": "{{displayName}} is presenting", "{{displayName}}, your call has ended.": "{{displayName}}, your call has ended.", - "{{names, list(style: short;)}}": "{{names, list(style: short;)}}", "<0><1>You may withdraw consent by unchecking this box. If you are currently in a call, this setting will take effect at the end of the call.": "<0><1>You may withdraw consent by unchecking this box. If you are currently in a call, this setting will take effect at the end of the call.", "<0>Already have an account?<1><0>Log in Or <2>Access as a guest": "<0>Already have an account?<1><0>Log in Or <2>Access as a guest", "<0>Create an account Or <2>Access as a guest": "<0>Create an account Or <2>Access as a guest", @@ -74,6 +73,7 @@ "Not now, return to home screen": "Not now, return to home screen", "Not registered yet? <2>Create an account": "Not registered yet? <2>Create an account", "Open in the app": "Open in the app", + "Participants": "Participants", "Password": "Password", "Passwords must match": "Passwords must match", "Profile": "Profile", diff --git a/src/Facepile.tsx b/src/Facepile.tsx deleted file mode 100644 index 7ed995ce..00000000 --- a/src/Facepile.tsx +++ /dev/null @@ -1,66 +0,0 @@ -/* -Copyright 2022 New Vector Ltd - -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 - - http://www.apache.org/licenses/LICENSE-2.0 - -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. -*/ - -import { HTMLAttributes } from "react"; -import { MatrixClient } from "matrix-js-sdk/src/client"; -import { RoomMember } from "matrix-js-sdk/src/models/room-member"; -import { useTranslation } from "react-i18next"; -import { AvatarStack } from "@vector-im/compound-web"; - -import { Avatar, Size } from "./Avatar"; - -interface Props extends HTMLAttributes { - className?: string; - client: MatrixClient; - members: RoomMember[]; - max?: number; - size?: Size | number; -} - -export function Facepile({ - className, - client, - members, - max = 3, - size = Size.XS, - ...rest -}: Props) { - const { t } = useTranslation(); - - const displayedMembers = members.slice(0, max); - - return ( - m.name), - })} - {...rest} - > - {displayedMembers.map((member, i) => { - const avatarUrl = member.getMxcAvatarUrl(); - return ( - - ); - })} - - ); -} diff --git a/src/Header.module.css b/src/Header.module.css index 4f36182d..bb66034b 100644 --- a/src/Header.module.css +++ b/src/Header.module.css @@ -111,7 +111,6 @@ limitations under the License. display: flex; align-items: center; gap: var(--cpd-space-1-5x); - font: var(--cpd-font-body-sm-medium); } @media (min-width: 800px) { diff --git a/src/Header.tsx b/src/Header.tsx index aea3da71..3de71d59 100644 --- a/src/Header.tsx +++ b/src/Header.tsx @@ -18,13 +18,12 @@ import classNames from "classnames"; import { FC, HTMLAttributes, ReactNode } from "react"; import { Link } from "react-router-dom"; import { useTranslation } from "react-i18next"; -import { MatrixClient, RoomMember } from "matrix-js-sdk/src/matrix"; -import { Heading } from "@vector-im/compound-web"; +import { Heading, Text } from "@vector-im/compound-web"; +import { ReactComponent as UserProfileIcon } from "@vector-im/compound-design-tokens/icons/user-profile.svg"; import styles from "./Header.module.css"; import { ReactComponent as Logo } from "./icons/Logo.svg"; import { Avatar, Size } from "./Avatar"; -import { Facepile } from "./Facepile"; import { EncryptionLock } from "./room/EncryptionLock"; import { useMediaQuery } from "./useMediaQuery"; @@ -118,8 +117,7 @@ interface RoomHeaderInfoProps { name: string; avatarUrl: string | null; encrypted: boolean; - participants: RoomMember[]; - client: MatrixClient; + participantCount: number; } export const RoomHeaderInfo: FC = ({ @@ -127,8 +125,7 @@ export const RoomHeaderInfo: FC = ({ name, avatarUrl, encrypted, - participants, - client, + participantCount, }) => { const { t } = useTranslation(); const size = useMediaQuery("(max-width: 550px)") ? "sm" : "lg"; @@ -153,10 +150,16 @@ export const RoomHeaderInfo: FC = ({
- {participants.length > 0 && ( + {participantCount > 0 && (
- - {t("{{count, number}}", { count: participants.length })} + + + {t("{{count, number}}", { count: participantCount })} +
)}
diff --git a/src/room/GroupCallView.tsx b/src/room/GroupCallView.tsx index ab96926a..eade3f52 100644 --- a/src/room/GroupCallView.tsx +++ b/src/room/GroupCallView.tsx @@ -20,7 +20,7 @@ import { MatrixClient } from "matrix-js-sdk/src/client"; import { Room, isE2EESupported } from "livekit-client"; import { logger } from "matrix-js-sdk/src/logger"; import { MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSession"; -import { JoinRule, RoomMember } from "matrix-js-sdk/src/matrix"; +import { JoinRule } from "matrix-js-sdk/src/matrix"; import { Heading, Link, Text } from "@vector-im/compound-web"; import { useTranslation } from "react-i18next"; @@ -111,18 +111,11 @@ export function GroupCallView({ client, ]); - const participatingMembers = useMemo(() => { - const members: RoomMember[] = []; - // Count each member only once, regardless of how many devices they use - const addedUserIds = new Set(); - for (const membership of memberships) { - if (!addedUserIds.has(membership.member.userId)) { - addedUserIds.add(membership.member.userId); - members.push(membership.member); - } - } - return members; - }, [memberships]); + // Count each member only once, regardless of how many devices they use + const participantCount = useMemo( + () => new Set(memberships.map((m) => m.member.userId)).size, + [memberships] + ); const deviceContext = useMediaDevices(); const latestDevices = useRef(); @@ -340,7 +333,7 @@ export function GroupCallView({ client={client} matrixInfo={matrixInfo} rtcSession={rtcSession} - participatingMembers={participatingMembers} + participantCount={participantCount} onLeave={onLeave} hideHeader={hideHeader} muteStates={muteStates} @@ -391,7 +384,7 @@ export function GroupCallView({ onEnter={() => enterRTCSession(rtcSession)} confineToRoom={confineToRoom} hideHeader={hideHeader} - participatingMembers={participatingMembers} + participantCount={participantCount} onShareClick={onShareClick} /> diff --git a/src/room/InCallView.tsx b/src/room/InCallView.tsx index 313cc42f..4c0ceddb 100644 --- a/src/room/InCallView.tsx +++ b/src/room/InCallView.tsx @@ -120,7 +120,7 @@ export interface InCallViewProps { rtcSession: MatrixRTCSession; livekitRoom: Room; muteStates: MuteStates; - participatingMembers: RoomMember[]; + participantCount: number; onLeave: (error?: Error) => void; hideHeader: boolean; otelGroupCallMembership?: OTelGroupCallMembership; @@ -134,7 +134,7 @@ export function InCallView({ rtcSession, livekitRoom, muteStates, - participatingMembers, + participantCount, onLeave, hideHeader, otelGroupCallMembership, @@ -411,8 +411,7 @@ export function InCallView({ name={matrixInfo.roomName} avatarUrl={matrixInfo.roomAvatar} encrypted={matrixInfo.roomEncrypted} - participants={participatingMembers} - client={client} + participantCount={participantCount} /> diff --git a/src/room/LobbyView.tsx b/src/room/LobbyView.tsx index fe8ccd9d..7703206b 100644 --- a/src/room/LobbyView.tsx +++ b/src/room/LobbyView.tsx @@ -16,7 +16,7 @@ limitations under the License. import { FC, useCallback, useState } from "react"; import { useTranslation } from "react-i18next"; -import { MatrixClient, RoomMember } from "matrix-js-sdk/src/matrix"; +import { MatrixClient } from "matrix-js-sdk/src/matrix"; import { Button, Link } from "@vector-im/compound-web"; import classNames from "classnames"; import { useHistory } from "react-router-dom"; @@ -44,7 +44,7 @@ interface Props { onEnter: () => void; confineToRoom: boolean; hideHeader: boolean; - participatingMembers: RoomMember[]; + participantCount: number; onShareClick: (() => void) | null; } @@ -55,7 +55,7 @@ export const LobbyView: FC = ({ onEnter, confineToRoom, hideHeader, - participatingMembers, + participantCount, onShareClick, }) => { const { t } = useTranslation(); @@ -104,8 +104,7 @@ export const LobbyView: FC = ({ name={matrixInfo.roomName} avatarUrl={matrixInfo.roomAvatar} encrypted={matrixInfo.roomEncrypted} - participants={participatingMembers} - client={client} + participantCount={participantCount} /> From a7556f66b1b2ba53d0f8bef55dc3cc582b5b71a7 Mon Sep 17 00:00:00 2001 From: Robin Date: Wed, 27 Sep 2023 18:35:38 -0400 Subject: [PATCH 13/16] Update the colors of name tags This was changed in the designs so we don't have to hard-code colors for them anymore. --- src/video-grid/VideoTile.module.css | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/src/video-grid/VideoTile.module.css b/src/video-grid/VideoTile.module.css index 6b302775..3b0238d8 100644 --- a/src/video-grid/VideoTile.module.css +++ b/src/video-grid/VideoTile.module.css @@ -71,8 +71,7 @@ limitations under the License. padding: var(--cpd-space-1x); padding-block: var(--cpd-space-1x); color: var(--cpd-color-text-primary); - /* TODO: un-hardcode this color. It comes from the dark theme. */ - background-color: rgba(237, 244, 252, 0.79); + background-color: var(--cpd-color-bg-canvas-default); display: flex; align-items: center; border-radius: var(--cpd-radius-pill-effect); @@ -83,11 +82,6 @@ limitations under the License. box-shadow: var(--small-drop-shadow); } -:global(.cpd-theme-dark) .nameTag { - /* TODO: un-hardcode this color. It comes from the light theme. */ - background-color: rgba(2, 7, 13, 0.77); -} - .nameTag > svg { flex-shrink: 0; } From 2730cea181cd27ae9b5353a736af57b1dc75c472 Mon Sep 17 00:00:00 2001 From: Robin Date: Wed, 27 Sep 2023 19:06:10 -0400 Subject: [PATCH 14/16] Fix imports --- package.json | 2 +- src/E2EEBanner.tsx | 2 +- src/Header.tsx | 2 +- src/Modal.tsx | 2 +- src/UserMenu.tsx | 8 ++++---- src/auth/LoginPage.tsx | 2 +- src/auth/RegisterPage.tsx | 2 +- src/button/Button.tsx | 20 ++++++++++---------- src/button/CopyButton.tsx | 4 ++-- src/button/ShareButton.tsx | 2 +- src/button/VolumeIcon.tsx | 6 +++--- src/input/AvatarInputField.tsx | 2 +- src/input/Input.tsx | 2 +- src/input/SelectInput.tsx | 2 +- src/input/StarRatingInput.tsx | 4 ++-- src/room/AppSelectionModal.tsx | 2 +- src/room/EncryptionLock.tsx | 4 ++-- src/room/InCallView.tsx | 4 ++-- src/room/LayoutToggle.tsx | 4 ++-- src/settings/SettingsModal.tsx | 12 ++++++------ src/tabs/Tabs.stories.tsx | 6 +++--- src/video-grid/VideoTile.tsx | 4 ++-- test/mocks/svgr.ts | 4 ++-- 23 files changed, 51 insertions(+), 51 deletions(-) diff --git a/package.json b/package.json index 84ef350a..d763f529 100644 --- a/package.json +++ b/package.json @@ -134,7 +134,7 @@ ], "moduleNameMapper": { "\\.css$": "identity-obj-proxy", - "\\.svg$": "/test/mocks/svgr.ts", + "\\.svg\\?react$": "/test/mocks/svgr.ts", "^\\./IndexedDBWorker\\?worker$": "/test/mocks/workerMock.ts", "^\\./olm$": "/test/mocks/olmMock.ts" }, diff --git a/src/E2EEBanner.tsx b/src/E2EEBanner.tsx index 774f3582..c4223b2d 100644 --- a/src/E2EEBanner.tsx +++ b/src/E2EEBanner.tsx @@ -18,7 +18,7 @@ import { Trans } from "react-i18next"; import { Banner } from "./Banner"; import styles from "./E2EEBanner.module.css"; -import { ReactComponent as LockOffIcon } from "./icons/LockOff.svg"; +import LockOffIcon from "./icons/LockOff.svg?react"; import { useEnableE2EE } from "./settings/useSetting"; export const E2EEBanner = () => { diff --git a/src/Header.tsx b/src/Header.tsx index aea3da71..7c2937cf 100644 --- a/src/Header.tsx +++ b/src/Header.tsx @@ -22,7 +22,7 @@ import { MatrixClient, RoomMember } from "matrix-js-sdk/src/matrix"; import { Heading } from "@vector-im/compound-web"; import styles from "./Header.module.css"; -import { ReactComponent as Logo } from "./icons/Logo.svg"; +import Logo from "./icons/Logo.svg?react"; import { Avatar, Size } from "./Avatar"; import { Facepile } from "./Facepile"; import { EncryptionLock } from "./room/EncryptionLock"; diff --git a/src/Modal.tsx b/src/Modal.tsx index b644abe4..ac701402 100644 --- a/src/Modal.tsx +++ b/src/Modal.tsx @@ -27,7 +27,7 @@ import { } from "@radix-ui/react-dialog"; import { Drawer } from "vaul"; import { VisuallyHidden } from "@radix-ui/react-visually-hidden"; -import { ReactComponent as CloseIcon } from "@vector-im/compound-design-tokens/icons/close.svg"; +import CloseIcon from "@vector-im/compound-design-tokens/icons/close.svg?react"; import classNames from "classnames"; import { Heading } from "@vector-im/compound-web"; diff --git a/src/UserMenu.tsx b/src/UserMenu.tsx index 515e71f0..42f31951 100644 --- a/src/UserMenu.tsx +++ b/src/UserMenu.tsx @@ -24,10 +24,10 @@ import { PopoverMenuTrigger } from "./popover/PopoverMenu"; import { Menu } from "./Menu"; import { TooltipTrigger } from "./Tooltip"; import { Avatar, Size } from "./Avatar"; -import { ReactComponent as UserIcon } from "./icons/User.svg"; -import { ReactComponent as SettingsIcon } from "./icons/Settings.svg"; -import { ReactComponent as LoginIcon } from "./icons/Login.svg"; -import { ReactComponent as LogoutIcon } from "./icons/Logout.svg"; +import UserIcon from "./icons/User.svg?react"; +import SettingsIcon from "./icons/Settings.svg?react"; +import LoginIcon from "./icons/Login.svg?react"; +import LogoutIcon from "./icons/Logout.svg?react"; import { Body } from "./typography/Typography"; import styles from "./UserMenu.module.css"; diff --git a/src/auth/LoginPage.tsx b/src/auth/LoginPage.tsx index f17f24fa..6569f262 100644 --- a/src/auth/LoginPage.tsx +++ b/src/auth/LoginPage.tsx @@ -18,7 +18,7 @@ import { FC, FormEvent, useCallback, useRef, useState } from "react"; import { useHistory, useLocation, Link } from "react-router-dom"; import { Trans, useTranslation } from "react-i18next"; -import { ReactComponent as Logo } from "../icons/LogoLarge.svg"; +import Logo from "../icons/LogoLarge.svg?react"; import { useClient } from "../ClientContext"; import { FieldRow, InputField, ErrorMessage } from "../input/Input"; import { Button } from "../button"; diff --git a/src/auth/RegisterPage.tsx b/src/auth/RegisterPage.tsx index d0c22fc8..52c652f6 100644 --- a/src/auth/RegisterPage.tsx +++ b/src/auth/RegisterPage.tsx @@ -34,7 +34,7 @@ import { Button } from "../button"; import { useClientLegacy } from "../ClientContext"; import { useInteractiveRegistration } from "./useInteractiveRegistration"; import styles from "./LoginPage.module.css"; -import { ReactComponent as Logo } from "../icons/LogoLarge.svg"; +import Logo from "../icons/LogoLarge.svg?react"; import { LoadingView } from "../FullScreenView"; import { useRecaptcha } from "./useRecaptcha"; import { Caption, Link } from "../typography/Typography"; diff --git a/src/button/Button.tsx b/src/button/Button.tsx index 3d269dc2..efb9f295 100644 --- a/src/button/Button.tsx +++ b/src/button/Button.tsx @@ -20,18 +20,18 @@ import { useButton } from "@react-aria/button"; import { mergeProps, useObjectRef } from "@react-aria/utils"; import { useTranslation } from "react-i18next"; import { Tooltip } from "@vector-im/compound-web"; -import { ReactComponent as MicOnSolidIcon } from "@vector-im/compound-design-tokens/icons/mic-on-solid.svg"; -import { ReactComponent as MicOffSolidIcon } from "@vector-im/compound-design-tokens/icons/mic-off-solid.svg"; -import { ReactComponent as VideoCallIcon } from "@vector-im/compound-design-tokens/icons/video-call.svg"; -import { ReactComponent as VideoCallOffIcon } from "@vector-im/compound-design-tokens/icons/video-call-off.svg"; -import { ReactComponent as EndCallIcon } from "@vector-im/compound-design-tokens/icons/end-call.svg"; -import { ReactComponent as ShareScreenSolidIcon } from "@vector-im/compound-design-tokens/icons/share-screen-solid.svg"; -import { ReactComponent as SettingsSolidIcon } from "@vector-im/compound-design-tokens/icons/settings-solid.svg"; -import { ReactComponent as ChevronDownIcon } from "@vector-im/compound-design-tokens/icons/chevron-down.svg"; +import MicOnSolidIcon from "@vector-im/compound-design-tokens/icons/mic-on-solid.svg?react"; +import MicOffSolidIcon from "@vector-im/compound-design-tokens/icons/mic-off-solid.svg?react"; +import VideoCallIcon from "@vector-im/compound-design-tokens/icons/video-call.svg?react"; +import VideoCallOffIcon from "@vector-im/compound-design-tokens/icons/video-call-off.svg?react"; +import EndCallIcon from "@vector-im/compound-design-tokens/icons/end-call.svg?react"; +import ShareScreenSolidIcon from "@vector-im/compound-design-tokens/icons/share-screen-solid.svg?react"; +import SettingsSolidIcon from "@vector-im/compound-design-tokens/icons/settings-solid.svg?react"; +import ChevronDownIcon from "@vector-im/compound-design-tokens/icons/chevron-down.svg?react"; import styles from "./Button.module.css"; -import { ReactComponent as Fullscreen } from "../icons/Fullscreen.svg"; -import { ReactComponent as FullscreenExit } from "../icons/FullscreenExit.svg"; +import Fullscreen from "../icons/Fullscreen.svg?react"; +import FullscreenExit from "../icons/FullscreenExit.svg?react"; import { VolumeIcon } from "./VolumeIcon"; export type ButtonVariant = diff --git a/src/button/CopyButton.tsx b/src/button/CopyButton.tsx index 91c8e750..c2631c6e 100644 --- a/src/button/CopyButton.tsx +++ b/src/button/CopyButton.tsx @@ -17,8 +17,8 @@ limitations under the License. import { useTranslation } from "react-i18next"; import useClipboard from "react-use-clipboard"; -import { ReactComponent as CheckIcon } from "../icons/Check.svg"; -import { ReactComponent as CopyIcon } from "../icons/Copy.svg"; +import CheckIcon from "../icons/Check.svg?react"; +import CopyIcon from "../icons/Copy.svg?react"; import { Button, ButtonVariant } from "./Button"; interface Props { diff --git a/src/button/ShareButton.tsx b/src/button/ShareButton.tsx index 2f7f1334..02c0fc9c 100644 --- a/src/button/ShareButton.tsx +++ b/src/button/ShareButton.tsx @@ -17,7 +17,7 @@ limitations under the License. import { ComponentPropsWithoutRef, FC } from "react"; import { Button } from "@vector-im/compound-web"; import { useTranslation } from "react-i18next"; -import { ReactComponent as UserAddSolidIcon } from "@vector-im/compound-design-tokens/icons/user-add-solid.svg"; +import UserAddSolidIcon from "@vector-im/compound-design-tokens/icons/user-add-solid.svg?react"; export const ShareButton: FC< Omit, "children"> diff --git a/src/button/VolumeIcon.tsx b/src/button/VolumeIcon.tsx index 00aebb06..626dcece 100644 --- a/src/button/VolumeIcon.tsx +++ b/src/button/VolumeIcon.tsx @@ -17,9 +17,9 @@ limitations under the License. import { ComponentPropsWithoutRef, FC } from "react"; -import { ReactComponent as AudioMuted } from "../icons/AudioMuted.svg"; -import { ReactComponent as AudioLow } from "../icons/AudioLow.svg"; -import { ReactComponent as Audio } from "../icons/Audio.svg"; +import AudioMuted from "../icons/AudioMuted.svg?react"; +import AudioLow from "../icons/AudioLow.svg?react"; +import Audio from "../icons/Audio.svg?react"; interface Props extends ComponentPropsWithoutRef<"svg"> { /** diff --git a/src/input/AvatarInputField.tsx b/src/input/AvatarInputField.tsx index 8a069718..b8897c4a 100644 --- a/src/input/AvatarInputField.tsx +++ b/src/input/AvatarInputField.tsx @@ -28,7 +28,7 @@ import { useTranslation } from "react-i18next"; import { Avatar, Size } from "../Avatar"; import { Button } from "../button"; -import { ReactComponent as EditIcon } from "../icons/Edit.svg"; +import EditIcon from "../icons/Edit.svg?react"; import styles from "./AvatarInputField.module.css"; interface Props extends AllHTMLAttributes { diff --git a/src/input/Input.tsx b/src/input/Input.tsx index 387d02d0..b6826681 100644 --- a/src/input/Input.tsx +++ b/src/input/Input.tsx @@ -25,7 +25,7 @@ import { import classNames from "classnames"; import styles from "./Input.module.css"; -import { ReactComponent as CheckIcon } from "../icons/Check.svg"; +import CheckIcon from "../icons/Check.svg?react"; import { TranslatedError } from "../TranslatedError"; interface FieldRowProps { diff --git a/src/input/SelectInput.tsx b/src/input/SelectInput.tsx index ff6ea7c3..0feb346e 100644 --- a/src/input/SelectInput.tsx +++ b/src/input/SelectInput.tsx @@ -24,7 +24,7 @@ import { useTranslation } from "react-i18next"; import { Popover } from "../popover/Popover"; import { ListBox } from "../ListBox"; import styles from "./SelectInput.module.css"; -import { ReactComponent as ArrowDownIcon } from "../icons/ArrowDown.svg"; +import ArrowDownIcon from "../icons/ArrowDown.svg?react"; interface Props extends AriaSelectOptions { className?: string; diff --git a/src/input/StarRatingInput.tsx b/src/input/StarRatingInput.tsx index 3017a117..8667998e 100644 --- a/src/input/StarRatingInput.tsx +++ b/src/input/StarRatingInput.tsx @@ -17,8 +17,8 @@ import { useState } from "react"; import { useTranslation } from "react-i18next"; import styles from "./StarRatingInput.module.css"; -import { ReactComponent as StarSelected } from "../icons/StarSelected.svg"; -import { ReactComponent as StarUnselected } from "../icons/StarUnselected.svg"; +import StarSelected from "../icons/StarSelected.svg?react"; +import StarUnselected from "../icons/StarUnselected.svg?react"; interface Props { starCount: number; diff --git a/src/room/AppSelectionModal.tsx b/src/room/AppSelectionModal.tsx index a6216ee1..8220ffbc 100644 --- a/src/room/AppSelectionModal.tsx +++ b/src/room/AppSelectionModal.tsx @@ -17,7 +17,7 @@ limitations under the License. import { FC, MouseEvent, useCallback, useMemo, useState } from "react"; import { useTranslation } from "react-i18next"; import { Button, Text } from "@vector-im/compound-web"; -import { ReactComponent as PopOutIcon } from "@vector-im/compound-design-tokens/icons/pop-out.svg"; +import PopOutIcon from "@vector-im/compound-design-tokens/icons/pop-out.svg?react"; import { logger } from "matrix-js-sdk/src/logger"; import { Modal } from "../Modal"; diff --git a/src/room/EncryptionLock.tsx b/src/room/EncryptionLock.tsx index 6544a35b..a96edee2 100644 --- a/src/room/EncryptionLock.tsx +++ b/src/room/EncryptionLock.tsx @@ -17,8 +17,8 @@ limitations under the License. import { FC } from "react"; import { Tooltip } from "@vector-im/compound-web"; import { useTranslation } from "react-i18next"; -import { ReactComponent as LockIcon } from "@vector-im/compound-design-tokens/icons/lock.svg"; -import { ReactComponent as LockOffIcon } from "@vector-im/compound-design-tokens/icons/lock-off.svg"; +import LockIcon from "@vector-im/compound-design-tokens/icons/lock.svg?react"; +import LockOffIcon from "@vector-im/compound-design-tokens/icons/lock-off.svg?react"; import styles from "./EncryptionLock.module.css"; diff --git a/src/room/InCallView.tsx b/src/room/InCallView.tsx index 313cc42f..bab0da04 100644 --- a/src/room/InCallView.tsx +++ b/src/room/InCallView.tsx @@ -33,8 +33,8 @@ import useMeasure from "react-use-measure"; import { logger } from "matrix-js-sdk/src/logger"; import { MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSession"; -import { ReactComponent as LogoMark } from "../icons/LogoMark.svg"; -import { ReactComponent as LogoType } from "../icons/LogoType.svg"; +import LogoMark from "../icons/LogoMark.svg?react"; +import LogoType from "../icons/LogoType.svg?react"; import type { IWidgetApiRequest } from "matrix-widget-api"; import { HangupButton, diff --git a/src/room/LayoutToggle.tsx b/src/room/LayoutToggle.tsx index 5252204b..88d9aef7 100644 --- a/src/room/LayoutToggle.tsx +++ b/src/room/LayoutToggle.tsx @@ -17,8 +17,8 @@ limitations under the License. import { ChangeEvent, FC, useCallback, useId } from "react"; import { useTranslation } from "react-i18next"; import { Tooltip } from "@vector-im/compound-web"; -import { ReactComponent as SpotlightViewIcon } from "@vector-im/compound-design-tokens/icons/spotlight-view.svg"; -import { ReactComponent as GridViewIcon } from "@vector-im/compound-design-tokens/icons/grid-view.svg"; +import SpotlightViewIcon from "@vector-im/compound-design-tokens/icons/spotlight-view.svg?react"; +import GridViewIcon from "@vector-im/compound-design-tokens/icons/grid-view.svg?react"; import classNames from "classnames"; import styles from "./LayoutToggle.module.css"; diff --git a/src/settings/SettingsModal.tsx b/src/settings/SettingsModal.tsx index 5f01e4ce..3a6d9649 100644 --- a/src/settings/SettingsModal.tsx +++ b/src/settings/SettingsModal.tsx @@ -22,12 +22,12 @@ import { MatrixClient } from "matrix-js-sdk"; import { Modal } from "../Modal"; import styles from "./SettingsModal.module.css"; import { TabContainer, TabItem } from "../tabs/Tabs"; -import { ReactComponent as AudioIcon } from "../icons/Audio.svg"; -import { ReactComponent as VideoIcon } from "../icons/Video.svg"; -import { ReactComponent as DeveloperIcon } from "../icons/Developer.svg"; -import { ReactComponent as OverflowIcon } from "../icons/Overflow.svg"; -import { ReactComponent as UserIcon } from "../icons/User.svg"; -import { ReactComponent as FeedbackIcon } from "../icons/Feedback.svg"; +import AudioIcon from "../icons/Audio.svg?react"; +import VideoIcon from "../icons/Video.svg?react"; +import DeveloperIcon from "../icons/Developer.svg?react"; +import OverflowIcon from "../icons/Overflow.svg?react"; +import UserIcon from "../icons/User.svg?react"; +import FeedbackIcon from "../icons/Feedback.svg?react"; import { SelectInput } from "../input/SelectInput"; import { useShowInspector, diff --git a/src/tabs/Tabs.stories.tsx b/src/tabs/Tabs.stories.tsx index 87d76baf..9b921621 100644 --- a/src/tabs/Tabs.stories.tsx +++ b/src/tabs/Tabs.stories.tsx @@ -17,9 +17,9 @@ limitations under the License. import { FC } from "react"; import { TabContainer, TabItem } from "./Tabs"; -import { ReactComponent as AudioIcon } from "../icons/Audio.svg"; -import { ReactComponent as VideoIcon } from "../icons/Video.svg"; -import { ReactComponent as DeveloperIcon } from "../icons/Developer.svg"; +import AudioIcon from "../icons/Audio.svg?react"; +import VideoIcon from "../icons/Video.svg?react"; +import DeveloperIcon from "../icons/Developer.svg?react"; import { Body } from "../typography/Typography"; export default { diff --git a/src/video-grid/VideoTile.tsx b/src/video-grid/VideoTile.tsx index c8e9fedf..3ab2ee83 100644 --- a/src/video-grid/VideoTile.tsx +++ b/src/video-grid/VideoTile.tsx @@ -34,8 +34,8 @@ import { RoomMember, RoomMemberEvent, } from "matrix-js-sdk/src/models/room-member"; -import { ReactComponent as MicOnSolidIcon } from "@vector-im/compound-design-tokens/icons/mic-on-solid.svg"; -import { ReactComponent as MicOffSolidIcon } from "@vector-im/compound-design-tokens/icons/mic-off-solid.svg"; +import MicOnSolidIcon from "@vector-im/compound-design-tokens/icons/mic-on-solid.svg?react"; +import MicOffSolidIcon from "@vector-im/compound-design-tokens/icons/mic-off-solid.svg?react"; import { Text } from "@vector-im/compound-web"; import { Avatar } from "../Avatar"; diff --git a/test/mocks/svgr.ts b/test/mocks/svgr.ts index 18490609..cb6723c1 100644 --- a/test/mocks/svgr.ts +++ b/test/mocks/svgr.ts @@ -1,3 +1,3 @@ // Mock file for SVG imports -export default "SvgrURL"; -export const ReactComponent = "div"; +const ReactComponent = "svg"; +export default ReactComponent; From 8fe029d5fa449e0f91fef056ca93cef4533aed98 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Thu, 28 Sep 2023 09:45:11 +0000 Subject: [PATCH 15/16] Update dependency posthog-js to v1.81.2 --- yarn.lock | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/yarn.lock b/yarn.lock index e391a591..87d36fc5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -13398,9 +13398,9 @@ postcss@^8.4.27: source-map-js "^1.0.2" posthog-js@^1.29.0: - version "1.81.1" - resolved "https://registry.yarnpkg.com/posthog-js/-/posthog-js-1.81.1.tgz#43f454bf57d0ff649c990e28660bb9a0a292267e" - integrity sha512-pQfG9ZGVn3R7Uh1cC/S02trZ6u4TOLs1NhZG3WiNrqMKDA8MJQjZ/PqdkLO0/BeozRBfIbON6pw3xfOIneIclg== + version "1.81.2" + resolved "https://registry.yarnpkg.com/posthog-js/-/posthog-js-1.81.2.tgz#0065b213c2d1ba1f9c167dc881e16656f5c70c07" + integrity sha512-3QLdn7koy7n+nj23HAr/KbVYwOmQcCn0K/5zlaWazef8t4s5L8JgJSMkw96pDRuAYfYcUCr9yWLQDpDakPiIHQ== dependencies: fflate "^0.4.1" From 44a4d7a1d0d742fc4e2d1835df442471adfbde53 Mon Sep 17 00:00:00 2001 From: Robin Date: Thu, 28 Sep 2023 09:44:00 -0400 Subject: [PATCH 16/16] Fix a broken SVG import https://github.com/vector-im/element-call/pull/1642 raced with https://github.com/vector-im/element-call/pull/1625, resulting in a broken import. --- src/Header.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Header.tsx b/src/Header.tsx index 2f98c83f..848319f2 100644 --- a/src/Header.tsx +++ b/src/Header.tsx @@ -19,7 +19,7 @@ import { FC, HTMLAttributes, ReactNode } from "react"; import { Link } from "react-router-dom"; import { useTranslation } from "react-i18next"; import { Heading, Text } from "@vector-im/compound-web"; -import { ReactComponent as UserProfileIcon } from "@vector-im/compound-design-tokens/icons/user-profile.svg"; +import UserProfileIcon from "@vector-im/compound-design-tokens/icons/user-profile.svg?react"; import styles from "./Header.module.css"; import Logo from "./icons/Logo.svg?react";