;
};
diff --git a/src/components/views/elements/ImageView.tsx b/src/components/views/elements/ImageView.tsx
index fcacae2d39..05d487a9eb 100644
--- a/src/components/views/elements/ImageView.tsx
+++ b/src/components/views/elements/ImageView.tsx
@@ -114,6 +114,8 @@ export default class ImageView extends React.Component {
componentWillUnmount() {
this.focusLock.current.removeEventListener('wheel', this.onWheel);
+ window.removeEventListener("resize", this.calculateZoom);
+ this.image.current.removeEventListener("load", this.calculateZoom);
}
private calculateZoom = () => {
diff --git a/src/components/views/settings/tabs/user/HelpUserSettingsTab.tsx b/src/components/views/settings/tabs/user/HelpUserSettingsTab.tsx
index a009ead064..3fa0be478c 100644
--- a/src/components/views/settings/tabs/user/HelpUserSettingsTab.tsx
+++ b/src/components/views/settings/tabs/user/HelpUserSettingsTab.tsx
@@ -18,6 +18,7 @@ import React from 'react';
import {_t, getCurrentLanguage} from "../../../../../languageHandler";
import {MatrixClientPeg} from "../../../../../MatrixClientPeg";
import AccessibleButton from "../../../elements/AccessibleButton";
+import AccessibleTooltipButton from '../../../elements/AccessibleTooltipButton';
import SdkConfig from "../../../../../SdkConfig";
import createRoom from "../../../../../createRoom";
import Modal from "../../../../../Modal";
@@ -26,6 +27,9 @@ import PlatformPeg from "../../../../../PlatformPeg";
import * as KeyboardShortcuts from "../../../../../accessibility/KeyboardShortcuts";
import UpdateCheckButton from "../../UpdateCheckButton";
import { replaceableComponent } from "../../../../../utils/replaceableComponent";
+import { copyPlaintext } from "../../../../../utils/strings";
+import * as ContextMenu from "../../../../structures/ContextMenu";
+import { toRightOf } from "../../../../structures/ContextMenu";
interface IProps {
closeSettingsFn: () => {};
@@ -38,6 +42,8 @@ interface IState {
@replaceableComponent("views.settings.tabs.user.HelpUserSettingsTab")
export default class HelpUserSettingsTab extends React.Component {
+ protected closeCopiedTooltip: () => void;
+
constructor(props) {
super(props);
@@ -56,6 +62,12 @@ export default class HelpUserSettingsTab extends React.Component
});
}
+ componentWillUnmount() {
+ // if the Copied tooltip is open then get rid of it, there are ways to close the modal which wouldn't close
+ // the tooltip otherwise, such as pressing Escape
+ if (this.closeCopiedTooltip) this.closeCopiedTooltip();
+ }
+
private onClearCacheAndReload = (e) => {
if (!PlatformPeg.get()) return;
@@ -153,6 +165,20 @@ export default class HelpUserSettingsTab extends React.Component
);
}
+ onAccessTokenCopyClick = async (e) => {
+ e.preventDefault();
+ const target = e.target; // copy target before we go async and React throws it away
+
+ const successful = await copyPlaintext(MatrixClientPeg.get().getAccessToken());
+ const buttonRect = target.getBoundingClientRect();
+ const GenericTextContextMenu = sdk.getComponent('context_menus.GenericTextContextMenu');
+ const {close} = ContextMenu.createMenu(GenericTextContextMenu, {
+ ...toRightOf(buttonRect, 2),
+ message: successful ? _t('Copied!') : _t('Failed to copy'),
+ });
+ this.closeCopiedTooltip = target.onmouseleave = close;
+ }
+
render() {
const brand = SdkConfig.get().brand;
@@ -269,12 +295,20 @@ export default class HelpUserSettingsTab extends React.Component
{_t("Homeserver is")} {MatrixClientPeg.get().getHomeserverUrl()}
{_t("Identity Server is")} {MatrixClientPeg.get().getIdentityServerUrl()}
- {_t("Access Token:") + ' '}
-
- <{ _t("click to reveal") }>
-
+
+
+ {_t("Access Token")}
+ {_t("Your access token gives full access to your account."
+ + " Do not share it with anyone." )}
+
+ {MatrixClientPeg.get().getAccessToken()}
+
+
+
{_t("Clear cache and reload")}
diff --git a/src/components/views/voice_messages/LiveRecordingWaveform.tsx b/src/components/views/voice_messages/LiveRecordingWaveform.tsx
index e7c34c9177..aab89f6ab1 100644
--- a/src/components/views/voice_messages/LiveRecordingWaveform.tsx
+++ b/src/components/views/voice_messages/LiveRecordingWaveform.tsx
@@ -15,12 +15,11 @@ limitations under the License.
*/
import React from "react";
-import {IRecordingUpdate, VoiceRecording} from "../../../voice/VoiceRecording";
+import {IRecordingUpdate, RECORDING_PLAYBACK_SAMPLES, VoiceRecording} from "../../../voice/VoiceRecording";
import {replaceableComponent} from "../../../utils/replaceableComponent";
import {arrayFastResample, arraySeed} from "../../../utils/arrays";
import {percentageOf} from "../../../utils/numbers";
import Waveform from "./Waveform";
-import {PLAYBACK_WAVEFORM_SAMPLES} from "../../../voice/Playback";
interface IProps {
recorder: VoiceRecording;
@@ -38,14 +37,14 @@ export default class LiveRecordingWaveform extends React.PureComponent {
// The waveform and the downsample target are pretty close, so we should be fine to
// do this, despite the docs on arrayFastResample.
- const bars = arrayFastResample(Array.from(update.waveform), PLAYBACK_WAVEFORM_SAMPLES);
+ const bars = arrayFastResample(Array.from(update.waveform), RECORDING_PLAYBACK_SAMPLES);
this.setState({
// The incoming data is between zero and one, but typically even screaming into a
// microphone won't send you over 0.6, so we artificially adjust the gain for the
diff --git a/src/components/views/voip/AudioFeed.tsx b/src/components/views/voip/AudioFeed.tsx
new file mode 100644
index 0000000000..c78f0c0fc8
--- /dev/null
+++ b/src/components/views/voip/AudioFeed.tsx
@@ -0,0 +1,97 @@
+/*
+Copyright 2021 Šimon Brandner
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React, {createRef} from 'react';
+import { CallFeed, CallFeedEvent } from 'matrix-js-sdk/src/webrtc/callFeed';
+import { logger } from 'matrix-js-sdk/src/logger';
+import CallMediaHandler from "../../../CallMediaHandler";
+
+interface IProps {
+ feed: CallFeed,
+}
+
+export default class AudioFeed extends React.Component {
+ private element = createRef();
+
+ componentDidMount() {
+ this.props.feed.addListener(CallFeedEvent.NewStream, this.onNewStream);
+ this.playMedia();
+ }
+
+ componentWillUnmount() {
+ this.props.feed.removeListener(CallFeedEvent.NewStream, this.onNewStream);
+ this.stopMedia();
+ }
+
+ private playMedia() {
+ const element = this.element.current;
+ const audioOutput = CallMediaHandler.getAudioOutput();
+
+ if (audioOutput) {
+ 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);
+ }
+ }
+
+ element.muted = false;
+ element.srcObject = this.props.feed.stream;
+ element.autoplay = true;
+
+ try {
+ // A note on calling methods on media elements:
+ // We used to have queues per media element to serialise all calls on those elements.
+ // The reason given for this was that load() and play() were racing. However, we now
+ // never call load() explicitly so this seems unnecessary. However, serialising every
+ // operation was causing bugs where video would not resume because some play command
+ // had got stuck and all media operations were queued up behind it. If necessary, we
+ // should serialise the ones that need to be serialised but then be able to interrupt
+ // them with another load() which will cancel the pending one, but since we don't call
+ // load() explicitly, it shouldn't be a problem. - Dave
+ element.play()
+ } catch (e) {
+ logger.info("Failed to play media element with feed", this.props.feed, e);
+ }
+ }
+
+ private stopMedia() {
+ const element = this.element.current;
+
+ element.pause();
+ element.src = null;
+
+ // As per comment in componentDidMount, setting the sink ID back to the
+ // default once the call is over makes setSinkId work reliably. - Dave
+ // Since we are not using the same element anymore, the above doesn't
+ // seem to be necessary - Šimon
+ }
+
+ private onNewStream = () => {
+ this.playMedia();
+ };
+
+ render() {
+ return (
+
+ );
+ }
+}
diff --git a/src/components/views/voip/AudioFeedArrayForCall.tsx b/src/components/views/voip/AudioFeedArrayForCall.tsx
new file mode 100644
index 0000000000..bfe232d799
--- /dev/null
+++ b/src/components/views/voip/AudioFeedArrayForCall.tsx
@@ -0,0 +1,60 @@
+/*
+Copyright 2021 Šimon Brandner
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from "react";
+import AudioFeed from "./AudioFeed"
+import { CallEvent, MatrixCall } from "matrix-js-sdk/src/webrtc/call";
+import { CallFeed } from "matrix-js-sdk/src/webrtc/callFeed";
+
+interface IProps {
+ call: MatrixCall;
+}
+
+interface IState {
+ feeds: Array;
+}
+
+export default class AudioFeedArrayForCall extends React.Component {
+ constructor(props: IProps) {
+ super(props);
+
+ this.state = {
+ feeds: [],
+ };
+ }
+
+ componentDidMount() {
+ this.props.call.addListener(CallEvent.FeedsChanged, this.onFeedsChanged);
+ }
+
+ componentWillUnmount() {
+ this.props.call.removeListener(CallEvent.FeedsChanged, this.onFeedsChanged);
+ }
+
+ onFeedsChanged = () => {
+ this.setState({
+ feeds: this.props.call.getRemoteFeeds(),
+ });
+ }
+
+ render() {
+ return this.state.feeds.map((feed, i) => {
+ return (
+
+ );
+ });
+ }
+}
diff --git a/src/components/views/voip/CallPreview.tsx b/src/components/views/voip/CallPreview.tsx
index d31afddec9..80fd64a820 100644
--- a/src/components/views/voip/CallPreview.tsx
+++ b/src/components/views/voip/CallPreview.tsx
@@ -19,7 +19,7 @@ import React from 'react';
import CallView from "./CallView";
import RoomViewStore from '../../../stores/RoomViewStore';
-import CallHandler from '../../../CallHandler';
+import CallHandler, { CallHandlerEvent } from '../../../CallHandler';
import dis from '../../../dispatcher/dispatcher';
import { ActionPayload } from '../../../dispatcher/payloads';
import PersistentApp from "../elements/PersistentApp";
@@ -27,7 +27,6 @@ import SettingsStore from "../../../settings/SettingsStore";
import { CallEvent, CallState, MatrixCall } from 'matrix-js-sdk/src/webrtc/call';
import { MatrixClientPeg } from '../../../MatrixClientPeg';
import {replaceableComponent} from "../../../utils/replaceableComponent";
-import { Action } from '../../../dispatcher/actions';
const SHOW_CALL_IN_STATES = [
CallState.Connected,
@@ -110,12 +109,14 @@ export default class CallPreview extends React.Component {
}
public componentDidMount() {
+ CallHandler.sharedInstance().addListener(CallHandlerEvent.CallChangeRoom, this.updateCalls);
this.roomStoreToken = RoomViewStore.addListener(this.onRoomViewStoreUpdate);
this.dispatcherRef = dis.register(this.onAction);
MatrixClientPeg.get().on(CallEvent.RemoteHoldUnhold, this.onCallRemoteHold);
}
public componentWillUnmount() {
+ CallHandler.sharedInstance().removeListener(CallHandlerEvent.CallChangeRoom, this.updateCalls);
MatrixClientPeg.get().removeListener(CallEvent.RemoteHoldUnhold, this.onCallRemoteHold);
if (this.roomStoreToken) {
this.roomStoreToken.remove();
@@ -143,21 +144,24 @@ export default class CallPreview extends React.Component {
switch (payload.action) {
// listen for call state changes to prod the render method, which
// may hide the global CallView if the call it is tracking is dead
- case Action.CallChangeRoom:
case 'call_state': {
- const [primaryCall, secondaryCalls] = getPrimarySecondaryCalls(
- CallHandler.sharedInstance().getAllActiveCallsNotInRoom(this.state.roomId),
- );
-
- this.setState({
- primaryCall: primaryCall,
- secondaryCall: secondaryCalls[0],
- });
+ this.updateCalls();
break;
}
}
};
+ private updateCalls = () => {
+ const [primaryCall, secondaryCalls] = getPrimarySecondaryCalls(
+ CallHandler.sharedInstance().getAllActiveCallsNotInRoom(this.state.roomId),
+ );
+
+ this.setState({
+ primaryCall: primaryCall,
+ secondaryCall: secondaryCalls[0],
+ });
+ };
+
private onCallRemoteHold = () => {
const [primaryCall, secondaryCalls] = getPrimarySecondaryCalls(
CallHandler.sharedInstance().getAllActiveCallsNotInRoom(this.state.roomId),
diff --git a/src/components/views/voip/CallView.tsx b/src/components/views/voip/CallView.tsx
index 6745713845..c084dacaa8 100644
--- a/src/components/views/voip/CallView.tsx
+++ b/src/components/views/voip/CallView.tsx
@@ -20,10 +20,9 @@ import dis from '../../../dispatcher/dispatcher';
import CallHandler from '../../../CallHandler';
import {MatrixClientPeg} from '../../../MatrixClientPeg';
import { _t, _td } from '../../../languageHandler';
-import VideoFeed, { VideoFeedType } from "./VideoFeed";
+import VideoFeed from './VideoFeed';
import RoomAvatar from "../avatars/RoomAvatar";
-import { CallState, CallType, MatrixCall } from 'matrix-js-sdk/src/webrtc/call';
-import { CallEvent } from 'matrix-js-sdk/src/webrtc/call';
+import { CallState, CallType, MatrixCall, CallEvent } from 'matrix-js-sdk/src/webrtc/call';
import classNames from 'classnames';
import AccessibleButton from '../elements/AccessibleButton';
import {isOnlyCtrlOrCmdKeyEvent, Key} from '../../../Keyboard';
@@ -31,6 +30,7 @@ import {alwaysAboveLeftOf, alwaysAboveRightOf, ChevronFace, ContextMenuButton} f
import CallContextMenu from '../context_menus/CallContextMenu';
import { avatarUrlForMember } from '../../../Avatar';
import DialpadContextMenu from '../context_menus/DialpadContextMenu';
+import { CallFeed } from 'matrix-js-sdk/src/webrtc/callFeed';
import {replaceableComponent} from "../../../utils/replaceableComponent";
interface IProps {
@@ -40,11 +40,11 @@ interface IProps {
// Another ongoing call to display information about
secondaryCall?: MatrixCall,
- // a callback which is called when the content in the callview changes
+ // a callback which is called when the content in the CallView changes
// in a way that is likely to cause a resize.
onResize?: any;
- // Whether this call view is for picture-in-pictue mode
+ // Whether this call view is for picture-in-picture mode
// otherwise, it's the larger call view when viewing the room the call is in.
// This is sort of a proxy for a number of things but we currently have no
// need to control those things separately, so this is simpler.
@@ -60,6 +60,7 @@ interface IState {
controlsVisible: boolean,
showMoreMenu: boolean,
showDialpad: boolean,
+ feeds: CallFeed[],
}
function getFullScreenElement() {
@@ -115,6 +116,7 @@ export default class CallView extends React.Component {
controlsVisible: true,
showMoreMenu: false,
showDialpad: false,
+ feeds: this.props.call.getFeeds(),
}
this.updateCallListeners(null, this.props.call);
@@ -172,11 +174,13 @@ export default class CallView extends React.Component {
oldCall.removeListener(CallEvent.State, this.onCallState);
oldCall.removeListener(CallEvent.LocalHoldUnhold, this.onCallLocalHoldUnhold);
oldCall.removeListener(CallEvent.RemoteHoldUnhold, this.onCallRemoteHoldUnhold);
+ oldCall.removeListener(CallEvent.FeedsChanged, this.onFeedsChanged);
}
if (newCall) {
newCall.on(CallEvent.State, this.onCallState);
newCall.on(CallEvent.LocalHoldUnhold, this.onCallLocalHoldUnhold);
newCall.on(CallEvent.RemoteHoldUnhold, this.onCallRemoteHoldUnhold);
+ newCall.on(CallEvent.FeedsChanged, this.onFeedsChanged);
}
}
@@ -186,6 +190,10 @@ export default class CallView extends React.Component {
});
};
+ private onFeedsChanged = (newFeeds: Array) => {
+ this.setState({feeds: newFeeds});
+ };
+
private onCallLocalHoldUnhold = () => {
this.setState({
isLocalOnHold: this.props.call.isLocalOnHold(),
@@ -304,7 +312,7 @@ export default class CallView extends React.Component {
}
// we register global shortcuts here, they *must not conflict* with local shortcuts elsewhere or both will fire
- // Note that this assumes we always have a callview on screen at any given time
+ // Note that this assumes we always have a CallView on screen at any given time
// CallHandler would probably be a better place for this
private onNativeKeyDown = ev => {
let handled = false;
@@ -474,6 +482,8 @@ export default class CallView extends React.Component {
{contextMenuButton}
;
+ const avatarSize = this.props.pipMode ? 76 : 160;
+
// The 'content' for the call, ie. the videos for a video call and profile picture
// for voice calls (fills the bg)
let contentView: React.ReactNode;
@@ -524,41 +534,85 @@ export default class CallView extends React.Component {
;
}
- if (this.props.call.type === CallType.Video) {
- let localVideoFeed = null;
- let onHoldBackground = null;
- const backgroundStyle: CSSProperties = {};
- const containerClasses = classNames({
- mx_CallView_video: true,
- mx_CallView_video_hold: isOnHold,
- });
- if (isOnHold) {
+ // This is a bit messy. I can't see a reason to have two onHold/transfer screens
+ if (isOnHold || transfereeCall) {
+ if (this.props.call.type === CallType.Video) {
+ const containerClasses = classNames({
+ mx_CallView_content: true,
+ mx_CallView_video: true,
+ mx_CallView_video_hold: isOnHold,
+ });
+ let onHoldBackground = null;
+ const backgroundStyle: CSSProperties = {};
const backgroundAvatarUrl = avatarUrlForMember(
- // is it worth getting the size of the div to pass here?
+ // is it worth getting the size of the div to pass here?
this.props.call.getOpponentMember(), 1024, 1024, 'crop',
);
backgroundStyle.backgroundImage = 'url(' + backgroundAvatarUrl + ')';
onHoldBackground = ;
- }
- if (!this.state.vidMuted) {
- localVideoFeed = ;
- }
- contentView =
+ );
+ }
+ } else if (this.props.call.noIncomingFeeds()) {
+ // Here we're reusing the css classes from voice on hold, because
+ // I am lazy. If this gets merged, the CallView might be subject
+ // to change anyway - I might take an axe to this file in order to
+ // try to get other things working
const classes = classNames({
+ mx_CallView_content: true,
mx_CallView_voice: true,
- mx_CallView_voice_hold: isOnHold,
});
+ const feeds = this.props.call.getLocalFeeds().map((feed, i) => {
+ // Here we check to hide local audio feeds to achieve the same UI/UX
+ // as before. But once again this might be subject to change
+ if (feed.isVideoMuted()) return;
+ return (
+
+ );
+ });
+
+ // Saying "Connecting" here isn't really true, but the best thing
+ // I can come up with, but this might be subject to change as well
contentView =
+ {feeds}
{
/>
- {holdTransferContent}
+
{_t("Connecting")}
+ {callControls}
+
;
+ } else {
+ const containerClasses = classNames({
+ mx_CallView_content: true,
+ mx_CallView_video: true,
+ });
+
+ // TODO: Later the CallView should probably be reworked to support
+ // any number of feeds but now we can always expect there to be two
+ // feeds. This is because the js-sdk ignores any new incoming streams
+ const feeds = this.state.feeds.map((feed, i) => {
+ // Here we check to hide local audio feeds to achieve the same UI/UX
+ // as before. But once again this might be subject to change
+ if (feed.isVideoMuted() && feed.isLocal()) return;
+ return (
+
+ );
+ });
+
+ contentView =
+ {feeds}
{callControls}
;
}
diff --git a/src/components/views/voip/CallViewForRoom.tsx b/src/components/views/voip/CallViewForRoom.tsx
index 7540dbc8d9..0c785f758d 100644
--- a/src/components/views/voip/CallViewForRoom.tsx
+++ b/src/components/views/voip/CallViewForRoom.tsx
@@ -16,13 +16,12 @@ limitations under the License.
import { CallState, MatrixCall } from 'matrix-js-sdk/src/webrtc/call';
import React from 'react';
-import CallHandler from '../../../CallHandler';
+import CallHandler, { CallHandlerEvent } from '../../../CallHandler';
import CallView from './CallView';
import dis from '../../../dispatcher/dispatcher';
import {Resizable} from "re-resizable";
import ResizeNotifier from "../../../utils/ResizeNotifier";
import {replaceableComponent} from "../../../utils/replaceableComponent";
-import { Action } from '../../../dispatcher/actions';
interface IProps {
// What room we should display the call for
@@ -55,25 +54,30 @@ export default class CallViewForRoom extends React.Component {
public componentDidMount() {
this.dispatcherRef = dis.register(this.onAction);
+ CallHandler.sharedInstance().addListener(CallHandlerEvent.CallChangeRoom, this.updateCall);
}
public componentWillUnmount() {
dis.unregister(this.dispatcherRef);
+ CallHandler.sharedInstance().removeListener(CallHandlerEvent.CallChangeRoom, this.updateCall);
}
private onAction = (payload) => {
switch (payload.action) {
- case Action.CallChangeRoom:
case 'call_state': {
- const newCall = this.getCall();
- if (newCall !== this.state.call) {
- this.setState({call: newCall});
- }
+ this.updateCall();
break;
}
}
};
+ private updateCall = () => {
+ const newCall = this.getCall();
+ if (newCall !== this.state.call) {
+ this.setState({call: newCall});
+ }
+ };
+
private getCall(): MatrixCall {
const call = CallHandler.sharedInstance().getCallForRoom(this.props.roomId);
diff --git a/src/components/views/voip/VideoFeed.tsx b/src/components/views/voip/VideoFeed.tsx
index 2981fb6c04..d22fa055ce 100644
--- a/src/components/views/voip/VideoFeed.tsx
+++ b/src/components/views/voip/VideoFeed.tsx
@@ -18,52 +18,102 @@ import classnames from 'classnames';
import { MatrixCall } from 'matrix-js-sdk/src/webrtc/call';
import React, {createRef} from 'react';
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 {replaceableComponent} from "../../../utils/replaceableComponent";
-export enum VideoFeedType {
- Local,
- Remote,
-}
-
interface IProps {
call: MatrixCall,
- type: VideoFeedType,
+ feed: CallFeed,
+
+ // Whether this call view is for picture-in-picture mode
+ // otherwise, it's the larger call view when viewing the room the call is in.
+ // This is sort of a proxy for a number of things but we currently have no
+ // need to control those things separately, so this is simpler.
+ pipMode?: boolean;
// a callback which is called when the video element is resized
// due to a change in video metadata
onResize?: (e: Event) => void,
}
-@replaceableComponent("views.voip.VideoFeed")
-export default class VideoFeed extends React.Component {
- private vid = createRef();
+interface IState {
+ audioMuted: boolean;
+ videoMuted: boolean;
+}
- componentDidMount() {
- this.vid.current.addEventListener('resize', this.onResize);
- this.setVideoElement();
+@replaceableComponent("views.voip.VideoFeed")
+export default class VideoFeed extends React.Component {
+ private element = createRef();
+
+ constructor(props: IProps) {
+ super(props);
+
+ this.state = {
+ audioMuted: this.props.feed.isAudioMuted(),
+ videoMuted: this.props.feed.isVideoMuted(),
+ };
}
- componentDidUpdate(prevProps) {
- if (this.props.call !== prevProps.call) {
- this.setVideoElement();
- }
+ componentDidMount() {
+ this.props.feed.addListener(CallFeedEvent.NewStream, this.onNewStream);
+ this.playMedia();
}
componentWillUnmount() {
- this.vid.current.removeEventListener('resize', this.onResize);
+ this.props.feed.removeListener(CallFeedEvent.NewStream, this.onNewStream);
+ this.element.current?.removeEventListener('resize', this.onResize);
+ this.stopMedia();
}
- private setVideoElement() {
- if (this.props.type === VideoFeedType.Local) {
- this.props.call.setLocalVideoElement(this.vid.current);
- } else {
- this.props.call.setRemoteVideoElement(this.vid.current);
+ 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 {
+ // A note on calling methods on media elements:
+ // We used to have queues per media element to serialise all calls on those elements.
+ // The reason given for this was that load() and play() were racing. However, we now
+ // never call load() explicitly so this seems unnecessary. However, serialising every
+ // operation was causing bugs where video would not resume because some play command
+ // had got stuck and all media operations were queued up behind it. If necessary, we
+ // should serialise the ones that need to be serialised but then be able to interrupt
+ // them with another load() which will cancel the pending one, but since we don't call
+ // load() explicitly, it shouldn't be a problem. - Dave
+ element.play()
+ } catch (e) {
+ logger.info("Failed to play media element with feed", this.props.feed, e);
}
}
- onResize = (e) => {
- if (this.props.onResize) {
+ private stopMedia() {
+ const element = this.element.current;
+ if (!element) return;
+
+ element.pause();
+ element.src = null;
+
+ // As per comment in componentDidMount, setting the sink ID back to the
+ // default once the call is over makes setSinkId work reliably. - Dave
+ // Since we are not using the same element anymore, the above doesn't
+ // seem to be necessary - Šimon
+ }
+
+ private onNewStream = () => {
+ this.setState({
+ audioMuted: this.props.feed.isAudioMuted(),
+ videoMuted: this.props.feed.isVideoMuted(),
+ });
+ this.playMedia();
+ };
+
+ private onResize = (e) => {
+ if (this.props.onResize && !this.props.feed.isLocal()) {
this.props.onResize(e);
}
};
@@ -71,14 +121,33 @@ export default class VideoFeed extends React.Component {
render() {
const videoClasses = {
mx_VideoFeed: true,
- mx_VideoFeed_local: this.props.type === VideoFeedType.Local,
- mx_VideoFeed_remote: this.props.type === VideoFeedType.Remote,
+ 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.type === VideoFeedType.Local &&
+ this.props.feed.isLocal() &&
SettingsStore.getValue('VideoView.flipVideoHorizontally')
),
};
- return ;
+ if (this.state.videoMuted) {
+ const member = this.props.feed.getMember();
+ const avatarSize = this.props.pipMode ? 76 : 160;
+
+ return (
+
+
+
+ );
+ } else {
+ return (
+
+ );
+ }
}
}
diff --git a/src/dispatcher/actions.ts b/src/dispatcher/actions.ts
index 46c962f160..cd32c3743f 100644
--- a/src/dispatcher/actions.ts
+++ b/src/dispatcher/actions.ts
@@ -114,9 +114,6 @@ export enum Action {
*/
VirtualRoomSupportUpdated = "virtual_room_support_updated",
- // Probably would be better to have a VoIP states in a store and have the store emit changes
- CallChangeRoom = "call_change_room",
-
/**
* Fired when an upload has started. Should be used with UploadStartedPayload.
*/
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index abec4017c8..dcad970300 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -833,7 +833,7 @@
"Match system theme": "Match system theme",
"Use a system font": "Use a system font",
"System font name": "System font name",
- "Allow Peer-to-Peer for 1:1 calls": "Allow Peer-to-Peer for 1:1 calls",
+ "Allow Peer-to-Peer for 1:1 calls (if you enable this, the other party might be able to see your IP address)": "Allow Peer-to-Peer for 1:1 calls (if you enable this, the other party might be able to see your IP address)",
"Send analytics data": "Send analytics data",
"Never send encrypted messages to unverified sessions from this session": "Never send encrypted messages to unverified sessions from this session",
"Never send encrypted messages to unverified sessions in this room from this session": "Never send encrypted messages to unverified sessions in this room from this session",
@@ -885,6 +885,7 @@
"You held the call Switch": "You held the call Switch",
"You held the call Resume": "You held the call Resume",
"%(peerName)s held the call": "%(peerName)s held the call",
+ "Connecting": "Connecting",
"Video Call": "Video Call",
"Voice Call": "Voice Call",
"Fill Screen": "Fill Screen",
@@ -1252,8 +1253,9 @@
"olm version:": "olm version:",
"Homeserver is": "Homeserver is",
"Identity Server is": "Identity Server is",
- "Access Token:": "Access Token:",
- "click to reveal": "click to reveal",
+ "Access Token": "Access Token",
+ "Your access token gives full access to your account. Do not share it with anyone.": "Your access token gives full access to your account. Do not share it with anyone.",
+ "Copy": "Copy",
"Clear cache and reload": "Clear cache and reload",
"Labs": "Labs",
"Customise your experience with experimental labs features. Learn more.": "Customise your experience with experimental labs features. Learn more.",
@@ -2033,10 +2035,11 @@
"Direct Messages": "Direct Messages",
"Space selection": "Space selection",
"Add existing rooms": "Add existing rooms",
- "Don't want to add an existing room?": "Don't want to add an existing room?",
+ "Not all selected were added": "Not all selected were added",
+ "Adding rooms... (%(progress)s out of %(count)s)|other": "Adding rooms... (%(progress)s out of %(count)s)",
+ "Adding rooms... (%(progress)s out of %(count)s)|one": "Adding room...",
+ "Want to add a new room instead?": "Want to add a new room instead?",
"Create a new room": "Create a new room",
- "Failed to add rooms to space": "Failed to add rooms to space",
- "Adding...": "Adding...",
"Matrix ID": "Matrix ID",
"Matrix Room ID": "Matrix Room ID",
"email address": "email address",
@@ -2347,7 +2350,6 @@
"Share Community": "Share Community",
"Share Room Message": "Share Room Message",
"Link to selected message": "Link to selected message",
- "Copy": "Copy",
"Command Help": "Command Help",
"Failed to save space settings.": "Failed to save space settings.",
"Space settings": "Space settings",
@@ -2675,6 +2677,8 @@
"Failed to create initial space rooms": "Failed to create initial space rooms",
"Skip for now": "Skip for now",
"Creating rooms...": "Creating rooms...",
+ "Failed to add rooms to space": "Failed to add rooms to space",
+ "Adding...": "Adding...",
"What do you want to organise?": "What do you want to organise?",
"Pick rooms or conversations to add. This is just a space for you, no one will be informed. You can add more later.": "Pick rooms or conversations to add. This is just a space for you, no one will be informed. You can add more later.",
"Share %(name)s": "Share %(name)s",
diff --git a/src/settings/Settings.ts b/src/settings/Settings.ts
index 2a26eeac13..1497a2208d 100644
--- a/src/settings/Settings.ts
+++ b/src/settings/Settings.ts
@@ -438,7 +438,10 @@ export const SETTINGS: {[setting: string]: ISetting} = {
},
"webRtcAllowPeerToPeer": {
supportedLevels: LEVELS_DEVICE_ONLY_SETTINGS_WITH_CONFIG,
- displayName: _td('Allow Peer-to-Peer for 1:1 calls'),
+ displayName: _td(
+ "Allow Peer-to-Peer for 1:1 calls " +
+ "(if you enable this, the other party might be able to see your IP address)",
+ ),
default: true,
invertedSettingName: 'webRtcForceTURN',
},
diff --git a/src/stores/SpaceStore.tsx b/src/stores/SpaceStore.tsx
index 43822007c9..4423891c61 100644
--- a/src/stores/SpaceStore.tsx
+++ b/src/stores/SpaceStore.tsx
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
-import {sortBy, throttle} from "lodash";
+import {ListIteratee, Many, sortBy, throttle} from "lodash";
import {EventType, RoomType} from "matrix-js-sdk/src/@types/event";
import {Room} from "matrix-js-sdk/src/models/room";
import {MatrixEvent} from "matrix-js-sdk/src/models/event";
@@ -61,15 +61,18 @@ const partitionSpacesAndRooms = (arr: Room[]): [Room[], Room[]] => { // [spaces,
}, [[], []]);
};
-const getOrder = (ev: MatrixEvent): string | null => {
- const content = ev.getContent();
- if (typeof content.order === "string" && Array.from(content.order).every((c: string) => {
+// For sorting space children using a validated `order`, `m.room.create`'s `origin_server_ts`, `room_id`
+export const getOrder = (order: string, creationTs: number, roomId: string): Array>> => {
+ let validatedOrder: string = null;
+
+ if (typeof order === "string" && Array.from(order).every((c: string) => {
const charCode = c.charCodeAt(0);
return charCode >= 0x20 && charCode <= 0x7F;
})) {
- return content.order;
+ validatedOrder = order;
}
- return null;
+
+ return [validatedOrder, creationTs, roomId];
}
const getRoomFn: FetchRoomFn = (room: Room) => {
@@ -200,9 +203,16 @@ export class SpaceStoreClass extends AsyncStoreWithClient {
private getChildren(spaceId: string): Room[] {
const room = this.matrixClient?.getRoom(spaceId);
const childEvents = room?.currentState.getStateEvents(EventType.SpaceChild).filter(ev => ev.getContent()?.via);
- return sortBy(childEvents, getOrder)
- .map(ev => this.matrixClient.getRoom(ev.getStateKey()))
- .filter(room => room?.getMyMembership() === "join" || room?.getMyMembership() === "invite") || [];
+ return sortBy(childEvents, ev => {
+ const roomId = ev.getStateKey();
+ const childRoom = this.matrixClient?.getRoom(roomId);
+ const createTs = childRoom?.currentState.getStateEvents(EventType.RoomCreate, "")?.getTs();
+ return getOrder(ev.getContent().order, createTs, roomId);
+ }).map(ev => {
+ return this.matrixClient.getRoom(ev.getStateKey());
+ }).filter(room => {
+ return room?.getMyMembership() === "join" || room?.getMyMembership() === "invite";
+ }) || [];
}
public getChildRooms(spaceId: string): Room[] {
@@ -413,7 +423,19 @@ export class SpaceStoreClass extends AsyncStoreWithClient {
this.spaceFilteredRooms.forEach((roomIds, s) => {
// Update NotificationStates
- this.getNotificationState(s)?.setRooms(visibleRooms.filter(room => roomIds.has(room.roomId)));
+ this.getNotificationState(s)?.setRooms(visibleRooms.filter(room => {
+ if (roomIds.has(room.roomId)) {
+ // Don't aggregate notifications for DMs except in the Home Space
+ if (s !== HOME_SPACE) {
+ return !DMRoomMap.shared().getUserIdForRoomId(room.roomId)
+ || RoomListStore.instance.getTagsForRoom(room).includes(DefaultTagID.Favourite);
+ }
+
+ return true;
+ }
+
+ return false;
+ }));
});
}, 100, {trailing: true, leading: true});
diff --git a/src/stores/room-list/RoomListStore.ts b/src/stores/room-list/RoomListStore.ts
index 77beeb4ba1..58eb6ed317 100644
--- a/src/stores/room-list/RoomListStore.ts
+++ b/src/stores/room-list/RoomListStore.ts
@@ -668,7 +668,7 @@ export class RoomListStoreClass extends AsyncStoreWithClient {
* and thus might not cause an update to the store immediately.
* @param {IFilterCondition} filter The filter condition to add.
*/
- public addFilter(filter: IFilterCondition): void {
+ public async addFilter(filter: IFilterCondition): Promise {
if (SettingsStore.getValue("advancedRoomListLogging")) {
// TODO: Remove debug: https://github.com/vector-im/element-web/issues/14602
console.log("Adding filter condition:", filter);
@@ -680,12 +680,14 @@ export class RoomListStoreClass extends AsyncStoreWithClient {
promise = this.recalculatePrefiltering();
} else {
this.filterConditions.push(filter);
- if (this.algorithm) {
- this.algorithm.addFilterCondition(filter);
- }
// Runtime filters with spaces disable prefiltering for the search all spaces effect
if (SettingsStore.getValue("feature_spaces")) {
- promise = this.recalculatePrefiltering();
+ // this has to be awaited so that `setKnownRooms` is called in time for the `addFilterCondition` below
+ // this way the runtime filters are only evaluated on one dataset and not both.
+ await this.recalculatePrefiltering();
+ }
+ if (this.algorithm) {
+ this.algorithm.addFilterCondition(filter);
}
}
promise.then(() => this.updateFn.trigger());
diff --git a/src/stores/room-list/algorithms/Algorithm.ts b/src/stores/room-list/algorithms/Algorithm.ts
index 83ee803115..f3f0b178dd 100644
--- a/src/stores/room-list/algorithms/Algorithm.ts
+++ b/src/stores/room-list/algorithms/Algorithm.ts
@@ -577,9 +577,8 @@ export class Algorithm extends EventEmitter {
await this.generateFreshTags(newTags);
- this.cachedRooms = newTags;
+ this.cachedRooms = newTags; // this recalculates the filtered rooms for us
this.updateTagsFromCache();
- this.recalculateFilteredRooms();
// Now that we've finished generation, we need to update the sticky room to what
// it was. It's entirely possible that it changed lists though, so if it did then
diff --git a/src/voice/Playback.ts b/src/voice/Playback.ts
index ca48680ebd..caa5241e1a 100644
--- a/src/voice/Playback.ts
+++ b/src/voice/Playback.ts
@@ -29,7 +29,7 @@ export enum PlaybackState {
Playing = "playing", // active progress through timeline
}
-export const PLAYBACK_WAVEFORM_SAMPLES = 35;
+export const PLAYBACK_WAVEFORM_SAMPLES = 39;
const DEFAULT_WAVEFORM = arraySeed(0, PLAYBACK_WAVEFORM_SAMPLES);
export class Playback extends EventEmitter implements IDestroyable {
diff --git a/src/voice/VoiceRecording.ts b/src/voice/VoiceRecording.ts
index eb705200ca..c4a0a78ce5 100644
--- a/src/voice/VoiceRecording.ts
+++ b/src/voice/VoiceRecording.ts
@@ -33,6 +33,8 @@ const BITRATE = 24000; // 24kbps is pretty high quality for our use case in opus
const TARGET_MAX_LENGTH = 120; // 2 minutes in seconds. Somewhat arbitrary, though longer == larger files.
const TARGET_WARN_TIME_LEFT = 10; // 10 seconds, also somewhat arbitrary.
+export const RECORDING_PLAYBACK_SAMPLES = 44;
+
export interface IRecordingUpdate {
waveform: number[]; // floating points between 0 (low) and 1 (high).
timeSeconds: number; // float
diff --git a/test/CallHandler-test.ts b/test/CallHandler-test.ts
index 754610b223..1e3f92e788 100644
--- a/test/CallHandler-test.ts
+++ b/test/CallHandler-test.ts
@@ -16,7 +16,7 @@ limitations under the License.
import './skinned-sdk';
-import CallHandler, { PlaceCallType } from '../src/CallHandler';
+import CallHandler, { PlaceCallType, CallHandlerEvent } from '../src/CallHandler';
import { stubClient, mkStubRoom } from './test-utils';
import { MatrixClientPeg } from '../src/MatrixClientPeg';
import dis from '../src/dispatcher/dispatcher';
@@ -172,11 +172,9 @@ describe('CallHandler', () => {
let callRoomChangeEventCount = 0;
const roomChangePromise = new Promise(resolve => {
- dispatchHandle = dis.register(payload => {
- if (payload.action === Action.CallChangeRoom) {
- ++callRoomChangeEventCount;
- resolve();
- }
+ callHandler.addListener(CallHandlerEvent.CallChangeRoom, () => {
+ ++callRoomChangeEventCount;
+ resolve();
});
});
@@ -201,7 +199,7 @@ describe('CallHandler', () => {
fakeCall.emit(CallEvent.AssertedIdentityChanged);
await roomChangePromise;
- dis.unregister(dispatchHandle);
+ callHandler.removeAllListeners();
// If everything's gone well, we should have seen only one room change
// event and the call should now be in user 3's room.