imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improve VoIP UI/UX (#7048)

Browse source 
* Remove speaking indicator

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* Remove mic icon for primary feed

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* Remove caching as it doesn't seem to be neccessary

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* Add call view buttons colors

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* Refactor button code

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* Update call view button icons

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* i18n

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* Add dialpad icon

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* Fix button sizing in PiP

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* Fix secondary voice video feed color

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
This commit is contained in:
Šimon Brandner 2021-11-15 18:24:11 +01:00 • committed by GitHub
parent 431098b56b
commit bafeb38472
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
32 changed files with 247 additions and 383 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -45,7 +45,6 @@ interface IProps {
interface IState {
audioMuted: boolean;
videoMuted: boolean;
speaking: boolean;
}
@replaceableComponent("views.voip.VideoFeed")
@ -58,7 +57,6 @@ export default class VideoFeed extends React.PureComponent<IProps, IState> {
this.state = {
audioMuted: this.props.feed.isAudioMuted(),
videoMuted: this.props.feed.isVideoMuted(),
speaking: false,
};
}
@ -106,7 +104,6 @@ export default class VideoFeed extends React.PureComponent<IProps, IState> {
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();
@ -115,7 +112,6 @@ export default class VideoFeed extends React.PureComponent<IProps, IState> {
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();
@ -172,10 +168,6 @@ 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);
@ -187,7 +179,6 @@ 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,
@ -195,7 +186,11 @@ export default class VideoFeed extends React.PureComponent<IProps, IState> {
});
let micIcon;
if (feed.purpose !== SDPStreamMetadataPurpose.Screenshare && !pipMode) {
if (
feed.purpose !== SDPStreamMetadataPurpose.Screenshare &&
!primary &&
!pipMode
) {
micIcon = (
<div className={micIconClasses} />
);