Add thumbnail sending to assets for map grid

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);

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]
   );

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);
-      }
       if (map.owner !== userId) {
         await updateCache();
       }

src/network/Connection.js

@@ -65,7 +65,6 @@ 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]) {
@@ -74,14 +73,6 @@ class Connection extends SimplePeer {
           this.write(encode(chunk));
         }
       }
-        return;
-      } else {
-        if (this.dataChannels[channel]) {
-          this.dataChannels[channel].write(packedData);
-        } else {
-          this.write(packedData);
-        }
-      }
     } catch (error) {
       console.error(error);
     }

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);
       }
 

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);
-      }
       return true;
     } catch {
       return false;