102 lines
3.5 KiB
TypeScript
102 lines
3.5 KiB
TypeScript
import AstalWp from "gi://AstalWp"
|
|
import { execAsync, Variable, bind } from "astal"
|
|
import Dropdown from "./Dropdown"
|
|
|
|
const speaker = AstalWp.get_default().audio.default_speaker!
|
|
const mic = AstalWp.get_default().audio.default_microphone
|
|
|
|
const speakerIcon = Variable.derive(
|
|
[bind(speaker, "volume"), bind(speaker, "mute")],
|
|
(volume, mute) => {
|
|
if (mute || volume <= 0.01) return "audio-volume-muted-symbolic"
|
|
if (volume < 0.33) return "audio-volume-low-symbolic"
|
|
if (volume < 0.66) return "audio-volume-medium-symbolic"
|
|
return "audio-volume-high-symbolic"
|
|
},
|
|
)
|
|
|
|
const micIcon = mic
|
|
? Variable.derive([bind(mic, "volume"), bind(mic, "mute")], (volume, mute) =>
|
|
mute || volume <= 0.01
|
|
? "microphone-sensitivity-muted-symbolic"
|
|
: "microphone-sensitivity-high-symbolic",
|
|
)
|
|
: null
|
|
|
|
const actions = [
|
|
{ icon: "system-lock-screen-symbolic", cmd: ["hyprlock"] },
|
|
{ icon: "weather-clear-night-symbolic", cmd: ["systemctl", "suspend"] },
|
|
{ icon: "system-log-out-symbolic", cmd: ["hyprctl", "dispatch", "exit"] },
|
|
{ icon: "system-reboot-symbolic", cmd: ["systemctl", "reboot"] },
|
|
{ icon: "system-shutdown-symbolic", cmd: ["systemctl", "poweroff"] },
|
|
]
|
|
|
|
export default function QuickSettings(gdkmonitor: Gdk.Monitor) {
|
|
const open = Variable(false)
|
|
|
|
const button = (
|
|
<button
|
|
className="quicksettings end"
|
|
onClicked={() => open.set(!open.get())}
|
|
onScroll={(_, e) => {
|
|
const volume = Math.min(
|
|
1,
|
|
Math.max(0, speaker.volume - e.delta_y * 0.02),
|
|
)
|
|
speaker.volume = volume
|
|
}}
|
|
>
|
|
<box spacing={6}>
|
|
<icon icon={speakerIcon()} />
|
|
{micIcon && <icon icon={micIcon()} />}
|
|
</box>
|
|
</button>
|
|
)
|
|
|
|
const popup = (
|
|
<Dropdown gdkmonitor={gdkmonitor} target={button} open={open} width={280}>
|
|
<box className="power-header" homogeneous>
|
|
{actions.map((action) => (
|
|
<button
|
|
className="power-action"
|
|
onClicked={() => execAsync(action.cmd)}
|
|
>
|
|
<icon icon={action.icon} />
|
|
</button>
|
|
))}
|
|
</box>
|
|
<box className="qs-row">
|
|
<button
|
|
className="qs-toggle"
|
|
onClicked={() => (speaker.mute = !speaker.mute)}
|
|
>
|
|
<icon icon={speakerIcon()} />
|
|
</button>
|
|
<slider
|
|
className="vol-slider"
|
|
hexpand
|
|
value={bind(speaker, "volume")}
|
|
onDragged={(self) => (speaker.volume = self.value)}
|
|
/>
|
|
</box>
|
|
{mic && micIcon && (
|
|
<box className="qs-row">
|
|
<button
|
|
className="qs-toggle"
|
|
onClicked={() => (mic.mute = !mic.mute)}
|
|
>
|
|
<icon icon={micIcon()} />
|
|
</button>
|
|
<slider
|
|
className="vol-slider"
|
|
hexpand
|
|
value={bind(mic, "volume")}
|
|
onDragged={(self) => (mic.volume = self.value)}
|
|
/>
|
|
</box>
|
|
)}
|
|
</Dropdown>
|
|
)
|
|
|
|
return { button, popup }
|
|
} |