Refactor: remove react-fullscreenable dependency and replace with custom fullscreen hook

implemented custom useFullscreen hook wrapping standard Fullscreen API

uninstalled react-fullscreenable package and removed all of its imports

Signed-off-by: Andrii Podriez <[email protected]>

Author: Anyandsi

package.json

@@ -44,7 +44,6 @@
     "react-dnd": "^14.0.5",
     "react-dnd-html5-backend": "^14.1.0",
     "react-dom": "^17.0.2",
-    "react-fullscreenable": "^2.5.1-0",
     "react-json-view": "^1.21.3",
     "react-notification-system": "^0.4.0",
     "react-redux": "^7.2.8",

src/pages/dashboards/dashboard-layout.js

@@ -27,7 +27,6 @@ import {
   useUpdateWidgetMutation,
 } from "../../store/apiSlice";
 import { sessionToken } from "../../localStorage";
-import Fullscreenable from "react-fullscreenable";
 import DashboardButtonGroup from "./grid/dashboard-button-group";
 import Widget from "./widget/widget";
 import WidgetContainer from "./widget/widget-container";
@@ -38,6 +37,7 @@ import EditWidgetDialog from "./widget/edit-widget/edit-widget";
 import EditSignalMappingDialog from "../scenarios/dialogs/edit-signal-mapping";
 import classNames from "classnames";
 import { Spinner } from "react-bootstrap";
+import useFullscreen from "../../utils/fullscreen.js";
 
 //this component handles the UI of the dashboard
 const DashboardLayout = ({ isFullscreen, toggleFullscreen }) => {
@@ -451,4 +451,19 @@ const DashboardLayout = ({ isFullscreen, toggleFullscreen }) => {
   );
 };
 
-export default Fullscreenable()(DashboardLayout);
+//wrap into fullscreen
+const DashboardFullscreenable = () => {
+  const { fullscreenTargetRef, isFullscreen, toggleFullscreen } =
+    useFullscreen();
+
+  return (
+    <div ref={fullscreenTargetRef}>
+      <Dashboard
+        isFullscreen={isFullscreen}
+        toggleFullscreen={toggleFullscreen}
+      />
+    </div>
+  );
+};
+
+export default DashboardFullscreenable;

src/pages/dashboards/dashboard-old.js

@@ -18,7 +18,6 @@
 import React, { useState, useEffect, useCallback, useRef, act } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { useParams } from "react-router-dom";
-import Fullscreenable from "react-fullscreenable";
 import classNames from "classnames";
 import "react-contexify/dist/ReactContexify.min.css";
 import EditWidget from "./widget/edit-widget/edit-widget";
@@ -29,6 +28,7 @@ import DashboardButtonGroup from "./grid/dashboard-button-group";
 import IconToggleButton from "../../common/buttons/icon-toggle-button";
 import WidgetContainer from "./widget/widget-container";
 import Widget from "./widget/widget-old";
+import useFullscreen from "../../utils/fullscreen.js";
 
 import { connectWebSocket, disconnect } from "../../store/websocketSlice";
 
@@ -615,4 +615,19 @@ const Dashboard = ({ isFullscreen, toggleFullscreen }) => {
   );
 };
 
-export default Fullscreenable()(Dashboard);
+//wrap into fullscreen
+const DashboardFullscreenable = () => {
+  const { fullscreenTargetRef, isFullscreen, toggleFullscreen } =
+    useFullscreen();
+
+  return (
+    <div ref={fullscreenTargetRef}>
+      <Dashboard
+        isFullscreen={isFullscreen}
+        toggleFullscreen={toggleFullscreen}
+      />
+    </div>
+  );
+};
+
+export default DashboardFullscreenable;

src/pages/dashboards/dashboard.jsx

@@ -18,7 +18,6 @@
 import React, { useState, useEffect, useCallback, useRef } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { useParams } from "react-router-dom";
-import Fullscreenable from "react-fullscreenable";
 import "react-contexify/dist/ReactContexify.min.css";
 import EditWidget from "./widget/edit-widget/edit-widget";
 import EditSignalMappingDialog from "./dialogs/edit-signal-mapping.jsx";
@@ -29,6 +28,7 @@ import IconToggleButton from "../../common/buttons/icon-toggle-button";
 import WidgetContainer from "./widget/widget-container";
 import Widget from "./widget/widget.jsx";
 import EditFilesDialog from "./dialogs/edit-files-dialog.jsx";
+import useFullscreen from "../../utils/fullscreen.js";
 
 import { disconnect } from "../../store/websocketSlice";
 import { useDashboardData } from "./hooks/use-dashboard-data.js";
@@ -609,4 +609,19 @@ const Dashboard = ({ isFullscreen, toggleFullscreen }) => {
   );
 };
 
-export default Fullscreenable()(Dashboard);
+//wrap into fullscreen
+const DashboardFullscreenable = () => {
+  const { fullscreenTargetRef, isFullscreen, toggleFullscreen } =
+    useFullscreen();
+
+  return (
+    <div ref={fullscreenTargetRef}>
+      <Dashboard
+        isFullscreen={isFullscreen}
+        toggleFullscreen={toggleFullscreen}
+      />
+    </div>
+  );
+};
+
+export default DashboardFullscreenable;

src/utils/fullscreen.js

@@ -0,0 +1,54 @@
+/**
+ * This file is part of VILLASweb.
+ *
+ * VILLASweb is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * VILLASweb is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
+ ******************************************************************************/
+
+import { useState, useEffect, useRef } from "react";
+
+// this is essentially a wrapper around standart Fullscreen API
+
+const useFullscreen = () => {
+  const fullscreenTargetRef = useRef(null);
+  const [isFullscreen, setIsFullscreen] = useState(false);
+
+  useEffect(() => {
+    const updateFullscreenState = () =>
+      setIsFullscreen(!!document.fullscreenElement);
+
+    document.addEventListener("fullscreenchange", updateFullscreenState);
+    document.addEventListener("webkitfullscreenchange", updateFullscreenState);
+
+    return () => {
+      document.removeEventListener("fullscreenchange", updateFullscreenState);
+      document.removeEventListener(
+        "webkitfullscreenchange",
+        updateFullscreenState
+      );
+    };
+  }, []);
+
+  const toggleFullscreen = () => {
+    if (isFullscreen) {
+      if (document.exitFullscreen) document.exitFullscreen();
+    } else {
+      if (fullscreenTargetRef.current.requestFullscreen)
+        fullscreenTargetRef.current.requestFullscreen();
+    }
+  };
+
+  return { fullscreenTargetRef, isFullscreen, toggleFullscreen };
+};
+
+export default useFullscreen;