mica improvements

- moved mica rendering to backend
- improvements to spanning wallpapers

package.json

@@ -54,6 +54,7 @@
     "electron-window-state": "^5.0.3",
     "express": "^4.17.3",
     "get-port": "^5.1.1",
+    "jimp": "^0.16.1",
     "jsonc": "^2.0.0",
     "lastfmapi": "^0.1.1",
     "mdns-js": "git+https://github.com/ciderapp/node-mdns-js.git",

src/main/base/browserwindow.ts

@@ -1,5 +1,5 @@
 import {join} from "path";
-import {app, BrowserWindow as bw, ipcMain, ShareMenu, shell} from "electron";
+import {app, BrowserWindow as bw, ipcMain, ShareMenu, shell, screen} from "electron";
 import * as windowStateKeeper from "electron-window-state";
 import * as express from "express";
 import * as getPort from "get-port";
@@ -745,15 +745,28 @@ export class BrowserWindow {
             return json;
         })
 
-        ipcMain.on("get-wallpaper", async (event) => {
+        ipcMain.on("get-wallpaper", async (event, args) => {
             const wpPath: string = await wallpaper.get();
-            // get the wallpaper and encode it to base64 then return
+            const Jimp = require("jimp")
-            const wpBase64: string = await readFileSync(wpPath, 'base64')
+            const img = await Jimp.read(wpPath)
-            // add the data:image properties
+            const blurAmount = args.blurAmount ?? 256
-            const wpData: string = `data:image/png;base64,${wpBase64}`
+            if(blurAmount) {
+                img.blur(blurAmount)
+            }
+            const screens = await screen.getAllDisplays()
+            const width = screens.reduce((a, b) => a + b.size.width, 0)
+            const height = screens.reduce((a, b) => a + b.size.height, 0)
+
+            img.cover(width, height, Jimp.HORIZONTAL_ALIGN_LEFT | Jimp.VERTICAL_ALIGN_MIDDLE)
+            const result = await img.getBase64Async(Jimp.MIME_PNG)
+
             event.returnValue = {
                 path: wpPath,
-                data: wpData
+                data: result,
+                res: {
+                    width: width,
+                    height: height
+                }
             };
         })
 

src/renderer/index.js

@@ -133,7 +133,7 @@ document.addEventListener('musickitloaded', function () {
             function waitForApp() {
                 if (typeof app.init !== "undefined") {
                     app.init()
-                    if (app.cfg.visual.window_background_style == "mica" && !app.isDev) {
+                    if (app.cfg.visual.window_background_style == "mica") {
                         app.spawnMica()
                     }
                 }

src/renderer/main/mica.js

@@ -1,66 +1,47 @@
-import { CiderCache } from "./cidercache.js"
+import { CiderCache } from "./cidercache.js";
 
 async function spawnMica() {
   if (typeof window.micaSpawned !== "undefined") {
-        return
+    return;
   } else {
-        window.micaSpawned = true
+    window.micaSpawned = true;
   }
-    const micaDiv = document.createElement('div');
+  const micaDiv = document.createElement("div");
-    const blurIterations = 6
+  const blurIterations = 6;
-    micaDiv.id = 'micaEffect';
+  micaDiv.id = "micaEffect";
-    micaDiv.style.position = "fixed"
+  micaDiv.style.position = "fixed";
-    micaDiv.style.top = "0"
+  micaDiv.style.top = "0";
-    micaDiv.style.left = "0"
+  micaDiv.style.left = "0";
-    micaDiv.style.right = "0"
+  micaDiv.style.right = "0";
-    micaDiv.style.bottom = "0"
+  micaDiv.style.bottom = "0";
-    micaDiv.style.zIndex = -1
+  micaDiv.style.zIndex = -1;
 
   let lastScreenX;
   let lastScreenY;
   let lastScreenWidth;
   let lastScreenHeight;
 
-    let regen = true
+  let regen = true;
-    let imgSrc = await ipcRenderer.sendSync("get-wallpaper")
+  let imgSrc = await ipcRenderer.sendSync("get-wallpaper", {
+      blurAmount: 256
+  });
 
-    let micaCache = await CiderCache.getCache("mica-cache")
+//   let micaCache = await CiderCache.getCache("mica-cache");
-    if (!micaCache) {
+//   if (!micaCache) {
-        micaCache = {
+//     micaCache = {
-            path: "",
+//       path: "",
-            data: ""
+//       data: "",
-        }
+//     };
-    }
+//   }
-    if (micaCache.path == imgSrc.path) {
+//   if (micaCache.path == imgSrc.path) {
-        regen = false
+//     regen = false;
-        imgSrc = micaCache
+//     imgSrc = micaCache;
-    }
+//   }
-    let canvas = document.createElement('canvas');
+  let canvas = document.createElement("canvas");
-    let ctx = canvas.getContext('2d');
+  let ctx = canvas.getContext("2d");
   let img = new Image();
-    img.src = imgSrc.data;
+  micaDiv.style.backgroundImage = `url(${imgSrc.data})`;
-    img.onload = function () {
-        canvas.width = img.width;
-        canvas.height = img.height;
-        ctx.drawImage(img, 0, 0);
-        if (regen) {
-            for (let i = 0; i < blurIterations; i++) {
-                StackBlur.canvasRGB(canvas, 0, 0, img.width, img.height, 128);
-            }
-            micaCache.path = imgSrc.path
-            micaCache.data = canvas.toDataURL()
-            CiderCache.putCache("mica-cache", micaCache)
-        }
-        let imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
-        micaDiv.style.backgroundImage = `url(${micaCache.data})`;
   document.body.appendChild(micaDiv);
-        // on animation finished set animation to unset
-        micaDiv.addEventListener('animationend', function () {
-            micaDiv.style.opacity = '1';
-            micaDiv.style.animation = 'unset';
-        })
-    }
-
 
   function onScreenMove(cb) {
     function detectScreenMove() {
@@ -70,7 +51,10 @@ async function spawnMica() {
         cb();
       }
       // window size change
-            if (lastScreenWidth !== window.innerWidth || lastScreenHeight !== window.innerHeight) {
+      if (
+        lastScreenWidth !== window.innerWidth ||
+        lastScreenHeight !== window.innerHeight
+      ) {
         lastScreenWidth = window.innerWidth;
         lastScreenHeight = window.innerHeight;
         cb();
@@ -101,7 +85,7 @@ async function spawnMica() {
       micaDiv.style.backgroundPosition = `-${x}px -${y}px`;
     }
   });
-    return true
+  return true;
 }
 
-export { spawnMica }
+export { spawnMica };