refactor: improve navigation and settings locks

apps/client/src/AppRouter.tsx

@@ -11,7 +11,7 @@ import Log from './features/log/Log';
 import Loader from './views/common/loader/Loader';
 import NotFound from './views/common/not-found/NotFound';
 import ViewLoader from './views/ViewLoader';
-import { getIsViewLocked, sessionScope } from './externals';
+import { getIsNavigationLocked, sessionScope } from './externals';
 import { initializeSentry } from './sentry.config';
 
 const Timer = lazy(() => import('./views/timer/Timer'));
@@ -45,7 +45,7 @@ export default function AppRouter() {
           path='timer'
           element={
             <ViewLoader>
-              <ViewNavigationMenu isViewLocked={getIsViewLocked()} />
+              <ViewNavigationMenu isNavigationLocked={getIsNavigationLocked()} />
               <Timer />
             </ViewLoader>
           }
@@ -54,7 +54,7 @@ export default function AppRouter() {
           path='countdown'
           element={
             <ViewLoader>
-              <ViewNavigationMenu isViewLocked={getIsViewLocked()} />
+              <ViewNavigationMenu isNavigationLocked={getIsNavigationLocked()} />
               <Countdown />
             </ViewLoader>
           }
@@ -63,7 +63,7 @@ export default function AppRouter() {
           path='backstage'
           element={
             <ViewLoader>
-              <ViewNavigationMenu isViewLocked={getIsViewLocked()} />
+              <ViewNavigationMenu isNavigationLocked={getIsNavigationLocked()} />
               <Backstage />
             </ViewLoader>
           }
@@ -72,7 +72,7 @@ export default function AppRouter() {
           path='studio'
           element={
             <ViewLoader>
-              <ViewNavigationMenu isViewLocked={getIsViewLocked()} />
+              <ViewNavigationMenu isNavigationLocked={getIsNavigationLocked()} />
               <StudioClock />
             </ViewLoader>
           }
@@ -81,7 +81,7 @@ export default function AppRouter() {
           path='timeline'
           element={
             <ViewLoader>
-              <ViewNavigationMenu isViewLocked={getIsViewLocked()} />
+              <ViewNavigationMenu isNavigationLocked={getIsNavigationLocked()} />
               <Timeline />
             </ViewLoader>
           }
@@ -90,7 +90,7 @@ export default function AppRouter() {
           path='info'
           element={
             <ViewLoader>
-              <ViewNavigationMenu suppressSettings isViewLocked={getIsViewLocked()} />
+              <ViewNavigationMenu suppressSettings isNavigationLocked={getIsNavigationLocked()} />
               <ProjectInfo />
             </ViewLoader>
           }
@@ -198,7 +198,7 @@ function PresetView() {
   if (!preset) {
     return (
       <>
-        <ViewNavigationMenu isViewLocked={!showNav} suppressSettings />
+        <ViewNavigationMenu isNavigationLocked={!showNav} suppressSettings />
         <NotFound />
       </>
     );
@@ -212,7 +212,7 @@ function PresetView() {
   return (
     <PresetContext value={preset}>
       {preset.target !== OntimeView.Cuesheet && (
-        <ViewNavigationMenu isViewLocked={getIsViewLocked()} suppressSettings />
+        <ViewNavigationMenu isNavigationLocked={getIsNavigationLocked()} suppressSettings />
       )}
       {Component ? <Component /> : <NotFound />}
     </PresetContext>
@@ -243,7 +243,7 @@ function RedirectPreset() {
 
   return (
     <>
-      <ViewNavigationMenu isViewLocked={getIsViewLocked()} suppressSettings />
+      <ViewNavigationMenu isNavigationLocked={getIsNavigationLocked()} suppressSettings />
       <NotFound />
     </>
   );

apps/client/src/common/components/navigation-menu/ViewNavigationMenu.tsx

@@ -8,14 +8,14 @@ import ViewLockedIcon from './view-locked-icon/ViewLockedIcon';
 import NavigationMenu from './NavigationMenu';
 
 interface ViewNavigationMenuProps {
-  /** prevent navigation and settings*/
-  isViewLocked?: boolean;
+  /** prevent navigation */
+  isNavigationLocked?: boolean;
   /** prevent showing settings */
   suppressSettings?: boolean;
 }
 
 export default memo(ViewNavigationMenu);
-function ViewNavigationMenu({ isViewLocked, suppressSettings }: ViewNavigationMenuProps) {
+function ViewNavigationMenu({ isNavigationLocked, suppressSettings }: ViewNavigationMenuProps) {
   const [isMenuOpen, menuHandler] = useDisclosure();
   const { open: showEditFormDrawer } = useViewParamsEditorStore();
 
@@ -23,7 +23,7 @@ function ViewNavigationMenu({ isViewLocked, suppressSettings }: ViewNavigationMe
     [
       'Space',
       () => {
-        if (isViewLocked) return;
+        if (isNavigationLocked) return;
         menuHandler.toggle();
       },
       { preventDefault: true },
@@ -31,24 +31,24 @@ function ViewNavigationMenu({ isViewLocked, suppressSettings }: ViewNavigationMe
     [
       'mod + ,',
       () => {
-        if (isViewLocked || suppressSettings) return;
+        if (suppressSettings) return;
         showEditFormDrawer();
       },
       { preventDefault: true },
     ],
   ]);
 
-  if (isViewLocked) {
+  if (isNavigationLocked && suppressSettings) {
     return <ViewLockedIcon />;
   }
 
   return (
     <>
       <FloatingNavigation
-        toggleMenu={menuHandler.toggle}
-        toggleSettings={suppressSettings ? undefined : () => showEditFormDrawer()}
+        toggleMenu={isNavigationLocked ? undefined : menuHandler.toggle}
+        toggleSettings={suppressSettings ? undefined : showEditFormDrawer}
       />
-      <NavigationMenu isOpen={isMenuOpen} onClose={menuHandler.close} />
+      {!isNavigationLocked && <NavigationMenu isOpen={isMenuOpen} onClose={menuHandler.close} />}
     </>
   );
 }

apps/client/src/common/components/navigation-menu/floating-navigation/FloatingNavigation.tsx

@@ -8,7 +8,7 @@ import IconButton from '../../buttons/IconButton';
 import style from './FloatingNavigation.module.scss';
 
 interface FloatingNavigationProps {
-  toggleMenu: () => void;
+  toggleMenu?: () => void;
   toggleSettings?: () => void;
 }
 
@@ -20,15 +20,17 @@ export default function FloatingNavigation({ toggleMenu, toggleSettings }: Float
       id='fadeable-navigation'
       className={cx([style.fadeable, style.buttonContainer, !isButtonShown && style.hidden])}
     >
-      <IconButton
-        variant='subtle-white'
-        size='xlarge'
-        onClick={toggleMenu}
-        aria-label='toggle menu'
-        data-testid='navigation__toggle-menu'
-      >
-        <IoApps />
-      </IconButton>
+      {toggleMenu && (
+        <IconButton
+          variant='subtle-white'
+          size='xlarge'
+          onClick={toggleMenu}
+          aria-label='toggle menu'
+          data-testid='navigation__toggle-menu'
+        >
+          <IoApps />
+        </IconButton>
+      )}
       {toggleSettings && (
         <IconButton
           variant='subtle-white'

apps/client/src/externals.ts

@@ -79,7 +79,7 @@ function resolveBaseURI(): string {
  * Resolves a session scope for the session
  */
 export const sessionScope = resolveSessionScope();
-export const getIsViewLocked = () => window.location.search.includes('n=1');
+export const getIsNavigationLocked = () => new URLSearchParams(window.location.search).get('n') === '1';
 
 /**
  * The session scope is read from the cookie and will only exist if the app is password protected

apps/client/src/features/operator/OperatorExport.tsx

@@ -1,13 +1,13 @@
 import ViewNavigationMenu from '../../common/components/navigation-menu/ViewNavigationMenu';
 import ProtectRoute from '../../common/components/protect-route/ProtectRoute';
-import { getIsViewLocked } from '../../externals';
+import { getIsNavigationLocked } from '../../externals';
 
 import Operator from './Operator';
 
 export default function OperatorExport() {
   return (
     <ProtectRoute permission='operator'>
-      <ViewNavigationMenu isViewLocked={getIsViewLocked()} />
+      <ViewNavigationMenu isNavigationLocked={getIsNavigationLocked()} />
       <Operator />
     </ProtectRoute>
   );

apps/client/src/features/rundown/RundownExport.tsx

@@ -55,10 +55,11 @@ function RundownExport() {
     <ProtectRoute permission='editor'>
       <div className={cx([style.rundownExport, isExtracted && style.extracted])} data-testid='panel-rundown'>
         <FinderPlacement />
+        {isExtracted && <ViewNavigationMenu suppressSettings />}
         <div className={style.rundown}>
           <div className={style.list}>
             <ErrorBoundary>
-              <Corner onClick={(event) => handleLinks('rundown', event)} />
+              {!isExtracted && <Corner onClick={(event) => handleLinks('rundown', event)} />}
               <RundownContextMenu>
                 <RundownWrapper />
               </RundownContextMenu>

apps/client/src/features/sharing/GenerateLinkForm.tsx

@@ -227,16 +227,25 @@ export default function GenerateLinkForm({ hostOptions, pathOptions, presets, is
                 name='lockNav'
                 checked={watch('lockNav')}
                 onCheckedChange={(checked) => setValue('lockNav', checked, { shouldDirty: true })}
+                disabled={watch('lockConfig')}
               />
             </Panel.ListItem>
             {watch('path') !== OntimeView.Cuesheet && (
               <Panel.ListItem>
-                <Panel.Field title='Lock configuration' description='Whether to hide the configuration panel' />
+                <Panel.Field
+                  title='Lock configuration'
+                  description='Whether to hide the configuration panel (also hides navigation)'
+                />
                 <Switch
                   size='large'
                   name='lockConfig'
                   checked={watch('lockConfig')}
-                  onCheckedChange={(checked) => setValue('lockConfig', checked, { shouldDirty: true })}
+                  onCheckedChange={(checked) => {
+                    if (checked) {
+                      setValue('lockNav', checked, { shouldDirty: true });
+                    }
+                    setValue('lockConfig', checked, { shouldDirty: true });
+                  }}
                 />
               </Panel.ListItem>
             )}

apps/client/src/views/cuesheet/CuesheetPage.tsx

@@ -4,7 +4,7 @@ import { useDisclosure } from '@mantine/hooks';
 import IconButton from '../../common/components/buttons/IconButton';
 import NavigationMenu from '../../common/components/navigation-menu/NavigationMenu';
 import { useWindowTitle } from '../../common/hooks/useWindowTitle';
-import { getIsViewLocked } from '../../externals';
+import { getIsNavigationLocked } from '../../externals';
 import CuesheetOverview from '../../features/overview/CuesheetOverview';
 
 import CuesheetEditModal from './cuesheet-edit-modal/CuesheetEditModal';
@@ -18,7 +18,7 @@ export default function CuesheetPage() {
 
   useWindowTitle('Cuesheet');
 
-  const isLocked = getIsViewLocked();
+  const isLocked = getIsNavigationLocked();
 
   return (
     <>