2022-10-19 05:21:03 +03:00
|
|
|
/**
|
|
|
|
|
* 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
|
|
|
|
|
*/
|
2022-12-26 03:03:54 +03:00
|
|
|
import { FC, useEffect, useState } from 'react';
|
2022-10-19 05:21:03 +03:00
|
|
|
import { useRecoilValue } from 'recoil';
|
2023-04-16 00:22:14 +03:00
|
|
|
import Head from 'next/head';
|
2022-10-19 05:21:03 +03:00
|
|
|
import { serverStatusState, chatMessagesAtom } from '../stores/ClientConfigStore';
|
|
|
|
|
|
2022-12-26 03:03:54 +03:00
|
|
|
export type TitleNotifierProps = {
|
|
|
|
|
name: string;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
export const TitleNotifier: FC<TitleNotifierProps> = ({ name }) => {
|
2022-10-19 05:21:03 +03:00
|
|
|
const chatMessages = useRecoilValue(chatMessagesAtom);
|
|
|
|
|
const serverStatus = useRecoilValue(serverStatusState);
|
|
|
|
|
|
2022-12-26 03:03:54 +03:00
|
|
|
const [backgrounded, setBackgrounded] = useState(false);
|
2023-04-16 00:22:14 +03:00
|
|
|
const [title, setTitle] = useState(name);
|
2022-12-26 03:03:54 +03:00
|
|
|
|
2024-04-20 00:01:50 +03:00
|
|
|
const { online, streamTitle } = serverStatus;
|
2022-10-19 05:21:03 +03:00
|
|
|
|
|
|
|
|
const onBlur = () => {
|
2022-12-26 03:03:54 +03:00
|
|
|
setBackgrounded(true);
|
2022-10-19 05:21:03 +03:00
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const onFocus = () => {
|
2022-12-26 03:03:54 +03:00
|
|
|
setBackgrounded(false);
|
|
|
|
|
setTitle(name);
|
2022-10-19 05:21:03 +03:00
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const listenForEvents = () => {
|
|
|
|
|
// Listen for events that should update the title
|
|
|
|
|
window.addEventListener('blur', onBlur);
|
|
|
|
|
window.addEventListener('focus', onFocus);
|
|
|
|
|
};
|
|
|
|
|
|
2022-12-26 03:03:54 +03:00
|
|
|
const removeEvents = () => {
|
|
|
|
|
window.removeEventListener('blur', onBlur);
|
|
|
|
|
window.removeEventListener('focus', onFocus);
|
|
|
|
|
};
|
2022-12-25 08:21:39 +03:00
|
|
|
|
2022-12-26 03:03:54 +03:00
|
|
|
useEffect(() => {
|
2022-10-19 05:21:03 +03:00
|
|
|
listenForEvents();
|
2023-04-16 00:22:14 +03:00
|
|
|
setTitle(name);
|
2022-10-19 05:21:03 +03:00
|
|
|
|
|
|
|
|
return () => {
|
2022-12-26 03:03:54 +03:00
|
|
|
removeEvents();
|
2022-10-19 05:21:03 +03:00
|
|
|
};
|
2022-12-26 03:03:54 +03:00
|
|
|
}, [name]);
|
2022-10-19 05:21:03 +03:00
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
if (!backgrounded || !online) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
2022-12-26 03:03:54 +03:00
|
|
|
|
|
|
|
|
// Only alert on real chat messages from people.
|
2023-06-24 05:12:34 +03:00
|
|
|
const lastMessage = chatMessages.at(-1);
|
|
|
|
|
if (!lastMessage || lastMessage.type !== 'CHAT') {
|
2022-12-26 03:03:54 +03:00
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
setTitle(`💬 :: ${name}`);
|
|
|
|
|
}, [chatMessages, name]);
|
2022-10-19 05:21:03 +03:00
|
|
|
|
2024-04-20 00:01:50 +03:00
|
|
|
useEffect(() => {
|
|
|
|
|
if (navigator.mediaSession === undefined) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
navigator.mediaSession.metadata = new MediaMetadata({
|
|
|
|
|
title: streamTitle,
|
|
|
|
|
artist: name,
|
|
|
|
|
artwork: [{ src: '/logo' }],
|
|
|
|
|
});
|
|
|
|
|
}, [name, streamTitle]);
|
|
|
|
|
|
2022-10-19 05:21:03 +03:00
|
|
|
useEffect(() => {
|
|
|
|
|
if (!backgrounded) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
if (online) {
|
2022-12-26 03:03:54 +03:00
|
|
|
setTitle(` 🟢 :: ${name}`);
|
2022-10-19 05:21:03 +03:00
|
|
|
} else if (!online) {
|
2022-12-26 03:03:54 +03:00
|
|
|
setTitle(` 🔴 :: ${name}`);
|
2022-10-19 05:21:03 +03:00
|
|
|
}
|
2022-12-26 03:03:54 +03:00
|
|
|
}, [online, name]);
|
2022-10-19 05:21:03 +03:00
|
|
|
|
2023-04-16 00:22:14 +03:00
|
|
|
return (
|
|
|
|
|
<Head>
|
|
|
|
|
<title>{title}</title>
|
|
|
|
|
</Head>
|
|
|
|
|
);
|
2022-10-19 05:21:03 +03:00
|
|
|
};
|
