Remove map preview sending and fix initial player map load

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) {
+        } else if (data.resolutions && data.quality !== "original") {
-          const fileKeys = await database
+          setAssetId(data.resolutions[data.quality]);
-            .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 {
           setAssetId(data.file);
         }
       }
     }
 
-    loastAssetId();
+    loadAssetId();
-  }, [data, thumbnail, database]);
+  }, [data, thumbnail]);
 
-  const type = data?.type || "default";
+  const assetURL = useAssetURL(
-
+    assetId,
-  const assetURL = useAssetURL(assetId, type, defaultSources, unknownSource);
+    data?.type,
+    defaultSources,
+    unknownSource
+  );
   return assetURL;
 }
 

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 = useAssets();
-  const assets = useContext(AssetsContext);
   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
-                      <InteractionEmitterContext.Provider
+                      value={interactionEmitter}
-                        value={interactionEmitter}
+                    >
+                      <SetPreventMapInteractionContext.Provider
+                        value={setPreventMapInteraction}
                       >
-                        <SetPreventMapInteractionContext.Provider
+                        <StageWidthContext.Provider value={stageWidth}>
-                          value={setPreventMapInteraction}
+                          <StageHeightContext.Provider value={stageHeight}>
-                        >
+                            <MapWidthContext.Provider value={mapWidth}>
-                          <StageWidthContext.Provider value={stageWidth}>
+                              <MapHeightContext.Provider value={mapHeight}>
-                            <StageHeightContext.Provider value={stageHeight}>
+                                <StageScaleContext.Provider value={stageScale}>
-                              <MapWidthContext.Provider value={mapWidth}>
+                                  <DebouncedStageScaleContext.Provider
-                                <MapHeightContext.Provider value={mapHeight}>
+                                    value={debouncedStageScale}
-                                  <StageScaleContext.Provider
-                                    value={stageScale}
                                   >
-                                    <DebouncedStageScaleContext.Provider
+                                    <GridContext.Provider value={grid}>
-                                      value={debouncedStageScale}
+                                      <GridPixelSizeContext.Provider
-                                    >
+                                        value={gridPixelSize}
-                                      <GridContext.Provider value={grid}>
+                                      >
-                                        <GridPixelSizeContext.Provider
+                                        <GridCellPixelSizeContext.Provider
-                                          value={gridPixelSize}
+                                          value={gridCellPixelSize}
                                         >
-                                          <GridCellPixelSizeContext.Provider
+                                          <GridCellNormalizedSizeContext.Provider
-                                            value={gridCellPixelSize}
+                                            value={gridCellNormalizedSize}
                                           >
-                                            <GridCellNormalizedSizeContext.Provider
+                                            <GridOffsetContext.Provider
-                                              value={gridCellNormalizedSize}
+                                              value={gridOffset}
                                             >
-                                              <GridOffsetContext.Provider
+                                              <GridStrokeWidthContext.Provider
-                                                value={gridOffset}
+                                                value={gridStrokeWidth}
                                               >
-                                                <GridStrokeWidthContext.Provider
+                                                <GridCellPixelOffsetContext.Provider
-                                                  value={gridStrokeWidth}
+                                                  value={gridCellPixelOffset}
                                                 >
-                                                  <GridCellPixelOffsetContext.Provider
+                                                  {children}
-                                                    value={gridCellPixelOffset}
+                                                </GridCellPixelOffsetContext.Provider>
-                                                  >
+                                              </GridStrokeWidthContext.Provider>
-                                                    {children}
+                                            </GridOffsetContext.Provider>
-                                                  </GridCellPixelOffsetContext.Provider>
+                                          </GridCellNormalizedSizeContext.Provider>
-                                                </GridStrokeWidthContext.Provider>
+                                        </GridCellPixelSizeContext.Provider>
-                                              </GridOffsetContext.Provider>
+                                      </GridPixelSizeContext.Provider>
-                                            </GridCellNormalizedSizeContext.Provider>
+                                    </GridContext.Provider>
-                                          </GridCellPixelSizeContext.Provider>
+                                  </DebouncedStageScaleContext.Provider>
-                                        </GridPixelSizeContext.Provider>
+                                </StageScaleContext.Provider>
-                                      </GridContext.Provider>
+                              </MapHeightContext.Provider>
-                                    </DebouncedStageScaleContext.Provider>
+                            </MapWidthContext.Provider>
-                                  </StageScaleContext.Provider>
+                          </StageHeightContext.Provider>
-                                </MapHeightContext.Provider>
+                        </StageWidthContext.Provider>
-                              </MapWidthContext.Provider>
+                      </SetPreventMapInteractionContext.Provider>
-                            </StageHeightContext.Provider>
+                    </InteractionEmitterContext.Provider>
-                          </StageWidthContext.Provider>
-                        </SetPreventMapInteractionContext.Provider>
-                      </InteractionEmitterContext.Provider>
-                    </TokenDataContext.Provider>
                   </AssetURLsUpdaterContext.Provider>
                 </AssetURLsStateContext.Provider>
               </AssetsContext.Provider>

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