From e3d5c84b17f6682910bbc00a7f986a2d295dd6a0 Mon Sep 17 00:00:00 2001 From: Robin Townsend Date: Wed, 10 May 2023 10:53:52 -0400 Subject: [PATCH 01/14] Update react-spring Just in case this has a chance of fixing https://github.com/vector-im/element-call/issues/960 --- yarn.lock | 70 +++++++++++++++++++++++++++---------------------------- 1 file changed, 35 insertions(+), 35 deletions(-) diff --git a/yarn.lock b/yarn.lock index 8c97326..0898d15 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2264,51 +2264,51 @@ "@react-aria/utils" "^3.13.1" clsx "^1.1.1" -"@react-spring/animated@~9.4.5": - version "9.4.5" - resolved "https://registry.yarnpkg.com/@react-spring/animated/-/animated-9.4.5.tgz#dd9921c716a4f4a3ed29491e0c0c9f8ca0eb1a54" - integrity sha512-KWqrtvJSMx6Fj9nMJkhTwM9r6LIriExDRV6YHZV9HKQsaolUFppgkOXpC+rsL1JEtEvKv6EkLLmSqHTnuYjiIA== +"@react-spring/animated@~9.7.2": + version "9.7.2" + resolved "https://registry.yarnpkg.com/@react-spring/animated/-/animated-9.7.2.tgz#0119db8075e91d693ec45c42575541e01b104a70" + integrity sha512-ipvleJ99ipqlnHkz5qhSsgf/ny5aW0ZG8Q+/2Oj9cI7LCc7COdnrSO6V/v8MAX3JOoQNzfz6dye2s5Pt5jGaIA== dependencies: - "@react-spring/shared" "~9.4.5" - "@react-spring/types" "~9.4.5" + "@react-spring/shared" "~9.7.2" + "@react-spring/types" "~9.7.2" -"@react-spring/core@~9.4.5": - version "9.4.5" - resolved "https://registry.yarnpkg.com/@react-spring/core/-/core-9.4.5.tgz#4616e1adc18dd10f5731f100ebdbe9518b89ba3c" - integrity sha512-83u3FzfQmGMJFwZLAJSwF24/ZJctwUkWtyPD7KYtNagrFeQKUH1I05ZuhmCmqW+2w1KDW1SFWQ43RawqfXKiiQ== +"@react-spring/core@~9.7.2": + version "9.7.2" + resolved "https://registry.yarnpkg.com/@react-spring/core/-/core-9.7.2.tgz#804ebadee45a6adff00886454d6f1c5d97ee219d" + integrity sha512-fF512edZT/gKVCA90ZRxfw1DmELeVwiL4OC2J6bMUlNr707C0h4QRoec6DjzG27uLX2MvS1CEatf9KRjwZR9/w== dependencies: - "@react-spring/animated" "~9.4.5" - "@react-spring/rafz" "~9.4.5" - "@react-spring/shared" "~9.4.5" - "@react-spring/types" "~9.4.5" + "@react-spring/animated" "~9.7.2" + "@react-spring/rafz" "~9.7.2" + "@react-spring/shared" "~9.7.2" + "@react-spring/types" "~9.7.2" -"@react-spring/rafz@~9.4.5": - version "9.4.5" - resolved "https://registry.yarnpkg.com/@react-spring/rafz/-/rafz-9.4.5.tgz#84f809f287f2a66bbfbc66195db340482f886bd7" - integrity sha512-swGsutMwvnoyTRxvqhfJBtGM8Ipx6ks0RkIpNX9F/U7XmyPvBMGd3GgX/mqxZUpdlsuI1zr/jiYw+GXZxAlLcQ== +"@react-spring/rafz@~9.7.2": + version "9.7.2" + resolved "https://registry.yarnpkg.com/@react-spring/rafz/-/rafz-9.7.2.tgz#77e7088c215e05cf893851cd87ceb40d89f2a7d7" + integrity sha512-kDWMYDQto3+flkrX3vy6DU/l9pxQ4TVW91DglQEc11iDc7shF4+WVDRJvOVLX+xoMP7zyag1dMvlIgvQ+dvA/A== -"@react-spring/shared@~9.4.5": - version "9.4.5" - resolved "https://registry.yarnpkg.com/@react-spring/shared/-/shared-9.4.5.tgz#4c3ad817bca547984fb1539204d752a412a6d829" - integrity sha512-JhMh3nFKsqyag0KM5IIM8BQANGscTdd0mMv3BXsUiMZrcjQTskyfnv5qxEeGWbJGGar52qr5kHuBHtCjQOzniA== +"@react-spring/shared@~9.7.2": + version "9.7.2" + resolved "https://registry.yarnpkg.com/@react-spring/shared/-/shared-9.7.2.tgz#b8485617bdcc9f6348b245922051fb534e07c566" + integrity sha512-6U9qkno+9DxlH5nSltnPs+kU6tYKf0bPLURX2te13aGel8YqgcpFYp5Av8DcN2x3sukinAsmzHUS/FRsdZMMBA== dependencies: - "@react-spring/rafz" "~9.4.5" - "@react-spring/types" "~9.4.5" + "@react-spring/rafz" "~9.7.2" + "@react-spring/types" "~9.7.2" -"@react-spring/types@~9.4.5": - version "9.4.5" - resolved "https://registry.yarnpkg.com/@react-spring/types/-/types-9.4.5.tgz#9c71e5ff866b5484a7ef3db822bf6c10e77bdd8c" - integrity sha512-mpRIamoHwql0ogxEUh9yr4TP0xU5CWyZxVQeccGkHHF8kPMErtDXJlxyo0lj+telRF35XNihtPTWoflqtyARmg== +"@react-spring/types@~9.7.2": + version "9.7.2" + resolved "https://registry.yarnpkg.com/@react-spring/types/-/types-9.7.2.tgz#e04dd72755d88b0e3163ba143ecd8ba78b68a5b0" + integrity sha512-GEflx2Ex/TKVMHq5g5MxQDNNPNhqg+4Db9m7+vGTm8ttZiyga7YQUF24shgRNebKIjahqCuei16SZga8h1pe4g== "@react-spring/web@^9.4.4": - version "9.4.5" - resolved "https://registry.yarnpkg.com/@react-spring/web/-/web-9.4.5.tgz#b92f05b87cdc0963a59ee149e677dcaff09f680e" - integrity sha512-NGAkOtKmOzDEctL7MzRlQGv24sRce++0xAY7KlcxmeVkR7LRSGkoXHaIfm9ObzxPMcPHQYQhf3+X9jepIFNHQA== + version "9.7.2" + resolved "https://registry.yarnpkg.com/@react-spring/web/-/web-9.7.2.tgz#76e53dd24033764c3062f9927f88b0f3194688d4" + integrity sha512-7qNc7/5KShu2D05x7o2Ols2nUE7mCKfKLaY2Ix70xPMfTle1sZisoQMBFgV9w/fSLZlHZHV9P0uWJqEXQnbV4Q== dependencies: - "@react-spring/animated" "~9.4.5" - "@react-spring/core" "~9.4.5" - "@react-spring/shared" "~9.4.5" - "@react-spring/types" "~9.4.5" + "@react-spring/animated" "~9.7.2" + "@react-spring/core" "~9.7.2" + "@react-spring/shared" "~9.7.2" + "@react-spring/types" "~9.7.2" "@react-stately/collections@^3.3.4", "@react-stately/collections@^3.4.1": version "3.4.1" From 099dcd28c73f09312e712a04ad9d2b4cebe6e54d Mon Sep 17 00:00:00 2001 From: Michael Kaye <1917473+michaelkaye@users.noreply.github.com> Date: Thu, 11 May 2023 14:29:01 +0100 Subject: [PATCH 02/14] Test tags for invite links; joining call by UR:; getting call name. --- src/Header.tsx | 2 +- src/Modal.tsx | 1 + src/room/InviteModal.tsx | 1 + src/room/LobbyView.tsx | 1 + src/room/OverflowMenu.tsx | 4 ++-- src/room/RoomAuthView.tsx | 3 ++- 6 files changed, 8 insertions(+), 4 deletions(-) diff --git a/src/Header.tsx b/src/Header.tsx index 7ccf866..5a4f7f5 100644 --- a/src/Header.tsx +++ b/src/Header.tsx @@ -134,7 +134,7 @@ export function RoomHeaderInfo({ roomName, avatarUrl }: RoomHeaderInfo) { /> - {roomName} + {roomName} ); } diff --git a/src/Modal.tsx b/src/Modal.tsx index 2665e11..6734e88 100644 --- a/src/Modal.tsx +++ b/src/Modal.tsx @@ -92,6 +92,7 @@ export function Modal({ {...closeButtonProps} ref={closeButtonRef} className={styles.closeButton} + data-testid="modal_close" title={t("Close")} > diff --git a/src/room/InviteModal.tsx b/src/room/InviteModal.tsx index a7f7ba5..9db8fdd 100644 --- a/src/room/InviteModal.tsx +++ b/src/room/InviteModal.tsx @@ -41,6 +41,7 @@ export const InviteModal: FC = ({ roomIdOrAlias, ...rest }) => { diff --git a/src/room/LobbyView.tsx b/src/room/LobbyView.tsx index 2e726cc..d05a848 100644 --- a/src/room/LobbyView.tsx +++ b/src/room/LobbyView.tsx @@ -147,6 +147,7 @@ export function LobbyView({ value={getRoomUrl(roomIdOrAlias)} className={styles.copyButton} copiedMessage={t("Call link copied")} + data-testid="lobby_inviteLink" > Copy call link and join later diff --git a/src/room/OverflowMenu.tsx b/src/room/OverflowMenu.tsx index 0920f2d..cfd5fb9 100644 --- a/src/room/OverflowMenu.tsx +++ b/src/room/OverflowMenu.tsx @@ -102,7 +102,7 @@ export function OverflowMenu({ <> - @@ -111,7 +111,7 @@ export function OverflowMenu({ {showInvite && ( - {t("Invite people")} + {t("Invite people")} )} diff --git a/src/room/RoomAuthView.tsx b/src/room/RoomAuthView.tsx index 11b20b8..c3ccf0a 100644 --- a/src/room/RoomAuthView.tsx +++ b/src/room/RoomAuthView.tsx @@ -74,6 +74,7 @@ export function RoomAuthView() { name="displayName" label={t("Display name")} placeholder={t("Display name")} + data-testid="joincall_displayName" type="text" required autoComplete="off" @@ -90,7 +91,7 @@ export function RoomAuthView() { )} -
From 9587dd7352fd7294e8bf366069b072f7532b18bc Mon Sep 17 00:00:00 2001 From: Michael Kaye <1917473+michaelkaye@users.noreply.github.com> Date: Thu, 11 May 2023 15:16:17 +0100 Subject: [PATCH 03/14] Prettier --- src/Header.tsx | 4 +++- src/room/RoomAuthView.tsx | 7 ++++++- 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/src/Header.tsx b/src/Header.tsx index 5a4f7f5..410f348 100644 --- a/src/Header.tsx +++ b/src/Header.tsx @@ -134,7 +134,9 @@ export function RoomHeaderInfo({ roomName, avatarUrl }: RoomHeaderInfo) { />
- {roomName} + + {roomName} + ); } diff --git a/src/room/RoomAuthView.tsx b/src/room/RoomAuthView.tsx index c3ccf0a..12adcc1 100644 --- a/src/room/RoomAuthView.tsx +++ b/src/room/RoomAuthView.tsx @@ -91,7 +91,12 @@ export function RoomAuthView() { )} -
From d148a81f91927009b70c451ac0ad973212e83cd7 Mon Sep 17 00:00:00 2001 From: Enrico Schwendig Date: Thu, 11 May 2023 16:47:05 +0200 Subject: [PATCH 04/14] Reconnect on network switch (#1029) --- package.json | 2 +- yarn.lock | 16 ++++++++-------- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/package.json b/package.json index ca31832..35425ca 100644 --- a/package.json +++ b/package.json @@ -53,7 +53,7 @@ "i18next-browser-languagedetector": "^6.1.8", "i18next-http-backend": "^1.4.4", "lodash": "^4.17.21", - "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#261bc81554580b442769a65ceed2b154178fbe1c", + "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#90e8336797480ff0e512d7c76ba6f420c2c3a2d5", "matrix-widget-api": "^1.3.1", "mermaid": "^8.13.8", "normalize.css": "^8.0.1", diff --git a/yarn.lock b/yarn.lock index 8c97326..9874062 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1821,10 +1821,10 @@ resolved "https://registry.yarnpkg.com/@juggle/resize-observer/-/resize-observer-3.3.1.tgz#b50a781709c81e10701004214340f25475a171a0" integrity sha512-zMM9Ds+SawiUkakS7y94Ymqx+S0ORzpG3frZirN3l+UlXUmSUR7hF4wxCVqW+ei94JzV5kt0uXBcoOEAuiydrw== -"@matrix-org/matrix-sdk-crypto-js@^0.1.0-alpha.7": - version "0.1.0-alpha.7" - resolved "https://registry.yarnpkg.com/@matrix-org/matrix-sdk-crypto-js/-/matrix-sdk-crypto-js-0.1.0-alpha.7.tgz#136375b84fd8a7e698f70fc969f668e541a61313" - integrity sha512-sQEG9cSfNji5NYBf5h7j5IxYVO0dwtAKoetaVyR+LhIXz/Su7zyEE3EwlAWAeJOFdAV/vZ5LTNyh39xADuNlTg== +"@matrix-org/matrix-sdk-crypto-js@^0.1.0-alpha.8": + version "0.1.0-alpha.8" + resolved "https://registry.yarnpkg.com/@matrix-org/matrix-sdk-crypto-js/-/matrix-sdk-crypto-js-0.1.0-alpha.8.tgz#18dd8e7fb56602d2999d8a502b49e902a2bb3782" + integrity sha512-hdmbbGXKrN6JNo3wdBaR5Zs3lXlzllT3U43ViNTlabB3nKkOZQnEAN/Isv+4EQSgz1+8897veI9Q8sqlQX22oA== "@matrix-org/olm@https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.14.tgz": version "3.2.14" @@ -10550,12 +10550,12 @@ matrix-events-sdk@0.0.1: resolved "https://registry.yarnpkg.com/matrix-events-sdk/-/matrix-events-sdk-0.0.1.tgz#c8c38911e2cb29023b0bbac8d6f32e0de2c957dd" integrity sha512-1QEOsXO+bhyCroIe2/A5OwaxHvBm7EsSQ46DEDn8RBIfQwN5HWBpFvyWWR4QY0KHPPnnJdI99wgRiAl7Ad5qaA== -"matrix-js-sdk@github:matrix-org/matrix-js-sdk#261bc81554580b442769a65ceed2b154178fbe1c": - version "25.0.0" - resolved "https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/261bc81554580b442769a65ceed2b154178fbe1c" +"matrix-js-sdk@github:matrix-org/matrix-js-sdk#90e8336797480ff0e512d7c76ba6f420c2c3a2d5": + version "25.1.0" + resolved "https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/90e8336797480ff0e512d7c76ba6f420c2c3a2d5" dependencies: "@babel/runtime" "^7.12.5" - "@matrix-org/matrix-sdk-crypto-js" "^0.1.0-alpha.7" + "@matrix-org/matrix-sdk-crypto-js" "^0.1.0-alpha.8" another-json "^0.2.0" bs58 "^5.0.0" content-type "^1.0.4" From 2df8488c20422c4da3fb36d6619051231d2dfbf9 Mon Sep 17 00:00:00 2001 From: Robin Townsend Date: Fri, 12 May 2023 11:43:17 -0400 Subject: [PATCH 05/14] Cap the size of the local tile in 1:1 calls So that it doesn't cover up too much of the remote tile at small window sizes --- src/video-grid/VideoGrid.tsx | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/src/video-grid/VideoGrid.tsx b/src/video-grid/VideoGrid.tsx index 522924f..99b9df6 100644 --- a/src/video-grid/VideoGrid.tsx +++ b/src/video-grid/VideoGrid.tsx @@ -172,8 +172,16 @@ function getOneOnOneLayoutTilePositions( const gridAspectRatio = gridWidth / gridHeight; const smallPip = gridAspectRatio < 1 || gridWidth < 700; - const pipWidth = smallPip ? 114 : 230; - const pipHeight = smallPip ? 163 : 155; + const maxPipWidth = smallPip ? 114 : 230; + const maxPipHeight = smallPip ? 163 : 155; + // Cap the PiP size at 1/3 the remote tile size, preserving aspect ratio + const pipScaleFactor = Math.min( + 1, + remotePosition.width / 3 / maxPipWidth, + remotePosition.height / 3 / maxPipHeight + ); + const pipWidth = maxPipWidth * pipScaleFactor; + const pipHeight = maxPipHeight * pipScaleFactor; const pipGap = getPipGap(gridAspectRatio, gridWidth); const pipMinX = remotePosition.x + pipGap; From 440c617738f097bb86bb58a2ca1c865475ea903a Mon Sep 17 00:00:00 2001 From: Robin Townsend Date: Fri, 12 May 2023 14:04:23 -0400 Subject: [PATCH 06/14] Use a more noticeable shadow when displaying one tile on top another So that the local tile in 1:1 calls is more discernable against the background, especially when both participants have their video off --- src/video-grid/NewVideoGrid.tsx | 1 + src/video-grid/VideoGrid.tsx | 13 +++++++++++-- src/video-grid/VideoTile.module.css | 2 ++ src/video-grid/VideoTile.tsx | 7 ++++--- src/video-grid/VideoTileContainer.tsx | 1 + 5 files changed, 19 insertions(+), 5 deletions(-) diff --git a/src/video-grid/NewVideoGrid.tsx b/src/video-grid/NewVideoGrid.tsx index a32c6b4..d8c45bf 100644 --- a/src/video-grid/NewVideoGrid.tsx +++ b/src/video-grid/NewVideoGrid.tsx @@ -245,6 +245,7 @@ export const NewVideoGrid: FC = ({ opacity: 0, scale: 0, shadow: 1, + shadowSpread: 0, zIndex: 1, x, y, diff --git a/src/video-grid/VideoGrid.tsx b/src/video-grid/VideoGrid.tsx index 522924f..94545f5 100644 --- a/src/video-grid/VideoGrid.tsx +++ b/src/video-grid/VideoGrid.tsx @@ -51,6 +51,7 @@ export interface TileSpring { opacity: number; scale: number; shadow: number; + shadowSpread: number; zIndex: number; x: number; y: number; @@ -892,6 +893,8 @@ export function VideoGrid({ // Whether the tile positions were valid at the time of the previous // animation const tilePositionsWereValid = tilePositionsValid.current; + const oneOnOneLayout = + tiles.length === 2 && !tiles.some((t) => t.presenter || t.focused); return (tileIndex: number) => { const tile = tiles[tileIndex]; @@ -911,12 +914,14 @@ export function VideoGrid({ opacity: 1, zIndex: 2, shadow: 15, + shadowSpread: 0, immediate: (key: string) => disableAnimations || key === "zIndex" || key === "x" || key === "y" || - key === "shadow", + key === "shadow" || + key === "shadowSpread", from: { shadow: 0, scale: 0, @@ -974,10 +979,14 @@ export function VideoGrid({ opacity: remove ? 0 : 1, zIndex: tilePosition.zIndex, shadow: 1, + shadowSpread: oneOnOneLayout && tile.item.isLocal ? 1 : 0, from, reset, immediate: (key: string) => - disableAnimations || key === "zIndex" || key === "shadow", + disableAnimations || + key === "zIndex" || + key === "shadow" || + key === "shadowSpread", // If we just stopped dragging a tile, give it time for the // animation to settle before pushing its z-index back down delay: (key: string) => (key === "zIndex" ? 500 : 0), diff --git a/src/video-grid/VideoTile.module.css b/src/video-grid/VideoTile.module.css index a83d1f0..c2b9a63 100644 --- a/src/video-grid/VideoTile.module.css +++ b/src/video-grid/VideoTile.module.css @@ -22,6 +22,8 @@ limitations under the License. height: var(--tileHeight); --tileRadius: 8px; border-radius: var(--tileRadius); + box-shadow: rgba(0, 0, 0, 0.5) 0px var(--tileShadow) + calc(2 * var(--tileShadow)) var(--tileShadowSpread); overflow: hidden; cursor: pointer; diff --git a/src/video-grid/VideoTile.tsx b/src/video-grid/VideoTile.tsx index e3d26ad..2c0c9d7 100644 --- a/src/video-grid/VideoTile.tsx +++ b/src/video-grid/VideoTile.tsx @@ -47,6 +47,7 @@ interface Props { opacity?: SpringValue; scale?: SpringValue; shadow?: SpringValue; + shadowSpread?: SpringValue; zIndex?: SpringValue; x?: SpringValue; y?: SpringValue; @@ -79,6 +80,7 @@ export const VideoTile = forwardRef( opacity, scale, shadow, + shadowSpread, zIndex, x, y, @@ -141,9 +143,6 @@ export const VideoTile = forwardRef( style={{ opacity, scale, - boxShadow: shadow?.to( - (s) => `rgba(0, 0, 0, 0.5) 0px ${s}px ${2 * s}px 0px` - ), zIndex, x, y, @@ -152,6 +151,8 @@ export const VideoTile = forwardRef( // but React's types say no "--tileWidth": width?.to((w) => `${w}px`), "--tileHeight": height?.to((h) => `${h}px`), + "--tileShadow": shadow?.to((s) => `${s}px`), + "--tileShadowSpread": shadowSpread?.to((s) => `${s}px`), }} ref={ref as ForwardedRef} data-testid="videoTile" diff --git a/src/video-grid/VideoTileContainer.tsx b/src/video-grid/VideoTileContainer.tsx index c3a4c61..f3f5059 100644 --- a/src/video-grid/VideoTileContainer.tsx +++ b/src/video-grid/VideoTileContainer.tsx @@ -47,6 +47,7 @@ interface Props { opacity?: SpringValue; scale?: SpringValue; shadow?: SpringValue; + shadowSpread?: SpringValue; zIndex?: SpringValue; x?: SpringValue; y?: SpringValue; From a74733f6bc2de54038cd08e393641553c2c29698 Mon Sep 17 00:00:00 2001 From: Robin Townsend Date: Fri, 12 May 2023 14:32:16 -0400 Subject: [PATCH 07/14] Show audio mute status next to people's names Previously we were showing a combination of audio and video status icons on people's name badges, which meant there was no way to tell whether someone who had their video off was muted or not. The designs call for only microphone icons to be shown here. --- src/video-grid/VideoTile.module.css | 10 ++++++---- src/video-grid/VideoTile.tsx | 5 ++--- 2 files changed, 8 insertions(+), 7 deletions(-) diff --git a/src/video-grid/VideoTile.module.css b/src/video-grid/VideoTile.module.css index a83d1f0..db2e50b 100644 --- a/src/video-grid/VideoTile.module.css +++ b/src/video-grid/VideoTile.module.css @@ -83,6 +83,12 @@ limitations under the License. z-index: 1; } +.infoBubble > svg { + height: 16px; + width: 16px; + margin-right: 4px; +} + .toolbar { position: absolute; top: 0; @@ -126,10 +132,6 @@ limitations under the License. bottom: 16px; } -.memberName > * { - margin-right: 6px; -} - .memberName > :last-child { margin-right: 0px; } diff --git a/src/video-grid/VideoTile.tsx b/src/video-grid/VideoTile.tsx index e3d26ad..005e10c 100644 --- a/src/video-grid/VideoTile.tsx +++ b/src/video-grid/VideoTile.tsx @@ -20,8 +20,8 @@ import classNames from "classnames"; import { useTranslation } from "react-i18next"; import styles from "./VideoTile.module.css"; +import { ReactComponent as MicIcon } from "../icons/Mic.svg"; import { ReactComponent as MicMutedIcon } from "../icons/MicMuted.svg"; -import { ReactComponent as VideoMutedIcon } from "../icons/VideoMuted.svg"; import { AudioButton, FullscreenButton } from "../button/Button"; import { ConnectionState } from "../room/useGroupCall"; @@ -178,9 +178,8 @@ export const VideoTile = forwardRef( Mute state is currently sent over to-device messages, which aren't quite real-time, so this is an important kludge to make sure no one appears muted when they've clearly begun talking. */ - audioMuted && !videoMuted && !speaking && + speaking || !audioMuted ? : } - {videoMuted && } {caption} From caf90d851e0eb2105a5a50d93d6ad5984508dc03 Mon Sep 17 00:00:00 2001 From: Robin Townsend Date: Fri, 12 May 2023 14:49:55 -0400 Subject: [PATCH 08/14] Subtly animate active speaker indicators A light touch of animation here is consistent with what the designs call for, and what we've done with the toolbars on video tiles. --- src/video-grid/VideoTile.module.css | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/video-grid/VideoTile.module.css b/src/video-grid/VideoTile.module.css index a83d1f0..5ec3aae 100644 --- a/src/video-grid/VideoTile.module.css +++ b/src/video-grid/VideoTile.module.css @@ -45,7 +45,7 @@ limitations under the License. transform: scaleX(-1); } -.videoTile.speaking::after { +.videoTile::after { position: absolute; top: -1px; left: -1px; @@ -54,6 +54,12 @@ limitations under the License. content: ""; border-radius: var(--tileRadius); box-shadow: inset 0 0 0 4px var(--accent) !important; + opacity: 0; + transition: opacity ease 0.15s; +} + +.videoTile.speaking::after { + opacity: 1; } .videoTile.maximised { From fcb923f6dbd0e163101da3d33a09c5db64077207 Mon Sep 17 00:00:00 2001 From: Robin Townsend Date: Sat, 13 May 2023 14:11:59 -0400 Subject: [PATCH 09/14] Update matrix-js-sdk --- package.json | 2 +- yarn.lock | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index 35425ca..07f3e43 100644 --- a/package.json +++ b/package.json @@ -53,7 +53,7 @@ "i18next-browser-languagedetector": "^6.1.8", "i18next-http-backend": "^1.4.4", "lodash": "^4.17.21", - "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#90e8336797480ff0e512d7c76ba6f420c2c3a2d5", + "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#aaae55736f5a1295aae249a391489514cab12b64", "matrix-widget-api": "^1.3.1", "mermaid": "^8.13.8", "normalize.css": "^8.0.1", diff --git a/yarn.lock b/yarn.lock index a7bce4e..8306694 100644 --- a/yarn.lock +++ b/yarn.lock @@ -10550,9 +10550,9 @@ matrix-events-sdk@0.0.1: resolved "https://registry.yarnpkg.com/matrix-events-sdk/-/matrix-events-sdk-0.0.1.tgz#c8c38911e2cb29023b0bbac8d6f32e0de2c957dd" integrity sha512-1QEOsXO+bhyCroIe2/A5OwaxHvBm7EsSQ46DEDn8RBIfQwN5HWBpFvyWWR4QY0KHPPnnJdI99wgRiAl7Ad5qaA== -"matrix-js-sdk@github:matrix-org/matrix-js-sdk#90e8336797480ff0e512d7c76ba6f420c2c3a2d5": +"matrix-js-sdk@github:matrix-org/matrix-js-sdk#aaae55736f5a1295aae249a391489514cab12b64": version "25.1.0" - resolved "https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/90e8336797480ff0e512d7c76ba6f420c2c3a2d5" + resolved "https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/aaae55736f5a1295aae249a391489514cab12b64" dependencies: "@babel/runtime" "^7.12.5" "@matrix-org/matrix-sdk-crypto-js" "^0.1.0-alpha.8" From 7d454645d0690dcd737c4d2874e564693cc698f6 Mon Sep 17 00:00:00 2001 From: Robin Townsend Date: Sat, 13 May 2023 14:27:01 -0400 Subject: [PATCH 10/14] Fix types --- test/otel/ObjectFlattener-test.ts | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/test/otel/ObjectFlattener-test.ts b/test/otel/ObjectFlattener-test.ts index 84fce34..ac001eb 100644 --- a/test/otel/ObjectFlattener-test.ts +++ b/test/otel/ObjectFlattener-test.ts @@ -1,3 +1,8 @@ +import { GroupCallStatsReport } from "matrix-js-sdk/src/webrtc/groupCall"; +import { + AudioConcealment, + ConnectionStatsReport, +} from "matrix-js-sdk/src/webrtc/stats/statsReport"; import { ObjectFlattener } from "../../src/otel/ObjectFlattener"; /* @@ -16,7 +21,12 @@ See the License for the specific language governing permissions and limitations under the License. */ describe("ObjectFlattener", () => { - const statsReport = { + const noConcealment: AudioConcealment = { + concealedAudio: 0, + totalAudioDuration: 0, + }; + + const statsReport: GroupCallStatsReport = { report: { bandwidth: { upload: 426, download: 0 }, bitrate: { @@ -92,8 +102,14 @@ describe("ObjectFlattener", () => { rtt: null, }, ], + audioConcealment: new Map([ + ["REMOTE_AUDIO_TRACK_ID", noConcealment], + ["REMOTE_VIDEO_TRACK_ID", noConcealment], + ]), + totalAudioConcealment: noConcealment, }, }; + describe("on flattenObjectRecursive", () => { it("should flatter an Map object", () => { const flatObject = {}; From 047fc822d67a9dda7c58349aa59a9597b31605fb Mon Sep 17 00:00:00 2001 From: raspin0 Date: Sat, 13 May 2023 00:23:35 +0000 Subject: [PATCH 11/14] Translated using Weblate (Polish) Currently translated at 100.0% (141 of 141 strings) Translation: Element Call/element-call Translate-URL: https://translate.element.io/projects/element-call/element-call/pl/ --- public/locales/pl/app.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/public/locales/pl/app.json b/public/locales/pl/app.json index 7359a56..d55018a 100644 --- a/public/locales/pl/app.json +++ b/public/locales/pl/app.json @@ -99,7 +99,7 @@ "Debug log request": "Prośba o dzienniki debugowania", "Debug log": "Dzienniki debugowania", "Create account": "Utwórz konto", - "Copy and share this call link": "Skopiuj i podziel się linkiem do połączenia", + "Copy and share this call link": "Skopiuj i udostępnij link do rozmowy", "Copied!": "Skopiowano!", "Connection lost": "Połączenie utracone", "Confirm password": "Potwierdź hasło", @@ -129,7 +129,7 @@ "Copy": "Kopiuj", "<0>Submitting debug logs will help us track down the problem.": "<0>Wysłanie logów debuggowania pomoże nam ustalić przyczynę problemu.", "<0>Oops, something's gone wrong.": "<0>Ojej, coś poszło nie tak.", - "<0>Join call now<1>Or<2>Copy call link and join later": "<0>Dołącz do rozmowy teraz<1>Or<2>Skopiuj link do rozmowy i dołącz później", + "<0>Join call now<1>Or<2>Copy call link and join later": "<0>Dołącz do rozmowy już teraz<1>Or<2>Skopiuj link do rozmowy i dołącz później", "{{name}} (Waiting for video...)": "{{name}} (Oczekiwanie na wideo...)", "{{name}} (Connecting...)": "{{name}} (Łączenie...)", "Expose developer settings in the settings window.": "Wyświetlaj opcje programisty w oknie ustawień.", From b0ba366a2cfb0bd63fd61e8f4c0697fe6c771d2c Mon Sep 17 00:00:00 2001 From: Weblate Date: Sun, 14 May 2023 00:34:03 +0000 Subject: [PATCH 12/14] Update translation files Updated by "Cleanup translation files" hook in Weblate. Translation: Element Call/element-call Translate-URL: https://translate.element.io/projects/element-call/element-call/ --- public/locales/bg/app.json | 1 - public/locales/cs/app.json | 1 - public/locales/de/app.json | 1 - public/locales/el/app.json | 1 - public/locales/es/app.json | 1 - public/locales/et/app.json | 1 - public/locales/fa/app.json | 1 - public/locales/fr/app.json | 1 - public/locales/id/app.json | 1 - public/locales/ja/app.json | 1 - public/locales/pl/app.json | 1 - public/locales/ru/app.json | 1 - public/locales/sk/app.json | 1 - public/locales/tr/app.json | 1 - public/locales/uk/app.json | 1 - public/locales/zh-Hans/app.json | 1 - public/locales/zh-Hant/app.json | 1 - 17 files changed, 17 deletions(-) diff --git a/public/locales/bg/app.json b/public/locales/bg/app.json index 97f42aa..ec37ef1 100644 --- a/public/locales/bg/app.json +++ b/public/locales/bg/app.json @@ -46,7 +46,6 @@ "Join call now": "Влез в разговора сега", "Join existing call?": "Присъединяване към съществуващ разговор?", "Leave": "Напусни", - "Loading room…": "Напускане на стаята…", "Loading…": "Зареждане…", "Local volume": "Локална сила на звука", "Logging in…": "Влизане…", diff --git a/public/locales/cs/app.json b/public/locales/cs/app.json index 9bcdbc4..43abeeb 100644 --- a/public/locales/cs/app.json +++ b/public/locales/cs/app.json @@ -71,7 +71,6 @@ "Logging in…": "Přihlašování se…", "Local volume": "Lokální hlasitost", "Loading…": "Načítání…", - "Loading room…": "Načítání místnosti…", "Leave": "Opustit hovor", "Join call now": "Připojit se k hovoru", "Join call": "Připojit se k hovoru", diff --git a/public/locales/de/app.json b/public/locales/de/app.json index d738e8c..9ecac30 100644 --- a/public/locales/de/app.json +++ b/public/locales/de/app.json @@ -45,7 +45,6 @@ "Join call now": "Anruf beitreten", "Join existing call?": "An bestehendem Anruf teilnehmen?", "Leave": "Verlassen", - "Loading room…": "Lade Raum …", "Loading…": "Lade …", "Local volume": "Lokale Lautstärke", "Logging in…": "Anmelden …", diff --git a/public/locales/el/app.json b/public/locales/el/app.json index 41913bd..7facbe3 100644 --- a/public/locales/el/app.json +++ b/public/locales/el/app.json @@ -69,7 +69,6 @@ "Microphone": "Μικρόφωνο", "Login": "Σύνδεση", "Loading…": "Φόρτωση…", - "Loading room…": "Φόρτωση δωματίου…", "Leave": "Αποχώρηση", "Join existing call?": "Συμμετοχή στην υπάρχουσα κλήση;", "Join call now": "Συμμετοχή στην κλήση τώρα", diff --git a/public/locales/es/app.json b/public/locales/es/app.json index 3fa0cd8..de72a5d 100644 --- a/public/locales/es/app.json +++ b/public/locales/es/app.json @@ -77,7 +77,6 @@ "Logging in…": "Iniciando sesión…", "Local volume": "Volumen local", "Loading…": "Cargando…", - "Loading room…": "Cargando sala…", "Leave": "Abandonar", "Join existing call?": "¿Unirse a llamada existente?", "Join call now": "Unirse a la llamada ahora", diff --git a/public/locales/et/app.json b/public/locales/et/app.json index 0267ec1..9c9bab6 100644 --- a/public/locales/et/app.json +++ b/public/locales/et/app.json @@ -70,7 +70,6 @@ "Logging in…": "Sisselogimine …", "Local volume": "Kohalik helitugevus", "Loading…": "Laadimine …", - "Loading room…": "Ruumi laadimine …", "Leave": "Lahku", "Join existing call?": "Liitu juba käimasoleva kõnega?", "Join call now": "Kõnega liitumine", diff --git a/public/locales/fa/app.json b/public/locales/fa/app.json index e59506f..7ecc3b7 100644 --- a/public/locales/fa/app.json +++ b/public/locales/fa/app.json @@ -21,7 +21,6 @@ "Login to your account": "به حساب کاربری خود وارد شوید", "Login": "ورود", "Loading…": "بارگزاری…", - "Loading room…": "بارگزاری اتاق…", "Leave": "خروج", "Join existing call?": "پیوست به تماس؟", "Join call now": "الان به تماس بپیوند", diff --git a/public/locales/fr/app.json b/public/locales/fr/app.json index 8c6fafe..4e682c7 100644 --- a/public/locales/fr/app.json +++ b/public/locales/fr/app.json @@ -43,7 +43,6 @@ "Join call now": "Rejoindre l’appel maintenant", "Join existing call?": "Rejoindre un appel existant ?", "Leave": "Partir", - "Loading room…": "Chargement du salon…", "Loading…": "Chargement…", "Local volume": "Volume local", "Logging in…": "Connexion…", diff --git a/public/locales/id/app.json b/public/locales/id/app.json index 9102c2b..b81a57f 100644 --- a/public/locales/id/app.json +++ b/public/locales/id/app.json @@ -46,7 +46,6 @@ "Join call now": "Bergabung ke panggilan sekarang", "Join existing call?": "Bergabung ke panggilan yang sudah ada?", "Leave": "Keluar", - "Loading room…": "Memuat ruangan…", "Loading…": "Memuat…", "Local volume": "Volume lokal", "Logging in…": "Memasuki…", diff --git a/public/locales/ja/app.json b/public/locales/ja/app.json index 0550c78..44fae02 100644 --- a/public/locales/ja/app.json +++ b/public/locales/ja/app.json @@ -53,7 +53,6 @@ "Login": "ログイン", "Logging in…": "ログインしています…", "Loading…": "読み込んでいます…", - "Loading room…": "ルームを読み込んでいます…", "Leave": "退出", "Version: {{version}}": "バージョン：{{version}}", "Username": "ユーザー名", diff --git a/public/locales/pl/app.json b/public/locales/pl/app.json index d55018a..9ba41b0 100644 --- a/public/locales/pl/app.json +++ b/public/locales/pl/app.json @@ -73,7 +73,6 @@ "Logging in…": "Logowanie…", "Local volume": "Lokalna głośność", "Loading…": "Ładowanie…", - "Loading room…": "Ładowanie pokoju…", "Leave": "Opuść", "Join existing call?": "Dołączyć do istniejącego połączenia?", "Join call now": "Dołącz do połączenia teraz", diff --git a/public/locales/ru/app.json b/public/locales/ru/app.json index ad20110..5aa99c2 100644 --- a/public/locales/ru/app.json +++ b/public/locales/ru/app.json @@ -86,7 +86,6 @@ "Login to your account": "Войдите в свой аккаунт", "Login": "Вход", "Loading…": "Загрузка…", - "Loading room…": "Загрузка комнаты…", "Leave": "Покинуть", "Join existing call?": "Присоединиться к существующему звонку?", "Join call now": "Присоединиться сейчас", diff --git a/public/locales/sk/app.json b/public/locales/sk/app.json index 8f6a923..ce0d4ee 100644 --- a/public/locales/sk/app.json +++ b/public/locales/sk/app.json @@ -52,7 +52,6 @@ "Login": "Prihlásiť sa", "Logging in…": "Prihlasovanie…", "Loading…": "Načítanie…", - "Loading room…": "Načítanie miestnosti…", "Leave": "Opustiť", "Join existing call?": "Pripojiť sa k existujúcemu hovoru?", "Join call now": "Pripojiť sa k hovoru teraz", diff --git a/public/locales/tr/app.json b/public/locales/tr/app.json index 79f21f6..5cf079e 100644 --- a/public/locales/tr/app.json +++ b/public/locales/tr/app.json @@ -43,7 +43,6 @@ "Join call now": "Aramaya katıl", "Join existing call?": "Mevcut aramaya katıl?", "Leave": "Çık", - "Loading room…": "Oda yükleniyor…", "Loading…": "Yükleniyor…", "Local volume": "Yerel ses seviyesi", "Logging in…": "Giriliyor…", diff --git a/public/locales/uk/app.json b/public/locales/uk/app.json index 8017e1a..42751cc 100644 --- a/public/locales/uk/app.json +++ b/public/locales/uk/app.json @@ -72,7 +72,6 @@ "Login": "Увійти", "Logging in…": "Вхід…", "Local volume": "Локальна гучність", - "Loading room…": "Завантаження кімнати…", "Leave": "Вийти", "Join existing call?": "Приєднатися до наявного виклику?", "Join call now": "Приєднатися до виклику зараз", diff --git a/public/locales/zh-Hans/app.json b/public/locales/zh-Hans/app.json index ee4612e..25ba582 100644 --- a/public/locales/zh-Hans/app.json +++ b/public/locales/zh-Hans/app.json @@ -90,7 +90,6 @@ "Logging in…": "登录中……", "Local volume": "本地音量", "Loading…": "加载中……", - "Loading room…": "加载房间中……", "Leave": "离开", "Join existing call?": "加入现有的通话？", "Join call now": "现在加入通话", diff --git a/public/locales/zh-Hant/app.json b/public/locales/zh-Hant/app.json index c57e210..e18e3d7 100644 --- a/public/locales/zh-Hant/app.json +++ b/public/locales/zh-Hant/app.json @@ -90,7 +90,6 @@ "Logging in…": "登入中…", "Local volume": "您的音量", "Loading…": "載入中…", - "Loading room…": "載入聊天室…", "Leave": "離開", "Join existing call?": "加入已開始的通話嗎？", "Join call now": "現在加入通話", From 207554f06778af69b9de2e0838ca55d0c70d7be6 Mon Sep 17 00:00:00 2001 From: Robin Townsend Date: Sun, 14 May 2023 01:32:11 -0400 Subject: [PATCH 13/14] Fix tests --- test/otel/ObjectFlattener-test.ts | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/test/otel/ObjectFlattener-test.ts b/test/otel/ObjectFlattener-test.ts index ac001eb..e3709d2 100644 --- a/test/otel/ObjectFlattener-test.ts +++ b/test/otel/ObjectFlattener-test.ts @@ -214,6 +214,12 @@ describe("ObjectFlattener", () => { "matrix.stats.conn.transport.1.remoteCandidateType": "srfx", "matrix.stats.conn.transport.1.networkType": "ethernet", "matrix.stats.conn.transport.1.rtt": "null", + "matrix.stats.conn.audioConcealment.REMOTE_AUDIO_TRACK_ID.concealedAudio": 0, + "matrix.stats.conn.audioConcealment.REMOTE_AUDIO_TRACK_ID.totalAudioDuration": 0, + "matrix.stats.conn.audioConcealment.REMOTE_VIDEO_TRACK_ID.concealedAudio": 0, + "matrix.stats.conn.audioConcealment.REMOTE_VIDEO_TRACK_ID.totalAudioDuration": 0, + "matrix.stats.conn.totalAudioConcealment.concealedAudio": 0, + "matrix.stats.conn.totalAudioConcealment.totalAudioDuration": 0, }); }); }); From f0f2ffe9726a01f85db816ec32e4579f8bf7d981 Mon Sep 17 00:00:00 2001 From: Timo <16718859+toger5@users.noreply.github.com> Date: Sun, 14 May 2023 16:36:41 +0200 Subject: [PATCH 14/14] add audio concealment to posthog exporter (#1042) * add audio concealment to posthog exporter --- src/analytics/PosthogSpanProcessor.ts | 2 ++ src/otel/otel.ts | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/src/analytics/PosthogSpanProcessor.ts b/src/analytics/PosthogSpanProcessor.ts index e9e287a..8f88339 100644 --- a/src/analytics/PosthogSpanProcessor.ts +++ b/src/analytics/PosthogSpanProcessor.ts @@ -124,6 +124,7 @@ export class PosthogSpanProcessor implements SpanProcessor { const audioReceived = `${attributes["matrix.stats.summary.percentageReceivedAudioMedia"]}`; const maxJitter = `${attributes["matrix.stats.summary.maxJitter"]}`; const maxPacketLoss = `${attributes["matrix.stats.summary.maxPacketLoss"]}`; + const percentageConcealedAudio = `${attributes["matrix.stats.summary.percentageConcealedAudio"]}`; PosthogAnalytics.instance.trackEvent( { eventName: "MediaReceived", @@ -133,6 +134,7 @@ export class PosthogSpanProcessor implements SpanProcessor { videoReceived: videoReceived, maxJitter: maxJitter, maxPacketLoss: maxPacketLoss, + percentageConcealedAudio: percentageConcealedAudio, }, // Send instantly because the window might be closing { send_instantly: true } diff --git a/src/otel/otel.ts b/src/otel/otel.ts index e30e84a..8fc8080 100644 --- a/src/otel/otel.ts +++ b/src/otel/otel.ts @@ -42,7 +42,7 @@ export class ElementCallOpenTelemetry { const config = Config.get(); // we always enable opentelemetry in general. We only enable the OTLP // collector if a URL is defined (and in future if another setting is defined) - // The posthog exporter is always enabled, posthog reporting is enabled or disabled + // Posthog reporting is enabled or disabled // within the posthog code. const shouldEnableOtlp = Boolean(config.opentelemetry?.collector_url);