Merge pull request #882 from Huzaif-Ahmed/tutofulscrn

Full screen toggling feature added
c2siorg · Oct 14, 2023 · b6555d8 · b6555d8
2 parents e8afe12 + d93d43d
commit b6555d8
Showing 1 changed file with 23 additions and 3 deletions.
diff --git a/src/components/Tutorials/subComps/TutorialTitle.jsx b/src/components/Tutorials/subComps/TutorialTitle.jsx
@@ -4,7 +4,10 @@ import Tooltip from "@mui/material/Tooltip";
 import Grid from "@mui/material/Grid";
 import QueryBuilderIcon from "@mui/icons-material/QueryBuilder";
 import FullscreenIcon from "@mui/icons-material/Fullscreen";
+import FullscreenExitIcon from '@mui/icons-material/FullscreenExit'
+import { useState } from "react";
 import { Typography } from "@mui/material";
+import { set } from "lodash";
 
 const TutorialHeading = ({
   stepPanelVisible,
@@ -13,8 +16,16 @@ const TutorialHeading = ({
   tutorialData,
   timeRemaining
 }) => {
+  let [Fullscreen, setFullscreen] = useState(false);
+
   const toggleFullscreen = () => {
-    document.documentElement.requestFullscreen();
+    if (Fullscreen) {
+      setFullscreen(false);
+      document.exitFullscreen();
+    } else {
+      setFullscreen(true);
+      document.documentElement.requestFullscreen();
+    }
   };
 
   let styleProps = {
@@ -50,16 +61,25 @@ const TutorialHeading = ({
                 {timeRemaining} mins remaining
               </span>
             </Button>
-            <Tooltip placement="left" title={"Go Fullscreen"}>
+            {Fullscreen ? <Tooltip placement="left" title={"exit Fullscreen"}>
               <Button
                 type="dashed"
                 onClick={toggleFullscreen}
                 className="bp-8"
                 style={{ ...styleProps }}
+              >
+                <FullscreenExitIcon />
+              </Button>
+            </Tooltip>:<Tooltip placement="left" title={"Go Fullscreen"}>
+              <Button
+                type="dashed"
+                onClick={ toggleFullscreen}
+                className="bp-8"
+                style={{ ...styleProps }}
               >
                 <FullscreenIcon />
               </Button>
-            </Tooltip>
+            </Tooltip>}
           </Grid>
         </>
       )}