Extra change for Moonfire NVR Web UI

ui/src/AppMenu.tsx

@@ -14,7 +14,7 @@ import MenuIcon from "@mui/icons-material/Menu";
 import React from "react";
 import { LoginState } from "./App";
 import Box from "@mui/material/Box";
-import { useThemeMode } from "./components/ThemeMode";
+import { CurrentMode, useThemeMode } from "./components/ThemeMode";
 import { Brightness2, Brightness7, BrightnessAuto } from "@mui/icons-material";
 import { Tooltip } from "@mui/material";
 
@@ -29,7 +29,7 @@ interface Props {
 
 // https://material-ui.com/components/app-bar/
 function MoonfireMenu(props: Props) {
-  const { getTheme, changeTheme } = useThemeMode();
+  const { choosenTheme, changeTheme } = useThemeMode();
   const theme = useTheme();
   const [accountMenuAnchor, setAccountMenuAnchor] =
     React.useState<null | HTMLElement>(null);
@@ -79,7 +79,7 @@ function MoonfireMenu(props: Props) {
             color="inherit"
             size="small"
           >
-            {getTheme === 1 ? <Brightness7 /> : getTheme === 2 ? <Brightness2 /> : <BrightnessAuto />}
+            {choosenTheme === CurrentMode.Light ? <Brightness7 /> : choosenTheme === CurrentMode.Dark ? <Brightness2 /> : <BrightnessAuto />}
           </IconButton>
         </Tooltip>
         {props.loginState !== "unknown" && props.loginState !== "logged-in" && (

ui/src/Live/Multiview.tsx

@@ -135,30 +135,13 @@ const Multiview = (props: MultiviewProps) => {
   const handleFullScreen = useCallback(() => {
     if (outerRef.current) {
       const elem = outerRef.current;
-      //@ts-expect-error another browser (if not bruh)
-      if (document.fullscreenElement || document.webkitFullscreenElement || document.msFullscreenElement) {
+      if (document.fullscreenElement) {
         if (document.exitFullscreen) {
           document.exitFullscreen();
-          //@ts-expect-error another browser (if not bruh)
-        } else if (document.webkitExitFullscreen) {
-          //@ts-expect-error another browser (if not bruh)
-          document.webkitExitFullscreen();
-          //@ts-expect-error another browser (if not bruh)
-        } else if (document.msExitFullscreen) {
-          //@ts-expect-error another browser (if not bruh)
-          document.msExitFullscreen();
         }
       } else {
         if (elem.requestFullscreen) {
           elem.requestFullscreen();
-          //@ts-expect-error another browser (if not bruh)
-        } else if (elem.webkitRequestFullscreen) {
-          //@ts-expect-error another browser (if not bruh)
-          elem.webkitRequestFullscreen();
-          //@ts-expect-error another browser (if not bruh)
-        } else if (elem.msRequestFullscreen) {
-          //@ts-expect-error another browser (if not bruh)
-          elem.msRequestFullscreen();
         }
       }
     }
@@ -213,7 +196,7 @@ const Multiview = (props: MultiviewProps) => {
     >
       <Tooltip title="Toggle full screen">
         <IconButton size="small" sx={{
-          position: 'fixed', background: 'rgba(255,255,255,0.3) !important', transition: '0.2s', opacity: '0.1', bottom: 10, right: 10, zIndex: 9, color: "#fff", ":hover": {
+          position: 'fixed', background: 'rgba(255,255,255,0.4) !important', transition: '0.2s', opacity: '0.4', bottom: 10, right: 10, zIndex: 9, color: "#fff", ":hover": {
             opacity: '1'
           }
         }} onClick={handleFullScreen}>

ui/src/components/ThemeMode.tsx

@@ -3,44 +3,53 @@
 // SPDX-License-Identifier: GPL-v3.0-or-later WITH GPL-3.0-linking-exception
 
 import { useColorScheme } from "@mui/material";
-import React, { createContext } from "react";
+import React, { createContext, useCallback } from "react";
+
+export enum CurrentMode {
+  Auto = 0,
+  Light = 1,
+  Dark = 2
+}
 
 interface ThemeProps {
   changeTheme: () => void,
-  currentTheme?: 'dark' | 'light',
-  getTheme: 0 | 1 | 2,
-  systemColor: 'dark' | 'light'
+  currentTheme: 'dark' | 'light',
+  choosenTheme: CurrentMode
 }
 
 export const ThemeContext = createContext<ThemeProps>({
   currentTheme: window.matchMedia("(prefers-color-scheme: dark)").matches ? 'dark' : 'light',
   changeTheme: () => { },
-  getTheme: 0,
-  systemColor: window.matchMedia("(prefers-color-scheme: dark)").matches ? 'dark' : 'light'
+  choosenTheme: CurrentMode.Auto
 });
 
 const ThemeMode = ({ children }: { children: JSX.Element }): JSX.Element => {
   const { mode, setMode } = useColorScheme();
-  const [detectedSystemColorScheme, setDetectedSystemColorScheme] = React.useState<'dark' | 'light'>(
-    window.matchMedia("(prefers-color-scheme: dark)").matches ? 'dark' : 'light'
-  );
-
-  React.useEffect(() => {
-    window.matchMedia("(prefers-color-scheme: dark)")
-      .addEventListener("change", (e) => {
-        setDetectedSystemColorScheme(e.matches ? 'dark' : 'light');
-      });
+
+  const useMediaQuery = useCallback((query: string) => {
+    const [matches, setMatches] = React.useState(
+      () => window.matchMedia(query).matches
+    );
+    React.useEffect(() => {
+      const m = window.matchMedia(query);
+      const l = () => setMatches(m.matches);
+      m.addEventListener("change", l);
+      return () => m.removeEventListener("change", l);
+    }, [query]);
+    return matches;
   }, []);
 
+  const detectedSystemColorScheme = useMediaQuery("(prefers-color-scheme: dark)") ? "dark" : "light";
+
   const changeTheme = React.useCallback(() => {
     setMode(mode === 'dark' ? 'light' : mode === 'light' ? 'system' : 'dark')
   }, [mode]);
 
-  const currentTheme = mode === 'system' ? detectedSystemColorScheme : mode;
-  const getTheme = mode === 'dark' ? 2 : mode === 'light' ? 1 : 0;
+  const currentTheme = mode === 'system' ? detectedSystemColorScheme : (mode ?? detectedSystemColorScheme);
+  const choosenTheme = mode === 'dark' ? CurrentMode.Dark : mode === 'light' ? CurrentMode.Light : CurrentMode.Auto;
 
   return (
-    <ThemeContext.Provider value={{ changeTheme, currentTheme, getTheme, systemColor: detectedSystemColorScheme }}>
+    <ThemeContext.Provider value={{ changeTheme, currentTheme, choosenTheme }}>
       {children}
     </ThemeContext.Provider>
   )