From 9a9b778f04a5c8e3982aa986af36660020bad2a2 Mon Sep 17 00:00:00 2001 From: Mitchell McCaffrey Date: Sat, 24 Apr 2021 12:39:04 +1000 Subject: [PATCH] Remove map preview sending and fix initial player map load --- src/contexts/AssetsContext.js | 87 +++++++++++++++----------- src/helpers/KonvaBridge.js | 93 +++++++++++++--------------- src/network/NetworkedMapAndTokens.js | 5 -- 3 files changed, 96 insertions(+), 89 deletions(-) diff --git a/src/contexts/AssetsContext.js b/src/contexts/AssetsContext.js index 8e2c2da..f4791aa 100644 --- a/src/contexts/AssetsContext.js +++ b/src/contexts/AssetsContext.js @@ -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; } diff --git a/src/helpers/KonvaBridge.js b/src/helpers/KonvaBridge.js index 6aeecb5..935627f 100644 --- a/src/helpers/KonvaBridge.js +++ b/src/helpers/KonvaBridge.js @@ -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 }) { - - + - - - - - - + + + + + - - - + + - - - - - - {children} - - - - - - - - - - - - - - - - + {children} + + + + + + + + + + + + + + + diff --git a/src/network/NetworkedMapAndTokens.js b/src/network/NetworkedMapAndTokens.js index f0b726f..13ec0a1 100644 --- a/src/network/NetworkedMapAndTokens.js +++ b/src/network/NetworkedMapAndTokens.js @@ -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 };