2021-09-15 21:38:24 +00:00
|
|
|
import { PureComponent, createRef } from 'react';
|
|
|
|
|
|
|
|
import EventBus from 'modules/helpers/eventbus';
|
|
|
|
|
|
|
|
import './message.scss';
|
|
|
|
|
|
|
|
export default class Message extends PureComponent {
|
|
|
|
constructor(props) {
|
|
|
|
super(props);
|
|
|
|
this.state = {
|
2022-04-08 13:48:36 +00:00
|
|
|
messageText: '',
|
2021-09-15 21:38:24 +00:00
|
|
|
};
|
|
|
|
this.message = createRef();
|
|
|
|
}
|
|
|
|
|
|
|
|
componentDidMount() {
|
|
|
|
EventBus.on('refresh', (data) => {
|
|
|
|
if (data === 'message') {
|
|
|
|
if (localStorage.getItem('message') === 'false') {
|
2022-04-08 13:48:36 +00:00
|
|
|
return (this.message.current.style.display = 'none');
|
2021-09-15 21:38:24 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
this.message.current.style.display = 'block';
|
2022-04-08 13:48:36 +00:00
|
|
|
this.message.current.style.fontSize = `${
|
2022-09-21 13:06:51 +00:00
|
|
|
1 * Number((localStorage.getItem('zoomMessage') || 100) / 100)
|
2022-04-08 13:48:36 +00:00
|
|
|
}em`;
|
2021-09-15 21:38:24 +00:00
|
|
|
}
|
|
|
|
});
|
2022-08-31 12:31:49 +00:00
|
|
|
|
2022-08-19 20:41:59 +00:00
|
|
|
const messages = JSON.parse(localStorage.getItem('messages')) || [];
|
2022-10-30 16:43:08 +00:00
|
|
|
if (messages.length === 0) {
|
|
|
|
return (this.message.current.style.display = 'none');
|
|
|
|
}
|
2021-09-15 21:38:24 +00:00
|
|
|
|
2022-04-08 13:48:36 +00:00
|
|
|
this.message.current.style.fontSize = `${
|
2022-09-21 13:06:51 +00:00
|
|
|
1 * Number((localStorage.getItem('zoomMessage') || 100) / 100)
|
2022-04-08 13:48:36 +00:00
|
|
|
}em`;
|
2022-11-06 11:59:59 +00:00
|
|
|
|
2021-09-17 12:39:55 +00:00
|
|
|
this.setState({
|
2022-04-08 13:48:36 +00:00
|
|
|
messageText: messages[Math.floor(Math.random() * messages.length)],
|
2021-09-17 12:39:55 +00:00
|
|
|
});
|
2021-09-15 21:38:24 +00:00
|
|
|
}
|
|
|
|
|
2022-10-30 16:43:08 +00:00
|
|
|
componentWillUnmount() {
|
|
|
|
EventBus.off('refresh');
|
|
|
|
}
|
|
|
|
|
2021-09-15 21:38:24 +00:00
|
|
|
render() {
|
|
|
|
return (
|
2022-04-08 13:48:36 +00:00
|
|
|
<h2 className="message" ref={this.message}>
|
2022-04-07 09:25:01 +00:00
|
|
|
{this.state.messageText.split('\\n').map((item, i) => (
|
|
|
|
<span key={i}>
|
|
|
|
{item}
|
|
|
|
<br />
|
|
|
|
</span>
|
|
|
|
))}
|
2022-08-21 11:41:05 +00:00
|
|
|
</h2>
|
2021-09-15 21:38:24 +00:00
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|