window titles

client/src/features/editors/Editor.jsx

@@ -9,10 +9,16 @@ import EventListWrapper from './list/EventListWrapper';
 import { useDisclosure } from '@chakra-ui/hooks';
 import SettingsModal from '../modals/SettingsModal';
 import SettingsIconBtn from '../../common/components/buttons/SettingsIconBtn';
+import { useEffect } from 'react';
 
 export default function Editor() {
   const { isOpen, onOpen, onClose } = useDisclosure();
 
+  // Set window title
+  useEffect(() => {
+    document.title = 'ontime - Editor';
+  }, []);
+
   return (
     <>
       <SettingsModal isOpen={isOpen} onClose={onClose} />

client/src/features/viewers/backstage/StageManager.jsx

@@ -11,6 +11,11 @@ export default function StageManager(props) {
   const { publ, title, time, backstageEvents, selectedId, general } = props;
   const [filteredEvents, setFilteredEvents] = useState(null);
 
+  // Set window title
+  useEffect(() => {
+    document.title = 'ontime - Backstage Screen';
+  }, []);
+
   // calculate delays if any
   useEffect(() => {
     if (backstageEvents == null) return;

client/src/features/viewers/foh/Public.jsx

@@ -4,10 +4,16 @@ import Paginator from '../../../common/components/views/Paginator';
 import NavLogo from '../../../common/components/nav/NavLogo';
 import { AnimatePresence, motion } from 'framer-motion';
 import TitleSide from '../../../common/components/views/TitleSide';
+import { useEffect } from 'react';
 
 export default function StageManager(props) {
   const { publ, publicTitle, time, events, publicSelectedId, general } = props;
 
+  // Set window title
+  useEffect(() => {
+    document.title = 'ontime - Public Screen';
+  }, []);
+
   // Format messages
   const showPubl = publ.text !== '' && publ.visible;
 

client/src/features/viewers/lower/Lower.jsx

@@ -1,9 +1,16 @@
 import { AnimatePresence, motion } from 'framer-motion';
+import { useEffect, useState } from 'react';
 import style from './Lower.module.css';
 
 export default function Lower(props) {
   const { lower, title, time, general } = props;
 
+  // Set window title
+  useEffect(() => {
+    document.title = 'ontime - Lower Thirds';
+  }, []);
+
+  // TODO: sanitize data
   // getting config from URL: preset, size, transition, bg, text, key
   // eg. http://localhost:3000/lower?bg=ff2&text=f00&size=0.6&transition=5
   let params = new URLSearchParams(props.location.search);

client/src/features/viewers/presenter/PresenterView.jsx

@@ -1,4 +1,5 @@
 import { AnimatePresence, motion } from 'framer-motion';
+import { useEffect } from 'react';
 import Countdown from '../../../common/components/countdown/Countdown';
 import MyProgressBar from '../../../common/components/myProgressBar/MyProgressBar';
 import NavLogo from '../../../common/components/nav/NavLogo';
@@ -8,6 +9,11 @@ import style from './PresenterView.module.css';
 export default function PresenterView(props) {
   const { pres, title, time } = props;
 
+  // Set window title
+  useEffect(() => {
+    document.title = 'ontime - Speaker Screen';
+  }, []);
+
   const showOverlay = pres.text !== '' && pres.visible;
   const isPlaying = time.playstate === 'start';