LogalDeveloper/owncast
0
Fork 0
Code Activity

fix(web): set document title via dom instead of javascript. Closes #2918

Browse Source
This commit is contained in:
Gabe Kangas
2023-04-15 14:22:14 -07:00
parent a090906bc8
commit 228d787bf9
1 changed files with 8 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
web/components/TitleNotifier/TitleNotifier.tsx
View File

@@ -7,6 +7,7 @@
*/ */
import { FC, useEffect, useState } from 'react'; import { FC, useEffect, useState } from 'react';
import { useRecoilValue } from 'recoil'; import { useRecoilValue } from 'recoil';
import Head from 'next/head';
import { serverStatusState, chatMessagesAtom } from '../stores/ClientConfigStore'; import { serverStatusState, chatMessagesAtom } from '../stores/ClientConfigStore';
export type TitleNotifierProps = { export type TitleNotifierProps = {
@@ -18,13 +19,10 @@ export const TitleNotifier: FC<TitleNotifierProps> = ({ name }) => {
const serverStatus = useRecoilValue(serverStatusState); const serverStatus = useRecoilValue(serverStatusState);
const [backgrounded, setBackgrounded] = useState(false); const [backgrounded, setBackgrounded] = useState(false);
const [title, setTitle] = useState(name);
const { online } = serverStatus; const { online } = serverStatus;
const setTitle = (title: string) => {
document.title = title;
};
const onBlur = () => { const onBlur = () => {
setBackgrounded(true); setBackgrounded(true);
}; };
@@ -47,6 +45,7 @@ export const TitleNotifier: FC<TitleNotifierProps> = ({ name }) => {
useEffect(() => { useEffect(() => {
listenForEvents(); listenForEvents();
setTitle(name);
return () => { return () => {
removeEvents(); removeEvents();
@@ -71,7 +70,6 @@ export const TitleNotifier: FC<TitleNotifierProps> = ({ name }) => {
if (!backgrounded) { if (!backgrounded) {
return; return;
} }
if (online) { if (online) {
setTitle(` 🟢 :: ${name}`); setTitle(` 🟢 :: ${name}`);
} else if (!online) { } else if (!online) {
@@ -79,5 +77,9 @@ export const TitleNotifier: FC<TitleNotifierProps> = ({ name }) => {
} }
}, [online, name]); }, [online, name]);
return null; return (
<Head>
<title>{title}</title>
</Head>
);
}; };