Files
custum-hyprpanel/modules/bar/volume/index.ts
Jas Singh 6905fb4eb7 Implemented configurable and toggleable button borders. (#279)
* Implemented configurable and toggleable button borders.

* Improve and simplify border logic

* Fix hidden label icon borders.

* Removed button hover property from bar buttons, they dim on hover now by default.

* Rename file.

* Update catppuccin normal theme's storage module color.

* update mocha items

* update mochas

* Update themes to account for borders
2024-09-22 02:59:30 -07:00

107 lines
3.9 KiB
TypeScript

import Gdk from 'gi://Gdk?version=3.0';
const audio = await Service.import('audio');
import { openMenu } from '../utils.js';
import options from 'options';
import { Binding } from 'lib/utils.js';
import { VolumeIcons } from 'lib/types/volume.js';
import { BarBoxChild } from 'lib/types/bar.js';
import { Bind } from 'lib/types/variable.js';
import Button from 'types/widgets/button.js';
import { Attribute, Child } from 'lib/types/widget.js';
import { runAsyncCommand, throttledScrollHandler } from 'customModules/utils.js';
const { rightClick, middleClick, scrollUp, scrollDown } = options.bar.volume;
const Volume = (): BarBoxChild => {
const icons: VolumeIcons = {
101: '󰕾',
66: '󰕾',
34: '󰖀',
1: '󰕿',
0: '󰝟',
};
const getIcon = (): Bind => {
const icon: Binding<number> = Utils.merge(
[audio.speaker.bind('is_muted'), audio.speaker.bind('volume')],
(isMuted, vol) => {
if (isMuted) return 0;
const foundVol = [101, 66, 34, 1, 0].find((threshold) => threshold <= vol * 100);
if (foundVol !== undefined) {
return foundVol;
}
return 101;
},
);
return icon.as((i: number) => (i !== undefined ? icons[i] : icons[101]));
};
const volIcn = Widget.Label({
hexpand: true,
label: getIcon(),
class_name: 'bar-button-icon volume txt-icon bar',
});
const volPct = Widget.Label({
hexpand: true,
label: audio.speaker.bind('volume').as((v) => `${Math.round(v * 100)}%`),
class_name: 'bar-button-label volume',
});
return {
component: Widget.Box({
hexpand: true,
vexpand: true,
className: Utils.merge(
[options.theme.bar.buttons.style.bind('value'), options.bar.volume.label.bind('value')],
(style, showLabel) => {
const styleMap = {
default: 'style1',
split: 'style2',
wave: 'style3',
wave2: 'style3',
};
return `volume-container ${styleMap[style]} ${!showLabel ? 'no-label' : ''}`;
},
),
children: options.bar.volume.label.bind('value').as((showLabel) => {
if (showLabel) {
return [volIcn, volPct];
}
return [volIcn];
}),
}),
isVisible: true,
boxClass: 'volume',
props: {
onPrimaryClick: (clicked: Button<Child, Attribute>, event: Gdk.Event): void => {
openMenu(clicked, event, 'audiomenu');
},
setup: (self: Button<Child, Attribute>): void => {
self.hook(options.bar.scrollSpeed, () => {
const throttledHandler = throttledScrollHandler(options.bar.scrollSpeed.value);
self.on_secondary_click = (clicked: Button<Child, Attribute>, event: Gdk.Event): void => {
runAsyncCommand(rightClick.value, { clicked, event });
};
self.on_middle_click = (clicked: Button<Child, Attribute>, event: Gdk.Event): void => {
runAsyncCommand(middleClick.value, { clicked, event });
};
self.on_scroll_up = (clicked: Button<Child, Attribute>, event: Gdk.Event): void => {
throttledHandler(scrollUp.value, { clicked, event });
};
self.on_scroll_down = (clicked: Button<Child, Attribute>, event: Gdk.Event): void => {
throttledHandler(scrollDown.value, { clicked, event });
};
});
},
},
};
};
export { Volume };