diff --git a/src/components/FeaturePanel/Climbing/ClimbingView.tsx b/src/components/FeaturePanel/Climbing/ClimbingView.tsx index a1057760..1f0e1089 100644 --- a/src/components/FeaturePanel/Climbing/ClimbingView.tsx +++ b/src/components/FeaturePanel/Climbing/ClimbingView.tsx @@ -3,6 +3,7 @@ import styled from '@emotion/styled'; import SplitPane from 'react-split-pane'; import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward'; import { + Button, CircularProgress, Fab, IconButton, @@ -32,6 +33,7 @@ import EditIcon from '@mui/icons-material/Edit'; import ArrowForwardIcon from '@mui/icons-material/ArrowForward'; import { useGetCragViewLayout } from './utils/useCragViewLayout'; import { RouteFloatingMenu } from './Editor/RouteFloatingMenu'; +import { useFullScreen } from './utils/useFullscreen'; export const DEFAULT_CRAG_VIEW_LAYOUT = 'horizontal'; @@ -254,6 +256,7 @@ const FabMapSwitcher = ({ isMapVisible, setIsMapVisible }) => ( ); export const ClimbingView = ({ photo }: { photo?: string }) => { + const viewRef = React.useRef(null); const { imageSize, routeSelectedIndex, @@ -283,6 +286,9 @@ export const ClimbingView = ({ photo }: { photo?: string }) => { const machine = getMachine(); const cragViewLayout = useGetCragViewLayout(); const { userSettings } = useUserSettingsContext(); + const { enterFullscreen, exitFullscreen, isFullScreenActive } = useFullScreen( + viewRef.current, + ); useEffect(() => { if (isEditMode && machine.currentStateName === 'routeSelected') { @@ -420,7 +426,7 @@ export const ClimbingView = ({ photo }: { photo?: string }) => { }; return ( - + {(showArrowOnTop || showArrowOnBottom) && ( @@ -514,6 +520,11 @@ export const ClimbingView = ({ photo }: { photo?: string }) => { + ) : ( diff --git a/src/components/FeaturePanel/Climbing/utils/useFullscreen.tsx b/src/components/FeaturePanel/Climbing/utils/useFullscreen.tsx new file mode 100644 index 00000000..9cb63d96 --- /dev/null +++ b/src/components/FeaturePanel/Climbing/utils/useFullscreen.tsx @@ -0,0 +1,29 @@ +import { useState } from 'react'; + +export const useFullScreen = (elem: HTMLDivElement, options?: any) => { + const [isFullScreenActive, setIsFullScreenActive] = useState(false); + const enterFullscreen = () => { + setIsFullScreenActive(true); + return elem[ + [ + 'requestFullscreen', + 'mozRequestFullScreen', + 'msRequestFullscreen', + 'webkitRequestFullscreen', + ].find((prop) => typeof elem[prop] === 'function') + ]?.(options); + }; + + const exitFullscreen = () => { + setIsFullScreenActive(false); + return document[ + [ + 'exitFullscreen', + 'mozExitFullscreen', + 'msExitFullscreen', + 'webkitExitFullscreen', + ].find((prop) => typeof document[prop] === 'function') + ]?.(); + }; + return { enterFullscreen, exitFullscreen, isFullScreenActive }; +};