71 lines
1.7 KiB
TypeScript
71 lines
1.7 KiB
TypeScript
/**
|
|
* This component is responsible for updating the title of the page when
|
|
* different state changes occur.
|
|
* If the stream live state changes, or chat messages come in while the
|
|
* page is backgrounded, this component will update the title to reflect it. *
|
|
* @component
|
|
*/
|
|
import { FC, useEffect } from 'react';
|
|
import { useRecoilValue } from 'recoil';
|
|
import { serverStatusState, chatMessagesAtom } from '../stores/ClientConfigStore';
|
|
|
|
export const TitleNotifier: FC = () => {
|
|
const chatMessages = useRecoilValue(chatMessagesAtom);
|
|
const serverStatus = useRecoilValue(serverStatusState);
|
|
|
|
let backgrounded = false;
|
|
let defaultTitle = '';
|
|
|
|
const onBlur = () => {
|
|
backgrounded = true;
|
|
defaultTitle = window.document.title;
|
|
};
|
|
|
|
const onFocus = () => {
|
|
backgrounded = false;
|
|
window.document.title = defaultTitle;
|
|
};
|
|
|
|
const listenForEvents = () => {
|
|
// Listen for events that should update the title
|
|
window.addEventListener('blur', onBlur);
|
|
window.addEventListener('focus', onFocus);
|
|
};
|
|
|
|
useEffect(() => {
|
|
defaultTitle = window.document.title;
|
|
listenForEvents();
|
|
|
|
return () => {
|
|
window.removeEventListener('focus', onFocus);
|
|
window.removeEventListener('blur', onBlur);
|
|
};
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
const { online } = serverStatus;
|
|
|
|
if (!backgrounded || !online) {
|
|
return;
|
|
}
|
|
|
|
window.document.title = `💬 :: ${defaultTitle}`;
|
|
}, [chatMessages]);
|
|
|
|
useEffect(() => {
|
|
if (!backgrounded) {
|
|
return;
|
|
}
|
|
|
|
const { online } = serverStatus;
|
|
|
|
if (online) {
|
|
window.document.title = ` 🟢 :: ${defaultTitle}`;
|
|
} else if (!online) {
|
|
window.document.title = ` 🔴 :: ${defaultTitle}`;
|
|
}
|
|
}, [serverStatusState]);
|
|
|
|
return null;
|
|
};
|