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

Create Microphone bar module. (#801)

Browse Source 
* Implement microphone module.

* Add catppuccin themes

* Add rest of themes

* Fix comment

* Add nix settings
This commit is contained in:
Jas Singh
2025-02-27 01:24:07 -08:00
committed by GitHub
parent efdcb7d53b
commit f69a0841a8
53 changed files with 1592 additions and 1205 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/bar/exports.ts
View File

@@ -11,6 +11,7 @@ import { Clock } from '../../components/bar/modules/clock/index';
import { SysTray } from '../../components/bar/modules/systray/index';
// Custom Modules
import { Microphone } from '../../components/bar/modules/microphone/index';
import { Ram } from '../../components/bar/modules/ram/index';
import { Cpu } from '../../components/bar/modules/cpu/index';
import { CpuTemp } from '../../components/bar/modules/cputemp/index';
@@ -39,6 +40,7 @@ export {
SysTray,
// Custom Modules
Microphone,
Ram,
Cpu,
CpuTemp,

2
src/components/bar/index.tsx
View File

@@ -12,6 +12,7 @@ import {
SysTray,
// Custom Modules
Microphone,
Ram,
Cpu,
CpuTemp,
@@ -51,6 +52,7 @@ const widget = {
bluetooth: (): JSX.Element => WidgetContainer(Bluetooth()),
clock: (): JSX.Element => WidgetContainer(Clock()),
systray: (): JSX.Element => WidgetContainer(SysTray()),
microphone: (): JSX.Element => WidgetContainer(Microphone()),
ram: (): JSX.Element => WidgetContainer(Ram()),
cpu: (): JSX.Element => WidgetContainer(Cpu()),
cputemp: (): JSX.Element => WidgetContainer(CpuTemp()),

76
src/components/bar/modules/microphone/index.tsx Normal file
View File

@@ -0,0 +1,76 @@
import options from 'src/options';
import { Module } from '../../shared/Module';
import { bind, Variable } from 'astal';
import { BarBoxChild } from 'src/lib/types/bar';
import { Astal } from 'astal/gtk3';
import { inputHandler } from '../../utils/helpers';
import AstalWp from 'gi://AstalWp?version=0.1';
const wireplumber = AstalWp.get_default() as AstalWp.Wp;
const audioService = wireplumber.audio;
const { label, mutedIcon, unmutedIcon, leftClick, rightClick, middleClick, scrollUp, scrollDown } =
options.bar.customModules.microphone;
export const Microphone = (): BarBoxChild => {
const iconBinding = Variable.derive(
[
bind(mutedIcon),
bind(unmutedIcon),
bind(audioService.defaultMicrophone, 'volume'),
bind(audioService.defaultMicrophone, 'mute'),
],
(iconMuted, iconUnmuted, volume, isMuted) => {
if (isMuted || volume === 0) {
return iconMuted;
}
return iconUnmuted;
},
);
const tooltipBinding = Variable.derive(
[
bind(mutedIcon),
bind(unmutedIcon),
bind(audioService.defaultMicrophone, 'description'),
bind(audioService.defaultMicrophone, 'volume'),
bind(audioService.defaultMicrophone, 'mute'),
],
(iconMuted, iconUnmuted, description, volume, isMuted) => {
const icon = isMuted || !volume ? iconMuted : iconUnmuted;
return `${icon} ${description}`;
},
);
const microphoneModule = Module({
textIcon: iconBinding(),
label: bind(audioService.defaultMicrophone, 'volume').as((vol) => `${Math.round(vol * 100)}%`),
tooltipText: tooltipBinding(),
boxClass: 'mic',
showLabelBinding: bind(label),
props: {
setup: (self: Astal.Button) => {
inputHandler(self, {
onPrimaryClick: {
cmd: leftClick,
},
onSecondaryClick: {
cmd: rightClick,
},
onMiddleClick: {
cmd: middleClick,
},
onScrollUp: {
cmd: scrollUp,
},
onScrollDown: {
cmd: scrollDown,
},
});
},
},
});
return microphoneModule;
};

17
src/components/bar/settings/config.tsx
View File

@@ -16,6 +16,23 @@ export const CustomModuleSettings = (): JSX.Element => {
<Header title="General" />
<Option opt={options.bar.customModules.scrollSpeed} title="Scrolling Speed" type="number" />
{/* Microphone Section */}
<Header title="Microphone" />
<Option
opt={options.theme.bar.buttons.modules.microphone.enableBorder}
title="Button Border"
type="boolean"
/>
<Option opt={options.bar.customModules.microphone.label} title="Show Label" type="boolean" />
<Option opt={options.bar.customModules.microphone.mutedIcon} title="Muted Icon" type="string" />
<Option opt={options.bar.customModules.microphone.unmutedIcon} title="Unmuted Icon" type="string" />
<Option opt={options.theme.bar.buttons.modules.microphone.spacing} title="Spacing" type="string" />
<Option opt={options.bar.customModules.microphone.leftClick} title="Left Click" type="string" />
<Option opt={options.bar.customModules.microphone.rightClick} title="Right Click" type="string" />
<Option opt={options.bar.customModules.microphone.middleClick} title="Middle Click" type="string" />
<Option opt={options.bar.customModules.microphone.scrollUp} title="Scroll Up" type="string" />
<Option opt={options.bar.customModules.microphone.scrollDown} title="Scroll Down" type="string" />
{/* RAM Section */}
<Header title="RAM" />
<Option opt={options.theme.bar.buttons.modules.ram.enableBorder} title="Button Border" type="boolean" />

17
src/components/bar/settings/theme.tsx
View File

@@ -14,6 +14,23 @@ export const CustomModuleTheme = (): JSX.Element => {
vexpand={false}
>
<box vertical>
{/* Microphone Module Section */}
<Header title="Microphone" />
<Option opt={options.theme.bar.buttons.modules.microphone.text} title="Text" type="color" />
<Option opt={options.theme.bar.buttons.modules.microphone.icon} title="Icon" type="color" />
<Option
opt={options.theme.bar.buttons.modules.microphone.background}
title="Label Background"
type="color"
/>
<Option
opt={options.theme.bar.buttons.modules.microphone.icon_background}
title="Icon Background"
subtitle="Applies a background color to the icon section of the button.\nRequires 'split' button styling."
type="color"
/>
<Option opt={options.theme.bar.buttons.modules.microphone.border} title="Border" type="color" />
{/* RAM Module Section */}
<Header title="RAM" />
<Option opt={options.theme.bar.buttons.modules.ram.text} title="Text" type="color" />

19
src/options.ts
View File

@@ -310,6 +310,15 @@ const options = mkOptions(CONFIG, {
spacing: opt('0.5em'),
},
modules: {
microphone: {
enableBorder: opt(false),
border: opt(colors.green),
background: opt(colors.base2),
text: opt(colors.green),
icon: opt(colors.green),
icon_background: opt(colors.base2),
spacing: opt('0.45em'),
},
ram: {
enableBorder: opt(false),
border: opt(colors.yellow),
@@ -1051,6 +1060,16 @@ const options = mkOptions(CONFIG, {
},
customModules: {
scrollSpeed: opt(5),
microphone: {
label: opt(true),
mutedIcon: opt('󰍭'),
unmutedIcon: opt('󰍬'),
leftClick: opt('menu:audio'),
rightClick: opt(''),
middleClick: opt(''),
scrollUp: opt(''),
scrollDown: opt(''),
},
ram: {
icon: opt(''),
label: opt(true),

30
src/scss/style/bar/style.scss
View File

@@ -10,6 +10,7 @@
.module-icon {
font-size: 1em;
min-width: 0.7em;
}
.style2 {
@@ -126,6 +127,33 @@
}
}
/*
* #################################
* # Mic Module Styling #
* #################################
*/
@include styleModule(
//
// class name
'mic',
// label color
$bar-buttons-modules-microphone-text,
// icon color
$bar-buttons-modules-microphone-icon,
// icon background if split style is used
$bar-buttons-modules-microphone-icon_background,
// label background
$bar-buttons-modules-microphone-background,
// inner spacing
$bar-buttons-modules-microphone-spacing,
//
// if border enabled
$bar-buttons-modules-microphone-enableBorder,
// border color
$bar-buttons-modules-microphone-border,
1.3em
);
/*
* #################################
* # Ram Module Styling #
@@ -474,4 +502,4 @@
$bar-buttons-modules-cava-border,
// custom font size
1.2em //
);
);