Allow call and broadcast PiP at the same time (#9829)

This commit is contained in:
Michael Weimann 2022-12-28 14:43:44 +01:00 committed by GitHub
parent d2763c329d
commit c257e137aa
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 79 additions and 33 deletions

View file

@ -47,7 +47,7 @@ interface IChildrenOptions {
interface IProps {
className?: string;
children: CreatePipChildren;
children: Array<CreatePipChildren>;
draggable: boolean;
onDoubleClick?: () => void;
onMove?: () => void;
@ -208,6 +208,13 @@ export default class PictureInPictureDragger extends React.Component<IProps> {
transform: `translateX(${this.translationX}px) translateY(${this.translationY}px)`,
};
const children = this.props.children.map((create: CreatePipChildren) => {
return create({
onStartMoving: this.onStartMoving,
onResize: this.onResize,
});
});
return (
<aside
className={this.props.className}
@ -215,10 +222,7 @@ export default class PictureInPictureDragger extends React.Component<IProps> {
ref={this.callViewWrapper}
onDoubleClick={this.props.onDoubleClick}
>
{this.props.children({
onStartMoving: this.onStartMoving,
onResize: this.onResize,
})}
{children}
</aside>
);
}

View file

@ -373,24 +373,20 @@ class PipView extends React.Component<IProps, IState> {
public render() {
const pipMode = true;
let pipContent: CreatePipChildren | null = null;
if (this.props.voiceBroadcastPlayback) {
pipContent = this.createVoiceBroadcastPlaybackPipContent(this.props.voiceBroadcastPlayback);
}
if (this.props.voiceBroadcastPreRecording) {
pipContent = this.createVoiceBroadcastPreRecordingPipContent(this.props.voiceBroadcastPreRecording);
}
let pipContent: Array<CreatePipChildren> = [];
if (this.props.voiceBroadcastRecording) {
pipContent = this.createVoiceBroadcastRecordingPipContent(this.props.voiceBroadcastRecording);
pipContent = [this.createVoiceBroadcastRecordingPipContent(this.props.voiceBroadcastRecording)];
} else if (this.props.voiceBroadcastPreRecording) {
pipContent = [this.createVoiceBroadcastPreRecordingPipContent(this.props.voiceBroadcastPreRecording)];
} else if (this.props.voiceBroadcastPlayback) {
pipContent = [this.createVoiceBroadcastPlaybackPipContent(this.props.voiceBroadcastPlayback)];
}
if (this.state.primaryCall) {
// get a ref to call inside the current scope
const call = this.state.primaryCall;
pipContent = ({ onStartMoving, onResize }) => (
pipContent.push(({ onStartMoving, onResize }) => (
<LegacyCallView
onMouseDownOnHeader={onStartMoving}
call={call}
@ -398,7 +394,7 @@ class PipView extends React.Component<IProps, IState> {
pipMode={pipMode}
onResize={onResize}
/>
);
));
}
if (this.state.showWidgetInPip) {
@ -412,7 +408,7 @@ class PipView extends React.Component<IProps, IState> {
const viewingCallRoom = this.state.viewedRoomId === roomId;
const isCall = CallStore.instance.getActiveCall(roomId) !== null;
pipContent = ({ onStartMoving }) => (
pipContent.push(({ onStartMoving }) => (
<div className={pipViewClasses}>
<LegacyCallViewHeader
onPipMouseDown={(event) => {
@ -432,10 +428,10 @@ class PipView extends React.Component<IProps, IState> {
movePersistedElement={this.movePersistedElement}
/>
</div>
);
));
}
if (!!pipContent) {
if (pipContent.length) {
return (
<PictureInPictureDragger
className="mx_LegacyCallPreview"