Added bluetooth menu.

This commit is contained in:
Jas Singh
2024-06-16 18:43:33 -07:00
parent 26d2fcde0e
commit 904c5b8cd0
18 changed files with 1376 additions and 182 deletions

View File

@@ -17,6 +17,16 @@ const Bluetooth = () => {
children: [btIcon, btText],
}),
isVisible: true,
props: {
on_primary_click: (_, event) => {
const clickPos = event.get_root_coords();
const coords = [clickPos[1], clickPos[2]];
globalMousePos.value = coords;
App.toggleWindow("bluetoothmenu");
},
},
};
}

View File

@@ -1,5 +1,7 @@
const network = await Service.import("network");
import { globalMousePos } from "../../../globals.js";
const Network = () => {
const wifiIndicator = [
Widget.Icon({
@@ -26,6 +28,17 @@ const Network = () => {
.as((w) => (w === "wired" ? wiredIndicator : wifiIndicator)),
}),
isVisible: true,
props: {
on_primary_click: (_, event) => {
console.log(JSON.stringify(network, null, 2));
const clickPos = event.get_root_coords();
const coords = [clickPos[1], clickPos[2]];
globalMousePos.value = coords;
App.toggleWindow("networkmenu");
},
},
};
};

View File

@@ -1,4 +1,3 @@
const hyprland = await Service.import("hyprland");
const audio = await Service.import("audio");
import { globalMousePos } from "../../../globals.js";
@@ -39,16 +38,14 @@ const Volume = () => {
}),
isVisible: true,
props: {
on_primary_click: (a, b, c, d) => {
const monX = hyprland.monitors[hyprland.active.monitor.id].x;
const monY = hyprland.monitors[hyprland.active.monitor.id].y;
on_primary_click: (_, event) => {
const clickPos = event.get_root_coords();
const coords = [clickPos[1], clickPos[2]];
const cursorPos = Utils.exec("hyprctl cursorpos").split(", ").map(Number);
cursorPos[0] = cursorPos[0] - monX;
cursorPos[1] = cursorPos[1] - monY;
globalMousePos.value = cursorPos;
App.toggleWindow("audiomenu");
},
globalMousePos.value = coords;
App.toggleWindow("audiomenu");
},
},
};
};

View File

@@ -10,14 +10,9 @@ export const Padding = (name) =>
});
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());
// 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;
@@ -50,7 +45,7 @@ export default ({
child,
layout = "center",
transition,
minWidth = 400,
minWidth = 375,
minHeight = 200,
exclusivity = "ignore",
...props
@@ -66,10 +61,14 @@ export default ({
anchor: ["top", "bottom", "right", "left"],
child: Widget.EventBox({
on_primary_click: () => App.closeWindow(name),
on_secondary_click: () => App.closeWindow(name),
child: Widget.EventBox({
on_primary_click: () => {
return true;
},
on_secondary_click: () => {
return true;
},
setup: (self) => {
moveBoxToCursor(self, minWidth, minHeight, child);
},

View File

@@ -2,23 +2,15 @@ const audio = await Service.import("audio");
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`,
class_name: "menu-unfound-button playback",
child: Widget.Box({
children: [
Widget.Label({
class_name: "audiomenu-playback-button-icon",
class_name: "menu-button-name playback",
label: "No playback devices found...",
}),
],
@@ -26,25 +18,51 @@ export default () => {
});
}
return Widget.Button({
class_name: `audiomenu-button playback ${device}`,
class_name: `menu-button audio playback ${device}`,
cursor: "pointer",
on_primary_click: () => (audio.speaker = device),
child: Widget.Box({
children: [
Widget.Label({
class_name: "audiomenu-button-icon playback",
label: "o",
Widget.Box({
hpack: "start",
children: [
Widget.Label({
truncate: "end",
wrap: true,
class_name: audio.speaker
.bind("description")
.as((v) =>
device.description === v
? "menu-button-icon active playback"
: "menu-button-icon playback",
),
label: "",
}),
Widget.Label({
class_name: audio.speaker
.bind("description")
.as((v) =>
device.description === v
? "menu-button-name active playback"
: "menu-button-name playback",
),
truncate: "end",
wrap: true,
label: device.description,
}),
],
}),
Widget.Label({
class_name: "audiomenu-button-name playback",
truncate: "end",
Widget.Box({
hpack: "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" : "")),
children: [
Widget.Label({
class_name: "menu-button-isactive audio playback",
label: audio.speaker
.bind("description")
.as((v) => (device.description === v ? " " : "")),
}),
],
}),
],
}),
@@ -56,11 +74,11 @@ export default () => {
if (!inputDevices.length) {
return [
Widget.Box({
class_name: `audiomenu-inputs-button not-found`,
class_name: `menu-unfound-button input`,
child: Widget.Box({
children: [
Widget.Label({
class_name: "audiomenu-inputs-button-icon",
class_name: "menu-button-name input",
label: "No input devices found...",
}),
],
@@ -70,25 +88,51 @@ export default () => {
}
return inputDevices.map((device) => {
return Widget.Button({
class_name: `audiomenu-button input ${device}`,
cursor: "pointer",
on_primary_click: () => (audio.microphone = device),
class_name: `menu-button audio input ${device}`,
child: Widget.Box({
children: [
Widget.Label({
class_name: "audiomenu-button-icon input",
label: "/",
Widget.Box({
hpack: "start",
children: [
Widget.Label({
class_name: audio.microphone
.bind("description")
.as((v) =>
device.description === v
? "menu-button-icon active input"
: "menu-button-icon input",
),
label: "",
}),
Widget.Label({
truncate: "end",
wrap: true,
class_name: audio.microphone
.bind("description")
.as((v) =>
device.description === v
? "menu-button-name active input"
: "menu-button-name input",
),
label: device.description,
}),
],
}),
Widget.Label({
class_name: "audiomenu-button-name input",
label: device.description,
}),
Widget.Label({
class_name: "audiomenu-button-isactive input",
truncate: "end",
Widget.Box({
hpack: "end",
expand: true,
wrap: true,
label: audio.microphone
.bind("description")
.as((v) => (device.description === v ? " y" : "")),
children: [
Widget.Label({
class_name: "menu-button-isactive audio input",
truncate: "end",
wrap: true,
label: audio.microphone
.bind("description")
.as((v) => (device.description === v ? " " : "")),
}),
],
}),
],
}),
@@ -99,32 +143,32 @@ export default () => {
const renderActivePlayback = () => {
return [
Widget.Label({
class_name: "audiomenu-active playback",
class_name: "menu-active playback",
truncate: "end",
expand: true,
wrap: true,
label: audio.bind("speaker").as((v) => v.description || ""),
}),
Widget.Box({
class_name: "audiomenu-slider-container playback",
class_name: "menu-slider-container playback",
children: [
Widget.Label({
class_name: "audiomenu-active-icon playback",
class_name: "menu-active-icon playback",
label: audio.speaker
.bind("volume")
.as((v) => `${v === 0 ? "m" : "a"}`),
.as((v) => `${v === 0 ? "󰖁" : "󰕾"}`),
}),
Widget.Slider({
value: audio.speaker.bind("volume").as((v) => v * 100),
class_name: "audiomenu-active-slider playback",
value: audio["speaker"].bind("volume"),
class_name: "menu-active-slider menu-slider playback",
draw_value: false,
hexpand: true,
min: 0,
max: 100,
onChange: ({ value }) => (audio.speaker.volume = value / 100),
max: 1,
onChange: ({ value }) => (audio.speaker.volume = value),
}),
Widget.Label({
class_name: "audiomenu-active-percentage playback",
class_name: "menu-active-percentage playback",
label: audio.speaker
.bind("volume")
.as((v) => `${Math.floor(v * 100)}%`),
@@ -137,31 +181,31 @@ export default () => {
const renderActiveInput = () => {
return [
Widget.Label({
class_name: "audiomenu-active input",
class_name: "menu-active input",
truncate: "end",
wrap: true,
label: audio.bind("microphone").as((v) => v.description || ""),
}),
Widget.Box({
class_name: "audiomenu-slider-container input",
class_name: "menu-slider-container input",
children: [
Widget.Label({
class_name: "audiomenu-active-icon input",
class_name: "menu-active-icon input",
label: audio.microphone
.bind("volume")
.as((v) => `${v === 0 ? "m" : "a"}`),
.as((v) => `${v === 0 ? "󰍭" : "󰍬"}`),
}),
Widget.Slider({
value: audio.microphone.bind("volume").as((v) => v * 100),
class_name: "audiomenu-active-slider inputs",
value: audio.microphone.bind("volume").as((v) => v),
class_name: "menu-active-slider menu-slider inputs",
draw_value: false,
hexpand: true,
min: 0,
max: 100,
onChange: ({ value }) => (audio.microphone.volume = value / 100),
max: 1,
onChange: ({ value }) => (audio.microphone.volume = value),
}),
Widget.Label({
class_name: "audiomenu-active-percentage input",
class_name: "menu-active-percentage input",
label: audio.microphone
.bind("volume")
.as((v) => `${Math.floor(v * 100)}%`),
@@ -175,61 +219,69 @@ export default () => {
name: "audiomenu",
transition: "crossfade",
child: Widget.Box({
class_name: "audiomenu-items",
class_name: "menu-items",
child: Widget.Box({
vertical: true,
class_name: "audiomenu-items-container",
class_name: "menu-items-container",
children: [
Widget.Box({
class_name: "audiomenu-dropdown-label-container",
class_name: "menu-dropdown-label-container",
hpack: "start",
children: [
Widget.Label({
class_name: "audiomenu-dropdown-label",
label: "Audio Devices",
class_name: "menu-dropdown-label audio",
label: "Audio",
}),
],
}),
Widget.Separator({
class_name: "audiomenu-separator",
class_name: "menu-separator",
}),
Widget.Box({
class_name: "audiomenu-active-container playback",
class_name: "menu-active-container playback",
vertical: true,
children: renderActivePlayback(),
}),
Widget.Box({
class_name: "audiomenu-active-container input",
class_name: "menu-active-container input",
vertical: true,
children: renderActiveInput(),
}),
Widget.Separator({
class_name: "menu-separator",
}),
Widget.Box({
class_name: "audiomenu-label-container playback",
class_name: "menu-container playback",
vertical: true,
hpack: "start",
children: [
Widget.Label({
class_name: "audiomenu-label playback",
label: "Playback Devices",
hpack: "start",
Widget.Box({
class_name: "menu-label-container",
child: Widget.Label({
class_name: "menu-label audio playback",
label: "Playback Devices",
hpack: "start",
}),
}),
Widget.Box({
vertical: true,
children: audio
.bind("speakers")
.as((v) => renderPlaybacks(v)),
children: audio.bind("speakers").as((v) => renderPlaybacks(v)),
}),
],
}),
Widget.Separator({
class_name: "menu-separator",
}),
Widget.Box({
class_name: "audiomenu-label-container input",
hpack: "start",
class_name: "menu-container input",
vertical: true,
children: [
Widget.Label({
class_name: "audiomenu-label input",
hpack: "start",
label: "Input Devices",
Widget.Box({
class_name: "menu-label-container",
child: Widget.Label({
class_name: "menu-label audio input",
hpack: "start",
label: "Input Devices",
}),
}),
Widget.Box({
vertical: true,

View File

@@ -0,0 +1,384 @@
const bluetooth = await Service.import("bluetooth");
import DropdownMenu from "../DropdownMenu.js";
export default () => {
bluetooth.connect("changed", (value) => {
// console.log(JSON.stringify(value, null, 2));
});
const connectedDevices = (btDevices) => {
const noDevices = () => {
return Widget.Box({
hpack: "start",
hexpand: true,
child: Widget.Label({
class_name: "dim",
label: "No devices connected",
}),
});
};
const deviceList = () => {
return Widget.Box({
vertical: true,
children: btDevices.map((dev) =>
Widget.Box({
child: Widget.Box({
children: [
Widget.Box({
hpack: "start",
vertical: true,
children: [
Widget.Box({
children: [
Widget.Button({
child: Widget.Icon(`${dev["icon-name"]}-symbolic`),
}),
Widget.Label({
class_name: "menu-button-name bluetooth",
truncate: "end",
wrap: true,
label: dev.alias,
}),
],
}),
Widget.Box({
class_name: "menu-button-name-container status dim",
children: [
Widget.Label({
class_name: "menu-button-name status dim",
label: dev.connected
? "Connected"
: dev.paired
? "Paired"
: "",
}),
],
}),
],
}),
Widget.Box({
hpack: "end",
expand: true,
children: [
Widget.Button({
class_name: "menu-icon-button unpair bluetooth",
child: Widget.Label({
tooltip_text: dev.paired ? "unpair" : "pair",
class_name: "menu-icon-button-label unpair bluetooth",
label: dev.paired ? "" : "",
}),
on_primary_click: () =>
Utils.execAsync(
`bluetoothctl ${dev.paired ? "unpair" : "pair"} ${dev.address}`,
).catch((err) =>
console.error(
`bluetoothctl ${dev.paired ? "unpair" : "pair"} ${dev.address}`,
err,
),
),
}),
Widget.Button({
class_name: "menu-icon-button disconnect bluetooth",
child: Widget.Label({
tooltip_text: dev.connected ? "disconnect" : "connect",
class_name:
"menu-icon-button-label disconnect bluetooth",
label: dev.connected ? "󱘖" : "",
}),
on_primary_click: () =>
Utils.execAsync(
`bluetoothctl ${dev.connected ? "disconnect" : "connect"} ${dev.address}`,
).catch((err) =>
console.error(
`bluetoothctl ${dev.connected ? "disconnect" : "connect"} ${dev.address}`,
err,
),
),
}),
Widget.Button({
class_name: "menu-icon-button untrust bluetooth",
child: Widget.Label({
tooltip_text: dev.trusted ? "untrust" : "trust",
class_name: "menu-icon-button-label untrust bluetooth",
label: dev.trusted ? "" : "󱖡",
}),
on_primary_click: () =>
Utils.execAsync(
`bluetoothctl ${dev.trusted ? "untrust" : "trust"} ${dev.address}`,
).catch((err) =>
console.error(
`bluetoothctl ${dev.trusted ? "untrust" : "trust"} ${dev.address}`,
err,
),
),
}),
Widget.Button({
class_name: "menu-icon-button delete bluetooth",
child: Widget.Label({
tooltip_text: "delete",
class_name: "menu-icon-button-label delete bluetooth",
label: "󰆴",
}),
on_primary_click: () =>
Utils.execAsync(
`bluetoothctl remove ${dev.address}`,
).catch((err) =>
console.error("Bluetooth Remove", err),
),
}),
],
}),
],
}),
}),
),
});
};
return btDevices.length === 0 ? noDevices() : deviceList();
};
const renderDevices = (btDevices) => {
return btDevices
.filter(
(device) =>
device.name !== null &&
!bluetooth.connected_devices.find(
(dev) => dev.address === device.address,
),
)
.map((device) => {
return Widget.Button({
class_name: `menu-button bluetooth ${device}`,
on_primary_click: () => {
Utils.execAsync(`bluetoothctl connect ${device.address}`).catch(
(err) =>
console.error(`bluetoothctl connect ${device.address}`, err),
);
Utils.execAsync(`bluetoothctl pair ${device.address}`).catch(
(err) =>
console.error(`bluetoothctl pair ${device.address}`, err),
);
},
child: Widget.Box({
children: [
Widget.Box({
hpack: "start",
children: [
Widget.Icon({
class_name: bluetooth
.bind("connected_devices")
.as((btDevices) =>
btDevices.find((cd) => cd.alias === device.alias)
? "menu-button-icon active bluetooth"
: "menu-button-icon bluetooth",
),
icon: `${device["icon-name"]}-symbolic`,
}),
Widget.Label({
class_name: bluetooth
.bind("connected_devices")
.as((btDevices) =>
btDevices.find((cd) => cd.alias === device.alias)
? "menu-button-name active bluetooth"
: "menu-button-name bluetooth",
),
truncate: "end",
wrap: true,
label: device.alias,
}),
],
}),
Widget.Box({
hpack: "end",
expand: true,
children: [
Widget.Label({
class_name: "menu-button-isactive bluetooth",
label: bluetooth
.bind("connected_devices")
.as((btDevices) =>
btDevices.find((cd) => cd.alias === device.alias)
? " "
: "",
),
}),
],
}),
],
}),
});
});
};
const bluetoothOnModule = () => {
return Widget.Box({
vertical: true,
children: [
Widget.Box({
class_name: "menu-active-container bluetooth",
vertical: true,
// children: renderActivePlayback(),
}),
Widget.Box({
class_name: "menu-active-container bluetooth",
vertical: true,
// children: renderActiveInput(),
}),
Widget.Separator({
class_name: "menu-separator",
}),
Widget.Box({
class_name: "menu-container bluetooth",
children: [
Widget.Box({
vertical: true,
children: [
Widget.Box({
class_name: "menu-label-container bluetooth",
children: [
Widget.Box({
hpack: "start",
child: Widget.Label({
class_name: "menu-label bluetooth",
label: "Devices",
}),
}),
Widget.Box({
hexpand: true,
hpack: "end",
child: Widget.Button({
class_name: "menu-icon-button",
on_primary_click: () =>
Utils.execAsync(
"bluetoothctl --timeout 120 scan on",
).catch((err) =>
console.error(
"bluetoothctl --timeout 120 scan on",
err,
),
),
child: Widget.Icon("view-refresh-symbolic"),
}),
}),
],
}),
Widget.Box({
vertical: true,
children: bluetooth
.bind("devices")
.as((v) => renderDevices(v)),
}),
],
}),
],
}),
],
});
};
const bluetoothOffModule = () => {
return Widget.Box({
class_name: "bluetooth-disabled-menu",
vertical: true,
children: [
Widget.Label({
hexpand: true,
vexpand: true,
label: bluetooth
.bind("state")
.as((state) =>
state === "turning-off"
? "Bluetooth is turning off..."
: "Bluetooth is disabled",
),
}),
],
});
};
return DropdownMenu({
name: "bluetoothmenu",
transition: "crossfade",
minWidth: 325,
child: Widget.Box({
class_name: "menu-items",
child: Widget.Box({
vertical: true,
class_name: "menu-items-container",
children: [
Widget.Box({
class_name: "menu-dropdown-label-container",
children: [
Widget.Box({
hexpand: true,
hpack: "start",
child: Widget.Label({
class_name: "menu-dropdown-label bluetooth",
label: "Bluetooth",
}),
}),
Widget.Box({
hexpand: true,
hpack: "end",
child: Widget.Switch({
class_name: "menu-switch bluetooth",
active: bluetooth.enabled,
setup: (self) => {
bluetooth.connect("changed", ({ enabled }) => {
self.set_property("active", enabled);
});
},
on_activate: ({ active }) =>
Utils.execAsync(
`bluetoothctl power ${active ? "on" : "off"}`,
).catch((err) =>
console.error(
`bluetoothctl power ${active ? "on" : "off"}`,
err,
),
),
}),
}),
],
}),
Widget.Separator({
class_name: "menu-separator",
}),
Widget.Box({
vertical: true,
children: bluetooth.bind("enabled").as((isOn) =>
isOn
? [
Widget.Box({
class_name: "menu-label-container",
child: Widget.Label({
class_name: "menu-label bluetooth",
hpack: "start",
label: "My Devices",
}),
}),
Widget.Box({
vertical: true,
class_name: "menu-item-box",
child: bluetooth
.bind("connected_devices")
.as((btConDevs) => connectedDevices(btConDevs)),
}),
]
: [],
),
}),
Widget.Box({
vertical: true,
child: bluetooth
.bind("enabled")
.as((btEnabled) =>
btEnabled ? bluetoothOnModule() : bluetoothOffModule(),
),
}),
],
}),
}),
});
};

View File

@@ -1,5 +1,7 @@
import PowerMenu from "./power/index.js";
import Verification from "./power/verification.js";
import AudioMenu from "./audio/index.js";
import NetworkMenu from "./network/index.js";
import BluetoothMenu from "./bluetooth/index.js";
export default [PowerMenu(), Verification(), AudioMenu()];
export default [PowerMenu(), Verification(), AudioMenu(), NetworkMenu(), BluetoothMenu()];

View File

@@ -0,0 +1,295 @@
const network = await Service.import("network");
import DropdownMenu from "../DropdownMenu.js";
export default () => {
network.connect("changed", (value) => {
console.log(JSON.stringify(value, null, 2));
})
const renderPlaybacks = (playbackDevices) => {
// return playbackDevices.map((device) => {
// if (device.description === "Dummy Output") {
// return Widget.Box({
// class_name: "networkmenu-unfound-button playback",
// child: Widget.Box({
// children: [
// Widget.Label({
// class_name: "networkmenu-button-name playback",
// label: "No playback devices found...",
// }),
// ],
// }),
// });
// }
// return Widget.Button({
// class_name: `networkmenu-button playback ${device}`,
// cursor: "pointer",
// on_primary_click: () => (audio.speaker = device),
// child: Widget.Box({
// children: [
// Widget.Box({
// hpack: "start",
// children: [
// Widget.Label({
// truncate: "end",
// wrap: true,
// class_name: audio.speaker
// .bind("description")
// .as((v) =>
// device.description === v
// ? "networkmenu-button-icon active playback"
// : "networkmenu-button-icon playback",
// ),
// label: "",
// }),
// Widget.Label({
// class_name: audio.speaker
// .bind("description")
// .as((v) =>
// device.description === v
// ? "networkmenu-button-name active playback"
// : "networkmenu-button-name playback",
// ),
// truncate: "end",
// wrap: true,
// label: device.description,
// }),
// ],
// }),
// Widget.Box({
// hpack: "end",
// expand: true,
// children: [
// Widget.Label({
// class_name: "networkmenu-button-isactive playback",
// label: audio.speaker
// .bind("description")
// .as((v) => (device.description === v ? " " : "")),
// }),
// ],
// }),
// ],
// }),
// });
// });
};
const renderInputDevices = (inputDevices) => {
// if (!inputDevices.length) {
// return [
// Widget.Box({
// class_name: `networkmenu-unfound-button input`,
// child: Widget.Box({
// children: [
// Widget.Label({
// class_name: "networkmenu-button-name input",
// label: "No input devices found...",
// }),
// ],
// }),
// }),
// ];
// }
// return inputDevices.map((device) => {
// return Widget.Button({
// cursor: "pointer",
// on_primary_click: () => (audio.microphone = device),
// class_name: `networkmenu-button input ${device}`,
// child: Widget.Box({
// children: [
// Widget.Box({
// hpack: "start",
// children: [
// Widget.Label({
// class_name: audio.microphone
// .bind("description")
// .as((v) =>
// device.description === v
// ? "networkmenu-button-icon active input"
// : "networkmenu-button-icon input",
// ),
// label: "",
// }),
// Widget.Label({
// truncate: "end",
// wrap: true,
// class_name: audio.microphone
// .bind("description")
// .as((v) =>
// device.description === v
// ? "networkmenu-button-name active input"
// : "networkmenu-button-name input",
// ),
// label: device.description,
// }),
// ],
// }),
// Widget.Box({
// hpack: "end",
// expand: true,
// children: [
// Widget.Label({
// class_name: "networkmenu-button-isactive input",
// truncate: "end",
// wrap: true,
// label: audio.microphone
// .bind("description")
// .as((v) => (device.description === v ? " " : "")),
// }),
// ],
// }),
// ],
// }),
// });
// });
};
const renderActivePlayback = () => {
// return [
// Widget.Label({
// class_name: "networkmenu-active playback",
// truncate: "end",
// expand: true,
// wrap: true,
// label: audio.bind("speaker").as((v) => v.description || ""),
// }),
// Widget.Box({
// class_name: "networkmenu-slider-container playback",
// children: [
// Widget.Label({
// class_name: "networkmenu-active-icon playback",
// label: audio.speaker
// .bind("volume")
// .as((v) => `${v === 0 ? "󰖁" : "󰕾"}`),
// }),
// Widget.Slider({
// value: audio["speaker"].bind("volume"),
// class_name: "networkmenu-active-slider menu-slider playback",
// draw_value: false,
// hexpand: true,
// min: 0,
// max: 1,
// onChange: ({ value }) => (audio.speaker.volume = value),
// }),
// Widget.Label({
// class_name: "networkmenu-active-percentage playback",
// label: audio.speaker
// .bind("volume")
// .as((v) => `${Math.floor(v * 100)}%`),
// }),
// ],
// }),
// ];
};
const renderActiveInput = () => {
// return [
// Widget.Label({
// class_name: "networkmenu-active input",
// truncate: "end",
// wrap: true,
// label: audio.bind("microphone").as((v) => v.description || ""),
// }),
// Widget.Box({
// class_name: "networkmenu-slider-container input",
// children: [
// Widget.Label({
// class_name: "networkmenu-active-icon input",
// label: audio.microphone
// .bind("volume")
// .as((v) => `${v === 0 ? "󰍭" : "󰍬"}`),
// }),
// Widget.Slider({
// value: audio.microphone.bind("volume").as((v) => v),
// class_name: "networkmenu-active-slider menu-slider inputs",
// draw_value: false,
// hexpand: true,
// min: 0,
// max: 1,
// onChange: ({ value }) => (audio.microphone.volume = value),
// }),
// Widget.Label({
// class_name: "networkmenu-active-percentage input",
// label: audio.microphone
// .bind("volume")
// .as((v) => `${Math.floor(v * 100)}%`),
// }),
// ],
// }),
// ];
};
return DropdownMenu({
name: "networkmenu",
transition: "crossfade",
child: Widget.Box({
class_name: "menu-items",
child: Widget.Box({
vertical: true,
class_name: "menu-items-container",
children: [
Widget.Box({
class_name: "menu-dropdown-label-container",
hpack: "start",
children: [
Widget.Label({
class_name: "menu-dropdown-label audio",
label: "Network",
}),
],
}),
Widget.Separator({
class_name: "menu-separator",
}),
Widget.Box({
class_name: "networkmenu-active-container playback",
vertical: true,
// children: renderActivePlayback(),
}),
Widget.Box({
class_name: "networkmenu-active-container input",
vertical: true,
// children: renderActiveInput(),
}),
Widget.Separator({
class_name: "menu-separator",
}),
Widget.Box({
class_name: "networkmenu-label-container playback",
vertical: true,
children: [
Widget.Label({
class_name: "networkmenu-label playback",
label: "Playback Devices",
hpack: "start",
}),
// Widget.Box({
// vertical: true,
// children: audio.bind("speakers").as((v) => renderPlaybacks(v)),
// }),
],
}),
Widget.Separator({
class_name: "menu-separator",
}),
Widget.Box({
class_name: "networkmenu-label-container input",
vertical: true,
children: [
Widget.Label({
class_name: "networkmenu-label input",
hpack: "start",
label: "Input Devices",
}),
// Widget.Box({
// vertical: true,
// children: audio
// .bind("microphones")
// .as((v) => renderInputDevices(v)),
// }),
],
}),
],
}),
}),
});
};