38 lines
947 B
TypeScript
38 lines
947 B
TypeScript
import { type WheelEvent, useState } from "react";
|
|
import { clamp } from "~/utils/math";
|
|
import { WaybarWidget } from "../WaybarWidget";
|
|
import { useApp } from "~/hooks/useApp";
|
|
import { lerpIcon } from "~/utils/icons";
|
|
|
|
const ICONS = ["", "", ""];
|
|
|
|
export const WaybarVolumeWidget = () => {
|
|
const [muted, setMuted] = useState(false);
|
|
const { volume, setVolume } = useApp();
|
|
|
|
const handleWheel = (e: WheelEvent) => {
|
|
let newVolume = volume - Math.sign(e.deltaY) * 5;
|
|
newVolume = clamp(newVolume, 0, 100);
|
|
|
|
setVolume(newVolume);
|
|
};
|
|
|
|
const handleClick = () => {
|
|
setMuted(!muted);
|
|
};
|
|
|
|
const icon = muted ? "" : lerpIcon(ICONS, volume, 100);
|
|
|
|
return (
|
|
<WaybarWidget className="px-[0.625rem]" interactable>
|
|
<span
|
|
className="text-[#407cdd]"
|
|
onWheel={handleWheel}
|
|
onClick={handleClick}
|
|
>
|
|
{icon} {!muted && `${volume}%`}
|
|
</span>
|
|
</WaybarWidget>
|
|
);
|
|
};
|