diff --git a/src/components/views/voip/VideoFeed.tsx b/src/components/views/voip/VideoFeed.tsx index d47e4d376a..d22fa055ce 100644 --- a/src/components/views/voip/VideoFeed.tsx +++ b/src/components/views/voip/VideoFeed.tsx @@ -21,7 +21,6 @@ import SettingsStore from "../../../settings/SettingsStore"; import { CallFeed, CallFeedEvent } from 'matrix-js-sdk/src/webrtc/callFeed'; import { logger } from 'matrix-js-sdk/src/logger'; import MemberAvatar from "../avatars/MemberAvatar" -import CallMediaHandler from "../../../CallMediaHandler"; import {replaceableComponent} from "../../../utils/replaceableComponent"; interface IProps { @@ -45,11 +44,9 @@ interface IState { videoMuted: boolean; } - @replaceableComponent("views.voip.VideoFeed") export default class VideoFeed extends React.Component { - private video = createRef(); - private audio = createRef(); + private element = createRef(); constructor(props: IProps) { super(props); @@ -62,38 +59,20 @@ export default class VideoFeed extends React.Component { componentDidMount() { this.props.feed.addListener(CallFeedEvent.NewStream, this.onNewStream); - this.playAllMedia(); + this.playMedia(); } componentWillUnmount() { this.props.feed.removeListener(CallFeedEvent.NewStream, this.onNewStream); - this.video.current?.removeEventListener('resize', this.onResize); - this.stopAllMedia(); + this.element.current?.removeEventListener('resize', this.onResize); + this.stopMedia(); } - private playMediaElement(element: HTMLVideoElement | HTMLAudioElement) { - if (element instanceof HTMLAudioElement) { - const audioOutput = CallMediaHandler.getAudioOutput(); - - // Don't play audio if the feed is local - element.muted = this.props.feed.isLocal(); - - if (audioOutput && !element.muted) { - try { - // This seems quite unreliable in Chrome, although I haven't yet managed to make a jsfiddle where - // it fails. - // It seems reliable if you set the sink ID after setting the srcObject and then set the sink ID - // back to the default after the call is over - Dave - element.setSinkId(audioOutput); - } catch (e) { - console.error("Couldn't set requested audio output device: using default", e); - logger.warn("Couldn't set requested audio output device: using default", e); - } - } - } else { - element.muted = true; - } - + private playMedia() { + const element = this.element.current; + if (!element) return; + // We play audio in AudioFeed, not here + element.muted = true; element.srcObject = this.props.feed.stream; element.autoplay = true; try { @@ -112,7 +91,10 @@ export default class VideoFeed extends React.Component { } } - private stopMediaElement(element: HTMLAudioElement | HTMLVideoElement) { + private stopMedia() { + const element = this.element.current; + if (!element) return; + element.pause(); element.src = null; @@ -122,22 +104,12 @@ export default class VideoFeed extends React.Component { // seem to be necessary - Šimon } - private playAllMedia() { - this.playMediaElement(this.audio.current); - if (this.video.current) this.playMediaElement(this.video.current); - } - - private stopAllMedia() { - this.stopMediaElement(this.audio.current) - if (this.video.current) this.stopMediaElement(this.video.current); - } - private onNewStream = () => { this.setState({ audioMuted: this.props.feed.isAudioMuted(), videoMuted: this.props.feed.isVideoMuted(), }); - this.playAllMedia(); + this.playMedia(); }; private onResize = (e) => { @@ -152,16 +124,13 @@ export default class VideoFeed extends React.Component { mx_VideoFeed_local: this.props.feed.isLocal(), mx_VideoFeed_remote: !this.props.feed.isLocal(), mx_VideoFeed_voice: this.state.videoMuted, + mx_VideoFeed_video: !this.state.videoMuted, mx_VideoFeed_mirror: ( this.props.feed.isLocal() && SettingsStore.getValue('VideoView.flipVideoHorizontally') ), }; - const audio = ( -