From 71edf5c5c5c16113613af6374483751c1fce66a2 Mon Sep 17 00:00:00 2001 From: Mitchell McCaffrey Date: Thu, 29 Apr 2021 15:44:57 +1000 Subject: [PATCH] Add thumbnail sending to assets for map grid --- src/components/map/MapGrid.js | 7 ++++++- src/contexts/AssetsContext.js | 18 +++++++++++++----- src/contexts/MapDataContext.js | 14 ++------------ src/network/Connection.js | 17 ++++------------- src/network/NetworkedMapAndTokens.js | 21 +++++++++++---------- src/workers/DatabaseWorker.js | 9 ++------- 6 files changed, 38 insertions(+), 48 deletions(-) diff --git a/src/components/map/MapGrid.js b/src/components/map/MapGrid.js index 9fd2613..be5e9ba 100644 --- a/src/components/map/MapGrid.js +++ b/src/components/map/MapGrid.js @@ -11,7 +11,12 @@ import Grid from "../Grid"; function MapGrid({ map }) { let mapSourceMap = map; - const mapURL = useDataURL(mapSourceMap, defaultMapSources); + const mapURL = useDataURL( + mapSourceMap, + defaultMapSources, + undefined, + map.type === "file" + ); const [mapImage, mapLoadingStatus] = useImage(mapURL); const [isImageLight, setIsImageLight] = useState(true); diff --git a/src/contexts/AssetsContext.js b/src/contexts/AssetsContext.js index f4791aa..e522a7d 100644 --- a/src/contexts/AssetsContext.js +++ b/src/contexts/AssetsContext.js @@ -1,5 +1,6 @@ import React, { useState, useContext, useCallback, useEffect } from "react"; -import { decode } from "@msgpack/msgpack"; +import * as Comlink from "comlink"; +import { encode } from "@msgpack/msgpack"; import { useDatabase } from "./DatabaseContext"; @@ -48,10 +49,9 @@ export function AssetsProvider({ children }) { const getAsset = useCallback( async (assetId) => { - const packed = await worker.loadData("assets", assetId); - return decode(packed); + return await database.table("assets").get(assetId); }, - [worker] + [database] ); const addAssets = useCallback( @@ -63,7 +63,15 @@ export function AssetsProvider({ children }) { const putAsset = useCallback( async (asset) => { - return database.table("assets").put(asset); + // Attempt to use worker to put map to avoid UI lockup + const packedAsset = encode(asset); + const success = await worker.putData( + Comlink.transfer(packedAsset, [packedAsset.buffer]), + "assets" + ); + if (!success) { + await database.table("assets").put(asset); + } }, [database] ); diff --git a/src/contexts/MapDataContext.js b/src/contexts/MapDataContext.js index ddd8dce..4f298a9 100644 --- a/src/contexts/MapDataContext.js +++ b/src/contexts/MapDataContext.js @@ -5,8 +5,7 @@ import React, { useCallback, useRef, } from "react"; -import * as Comlink from "comlink"; -import { decode, encode } from "@msgpack/msgpack"; +import { decode } from "@msgpack/msgpack"; import { useAuth } from "./AuthContext"; import { useDatabase } from "./DatabaseContext"; @@ -215,16 +214,7 @@ export function MapDataProvider({ children }) { */ const putMap = useCallback( async (map) => { - // Attempt to use worker to put map to avoid UI lockup - const packedMap = encode(map); - const success = await worker.putData( - Comlink.transfer(packedMap, [packedMap.buffer]), - "maps", - false - ); - if (!success) { - await database.table("maps").put(map); - } + await database.table("maps").put(map); if (map.owner !== userId) { await updateCache(); } diff --git a/src/network/Connection.js b/src/network/Connection.js index 984a1dd..84f7c1b 100644 --- a/src/network/Connection.js +++ b/src/network/Connection.js @@ -65,21 +65,12 @@ class Connection extends SimplePeer { sendObject(object, channel, chunkId) { try { const packedData = encode(object); - if (packedData.byteLength > MAX_BUFFER_SIZE) { - const chunks = this.chunk(packedData, chunkId); - for (let chunk of chunks) { - if (this.dataChannels[channel]) { - this.dataChannels[channel].write(encode(chunk)); - } else { - this.write(encode(chunk)); - } - } - return; - } else { + const chunks = this.chunk(packedData, chunkId); + for (let chunk of chunks) { if (this.dataChannels[channel]) { - this.dataChannels[channel].write(packedData); + this.dataChannels[channel].write(encode(chunk)); } else { - this.write(packedData); + this.write(encode(chunk)); } } } catch (error) { diff --git a/src/network/NetworkedMapAndTokens.js b/src/network/NetworkedMapAndTokens.js index d007d3a..7cf3d70 100644 --- a/src/network/NetworkedMapAndTokens.js +++ b/src/network/NetworkedMapAndTokens.js @@ -65,14 +65,6 @@ function NetworkedMapAndTokens({ session }) { async function loadAssetManifestFromMap(map, mapState) { const assets = {}; const { owner } = map; - if (map.type === "file") { - const qualityId = map.resolutions[map.quality]; - if (qualityId) { - assets[qualityId] = { id: qualityId, owner }; - } else { - assets[map.file] = { id: map.file, owner }; - } - } let processedTokens = new Set(); for (let tokenState of Object.values(mapState.tokens)) { if ( @@ -84,6 +76,15 @@ function NetworkedMapAndTokens({ session }) { assets[tokenState.file] = { id: tokenState.file, owner }; } } + if (map.type === "file") { + assets[map.thumbnail] = { id: map.thumbnail, owner }; + const qualityId = map.resolutions[map.quality]; + if (qualityId) { + assets[qualityId] = { id: qualityId, owner }; + } else { + assets[map.file] = { id: map.file, owner }; + } + } setAssetManifest({ mapId: map.id, assets }, true, true); } @@ -144,8 +145,8 @@ function NetworkedMapAndTokens({ session }) { if (cachedAsset) { requestingAssetsRef.current.delete(asset.id); } else { - session.sendTo(owner.sessionId, "assetRequest", asset.id); assetLoadStart(asset.id); + session.sendTo(owner.sessionId, "assetRequest", asset); } } } @@ -381,7 +382,7 @@ function NetworkedMapAndTokens({ session }) { useEffect(() => { async function handlePeerData({ id, data, reply }) { if (id === "assetRequest") { - const asset = await getAsset(data); + const asset = await getAsset(data.id); reply("assetResponse", asset, undefined, asset.id); } diff --git a/src/workers/DatabaseWorker.js b/src/workers/DatabaseWorker.js index 8e4278f..619a166 100644 --- a/src/workers/DatabaseWorker.js +++ b/src/workers/DatabaseWorker.js @@ -43,17 +43,12 @@ let service = { * Put data into table encoded by msgpack * @param {Uint8Array} data * @param {string} table - * @param {boolean} wait Whether to wait for the put to finish */ - async putData(data, table, wait = true) { + async putData(data, table) { try { let db = getDatabase({}); const decoded = decode(data); - if (wait) { - await db.table(table).put(decoded); - } else { - db.table(table).put(decoded); - } + await db.table(table).put(decoded); return true; } catch { return false;