Fixes a OSD bug when un-/muting and adds a toggle to display volume as 0 when muting (#151)

* added muted_zero option to only display 0 volume in osd when enabled

* Fix OSD brightness persisting overflow class

* Update modules/osd/bar/index.ts

* Apply suggestions from code review

---------

Co-authored-by: Jas Singh <jaskiratpal.singh@outlook.com>

modules/osd/bar/index.ts

@@ -1,5 +1,6 @@
 import { OSDOrientation } from "lib/types/options";
 import brightness from "services/Brightness"
+import options from "options"
 const audio = await Service.import("audio")
 
 export const OSDBar = (ort: OSDOrientation) => {
@@ -13,19 +14,29 @@ export const OSDBar = (ort: OSDOrientation) => {
                 bar_mode: "continuous",
                 setup: self => {
                     self.hook(brightness, () => {
+                        self.class_names = self.class_names.filter(c => c !== "overflow");
                         self.value = brightness.screen;
                     }, "notify::screen")
                     self.hook(brightness, () => {
+                        self.class_names = self.class_names.filter(c => c !== "overflow");
                         self.value = brightness.kbd;
                     }, "notify::kbd")
                     self.hook(audio.microphone, () => {
                         self.toggleClassName("overflow", audio.microphone.volume > 1)
                         self.value = audio.microphone.volume <= 1 ? audio.microphone.volume : audio.microphone.volume - 1;
                     }, "notify::volume")
+                    self.hook(audio.microphone, () => {
+                        self.toggleClassName("overflow", audio.microphone.volume > 1 && (!options.theme.osd.muted_zero.value || audio.microphone.is_muted === false));
+                        self.value = (options.theme.osd.muted_zero.value && audio.microphone.is_muted !== false) ? 0 : audio.microphone.volume <= 1 ? audio.microphone.volume : audio.microphone.volume - 1;
+                    }, "notify::is-muted")
                     self.hook(audio.speaker, () => {
                         self.toggleClassName("overflow", audio.speaker.volume > 1)
                         self.value = audio.speaker.volume <= 1 ? audio.speaker.volume : audio.speaker.volume - 1;
                     }, "notify::volume")
+                    self.hook(audio.speaker, () => {
+                        self.toggleClassName("overflow", audio.speaker.volume > 1 && (!options.theme.osd.muted_zero.value || audio.speaker.is_muted === false));
+                        self.value = options.theme.osd.muted_zero.value && audio.speaker.is_muted !== false ? 0 : audio.speaker.volume <= 1 ? audio.speaker.volume : audio.speaker.volume - 1;
+                    }, "notify::is-muted")
                 }
             })
         ]

modules/osd/label/index.ts

@@ -1,5 +1,6 @@
 import { OSDOrientation } from "lib/types/options";
 import brightness from "services/Brightness"
+import options from "options"
 const audio = await Service.import("audio")
 
 export const OSDLabel = (ort: OSDOrientation) => {
@@ -15,19 +16,29 @@ export const OSDLabel = (ort: OSDOrientation) => {
             vpack: "center",
             setup: self => {
                 self.hook(brightness, () => {
+                    self.class_names = self.class_names.filter(c => c !== "overflow");
                     self.label = `${Math.round(brightness.screen * 100)}`;
                 }, "notify::screen")
                 self.hook(brightness, () => {
+                    self.class_names = self.class_names.filter(c => c !== "overflow");
                     self.label = `${Math.round(brightness.kbd * 100)}`;
                 }, "notify::kbd")
                 self.hook(audio.microphone, () => {
                     self.toggleClassName("overflow", audio.microphone.volume > 1)
                     self.label = `${Math.round(audio.microphone.volume * 100)}`;
                 }, "notify::volume")
+                self.hook(audio.microphone, () => {
+                    self.toggleClassName("overflow", audio.microphone.volume > 1 && (!options.theme.osd.muted_zero.value || audio.microphone.is_muted === false));
+                    self.label = `${options.theme.osd.muted_zero.value && audio.microphone.is_muted !== false ? 0 : Math.round(audio.microphone.volume * 100)}`;
+                }, "notify::is-muted")
                 self.hook(audio.speaker, () => {
                     self.toggleClassName("overflow", audio.speaker.volume > 1)
                     self.label = `${Math.round(audio.speaker.volume * 100)}`;
                 }, "notify::volume")
+                self.hook(audio.speaker, () => {
+                    self.toggleClassName("overflow", audio.speaker.volume > 1 && (!options.theme.osd.muted_zero.value || audio.speaker.is_muted === false));
+                    self.label = `${options.theme.osd.muted_zero.value && audio.speaker.is_muted !== false ? 0 : Math.round(audio.speaker.volume * 100)}`;
+                }, "notify::is-muted")
             }
         })
     });

options.ts

@@ -119,6 +119,7 @@ const options = mkOptions(OPTIONS, {
             radius: opt("0.4em"),
             margins: opt("0px 5px 0px 0px"),
             location: opt<OSDAnchor>("right"),
+            muted_zero: opt(false),
         },
         bar: {
             scaling: opt(100),

widget/settings/pages/config/osd/index.ts

@@ -18,6 +18,7 @@ export const OSDSettings = () => {
                 Option({ opt: options.theme.osd.active_monitor, title: 'Follow Cursor', subtitle: 'The OSD will follow the monitor of your cursor', type: 'boolean' }),
                 Option({ opt: options.theme.osd.radius, title: 'Radius', subtitle: 'Radius of the on-screen-display that indicates volume/brightness change', type: 'string' }),
                 Option({ opt: options.theme.osd.margins, title: 'Margins', subtitle: 'Margins in the following format: top right bottom left', type: 'string' }),
+                Option({ opt: options.theme.osd.muted_zero, title: 'Mute Volume as Zero', subtitle: 'Display volume as 0 when muting, instead of previous device volume', type: 'boolean' }),
             ]
         })
     })