added lessc, reimplemented mica caching

package.json

@@ -14,7 +14,8 @@
   "homepage": "https://cider.sh/",
   "buildResources": "resources",
   "scripts": {
-    "build": "tsc",
+    "build": "tsc && yarn compile-less",
+    "compile-less": "lessc ./src/renderer/style.less ./src/renderer/style.css",
     "watch": "tsc --watch",
     "start": "run-script-os",
     "start:win32": "yarn build && set ELECTRON_ENABLE_LOGGING=true && electron ./build/index.js --enable-accelerated-mjpeg-decode --enable-accelerated-video --disable-gpu-driver-bug-workarounds --ignore-gpu-blacklist --enable-native-gpu-memory-buffers",
@@ -83,6 +84,7 @@
     "electron-builder": "^23.0.3",
     "electron-builder-notarize-pkg": "^1.2.0",
     "electron-webpack": "^2.8.2",
+    "less": "^4.1.3",
     "musickit-typescript": "^1.2.4",
     "typescript": "^4.6.4",
     "vue-devtools": "^5.1.4",

src/renderer/main/mica.js

@@ -21,22 +21,22 @@ async function spawnMica() {
   let lastScreenWidth;
   let lastScreenHeight;
 
-  let regen = true;
+  let imgSrc = "";
-  let imgSrc = await ipcRenderer.sendSync("get-wallpaper", {
+  let micaCache = await CiderCache.getCache("mica-cache");
+  if (!micaCache) {
+    micaCache = {
+      path: "",
+      data: "",
+    };
+  }
+  if (micaCache.path == imgSrc.path) {
+    imgSrc = micaCache;
+  }else{
+    imgSrc = await ipcRenderer.sendSync("get-wallpaper", {
       blurAmount: 256
-  });
+    });
-
+    CiderCache.putCache("mica-cache", imgSrc);
-//   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();

src/renderer/style.less

@@ -2080,6 +2080,18 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   justify-content: center;
   align-items: center;
 
+  .app-content-container {
+    width:100%;
+    height:100%;
+    #app-content {
+      width:100%;
+      height:100%;
+    }
+  }
+
+
+
+
   .fs-row {
     flex-grow: 0.5;
   }

src/renderer/views/components/fullscreen.ejs

@@ -12,7 +12,7 @@
                 </div>
             </div>
         </div>
-        <div class="row fs-row">
+        <div class="row fs-row" v-if="tabMode != 'catalog'">
             <div class="col artwork-col">
                 <div class="artwork" @click="app.fullscreen(false)">
                     <mediaitem-artwork
@@ -119,7 +119,7 @@
                                        v-b-tooltip.hover :title="$root.formatVolumeTooltip()">
                             </div>
                         </div>
-                
+
                     </template>
                 </div>
             </div>
@@ -138,11 +138,17 @@
                 </div>
             </div>
         </div>
+        <div class="app-content-container" v-else>
+            <app-content-area></app-content-area>
+        </div>
         <div class="tab-toggles">
             <div class="lyrics" :class="{active: tabMode == 'lyrics'}"
                  @click="tabMode = (tabMode == 'lyrics') ? '' : 'lyrics'"></div>
             <div class="queue" :class="{active: tabMode == 'queue'}"
                  @click="tabMode =  (tabMode == 'queue') ? '' :'queue'"></div>
+            <div class="queue" :class="{active: tabMode == 'catalog'}"
+                 v-if="false"
+                 @click="tabMode =  (tabMode == 'catalog') ? '' :'catalog'"></div>
         </div>
     </div>
 

src/renderer/views/main.ejs

@@ -15,8 +15,8 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, viewport-fit=cover">
     <title>Cider</title>
-    <link rel="stylesheet/less" type="text/css" href="style.less"/>
+    <link rel="<%- (env.dev ? "stylesheet" : "stylesheet/less") %>" type="text/css" href="style.<%- (env.dev ? "css" : "less") %>"/>
-    <link rel="stylesheet/less" type="text/css" id="userTheme" href="themes/default.less"/>
+<!--    <link rel="stylesheet/less" type="text/css" id="userTheme" href="themes/default.less"/>-->
     <script src="./lib/less.js"></script>
     <script src="<%- (env.dev ? " ./lib/vue.js" : "./lib/vue.dev.js") %>"></script>
     <script src="./lib/vue-horizontal.js"></script>