feat: V2 ontime menu (#259)

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

@@ -1,6 +1,5 @@
 import { useEffect, useState } from 'react';
 import QRCode from 'react-qr-code';
-import NavLogo from 'common/components/nav/NavLogo';
 import TitleSide from 'common/components/title-side/TitleSide';
 import { formatDisplay } from 'common/utils/dateConfig';
 import { AnimatePresence, motion } from 'framer-motion';
@@ -9,6 +8,7 @@ import PropTypes from 'prop-types';
 
 import { overrideStylesURL } from '../../../common/api/apiConstants';
 import { mirrorViewersAtom } from '../../../common/atoms/ViewerSettings';
+import NavigationMenu from '../../../common/components/navigation-menu/NavigationMenu';
 import Paginator from '../../../common/components/paginator/Paginator';
 import { useRuntimeStylesheet } from '../../../common/hooks/useRuntimeStylesheet';
 import { getEventsWithDelay } from '../../../common/utils/eventsManager';
@@ -62,7 +62,7 @@ export default function Backstage(props) {
 
   return (
     <div className={`backstage ${isMirrored ? 'mirror' : ''}`} data-testid='backstage-view'>
-      <NavLogo />
+      <NavigationMenu />
 
       <div className='event-title'>{general.title}</div>
 

client/src/features/viewers/clock/Clock.tsx

@@ -4,7 +4,7 @@ import { useAtom } from 'jotai';
 
 import { overrideStylesURL } from '../../../common/api/apiConstants';
 import { mirrorViewersAtom } from '../../../common/atoms/ViewerSettings';
-import NavLogo from '../../../common/components/nav/NavLogo';
+import NavigationMenu from '../../../common/components/navigation-menu/NavigationMenu';
 import { useRuntimeStylesheet } from '../../../common/hooks/useRuntimeStylesheet';
 import { TimeManagerType } from '../../../common/models/TimeManaget.type';
 import { ViewSettingsType } from '../../../common/models/ViewSettings.type';
@@ -120,9 +120,6 @@ export default function Clock(props: ClockProps) {
     }
   }
 
-  const hideNav = searchParams.get('hidenav');
-  userOptions.hideNav = Boolean(hideNav);
-
   const clock = formatTime(time.clock, formatOptions);
   const clean = clock.replace('/:/g', '');
 
@@ -137,7 +134,7 @@ export default function Clock(props: ClockProps) {
       }}
       data-testid='clock-view'
     >
-      {!userOptions?.hideNav && <NavLogo />}
+      <NavigationMenu />
       <div
         className='clock'
         style={{

client/src/features/viewers/countdown/Countdown.jsx

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 
 import { overrideStylesURL } from '../../../common/api/apiConstants';
 import { mirrorViewersAtom } from '../../../common/atoms/ViewerSettings';
-import NavLogo from '../../../common/components/nav/NavLogo';
+import NavigationMenu from '../../../common/components/navigation-menu/NavigationMenu';
 import Empty from '../../../common/components/state/Empty';
 import { useRuntimeStylesheet } from '../../../common/hooks/useRuntimeStylesheet';
 import { formatDisplay, millisToSeconds } from '../../../common/utils/dateConfig';
@@ -94,7 +94,7 @@ export default function Countdown(props) {
 
   return (
     <div className={`countdown ${isMirrored ? 'mirror' : ''}`} data-testid='countdown-view'>
-      <NavLogo />
+      <NavigationMenu />
       {follow === null ? (
         <div className='event-select' data-testid='countdown-select'>
           <span className='event-select__title'>Select an event to follow</span>

client/src/features/viewers/lower-thirds/LowerClean.jsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import { AnimatePresence, motion } from 'framer-motion';
 
-import NavLogo from "../../../common/components/nav/NavLogo";
+import NavigationMenu from '../../../common/components/navigation-menu/NavigationMenu';
 
 import './LowerClean.scss';
 
@@ -87,7 +87,7 @@ export default function LowerClean(props) {
       }}
     >
 
-      <NavLogo isHidden />
+      <NavigationMenu />
 
       <AnimatePresence>
         {showLower && (

client/src/features/viewers/lower-thirds/LowerLines.jsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import { AnimatePresence, motion } from 'framer-motion';
 
-import NavLogo from "../../../common/components/nav/NavLogo";
+import NavigationMenu from '../../../common/components/navigation-menu/NavigationMenu';
 
 import './LowerLines.scss';
 
@@ -130,7 +130,7 @@ export default function LowerLines(props) {
       }}
     >
 
-      <NavLogo isHidden />
+      <NavigationMenu />
 
       <AnimatePresence>
         {showLower && (

client/src/features/viewers/minimal-timer/MinimalTimer.tsx

@@ -4,7 +4,7 @@ import { useAtom } from 'jotai';
 
 import { overrideStylesURL } from '../../../common/api/apiConstants';
 import { mirrorViewersAtom } from '../../../common/atoms/ViewerSettings';
-import NavLogo from '../../../common/components/nav/NavLogo';
+import NavigationMenu from '../../../common/components/navigation-menu/NavigationMenu';
 import { useRuntimeStylesheet } from '../../../common/hooks/useRuntimeStylesheet';
 import { PresenterMessageType } from '../../../common/models/PresenterMessage.type';
 import { TimeManagerType } from '../../../common/models/TimeManaget.type';
@@ -117,9 +117,6 @@ export default function MinimalTimer(props: MinimalTimerProps) {
     }
   }
 
-  const hideNav = searchParams.get('hidenav');
-  userOptions.hideNav = Boolean(hideNav);
-
   const hideOvertime = searchParams.get('hideovertime');
   userOptions.hideOvertime = Boolean(hideOvertime);
 
@@ -144,6 +141,7 @@ export default function MinimalTimer(props: MinimalTimerProps) {
       }}
       data-testid='minimal-timer'
     >
+      <NavigationMenu />
       {!hideMessagesOverlay && (
         <div
           className={showOverlay ? 'message-overlay message-overlay--active' : 'message-overlay'}
@@ -151,7 +149,6 @@ export default function MinimalTimer(props: MinimalTimerProps) {
           <div className='message'>{pres.text}</div>
         </div>
       )}
-      {!userOptions?.hideNav && <NavLogo />}
       <div
         className={`timer ${!isPlaying ? 'timer--paused' : ''} ${
           showFinished ? 'timer--finished' : ''

client/src/features/viewers/picture-in-picture/Pip.jsx

@@ -1,7 +1,6 @@
 import { useEffect, useRef, useState } from 'react';
 import QRCode from 'react-qr-code';
 import { ReactComponent as Emptyimage } from 'assets/images/empty.svg';
-import NavLogo from 'common/components/nav/NavLogo';
 import { formatDisplay } from 'common/utils/dateConfig';
 import { AnimatePresence, motion } from 'framer-motion';
 import { useAtom } from 'jotai';
@@ -9,6 +8,7 @@ import PropTypes from 'prop-types';
 
 import { overrideStylesURL } from '../../../common/api/apiConstants';
 import { mirrorViewersAtom } from '../../../common/atoms/ViewerSettings';
+import NavigationMenu from '../../../common/components/navigation-menu/NavigationMenu';
 import Paginator from '../../../common/components/paginator/Paginator';
 import { useRuntimeStylesheet } from '../../../common/hooks/useRuntimeStylesheet';
 import { formatTime } from '../../../common/utils/time';
@@ -69,7 +69,7 @@ export default function Pip(props) {
 
   return (
     <div className={`pip ${isMirrored ? 'mirror' : ''}`} data-testid='pip-view'>
-      <NavLogo />
+      <NavigationMenu />
 
       <div className='event-title'>{general.title}</div>
 

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

@@ -1,6 +1,5 @@
 import { useEffect, useState } from 'react';
 import QRCode from 'react-qr-code';
-import NavLogo from 'common/components/nav/NavLogo';
 import TitleSide from 'common/components/title-side/TitleSide';
 import { AnimatePresence, motion } from 'framer-motion';
 import { useAtom } from 'jotai';
@@ -8,6 +7,7 @@ import PropTypes from 'prop-types';
 
 import { overrideStylesURL } from '../../../common/api/apiConstants';
 import { mirrorViewersAtom } from '../../../common/atoms/ViewerSettings';
+import NavigationMenu from '../../../common/components/navigation-menu/NavigationMenu';
 import Paginator from '../../../common/components/paginator/Paginator';
 import { useRuntimeStylesheet } from '../../../common/hooks/useRuntimeStylesheet';
 import { formatTime } from '../../../common/utils/time';
@@ -42,7 +42,7 @@ export default function Public(props) {
 
   return (
     <div className={`public-screen ${isMirrored ? 'mirror' : ''}`} data-testid='public-view'>
-      <NavLogo />
+      <NavigationMenu />
 
       <div className='event-title'>{general.title}</div>
 

client/src/features/viewers/studio/StudioClock.jsx

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 
 import { overrideStylesURL } from '../../../common/api/apiConstants';
 import { mirrorViewersAtom } from '../../../common/atoms/ViewerSettings';
-import NavLogo from '../../../common/components/nav/NavLogo';
+import NavigationMenu from '../../../common/components/navigation-menu/NavigationMenu';
 import useFitText from '../../../common/hooks/useFitText';
 import { useRuntimeStylesheet } from '../../../common/hooks/useRuntimeStylesheet';
 import { formatDisplay } from '../../../common/utils/dateConfig';
@@ -58,7 +58,7 @@ export default function StudioClock(props) {
 
   return (
     <div className={`studio-clock ${isMirrored ? 'mirror' : ''}`} data-testid='studio-view'>
-      <NavLogo />
+      <NavigationMenu />
       <div className='clock-container'>
         <div className='studio-timer'>{clock}</div>
         <div

client/src/features/viewers/timer/Timer.jsx

@@ -2,7 +2,6 @@ import { useEffect, useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import TimerDisplay from 'common/components/countdown/TimerDisplay';
 import MyProgressBar from 'common/components/myProgressBar/MyProgressBar';
-import NavLogo from 'common/components/nav/NavLogo';
 import TitleCard from 'common/components/title-card/TitleCard';
 import { AnimatePresence, motion } from 'framer-motion';
 import { useAtom } from 'jotai';
@@ -10,6 +9,7 @@ import PropTypes from 'prop-types';
 
 import { overrideStylesURL } from '../../../common/api/apiConstants';
 import { mirrorViewersAtom } from '../../../common/atoms/ViewerSettings';
+import NavigationMenu from '../../../common/components/navigation-menu/NavigationMenu';
 import { useRuntimeStylesheet } from '../../../common/hooks/useRuntimeStylesheet';
 import { formatTime } from '../../../common/utils/time';
 
@@ -72,12 +72,12 @@ export default function Timer(props) {
   return (
     <div className={time.finished ? `${baseClasses} stage-timer--finished` : baseClasses}
          data-testid='timer-view'>
-      <div className={showOverlay ? 'message-overlay message-overlay--active' : 'message-overlay'}>
+      <NavigationMenu />
+      <div
+        className={showOverlay ? 'message-overlay message-overlay--active' : 'message-overlay'}>
         <div className='message'>{pres.text}</div>
       </div>
 
-      <NavLogo />
-
       <div className='clock-container'>
         <div className='label'>Time Now</div>
         <div className='clock'>{clock}</div>