59 lines
1.9 KiB
JavaScript
59 lines
1.9 KiB
JavaScript
import { useEffect, useState } from "react";
|
|
import useImage from "use-image";
|
|
|
|
import useDataSource from "./useDataSource";
|
|
|
|
import { mapSources as defaultMapSources } from "../maps";
|
|
|
|
function useMapImage(map) {
|
|
const [mapSourceMap, setMapSourceMap] = useState({});
|
|
// Update source map data when either the map or map quality changes
|
|
useEffect(() => {
|
|
function updateMapSource() {
|
|
if (map && map.type === "file" && map.resolutions) {
|
|
// If quality is set and the quality is available
|
|
if (map.quality !== "original" && map.resolutions[map.quality]) {
|
|
setMapSourceMap({
|
|
...map.resolutions[map.quality],
|
|
id: map.id,
|
|
quality: map.quality,
|
|
});
|
|
} else if (!map.file) {
|
|
// If no file fallback to the highest resolution
|
|
const resolutionArray = Object.keys(map.resolutions);
|
|
setMapSourceMap({
|
|
...map.resolutions[resolutionArray[resolutionArray.length - 1]],
|
|
id: map.id,
|
|
});
|
|
} else {
|
|
setMapSourceMap(map);
|
|
}
|
|
} else {
|
|
setMapSourceMap(map);
|
|
}
|
|
}
|
|
if (map && map.id !== mapSourceMap.id) {
|
|
updateMapSource();
|
|
} else if (map && map.type === "file") {
|
|
if (map.file && map.quality !== mapSourceMap.quality) {
|
|
updateMapSource();
|
|
}
|
|
}
|
|
}, [map, mapSourceMap]);
|
|
|
|
const mapSource = useDataSource(mapSourceMap, defaultMapSources);
|
|
const [mapSourceImage, mapSourceImageStatus] = useImage(mapSource);
|
|
|
|
// Create a map source that only updates when the image is fully loaded
|
|
const [loadedMapSourceImage, setLoadedMapSourceImage] = useState();
|
|
useEffect(() => {
|
|
if (mapSourceImageStatus === "loaded") {
|
|
setLoadedMapSourceImage(mapSourceImage);
|
|
}
|
|
}, [mapSourceImage, mapSourceImageStatus]);
|
|
|
|
return [loadedMapSourceImage, mapSourceImageStatus];
|
|
}
|
|
|
|
export default useMapImage;
|