LESA/custum-hyprpanel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Jas Singh
2024-12-30 04:09:16 -08:00
committed by GitHub
parent d49a750bfd
commit d2e02f553a
7 changed files with 121 additions and 167 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
src/components/osd/helpers.ts
View File

@@ -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,16 +16,19 @@ 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;
}
if (!enable.get()) {
return;
}
@@ -42,60 +44,14 @@ export const handleRevealRevealer = (self: Widget.Revealer, property: 'revealChi
});
};
/**
* 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') {
return;
}
self.visible = true;
count++;
timeout(duration.get(), () => {
count--;
if (count === 0) {
self.visible = 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);
});
};

12
src/components/osd/index.tsx
View File

@@ -2,7 +2,7 @@ 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;
@@ -10,14 +10,18 @@ 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 />

3
src/components/settings/pages/config/osd/index.tsx
View File

@@ -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"

1
src/components/settings/pages/theme/osd/index.tsx
View File

@@ -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}