better hot reloading for themes

src/main/base/browserwindow.ts

@@ -1,18 +1,18 @@
-import {join} from "path";
+import { join } from "path";
-import {app, BrowserWindow as bw, ipcMain, ShareMenu, shell} from "electron";
+import { app, BrowserWindow as bw, ipcMain, ShareMenu, shell } from "electron";
 import * as windowStateKeeper from "electron-window-state";
 import * as express from "express";
 import * as getPort from "get-port";
-import {search} from "youtube-search-without-api-key";
+import { search } from "youtube-search-without-api-key";
-import {existsSync, mkdirSync, readdirSync, readFileSync, writeFileSync, statSync} from "fs";
+import { existsSync, mkdirSync, readdirSync, readFileSync, writeFileSync, statSync } from "fs";
-import {Stream} from "stream";
+import { Stream } from "stream";
-import {networkInterfaces} from "os";
+import { networkInterfaces } from "os";
 import * as mm from 'music-metadata';
 import fetch from 'electron-fetch'
-import {wsapi} from "./wsapi";
+import { wsapi } from "./wsapi";
-import {AppImageUpdater, NsisUpdater} from "electron-updater";
+import { AppImageUpdater, NsisUpdater } from "electron-updater";
-import {utils} from './utils';
+import { utils } from './utils';
-
+const fileWatcher = require('chokidar');
 const AdmZip = require("adm-zip");
 
 
@@ -22,7 +22,7 @@ export class BrowserWindow {
 
     private audioStream: any = new Stream.PassThrough();
     private headerSent: any = false;
-    private chromecastIP : any = [];
+    private chromecastIP: any = [];
     private clientPort: number = 0;
     private remotePort: number = 6942;
     private EnvironmentVariables: object = {
@@ -179,7 +179,7 @@ export class BrowserWindow {
                     page: "themes-github",
                     component: `<themes-github></themes-github>`,
                     condition: `page == 'themes-github'`
-                },{
+                }, {
                     page: "plugins-github",
                     component: `<plugins-github></plugins-github>`,
                     condition: `page == 'plugins-github'`
@@ -219,7 +219,7 @@ export class BrowserWindow {
         show: false,
         // backgroundColor: "#1E1E1E",
         titleBarStyle: 'hidden',
-        trafficLightPosition: {x: 15, y: 20},
+        trafficLightPosition: { x: 15, y: 20 },
         webPreferences: {
             experimentalFeatures: true,
             nodeIntegration: true,
@@ -233,13 +233,52 @@ export class BrowserWindow {
             preload: join(utils.getPath('srcPath'), "./preload/cider-preload.js"),
         },
     };
+    StartWatcher(path: string) {
+        var chokidar = require("chokidar");
 
+        var watcher = chokidar.watch(path, {
+            ignored: /[\/\\]\./,
+            persistent: true
+        });
+
+        function onWatcherReady() {
+            console.info('From here can you check for real changes, the initial scan has been completed.');
+        }
+
+        // Declare the listeners of the watcher
+        watcher
+            .on('add', function (path: string) {
+                // console.log('File', path, 'has been added');
+            })
+            .on('addDir', function (path: string) {
+                // console.log('Directory', path, 'has been added');
+            })
+            .on('change', function (path: string) {
+                console.log('File', path, 'has been changed');
+                BrowserWindow.win.webContents.send("theme-update", "")
+            })
+            .on('unlink', function (path: string) {
+                // console.log('File', path, 'has been removed');
+            })
+            .on('unlinkDir', function (path: string) {
+                // console.log('Directory', path, 'has been removed');
+            })
+            .on('error', function (error: string) {
+                // console.log('Error happened', error);
+            })
+            .on('ready', onWatcherReady)
+            .on('raw', function (event: any, path: any, details: any) {
+                // This event should be triggered everytime something happens.
+                // console.log('Raw event info:', event, path, details);
+            });
+    }
     /**
      * Creates the browser window
      */
     async createWindow(): Promise<Electron.BrowserWindow> {
-        this.clientPort = await getPort({port: 9000});
+        this.clientPort = await getPort({ port: 9000 });
         BrowserWindow.verifyFiles();
+        this.StartWatcher(utils.getPath('themes'));
 
         // Load the previous state with fallback to defaults
         const windowState = windowStateKeeper({
@@ -458,7 +497,7 @@ export class BrowserWindow {
         remote.use(express.static(join(utils.getPath('srcPath'), "./web-remote/")))
         remote.set("views", join(utils.getPath('srcPath'), "./web-remote/views"));
         remote.set("view engine", "ejs");
-        getPort({port: 6942}).then((port) => {
+        getPort({ port: 6942 }).then((port) => {
             this.remotePort = port;
             // Start Remote Discovery
             this.broadcastRemote()
@@ -511,7 +550,7 @@ export class BrowserWindow {
                     if (itspod != null)
                         details.requestHeaders["Cookie"] = `itspod=${itspod}`;
                 }
-                callback({requestHeaders: details.requestHeaders});
+                callback({ requestHeaders: details.requestHeaders });
             }
         );
 
@@ -771,7 +810,7 @@ export class BrowserWindow {
         })
         //Fullscreen
         ipcMain.on('detachDT', (_event, _) => {
-            BrowserWindow.win.webContents.openDevTools({mode: 'detach'});
+            BrowserWindow.win.webContents.openDevTools({ mode: 'detach' });
         })
 
 
@@ -1044,10 +1083,10 @@ export class BrowserWindow {
         // Set window Handler
         BrowserWindow.win.webContents.setWindowOpenHandler((x: any) => {
             if (x.url.includes("apple") || x.url.includes("localhost")) {
-                return {action: "allow"};
+                return { action: "allow" };
             }
             shell.openExternal(x.url).catch(console.error);
-            return {action: "deny"};
+            return { action: "deny" };
         });
     }
 
@@ -1096,7 +1135,7 @@ export class BrowserWindow {
             "CtlN": "Cider",
             "iV": "196623"
         };
-        let server2 = mdns.createAdvertisement(x, `${await getPort({port: 3839})}`, {
+        let server2 = mdns.createAdvertisement(x, `${await getPort({ port: 3839 })}`, {
             name: encoded,
             txt: txt_record
         });

src/renderer/index.js

@@ -779,6 +779,10 @@ const app = new Vue({
 
             MusicKit.getInstance().videoContainerElement = document.getElementById("apple-music-video-player")
 
+            ipcRenderer.on('theme-update', (event, arg) => {
+                less.refresh(true, true, true)
+            })
+
             ipcRenderer.on('SoundCheckTag', (event, tag) => {
                 let replaygain = self.parseSCTagToRG(tag)
                 try {
@@ -906,6 +910,7 @@ const app = new Vue({
             if (theme == "") {
                 theme = this.cfg.visual.theme
             } else {
+                this.cfg.visual.theme = ""
                 this.cfg.visual.theme = theme
             }
             this.chrome.appliedTheme.info = await (await fetch("themes/" + app.cfg.visual.theme.replace("index.less", "theme.json"))).json()