Fix for fullscreen not working (#1225)

trelliscope · Jul 3, 2024 · 3676d8d · 3676d8d
1 parent 60ab13a
commit 3676d8d
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 21 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useDispatch } from 'react-redux';
 import { Box } from '@mui/material';
 import { SnackbarProvider } from 'notistack';
@@ -71,7 +71,6 @@ const App: React.FC<AppProps> = ({ client, config, id, singlePageApp, options, f
 
   const dispatch = useDispatch();
   const { data: configObj } = useConfig();
-  const appRef = useRef() as React.RefObject<HTMLDivElement>;
 
   useEffect(() => {
     dispatch(setAppID(id));
@@ -119,10 +118,9 @@ const App: React.FC<AppProps> = ({ client, config, id, singlePageApp, options, f
                   ? configObj.theme.palette?.secondary.main
                   : theme?.palette?.secondary?.main || 'initial',
               }}
-              ref={appRef}
             >
               <ErrorWrapper>
-                <Header appRef={appRef} />
+                <Header />
               </ErrorWrapper>
               <ErrorWrapper>
                 <Sidebar />

diff --git a/src/components/FullscreenButton/FullscreenButton.tsx b/src/components/FullscreenButton/FullscreenButton.tsx
@@ -13,11 +13,7 @@ import { useConfig } from '../../slices/configAPI';
 import { BACK } from '../../constants';
 // import styles from './FullscreenButton.module.scss';
 
-interface FullscreenButtonProps {
-  appRef: React.RefObject<HTMLDivElement>;
-}
-
-const FullscreenButton: React.FC<FullscreenButtonProps> = ({ appRef }) => {
+const FullscreenButton = () => {
   const dispatch = useDispatch();
   const fullscreen = useSelector(fullscreenSelector);
   const { data: configObj } = useConfig();
@@ -30,10 +26,16 @@ const FullscreenButton: React.FC<FullscreenButtonProps> = ({ appRef }) => {
   const mainEl = document.getElementsByClassName('trelliscope-not-spa')[0] as HTMLElement;
   const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
 
-  const toggleFullScreen = () => {
+  const embeddedFunc = () => {
+    if (!configObj?.fullScreenCallback) return;
+    configObj?.fullScreenCallback();
+    dispatch(setFullscreen(!fullscreen));
+  };
+
+  const toggleFullScreenNative = () => {
     if (isSafari) {
       if (!document.webkitFullscreenElement) {
-        appRef.current?.webkitRequestFullscreen();
+        document.body.webkitRequestFullscreen();
         if (mainEl) {
           addClass(mainEl, 'trelliscope-spa');
           addClass(mainEl, 'trelliscope-fullscreen');
@@ -51,7 +53,7 @@ const FullscreenButton: React.FC<FullscreenButtonProps> = ({ appRef }) => {
       return;
     }
     if (!document.fullscreenElement) {
-      appRef.current?.requestFullscreen();
+      document.body.requestFullscreen();
       if (mainEl) {
         addClass(mainEl, 'trelliscope-spa');
         addClass(mainEl, 'trelliscope-fullscreen');
@@ -106,7 +108,7 @@ const FullscreenButton: React.FC<FullscreenButtonProps> = ({ appRef }) => {
               : theme.palette.primary.contrastText,
         }}
         data-testid="fullscreen-button"
-        onClick={toggleFullScreen}
+        onClick={() => (configObj?.fullScreenCallback ? embeddedFunc() : toggleFullScreenNative())}
         color="inherit"
       >
         {!fullscreen ? <FontAwesomeIcon icon={faExpand} size="sm" /> : <FontAwesomeIcon icon={faCompress} size="sm" />}

diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
@@ -18,11 +18,7 @@ import PanelPicker from '../PanelPicker';
 import ErrorWrapper from '../ErrorWrapper';
 import Tour from '../Tour';
 
-interface HeaderProps {
-  appRef: React.RefObject<HTMLDivElement>;
-}
-
-const Header: React.FC<HeaderProps> = ({ appRef }) => {
+const Header = () => {
   const { data: displayList = [] } = useDisplayList();
   const [hasInputs, setHasInputs] = useState(false);
   const theme = useTheme();
@@ -146,14 +142,14 @@ const Header: React.FC<HeaderProps> = ({ appRef }) => {
                     id="fullscreen-control"
                     className={styles.headerTrelliscopeFullscreen}
                   >
-                    <FullscreenButton appRef={appRef} />
+                    <FullscreenButton />
                   </Box>
                 </Box>
               ) : (
                 <Box className={styles.headerTrelliscope}>
                   <HelpInfo />
                   <Box id="fullscreen-control" className={styles.headerTrelliscopeFullscreen}>
-                    <FullscreenButton appRef={appRef} />
+                    <FullscreenButton />
                   </Box>
                 </Box>
               )}

diff --git a/src/jsApi.ts b/src/jsApi.ts
@@ -629,14 +629,17 @@ class TrelliscopeClass implements ITrelliscopeAppSpec {
     config1,
     exportEnabled,
     theme,
+    fullScreenCallback,
   }: {
     config1?: string;
     exportEnabled?: boolean;
     theme?: ITheme;
+    fullScreenCallback?: () => void;
   }): ITrelliscopeAppSpec {
     this.config.config1 = config1;
     this.config.exportEnabled = exportEnabled;
     this.config.theme = theme;
+    this.config.fullScreenCallback = fullScreenCallback;
     return this;
   }
 

diff --git a/src/types/configs.d.ts b/src/types/configs.d.ts
@@ -468,6 +468,7 @@ interface IConfig {
   theme?: ITheme;
   config1?: string;
   exportEnabled?: boolean;
+  fullScreenCallback?: () => void;
 }
 
 interface ITheme {
@@ -543,5 +544,10 @@ interface ITrelliscopeAppSpec {
     func: PanelFunction;
   }): ITrelliscopeAppSpec;
   view({ width: number, height: number }): HTMLElement;
-  setConfig(arg0: { config1?: string; exportEnabled?: boolean; theme?: ITheme }): ITrelliscopeAppSpec;
+  setConfig(arg0: {
+    config1?: string;
+    exportEnabled?: boolean;
+    theme?: ITheme;
+    fullScreenCallback?: () => void;
+  }): ITrelliscopeAppSpec;
 }