diff options
| -rw-r--r-- | style.scss | 22 | ||||
| -rw-r--r-- | widget/bar/Bar.tsx | 22 |
2 files changed, 44 insertions, 0 deletions
@@ -53,6 +53,28 @@ box.Tray { } } +box.AudioVolume { + min-width: 140px; + + scale { + min-height: 10px; + } + + trough { + border-radius: 0; + } + + highlight { + border-radius: 0; + } + + slider { + border-radius: 7px; + min-width: 5px; + min-height: 5px; + } +} + window.Notifications { background-color: #000; diff --git a/widget/bar/Bar.tsx b/widget/bar/Bar.tsx index b057cdb..7492708 100644 --- a/widget/bar/Bar.tsx +++ b/widget/bar/Bar.tsx @@ -1,6 +1,7 @@ import { App, Astal, Gtk, Gdk } from "astal/gtk4" import { bind, exec, GLib, Variable } from "astal" import AstalTray from "gi://AstalTray?version=0.1"; +import AstalWp from "gi://AstalWp?version=0.1"; type NiriWorkspace = { id: number, @@ -59,6 +60,26 @@ function Workspaces(args: WorkspacesArguments) { } +function AudioVolume() { + const wireplumber = AstalWp.get_default()!; + const speaker = wireplumber.audio.get_default_speaker()!; + + return <box cssClasses={["AudioVolume"]}> + <image iconName={bind(speaker, "volumeIcon")} /> + {/* {bind(speaker, "volume")} */} + <slider + hexpand + onScroll={(_self, dx, dy) => speaker.volume += (dx + dy) * -0.05} + // BUG: this doesn't work due to value being updated immediately with dragging + // so that new value is never reached (slider "freezes") + // onChangeValue={({ value }) => new_volume = value} + // onKeyReleased={() => speaker.volume = new_volume} + value={bind(speaker, "volume")} + /> + </box>; +} + + function Tray() { // BUG: personally I have one fantom icon being along other tray icons // For now I don't have any ideas why this is happening @@ -114,6 +135,7 @@ export default function Bar(gdkmonitor: Gdk.Monitor) { </box> <box halign={Gtk.Align.END}> + <AudioVolume /> <Tray /> <Time format="%I:%M:%S %p %Z" /> </box> |