PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Merge pull request #6639 from SimonBrandner/feature/voice-activity

Browse source 
Add active speaker indicators
This commit is contained in:
Travis Ralston 2021-08-25 09:16:37 -06:00 committed by GitHub
commit dc32df1ba5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 28 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
res/css/views/voip/_CallView.scss
View file

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

3
res/css/views/voip/_CallViewSidebar.scss
View file

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

11
res/css/views/voip/_VideoFeed.scss
View file

@ -17,12 +17,23 @@ limitations under the License.
.mx_VideoFeed {
overflow: hidden;
position: relative;
box-sizing: border-box;
border: transparent 2px solid;
display: flex;
&.mx_VideoFeed_voice {
background-color: $inverted-bg-color;
aspect-ratio: 16 / 9;
}
&.mx_VideoFeed_speaking {
border: $accent-color 2px solid;
.mx_VideoFeed_video {
border-radius: 0;
}
}
.mx_VideoFeed_video {
width: 100%;
background-color: transparent;

15
src/components/views/voip/VideoFeed.tsx
View file

@ -45,6 +45,7 @@ interface IProps {
interface IState {
audioMuted: boolean;
videoMuted: boolean;
speaking: boolean;
}
@replaceableComponent("views.voip.VideoFeed")
@ -57,6 +58,7 @@ export default class VideoFeed extends React.PureComponent<IProps, IState> {
this.state = {
audioMuted: this.props.feed.isAudioMuted(),
videoMuted: this.props.feed.isVideoMuted(),
speaking: false,
};
}
@ -103,11 +105,19 @@ export default class VideoFeed extends React.PureComponent<IProps, IState> {
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.Speaking, this.onSpeaking);
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.Speaking, this.onSpeaking);
this.props.feed.measureVolumeActivity(true);
}
this.playMedia();
}
}
@ -162,6 +172,10 @@ export default class VideoFeed extends React.PureComponent<IProps, IState> {
});
};
private onSpeaking = (speaking: boolean): void => {
this.setState({ speaking });
};
private onResize = (e) => {
if (this.props.onResize && !this.props.feed.isLocal()) {
this.props.onResize(e);
@ -173,6 +187,7 @@ export default class VideoFeed extends React.PureComponent<IProps, IState> {
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,