Added volume sliders and a list of all input/output devices.
This commit is contained in:
Jas Singh
@@ -1,5 +1,5 @@
|
||||
const date = Variable("", {
|
||||
poll: [1000, 'date "+ %a %b%e %I:%M:%S %p"'],
|
||||
poll: [1000, 'date "+ %a %b %d %I:%M:%S %p"'],
|
||||
});
|
||||
|
||||
const Clock = () => {
|
||||
|
||||
@@ -1,153 +1,57 @@
|
||||
const hyprland = await Service.import("hyprland");
|
||||
|
||||
export const Padding = (name) =>
|
||||
Widget.EventBox({
|
||||
hexpand: true,
|
||||
vexpand: true,
|
||||
can_focus: false,
|
||||
can_focus: true,
|
||||
child: Widget.Box(),
|
||||
setup: (w) => w.on("button-press-event", () => App.toggleWindow(name)),
|
||||
});
|
||||
|
||||
const PopupRevealer = (name, child, transition = "slide_down") =>
|
||||
Widget.Box(
|
||||
{ css: "padding: 1px;" },
|
||||
Widget.Revealer({
|
||||
transition,
|
||||
child: Widget.Box({
|
||||
class_name: "window-content",
|
||||
child,
|
||||
}),
|
||||
transitionDuration: 400,
|
||||
setup: (self) =>
|
||||
self.hook(App, (_, wname, visible) => {
|
||||
if (wname === name) self.reveal_child = visible;
|
||||
}),
|
||||
}),
|
||||
);
|
||||
const moveBoxToCursor = (self, minWidth, minHeight, child) => {
|
||||
function getAllMethods(object) {
|
||||
return Object.getOwnPropertyNames(object).filter(function (property) {
|
||||
return typeof object[property] == "function";
|
||||
});
|
||||
}
|
||||
globalMousePos.connect("changed", ({ value }) => {
|
||||
console.log(child.get_allocated_height());
|
||||
console.log(child.get_allocated_width());
|
||||
let monWidth = hyprland.monitors[hyprland.active.monitor.id].width;
|
||||
let monHeight = hyprland.monitors[hyprland.active.monitor.id].height;
|
||||
|
||||
const Layout = (name, child, transition) => ({
|
||||
center: () =>
|
||||
Widget.CenterBox(
|
||||
{},
|
||||
Padding(name),
|
||||
Widget.CenterBox(
|
||||
{ vertical: true },
|
||||
Padding(name),
|
||||
PopupRevealer(name, child, transition),
|
||||
Padding(name),
|
||||
),
|
||||
Padding(name),
|
||||
),
|
||||
top: () =>
|
||||
Widget.CenterBox(
|
||||
{},
|
||||
Padding(name),
|
||||
Widget.Box(
|
||||
{ vertical: true },
|
||||
PopupRevealer(name, child, transition),
|
||||
Padding(name),
|
||||
),
|
||||
Padding(name),
|
||||
),
|
||||
"top-right": () =>
|
||||
Widget.Box(
|
||||
{},
|
||||
Padding(name),
|
||||
Widget.Box(
|
||||
{
|
||||
hexpand: false,
|
||||
vertical: true,
|
||||
},
|
||||
PopupRevealer(name, child, transition),
|
||||
Padding(name),
|
||||
),
|
||||
),
|
||||
"top-center": () =>
|
||||
Widget.Box(
|
||||
{},
|
||||
Padding(name),
|
||||
Widget.Box(
|
||||
{
|
||||
hexpand: false,
|
||||
vertical: true,
|
||||
},
|
||||
PopupRevealer(name, child, transition),
|
||||
Padding(name),
|
||||
),
|
||||
Padding(name),
|
||||
),
|
||||
"top-left": () =>
|
||||
Widget.Box(
|
||||
{},
|
||||
Widget.Box(
|
||||
{
|
||||
hexpand: false,
|
||||
vertical: true,
|
||||
},
|
||||
PopupRevealer(name, child, transition),
|
||||
Padding(name),
|
||||
),
|
||||
Padding(name),
|
||||
),
|
||||
"bottom-left": () =>
|
||||
Widget.Box(
|
||||
{},
|
||||
Widget.Box(
|
||||
{
|
||||
hexpand: false,
|
||||
vertical: true,
|
||||
},
|
||||
Padding(name),
|
||||
PopupRevealer(name, child, transition),
|
||||
),
|
||||
Padding(name),
|
||||
),
|
||||
"bottom-center": () =>
|
||||
Widget.Box(
|
||||
{},
|
||||
Padding(name),
|
||||
Widget.Box(
|
||||
{
|
||||
hexpand: false,
|
||||
vertical: true,
|
||||
},
|
||||
Padding(name),
|
||||
PopupRevealer(name, child, transition),
|
||||
),
|
||||
Padding(name),
|
||||
),
|
||||
"bottom-right": () =>
|
||||
Widget.Box(
|
||||
{},
|
||||
Padding(name),
|
||||
Widget.Box(
|
||||
{
|
||||
hexpand: false,
|
||||
vertical: true,
|
||||
},
|
||||
Padding(name),
|
||||
PopupRevealer(name, child, transition),
|
||||
),
|
||||
),
|
||||
"anywhere": () =>
|
||||
Widget.Box(
|
||||
{},
|
||||
Padding(name),
|
||||
Widget.Box(
|
||||
{
|
||||
hexpand: false,
|
||||
vertical: true,
|
||||
},
|
||||
Padding(name),
|
||||
PopupRevealer(name, child, transition),
|
||||
),
|
||||
),
|
||||
});
|
||||
// If monitor is vertical (transform = 1 || 3) swap height and width
|
||||
if (hyprland.monitors[hyprland.active.monitor.id].transform % 2 !== 0) {
|
||||
[monWidth, monHeight] = [monHeight, monWidth];
|
||||
}
|
||||
|
||||
let marginRight = monWidth - value[0] - minWidth / 2;
|
||||
let marginLeft = monWidth - minWidth - marginRight;
|
||||
|
||||
if (marginRight < 0) {
|
||||
marginRight = 13;
|
||||
marginLeft = monWidth - minWidth - 13;
|
||||
} else if (marginRight < 13) {
|
||||
marginRight = 13;
|
||||
marginLeft = monWidth - minWidth - 13;
|
||||
}
|
||||
const marginTop = 40;
|
||||
const marginBottom = monHeight + minHeight - marginTop;
|
||||
self.set_margin_left(marginLeft);
|
||||
self.set_margin_right(marginRight);
|
||||
self.set_margin_top(marginTop);
|
||||
self.set_margin_bottom(marginBottom);
|
||||
});
|
||||
};
|
||||
|
||||
export default ({
|
||||
name,
|
||||
child,
|
||||
layout = "center",
|
||||
transition,
|
||||
minWidth = 400,
|
||||
minHeight = 200,
|
||||
exclusivity = "ignore",
|
||||
...props
|
||||
}) =>
|
||||
@@ -160,6 +64,21 @@ export default ({
|
||||
exclusivity,
|
||||
layer: "top",
|
||||
anchor: ["top", "bottom", "right", "left"],
|
||||
child,//: Layout(name, child, transition)[layout](),
|
||||
child: Widget.EventBox({
|
||||
on_primary_click: () => App.closeWindow(name),
|
||||
child: Widget.EventBox({
|
||||
on_primary_click: () => {
|
||||
return true;
|
||||
},
|
||||
setup: (self) => {
|
||||
moveBoxToCursor(self, minWidth, minHeight, child);
|
||||
},
|
||||
child: Widget.Box({
|
||||
class_name: "dropdown-menu-container",
|
||||
can_focus: true,
|
||||
children: [Padding(name), child],
|
||||
}),
|
||||
}),
|
||||
}),
|
||||
...props,
|
||||
});
|
||||
|
||||
@@ -1,46 +1,246 @@
|
||||
const audio = await Service.import("audio");
|
||||
const hyprland = await Service.import("hyprland");
|
||||
import DropdownMenu from "../DropdownMenu.js";
|
||||
|
||||
export default () => {
|
||||
const playbackDevices = Variable(audio.speakers);
|
||||
const inputDevices = Variable(audio.microphones);
|
||||
|
||||
audio.connect("changed", (aVal) => {
|
||||
playbackDevices.value = aVal.speakers;
|
||||
inputDevices.value = aVal.microphones;
|
||||
});
|
||||
|
||||
const renderPlaybacks = (playbackDevices) => {
|
||||
return playbackDevices.map((device) => {
|
||||
if (device.description === "Dummy Output") {
|
||||
return Widget.Box({
|
||||
class_name: `audiomenu-playback-button not-found`,
|
||||
child: Widget.Box({
|
||||
children: [
|
||||
Widget.Label({
|
||||
class_name: "audiomenu-playback-button-icon",
|
||||
label: "No playback devices found...",
|
||||
}),
|
||||
],
|
||||
}),
|
||||
});
|
||||
}
|
||||
return Widget.Button({
|
||||
class_name: `audiomenu-button playback ${device}`,
|
||||
child: Widget.Box({
|
||||
children: [
|
||||
Widget.Label({
|
||||
class_name: "audiomenu-button-icon playback",
|
||||
label: "o",
|
||||
}),
|
||||
Widget.Label({
|
||||
class_name: "audiomenu-button-name playback",
|
||||
truncate: "end",
|
||||
expand: true,
|
||||
wrap: true,
|
||||
label: device.description,
|
||||
}),
|
||||
Widget.Label({
|
||||
class_name: "audiomenu-button-isactive playback",
|
||||
label: audio.speaker
|
||||
.bind("description")
|
||||
.as((v) => (device.description === v ? " y" : "")),
|
||||
}),
|
||||
],
|
||||
}),
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const renderInputDevices = (inputDevices) => {
|
||||
if (!inputDevices.length) {
|
||||
return [
|
||||
Widget.Box({
|
||||
class_name: `audiomenu-inputs-button not-found`,
|
||||
child: Widget.Box({
|
||||
children: [
|
||||
Widget.Label({
|
||||
class_name: "audiomenu-inputs-button-icon",
|
||||
label: "No input devices found...",
|
||||
}),
|
||||
],
|
||||
}),
|
||||
}),
|
||||
];
|
||||
}
|
||||
return inputDevices.map((device) => {
|
||||
return Widget.Button({
|
||||
class_name: `audiomenu-button input ${device}`,
|
||||
child: Widget.Box({
|
||||
children: [
|
||||
Widget.Label({
|
||||
class_name: "audiomenu-button-icon input",
|
||||
label: "/",
|
||||
}),
|
||||
Widget.Label({
|
||||
class_name: "audiomenu-button-name input",
|
||||
label: device.description,
|
||||
}),
|
||||
Widget.Label({
|
||||
class_name: "audiomenu-button-isactive input",
|
||||
truncate: "end",
|
||||
expand: true,
|
||||
wrap: true,
|
||||
label: audio.microphone
|
||||
.bind("description")
|
||||
.as((v) => (device.description === v ? " y" : "")),
|
||||
}),
|
||||
],
|
||||
}),
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const renderActivePlayback = () => {
|
||||
return [
|
||||
Widget.Label({
|
||||
class_name: "audiomenu-active playback",
|
||||
truncate: "end",
|
||||
expand: true,
|
||||
wrap: true,
|
||||
label: audio.bind("speaker").as((v) => v.description || ""),
|
||||
}),
|
||||
Widget.Box({
|
||||
class_name: "audiomenu-slider-container playback",
|
||||
children: [
|
||||
Widget.Label({
|
||||
class_name: "audiomenu-active-icon playback",
|
||||
label: audio.speaker
|
||||
.bind("volume")
|
||||
.as((v) => `${v === 0 ? "m" : "a"}`),
|
||||
}),
|
||||
Widget.Slider({
|
||||
value: audio.speaker.bind("volume").as((v) => v * 100),
|
||||
class_name: "audiomenu-active-slider playback",
|
||||
draw_value: false,
|
||||
hexpand: true,
|
||||
min: 0,
|
||||
max: 100,
|
||||
onChange: ({ value }) => (audio.speaker.volume = value / 100),
|
||||
}),
|
||||
Widget.Label({
|
||||
class_name: "audiomenu-active-percentage playback",
|
||||
label: audio.speaker
|
||||
.bind("volume")
|
||||
.as((v) => `${Math.floor(v * 100)}%`),
|
||||
}),
|
||||
],
|
||||
}),
|
||||
];
|
||||
};
|
||||
|
||||
const renderActiveInput = () => {
|
||||
return [
|
||||
Widget.Label({
|
||||
class_name: "audiomenu-active input",
|
||||
truncate: "end",
|
||||
wrap: true,
|
||||
label: audio.bind("microphone").as((v) => v.description || ""),
|
||||
}),
|
||||
Widget.Box({
|
||||
class_name: "audiomenu-slider-container input",
|
||||
children: [
|
||||
Widget.Label({
|
||||
class_name: "audiomenu-active-icon input",
|
||||
label: audio.microphone
|
||||
.bind("volume")
|
||||
.as((v) => `${v === 0 ? "m" : "a"}`),
|
||||
}),
|
||||
Widget.Slider({
|
||||
value: audio.microphone.bind("volume").as((v) => v * 100),
|
||||
class_name: "audiomenu-active-slider inputs",
|
||||
draw_value: false,
|
||||
hexpand: true,
|
||||
min: 0,
|
||||
max: 100,
|
||||
onChange: ({ value }) => (audio.microphone.volume = value / 100),
|
||||
}),
|
||||
Widget.Label({
|
||||
class_name: "audiomenu-active-percentage input",
|
||||
label: audio.microphone
|
||||
.bind("volume")
|
||||
.as((v) => `${Math.floor(v * 100)}%`),
|
||||
}),
|
||||
],
|
||||
}),
|
||||
];
|
||||
};
|
||||
|
||||
return DropdownMenu({
|
||||
name: "audiomenu",
|
||||
transition: "crossfade",
|
||||
child: Widget.Box({
|
||||
class_name: "audiomenu-items",
|
||||
setup: (self) =>
|
||||
globalMousePos.connect("changed", ({ value }) => {
|
||||
console.log("in hook");
|
||||
// console.log(value);
|
||||
console.log(globalMousePos.value);
|
||||
// TODO: Calculate these margins in the Dropmenu component
|
||||
// We should just pass width/height and the component will
|
||||
// calculate the appropriate margins from that...
|
||||
const monWidth = hyprland.monitors[hyprland.active.monitor.id].width;
|
||||
const monHeight =
|
||||
hyprland.monitors[hyprland.active.monitor.id].height;
|
||||
const marginLeft = value[0] - 100;
|
||||
const marginRight = monWidth - value[0] - 100;
|
||||
const marginTop = 40;
|
||||
const marginBottom = monHeight + 40 - 10;
|
||||
self.set_margin_left(marginLeft);
|
||||
self.set_margin_right(marginRight);
|
||||
self.set_margin_top(marginTop);
|
||||
self.set_margin_bottom(marginBottom);
|
||||
}),
|
||||
// margin_left: 3625, //marginLeft.bind("value"),
|
||||
// margin_right: 15, // marginRight.bind("value"),
|
||||
// margin_top: 40, //marginTop.bind("value"),
|
||||
// margin_bottom: 1360, //marginBottom.bind("value"),
|
||||
children: [
|
||||
Widget.Button({
|
||||
class_name: "click-me",
|
||||
child: Widget.Box({
|
||||
child: Widget.Label("Click Me"),
|
||||
child: Widget.Box({
|
||||
vertical: true,
|
||||
class_name: "audiomenu-items-container",
|
||||
children: [
|
||||
Widget.Box({
|
||||
class_name: "audiomenu-dropdown-label-container",
|
||||
hpack: "start",
|
||||
children: [
|
||||
Widget.Label({
|
||||
class_name: "audiomenu-dropdown-label",
|
||||
label: "Audio Devices",
|
||||
}),
|
||||
],
|
||||
}),
|
||||
on_clicked: () => console.log("CLICKED ME"),
|
||||
}),
|
||||
],
|
||||
Widget.Separator({
|
||||
class_name: "audiomenu-separator",
|
||||
}),
|
||||
Widget.Box({
|
||||
class_name: "audiomenu-active-container playback",
|
||||
vertical: true,
|
||||
children: renderActivePlayback(),
|
||||
}),
|
||||
Widget.Box({
|
||||
class_name: "audiomenu-active-container input",
|
||||
vertical: true,
|
||||
children: renderActiveInput(),
|
||||
}),
|
||||
Widget.Box({
|
||||
class_name: "audiomenu-label-container playback",
|
||||
vertical: true,
|
||||
hpack: "start",
|
||||
children: [
|
||||
Widget.Label({
|
||||
class_name: "audiomenu-label playback",
|
||||
label: "Playback Devices",
|
||||
hpack: "start",
|
||||
}),
|
||||
Widget.Box({
|
||||
vertical: true,
|
||||
children: audio
|
||||
.bind("speakers")
|
||||
.as((v) => renderPlaybacks(v)),
|
||||
}),
|
||||
],
|
||||
}),
|
||||
Widget.Box({
|
||||
class_name: "audiomenu-label-container input",
|
||||
hpack: "start",
|
||||
vertical: true,
|
||||
children: [
|
||||
Widget.Label({
|
||||
class_name: "audiomenu-label input",
|
||||
hpack: "start",
|
||||
label: "Input Devices",
|
||||
}),
|
||||
Widget.Box({
|
||||
vertical: true,
|
||||
children: audio
|
||||
.bind("microphones")
|
||||
.as((v) => renderInputDevices(v)),
|
||||
}),
|
||||
],
|
||||
}),
|
||||
],
|
||||
}),
|
||||
}),
|
||||
});
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user