Revert "Remove redundant jimp fetches (#6333)"

packages/web/craco.config.ts

@@ -70,11 +70,6 @@ export default {
               test: /\.wasm$/,
               type: 'webassembly/async'
             },
-            {
-              test: /\.workerscript$/,
-              use: ['raw-loader'],
-              type: 'javascript/auto'
-            },
             {
               test: /\.(glsl|vs|fs|vert|frag)$/,
               exclude: /node_modules/,

packages/web/public/index.html

@@ -34,6 +34,10 @@
       onLoad="window.web3Loaded = true; window.dispatchEvent(new CustomEvent('WEB3_LOADED'))"
       src="%PUBLIC_URL%/scripts/web3.min.js"
     ></script>
+    <script
+      defer
+      src="%PUBLIC_URL%/scripts/jimp.min.js"
+    ></script>
 
     <script async type="text/javascript">
       // Account recovery

packages/web/src/services/WebWorker.js

@@ -7,21 +7,20 @@ export default class WebWorker {
    * Initializes a web worker for performing async tasks.
    * @param {file} workerFile The web worker code, which is turned into a string an exec'd.
    * @param {?boolean} terminateOnResult Whether or not to terminate the worker on gathering the result.
-   * @param {?Array<file>} dependencies Optional array of file dependencies they worker needs
    * Note: Workers are non-trivial to spin up, so leaving commonly used workers running can be useful.
    */
-  constructor(workerFile, terminateOnResult = true, dependencies = []) {
+  constructor(workerFile, terminateOnResult = true) {
     const code = workerFile.toString()
-    const dependencyCode = dependencies.map((d) => `${d.toString()};`).join()
     const blob = new Blob([
       `
-      ${dependencyCode};
       const importWorkerScript = ${importWorkScriptCode}
       const code = ${code}
       code()
     `
     ])
-    this.worker = new Worker(URL.createObjectURL(blob))
+    if (typeof Worker !== 'undefined') {
+      this.worker = new Worker(URL.createObjectURL(blob))
+    }
     this.terminateOnResult = terminateOnResult
   }
 

packages/web/src/utils/imageProcessingUtil.ts

@@ -4,18 +4,13 @@ import dominantColorWorkerFile from 'workers/dominantColor.worker.js'
 import generatePlaylistArtworkWorkerFile from 'workers/generatePlaylistArtwork.worker.js'
 import gifPreviewWorkerFile from 'workers/gifPreview.worker.js'
 import resizeImageWorkerFile from 'workers/resizeImage.worker.js'
-// @ts-ignore - jimp is a raw-loaded to have workers called directly with it.
-import jimp from 'workers/utils/jimp.min.workerscript'
 
-const averageRgbWorker = new WebWorker(averageRgbWorkerFile, false, [jimp])
-const dominantColorWorker = new WebWorker(dominantColorWorkerFile, false, [
-  jimp
-])
-const gifPreviewWorker = new WebWorker(gifPreviewWorkerFile, false, [jimp])
+const averageRgbWorker = new WebWorker(averageRgbWorkerFile, false)
+const dominantColorWorker = new WebWorker(dominantColorWorkerFile, false)
+const gifPreviewWorker = new WebWorker(gifPreviewWorkerFile, false)
 const generatePlaylistArtworkWorker = new WebWorker(
   generatePlaylistArtworkWorkerFile,
-  false,
-  [jimp]
+  false
 )
 
 export const ALLOWED_IMAGE_FILE_TYPES = [
@@ -37,7 +32,7 @@ export const resizeImage = async (
     throw new Error('invalid file type')
   }
   const imageUrlBlob = URL.createObjectURL(imageFile)
-  const worker = new WebWorker(resizeImageWorkerFile, true, [jimp])
+  const worker = new WebWorker(resizeImageWorkerFile)
   worker.call({ imageUrl: imageUrlBlob, maxWidth, square }, key)
   return worker.getResult()
 }

packages/web/src/workers/averageRgb.worker.js

@@ -2,6 +2,10 @@
 const DEFAULT_RGB = { r: 13, g: 16, b: 18 }
 
 export default () => {
+  const script = '/scripts/jimp.min.js'
+  // eslint-disable-next-line
+  importWorkerScript(script)
+
   /**
    * Returns the average RGB of an image to be used for backgrounds/shading, etc.
    * @param {string} key identifies this computation
@@ -25,12 +29,12 @@ export default () => {
         rgb.g = Math.floor(rgb.g / count)
         rgb.b = Math.floor(rgb.b / count)
         // eslint-disable-next-line
-        postMessage({ key, result: rgb })
+        postMessage({key, result: rgb})
       })
       .catch((err) => {
         console.error(imageUrl, err)
         // eslint-disable-next-line
-        postMessage({ key, result: DEFAULT_RGB })
+        postMessage({key, result: DEFAULT_RGB})
       })
   }
 

packages/web/src/workers/dominantColor.worker.js

@@ -9,6 +9,10 @@ export default () => {
   // #CDC8C8, which works out to a luminance of 201.
   const LUMINANCE_THRESHOLD = 201
 
+  const script = `/scripts/jimp.min.js`
+  // eslint-disable-next-line
+  importWorkerScript(script)
+
   const clampedRGBColor = (rgbString /* string of 'r,g,b' */) => {
     const rgb = rgbString.split(',').map((x) => parseInt(x, 10))
     const r = rgb[0]

packages/web/src/workers/generatePlaylistArtwork.worker.js

@@ -1,6 +1,10 @@
 /* globals Jimp */
 
 export default () => {
+  const script = `/scripts/jimp.min.js`
+  // eslint-disable-next-line
+  importWorkerScript(script)
+
   /**
    * Given 4 images, return a new image with each image taking up the four corners
    */

packages/web/src/workers/gifPreview.worker.js

@@ -1,6 +1,10 @@
 /* globals Jimp */
 
 export default () => {
+  const script = '/scripts/jimp.min.js'
+  // eslint-disable-next-line
+  importWorkerScript(script)
+
   /**
    * Returns a jpeg of a gif
    * @param {string} key identifies this computation

packages/web/src/workers/resizeImage.worker.js

@@ -11,8 +11,11 @@
 
 export default () => {
   // eslint-disable-next-line
+  const jimp = '/scripts/jimp.min.js'
   const exifParser = '/scripts/exif-parser-0.1.12-min.js'
   // eslint-disable-next-line
+  importWorkerScript(jimp)
+  // eslint-disable-next-line
   importWorkerScript(exifParser)
 
   // Copied directly from Jimp.