test for fullscreen api

barbalex · Jun 14, 2024 · 94425b3 · 94425b3
1 parent 5bc4bb2
commit 94425b3
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 5 deletions.
diff --git a/src/components/Projekte/Karte/FullscreenControl.jsx b/src/components/Projekte/Karte/FullscreenControl.jsx
@@ -1,8 +1,10 @@
-import React, { useCallback, useEffect, useState } from 'react'
+import React, { useCallback, useEffect, useState, useContext } from 'react'
 import styled from '@emotion/styled'
 import { FaExpandArrowsAlt, FaCompressArrowsAlt } from 'react-icons/fa'
 import screenfull from 'screenfull'
 
+import storeContext from '../../../storeContext.js'
+
 const Button = styled.button`
   background-color: white;
   width: 34px;
@@ -20,7 +22,27 @@ const Button = styled.button`
   margin-top: 7px;
 `
 
-const FullscreenControl = ({ mapRef }) => {
+export const FullscreenControl = ({ mapRef }) => {
+  // need to test if screenfull (i.e. the fullscreen api) is supported - iPhones don't support it
+  // https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API/Guide
+  const store = useContext(storeContext)
+  const { enqueNotification } = store
+
+  if (!screenfull.isEnabled) {
+    enqueNotification({
+      message: `Ihr Browser unterstützt den Vollbildmodus nicht. Bitte verwenden Sie einen anderen Browser. Hinweis: iPhones unterstützen den Vollbildmodus grundsätzlich nicht - unabhängig vom verwendeten Browser.`,
+      options: {
+        variant: 'warning',
+        autoHideDuration: 20000,
+      },
+    })
+    return null
+  }
+
+  return <FullscreenController mapRef={mapRef} />
+}
+
+const FullscreenController = ({ mapRef }) => {
   const [isFullscreen, setIsFullscreen] = useState(false)
   const onFullscreenChange = useCallback(
     () => setIsFullscreen(screenfull.isFullscreen),
@@ -47,4 +69,3 @@ const FullscreenControl = ({ mapRef }) => {
   )
 }
 
-export default FullscreenControl
diff --git a/src/components/Projekte/Karte/OwnControls.jsx b/src/components/Projekte/Karte/OwnControls.jsx
@@ -4,7 +4,7 @@ import { useResizeDetector } from 'react-resize-detector'
 import { useDebouncedCallback } from 'use-debounce'
 
 import LayersControl from './LayersControl/index.jsx'
-import FullscreenControl from './FullscreenControl.jsx'
+import { FullscreenControl } from './FullscreenControl.jsx'
 import PngControl from './PngControl.jsx'
 
 const Container = styled.div`

diff --git a/src/components/Projekte/Karte/ScaleControl.jsx b/src/components/Projekte/Karte/ScaleControl.jsx
@@ -14,7 +14,7 @@ const options = {
   ratio: true, // Flag: whether to display ratio prefix.
   ratioPrefix: '1:', // Ratio prefix text.
   ratioCustomItemText: '1: Massstab tippen...', // Custom ratio text.
-  customScaleTitle: 'Задайте свой масштаб и нажмите Enter', // Custom scale title text.
+  customScaleTitle: 'Massstab wählen', // Custom scale title text.
   recalcOnPositionChange: false, // Flag: whether to recalculate scale on map position change.
   recalcOnZoomChange: false, // Flag: whether to recalculate scale on map zoom change.
   scales: [500, 1000, 2000, 5000, 10000, 25000, 50000, 100000, 200000, 500000], // Array of selectable scales