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

Implement snapping

Browse source 
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
This commit is contained in:
Šimon Brandner 2021-06-18 19:43:19 +02:00
parent 946317ddf8
commit 61929e3fc2
No known key found for this signature in database
GPG key ID: 9760693FDD98A790
1 changed files with 50 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

60
src/components/views/voip/CallPreview.tsx
View file

@ -32,8 +32,12 @@ import UIStore from '../../../stores/UIStore';
const PIP_VIEW_WIDTH = 336; const PIP_VIEW_WIDTH = 336;
const PIP_VIEW_HEIGHT = 232; const PIP_VIEW_HEIGHT = 232;
const DEFAULT_X_OFFSET = 16; const PADDING = {
const DEFAULT_Y_OFFSET = 48; top: 58,
bottom: 58,
left: 76,
right: 8,
}
const SHOW_CALL_IN_STATES = [ const SHOW_CALL_IN_STATES = [
CallState.Connected, CallState.Connected,
@ -44,6 +48,7 @@ const SHOW_CALL_IN_STATES = [
CallState.WaitLocalMedia, CallState.WaitLocalMedia,
]; ];
interface IProps { interface IProps {
} }
@ -116,8 +121,8 @@ export default class CallPreview extends React.Component<IProps, IState> {
roomId, roomId,
primaryCall: primaryCall, primaryCall: primaryCall,
secondaryCall: secondaryCalls[0], secondaryCall: secondaryCalls[0],
translationX: UIStore.instance.windowWidth - DEFAULT_X_OFFSET - PIP_VIEW_WIDTH, translationX: UIStore.instance.windowWidth - PADDING.right - PIP_VIEW_WIDTH,
translationY: DEFAULT_Y_OFFSET, translationY: UIStore.instance.windowHeight - PADDING.bottom - PIP_VIEW_WIDTH,
}; };
} }
@ -132,7 +137,7 @@ export default class CallPreview extends React.Component<IProps, IState> {
this.roomStoreToken = RoomViewStore.addListener(this.onRoomViewStoreUpdate); this.roomStoreToken = RoomViewStore.addListener(this.onRoomViewStoreUpdate);
document.addEventListener("mousemove", this.onMoving); document.addEventListener("mousemove", this.onMoving);
document.addEventListener("mouseup", this.onEndMoving); document.addEventListener("mouseup", this.onEndMoving);
window.addEventListener("resize", this.onWindowSizeChanged); window.addEventListener("resize", this.snap);
this.dispatcherRef = dis.register(this.onAction); this.dispatcherRef = dis.register(this.onAction);
MatrixClientPeg.get().on(CallEvent.RemoteHoldUnhold, this.onCallRemoteHold); MatrixClientPeg.get().on(CallEvent.RemoteHoldUnhold, this.onCallRemoteHold);
} }
@ -142,7 +147,7 @@ export default class CallPreview extends React.Component<IProps, IState> {
MatrixClientPeg.get().removeListener(CallEvent.RemoteHoldUnhold, this.onCallRemoteHold); MatrixClientPeg.get().removeListener(CallEvent.RemoteHoldUnhold, this.onCallRemoteHold);
document.removeEventListener("mousemove", this.onMoving); document.removeEventListener("mousemove", this.onMoving);
document.removeEventListener("mouseup", this.onEndMoving); document.removeEventListener("mouseup", this.onEndMoving);
window.removeEventListener("resize", this.onWindowSizeChanged); window.removeEventListener("resize", this.snap);
if (this.roomStoreToken) { if (this.roomStoreToken) {
this.roomStoreToken.remove(); this.roomStoreToken.remove();
} }
@ -150,10 +155,6 @@ export default class CallPreview extends React.Component<IProps, IState> {
SettingsStore.unwatchSetting(this.settingsWatcherRef); SettingsStore.unwatchSetting(this.settingsWatcherRef);
} }
private onWindowSizeChanged = () => {
this.setTranslation(this.state.translationX, this.state.translationY);
};
private setTranslation(inTranslationX: number, inTranslationY: number) { private setTranslation(inTranslationX: number, inTranslationY: number) {
const width = this.callViewWrapper.current?.clientWidth || PIP_VIEW_WIDTH; const width = this.callViewWrapper.current?.clientWidth || PIP_VIEW_WIDTH;
const height = this.callViewWrapper.current?.clientHeight || PIP_VIEW_HEIGHT; const height = this.callViewWrapper.current?.clientHeight || PIP_VIEW_HEIGHT;
@ -185,6 +186,44 @@ export default class CallPreview extends React.Component<IProps, IState> {
}); });
} }
private snap = () => {
const translationX = this.state.translationX;
const translationY = this.state.translationY;
// 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.setState({
translationX: windowWidth - PADDING.right,
translationY: windowHeight - PADDING.bottom,
});
} else if (translationX >= windowWidth / 2 && translationY <= windowHeight / 2) {
this.setState({
translationX: windowWidth - PADDING.right,
translationY: PADDING.top,
});
} else if (translationX <= windowWidth / 2 && translationY >= windowHeight / 2) {
this.setState({
translationX: PADDING.left,
translationY: windowHeight - PADDING.bottom,
});
} else {
this.setState({
translationX: PADDING.left,
translationY: PADDING.top,
});
}
}
private onRoomViewStoreUpdate = (payload) => { private onRoomViewStoreUpdate = (payload) => {
if (RoomViewStore.getRoomId() === this.state.roomId) return; if (RoomViewStore.getRoomId() === this.state.roomId) return;
@ -253,6 +292,7 @@ export default class CallPreview extends React.Component<IProps, IState> {
}; };
private onEndMoving = () => { private onEndMoving = () => {
this.snap();
this.moving = false; this.moving = false;
}; };