From a0b0a91d08ce9c14ce3e7fdf22a084847f3b48da Mon Sep 17 00:00:00 2001 From: Dariusz Niemczyk Date: Tue, 3 Aug 2021 14:03:35 +0200 Subject: [PATCH] Fix ident --- src/components/views/voip/CallPreview.tsx | 4 +- src/components/views/voip/CallView.tsx | 26 +- .../views/voip/CallView/CallViewHeader.tsx | 42 +-- .../views/voip/PictureInPictureDragger.tsx | 276 +++++++++--------- 4 files changed, 174 insertions(+), 174 deletions(-) diff --git a/src/components/views/voip/CallPreview.tsx b/src/components/views/voip/CallPreview.tsx index 565e4657b9..0607215e0c 100644 --- a/src/components/views/voip/CallPreview.tsx +++ b/src/components/views/voip/CallPreview.tsx @@ -144,8 +144,8 @@ export default class CallPreview extends React.Component { 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': { this.updateCalls(); break; diff --git a/src/components/views/voip/CallView.tsx b/src/components/views/voip/CallView.tsx index 084efa66d1..c7297afb95 100644 --- a/src/components/views/voip/CallView.tsx +++ b/src/components/views/voip/CallView.tsx @@ -40,23 +40,23 @@ import CallViewSidebar from './CallViewSidebar'; import { CallViewHeader } from './CallView/CallViewHeader'; interface IProps { - // The call for us to display - call: MatrixCall; + // The call for us to display + call: MatrixCall; - // Another ongoing call to display information about - secondaryCall?: MatrixCall; + // Another ongoing call to display information about + secondaryCall?: MatrixCall; - // a callback which is called when the content in the CallView changes - // in a way that is likely to cause a resize. - onResize?: any; + // a callback which is called when the content in the CallView changes + // in a way that is likely to cause a resize. + onResize?: any; - // Whether this call view is for picture-in-picture mode - // otherwise, it's the larger call view when viewing the room the call is in. - // This is sort of a proxy for a number of things but we currently have no - // need to control those things separately, so this is simpler. - pipMode?: boolean; + // Whether this call view is for picture-in-picture mode + // otherwise, it's the larger call view when viewing the room the call is in. + // This is sort of a proxy for a number of things but we currently have no + // need to control those things separately, so this is simpler. + pipMode?: boolean; - // Used for dragging the PiP CallView + // Used for dragging the PiP CallView onMouseDownOnHeader?: (event: React.MouseEvent) => void; } diff --git a/src/components/views/voip/CallView/CallViewHeader.tsx b/src/components/views/voip/CallView/CallViewHeader.tsx index e5ee6bff96..4650e65853 100644 --- a/src/components/views/voip/CallView/CallViewHeader.tsx +++ b/src/components/views/voip/CallView/CallViewHeader.tsx @@ -26,37 +26,37 @@ import { IApp } from '../../../../stores/WidgetStore'; import WidgetUtils from '../../../../utils/WidgetUtils'; const callTypeTranslationByType: Record string> = { - [CallType.Video]: () => _t("Video Call"), - [CallType.Voice]: () => _t("Voice Call"), - 'widget': (app: IApp) => WidgetUtils.getWidgetName(app), + [CallType.Video]: () => _t("Video Call"), + [CallType.Voice]: () => _t("Voice Call"), + 'widget': (app: IApp) => WidgetUtils.getWidgetName(app), }; interface CallViewHeaderProps { - pipMode: boolean; - type: CallType | 'widget'; - callRooms?: Room[]; - app?: IApp; - onPipMouseDown: (event: React.MouseEvent) => void; + pipMode: boolean; + type: CallType | 'widget'; + callRooms?: Room[]; + app?: IApp; + onPipMouseDown: (event: React.MouseEvent) => void; } const onRoomAvatarClick = (roomId: string) => { dis.dispatch({ - action: 'view_room', - room_id: roomId, + action: 'view_room', + room_id: roomId, }); }; const onFullscreenClick = () => { dis.dispatch({ - action: 'video_fullscreen', - fullscreen: true, + action: 'video_fullscreen', + fullscreen: true, }); }; const onExpandClick = (roomId: string) => { dis.dispatch({ - action: 'view_room', - room_id: roomId, + action: 'view_room', + room_id: roomId, }); }; @@ -97,12 +97,12 @@ function getAvatarBasedOnRoomType(roomOrWidget: Room | IApp) { } export const CallViewHeader: React.FC = ({ - type, - pipMode = false, - callRooms = [], - app, - onPipMouseDown, -}) { + type, + pipMode = false, + callRooms = [], + app, + onPipMouseDown, +}) => { const [callRoom, onHoldCallRoom] = callRooms; const callTypeText = callTypeTranslationByType[type](app); const avatar = getAvatarBasedOnRoomType(callRoom ?? app); @@ -132,4 +132,4 @@ export const CallViewHeader: React.FC = ({ ); -} +}; diff --git a/src/components/views/voip/PictureInPictureDragger.tsx b/src/components/views/voip/PictureInPictureDragger.tsx index 9445ee68b6..1ef7867992 100644 --- a/src/components/views/voip/PictureInPictureDragger.tsx +++ b/src/components/views/voip/PictureInPictureDragger.tsx @@ -27,23 +27,23 @@ const MOVING_AMT = 0.2; const SNAPPING_AMT = 0.05; const PADDING = { - top: 58, - bottom: 58, - left: 76, - right: 8, + top: 58, + bottom: 58, + left: 76, + right: 8, }; interface IProps { - className?: string; + className?: string; children: (startMovingEventHandler: (event: React.MouseEvent) => void) => React.ReactNode; - draggable: boolean; - app?: IApp; + draggable: boolean; + app?: IApp; } interface IState { - // Position of the PictureInPictureDragger - translationX: number; - translationY: number; + // Position of the PictureInPictureDragger + translationX: number; + translationY: number; } /** @@ -52,157 +52,157 @@ interface IState { */ @replaceableComponent("views.voip.PictureInPictureDragger") export class PictureInPictureDragger extends React.Component { - private callViewWrapper = createRef(); - 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()), - ); + private callViewWrapper = createRef(); + 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); + constructor(props: IProps) { + super(props); - this.state = { - translationX: UIStore.instance.windowWidth - PADDING.right - PIP_VIEW_WIDTH, - translationY: UIStore.instance.windowHeight - PADDING.bottom - PIP_VIEW_WIDTH, - }; - } + this.state = { + translationX: UIStore.instance.windowWidth - PADDING.right - PIP_VIEW_WIDTH, + translationY: UIStore.instance.windowHeight - PADDING.bottom - PIP_VIEW_WIDTH, + }; + } - public componentDidMount() { - document.addEventListener("mousemove", this.onMoving); - document.addEventListener("mouseup", this.onEndMoving); - window.addEventListener("resize", this.snap); - } + public componentDidMount() { + document.addEventListener("mousemove", this.onMoving); + document.addEventListener("mouseup", this.onEndMoving); + window.addEventListener("resize", this.snap); + } - public componentWillUnmount() { - document.removeEventListener("mousemove", this.onMoving); - document.removeEventListener("mouseup", this.onEndMoving); - window.removeEventListener("resize", this.snap); - } + public componentWillUnmount() { + document.removeEventListener("mousemove", this.onMoving); + document.removeEventListener("mouseup", this.onEndMoving); + window.removeEventListener("resize", this.snap); + } - 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 && + 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; + ) 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(); - }; + 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; + 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 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; - } - } + // 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 = () => { - 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 - + private snap = () => { + 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 - + ); + 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 (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; + } - // We start animating here because we want the PiP to move when we're - // resizing the window - this.scheduledUpdate.mark(); - }; + // We start animating here because we want the PiP to move when we're + // resizing the window + this.scheduledUpdate.mark(); + }; - private onStartMoving = (event: React.MouseEvent | MouseEvent) => { - event.preventDefault(); - event.stopPropagation(); + private onStartMoving = (event: React.MouseEvent | MouseEvent) => { + event.preventDefault(); + event.stopPropagation(); - this.moving = true; - this.initX = event.pageX - this.desiredTranslationX; - this.initY = event.pageY - this.desiredTranslationY; - this.scheduledUpdate.mark(); - }; + 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; + private onMoving = (event: React.MouseEvent | MouseEvent) => { + if (!this.moving) return; - event.preventDefault(); - event.stopPropagation(); + event.preventDefault(); + event.stopPropagation(); - this.setTranslation(event.pageX - this.initX, event.pageY - this.initY); - }; + this.setTranslation(event.pageX - this.initX, event.pageY - this.initY); + }; - private onEndMoving = () => { - this.moving = false; - this.snap(); - }; + private onEndMoving = () => { + this.moving = false; + this.snap(); + }; - public render() { - const translatePixelsX = this.state.translationX + "px"; - const translatePixelsY = this.state.translationY + "px"; - const style = { - transform: `translateX(${translatePixelsX}) + public render() { + const translatePixelsX = this.state.translationX + "px"; + const translatePixelsY = this.state.translationY + "px"; + const style = { + transform: `translateX(${translatePixelsX}) translateY(${translatePixelsY})`, - }; - return ( -
- <> - { this.props.children(this.onStartMoving) } - -
- ); - } + }; + return ( +
+ <> + { this.props.children(this.onStartMoving) } + +
+ ); + } }