From 0803252018f76353a9c40c78ddab7a9f7c6d62fe Mon Sep 17 00:00:00 2001 From: booploops <49113086+booploops@users.noreply.github.com> Date: Thu, 2 Jun 2022 21:10:17 -0700 Subject: [PATCH] mica improvements - moved mica rendering to backend - improvements to spanning wallpapers --- package.json | 1 + src/main/base/browserwindow.ts | 27 +++-- src/renderer/index.js | 2 +- src/renderer/main/mica.js | 186 +++++++++++++++------------------ 4 files changed, 107 insertions(+), 109 deletions(-) diff --git a/package.json b/package.json index 97f01a9e..5b44edf8 100644 --- a/package.json +++ b/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", diff --git a/src/main/base/browserwindow.ts b/src/main/base/browserwindow.ts index 38f642b2..86ba10da 100644 --- a/src/main/base/browserwindow.ts +++ b/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 wpBase64: string = await readFileSync(wpPath, 'base64') - // add the data:image properties - const wpData: string = `data:image/png;base64,${wpBase64}` + const Jimp = require("jimp") + const img = await Jimp.read(wpPath) + const blurAmount = args.blurAmount ?? 256 + 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 + } }; }) diff --git a/src/renderer/index.js b/src/renderer/index.js index 33dc8d23..ab4f04b0 100644 --- a/src/renderer/index.js +++ b/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() } } diff --git a/src/renderer/main/mica.js b/src/renderer/main/mica.js index 189c9cee..cbd346bc 100644 --- a/src/renderer/main/mica.js +++ b/src/renderer/main/mica.js @@ -1,107 +1,91 @@ -import { CiderCache } from "./cidercache.js" +import { CiderCache } from "./cidercache.js"; async function spawnMica() { - if (typeof window.micaSpawned !== "undefined") { - return + if (typeof window.micaSpawned !== "undefined") { + return; + } else { + window.micaSpawned = true; + } + const micaDiv = document.createElement("div"); + const blurIterations = 6; + micaDiv.id = "micaEffect"; + micaDiv.style.position = "fixed"; + micaDiv.style.top = "0"; + micaDiv.style.left = "0"; + micaDiv.style.right = "0"; + micaDiv.style.bottom = "0"; + micaDiv.style.zIndex = -1; + + let lastScreenX; + let lastScreenY; + let lastScreenWidth; + let lastScreenHeight; + + let regen = true; + let imgSrc = await ipcRenderer.sendSync("get-wallpaper", { + blurAmount: 256 + }); + +// let micaCache = await CiderCache.getCache("mica-cache"); +// if (!micaCache) { +// micaCache = { +// path: "", +// data: "", +// }; +// } +// if (micaCache.path == imgSrc.path) { +// regen = false; +// imgSrc = micaCache; +// } + let canvas = document.createElement("canvas"); + let ctx = canvas.getContext("2d"); + let img = new Image(); + micaDiv.style.backgroundImage = `url(${imgSrc.data})`; + document.body.appendChild(micaDiv); + + function onScreenMove(cb) { + function detectScreenMove() { + if (lastScreenY !== window.screenY || lastScreenX !== window.screenX) { + lastScreenY = window.screenY; + lastScreenX = window.screenX; + cb(); + } + // window size change + if ( + lastScreenWidth !== window.innerWidth || + lastScreenHeight !== window.innerHeight + ) { + lastScreenWidth = window.innerWidth; + lastScreenHeight = window.innerHeight; + cb(); + } + if (true) { + requestAnimationFrame(detectScreenMove); + } + } + + if (true) { + requestAnimationFrame(detectScreenMove); + } + } + + onScreenMove(function () { + const screenHeight = window.screen.height; + const screenWidth = window.screen.width; + const windowHeight = window.innerHeight; + const windowWidth = window.innerWidth; + const ratio = windowWidth / windowHeight; + const x = window.screenX; + const y = window.screenY; + micaDiv.style.backgroundSize = `${screenWidth}px ${screenHeight}px`; + // micaDiv.style.backgroundPosition = `-${x}px -${y}px`; + if (x < 0) { + micaDiv.style.backgroundPosition = `${screenWidth + x}px -${y}px`; } else { - window.micaSpawned = true + micaDiv.style.backgroundPosition = `-${x}px -${y}px`; } - const micaDiv = document.createElement('div'); - const blurIterations = 6 - micaDiv.id = 'micaEffect'; - micaDiv.style.position = "fixed" - micaDiv.style.top = "0" - micaDiv.style.left = "0" - micaDiv.style.right = "0" - micaDiv.style.bottom = "0" - micaDiv.style.zIndex = -1 - - let lastScreenX; - let lastScreenY; - let lastScreenWidth; - let lastScreenHeight; - - let regen = true - let imgSrc = await ipcRenderer.sendSync("get-wallpaper") - - let micaCache = await CiderCache.getCache("mica-cache") - if (!micaCache) { - micaCache = { - path: "", - data: "" - } - } - if (micaCache.path == imgSrc.path) { - regen = false - imgSrc = micaCache - } - let canvas = document.createElement('canvas'); - let ctx = canvas.getContext('2d'); - let img = new Image(); - img.src = 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() { - if (lastScreenY !== window.screenY || lastScreenX !== window.screenX) { - lastScreenY = window.screenY; - lastScreenX = window.screenX; - cb(); - } - // window size change - if (lastScreenWidth !== window.innerWidth || lastScreenHeight !== window.innerHeight) { - lastScreenWidth = window.innerWidth; - lastScreenHeight = window.innerHeight; - cb(); - } - if (true) { - requestAnimationFrame(detectScreenMove); - } - } - - if (true) { - requestAnimationFrame(detectScreenMove); - } - } - - onScreenMove(function () { - const screenHeight = window.screen.height; - const screenWidth = window.screen.width; - const windowHeight = window.innerHeight; - const windowWidth = window.innerWidth; - const ratio = windowWidth / windowHeight; - const x = window.screenX; - const y = window.screenY; - micaDiv.style.backgroundSize = `${screenWidth}px ${screenHeight}px`; - // micaDiv.style.backgroundPosition = `-${x}px -${y}px`; - if (x < 0) { - micaDiv.style.backgroundPosition = `${screenWidth + x}px -${y}px`; - } else { - micaDiv.style.backgroundPosition = `-${x}px -${y}px`; - } - }); - return true + }); + return true; } -export { spawnMica } \ No newline at end of file +export { spawnMica };