Refacto of full screen management

frontend/package.json

@@ -68,7 +68,6 @@
     "react-burger-menu": "^3.0.9",
     "react-country-flag": "^3.0.2",
     "react-dom": "^18.2.0",
-    "react-easyfullscreen": "^1.1.1",
     "react-infinite-scroll-component": "6.1.0",
     "react-inlinesvg": "^4.0.4",
     "react-intl": "^6.2.1",
@@ -79,6 +78,7 @@
     "react-media-hook": "^0.5.0",
     "react-select": "^5.7.2",
     "react-slick": "^0.29.0",
+    "screenfull": "^6.0.2",
     "slick-carousel": "^1.8.1",
     "store": "^2.0.12",
     "striptags": "^3.2.0",
@@ -107,6 +107,7 @@
     "@types/react-leaflet-markercluster": "^2.0.0",
     "@types/react-loader": "2.4.5",
     "@types/react-slick": "^0.23.10",
+    "@types/screenfull": "^4.1.0",
     "@types/store": "^2.0.2",
     "@types/styled-components": "5.1.14",
     "eslint": "^8.57.0",

frontend/src/components/Modal/Modal.tsx

@@ -1,12 +1,10 @@
-import React, { ReactElement, useCallback, useEffect, useState } from 'react';
-import ReactFullscreen from 'react-easyfullscreen';
+import { ReactElement, useRef, useState } from 'react';
 
 import { ArrowLeft } from 'components/Icons/ArrowLeft';
 import { MapButton } from 'components/Map/components/MapButton';
-import ConditionallyRender from 'components/ConditionallyRender';
-import useHasMounted from 'hooks/useHasMounted';
 import { useIntl } from 'react-intl';
 import { cn } from 'services/utils/cn';
+import useFullscreen from 'hooks/useFullscreen';
 
 type Props = {
   className?: string;
@@ -19,79 +17,32 @@ type Props = {
   }) => ReactElement;
 };
 
-const Inner: React.FC<Props> = ({ className, children }) => {
-  const [isFullscreen, setIsFullscreen] = useState<boolean>(false);
+export const Modal: React.FC<Props> = ({ className, children }) => {
   const intl = useIntl();
 
-  const handler = useCallback(() => setIsFullscreen(!isFullscreen), [isFullscreen]);
+  const ref = useRef(null);
+  const [show, setShow] = useState(false);
+  const isFullscreen = useFullscreen(ref, show, { onClose: () => setShow(false) });
 
-  const mounted = useHasMounted();
-
-  const iOSiPadOS = useHasMounted(
-    typeof navigator !== 'undefined' &&
-      (/^iP/.test(navigator.platform) ||
-        (/^Mac/.test(navigator.platform) && navigator.maxTouchPoints > 4)),
-  );
-
-  useEffect(() => {
-    if (!iOSiPadOS) {
-      document.addEventListener('fullscreenchange', handler);
-    }
-
-    return () => {
-      if (!iOSiPadOS) {
-        document.removeEventListener('fullscreenchange', handler);
-      }
-    };
-  }, [handler, iOSiPadOS]);
-
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  const noop = () => {};
-
-  // iOS doesn't support fullscreen API. We must disable the fullscreen mode in IOS to prevent javascript error in react-easyfullscreen
-  if (iOSiPadOS || !mounted) {
-    return typeof children === 'function'
-      ? children({ isFullscreen: false, toggleFullscreen: noop })
-      : children;
-  }
-
-  return (
-    <ReactFullscreen>
-      {({ ref, onToggle }) => {
-        return (
-          <div
-            // @ts-expect-error Wrong type in the lib
-            ref={ref}
-            className={cn('relative bg-dark', className)}
-          >
-            {isFullscreen && (
-              <MapButton
-                aria-label={intl.formatMessage({ id: 'details.closeFullScreen' })}
-                icon={<ArrowLeft size={24} />}
-                onClick={onToggle}
-              />
-            )}
-            <div className="flex items-center justify-center size-full">
-              <div className="size-full">
-                {typeof children === 'function'
-                  ? children({
-                      isFullscreen,
-                      toggleFullscreen: onToggle,
-                    })
-                  : children}
-              </div>
-            </div>
-          </div>
-        );
-      }}
-    </ReactFullscreen>
-  );
-};
-
-export const Modal: React.FC<Props> = props => {
   return (
-    <ConditionallyRender client>
-      <Inner {...props} />
-    </ConditionallyRender>
+    <div ref={ref} className={cn('relative bg-dark', className)}>
+      {isFullscreen && (
+        <MapButton
+          aria-label={intl.formatMessage({ id: 'details.closeFullScreen' })}
+          icon={<ArrowLeft size={24} />}
+          onClick={() => setShow(boolean => !boolean)}
+        />
+      )}
+      <div className="flex items-center justify-center size-full">
+        <div className="size-full">
+          {typeof children === 'function'
+            ? children({
+                isFullscreen: show,
+                toggleFullscreen: () => setShow(boolean => !boolean),
+              })
+            : children}
+        </div>
+      </div>
+    </div>
   );
 };

frontend/src/components/pages/details/components/DetailsCard/DetailsCard.tsx

@@ -14,6 +14,7 @@ import { ViewPoint } from 'modules/viewPoint/interface';
 import { FileFromAttachment, ImageFromAttachment } from 'modules/interface';
 import { ViewPoint as ViewPointIcon } from 'components/Icons/ViewPoint';
 import { Paperclip } from 'components/Icons/Paperclip';
+import ImageWithLegend from 'components/ImageWithLegend';
 import { useDetailsCard } from './useDetailsCard';
 import { DetailsViewPoints } from '../DetailsViewPoints';
 import { DetailsFiles } from '../DetailsFiles';
@@ -143,27 +144,29 @@ export const DetailsCard: React.FC<DetailsCardProps> = ({
         <div className="flex shrink-0 h-40 desktop:float-left desktop:min-h-55 desktop:h-full desktop:w-2/5 pr-2 desktop:pr-6">
           <div className="w-full">
             <Modal className="h-full">
-              {({ isFullscreen, toggleFullscreen }) => (
-                <>
-                  {type === 'TOURISTIC_CONTENT' &&
-                    redirectionUrl &&
-                    images.length > 0 &&
-                    hasNavigator && (
+              {({ isFullscreen, toggleFullscreen }) => {
+                return (
+                  <>
+                    {images.length > 1 && hasNavigator ? (
                       <DetailsCoverCarousel
                         images={isFullscreen ? images : thumbnails}
                         classNameImage={cn('object-center', isFullscreen && 'object-contain')}
-                        redirect={redirectionUrl}
+                        {...(redirectionUrl
+                          ? { redirect: redirectionUrl }
+                          : { onClickImage: toggleFullscreen })}
+                      />
+                    ) : (
+                      <ImageWithLegend
+                        image={isFullscreen ? images[0] : thumbnails[0]}
+                        classNameImage={cn('object-center', isFullscreen && 'object-contain')}
+                        {...(redirectionUrl
+                          ? { redirect: redirectionUrl }
+                          : { onClick: toggleFullscreen })}
                       />
                     )}
-                  {type !== 'TOURISTIC_CONTENT' && images.length > 0 && hasNavigator && (
-                    <DetailsCoverCarousel
-                      images={isFullscreen ? images : thumbnails}
-                      classNameImage={cn('object-center', isFullscreen && 'object-contain')}
-                      onClickImage={toggleFullscreen}
-                    />
-                  )}
-                </>
-              )}
+                  </>
+                );
+              }}
             </Modal>
             <CardIcon iconUri={iconUri} iconName={iconName} type={type} />
           </div>
@@ -189,7 +192,7 @@ export const DetailsCard: React.FC<DetailsCardProps> = ({
                     titleTag="h3"
                     asAccordion
                   />
-                  {hasNavigator && (
+                  {hasViewPoints && (
                     <DetailsViewPoints
                       className="scroll-mt-20 desktop:scroll-mt-40"
                       id={viewPointsId}