Upload to github

widget/volume.tsx

@@ -0,0 +1,99 @@
+import Wp from "gi://AstalWp"
+import Hyprland from "gi://AstalHyprland";
+import { bind } from "astal"
+import { Astal, Gtk, Gdk } from "astal/gtk3";
+import { popup } from "./popup"
+const { TOP, LEFT } = Astal.WindowAnchor
+
+const audio = Wp.get_default()?.audio;
+const hyprland = Hyprland.get_default()
+
+function speakerIcon(icon: string): string {
+	switch (icon) {
+		case "audio-headset-bluetooth":
+			return "audio-headset"
+		case "audio-card-analog-pci":
+			return "audio-speakers"
+		default:
+			return "speakers"
+	}
+}
+
+function speakerVolume(speaker: Wp.Endpoint) {
+	return <box vertical={true} className="volSlider">
+		<box>
+			<icon 
+				icon={speakerIcon(speaker.icon)}
+				css="font-size: 32px;"
+			/>
+			<label>{speaker.description}</label>
+		</box>
+		<slider
+			halign={Gtk.Align.START}
+			valign={Gtk.Align.CENTER}
+			min={0}
+			max={1}
+			value={bind(speaker, "volume").as((s) => {
+				return s
+			})}
+			onDragged={(self) => {
+				speaker.volume = self.value
+			}}
+		/>
+	</box>
+}
+
+function VolWindow() {
+	return <window
+		className="popupWindow"
+		anchor={TOP | LEFT}
+		namespace="lazerpopup">
+		<box
+			vertical={true}
+			css="margin-left: 70px;">
+			{bind(audio, "speakers").as(speakers => speakers.map(s => speakerVolume(s)))}
+		</box>
+	</window>
+}
+
+export default function volume() {
+	return <button
+		className="scroller"
+		onScroll={(self, diff) => {
+			audio.defaultSpeaker.volume -= diff.delta_y/20
+		}}
+		onClicked={(self) => {
+			if (popup.state !== "volume") {
+				if (popup.window !== null) {
+					popup.window.destroy()
+					popup.window = null
+				}
+				popup.window = VolWindow();
+				popup.state = "volume"
+				self.toggleClassName("selected", true)
+				self.hook(popup.window, "destroy", () => {
+					self.toggleClassName("selected", false)
+				})
+			} else {
+				popup.window.destroy()
+				popup.window = null
+				popup.state = ""
+			}}}
+		>
+		<box>
+			<icon
+				icon="myvolume-symbolic"
+				css="font-size: 24px; color: white;"
+			/>
+			<levelbar
+				valign={Gtk.Align.CENTER}
+				vertical={true}
+				inverted={true}
+				minValue={0}
+				maxValue={1}
+				heightRequest={24}
+				value={bind(audio.defaultSpeaker, "volume").as((v) => v)}
+			/>
+		</box>
+	</button>
+}