507 lines
15 KiB
JavaScript
507 lines
15 KiB
JavaScript
import React, { Component, Fragment } from 'react';
|
|
// import { withLayoutConsumer } from './context';
|
|
import Storage from '/imports/ui/services/storage/session';
|
|
import { Session } from 'meteor/session';
|
|
|
|
const windowWidth = () => window.innerWidth;
|
|
const windowHeight = () => window.innerHeight;
|
|
const min = (value1, value2) => (value1 <= value2 ? value1 : value2);
|
|
const max = (value1, value2) => (value1 >= value2 ? value1 : value2);
|
|
|
|
// values based on sass file
|
|
const USERLIST_MIN_WIDTH = 150;
|
|
const USERLIST_MAX_WIDTH = 240;
|
|
const CHAT_MIN_WIDTH = 150;
|
|
const CHAT_MAX_WIDTH = 335;
|
|
const NAVBAR_HEIGHT = 85;
|
|
const ACTIONSBAR_HEIGHT = 42;
|
|
|
|
const WEBCAMSAREA_MIN_PERCENT = 0.2;
|
|
const WEBCAMSAREA_MAX_PERCENT = 0.8;
|
|
const PRESENTATIONAREA_MIN_PERCENT = 0.2;
|
|
const PRESENTATIONAREA_MAX_PERCENT = 0.8;
|
|
|
|
// TODO function calPercentScreenOfUserSets
|
|
// Salvar porcentagem de uso do media setado pelo usuário
|
|
// Auto arange default true
|
|
// Não pegar só proporção e sim calcular área disponível
|
|
// Primeiro calculo pega orientação e medidas originais da apresentação
|
|
// Segundo calculo olha para os valores e verifica se tem overflow e recalcula
|
|
|
|
const storageLayoutData = () => Storage.getItem('layoutData');
|
|
|
|
class LayoutManager extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
|
|
this.setLayoutSizes = this.setLayoutSizes.bind(this);
|
|
this.calculatesLayout = this.calculatesLayout.bind(this);
|
|
}
|
|
|
|
componentDidMount() {
|
|
this.setLayoutSizes();
|
|
window.addEventListener('resize', _.throttle(() => this.setLayoutSizes(), 200));
|
|
|
|
window.addEventListener('userListResizeChanged', () => {
|
|
const userlistChanged = true;
|
|
const chatChanged = false;
|
|
this.setLayoutSizes(userlistChanged, chatChanged);
|
|
});
|
|
window.addEventListener('chatResizeChanged', () => {
|
|
const userlistChanged = false;
|
|
const chatChanged = true;
|
|
this.setLayoutSizes(userlistChanged, chatChanged);
|
|
});
|
|
}
|
|
|
|
componentDidUpdate(prevProps) {
|
|
const { usersVideo, layoutContextState } = this.props;
|
|
const { usersVideo: prevUsersVideo, layoutContextState: prevLayoutContextState } = prevProps;
|
|
const {
|
|
webcamsPlacement,
|
|
webcamsAreaSize,
|
|
presentationSlideSize,
|
|
} = layoutContextState;
|
|
const {
|
|
webcamsPlacement: prevWebcamsPlacement,
|
|
webcamsAreaSize: prevWebcamsAreaSize,
|
|
presentationSlideSize: prevPresentationSlideSize,
|
|
} = prevLayoutContextState;
|
|
|
|
if (usersVideo.length !== prevUsersVideo.length
|
|
|| webcamsPlacement !== prevWebcamsPlacement
|
|
|| presentationSlideSize !== prevPresentationSlideSize) {
|
|
this.setLayoutSizes();
|
|
}
|
|
|
|
if (webcamsAreaSize.width !== prevWebcamsAreaSize.width
|
|
|| webcamsAreaSize.height !== prevWebcamsAreaSize.height) {
|
|
this.setLayoutSizes(true, true, webcamsAreaSize);
|
|
}
|
|
}
|
|
|
|
setLayoutSizes(userlistChanged = false, chatChanged = false, webcamsAreaSize = null) {
|
|
const { layoutContextDispatch } = this.props;
|
|
|
|
const layoutSizes = this
|
|
.calculatesLayout(userlistChanged, chatChanged, webcamsAreaSize);
|
|
|
|
layoutContextDispatch(
|
|
{
|
|
type: 'setWindowSize',
|
|
value: {
|
|
width: windowWidth(),
|
|
height: windowHeight(),
|
|
},
|
|
},
|
|
);
|
|
layoutContextDispatch(
|
|
{
|
|
type: 'setMediaBounds',
|
|
value: {
|
|
width: layoutSizes.mediaBounds.width,
|
|
height: layoutSizes.mediaBounds.height,
|
|
top: layoutSizes.mediaBounds.top,
|
|
left: layoutSizes.mediaBounds.left,
|
|
},
|
|
},
|
|
);
|
|
layoutContextDispatch(
|
|
{
|
|
type: 'setUserListSize',
|
|
value: {
|
|
width: layoutSizes.userListSize.width,
|
|
},
|
|
},
|
|
);
|
|
layoutContextDispatch(
|
|
{
|
|
type: 'setChatSize',
|
|
value: {
|
|
width: layoutSizes.chatSize.width,
|
|
},
|
|
},
|
|
);
|
|
layoutContextDispatch(
|
|
{
|
|
type: 'setWebcamsAreaSize',
|
|
value: {
|
|
width: layoutSizes.webcamsAreaSize.width,
|
|
height: layoutSizes.webcamsAreaSize.height,
|
|
},
|
|
},
|
|
);
|
|
layoutContextDispatch(
|
|
{
|
|
type: 'setPresentationAreaSize',
|
|
value: {
|
|
width: layoutSizes.presentationAreaSize.width,
|
|
height: layoutSizes.presentationAreaSize.height,
|
|
},
|
|
},
|
|
);
|
|
|
|
const newLayoutData = {
|
|
windowSize: {
|
|
width: windowWidth(),
|
|
height: windowHeight(),
|
|
},
|
|
mediaBounds: {
|
|
width: layoutSizes.mediaBounds.width,
|
|
height: layoutSizes.mediaBounds.height,
|
|
top: layoutSizes.mediaBounds.top,
|
|
left: layoutSizes.mediaBounds.left,
|
|
},
|
|
userListSize: {
|
|
width: layoutSizes.userListSize.width,
|
|
},
|
|
chatSize: {
|
|
width: layoutSizes.chatSize.width,
|
|
},
|
|
webcamsAreaSize: {
|
|
width: layoutSizes.webcamsAreaSize.width,
|
|
height: layoutSizes.webcamsAreaSize.height,
|
|
},
|
|
presentationAreaSize: {
|
|
width: layoutSizes.presentationAreaSize.width,
|
|
height: layoutSizes.presentationAreaSize.height,
|
|
},
|
|
};
|
|
|
|
Storage.setItem('layoutData', newLayoutData);
|
|
}
|
|
|
|
calculatesPanelsSize(userlistChanged, chatChanged) {
|
|
const { layoutContextState } = this.props;
|
|
const {
|
|
userListSize: userListSizeContext,
|
|
chatSize: chatSizeContext,
|
|
} = layoutContextState;
|
|
const openPanel = Session.get('openPanel');
|
|
const storageLData = storageLayoutData();
|
|
|
|
let storageUserListWidth;
|
|
let storageChatWidth;
|
|
if (storageLData) {
|
|
storageUserListWidth = storageLData.userListSize.width;
|
|
storageChatWidth = storageLData.chatSize.width;
|
|
}
|
|
|
|
let newUserListSize;
|
|
let newChatSize;
|
|
if (userlistChanged || chatChanged) {
|
|
newUserListSize = userListSizeContext;
|
|
newChatSize = chatSizeContext;
|
|
} else {
|
|
if (!storageUserListWidth) {
|
|
newUserListSize = {
|
|
width: min(max((windowWidth() * 0.1), USERLIST_MIN_WIDTH), USERLIST_MAX_WIDTH),
|
|
};
|
|
} else {
|
|
newUserListSize = {
|
|
width: storageUserListWidth,
|
|
};
|
|
}
|
|
if (!storageChatWidth) {
|
|
newChatSize = {
|
|
width: min(max((windowWidth() * 0.2), CHAT_MIN_WIDTH), CHAT_MAX_WIDTH),
|
|
};
|
|
} else {
|
|
newChatSize = {
|
|
width: storageChatWidth,
|
|
};
|
|
}
|
|
}
|
|
|
|
if (openPanel === 'userlist') {
|
|
newChatSize = {
|
|
width: 0,
|
|
};
|
|
}
|
|
|
|
if (!openPanel) {
|
|
newUserListSize = {
|
|
width: 0,
|
|
};
|
|
newChatSize = {
|
|
width: 0,
|
|
};
|
|
}
|
|
|
|
return {
|
|
newUserListSize,
|
|
newChatSize,
|
|
};
|
|
}
|
|
|
|
calculatesWebcamsAreaSize(
|
|
mediaAreaWidth, mediaAreaHeight, presentationWidth = null, presentationHeight = null,
|
|
) {
|
|
const {
|
|
layoutContextState,
|
|
usersVideo,
|
|
} = this.props;
|
|
const { webcamsPlacement } = layoutContextState;
|
|
|
|
const webcamsAreaUserSetsHeight = Storage.getItem('webcamsAreaUserSetsHeight');
|
|
const webcamsAreaUserSetsWidth = Storage.getItem('webcamsAreaUserSetsWidth');
|
|
let newWebcamAreaHeight;
|
|
let newWebcamAreaWidth;
|
|
|
|
if (usersVideo.length < 1) {
|
|
return {
|
|
newWebcamAreaWidth: 0,
|
|
newWebcamAreaHeight: 0,
|
|
};
|
|
}
|
|
|
|
console.log('>> webcamsAreaUserSetsWidth', webcamsAreaUserSetsWidth);
|
|
|
|
|
|
if (presentationWidth === null || presentationHeight === null) {
|
|
if (webcamsPlacement === 'left' || webcamsPlacement === 'right') {
|
|
newWebcamAreaWidth = min(
|
|
max(
|
|
webcamsAreaUserSetsWidth || mediaAreaWidth * WEBCAMSAREA_MIN_PERCENT,
|
|
mediaAreaWidth * WEBCAMSAREA_MIN_PERCENT,
|
|
),
|
|
mediaAreaWidth * WEBCAMSAREA_MAX_PERCENT,
|
|
);
|
|
newWebcamAreaHeight = mediaAreaHeight;
|
|
} else {
|
|
newWebcamAreaWidth = mediaAreaWidth;
|
|
newWebcamAreaHeight = min(
|
|
max(
|
|
webcamsAreaUserSetsHeight || mediaAreaHeight * WEBCAMSAREA_MIN_PERCENT,
|
|
mediaAreaHeight * WEBCAMSAREA_MIN_PERCENT,
|
|
),
|
|
mediaAreaHeight * WEBCAMSAREA_MAX_PERCENT,
|
|
);
|
|
}
|
|
} else if (webcamsPlacement === 'left' || webcamsPlacement === 'right') {
|
|
newWebcamAreaWidth = min(
|
|
max(
|
|
mediaAreaWidth - presentationWidth,
|
|
mediaAreaWidth * WEBCAMSAREA_MIN_PERCENT,
|
|
),
|
|
mediaAreaWidth * WEBCAMSAREA_MAX_PERCENT,
|
|
);
|
|
newWebcamAreaHeight = mediaAreaHeight;
|
|
} else {
|
|
newWebcamAreaWidth = mediaAreaWidth;
|
|
newWebcamAreaHeight = min(
|
|
max(
|
|
mediaAreaHeight - presentationHeight,
|
|
mediaAreaHeight * WEBCAMSAREA_MIN_PERCENT,
|
|
),
|
|
mediaAreaHeight * WEBCAMSAREA_MAX_PERCENT,
|
|
);
|
|
}
|
|
|
|
return {
|
|
newWebcamAreaWidth,
|
|
newWebcamAreaHeight,
|
|
};
|
|
}
|
|
|
|
calculatesPresentationMaxSize(
|
|
mediaAreaWidth, mediaAreaHeight, presentationSlideWidth, presentationSlideHeight,
|
|
) {
|
|
const { usersVideo, layoutContextState } = this.props;
|
|
const { webcamsPlacement } = layoutContextState;
|
|
|
|
let presentationWidthAvailable;
|
|
let presentationHeightAvailable;
|
|
|
|
if (usersVideo.length > 0) {
|
|
if (webcamsPlacement === 'top' || webcamsPlacement === 'bottom') {
|
|
presentationWidthAvailable = mediaAreaWidth;
|
|
presentationHeightAvailable = mediaAreaHeight * PRESENTATIONAREA_MAX_PERCENT;
|
|
} else {
|
|
presentationWidthAvailable = mediaAreaWidth * PRESENTATIONAREA_MAX_PERCENT;
|
|
presentationHeightAvailable = mediaAreaHeight;
|
|
}
|
|
} else {
|
|
presentationWidthAvailable = mediaAreaWidth;
|
|
presentationHeightAvailable = mediaAreaHeight;
|
|
}
|
|
|
|
let presentationWidth;
|
|
let presentationHeight;
|
|
if (presentationSlideWidth > presentationSlideHeight
|
|
|| presentationSlideWidth === presentationSlideHeight) {
|
|
presentationWidth = presentationWidthAvailable;
|
|
presentationHeight = (presentationWidthAvailable * presentationSlideHeight)
|
|
/ presentationSlideWidth;
|
|
// if overflow
|
|
if (presentationHeight > presentationHeightAvailable) {
|
|
presentationWidth = (presentationHeightAvailable * presentationWidth) / presentationHeight;
|
|
presentationHeight = presentationHeightAvailable;
|
|
}
|
|
}
|
|
if (presentationSlideHeight > presentationSlideWidth) {
|
|
presentationWidth = (presentationHeightAvailable * presentationSlideWidth)
|
|
/ presentationSlideHeight;
|
|
presentationHeight = presentationHeightAvailable;
|
|
// if overflow
|
|
if (presentationWidth > presentationWidthAvailable) {
|
|
presentationHeight = (presentationWidthAvailable * presentationWidth) / presentationHeight;
|
|
presentationWidth = presentationWidthAvailable;
|
|
}
|
|
}
|
|
return {
|
|
presentationWidth,
|
|
presentationHeight,
|
|
};
|
|
}
|
|
|
|
calculatesPresentationAreaSize(
|
|
mediaAreaWidth, mediaAreaHeight, webcamAreaWidth = null, webcamAreaHeight = null,
|
|
) {
|
|
const {
|
|
layoutContextState,
|
|
usersVideo,
|
|
} = this.props;
|
|
const { webcamsPlacement, presentationSlideSize } = layoutContextState;
|
|
|
|
let newPresentationAreaWidth;
|
|
let newPresentationAreaHeight;
|
|
if (usersVideo.length < 1) {
|
|
return {
|
|
newPresentationAreaWidth: mediaAreaWidth,
|
|
newPresentationAreaHeight: mediaAreaHeight - 20, // 20 is margins
|
|
};
|
|
}
|
|
|
|
const {
|
|
width: presentationSlideWidth,
|
|
height: presentationSlideHeight,
|
|
} = presentationSlideSize;
|
|
const presentationMaxSize = this.calculatesPresentationMaxSize(
|
|
mediaAreaWidth, mediaAreaHeight, presentationSlideWidth, presentationSlideHeight,
|
|
);
|
|
const { presentationWidth, presentationHeight } = presentationMaxSize;
|
|
|
|
console.log('mediaAreaHeight', mediaAreaHeight);
|
|
|
|
|
|
console.log('>> webcamAreaWidth', webcamAreaWidth);
|
|
|
|
|
|
if (webcamAreaWidth === null || webcamAreaHeight === null) {
|
|
newPresentationAreaWidth = presentationWidth; // 30 is margins
|
|
newPresentationAreaHeight = presentationHeight; // 20 is margins
|
|
} else if (webcamsPlacement === 'left' || webcamsPlacement === 'right') {
|
|
newPresentationAreaWidth = mediaAreaWidth - webcamAreaWidth - 30; // 30 is margins
|
|
newPresentationAreaHeight = mediaAreaHeight - 20; // 20 is margins
|
|
} else {
|
|
newPresentationAreaWidth = mediaAreaWidth;
|
|
newPresentationAreaHeight = mediaAreaHeight - webcamAreaHeight - 30; // 30 is margins
|
|
}
|
|
console.log('>> newPresentationAreaWidth', newPresentationAreaWidth);
|
|
|
|
if (newPresentationAreaWidth < (mediaAreaWidth * PRESENTATIONAREA_MIN_PERCENT)) {
|
|
if (newPresentationAreaWidth < 400) {
|
|
newPresentationAreaWidth = 400;
|
|
} else {
|
|
newPresentationAreaWidth = mediaAreaWidth * PRESENTATIONAREA_MIN_PERCENT;
|
|
}
|
|
}
|
|
|
|
|
|
console.log('>> newPresentationAreaWidth', newPresentationAreaWidth);
|
|
|
|
|
|
return {
|
|
newPresentationAreaWidth,
|
|
newPresentationAreaHeight: newPresentationAreaHeight
|
|
< (mediaAreaHeight * PRESENTATIONAREA_MIN_PERCENT)
|
|
? mediaAreaHeight * PRESENTATIONAREA_MIN_PERCENT
|
|
: newPresentationAreaHeight,
|
|
};
|
|
}
|
|
|
|
calculatesLayout(userlistChanged = false, chatChanged = false) {
|
|
const {
|
|
layoutContextState,
|
|
} = this.props;
|
|
const { presentationIsFullscreen } = layoutContextState;
|
|
|
|
const autoArrangeLayout = Storage.getItem('autoArrangeLayout');
|
|
|
|
const panelsSize = this.calculatesPanelsSize(userlistChanged, chatChanged);
|
|
const { newUserListSize, newChatSize } = panelsSize;
|
|
|
|
const mediaAreaHeight = windowHeight() - (NAVBAR_HEIGHT + ACTIONSBAR_HEIGHT);
|
|
const mediaAreaWidth = windowWidth() - (newUserListSize.width + newChatSize.width);
|
|
const newMediaBounds = {
|
|
width: mediaAreaWidth,
|
|
height: mediaAreaHeight,
|
|
top: NAVBAR_HEIGHT,
|
|
left: newUserListSize.width + newChatSize.width,
|
|
};
|
|
|
|
let webcamsSize;
|
|
let presentationSize;
|
|
if (autoArrangeLayout) {
|
|
presentationSize = this.calculatesPresentationAreaSize(mediaAreaWidth, mediaAreaHeight);
|
|
webcamsSize = this.calculatesWebcamsAreaSize(
|
|
mediaAreaWidth,
|
|
mediaAreaHeight,
|
|
presentationSize.newPresentationAreaWidth,
|
|
presentationSize.newPresentationAreaHeight,
|
|
);
|
|
} else {
|
|
webcamsSize = this.calculatesWebcamsAreaSize(mediaAreaWidth, mediaAreaHeight);
|
|
presentationSize = this.calculatesPresentationAreaSize(
|
|
mediaAreaWidth,
|
|
mediaAreaHeight,
|
|
webcamsSize.newWebcamAreaWidth,
|
|
webcamsSize.newWebcamAreaHeight,
|
|
);
|
|
}
|
|
|
|
const newWebcamsAreaSize = {
|
|
width: webcamsSize.newWebcamAreaWidth,
|
|
height: webcamsSize.newWebcamAreaHeight,
|
|
};
|
|
|
|
let newPresentationAreaSize;
|
|
if (!presentationIsFullscreen) {
|
|
newPresentationAreaSize = {
|
|
width: presentationSize.newPresentationAreaWidth,
|
|
height: presentationSize.newPresentationAreaHeight,
|
|
};
|
|
} else {
|
|
newPresentationAreaSize = {
|
|
width: windowWidth(),
|
|
height: windowHeight(),
|
|
};
|
|
}
|
|
|
|
return {
|
|
mediaBounds: newMediaBounds,
|
|
userListSize: newUserListSize,
|
|
chatSize: newChatSize,
|
|
webcamsAreaSize: newWebcamsAreaSize,
|
|
presentationAreaSize: newPresentationAreaSize,
|
|
};
|
|
}
|
|
|
|
render() {
|
|
return <Fragment />;
|
|
}
|
|
}
|
|
|
|
export default LayoutManager;
|
|
export {
|
|
USERLIST_MIN_WIDTH,
|
|
USERLIST_MAX_WIDTH,
|
|
CHAT_MIN_WIDTH,
|
|
CHAT_MAX_WIDTH,
|
|
NAVBAR_HEIGHT,
|
|
ACTIONSBAR_HEIGHT,
|
|
WEBCAMSAREA_MIN_PERCENT,
|
|
WEBCAMSAREA_MAX_PERCENT,
|
|
};
|