From: Daniel Karbach <daniel.karbach@localhorst.tv>
Date: Mon, 2 Sep 2024 12:49:10 +0000 (+0200)
Subject: repair OSD ref
X-Git-Url: https://git.localhorst.tv/?a=commitdiff_plain;h=f88b5574ec90653f571275bf398587b00618faf3;p=alttp.git

repair OSD ref
---

diff --git a/resources/js/components/map/OpenSeadragon.js b/resources/js/components/map/OpenSeadragon.js
index 36ddec1..55e9638 100644
--- a/resources/js/components/map/OpenSeadragon.js
+++ b/resources/js/components/map/OpenSeadragon.js
@@ -9,7 +9,7 @@ export const Context = React.createContext({});
 
 export const useOpenSeadragon = () => React.useContext(Context);
 
-export const Provider = React.forwardRef(({ children }, ref) => {
+export const Provider = ({ children, containerRef }) => {
 	const { activeMap } = useParams();
 	const navigate = useNavigate();
 	const [searchParams, setSearchParams] = useSearchParams();
@@ -51,10 +51,10 @@ export const Provider = React.forwardRef(({ children }, ref) => {
 	}, [searchParams, viewer]);
 
 	React.useEffect(() => {
-		if (!ref.current) return;
+		if (!containerRef.current) return;
 
 		const v = OpenSeadragon({
-			element: ref.current,
+			element: containerRef.current,
 			preserveViewport: true,
 			sequenceMode: true,
 			showNavigator: true,
@@ -120,7 +120,7 @@ export const Provider = React.forwardRef(({ children }, ref) => {
 		return () => {
 			v.destroy();
 		};
-	}, [ref.current]);
+	}, [containerRef.current]);
 
 	React.useEffect(() => {
 		if (!viewer) return;
@@ -159,12 +159,13 @@ export const Provider = React.forwardRef(({ children }, ref) => {
 	return <Context.Provider value={{ activeMap, pins, setActiveMap, storePosition, viewer }}>
 		{children}
 	</Context.Provider>;
-});
+};
 
 Provider.displayName = 'OpenSeadragonProvider';
 
 Provider.propTypes = {
 	children: PropTypes.node,
+	containerRef: PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
 };
 
 export default Provider;
diff --git a/resources/js/pages/Map.js b/resources/js/pages/Map.js
index cd3d96d..1ffd45a 100644
--- a/resources/js/pages/Map.js
+++ b/resources/js/pages/Map.js
@@ -24,7 +24,7 @@ export const Component = () => {
 			<meta name="description" content={t('map.description')} />
 		</Helmet>
 		<CanonicalLinks base={`/map/${activeMap}`} />
-		<OpenSeadragon ref={container}>
+		<OpenSeadragon containerRef={container}>
 			<div className="d-flex align-items-start justify-content-between">
 				<h1>{t('map.heading')} - {t(`map.${activeMap}Long`)}</h1>
 				<Buttons setUWOverlay={setUWOverlay} uwOverlay={uwOverlay} />