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

Refactor Calls components into smaller pieces for future Widgets work #6475

Merged
merged 25 commits into from
Aug 6, 2021
Merged

Refactor Calls components into smaller pieces for future Widgets work #6475

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
ae411b9
Refactor Call components into smaller pieces
Aug 3, 2021
36efa44
Fix TS types
Aug 3, 2021
29e9db4
Another fix to the TS types
Aug 3, 2021
90c2eb0
Update src/components/views/voip/CallView/CallViewHeader.tsx
Palid Aug 3, 2021
838d910
Update src/components/views/voip/CallView/CallViewHeader.tsx
Palid Aug 3, 2021
a0b0a91
Fix ident
Aug 3, 2021
f592d37
Remove widget support for CallViewHeader
Aug 3, 2021
466151a
Update src/components/views/voip/CallPreview.tsx
Palid Aug 3, 2021
389d0b2
Another fix for indentation
Aug 3, 2021
3ab54bc
Move CallViewHeader css to separate file
Aug 3, 2021
08b27a7
Update src/components/views/voip/PictureInPictureDragger.tsx
Palid Aug 3, 2021
8a1def1
Update src/components/views/voip/CallView/CallViewHeader.tsx
Palid Aug 3, 2021
b18d03b
Fix final style issues
Palid Aug 3, 2021
7487636
Fix linter again
Palid Aug 3, 2021
806b368
Fix i18n
Palid Aug 3, 2021
3b002c4
Merge remote-tracking branch 'origin/develop' into jitsi-picture-in-p…
Palid Aug 6, 2021
3538607
Post-merge changes
Palid Aug 6, 2021
e8762fb
Fix merge conflicts
Palid Aug 6, 2021
f6c4412
Remove old translations
Palid Aug 6, 2021
8ac8245
Update src/components/views/voip/PictureInPictureDragger.tsx
Palid Aug 6, 2021
4328083
Rename css
Palid Aug 6, 2021
cba87f4
Fix merge conflicts
Palid Aug 6, 2021
7513f5b
Fix types
Palid Aug 6, 2021
ebee78a
Fix dangling ';'
Palid Aug 6, 2021
b73c73f
Fix missing string
Palid Aug 6, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
182 changes: 13 additions & 169 deletions src/components/views/voip/CallPreview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/

import React, { createRef } from 'react';
import React from 'react';

import CallView from "./CallView";
import RoomViewStore from '../../../stores/RoomViewStore';
Expand All @@ -27,23 +27,8 @@ import SettingsStore from "../../../settings/SettingsStore";
import { CallEvent, CallState, MatrixCall } from 'matrix-js-sdk/src/webrtc/call';
import { MatrixClientPeg } from '../../../MatrixClientPeg';
import { replaceableComponent } from "../../../utils/replaceableComponent";
import UIStore from '../../../stores/UIStore';
import { lerp } from '../../../utils/AnimationUtils';
import { MarkedExecution } from '../../../utils/MarkedExecution';
import { EventSubscription } from 'fbemitter';

const PIP_VIEW_WIDTH = 336;
const PIP_VIEW_HEIGHT = 232;

const MOVING_AMT = 0.2;
const SNAPPING_AMT = 0.05;

const PADDING = {
top: 58,
bottom: 58,
left: 76,
right: 8,
};
import { PictureInPictureDragger } from './PictureInPictureDragger';

const SHOW_CALL_IN_STATES = [
CallState.Connected,
Expand All @@ -66,10 +51,6 @@ interface IState {
// Any other call we're displaying: only if the user is on two calls and not viewing either of the rooms
// they belong to
secondaryCall: MatrixCall;

// Position of the CallPreview
translationX: number;
translationY: number;
}

// Splits a list of calls into one 'primary' one and a list
Expand Down Expand Up @@ -112,16 +93,6 @@ export default class CallPreview extends React.Component<IProps, IState> {
private roomStoreToken: EventSubscription;
private dispatcherRef: string;
private settingsWatcherRef: string;
private callViewWrapper = createRef<HTMLDivElement>();
private initX = 0;
private initY = 0;
private desiredTranslationX = UIStore.instance.windowWidth - PADDING.right - PIP_VIEW_WIDTH;
private desiredTranslationY = UIStore.instance.windowHeight - PADDING.bottom - PIP_VIEW_WIDTH;
private moving = false;
private scheduledUpdate = new MarkedExecution(
() => this.animationCallback(),
() => requestAnimationFrame(() => this.scheduledUpdate.trigger()),
);

constructor(props: IProps) {
super(props);
Expand All @@ -136,122 +107,26 @@ export default class CallPreview extends React.Component<IProps, IState> {
roomId,
primaryCall: primaryCall,
secondaryCall: secondaryCalls[0],
translationX: UIStore.instance.windowWidth - PADDING.right - PIP_VIEW_WIDTH,
translationY: UIStore.instance.windowHeight - PADDING.bottom - PIP_VIEW_WIDTH,
};
}

public componentDidMount() {
CallHandler.sharedInstance().addListener(CallHandlerEvent.CallChangeRoom, this.updateCalls);
this.roomStoreToken = RoomViewStore.addListener(this.onRoomViewStoreUpdate);
document.addEventListener("mousemove", this.onMoving);
document.addEventListener("mouseup", this.onEndMoving);
window.addEventListener("resize", this.onResize);
this.dispatcherRef = dis.register(this.onAction);
MatrixClientPeg.get().on(CallEvent.RemoteHoldUnhold, this.onCallRemoteHold);
}

public componentWillUnmount() {
CallHandler.sharedInstance().removeListener(CallHandlerEvent.CallChangeRoom, this.updateCalls);
MatrixClientPeg.get().removeListener(CallEvent.RemoteHoldUnhold, this.onCallRemoteHold);
document.removeEventListener("mousemove", this.onMoving);
document.removeEventListener("mouseup", this.onEndMoving);
window.removeEventListener("resize", this.onResize);
if (this.roomStoreToken) {
this.roomStoreToken.remove();
}
dis.unregister(this.dispatcherRef);
SettingsStore.unwatchSetting(this.settingsWatcherRef);
}

private onResize = (): void => {
this.snap(false);
};

private animationCallback = () => {
// If the PiP isn't being dragged and there is only a tiny difference in
// the desiredTranslation and translation, quit the animationCallback
// loop. If that is the case, it means the PiP has snapped into its
// position and there is nothing to do. Not doing this would cause an
// infinite loop
if (
!this.moving &&
Math.abs(this.state.translationX - this.desiredTranslationX) <= 1 &&
Math.abs(this.state.translationY - this.desiredTranslationY) <= 1
) return;

const amt = this.moving ? MOVING_AMT : SNAPPING_AMT;
this.setState({
translationX: lerp(this.state.translationX, this.desiredTranslationX, amt),
translationY: lerp(this.state.translationY, this.desiredTranslationY, amt),
});
this.scheduledUpdate.mark();
};

private setTranslation(inTranslationX: number, inTranslationY: number) {
const width = this.callViewWrapper.current?.clientWidth || PIP_VIEW_WIDTH;
const height = this.callViewWrapper.current?.clientHeight || PIP_VIEW_HEIGHT;

// Avoid overflow on the x axis
if (inTranslationX + width >= UIStore.instance.windowWidth) {
this.desiredTranslationX = UIStore.instance.windowWidth - width;
} else if (inTranslationX <= 0) {
this.desiredTranslationX = 0;
} else {
this.desiredTranslationX = inTranslationX;
}

// Avoid overflow on the y axis
if (inTranslationY + height >= UIStore.instance.windowHeight) {
this.desiredTranslationY = UIStore.instance.windowHeight - height;
} else if (inTranslationY <= 0) {
this.desiredTranslationY = 0;
} else {
this.desiredTranslationY = inTranslationY;
}
}

private snap(animate?: boolean): void {
const translationX = this.desiredTranslationX;
const translationY = this.desiredTranslationY;
// We subtract the PiP size from the window size in order to calculate
// the position to snap to from the PiP center and not its top-left
// corner
const windowWidth = (
UIStore.instance.windowWidth -
(this.callViewWrapper.current?.clientWidth || PIP_VIEW_WIDTH)
);
const windowHeight = (
UIStore.instance.windowHeight -
(this.callViewWrapper.current?.clientHeight || PIP_VIEW_HEIGHT)
);

if (translationX >= windowWidth / 2 && translationY >= windowHeight / 2) {
this.desiredTranslationX = windowWidth - PADDING.right;
this.desiredTranslationY = windowHeight - PADDING.bottom;
} else if (translationX >= windowWidth / 2 && translationY <= windowHeight / 2) {
this.desiredTranslationX = windowWidth - PADDING.right;
this.desiredTranslationY = PADDING.top;
} else if (translationX <= windowWidth / 2 && translationY >= windowHeight / 2) {
this.desiredTranslationX = PADDING.left;
this.desiredTranslationY = windowHeight - PADDING.bottom;
} else {
this.desiredTranslationX = PADDING.left;
this.desiredTranslationY = PADDING.top;
}

if (animate) {
// We start animating here because we want the PiP to move when we're
// resizing the window
this.scheduledUpdate.mark();
} else {
this.setState({
translationX: this.desiredTranslationX,
translationY: this.desiredTranslationY,
});
}
}

private onRoomViewStoreUpdate = () => {
if (RoomViewStore.getRoomId() === this.state.roomId) return;

Expand All @@ -269,8 +144,8 @@ export default class CallPreview extends React.Component<IProps, IState> {

private onAction = (payload: ActionPayload) => {
switch (payload.action) {
// listen for call state changes to prod the render method, which
// may hide the global CallView if the call it is tracking is dead
// listen for call state changes to prod the render method, which
// may hide the global CallView if the call it is tracking is dead
case 'call_state': {
Palid marked this conversation as resolved.
Show resolved Hide resolved
this.updateCalls();
break;
Expand Down Expand Up @@ -300,53 +175,22 @@ export default class CallPreview extends React.Component<IProps, IState> {
});
};

private onStartMoving = (event: React.MouseEvent) => {
event.preventDefault();
event.stopPropagation();

this.moving = true;
this.initX = event.pageX - this.desiredTranslationX;
this.initY = event.pageY - this.desiredTranslationY;
this.scheduledUpdate.mark();
};

private onMoving = (event: React.MouseEvent | MouseEvent) => {
if (!this.moving) return;

event.preventDefault();
event.stopPropagation();

this.setTranslation(event.pageX - this.initX, event.pageY - this.initY);
};

private onEndMoving = () => {
this.moving = false;
this.snap(true);
};

public render() {
const pipMode = true;
if (this.state.primaryCall) {
const translatePixelsX = this.state.translationX + "px";
const translatePixelsY = this.state.translationY + "px";
const style = {
transform: `translateX(${translatePixelsX})
translateY(${translatePixelsY})`,
};

return (
<div
<PictureInPictureDragger
className="mx_CallPreview"
style={style}
ref={this.callViewWrapper}
draggable={pipMode}
>
<CallView
{ (onMouseDownOnHeader) => <CallView
onMouseDownOnHeader={onMouseDownOnHeader}
call={this.state.primaryCall}
secondaryCall={this.state.secondaryCall}
pipMode={true}
onMouseDownOnHeader={this.onStartMoving}
onResize={this.onResize}
/>
</div>
pipMode={pipMode}
/> }
</PictureInPictureDragger>

);
}

Expand Down
Loading