feat: add video demo popup (#36)

* add video demo

* remove unused import

src/components/BrainDataIntro.tsx

@@ -1,7 +1,13 @@
 import { Box, Divider, Link, Typography } from '@mui/material';
-import { FC } from 'react';
+import { FC, useState } from 'react';
+import { VideoPopup } from './VideoPopup';
 
 export const BrainDataIntro: FC = () => {
+  // video popup state
+  const [open, setOpen] = useState(false);
+  const handleOpen = () => setOpen(true);
+  const handleClose = () => setOpen(false);
+
   return (
     <Box display={'flex'} flexDirection={'column'} bgcolor={'white'} textAlign={'left'} sx={{ minHeight: '25%', maxHeight: '50%', minWidth: '50%', maxWidth: '90%' }}>
       <Typography variant="h4" fontWeight="bold" fontSize={30}>
@@ -48,9 +54,14 @@ export const BrainDataIntro: FC = () => {
           <li key={6}>Data are available for download in CSV or JSON format using the respective button. Click "DISMISS" when done</li>
         </ol>
         <p>
-          Click <Link href="#">here</Link> for a step-by-step visual demonstration.
+          Click{' '}
+          <Link sx={{ cursor: 'pointer' }} onClick={handleOpen}>
+            here
+          </Link>{' '}
+          for a step-by-step visual demonstration.
         </p>
       </Typography>
+      <VideoPopup open={open} onClose={handleClose} />
     </Box>
   );
 };

src/components/VideoPopup.tsx

@@ -0,0 +1,21 @@
+import { Dialog, IconButton } from '@mui/material';
+import CloseIcon from '@mui/icons-material/Close';
+import videoPath from '../assets/demo-with-narration.mp4';
+import { FC } from 'react';
+
+interface VideoPopupProps {
+  open: boolean;
+  onClose: () => void;
+}
+
+export const VideoPopup: FC<VideoPopupProps> = ({ open, onClose }) => {
+  console.log('videoPath', videoPath);
+  return (
+    <Dialog open={open} onClose={onClose} maxWidth="xl" fullWidth>
+      <IconButton onClick={onClose} sx={{ position: 'absolute', top: 8, right: 8, zIndex: 1, color: 'grey' }}>
+        <CloseIcon />
+      </IconButton>
+      <video src={videoPath} controls autoPlay></video>
+    </Dialog>
+  );
+};

src/pages/Root.tsx

@@ -6,10 +6,17 @@ import ChevronRightIcon from '@mui/icons-material/ChevronRight';
 import OndemandVideoIcon from '@mui/icons-material/OndemandVideo';
 import InfoIcon from '@mui/icons-material/Info';
 import CallIcon from '@mui/icons-material/Call';
+import { useState } from 'react';
+import { VideoPopup } from '../components/VideoPopup';
 
 export function RootLayout() {
   const datasets = [{ displayedName: 'Brain Tissue', name: 'brain-tissue' }];
 
+  // video
+  const [open, setOpen] = useState(false);
+  const handleOpen = () => setOpen(true);
+  const handleClose = () => setOpen(false);
+
   return (
     <>
       <AppBar component="nav" color="default" sx={{ zIndex: (theme) => theme.zIndex.drawer + 1 }}>
@@ -49,7 +56,7 @@ export function RootLayout() {
               </ListItem>
             ))}
             <ListItem disablePadding>
-              <ListItemButton component={NavLink} to="#">
+              <ListItemButton onClick={handleOpen}>
                 <ListItemIcon>
                   <OndemandVideoIcon />
                 </ListItemIcon>
@@ -95,6 +102,7 @@ export function RootLayout() {
       >
         <Outlet />
       </Box>
+      <VideoPopup open={open} onClose={handleClose} />
     </>
   );
 }