fix miniplayer on top, add blur toggle on windows

package.json

@@ -48,6 +48,7 @@
     "electron-notarize": "^1.1.1",
     "electron-store": "^8.0.1",
     "electron-updater": "^4.6.5",
+    "electron-vibrancy-updated": "git+https://github.com/ciderapp/electron-vibrancy-updated",
     "electron-window-state": "^5.0.3",
     "express": "^4.17.3",
     "get-port": "^5.1.1",
@@ -75,7 +76,7 @@
     "@types/express": "^4.17.13",
     "@types/qrcode-terminal": "^0.12.0",
     "@types/ws": "^8.5.1",
-    "electron": "git+https://github.com/castlabs/electron-releases.git",
+    "electron": "git+https://github.com/castlabs/electron-releases.git#16-x-y",
     "electron-builder": "^22.14.13",
     "electron-builder-notarize-pkg": "^1.2.0",
     "electron-webpack": "^2.8.2",

src/i18n/en_US.json

@@ -201,6 +201,7 @@
   "action.unfollow": "Unfollow",
   "action.unfollow.success": "Unfollowed",
   "action.unfollow.error": "Error Unfollowing",
+  "action.relaunch.confirm": "Do you want to relaunch Cider?",
   "action.playNext": "Play Next",
   "action.playLater": "Play Later",
   "action.startRadio": "Start Radio",
@@ -315,6 +316,8 @@
   "settings.option.visual.hardwareAcceleration.description": "Requires relaunch",
   "settings.header.visual.hardwareAcceleration.default": "Default",
   "settings.header.visual.hardwareAcceleration.webGPU": "WebGPU",
+  "settings.option.visual.transparent": "Transparent frame",
+  "settings.option.visual.transparent.description": "Transparent frame (needs Theme Support , requires relaunch)",
   "settings.header.visual.theme": "Theme",
   "settings.option.visual.theme.github.download": "Install from GitHub URL",
   "settings.option.visual.theme.github.explore": "Explore GitHub Themes",

src/main/base/browserwindow.ts

@@ -301,8 +301,9 @@ export class BrowserWindow {
 
                 break;
             case "win32":
-                this.options.backgroundColor = "#1E1E1E";
+                if (!(utils.getStoreValue('visual.transparent') ?? false)){
-                this.options.transparent = false;
+                this.options.backgroundColor = "#1E1E1E";} else {
+                this.options.transparent = true;}
                 break;
             case "linux":
                 this.options.backgroundColor = "#1E1E1E";
@@ -321,6 +322,11 @@ export class BrowserWindow {
         this.startWebServer();
 
         BrowserWindow.win = new bw(this.options);
+        if (process.platform === "win32" && (utils.getStoreValue('visual.transparent') ?? false)) {
+            var electronVibrancy = require('electron-vibrancy-updated');
+            electronVibrancy.SetVibrancy(BrowserWindow.win, 0);
+
+        }
         const ws = new wsapi(BrowserWindow.win)
         ws.InitWebSockets()
         // and load the renderer.
@@ -797,11 +803,17 @@ export class BrowserWindow {
         ipcMain.on('setFullScreen', (_event, flag) => {
             BrowserWindow.win.setFullScreen(flag)
         })
+
         //Fullscreen
         ipcMain.on('detachDT', (_event, _) => {
             BrowserWindow.win.webContents.openDevTools({mode: 'detach'});
         })  
         
+        ipcMain.on('relaunchApp',(_event, _) => {
+            app.relaunch()
+            app.exit()
+        })
+
 
         ipcMain.on('play', (_event, type, id) => {
             BrowserWindow.win.webContents.executeJavaScript(`

src/main/base/store.ts

@@ -105,6 +105,7 @@ export class Store {
             "bg_artwork_rotation": false,
             "hw_acceleration": "default", // default, webgpu, disabled
             "showuserinfo": true,
+            "transparent": false,
             "miniplayer_top_toggle": true,
             "directives": {
                 "windowLayout": "default"

src/renderer/main/vueapp.js

@@ -3863,17 +3863,20 @@ const app = new Vue({
                 ipcRenderer.send('windowmin', 844, 410)
                 ipcRenderer.send('windowresize', this.tmpWidth, this.tmpHeight, false)
                 ipcRenderer.send('windowontop', false)
-                this.cfg.visual.miniplayer_top_toggle = true;
+                //this.cfg.visual.miniplayer_top_toggle = true;
                 app.appMode = 'player';
             }
         },
-        pinMiniPlayer() {
+        pinMiniPlayer(status = false) {
-            if (this.cfg.visual.miniplayer_top_toggle) {
+            if (!status){
+            if (!this.cfg.visual.miniplayer_top_toggle) {
                 ipcRenderer.send('windowontop', true)
-                this.cfg.visual.miniplayer_top_toggle = false
+                this.cfg.visual.miniplayer_top_toggle = true;
             } else {
                 ipcRenderer.send('windowontop', false)
-                this.cfg.visual.miniplayer_top_toggle = true;
+                this.cfg.visual.miniplayer_top_toggle = false;
+            }} else {
+                ipcRenderer.send('windowontop', this.cfg.visual.miniplayer_top_toggle ?? false)
             }
         },
         formatTimezoneOffset: (e = new Date) => {

src/renderer/views/components/mediaitem-square.ejs

@@ -76,7 +76,7 @@
                 isVisible: false,
                 addedToLibrary: false,
                 guid: this.uuidv4(),
-                noplay: ["apple-curators"],
+                noplay: ["apple-curators", "editorial-elements"],
                 nomenu: ["artists", "stations", "apple-curators", "editorial-elements"],
                 app: this.$root,
                 badges: this.$root.socialBadges.badgeMap,

src/renderer/views/components/miniplayer.ejs

@@ -155,6 +155,9 @@
         beforeDestroy() {
             window.removeEventListener('keyup', this.onEscapeKeyUp)
         },
+        mounted() {
+            app.pinMiniPlayer(true)
+        },
         methods: {
             onEscapeKeyUp(event) {
                 if (event.which === 27) {

src/renderer/views/pages/settings.ejs

@@ -752,6 +752,15 @@
                         </select>
                     </div>
                 </div>
+                <div class="md-option-line update-check" v-if="app.platform === 'win32'">
+                    <div class="md-option-segment">
+                        {{$root.getLz('settings.option.visual.transparent')}}<br>
+                        <small>({{$root.getLz('settings.option.visual.transparent.description')}})</small>
+                    </div>
+                    <div class="md-option-segment md-option-segment_auto">
+                        <input type="checkbox" v-model="app.cfg.visual.transparent" switch @change="promptForRelaunch()"/>
+                    </div>
+                </div>
             </div>
             <div style="opacity: 0.5; pointer-events: none">
                 <div class="md-option-header">
@@ -909,6 +918,13 @@
                         updateFields[i].title = "Not available on this type of build";
                     }
                 }
+            },
+            promptForRelaunch(){
+                bootbox.confirm(app.getLz('action.relaunch.confirm'), function (result) {
+                if (result) {
+                    ipcRenderer.send('relaunchApp','');
+                }
+            });          
             }
         }
     })