imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Redesign the picture-in-picture window (#9800)

Browse source 
* Remove unnecessary PipContainer component

* Redesign the picture-in-picture window

* Add a hover effect to the controls

* Clarify that WidgetPip has call-specific behavior
This commit is contained in:
Robin 2023-01-03 23:44:38 -05:00 • committed by GitHub
parent 6b155620e4
commit cb1af0d3de
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
28 changed files with 491 additions and 328 deletions
Download patch file Download diff file Expand all files Collapse all files

33
src/components/views/elements/PersistedElement.tsx
View file

@ -16,7 +16,6 @@ limitations under the License.
import React, { MutableRefObject } from "react";
import ReactDOM from "react-dom";
import { throttle } from "lodash";
import { isNullOrUndefined } from "matrix-js-sdk/src/utils";
import dis from "../../../dispatcher/dispatcher";
@ -58,7 +57,7 @@ interface IProps {
style?: React.StyleHTMLAttributes<HTMLDivElement>;
// Handle to manually notify this PersistedElement that it needs to move
moveRef?: MutableRefObject<() => void>;
moveRef?: MutableRefObject<(() => void) | undefined>;
}
/**
@ -177,24 +176,20 @@ export default class PersistedElement extends React.Component<IProps> {
child.style.display = visible ? "block" : "none";
}
private updateChildPosition = throttle(
(child: HTMLDivElement, parent: HTMLDivElement): void => {
if (!child || !parent) return;
private updateChildPosition(child: HTMLDivElement, parent: HTMLDivElement): void {
if (!child || !parent) return;
const parentRect = parent.getBoundingClientRect();
Object.assign(child.style, {
zIndex: isNullOrUndefined(this.props.zIndex) ? 9 : this.props.zIndex,
position: "absolute",
top: "0",
left: "0",
transform: `translateX(${parentRect.left}px) translateY(${parentRect.top}px)`,
width: parentRect.width + "px",
height: parentRect.height + "px",
});
},
16,
{ trailing: true, leading: true },
);
const parentRect = parent.getBoundingClientRect();
Object.assign(child.style, {
zIndex: isNullOrUndefined(this.props.zIndex) ? 9 : this.props.zIndex,
position: "absolute",
top: "0",
left: "0",
transform: `translateX(${parentRect.left}px) translateY(${parentRect.top}px)`,
width: parentRect.width + "px",
height: parentRect.height + "px",
});
}
public render(): JSX.Element {
return <div ref={this.collectChildContainer} />;