From f1baf887cf58bbf4305cc95861ee0d611a6c2b30 Mon Sep 17 00:00:00 2001 From: booploops <49113086+booploops@users.noreply.github.com> Date: Thu, 10 Mar 2022 20:16:20 -0800 Subject: [PATCH] mica effect emulation --- package.json | 3 +- src/main/base/browserwindow.ts | 12 ++++ src/main/plugins/mpris.ts | 6 +- src/renderer/index.js | 6 ++ src/renderer/lib/stackblur.min.js | 2 + src/renderer/main/app.js | 2 + src/renderer/main/mica.js | 84 +++++++++++++++++++++++++++ src/renderer/style.css | 57 +++++++++--------- src/renderer/style.less | 17 ++++++ src/renderer/views/main.ejs | 1 + src/renderer/views/pages/settings.ejs | 3 + 11 files changed, 164 insertions(+), 29 deletions(-) create mode 100644 src/renderer/lib/stackblur.min.js create mode 100644 src/renderer/main/mica.js diff --git a/package.json b/package.json index d39d53a5..119641a8 100644 --- a/package.json +++ b/package.json @@ -39,7 +39,6 @@ "@sentry/electron": "^3.0.2", "@sentry/integrations": "^6.18.1", "adm-zip": "0.4.10", - "castv2-client": "^1.2.0", "chokidar": "^3.5.3", "discord-rpc": "^4.0.1", @@ -49,7 +48,6 @@ "electron-notarize": "^1.1.1", "electron-store": "^8.0.1", "electron-updater": "^4.6.5", - "electron-window-state": "^5.0.3", "express": "^4.17.3", "get-port": "^5.1.1", @@ -67,6 +65,7 @@ "source-map-support": "^0.5.21", "typescript": "^4.5.5", "v8-compile-cache": "^2.3.0", + "wallpaper": "5.0.1", "ws": "^8.5.0", "xml2js": "^0.4.23", "youtube-search-without-api-key": "^1.0.7" diff --git a/src/main/base/browserwindow.ts b/src/main/base/browserwindow.ts index 86805a2c..38b73efe 100644 --- a/src/main/base/browserwindow.ts +++ b/src/main/base/browserwindow.ts @@ -13,6 +13,8 @@ import {wsapi} from "./wsapi"; import {utils} from './utils'; import {Plugins} from "./plugins"; import {watch} from "chokidar"; +const wallpaper = require('wallpaper'); + // @ts-ignore import * as AdmZip from "adm-zip"; @@ -593,6 +595,16 @@ export class BrowserWindow { /********************************************************************************************************************** * ipcMain Events ****************************************************************************************************************** */ + + ipcMain.on("get-wallpaper", async (event) => { + 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}` + event.returnValue = wpData; + }) + ipcMain.on("cider-platform", (event) => { event.returnValue = process.platform; }); diff --git a/src/main/plugins/mpris.ts b/src/main/plugins/mpris.ts index 222f54be..892f72de 100644 --- a/src/main/plugins/mpris.ts +++ b/src/main/plugins/mpris.ts @@ -176,7 +176,11 @@ export default class mpris { */ onBeforeQuit(): void { console.debug(`[Plugin][${mpris.name}] Stopped.`); - mpris.clearState() + try { + mpris.clearState() + }catch(e) { + e = null + } } /** diff --git a/src/renderer/index.js b/src/renderer/index.js index b1f3ccc6..f59c67af 100644 --- a/src/renderer/index.js +++ b/src/renderer/index.js @@ -105,6 +105,9 @@ function fallbackinitMusicKit() { }) setTimeout(() => { app.init() + if(app.cfg.visual.window_background_style == "mica") { + app.spawnMica() + } }, 1000) } @@ -131,6 +134,9 @@ document.addEventListener('musickitloaded', function () { function waitForApp() { if (typeof app.init !== "undefined") { app.init() + if(app.cfg.visual.window_background_style == "mica") { + app.spawnMica() + } } else { setTimeout(waitForApp, 250); diff --git a/src/renderer/lib/stackblur.min.js b/src/renderer/lib/stackblur.min.js new file mode 100644 index 00000000..79cff7a8 --- /dev/null +++ b/src/renderer/lib/stackblur.min.js @@ -0,0 +1,2 @@ +!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).StackBlur={})}(this,(function(t){"use strict";function e(t){return(e="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}var r=[512,512,456,512,328,456,335,512,405,328,271,456,388,335,292,512,454,405,364,328,298,271,496,456,420,388,360,335,312,292,273,512,482,454,428,405,383,364,345,328,312,298,284,271,259,496,475,456,437,420,404,388,374,360,347,335,323,312,302,292,282,273,265,512,497,482,468,454,441,428,417,405,394,383,373,364,354,345,337,328,320,312,305,298,291,284,278,271,265,259,507,496,485,475,465,456,446,437,428,420,412,404,396,388,381,374,367,360,354,347,341,335,329,323,318,312,307,302,297,292,287,282,278,273,269,265,261,512,505,497,489,482,475,468,461,454,447,441,435,428,422,417,411,405,399,394,389,383,378,373,368,364,359,354,350,345,341,337,332,328,324,320,316,312,309,305,301,298,294,291,287,284,281,278,274,271,268,265,262,259,257,507,501,496,491,485,480,475,470,465,460,456,451,446,442,437,433,428,424,420,416,412,408,404,400,396,392,388,385,381,377,374,370,367,363,360,357,354,350,347,344,341,338,335,332,329,326,323,320,318,315,312,310,307,304,302,299,297,294,292,289,287,285,282,280,278,275,273,271,269,267,265,263,261,259],n=[9,11,12,13,13,14,14,15,15,15,15,16,16,16,16,17,17,17,17,17,17,17,18,18,18,18,18,18,18,18,18,19,19,19,19,19,19,19,19,19,19,19,19,19,19,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24];function a(t,r,n,a,o){if("string"==typeof t&&(t=document.getElementById(t)),!t||"object"!==e(t)||!("getContext"in t))throw new TypeError("Expecting canvas with `getContext` method in processCanvasRGB(A) calls!");var i=t.getContext("2d");try{return i.getImageData(r,n,a,o)}catch(t){throw new Error("unable to access image data: "+t)}}function o(t,e,r,n,o,f){if(!(isNaN(f)||f<1)){f|=0;var g=a(t,e,r,n,o);g=i(g,e,r,n,o,f),t.getContext("2d").putImageData(g,e,r)}}function i(t,e,a,o,i,f){for(var g,l=t.data,c=2*f+1,s=o-1,v=i-1,b=f+1,x=b*(b+1)/2,d=new u,y=d,h=1;h>E;if(l[B+3]=Y,0!==Y){var Z=255/Y;l[B]=(O*C>>E)*Z,l[B+1]=(P*C>>E)*Z,l[B+2]=(q*C>>E)*Z}else l[B]=l[B+1]=l[B+2]=0;O-=k,P-=H,q-=_,z-=M,k-=p.r,H-=p.g,_-=p.b,M-=p.a;var $=X+f+1;$=w+($>E,ut>0?(ut=255/ut,l[Nt]=(bt*C>>E)*ut,l[Nt+1]=(xt*C>>E)*ut,l[Nt+2]=(dt*C>>E)*ut):l[Nt]=l[Nt+1]=l[Nt+2]=0,bt-=lt,xt-=ct,dt-=st,yt-=vt,lt-=p.r,ct-=p.g,st-=p.b,vt-=p.a,Nt=ot+((Nt=St+b)>E,l[S+1]=k*C>>E,l[S+2]=H*C>>E,W-=T,k-=j,H-=A,T-=w.r,j-=w.g,A-=w.b,p=I+((p=z+f+1)>E,l[p+1]=Y*C>>E,l[p+2]=Z*C>>E,X-=Q,Y-=U,Z-=V,Q-=w.r,U-=w.g,V-=w.b,p=F+((p=ot+b) .window-controls > div.minimize { - height: 12px; - width: 12px; - background-color: #ff5c5c; - border-radius: 50%; - display: inline-block; - margin: auto 4px; - color: #820005; - -webkit-app-region: no-drag; - background-image: unset; + display: none; } body[platform="darwin"] .app-chrome .app-chrome-item > .window-controls { - width: 67px; + display: none; } body[platform="darwin"] .app-chrome .app-chrome-item > .window-controls > div.minmax { - height: 12px; - width: 12px; - background-color: #ffbd4c; - border-radius: 50%; - display: inline-block; - margin: auto 4px; - -webkit-app-region: no-drag; - background-image: unset; + display: none; } body[platform="darwin"] .app-chrome .app-chrome-item > .window-controls > div.close { - height: 12px; - width: 12px; - background-color: #00ca56; - border-radius: 50%; - display: inline-block; - margin: auto 4px auto 4px; - -webkit-app-region: no-drag; - background-image: unset; + display: none; } .app-chrome .app-chrome-item.playback-controls { width: 80%; @@ -12499,6 +12489,20 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb { width: 100%; justify-content: center; } +#micaEffect { + opacity: 1; + filter: brightness(0.5); +} +@keyframes micaEnter { + 0% { + opacity: 0; + transform: translateY(10px); + } + 100% { + opacity: 1; + transform: translateY(0px); + } +} @keyframes rotate { from { transform: rotate(0deg); @@ -13022,6 +13026,7 @@ body[platform="linux"] #window-controls-container { #app.twopanel .app-chrome.chrome-bottom { height: var(--chromeHeight2); box-shadow: 0px -1px 0px rgba(0, 0, 0, 0.25); + z-index: 1; } #app.twopanel .app-sidebar-footer--controls { display: none !important; diff --git a/src/renderer/style.less b/src/renderer/style.less index 9772d62d..71192df8 100644 --- a/src/renderer/style.less +++ b/src/renderer/style.less @@ -2614,6 +2614,23 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb { // Cider App +#micaEffect { + opacity:1; + // animation: micaEnter 1s ease-in-out forwards; + filter: brightness(0.5); + @keyframes micaEnter { + 0% { + opacity: 0; + transform: translateY(10px); + } + 100% { + opacity: 1; + transform: translateY(0px); + } + } +} + + @keyframes rotate { from { transform: rotate(0deg); diff --git a/src/renderer/views/main.ejs b/src/renderer/views/main.ejs index 78def301..a6ad5c6f 100644 --- a/src/renderer/views/main.ejs +++ b/src/renderer/views/main.ejs @@ -38,6 +38,7 @@ +