diff --git a/assets/icons/hicolor/scalable/devices/fa-microphone-symbolic.svg b/assets/icons/hicolor/scalable/devices/fa-microphone-symbolic.svg
new file mode 100644
index 0000000..328b1cf
--- /dev/null
+++ b/assets/icons/hicolor/scalable/devices/fa-microphone-symbolic.svg
@@ -0,0 +1 @@
+
diff --git a/assets/icons/hicolor/scalable/devices/fa-speaker-muted-symbolic.svg b/assets/icons/hicolor/scalable/devices/fa-speaker-muted-symbolic.svg
new file mode 100644
index 0000000..d2e98c4
--- /dev/null
+++ b/assets/icons/hicolor/scalable/devices/fa-speaker-muted-symbolic.svg
@@ -0,0 +1 @@
+
diff --git a/assets/icons/hicolor/scalable/devices/fa-speaker-symbolic.svg b/assets/icons/hicolor/scalable/devices/fa-speaker-symbolic.svg
new file mode 100644
index 0000000..b8f5065
--- /dev/null
+++ b/assets/icons/hicolor/scalable/devices/fa-speaker-symbolic.svg
@@ -0,0 +1 @@
+
diff --git a/flake.nix b/flake.nix
index 9c4a99e..bc26fb4 100644
--- a/flake.nix
+++ b/flake.nix
@@ -29,6 +29,7 @@
tray
network
notifd
+ wireplumber
];
extraPackages =
diff --git a/style/_bar.scss b/style/_bar.scss
index 38d7657..9c66894 100644
--- a/style/_bar.scss
+++ b/style/_bar.scss
@@ -78,4 +78,22 @@ window.Bar {
padding: 0px 5px;
}
}
+
+ .volume {
+ image {
+ -gtk-icon-size: 1.5rem;
+ }
+
+ trough {
+ background-color: $bg-color;
+ min-height: 10px;
+ border-radius: 10px;
+ }
+
+ highlight {
+ background-color: $fg-color;
+ min-height: 10px;
+ border-radius: 10px;
+ }
+ }
}
diff --git a/widgets/bar/index.tsx b/widgets/bar/index.tsx
index 128153d..cb280e7 100644
--- a/widgets/bar/index.tsx
+++ b/widgets/bar/index.tsx
@@ -10,6 +10,7 @@ import { Tailscale } from "./tailscale";
import { Time } from "./time";
import { Tray } from "./tray";
import { FocusedClient, WorkspaceButton } from "./workspace";
+import { Volume } from "./volume";
export const WINDOW_NAME = "bar";
@@ -42,6 +43,7 @@ export const Bar = (gdkmonitor: Gdk.Monitor) => {
+
diff --git a/widgets/bar/volume.tsx b/widgets/bar/volume.tsx
new file mode 100644
index 0000000..63d9faa
--- /dev/null
+++ b/widgets/bar/volume.tsx
@@ -0,0 +1,36 @@
+import { createBinding } from "ags";
+import AstalWp from "gi://AstalWp";
+
+export const Volume = () => {
+ const { defaultSpeaker: speaker, defaultMicrophone: microphone } =
+ AstalWp.get_default()!;
+
+ const speakerIsMuted = createBinding(speaker, "mute");
+
+ return (
+ <>
+
+
+ val ? "fa-speaker-muted-symbolic" : "fa-speaker-symbolic",
+ )}
+ />
+
+ speaker.set_volume(value)}
+ value={createBinding(speaker, "volume")}
+ />
+
+
+
+
+ microphone.set_volume(value)}
+ value={createBinding(microphone, "volume")}
+ />
+
+
+ );
+};