Maximised widgets always force a call to be shown in PIP mode

src/CallHandler.tsx

@@ -380,6 +380,16 @@ export default class CallHandler extends EventEmitter {
  return callsNotInThatRoom;
  }
 
+ public getAllActiveCallsForPip(roomId: string) {
+ const room = MatrixClientPeg.get().getRoom(roomId);
+ if (WidgetLayoutStore.instance.hasMaximisedWidget(room)) {
+ // This checks if there is space for the call view in the aux panel
+ // If there is no space any call should be displayed in PiP
+ return this.getAllActiveCalls();
+ }
+ return this.getAllActiveCallsNotInRoom(roomId);
+ }
+
  getTransfereeForCallId(callId: string): MatrixCall {
  return this.transferees[callId];
  }

src/components/views/voip/CallPreview.tsx

@@ -31,6 +31,7 @@ import { EventSubscription } from 'fbemitter';
 import PictureInPictureDragger from './PictureInPictureDragger';
 
 import { logger } from "matrix-js-sdk/src/logger";
+import { WidgetLayoutStore } from '../../../stores/widgets/WidgetLayoutStore';
 
 const SHOW_CALL_IN_STATES = [
  CallState.Connected,
@@ -59,7 +60,9 @@ interface IState {
 // (which should be a single element) of other calls.
 // The primary will be the one not on hold, or an arbitrary one
 // if they're all on hold)
-function getPrimarySecondaryCalls(calls: MatrixCall[]): [MatrixCall, MatrixCall[]] {
+function getPrimarySecondaryCallsForPip(roomId: string): [MatrixCall, MatrixCall[]] {
+ const calls = CallHandler.sharedInstance().getAllActiveCallsForPip(roomId);
+
  let primary: MatrixCall = null;
  let secondaries: MatrixCall[] = [];
 
@@ -101,9 +104,7 @@ export default class CallPreview extends React.Component<IProps, IState> {
 
  const roomId = RoomViewStore.getRoomId();
 
- const [primaryCall, secondaryCalls] = getPrimarySecondaryCalls(
- CallHandler.sharedInstance().getAllActiveCallsNotInRoom(roomId),
- );
+ const [primaryCall, secondaryCalls] = getPrimarySecondaryCallsForPip(roomId);
 
  this.state = {
  roomId,
@@ -117,6 +118,10 @@ export default class CallPreview extends React.Component<IProps, IState> {
  this.roomStoreToken = RoomViewStore.addListener(this.onRoomViewStoreUpdate);
  this.dispatcherRef = dis.register(this.onAction);
  MatrixClientPeg.get().on(CallEvent.RemoteHoldUnhold, this.onCallRemoteHold);
+ const room = MatrixClientPeg.get()?.getRoom(this.state.roomId);
+ if (room) {
+ WidgetLayoutStore.instance.on(WidgetLayoutStore.emissionForRoom(room), this.updateCalls);
+ }
  }
 
  public componentWillUnmount() {
@@ -127,18 +132,29 @@ export default class CallPreview extends React.Component<IProps, IState> {
  }
  dis.unregister(this.dispatcherRef);
  SettingsStore.unwatchSetting(this.settingsWatcherRef);
+ const room = MatrixClientPeg.get().getRoom(this.state.roomId);
+ WidgetLayoutStore.instance.off(WidgetLayoutStore.emissionForRoom(room), this.updateCalls);
  }
 
  private onRoomViewStoreUpdate = () => {
- if (RoomViewStore.getRoomId() === this.state.roomId) return;
-
- const roomId = RoomViewStore.getRoomId();
- const [primaryCall, secondaryCalls] = getPrimarySecondaryCalls(
- CallHandler.sharedInstance().getAllActiveCallsNotInRoom(roomId),
- );
+ const newRoomId = RoomViewStore.getRoomId();
+ const oldRoomId = this.state.roomId;
+ if (newRoomId === oldRoomId) return;
+ // The WidgetLayoutStore observer always tracks the currently viewed Room,
+ // so we don't end up with multiple observers and know what observer to remove on unmount
+ const oldRoom = MatrixClientPeg.get()?.getRoom(oldRoomId);
+ if (oldRoom) {
+ WidgetLayoutStore.instance.off(WidgetLayoutStore.emissionForRoom(oldRoom), this.updateCalls);
+ }
+ const newRoom = MatrixClientPeg.get()?.getRoom(newRoomId);
+ if (newRoom) {
+ WidgetLayoutStore.instance.on(WidgetLayoutStore.emissionForRoom(newRoom), this.updateCalls);
+ }
+ if (!newRoomId) return;
 
+ const [primaryCall, secondaryCalls] = getPrimarySecondaryCallsForPip(newRoomId);
  this.setState({
- roomId,
+ roomId: newRoomId,
  primaryCall: primaryCall,
  secondaryCall: secondaryCalls[0],
  });
@@ -157,9 +173,8 @@ export default class CallPreview extends React.Component<IProps, IState> {
  };
 
  private updateCalls = () => {
- const [primaryCall, secondaryCalls] = getPrimarySecondaryCalls(
- CallHandler.sharedInstance().getAllActiveCallsNotInRoom(this.state.roomId),
- );
+ if (!this.state.roomId) return;
+ const [primaryCall, secondaryCalls] = getPrimarySecondaryCallsForPip(this.state.roomId);
 
  this.setState({
  primaryCall: primaryCall,
@@ -168,9 +183,8 @@ export default class CallPreview extends React.Component<IProps, IState> {
  };
 
  private onCallRemoteHold = () => {
- const [primaryCall, secondaryCalls] = getPrimarySecondaryCalls(
- CallHandler.sharedInstance().getAllActiveCallsNotInRoom(this.state.roomId),
- );
+ if (!this.state.roomId) return;
+ const [primaryCall, secondaryCalls] = getPrimarySecondaryCallsForPip(this.state.roomId);
 
  this.setState({
  primaryCall: primaryCall,