110 lines
3.0 KiB
JavaScript
110 lines
3.0 KiB
JavaScript
import React from 'react';
|
|
import { withTracker } from 'meteor/react-meteor-data';
|
|
import { defineMessages, injectIntl } from 'react-intl';
|
|
import humanizeSeconds from '/imports/utils/humanizeSeconds';
|
|
import _ from 'lodash';
|
|
import BreakoutRemainingTimeComponent from './component';
|
|
|
|
const intlMessages = defineMessages({
|
|
failedMessage: {
|
|
id: 'app.failedMessage',
|
|
description: 'Notification for connecting to server problems',
|
|
},
|
|
connectingMessage: {
|
|
id: 'app.connectingMessage',
|
|
description: 'Notification message for when client is connecting to server',
|
|
},
|
|
waitingMessage: {
|
|
id: 'app.waitingMessage',
|
|
description: 'Notification message for disconnection with reconnection counter',
|
|
},
|
|
breakoutTimeRemaining: {
|
|
id: 'app.breakoutTimeRemainingMessage',
|
|
description: 'Message that tells how much time is remaining for the breakout room',
|
|
},
|
|
breakoutWillClose: {
|
|
id: 'app.breakoutWillCloseMessage',
|
|
description: 'Message that tells time has ended and breakout will close',
|
|
},
|
|
calculatingBreakoutTimeRemaining: {
|
|
id: 'app.calculatingBreakoutTimeRemaining',
|
|
description: 'Message that tells that the remaining time is being calculated',
|
|
},
|
|
});
|
|
|
|
class breakoutRemainingTimeContainer extends React.Component {
|
|
componentWillUnmount() {
|
|
clearInterval(timeRemainingInterval);
|
|
timeRemainingInterval = null;
|
|
timeRemaining = null;
|
|
}
|
|
|
|
render() {
|
|
if (_.isEmpty(this.props.message)) {
|
|
return null;
|
|
}
|
|
return (
|
|
<BreakoutRemainingTimeComponent>
|
|
{this.props.message}
|
|
</BreakoutRemainingTimeComponent>
|
|
);
|
|
}
|
|
}
|
|
|
|
|
|
let timeRemaining = 0;
|
|
const timeRemainingDep = new Tracker.Dependency();
|
|
let timeRemainingInterval = null;
|
|
|
|
const getTimeRemaining = () => {
|
|
timeRemainingDep.depend();
|
|
return timeRemaining;
|
|
};
|
|
|
|
const setTimeRemaining = (sec = 0) => {
|
|
if (sec !== timeRemaining) {
|
|
timeRemaining = sec;
|
|
timeRemainingDep.changed();
|
|
}
|
|
};
|
|
|
|
const startCounter = (sec, set, get, interval) => {
|
|
clearInterval(interval);
|
|
set(sec);
|
|
return setInterval(() => {
|
|
set(get() - 1);
|
|
}, 1000);
|
|
};
|
|
|
|
|
|
export default injectIntl(withTracker(({ breakoutRoom, intl, messageDuration }) => {
|
|
const data = {};
|
|
if (breakoutRoom) {
|
|
const roomRemainingTime = breakoutRoom.timeRemaining;
|
|
|
|
if (!timeRemainingInterval && roomRemainingTime) {
|
|
timeRemainingInterval = startCounter(
|
|
roomRemainingTime,
|
|
setTimeRemaining,
|
|
getTimeRemaining,
|
|
timeRemainingInterval,
|
|
);
|
|
}
|
|
} else if (timeRemainingInterval) {
|
|
clearInterval(timeRemainingInterval);
|
|
}
|
|
|
|
if (timeRemaining) {
|
|
if (timeRemaining > 0) {
|
|
const time = getTimeRemaining();
|
|
data.message = intl.formatMessage(messageDuration, { 0: humanizeSeconds(time) });
|
|
} else {
|
|
clearInterval(timeRemainingInterval);
|
|
data.message = intl.formatMessage(intlMessages.breakoutWillClose);
|
|
}
|
|
} else if (breakoutRoom) {
|
|
data.message = intl.formatMessage(intlMessages.calculatingBreakoutTimeRemaining);
|
|
}
|
|
return data;
|
|
})(breakoutRemainingTimeContainer));
|