Extend Audio Settings to use OS Audio Management Systems

FIX stereum-dev#2069

launcher/package.json

@@ -44,6 +44,7 @@
     "geoip-lite": "^1.4.7",
     "jszip": "^3.10.1",
     "leader-line-new": "^1.1.9",
+    "loudness": "^0.4.2",
     "ping": "^0.4.4",
     "pinia": "^2.0.33",
     "qrcode": "^1.5.1",

launcher/public/output.css

@@ -887,10 +887,6 @@ video {
   left: 40%;
 }
 
-.left-\[50\%\]{
-  left: 50%;
-}
-
 .left-\[920px\]{
   left: 920px;
 }
@@ -987,10 +983,6 @@ video {
   top: 1px;
 }
 
-.top-\[25\%\]{
-  top: 25%;
-}
-
 .top-\[33\%\]{
   top: 33%;
 }
@@ -999,10 +991,6 @@ video {
   top: 42%;
 }
 
-.top-\[50\%\]{
-  top: 50%;
-}
-
 .top-\[56px\]{
   top: 56px;
 }
@@ -1047,10 +1035,6 @@ video {
   grid-column: span 10 / span 10;
 }
 
-.col-span-12{
-  grid-column: span 12 / span 12;
-}
-
 .col-span-2{
   grid-column: span 2 / span 2;
 }
@@ -1632,14 +1616,6 @@ video {
   height: 33.333333%;
 }
 
-.h-1\/4{
-  height: 25%;
-}
-
-.h-1\/5{
-  height: 20%;
-}
-
 .h-1\/6{
   height: 16.666667%;
 }
@@ -1868,10 +1844,6 @@ video {
   height: 80px;
 }
 
-.h-\[90\%\]{
-  height: 90%;
-}
-
 .h-\[90px\]{
   height: 90px;
 }
@@ -2114,10 +2086,6 @@ video {
   width: 25%;
 }
 
-.w-1\/5{
-  width: 20%;
-}
-
 .w-1\/6{
   width: 16.666667%;
 }
@@ -2130,10 +2098,6 @@ video {
   width: 83.333333%;
 }
 
-.w-11{
-  width: 2.75rem;
-}
-
 .w-11\/12{
   width: 91.666667%;
 }
@@ -2162,14 +2126,6 @@ video {
   width: 50%;
 }
 
-.w-2\/5{
-  width: 40%;
-}
-
-.w-2\/6{
-  width: 33.333333%;
-}
-
 .w-20{
   width: 5rem;
 }
@@ -2262,10 +2218,6 @@ video {
   width: 2rem;
 }
 
-.w-8\/12{
-  width: 66.666667%;
-}
-
 .w-9{
   width: 2.25rem;
 }
@@ -2274,10 +2226,6 @@ video {
   width: 75%;
 }
 
-.w-\[10\%\]{
-  width: 10%;
-}
-
 .w-\[100px\]{
   width: 100px;
 }
@@ -2330,10 +2278,6 @@ video {
   width: 200px;
 }
 
-.w-\[24\%\]{
-  width: 24%;
-}
-
 .w-\[27px\]{
   width: 27px;
 }
@@ -2402,10 +2346,6 @@ video {
   width: 8rem;
 }
 
-.w-\[90\%\]{
-  width: 90%;
-}
-
 .w-fit{
   width: -webkit-fit-content;
   width: -moz-fit-content;
@@ -2533,18 +2473,6 @@ video {
           transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-.rotate-90{
-  --tw-rotate: 90deg;
-  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-          transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
-.rotate-\[270deg\]{
-  --tw-rotate: 270deg;
-  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-          transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
 .scale-100{
   --tw-scale-x: 1;
   --tw-scale-y: 1;
@@ -2938,12 +2866,6 @@ video {
   margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
 }
 
-.space-x-3 > :not([hidden]) ~ :not([hidden]){
-  --tw-space-x-reverse: 0;
-  margin-right: calc(0.75rem * var(--tw-space-x-reverse));
-  margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
-}
-
 .space-x-4 > :not([hidden]) ~ :not([hidden]){
   --tw-space-x-reverse: 0;
   margin-right: calc(1rem * var(--tw-space-x-reverse));
@@ -4322,14 +4244,6 @@ video {
   padding: 2rem;
 }
 
-.p-\[\.10rem\]{
-  padding: .10rem;
-}
-
-.p-\[0\.10rem\]{
-  padding: 0.10rem;
-}
-
 .p-\[1px\]{
   padding: 1px;
 }
@@ -4550,10 +4464,6 @@ video {
   line-height: 2.25rem;
 }
 
-.text-\[100\%\]{
-  font-size: 100%;
-}
-
 .text-\[10px\]{
   font-size: 10px;
 }
@@ -4586,42 +4496,10 @@ video {
   font-size: 26px;
 }
 
-.text-\[30\%\]{
-  font-size: 30%;
-}
-
-.text-\[40\%\]{
-  font-size: 40%;
-}
-
-.text-\[45\%\]{
-  font-size: 45%;
-}
-
-.text-\[50\%\]{
-  font-size: 50%;
-}
-
-.text-\[55\%\]{
-  font-size: 55%;
-}
-
-.text-\[60\%\]{
-  font-size: 60%;
-}
-
-.text-\[7px\]{
-  font-size: 7px;
-}
-
 .text-\[8px\]{
   font-size: 8px;
 }
 
-.text-\[90\%\]{
-  font-size: 90%;
-}
-
 .text-\[9px\]{
   font-size: 9px;
 }
@@ -4684,10 +4562,6 @@ video {
   font-weight: 600;
 }
 
-.font-thin{
-  font-weight: 100;
-}
-
 .uppercase{
   text-transform: uppercase;
 }
@@ -4784,11 +4658,6 @@ video {
   color: rgb(0 0 0 / var(--tw-text-opacity));
 }
 
-.text-blue-300{
-  --tw-text-opacity: 1;
-  color: rgb(147 197 253 / var(--tw-text-opacity));
-}
-
 .text-blue-400{
   --tw-text-opacity: 1;
   color: rgb(96 165 250 / var(--tw-text-opacity));
@@ -4879,11 +4748,6 @@ video {
   color: rgb(249 115 22 / var(--tw-text-opacity));
 }
 
-.text-orange-600{
-  --tw-text-opacity: 1;
-  color: rgb(234 88 12 / var(--tw-text-opacity));
-}
-
 .text-red-400{
   --tw-text-opacity: 1;
   color: rgb(248 113 113 / var(--tw-text-opacity));
@@ -5232,12 +5096,6 @@ video {
           filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
 
-.sepia{
-  --tw-sepia: sepia(100%);
-  -webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-          filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-}
-
 .filter{
   -webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
           filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);

launcher/src/background.js

@@ -18,6 +18,7 @@ import path from "path";
 import { readFileSync } from "fs";
 import url from "url";
 import checkSigningKeys from "./backend/web3/CSM.js";
+const loudness = require("loudness");
 const isDevelopment = process.env.NODE_ENV !== "production";
 const nodeConnection = new NodeConnection();
 const storageService = new StorageService();
@@ -691,6 +692,15 @@ ipcMain.handle("checkConnectionQuality", async (event, args) => {
   return await nodeConnection.sshService.checkConnectionQuality(args);
 });
 
+ipcMain.handle("set-system-volume", async (event, volume) => {
+  await loudness.setVolume(volume * 100);
+});
+
+ipcMain.handle("get-system-volume", async () => {
+  const volume = await loudness.getVolume();
+  return volume / 100;
+});
+
 ipcMain.handle("startShell", async (event) => {
   if (!nodeConnection.sshService.shellStream) {
     try {

launcher/src/components/UI/node-page/components/alert/NodeAlert.vue

@@ -351,6 +351,7 @@ export default {
       criticalCsm: [],
       notifCsm: [],
       csmInterval: null,
+      volumeSyncInterval: null,
     };
   },
   computed: {
@@ -454,6 +455,7 @@ export default {
     },
   },
   mounted() {
+    this.volumeSyncInterval = setInterval(this.syncSystemVolume, 2000);
     this.checkSettings();
     this.readService();
     this.watchAlertStatus();
@@ -470,6 +472,7 @@ export default {
     }, 120000);
   },
   beforeUnmount() {
+    clearInterval(this.volumeSyncInterval);
     clearInterval(this.polling);
     if (this.obolInterval) {
       clearInterval(this.obolInterval);
@@ -559,10 +562,25 @@ export default {
       }
     },
 
-    volToggle() {
-      this.volState = !this.volState;
-      this.updateSettings(this.volState ? 0.95 : 0);
-      this.cursorLocation = ``;
+    async volToggle() {
+      if (this.volState) {
+        this.currentVolume = await window.promiseIpc.getVolume();
+        await window.promiseIpc.setVolume(0);
+        this.volState = false;
+      } else {
+        await window.promiseIpc.setVolume(this.currentVolume || 0.95);
+        this.volState = true;
+      }
+    },
+
+    async syncSystemVolume() {
+      try {
+        const systemVolume = await window.promiseIpc.getVolume();
+        this.currentVolume = systemVolume;
+        this.volState = systemVolume > 0;
+      } catch (error) {
+        console.error("Failed to sync system volume:", error);
+      }
     },
     iconFilter(arg) {
       if (arg.name === "PrometheusNodeExporter") {