diff options
Diffstat (limited to 'modules/osds.tsx')
| -rw-r--r-- | modules/osds.tsx | 231 |
1 files changed, 231 insertions, 0 deletions
diff --git a/modules/osds.tsx b/modules/osds.tsx new file mode 100644 index 0000000..25c0147 --- /dev/null +++ b/modules/osds.tsx @@ -0,0 +1,231 @@ +import { timeout, Variable, type Time } from "astal"; +import { Astal, Gtk, type Widget } from "astal/gtk3"; +import cairo from "cairo"; +import AstalWp from "gi://AstalWp"; +import Pango from "gi://Pango"; +import PangoCairo from "gi://PangoCairo"; +import { osds as config } from "../config"; +import { type Monitor } from "../services/monitors"; +import { PopupWindow } from "../utils/widgets"; + +const getStyle = (context: Gtk.StyleContext, prop: string) => context.get_property(prop, Gtk.StateFlags.NORMAL); +const getNumStyle = (context: Gtk.StyleContext, prop: string) => getStyle(context, prop) as number; + +const mix = (a: number, b: number, r: number) => a * r + b * (1 - r); + +const pangoWeightToStr = (weight: Pango.Weight) => { + switch (weight) { + case Pango.Weight.ULTRALIGHT: + return "UltraLight"; + case Pango.Weight.LIGHT: + return "Light"; + case Pango.Weight.BOLD: + return "Bold"; + case Pango.Weight.ULTRABOLD: + return "UltraBold"; + case Pango.Weight.HEAVY: + return "Heavy"; + default: + return "Normal"; + } +}; + +const SliderOsd = ({ + fillIcons, + monitor, + type, + windowSetup, + className = "", + initValue, + drawAreaSetup, +}: { + fillIcons?: boolean; + monitor: Monitor; + type: keyof typeof config; + windowSetup: (self: Widget.Window, hideAfterTimeout: () => void) => void; + className?: string; + initValue: number; + drawAreaSetup: (self: Widget.DrawingArea, icon: Variable<string>) => void; +}) => ( + <PopupWindow + name={type} + monitor={monitor.id} + keymode={Astal.Keymode.NONE} + anchor={config[type].position} + margin={config[type].margin} + setup={self => { + let time: Time | null = null; + const hideAfterTimeout = () => { + time?.cancel(); + time = timeout(config[type].hideDelay, () => self.hide()); + }; + self.connect("show", hideAfterTimeout); + windowSetup(self, hideAfterTimeout); + }} + > + <box className={type}> + <drawingarea + className={`inner ${className}`} + css={"font-size: " + initValue + "px;"} + setup={self => { + const halfPi = Math.PI / 2; + const vertical = + config[type].position === Astal.WindowAnchor.LEFT || + config[type].position === Astal.WindowAnchor.RIGHT; + + const icon = Variable(""); + drawAreaSetup(self, icon); + + // Init size + const styleContext = self.get_style_context(); + const width = getNumStyle(styleContext, "min-width"); + const height = getNumStyle(styleContext, "min-height"); + if (vertical) self.set_size_request(height, width); + else self.set_size_request(width, height); + + let fontDesc: Pango.FontDescription | null = null; + + self.connect("draw", (_, cr: cairo.Context) => { + const styleContext = self.get_style_context(); + + let width = getNumStyle(styleContext, "min-width"); + let height = getNumStyle(styleContext, "min-height"); + + const progressValue = getNumStyle(styleContext, "font-size"); + let radius = getNumStyle(styleContext, "border-radius"); + // Flatten when near 0, do before swap cause its simpler + radius = Math.min(radius, Math.min(width * progressValue, height) / 2); + + if (vertical) [width, height] = [height, width]; // Swap if vertical + self.set_size_request(width, height); + + const progressPosition = vertical + ? height * (1 - progressValue) + radius // Top is 0, but we want it to start from the bottom + : width * progressValue - radius; + + const bg = styleContext.get_background_color(Gtk.StateFlags.NORMAL); + cr.setSourceRGBA(bg.red, bg.green, bg.blue, bg.alpha); + + if (vertical) { + cr.arc(radius, progressPosition, radius, -Math.PI, -halfPi); // Top left + cr.arc(width - radius, progressPosition, radius, -halfPi, 0); // Top right + cr.arc(width - radius, height - radius, radius, 0, halfPi); // Bottom right + } else { + cr.arc(radius, radius, radius, -Math.PI, -halfPi); // Top left + cr.arc(progressPosition, radius, radius, -halfPi, 0); // Top right + cr.arc(progressPosition, height - radius, radius, 0, halfPi); // Bottom right + } + cr.arc(radius, height - radius, radius, halfPi, Math.PI); // Bottom left + cr.fill(); + + const parent = self.get_parent(); + if (parent) { + if (fontDesc === null) { + const pContext = parent.get_style_context(); + const families = (getStyle(pContext, "font-family") as string[]).join(","); + const weight = pangoWeightToStr(getStyle(pContext, "font-weight") as Pango.Weight); + const size = getNumStyle(pContext, "font-size"); + fontDesc = Pango.font_description_from_string(`${families} ${weight} ${size}px`); + // Ugh GTK CSS doesn't support font-variations, so you need to manually create the layout and font desc instead of using Gtk.Widget#create_pango_layout + if (fillIcons) fontDesc.set_variations("FILL=1"); + } + + const layout = PangoCairo.create_layout(cr); + layout.set_font_description(fontDesc); + layout.set_text(icon.get(), -1); + + const [w, h] = layout.get_pixel_size(); + let diff; + if (vertical) { + diff = (progressValue * height) / h; + cr.moveTo((width - w) / 2, Math.min(height - h, progressPosition - h / 2 + radius)); + } else { + diff = (progressValue * width) / w; + cr.moveTo(Math.max(0, progressPosition - w / 2 - radius), (height - h) / 2); + } + diff = Math.max(0, Math.min(1, diff)); + + const fg = styleContext.get_color(Gtk.StateFlags.NORMAL); + cr.setSourceRGBA( + mix(fg.red, bg.red, diff), + mix(fg.green, bg.green, diff), + mix(fg.blue, bg.blue, diff), + mix(fg.alpha, bg.alpha, diff) + ); + + cr.setAntialias(cairo.Antialias.BEST); + PangoCairo.show_layout(cr, layout); + } + }); + }} + /> + </box> + </PopupWindow> +); + +const Volume = ({ monitor, audio }: { monitor: Monitor; audio: AstalWp.Audio }) => ( + <SliderOsd + fillIcons + monitor={monitor} + type="volume" + windowSetup={(self, hideAfterTimeout) => { + self.hook(audio.defaultSpeaker, "notify::volume", () => { + self.show(); + hideAfterTimeout(); + }); + }} + className={audio.defaultSpeaker.mute ? "mute" : ""} + initValue={audio.defaultSpeaker.volume} + drawAreaSetup={(self, icon) => { + const updateIcon = () => { + if (/head(phone|set)/i.test(audio.defaultSpeaker.icon)) icon.set("headphones"); + else if (audio.defaultSpeaker.mute) icon.set("no_sound"); + else if (audio.defaultSpeaker.volume === 0) icon.set("volume_mute"); + else if (audio.defaultSpeaker.volume <= 0.5) icon.set("volume_down"); + else icon.set("volume_up"); + }; + updateIcon(); + self.hook(audio.defaultSpeaker, "notify::icon", updateIcon); + self.hook(audio.defaultSpeaker, "notify::mute", () => { + updateIcon(); + self.toggleClassName("mute", audio.defaultSpeaker.mute); + }); + self.hook(audio.defaultSpeaker, "notify::volume", () => { + updateIcon(); + self.css = `font-size: ${audio.defaultSpeaker.volume}px`; + }); + }} + /> +); + +const Brightness = ({ monitor }: { monitor: Monitor }) => ( + <SliderOsd + monitor={monitor} + type="brightness" + windowSetup={(self, hideAfterTimeout) => { + self.hook(monitor, "notify::brightness", () => { + self.show(); + hideAfterTimeout(); + }); + }} + initValue={monitor.brightness} + drawAreaSetup={(self, icon) => { + const update = () => { + if (monitor.brightness > 0.66) icon.set("brightness_high"); + else if (monitor.brightness > 0.33) icon.set("brightness_medium"); + else if (monitor.brightness > 0) icon.set("brightness_low"); + else icon.set("brightness_empty"); + self.css = `font-size: ${monitor.brightness}px`; + }; + self.hook(monitor, "notify::brightness", update); + update(); + }} + /> +); + +export default ({ monitor }: { monitor: Monitor }) => { + if (AstalWp.get_default()) <Volume monitor={monitor} audio={AstalWp.get_default()!.audio} />; + <Brightness monitor={monitor} />; + + return null; +}; |