Fix: Fullscreen when reseting

SverreNystad · Oct 21, 2023 · 25af00e · 25af00e
1 parent 0bbfca6
commit 25af00e
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 27 deletions.
diff --git a/frontend/src/components/settingspage/Settings.jsx b/frontend/src/components/settingspage/Settings.jsx
@@ -2,32 +2,8 @@ import React, { useContext  } from 'react';
 import { SettingsContext } from '../../contexts/SettingsContext'; // adjust the import path as needed
 
 const SettingsPage = () => {
-    const { settings, updateSetting, resetToDefaults } = useContext(SettingsContext);
-    const toggleFullScreen = () => {
-        if (!document.fullscreenElement) {
-            if (document.documentElement.requestFullscreen) {
-              document.documentElement.requestFullscreen();
-            } else if (document.documentElement.mozRequestFullScreen) { /* Firefox */
-              document.documentElement.mozRequestFullScreen();
-            } else if (document.documentElement.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
-              document.documentElement.webkitRequestFullscreen();
-            } else if (document.documentElement.msRequestFullscreen) { /* IE/Edge */
-              document.documentElement.msRequestFullscreen();
-            }
-            updateSetting('isFullscreen', true); // update your state variable
-        } else {
-          if (document.exitFullscreen) {
-            document.exitFullscreen();
-          } else if (document.mozCancelFullScreen) { /* Firefox */
-            document.mozCancelFullScreen();
-          } else if (document.webkitExitFullscreen) { /* Chrome, Safari and Opera */
-            document.webkitExitFullscreen();
-          } else if (document.msExitFullscreen) { /* IE/Edge */
-            document.msExitFullscreen();
-          }
-          updateSetting('isFullscreen', false); // update your state variable
-        }
-      }
+    const { settings, updateSetting, resetToDefaults, toggleFullScreen } = useContext(SettingsContext);
+
     // handler for changes in settings
     const handleSettingChange = (setting) => (e) => {
       updateSetting(setting, e.target.value);

diff --git a/frontend/src/contexts/SettingsContext.js b/frontend/src/contexts/SettingsContext.js
@@ -21,6 +21,31 @@ export const SettingsProvider = ({ children }) => {
       [key]: value,
     }));
   };
+  const toggleFullScreen = () => {
+    if (!document.fullscreenElement) {
+        if (document.documentElement.requestFullscreen) {
+          document.documentElement.requestFullscreen();
+        } else if (document.documentElement.mozRequestFullScreen) { /* Firefox */
+          document.documentElement.mozRequestFullScreen();
+        } else if (document.documentElement.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
+          document.documentElement.webkitRequestFullscreen();
+        } else if (document.documentElement.msRequestFullscreen) { /* IE/Edge */
+          document.documentElement.msRequestFullscreen();
+        }
+        updateSetting('isFullscreen', true); // update your state variable
+    } else {
+      if (document.exitFullscreen) {
+        document.exitFullscreen();
+      } else if (document.mozCancelFullScreen) { /* Firefox */
+        document.mozCancelFullScreen();
+      } else if (document.webkitExitFullscreen) { /* Chrome, Safari and Opera */
+        document.webkitExitFullscreen();
+      } else if (document.msExitFullscreen) { /* IE/Edge */
+        document.msExitFullscreen();
+      }
+      updateSetting('isFullscreen', false); // update your state variable
+    }
+}
 
   // Function to reset all settings to default
   const resetToDefaults = () => {
@@ -33,11 +58,15 @@ export const SettingsProvider = ({ children }) => {
       mute: false,
       // ... other settings ...
     });
+    toggleFullScreen();
+
   };
 
   return (
-    <SettingsContext.Provider value={{ settings, updateSetting, resetToDefaults }}>
+    <SettingsContext.Provider value={{ settings, updateSetting, resetToDefaults, toggleFullScreen}}>
       {children}
     </SettingsContext.Provider>
   );
 };
+
+