feat/117: add toggle fullscreen button (#138)

client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ontime-ui",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "private": true,
   "dependencies": {
     "@chakra-ui/react": "^2.0.0-next.3",

client/src/common/components/nav/NavLogo.jsx

@@ -5,6 +5,16 @@ import { Image } from '@chakra-ui/react';
 import { AnimatePresence, motion } from 'framer-motion';
 import navlogo from 'assets/images/logos/LOGO-72.png';
 import style from './NavLogo.module.scss';
+import { IconButton } from '@chakra-ui/button';
+import { IoExpand } from '@react-icons/all-files/io5/IoExpand';
+
+/* Styling for action buttons */
+const navButtonStyle = {
+  size: 'md',
+  variant: 'outline',
+  colorScheme: 'whiteAlpha',
+  _hover: { bg: '#ebedf0', color: '#333' },
+};
 
 export default function NavLogo(props) {
   const { isHidden } = props;
@@ -24,6 +34,16 @@ export default function NavLogo(props) {
     }
   }, []);
 
+  const toggleFullscreen = useCallback(() => {
+    if (!document.fullscreenElement) {
+      document.documentElement.requestFullscreen();
+    } else {
+      if (document.exitFullscreen) {
+        document.exitFullscreen();
+      }
+    }
+  }, []);
+
   useEffect(() => {
     // attach the event listener
     document.addEventListener('keydown', handleKeyPress);
@@ -49,33 +69,51 @@ export default function NavLogo(props) {
       <Image alt='' src={navlogo} className={style.logo} onClick={handleClick} />
       <AnimatePresence>
         {showNav && (
-          <motion.div
+          <>
-            initial={{ opacity: 0, scale: 0, y: -50 }}
+            <motion.div
-            animate={{ opacity: 1, scale: 1, y: 0 }}
+              initial={{ opacity: 0, scaleX: 0 }}
-            whileInView={{ opacity: 1 }}
+              animate={{ opacity: 1, scaleX: 1 }}
-            exit={{ opacity: 0, scaleY: 0, y: -50 }}
+              whileInView={{ opacity: 1 }}
-            className={style.nav}
+              exit={{ opacity: 0, scaleX: 0 }}
-          >
+              className={style.actions}
-            <Link to='/timer' {...tabProps}>Timer</Link>
+            >
-            <Link to='/minimal' {...tabProps}>
+              <IconButton
-              Minimal Timer
+                aria-label='Toggle Fullscreen'
-            </Link>
+                icon={<IoExpand />}
-            <Link to='/sm' {...tabProps}>
+                onClick={toggleFullscreen}
-              Backstage
+                {...navButtonStyle}
-            </Link>
+              />
-            <Link to='/public' {...tabProps}>
+            </motion.div>
-              Public
+            <motion.div
-            </Link>
+              initial={{ opacity: 0, scale: 0, y: -50 }}
-            <Link to='/lower' {...tabProps}>
+              animate={{ opacity: 1, scale: 1, y: 0 }}
-              Lower Thirds
+              whileInView={{ opacity: 1 }}
-            </Link>
+              exit={{ opacity: 0, scaleY: 0, y: -50 }}
-            <Link to='/pip' {...tabProps}>
+              className={style.nav}
-              PIP
+            >
-            </Link>
+              <Link to='/timer' {...tabProps}>
-            <Link to='/studio' {...tabProps}>
+                Timer
-              Studio Clock
+              </Link>
-            </Link>
+              <Link to='/minimal' {...tabProps}>
-          </motion.div>
+                Minimal Timer
+              </Link>
+              <Link to='/sm' {...tabProps}>
+                Backstage
+              </Link>
+              <Link to='/public' {...tabProps}>
+                Public
+              </Link>
+              <Link to='/lower' {...tabProps}>
+                Lower Thirds
+              </Link>
+              <Link to='/pip' {...tabProps}>
+                PIP
+              </Link>
+              <Link to='/studio' {...tabProps}>
+                Studio Clock
+              </Link>
+            </motion.div>
+          </>
         )}
       </AnimatePresence>
     </motion.div>

client/src/common/components/nav/NavLogo.module.scss

@@ -18,6 +18,7 @@
 
   .nav,
   .showNav {
+    margin-top: 2vh;
     gap: 2vh;
     display: flex;
     flex-direction: column;
@@ -29,4 +30,12 @@
       color: $text-white;
     }
   }
+
+  .actions {
+    display: flex;
+    gap: 8px;
+    position: absolute;
+    top: 0.5vw;
+    right: 75px;
+  }
 }