Atlas48/grungnet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Remove map preview sending and fix initial player map load

Browse Source
This commit is contained in:
Mitchell McCaffrey 2021-04-24 12:39:04 +10:00
parent 245a9cee43
commit 9a9b778f04
3 changed files with 96 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

87
src/contexts/AssetsContext.js
View File

@ -152,9 +152,15 @@ export function useAssetURL(assetId, type, defaultSources, unknownSource) {
}
const { getAsset } = useAssets();
const { database, databaseStatus } = useDatabase();
useEffect(() => {
if (!assetId || type !== "file") {
if (
!assetId ||
type !== "file" ||
!database ||
databaseStatus === "loading"
) {
return;
}
@ -163,16 +169,16 @@ export function useAssetURL(assetId, type, defaultSources, unknownSource) {
if (asset) {
setAssetURLs((prevURLs) => {
if (assetId in prevURLs) {
// Check if the asset url is already added
// Check if the asset url is already added and increase references
return {
...prevURLs,
[assetId]: {
...prevURLs[assetId],
// Increase references
references: prevURLs[assetId].references + 1,
},
};
} else {
// Create url if the asset doesn't have a url
const url = URL.createObjectURL(
new Blob([asset.file], { type: asset.mime })
);
@ -187,7 +193,38 @@ export function useAssetURL(assetId, type, defaultSources, unknownSource) {
updateAssetURL();
// Update the url when the asset is added to the db after the hook is used
function handleAssetChanges(changes) {
for (let change of changes) {
const id = change.key;
if (
change.table === "assets" &&
id === assetId &&
(change.type === 1 || change.type === 2)
) {
const asset = change.obj;
setAssetURLs((prevURLs) => {
if (!(assetId in prevURLs)) {
const url = URL.createObjectURL(
new Blob([asset.file], { type: asset.mime })
);
return {
...prevURLs,
[assetId]: { url, id: assetId, references: 1 },
};
} else {
return prevURLs;
}
});
}
}
}
database.on("changes", handleAssetChanges);
return () => {
database.on("changes").unsubscribe(handleAssetChanges);
// Decrease references
setAssetURLs((prevURLs) => {
if (assetId in prevURLs) {
@ -203,7 +240,7 @@ export function useAssetURL(assetId, type, defaultSources, unknownSource) {
}
});
};
}, [assetId, setAssetURLs, getAsset, type]);
}, [assetId, setAssetURLs, getAsset, type, database, databaseStatus]);
if (!assetId) {
return unknownSource;
@ -220,8 +257,6 @@ export function useAssetURL(assetId, type, defaultSources, unknownSource) {
return unknownSource;
}
const dataResolutions = ["ultra", "high", "medium", "low"];
/**
* @typedef FileData
* @property {string} file
@ -251,53 +286,35 @@ export function useDataURL(
unknownSource,
thumbnail = false
) {
const { database } = useDatabase();
const [assetId, setAssetId] = useState();
useEffect(() => {
if (!data) {
return;
}
async function loastAssetId() {
async function loadAssetId() {
if (data.type === "default") {
setAssetId(data.key);
} else {
if (thumbnail) {
setAssetId(data.thumbnail);
} else if (data.resolutions) {
const fileKeys = await database
.table("assets")
.where("id")
.equals(data.file)
.primaryKeys();
const fileExists = fileKeys.length > 0;
// Check if a resolution is specified
if (data.quality && data.resolutions[data.quality]) {
setAssetId(data.resolutions[data.quality]);
}
// If no file available fallback to the highest resolution
else if (!fileExists) {
for (let res of dataResolutions) {
if (res in data.resolutions) {
setAssetId(data.resolutions[res]);
break;
}
}
} else {
setAssetId(data.file);
}
} else if (data.resolutions && data.quality !== "original") {
setAssetId(data.resolutions[data.quality]);
} else {
setAssetId(data.file);
}
}
}
loastAssetId();
}, [data, thumbnail, database]);
loadAssetId();
}, [data, thumbnail]);
const type = data?.type || "default";
const assetURL = useAssetURL(assetId, type, defaultSources, unknownSource);
const assetURL = useAssetURL(
assetId,
data?.type,
defaultSources,
unknownSource
);
return assetURL;
}

93
src/helpers/KonvaBridge.js
View File

@ -22,10 +22,10 @@ import { MapStageProvider, useMapStage } from "../contexts/MapStageContext";
import AuthContext, { useAuth } from "../contexts/AuthContext";
import SettingsContext, { useSettings } from "../contexts/SettingsContext";
import KeyboardContext from "../contexts/KeyboardContext";
import TokenDataContext, { useTokenData } from "../contexts/TokenDataContext";
import AssetsContext, {
AssetURLsStateContext,
AssetURLsUpdaterContext,
useAssets,
} from "../contexts/AssetsContext";
import {
useGrid,
@ -52,8 +52,7 @@ function KonvaBridge({ stageRender, children }) {
const mapStageRef = useMapStage();
const auth = useAuth();
const settings = useSettings();
const tokenData = useTokenData();
const assets = useContext(AssetsContext);
const assets = useAssets();
const assetURLs = useContext(AssetURLsStateContext);
const setAssetURLs = useContext(AssetURLsUpdaterContext);
const keyboardValue = useContext(KeyboardContext);
@ -86,59 +85,55 @@ function KonvaBridge({ stageRender, children }) {
<AssetsContext.Provider value={assets}>
<AssetURLsStateContext.Provider value={assetURLs}>
<AssetURLsUpdaterContext.Provider value={setAssetURLs}>
<TokenDataContext.Provider value={tokenData}>
<InteractionEmitterContext.Provider
value={interactionEmitter}
<InteractionEmitterContext.Provider
value={interactionEmitter}
>
<SetPreventMapInteractionContext.Provider
value={setPreventMapInteraction}
>
<SetPreventMapInteractionContext.Provider
value={setPreventMapInteraction}
>
<StageWidthContext.Provider value={stageWidth}>
<StageHeightContext.Provider value={stageHeight}>
<MapWidthContext.Provider value={mapWidth}>
<MapHeightContext.Provider value={mapHeight}>
<StageScaleContext.Provider
value={stageScale}
<StageWidthContext.Provider value={stageWidth}>
<StageHeightContext.Provider value={stageHeight}>
<MapWidthContext.Provider value={mapWidth}>
<MapHeightContext.Provider value={mapHeight}>
<StageScaleContext.Provider value={stageScale}>
<DebouncedStageScaleContext.Provider
value={debouncedStageScale}
>
<DebouncedStageScaleContext.Provider
value={debouncedStageScale}
>
<GridContext.Provider value={grid}>
<GridPixelSizeContext.Provider
value={gridPixelSize}
<GridContext.Provider value={grid}>
<GridPixelSizeContext.Provider
value={gridPixelSize}
>
<GridCellPixelSizeContext.Provider
value={gridCellPixelSize}
>
<GridCellPixelSizeContext.Provider
value={gridCellPixelSize}
<GridCellNormalizedSizeContext.Provider
value={gridCellNormalizedSize}
>
<GridCellNormalizedSizeContext.Provider
value={gridCellNormalizedSize}
<GridOffsetContext.Provider
value={gridOffset}
>
<GridOffsetContext.Provider
value={gridOffset}
<GridStrokeWidthContext.Provider
value={gridStrokeWidth}
>
<GridStrokeWidthContext.Provider
value={gridStrokeWidth}
<GridCellPixelOffsetContext.Provider
value={gridCellPixelOffset}
>
<GridCellPixelOffsetContext.Provider
value={gridCellPixelOffset}
>
{children}
</GridCellPixelOffsetContext.Provider>
</GridStrokeWidthContext.Provider>
</GridOffsetContext.Provider>
</GridCellNormalizedSizeContext.Provider>
</GridCellPixelSizeContext.Provider>
</GridPixelSizeContext.Provider>
</GridContext.Provider>
</DebouncedStageScaleContext.Provider>
</StageScaleContext.Provider>
</MapHeightContext.Provider>
</MapWidthContext.Provider>
</StageHeightContext.Provider>
</StageWidthContext.Provider>
</SetPreventMapInteractionContext.Provider>
</InteractionEmitterContext.Provider>
</TokenDataContext.Provider>
{children}
</GridCellPixelOffsetContext.Provider>
</GridStrokeWidthContext.Provider>
</GridOffsetContext.Provider>
</GridCellNormalizedSizeContext.Provider>
</GridCellPixelSizeContext.Provider>
</GridPixelSizeContext.Provider>
</GridContext.Provider>
</DebouncedStageScaleContext.Provider>
</StageScaleContext.Provider>
</MapHeightContext.Provider>
</MapWidthContext.Provider>
</StageHeightContext.Provider>
</StageWidthContext.Provider>
</SetPreventMapInteractionContext.Provider>
</InteractionEmitterContext.Provider>
</AssetURLsUpdaterContext.Provider>
</AssetURLsStateContext.Provider>
</AssetsContext.Provider>

5
src/network/NetworkedMapAndTokens.js
View File

@ -9,7 +9,6 @@ import { useParty } from "../contexts/PartyContext";
import { useAssets } from "../contexts/AssetsContext";
import { omit } from "../helpers/shared";
import { getMapPreviewAsset } from "../helpers/map";
import useDebounce from "../hooks/useDebounce";
import useNetworkedState from "../hooks/useNetworkedState";
@ -72,10 +71,6 @@ function NetworkedMapAndTokens({ session }) {
const assets = {};
const { owner } = map;
if (map.type === "file") {
const previewId = getMapPreviewAsset(map);
if (previewId) {
assets[previewId] = { id: previewId, owner };
}
const qualityId = map.resolutions[map.quality];
if (qualityId) {
assets[qualityId] = { id: qualityId, owner };