From abab31c33b23e28b0d74bca3451ba7ecf3f7fd94 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Thu, 19 Aug 2021 11:05:08 +0200 Subject: [PATCH 1/4] Add a speaking indicator MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- res/css/views/voip/_CallView.scss | 2 +- res/css/views/voip/_VideoFeed.scss | 5 +++++ src/components/views/voip/VideoFeed.tsx | 17 +++++++++++++++++ 3 files changed, 23 insertions(+), 1 deletion(-) diff --git a/res/css/views/voip/_CallView.scss b/res/css/views/voip/_CallView.scss index 63ca91267f..aa0aa4e2a6 100644 --- a/res/css/views/voip/_CallView.scss +++ b/res/css/views/voip/_CallView.scss @@ -74,9 +74,9 @@ limitations under the License. > .mx_VideoFeed { width: 100%; height: 100%; + border-width: 0 !important; // Override mx_VideoFeed_speaking &.mx_VideoFeed_voice { - background-color: $inverted-bg-color; display: flex; justify-content: center; align-items: center; diff --git a/res/css/views/voip/_VideoFeed.scss b/res/css/views/voip/_VideoFeed.scss index 7a8d39dfe3..ec7260a8bb 100644 --- a/res/css/views/voip/_VideoFeed.scss +++ b/res/css/views/voip/_VideoFeed.scss @@ -17,12 +17,17 @@ limitations under the License. .mx_VideoFeed { overflow: hidden; position: relative; + box-sizing: border-box; &.mx_VideoFeed_voice { background-color: $inverted-bg-color; aspect-ratio: 16 / 9; } + &.mx_VideoFeed_speaking { + border: $accent-color 2px solid; + } + .mx_VideoFeed_video { width: 100%; background-color: transparent; diff --git a/src/components/views/voip/VideoFeed.tsx b/src/components/views/voip/VideoFeed.tsx index 4607b750eb..0d719a4463 100644 --- a/src/components/views/voip/VideoFeed.tsx +++ b/src/components/views/voip/VideoFeed.tsx @@ -24,6 +24,8 @@ import MemberAvatar from "../avatars/MemberAvatar"; import { replaceableComponent } from "../../../utils/replaceableComponent"; import { SDPStreamMetadataPurpose } from 'matrix-js-sdk/src/webrtc/callEventTypes'; +const SPEAKING_THRESHOLD = -60; + interface IProps { call: MatrixCall; @@ -45,6 +47,7 @@ interface IProps { interface IState { audioMuted: boolean; videoMuted: boolean; + speaking: boolean; } @replaceableComponent("views.voip.VideoFeed") @@ -57,6 +60,7 @@ export default class VideoFeed extends React.PureComponent { this.state = { audioMuted: this.props.feed.isAudioMuted(), videoMuted: this.props.feed.isVideoMuted(), + speaking: false, }; } @@ -103,11 +107,19 @@ export default class VideoFeed extends React.PureComponent { if (oldFeed) { this.props.feed.removeListener(CallFeedEvent.NewStream, this.onNewStream); this.props.feed.removeListener(CallFeedEvent.MuteStateChanged, this.onMuteStateChanged); + if (this.props.feed.purpose === SDPStreamMetadataPurpose.Usermedia) { + this.props.feed.removeListener(CallFeedEvent.VolumeChanged, this.onVolumeChanged); + this.props.feed.measureVolumeActivity(false); + } this.stopMedia(); } if (newFeed) { this.props.feed.addListener(CallFeedEvent.NewStream, this.onNewStream); this.props.feed.addListener(CallFeedEvent.MuteStateChanged, this.onMuteStateChanged); + if (this.props.feed.purpose === SDPStreamMetadataPurpose.Usermedia) { + this.props.feed.addListener(CallFeedEvent.VolumeChanged, this.onVolumeChanged); + this.props.feed.measureVolumeActivity(true); + } this.playMedia(); } } @@ -162,6 +174,10 @@ export default class VideoFeed extends React.PureComponent { }); }; + private onVolumeChanged = (volume: number): void => { + this.setState({ speaking: volume > SPEAKING_THRESHOLD }); + }; + private onResize = (e) => { if (this.props.onResize && !this.props.feed.isLocal()) { this.props.onResize(e); @@ -173,6 +189,7 @@ export default class VideoFeed extends React.PureComponent { const wrapperClasses = classnames("mx_VideoFeed", { mx_VideoFeed_voice: this.state.videoMuted, + mx_VideoFeed_speaking: this.state.speaking, }); const micIconClasses = classnames("mx_VideoFeed_mic", { mx_VideoFeed_mic_muted: this.state.audioMuted, From a08310e45483b21c04ef7590e36779c4f6e350ba Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Thu, 19 Aug 2021 14:48:15 +0200 Subject: [PATCH 2/4] Emit Speaking events from CallFeed MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/views/voip/VideoFeed.tsx | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/src/components/views/voip/VideoFeed.tsx b/src/components/views/voip/VideoFeed.tsx index 0d719a4463..13461c3591 100644 --- a/src/components/views/voip/VideoFeed.tsx +++ b/src/components/views/voip/VideoFeed.tsx @@ -24,8 +24,6 @@ import MemberAvatar from "../avatars/MemberAvatar"; import { replaceableComponent } from "../../../utils/replaceableComponent"; import { SDPStreamMetadataPurpose } from 'matrix-js-sdk/src/webrtc/callEventTypes'; -const SPEAKING_THRESHOLD = -60; - interface IProps { call: MatrixCall; @@ -108,7 +106,7 @@ export default class VideoFeed extends React.PureComponent { this.props.feed.removeListener(CallFeedEvent.NewStream, this.onNewStream); this.props.feed.removeListener(CallFeedEvent.MuteStateChanged, this.onMuteStateChanged); if (this.props.feed.purpose === SDPStreamMetadataPurpose.Usermedia) { - this.props.feed.removeListener(CallFeedEvent.VolumeChanged, this.onVolumeChanged); + this.props.feed.removeListener(CallFeedEvent.Speaking, this.onSpeaking); this.props.feed.measureVolumeActivity(false); } this.stopMedia(); @@ -117,7 +115,7 @@ export default class VideoFeed extends React.PureComponent { this.props.feed.addListener(CallFeedEvent.NewStream, this.onNewStream); this.props.feed.addListener(CallFeedEvent.MuteStateChanged, this.onMuteStateChanged); if (this.props.feed.purpose === SDPStreamMetadataPurpose.Usermedia) { - this.props.feed.addListener(CallFeedEvent.VolumeChanged, this.onVolumeChanged); + this.props.feed.addListener(CallFeedEvent.Speaking, this.onSpeaking); this.props.feed.measureVolumeActivity(true); } this.playMedia(); @@ -174,8 +172,8 @@ export default class VideoFeed extends React.PureComponent { }); }; - private onVolumeChanged = (volume: number): void => { - this.setState({ speaking: volume > SPEAKING_THRESHOLD }); + private onSpeaking = (speaking: boolean): void => { + this.setState({ speaking }); }; private onResize = (e) => { From cb7e44f4f5e5dfbb211b10a887136c7e0c917954 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Sun, 22 Aug 2021 09:08:33 +0200 Subject: [PATCH 3/4] Always show a transparent border to avoid icon jumps MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- res/css/views/voip/_VideoFeed.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/res/css/views/voip/_VideoFeed.scss b/res/css/views/voip/_VideoFeed.scss index ec7260a8bb..72c45991a2 100644 --- a/res/css/views/voip/_VideoFeed.scss +++ b/res/css/views/voip/_VideoFeed.scss @@ -18,6 +18,7 @@ limitations under the License. overflow: hidden; position: relative; box-sizing: border-box; + border: transparent 2px solid; &.mx_VideoFeed_voice { background-color: $inverted-bg-color; From d29a18b1828be38dbddd7889315d6a6ade178dfa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Sun, 22 Aug 2021 10:10:05 +0200 Subject: [PATCH 4/4] Fix some sizing issue on video feeds MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- res/css/views/voip/_CallViewSidebar.scss | 3 +-- res/css/views/voip/_VideoFeed.scss | 5 +++++ 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/res/css/views/voip/_CallViewSidebar.scss b/res/css/views/voip/_CallViewSidebar.scss index dbadc22028..fd9c76defc 100644 --- a/res/css/views/voip/_CallViewSidebar.scss +++ b/res/css/views/voip/_CallViewSidebar.scss @@ -33,10 +33,9 @@ limitations under the License. > .mx_VideoFeed { width: 100%; + border-radius: 4px; &.mx_VideoFeed_voice { - border-radius: 4px; - display: flex; align-items: center; justify-content: center; diff --git a/res/css/views/voip/_VideoFeed.scss b/res/css/views/voip/_VideoFeed.scss index 72c45991a2..1f17a54692 100644 --- a/res/css/views/voip/_VideoFeed.scss +++ b/res/css/views/voip/_VideoFeed.scss @@ -19,6 +19,7 @@ limitations under the License. position: relative; box-sizing: border-box; border: transparent 2px solid; + display: flex; &.mx_VideoFeed_voice { background-color: $inverted-bg-color; @@ -27,6 +28,10 @@ limitations under the License. &.mx_VideoFeed_speaking { border: $accent-color 2px solid; + + .mx_VideoFeed_video { + border-radius: 0; + } } .mx_VideoFeed_video {