UI: New browser title management (#963)

* UI: Remove redundant useGlobalState hook
* UI: New title managing component

rcongui/src/App.js

@@ -14,6 +14,7 @@ import {StrictMode} from "react";
 import AppTheme from "@/themes/AppTheme";
 import { CssBaseline } from '@mui/material';
 import { useAppStore } from './stores/app-state';
+import TitleManager from './features/title-manager/TitleManager';
 
 const App = () => {
   // Dayjs plugins
@@ -41,6 +42,7 @@ const App = () => {
           <RouterProvider router={adminRouter} />
           <ReactQueryDevtools initialIsOpen={false} />
         </AppTheme>
+        <TitleManager />
       </QueryClientProvider>
     </StrictMode>
   );

rcongui/src/components/Header/server-status.jsx

@@ -36,12 +36,6 @@ const ServerStatus = ({ compact }) => {
   }`;
   const score = `${status?.score?.allied ?? 0}:${status?.score?.axis ?? 0}`;
 
-  useEffect(() => {
-    document.title = `${
-      status?.name?.short_name ?? "<Server Name>"
-    } | ${timeRemaining} | ${mapName} (${numCurrentPlayers})`;
-  }, [status]);
-
   if (isLoading) {
     return (
       <Wrapper>

rcongui/src/components/cards/FlaggedPlayersCard.jsx

@@ -1,4 +1,4 @@
-import { useGlobalStore } from "@/hooks/useGlobalState";
+import { useGlobalStore } from "@/stores/global-state";
 import { useMemo } from "react";
 import OnlineUsersCard from "@/components/shared/card/UsersCard";
 import { Stack, Typography } from "@mui/material";

rcongui/src/components/cards/ModeratorsCard.jsx

@@ -1,4 +1,4 @@
-import { useGlobalStore } from "@/hooks/useGlobalState";
+import { useGlobalStore } from "@/stores/global-state";
 import { useMemo } from "react";
 import OnlineUsersCard from "@/components/shared/card/UsersCard";
 

rcongui/src/components/cards/VIPWatchedCard.jsx

@@ -1,4 +1,4 @@
-import { useGlobalStore } from "@/hooks/useGlobalState";
+import { useGlobalStore } from "@/stores/global-state";
 import { useMemo } from "react";
 import OnlineUsersCard from "@/components/shared/card/UsersCard";
 

rcongui/src/components/layout/SelectContent.js

@@ -6,7 +6,7 @@ import ListSubheader from "@mui/material/ListSubheader";
 import Select, { selectClasses } from "@mui/material/Select";
 import { styled } from "@mui/material/styles";
 import DevicesRoundedIcon from "@mui/icons-material/DevicesRounded";
-import { useGlobalStore } from "@/hooks/useGlobalState";
+import { useGlobalStore } from "@/stores/global-state";
 import { useNavigate } from 'react-router-dom';
 
 const Avatar = styled(MuiAvatar)(({ theme }) => ({

rcongui/src/components/layout/sidebar/ConnectionStatus.jsx

@@ -1,4 +1,4 @@
-import { useGlobalStore } from "@/hooks/useGlobalState";
+import { useGlobalStore } from "@/stores/global-state";
 import { Typography, Box } from "@mui/material";
 import { styled } from "@mui/material/styles";
 

rcongui/src/features/title-manager/TitleManager.jsx

@@ -0,0 +1,98 @@
+import { useEffect, useRef, useState } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { gameQueryOptions } from "@/queries/game-query";
+import dayjs from "dayjs";
+
+const icons = {
+  idle: "⚫",
+  empty: "🟡",
+  loading: "🟠",
+  error: "🔴",
+  normal: "🟢",
+  ending: "🏁",
+};
+
+const numberOfBlinks = 3;
+const blinkInterval = 500;
+
+const TitleManager = () => {
+  const {
+    data: status,
+    isLoading,
+    isError,
+  } = useQuery({
+    ...gameQueryOptions.publicState(),
+    refetchIntervalInBackground: true,
+  });
+
+  const [pendingTitleIcon, setPendingTitleIcon] = useState("");
+  const [titleIcon, setTitleIcon] = useState(icons.loading);
+  const [titleText, setTitleText] = useState("Loading...");
+  const titleTimeoutRef = useRef(null);
+
+  useEffect(() => {
+    let text = "";
+    let icon = icons.normal;
+
+    if (isLoading) {
+      text = "Loading...";
+      icon = icons.loading;
+    } else if (isError) {
+      text = "Error loading server status";
+      icon = icons.error;
+    } else {
+      const serverName = status.name.short_name;
+      const numCurrentPlayers = status.player_count;
+      const map = status.current_map.map;
+      const mapName = map.pretty_name;
+
+      if (status.time_remaining === 0) {
+        icon = icons.idle;
+      } else if (status.time_remaining <= 90) {
+        // Not sure how to handle offensive mode
+        // Lets just use a flag for now although it's not perfect
+        icon = icons.ending;
+      } else if (numCurrentPlayers === 0) {
+        icon = icons.empty;
+      }
+
+      text = `${serverName} (${numCurrentPlayers}) | ${dayjs
+        .duration(status.time_remaining, "seconds")
+        .format("HH:mm:ss")} | ${mapName}`;
+    }
+
+    setTitleText(text);
+    setPendingTitleIcon(icon);
+  }, [status, isLoading, isError]);
+
+  useEffect(() => {
+    let counter = 0;
+    const nextIcon = pendingTitleIcon;
+    const currIcon = titleIcon;
+
+    if (pendingTitleIcon && currIcon !== nextIcon) {
+      titleTimeoutRef.current = setInterval(() => {
+        counter++;
+        if (counter % 2 === 1) {
+          document.title = `${nextIcon} ${titleText}`;
+        } else {
+          document.title = `${currIcon} ${titleText}`;
+        }
+        if (counter === numberOfBlinks * 2) {
+          counter = 0;
+          setPendingTitleIcon("");
+          setTitleIcon(nextIcon);
+          clearInterval(titleTimeoutRef.current);
+        }
+      }, blinkInterval);
+    } else {
+      document.title = `${titleIcon} ${titleText}`;
+    }
+
+    return () => {
+      titleTimeoutRef?.current && clearInterval(titleTimeoutRef.current);
+    };
+  }, [pendingTitleIcon, titleIcon, titleText, titleTimeoutRef]);
+};
+
+export default TitleManager;

rcongui/src/hooks/usePlayerSidebar.js

@@ -1,7 +1,7 @@
 import { PlayerDetailDrawer } from "@/components/PlayerProfileDrawer";
 import { cmd } from "@/utils/fetchUtils";
 import {createContext, useContext, useMemo, useState} from "react";
-import { useGlobalStore } from "./useGlobalState";
+import { useGlobalStore } from "@/stores/global-state";
 import dayjs from "dayjs";
 import { useQuery } from "@tanstack/react-query";
 import { playerProfileQueryOptions } from "@/queries/player-profile-query";

rcongui/src/pages/dashboard.jsx

@@ -1,4 +1,4 @@
-import { useGlobalStore } from "@/hooks/useGlobalState";
+import { useGlobalStore } from "@/stores/global-state";
 import { cmd } from "@/utils/fetchUtils";
 import {
   List,

rcongui/src/pages/records/game-logs/index.jsx

@@ -34,7 +34,7 @@ import {
   useReactTable,
 } from "@tanstack/react-table";
 import LiveLogsTable from "@/components/live-logs/LiveLogsTable";
-import { useGlobalStore } from "@/hooks/useGlobalState";
+import { useGlobalStore } from "@/stores/global-state";
 import dayjs from "dayjs";
 import { TableToolbar } from "@/components/table/TableToolbar";
 import { TablePagination } from "@/components/table/TablePagination";

rcongui/src/pages/records/players/index.jsx

@@ -24,7 +24,7 @@ import { CountryFlag } from "@/components/shared/CountryFlag";
 import { useMemo, useState, Suspense, lazy, memo } from "react";
 import countries from "country-list";
 import PlayerCard from "@/components/shared/card/PlayerCard";
-import { useGlobalStore } from "@/hooks/useGlobalState";
+import { useGlobalStore } from "@/stores/global-state";
 import emojiData from "@emoji-mart/data/sets/15/twitter.json";
 import Emoji from "@/components/shared/Emoji";
 import AddReactionIcon from "@mui/icons-material/AddReaction";

rcongui/src/queries/teams-live-query.jsx

@@ -1,4 +1,4 @@
-import { useGlobalStore } from "@/hooks/useGlobalState";
+import { useGlobalStore } from "@/stores/global-state";
 import { extractPlayers } from "@/utils/extractPlayers";
 import { cmd } from "@/utils/fetchUtils";
 import { normalizePlayerProfile } from "@/utils/lib";

rcongui/src/router.jsx

@@ -89,7 +89,7 @@ import VipSettings from "./pages/settings/vip"
 import { loader as vipLoader } from "./pages/settings/vip"
 
 import { AuthProvider } from "@/hooks/useAuth";
-import { GlobalState } from "@/hooks/useGlobalState";
+import { GlobalState } from "./stores/global-state";
 import RouteError from "@/components/shared/RouteError";
 
 const router = createBrowserRouter([