fix: app suspension on mac

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ytmdesktop2",
-  "version": "0.14.2",
+  "version": "0.14.3",
   "private": false,
   "author": "Venipa <[email protected]>",
   "main": "./out/main/index.js",

src/main/plugins/appProvider.plugin.ts

@@ -1,7 +1,7 @@
 import { AfterInit, BaseProvider, BeforeStart } from "@main/utils/baseProvider";
 import { IpcContext, IpcHandle, IpcOn } from "@main/utils/onIpcEvent";
 import { setSentryEnabled } from "@main/utils/sentry";
-import { App, BrowserWindow, IpcMainEvent, powerSaveBlocker } from "electron";
+import { App, BrowserWindow, IpcMainEvent } from "electron";
 
 import { version as releaseVersion } from "node:os";
 import { isDevelopment } from "../utils/devUtils";
@@ -19,7 +19,6 @@ export default class AppProvider extends BaseProvider implements AfterInit, Befo
     return this._app;
   }
   async BeforeStart() {
-    powerSaveBlocker.start("prevent-app-suspension");
     if (process.platform !== "darwin") {
       this.appLock = this._app.requestSingleInstanceLock();
       if (!this.appLock) {

src/main/plugins/customCssProvider.plugin.ts

@@ -31,7 +31,7 @@ export default class CustomCSSProvider extends BaseProvider implements AfterInit
       scssFile: string;
       enabled: boolean;
     } = this.settingsInstance.get("customcss");
-    if (!fs.existsSync(config.scssFile) || !config) {
+    if (!config?.scssFile || !fs.existsSync(config.scssFile)) {
       return;
     }
     if (
@@ -45,7 +45,7 @@ export default class CustomCSSProvider extends BaseProvider implements AfterInit
       fs.watchFile(
         config.scssFile,
         { interval: 1000 },
-        (curr) => curr.size > 0 && serverMain.emit("settings.customCssUpdate"),
+        (curr, prev) => curr.size !== prev.size && curr.mtimeMs !== prev.mtimeMs && serverMain.emit("settings.customCssUpdate"),
       );
       this.scssUpdateHandler = config.scssFile;
     }

src/main/plugins/settingsProvider.plugin.ts

@@ -106,7 +106,7 @@ export default class SettingsProvider
     return _get(_settingsStore.store, key, defaultValue);
   }
   set(key: string, value: any) {
-    _settingsStore.set(key, value);
+    _settingsStore.set(key, value ?? null);
     this.onChange.next(_settingsStore.store);
     try {
       serverMain.emit(eventNames.SERVER_SETTINGS_CHANGE, key, value),

src/main/plugins/startupProvider.plugin.ts

@@ -1,8 +1,10 @@
 import { AfterInit, BaseProvider, BeforeStart } from "@main/utils/baseProvider";
 import { IpcContext, IpcOn } from "@main/utils/onIpcEvent";
-import { App } from "electron";
+import { App, powerSaveBlocker } from "electron";
 import { basename } from "path";
 
+import { platform } from "@electron-toolkit/utils";
+import { isProduction } from "@main/utils/devUtils";
 import SettingsProvider from "./settingsProvider.plugin";
 
 @IpcContext
@@ -22,23 +24,28 @@ export default class StartupProvider extends BaseProvider implements AfterInit,
   async BeforeStart() {
     if (this.settingsInstance.instance.app.disableHardwareAccel)
       this.app.disableHardwareAcceleration();
+    if (!platform.isMacOS) {
+      powerSaveBlocker.start("prevent-app-suspension"); // app suspension on mac prevents sleep
+    }
   }
   private get startArgs() {
     return ["--processStart", `"${basename(process.execPath)}"`];
   }
   async AfterInit() {
     const app = this.settingsInstance.instance.app;
-    if (app.autostart) {
-      this.app.setLoginItemSettings({
-        openAtLogin: true,
-        path: process.execPath,
-        args: this.startArgs,
-      });
-    } else {
-      this.app.setLoginItemSettings({
-        openAtLogin: false,
-        args: this.startArgs,
-      });
+    if (isProduction) {
+      if (app.autostart) {
+        this.app.setLoginItemSettings({
+          openAtLogin: true,
+          path: process.execPath,
+          args: this.startArgs,
+        });
+      } else {
+        this.app.setLoginItemSettings({
+          openAtLogin: false,
+          args: this.startArgs,
+        });
+      }
     }
     this.getProvider("tray")
       .initializeTray()

src/main/plugins/updateProvider.plugin.ts

@@ -116,7 +116,7 @@ export default class UpdateProvider extends BaseProvider implements BeforeStart,
   }
   private async _checkUpdate() {
     const beta = !!this.settingsInstance.instance?.app?.beta;
-    if (autoUpdater.allowPrerelease !== beta) autoUpdater.allowPrerelease = beta;
+    if (beta) autoUpdater.allowPrerelease = true;
     return await autoUpdater.checkForUpdates().then((x) => {
       if (!x?.updateInfo || !this.isUpdateInRange(x.updateInfo.version))
         throw new Error("No Update available");

src/main/utils/rxjs.ts

@@ -1,6 +1,5 @@
-import { logger } from "@shared/utils/console";
 import { BrowserWindow, WebContents } from "electron";
-import { fromEventPattern, tap } from "rxjs";
+import { fromEventPattern } from "rxjs";
 
 export function fromMainEvent(win: BrowserWindow | WebContents, eventName: string) {
   function addHandler(handler: any) {
@@ -9,7 +8,5 @@ export function fromMainEvent(win: BrowserWindow | WebContents, eventName: strin
   function removeHandler(handler: any) {
     win.off(eventName as any, handler);
   }
-  return fromEventPattern(addHandler, removeHandler).pipe(tap(() => {
-    logger.child(eventName).debug("event triggered")
-  }));
+  return fromEventPattern(addHandler, removeHandler);
 }

src/main/utils/webContentUtils.ts

@@ -1,5 +1,5 @@
 import { is, platform } from "@electron-toolkit/utils";
-import { createLogger, logger } from "@shared/utils/console";
+import { createLogger } from "@shared/utils/console";
 import { BrowserWindow, WebContents, WebContentsView } from "electron";
 import { join } from "path";
 import {
@@ -144,7 +144,6 @@ export function syncWindowStateToWebContents(win: BrowserWindow) {
     const handleStates = () => {
       if (hidden) return;
       const state = getWindowState(win);
-      logger.debug("handleStates trigger", state);
       if (!state) view.send("windowState", state);
       else
         view.send(

src/preload/base.ts

@@ -1,4 +1,5 @@
 import { contextBridge, ipcRenderer } from "electron";
+import { webUtils } from "electron/renderer";
 import pkg from "../../package.json";
 import translations from "../translations";
 console.log(window);
@@ -70,6 +71,7 @@ export default {
     watchCustomCss: (enabled: boolean) => ipcRenderer.emit("settings.customCssWatch", enabled),
     mainWindowState: () => ipcRenderer.invoke("mainWindowState"),
     windowState: () => ipcRenderer.invoke("windowState"),
+    getPathFromFile: (file: File) => webUtils.getPathForFile(file)
   },
   translations,
   domUtils: {

src/renderer/src/components/SettingsInput.vue

@@ -7,38 +7,28 @@
     </label>
     <template v-if="$attrs.type === 'file'">
       <div class="flex space-x-2 items-center">
-        <div
-          class="text-gray-300 flex-1 bg-white bg-opacity-5 text-sm h-12 rounded-lg flex items-center px-3"
-        >
-          {{ value }}
-        </div>
-        <button class="btn btn-primary" @click="() => fileInputRef && fileInputRef.click()">
-          Browse
-        </button>
+        <div class="text-gray-300 flex-1 bg-white bg-opacity-5 text-sm h-12 rounded-lg flex items-center px-3"> {{ value }} </div>
+        <button class="btn btn-primary"
+                @click="() => fileInputRef && fileInputRef.click()"> Browse </button>
       </div>
-      <input
-        ref="fileInputRef"
-        :type="$attrs.type"
-        :placeholder="$attrs.placeholder as string"
-        :accept="$attrs.accept as string"
-        class="hidden"
-        @change="(ev) => updateSetting(ev.target as any)"
-      />
+      <input ref="fileInputRef"
+             :type="$attrs.type"
+             :placeholder="$attrs.placeholder as string"
+             :accept="$attrs.accept as string"
+             class="hidden"
+             @change="(ev) => updateSetting(ev.target as any)" />
     </template>
-    <input
-      v-else
-      :type="$attrs.type as string"
-      :placeholder="$attrs.placeholder as string"
-      :value="value"
-      class="input input-ghost"
-      @change="(ev) => updateSetting(ev.target as any)"
-    />
+    <input v-else
+           :type="$attrs.type as string"
+           :placeholder="$attrs.placeholder as string"
+           :value="value"
+           class="input input-ghost"
+           @change="(ev) => updateSetting(ev.target as any)" />
   </div>
 </template>
-
 <script lang="ts">
 import { clamp, debounce } from "lodash-es";
-import { defineComponent, onMounted, ref } from "vue";
+import { defineComponent, onBeforeMount, ref } from "vue";
 
 export default defineComponent({
   props: {
@@ -53,39 +43,36 @@ export default defineComponent({
   setup(context) {
     const value = ref<any>(),
       fileInputRef = ref<any>();
-    onMounted(async () => {
-      value.value = await (window as any).api.settingsProvider.get(
+    onBeforeMount(async () => {
+      const res = await (window as any).api.settingsProvider.get(
         context.configKey,
-        context.defaultValue !== undefined ? context.defaultValue : null,
+        context.defaultValue ?? null,
       );
+      value.value = res;
+      console.log({ value: value.value })
     });
-    return {
-      value,
-      fileInputRef,
-    };
-  },
-  created() {
-    this.updateSetting = debounce((ev: HTMLInputElement) => {
-      if (this.configKey) {
+    const updateSetting = ref<(_ev: HTMLInputElement) => null>(debounce((ev: HTMLInputElement) => {
+      if (context.configKey) {
         if (ev.type === "file" && ev.files.length === 0) return;
-        let value: any;
-        if ((ev.type === "number" && this.min !== undefined) || this.max !== undefined) {
-          const minValue = this.min ?? ev.valueAsNumber;
-          const maxValue = this.max ?? ev.valueAsNumber;
-          value = clamp(Number(ev.value), minValue, maxValue);
+        let inputValue: any;
+        if ((ev.type === "number" && context.min !== undefined) || context.max !== undefined) {
+          const minValue = context.min ?? ev.valueAsNumber;
+          const maxValue = context.max ?? ev.valueAsNumber;
+          inputValue = clamp(Number(ev.value), minValue, maxValue);
         } else {
-          value = ev.type === "file" ? ev.files[0].path : ev.value;
+          inputValue = ev.type === "file" ? window.api.getPathFromFile(ev.files[0]) : ev.value;
         }
         (window as any).api.settingsProvider
-          .update(this.configKey, value)
-          .then((v) => (this.value = v));
+          .update(context.configKey, inputValue)
+          .then((v) => (value.value = inputValue = v));
       }
-    }, 500);
-  },
-  methods: {
-    updateSetting: (_ev: HTMLInputElement) => null,
-  },
+    }, 500) as any)
+    return {
+      value,
+      fileInputRef,
+      updateSetting
+    };
+  }
 });
 </script>
-
 <style></style>

src/renderer/src/views/settings/customcss-settings.vue

@@ -1,54 +1,39 @@
 <template>
   <div class="flex flex-col gap-4 mt-4">
     <div class="px-3 flex flex-col gap-4">
-      <settings-checkbox ref="customCssToggle" config-key="customcss.enabled">
-        Enable Custom CSS
-      </settings-checkbox>
+      <settings-checkbox ref="customCssToggle"
+                         config-key="customcss.enabled"> Enable Custom CSS </settings-checkbox>
       <ease-transition>
-        <div v-if="customCssToggle && customCssToggle.value" class="flex flex-col gap-4">
-          <settings-input
-            ref="customCssPathInput"
-            config-key="customcss.scssFile"
-            type="file"
-            accept=".scss,.sass"
-          >
+        <div v-if="customCssToggle && customCssToggle.value"
+             class="flex flex-col gap-4">
+          <settings-input ref="customCssPathInput"
+                          config-key="customcss.scssFile"
+                          type="file"
+                          accept=".scss,.sass">
             <template #label> SCSS File </template>
           </settings-input>
-          <settings-checkbox config-key="customcss.scssFileWatch" @change="scssWatch">
-            Update on Changes
-          </settings-checkbox>
-          <button class="btn btn-primary" @click="reloadCSS">Reload</button>
+          <settings-checkbox config-key="customcss.scssFileWatch"
+                             @change="scssWatch"> Update on Changes </settings-checkbox>
+          <button class="btn btn-primary"
+                  @click="reloadCSS">Reload</button>
         </div>
       </ease-transition>
     </div>
   </div>
 </template>
-
-<script lang="ts">
+<script lang="ts" setup>
 import EaseTransition from "@renderer/components/EaseTransition.vue";
 import SettingsCheckbox from "@renderer/components/SettingsCheckbox.vue";
 import SettingsInput from "@renderer/components/SettingsInput.vue";
-import { defineComponent, ref } from "vue";
+import { ref } from "vue";
 
-export default defineComponent({
-  components: { SettingsCheckbox, SettingsInput, EaseTransition },
-  setup() {
-    const customCssToggle = ref(null),
-      customCssPathInput = ref(null);
-    return {
-      customCssToggle,
-      customCssPathInput,
-    };
-  },
-  methods: {
-    reloadCSS() {
-      (window as any).api.reloadCustomCss();
-    },
-    scssWatch(enabled: boolean) {
-      (window as any).api.watchCustomCss(!!enabled);
-    },
-  },
-});
+const customCssToggle = ref(null),
+  customCssPathInput = ref(null);
+function reloadCSS() {
+  (window as any).api.reloadCustomCss();
+}
+function scssWatch(enabled: boolean) {
+  (window as any).api.watchCustomCss(!!enabled);
+}
 </script>
-
 <style></style>

src/renderer/src/views/youtube/toolbar.vue

@@ -2,7 +2,7 @@
   <div class="h-full overflow-hidden">
     <div
       class="flex items-stretch justify-between border-b bg-black border-gray-600 select-none h-10 px-2 space-x-2"
-      :class="{ 'pl-20': state && state.platform.isMacOS && !state.fullScreen }"
+      :class="{ 'pl-20': state && state.platform?.isMacOS && !state.fullScreen }"
     >
       <button
         class="control-button self-center cursor-pointer"