Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Commit

Permalink
Snap in PiP widget when content changed (#9797)
Browse files Browse the repository at this point in the history
  • Loading branch information
weeman1337 authored Dec 21, 2022
1 parent 7db2ee7 commit 1614674
Show file tree
Hide file tree
Showing 3 changed files with 112 additions and 0 deletions.
4 changes: 4 additions & 0 deletions src/components/views/voip/PictureInPictureDragger.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -85,6 +85,10 @@ export default class PictureInPictureDragger extends React.Component<IProps> {
UIStore.instance.off(UI_EVENTS.Resize, this.onResize);
}

public componentDidUpdate(prevProps: Readonly<IProps>): void {
if (prevProps.children !== this.props.children) this.snap(true);
}

private animationCallback = () => {
if (
!this.moving &&
Expand Down
69 changes: 69 additions & 0 deletions test/components/views/voip/PictureInPictureDragger-test.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
/*
Copyright 2022 The Matrix.org Foundation C.I.C.
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 { render, RenderResult } from "@testing-library/react";

import PictureInPictureDragger, {
CreatePipChildren,
} from "../../../../src/components/views/voip/PictureInPictureDragger";

describe("PictureInPictureDragger", () => {
let renderResult: RenderResult;

const mkContent1: CreatePipChildren = () => {
return <div>content 1</div>;
};

const mkContent2: CreatePipChildren = () => {
return (
<div>
content 2<br />
content 2.2
</div>
);
};

describe("when rendering the dragger with PiP content 1", () => {
beforeEach(() => {
renderResult = render(<PictureInPictureDragger draggable={true}>{mkContent1}</PictureInPictureDragger>);
});

it("should render the PiP content", () => {
expect(renderResult.container).toMatchSnapshot("pip-content-1");
});

describe("and rerendering PiP content 1", () => {
beforeEach(() => {
renderResult.rerender(<PictureInPictureDragger draggable={true}>{mkContent1}</PictureInPictureDragger>);
});

it("should not change the PiP content", () => {
expect(renderResult.container).toMatchSnapshot("pip-content-1");
});
});

describe("and rendering PiP content 2", () => {
beforeEach(() => {
renderResult.rerender(<PictureInPictureDragger draggable={true}>{mkContent2}</PictureInPictureDragger>);
});

it("should update the PiP content", () => {
expect(renderResult.container).toMatchSnapshot();
});
});
});
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`PictureInPictureDragger when rendering the dragger with PiP content 1 and rendering PiP content 2 should update the PiP content 1`] = `
<div>
<aside
style="transform: translateX(680px) translateY(478px);"
>
<div>
content 2
<br />
content 2.2
</div>
</aside>
</div>
`;

exports[`PictureInPictureDragger when rendering the dragger with PiP content 1 and rerendering PiP content 1 should not change the PiP content: pip-content-1 1`] = `
<div>
<aside
style="transform: translateX(680px) translateY(478px);"
>
<div>
content 1
</div>
</aside>
</div>
`;

exports[`PictureInPictureDragger when rendering the dragger with PiP content 1 should render the PiP content: pip-content-1 1`] = `
<div>
<aside
style="transform: translateX(680px) translateY(478px);"
>
<div>
content 1
</div>
</aside>
</div>
`;

0 comments on commit 1614674

Please sign in to comment.