Make PiP motion smoother and react to window resizes correctly (#8747)

* Make PiP motion smoother and react to window resizes correctly

* Remove debugging logs

* Apply code review suggestions
This commit is contained in:
Robin 2022-06-02 14:11:28 -04:00 committed by GitHub
parent 68bc8112b3
commit a85799b87c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 70 additions and 64 deletions

View file

@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import React from 'react';
import React, { createRef } from 'react';
import { CallEvent, CallState, MatrixCall } from 'matrix-js-sdk/src/webrtc/call';
import { EventSubscription } from 'fbemitter';
import { logger } from "matrix-js-sdk/src/logger";
@ -118,6 +118,7 @@ function getPrimarySecondaryCallsForPip(roomId: string): [MatrixCall, MatrixCall
export default class PipView extends React.Component<IProps, IState> {
private roomStoreToken: EventSubscription;
private settingsWatcherRef: string;
private movePersistedElement = createRef<() => void>();
constructor(props: IProps) {
super(props);
@ -176,6 +177,8 @@ export default class PipView extends React.Component<IProps, IState> {
this.setState({ moving: false });
}
private onMove = () => this.movePersistedElement.current?.();
private onRoomViewStoreUpdate = () => {
const newRoomId = RoomViewStore.instance.getRoomId();
const oldRoomId = this.state.viewedRoomId;
@ -338,6 +341,7 @@ export default class PipView extends React.Component<IProps, IState> {
persistentWidgetId={this.state.persistentWidgetId}
persistentRoomId={roomId}
pointerEvents={this.state.moving ? 'none' : undefined}
movePersistedElement={this.movePersistedElement}
/>
</div>;
}
@ -347,6 +351,7 @@ export default class PipView extends React.Component<IProps, IState> {
className="mx_CallPreview"
draggable={pipMode}
onDoubleClick={this.onDoubleClick}
onMove={this.onMove}
>
{ pipContent }
</PictureInPictureDragger>;