OSDs are now click through and can have borders. (Jas-SinghFSU#674)

zenitraM · Dec 30, 2024 · d2e02f5 · d2e02f5
1 parent d49a750
commit d2e02f5
Show file tree

Hide file tree

Showing 7 changed files with 119 additions and 165 deletions.
diff --git a/nix/module.nix b/nix/module.nix
@@ -551,6 +551,7 @@ in
       theme.osd.opacity = mkIntOption 100;
       theme.osd.orientation = mkStrOption "vertical";
       theme.osd.radius = mkStrOption "0.4em";
+      theme.osd.border.size = mkStrOption "0em";
       theme.osd.scaling = mkIntOption 100;
       theme.tooltip.scaling = mkIntOption 100;
       wallpaper.enable = mkBoolOption true;

diff --git a/src/components/osd/helpers.ts b/src/components/osd/helpers.ts
@@ -1,4 +1,3 @@
-import { Binding } from 'astal';
 import { bind, timeout, Variable } from 'astal';
 import { Widget } from 'astal/gtk3';
 import { audioService, brightnessService, hyprlandService } from 'src/lib/constants/services';
@@ -17,85 +16,42 @@ timeout(3000, () => {
 });
 
 /**
- * Handles the reveal state of a Widget.Revealer.
+ * Handles the reveal state of a Widget.Revealer or Widget.Window.
  *
- * This function sets the `reveal_child` property of the Widget.Revealer to true if the OSD is enabled and the property is 'revealChild'.
- * It also manages a timeout to reset the `reveal_child` property after the specified duration.
+ * This function delegates the reveal handling to either `handleRevealRevealer` or `handleRevealWindow` based on the type of the widget.
  *
- * @param self The Widget.Revealer instance.
+ * @param self The Widget.Revealer or Widget.Window instance.
  * @param property The property to check, either 'revealChild' or 'visible'.
  */
-export const handleRevealRevealer = (self: Widget.Revealer, property: 'revealChild' | 'visible'): void => {
-    if (!enable.get() || property !== 'revealChild') {
+export const handleReveal = (self: Widget.Revealer): void => {
+    if (isStartingUp) {
         return;
     }
 
-    self.reveal_child = true;
-
-    count++;
-    timeout(duration.get(), () => {
-        count--;
-
-        if (count === 0) {
-            self.reveal_child = false;
-        }
-    });
-};
-
-/**
- * Handles the reveal state of a Widget.Window.
- *
- * This function sets the `visible` property of the Widget.Window to true if the OSD is enabled and the property is 'visible'.
- * It also manages a timeout to reset the `visible` property after the specified duration.
- *
- * @param self The Widget.Window instance.
- * @param property The property to check, either 'revealChild' or 'visible'.
- */
-export const handleRevealWindow = (self: Widget.Window, property: 'revealChild' | 'visible'): void => {
-    if (!enable.get() || property !== 'visible') {
+    if (!enable.get()) {
         return;
     }
 
-    self.visible = true;
+    self.reveal_child = true;
 
     count++;
     timeout(duration.get(), () => {
         count--;
 
         if (count === 0) {
-            self.visible = false;
+            self.reveal_child = false;
         }
     });
 };
 
-/**
- * Handles the reveal state of a Widget.Revealer or Widget.Window.
- *
- * This function delegates the reveal handling to either `handleRevealRevealer` or `handleRevealWindow` based on the type of the widget.
- *
- * @param self The Widget.Revealer or Widget.Window instance.
- * @param property The property to check, either 'revealChild' or 'visible'.
- */
-export const handleReveal = (self: Widget.Revealer | Widget.Window, property: 'revealChild' | 'visible'): void => {
-    if (isStartingUp) {
-        return;
-    }
-
-    if (self instanceof Widget.Revealer) {
-        handleRevealRevealer(self, property);
-    } else if (self instanceof Widget.Window) {
-        handleRevealWindow(self, property);
-    }
-};
-
 /**
  * Retrieves the monitor index for the OSD.
  *
  * This function derives the monitor index for the OSD based on the focused monitor, default monitor, and active monitor settings.
  *
- * @returns A Binding<number> representing the monitor index for the OSD.
+ * @returns A Variable<number> representing the monitor index for the OSD.
  */
-export const getOsdMonitor = (): Binding<number> => {
+export const getOsdMonitor = (): Variable<number> => {
     return Variable.derive(
         [bind(hyprlandService, 'focusedMonitor'), bind(monitor), bind(active_monitor)],
         (currentMonitor, defaultMonitor, followMonitor) => {
@@ -105,39 +61,7 @@ export const getOsdMonitor = (): Binding<number> => {
 
             return defaultMonitor;
         },
-    )();
-};
-
-/**
- * Sets up the window for OSD.
- *
- * This function hooks various services and settings to the window to handle its visibility based on the OSD configuration.
- *
- * @param self The Widget.Window instance to set up.
- */
-export const windowSetup = (self: Widget.Window): void => {
-    self.hook(enable, () => {
-        handleReveal(self, 'visible');
-    });
-
-    self.hook(brightnessService, 'notify::screen', () => {
-        handleReveal(self, 'visible');
-    });
-
-    self.hook(brightnessService, 'notify::kbd', () => {
-        handleReveal(self, 'visible');
-    });
-
-    Variable.derive(
-        [bind(audioService.defaultMicrophone, 'volume'), bind(audioService.defaultMicrophone, 'mute')],
-        () => {
-            handleReveal(self, 'visible');
-        },
     );
-
-    Variable.derive([bind(audioService.defaultSpeaker, 'volume'), bind(audioService.defaultSpeaker, 'mute')], () => {
-        handleReveal(self, 'visible');
-    });
 };
 
 /**
@@ -149,25 +73,25 @@ export const windowSetup = (self: Widget.Window): void => {
  */
 export const revealerSetup = (self: Widget.Revealer): void => {
     self.hook(enable, () => {
-        handleReveal(self, 'revealChild');
+        handleReveal(self);
     });
 
     self.hook(brightnessService, 'notify::screen', () => {
-        handleReveal(self, 'revealChild');
+        handleReveal(self);
     });
 
     self.hook(brightnessService, 'notify::kbd', () => {
-        handleReveal(self, 'revealChild');
+        handleReveal(self);
     });
 
     Variable.derive(
         [bind(audioService.defaultMicrophone, 'volume'), bind(audioService.defaultMicrophone, 'mute')],
         () => {
-            handleReveal(self, 'revealChild');
+            handleReveal(self);
         },
     );
 
     Variable.derive([bind(audioService.defaultSpeaker, 'volume'), bind(audioService.defaultSpeaker, 'mute')], () => {
-        handleReveal(self, 'revealChild');
+        handleReveal(self);
     });
 };
diff --git a/src/components/osd/index.tsx b/src/components/osd/index.tsx
@@ -2,22 +2,26 @@ import options from 'src/options';
 import { getPosition } from 'src/lib/utils';
 import { bind } from 'astal';
 import { Astal } from 'astal/gtk3';
-import { getOsdMonitor, windowSetup } from './helpers';
+import { getOsdMonitor } from './helpers';
 import { OsdRevealer } from './OsdRevealer';
 
 const { location } = options.theme.osd;
 
 export default (): JSX.Element => {
     return (
         <window
-            monitor={getOsdMonitor()}
+            monitor={getOsdMonitor()()}
             name={'indicator'}
             namespace={'indicator'}
             className={'indicator'}
-            visible={false}
+            visible={true}
             layer={bind(options.tear).as((tear) => (tear ? Astal.Layer.TOP : Astal.Layer.OVERLAY))}
             anchor={bind(location).as((anchorPoint) => getPosition(anchorPoint))}
-            setup={windowSetup}
+            setup={(self) => {
+                getOsdMonitor().subscribe(() => {
+                    self.set_click_through(true);
+                });
+            }}
             clickThrough
         >
             <OsdRevealer />

diff --git a/src/components/settings/pages/config/osd/index.tsx b/src/components/settings/pages/config/osd/index.tsx
@@ -42,13 +42,14 @@ export const OSDSettings = (): JSX.Element => {
                     subtitle="OSD follows monitor of cursor"
                     type="boolean"
                 />
-                <Option opt={options.theme.osd.radius} title="Radius" subtitle="Radius of the OSD" type="string" />
                 <Option
                     opt={options.theme.osd.margins}
                     title="Margins"
                     subtitle="Format: top right bottom left"
                     type="string"
                 />
+                <Option opt={options.theme.osd.border.size} title="Border Size" type="string" />
+                <Option opt={options.theme.osd.radius} title="Radius" subtitle="Radius of the OSD" type="string" />
                 <Option
                     opt={options.theme.osd.muted_zero}
                     title="Mute Volume as Zero"

diff --git a/src/components/settings/pages/theme/osd/index.tsx b/src/components/settings/pages/theme/osd/index.tsx
@@ -24,6 +24,7 @@ export const OsdTheme = (): JSX.Element => {
                     min={0}
                     max={100}
                 />
+                <Option opt={options.theme.osd.border.color} title="Border" type="color" />
                 <Option opt={options.theme.osd.bar_color} title="Bar" type="color" />
                 <Option
                     opt={options.theme.osd.bar_overflow_color}

diff --git a/src/options.ts b/src/options.ts
@@ -134,6 +134,10 @@ const options = mkOptions(CONFIG, {
             enable: opt(true),
             orientation: opt<OSDOrientation>('vertical'),
             opacity: opt(100),
+            border: {
+                size: opt('0em'),
+                color: opt(colors.lavender),
+            },
             bar_container: opt(colors.crust),
             icon_container: opt(tertiary_colors.lavender),
             bar_color: opt(tertiary_colors.lavender),