Orgnize audio module code

modules/menus/audio/active/SelectedInput.js

@@ -0,0 +1,66 @@
+const audio = await Service.import("audio");
+import { getIcon } from '../utils.js';
+
+const renderActiveInput = () => {
+  return [
+    Widget.Box({
+      class_name: "menu-slider-container input",
+      children: [
+        Widget.Button({
+          vexpand: false,
+          vpack: "end",
+          setup: (self) => {
+            self.hook(audio, () => {
+              const mic = audio.microphone;
+              const className = `menu-active-button input ${mic.is_muted ? "muted" : ""}`;
+              return (self.class_name = className);
+            });
+          },
+          on_primary_click: () =>
+            (audio.microphone.is_muted = !audio.microphone.is_muted),
+          child: Widget.Icon({
+            class_name: "menu-active-icon input",
+            setup: (self) => {
+              self.hook(audio, () => {
+                self.icon = getIcon(
+                  audio.microphone.volume,
+                  audio.microphone.is_muted,
+                )["mic"];
+              });
+            },
+          }),
+        }),
+        Widget.Box({
+          vertical: true,
+          children: [
+            Widget.Label({
+              class_name: "menu-active input",
+              hpack: "start",
+              truncate: "end",
+              wrap: true,
+              label: audio.bind("microphone").as((v) => v.description || ""),
+            }),
+            Widget.Slider({
+              value: audio.microphone.bind("volume").as((v) => v),
+              class_name: "menu-active-slider menu-slider inputs",
+              draw_value: false,
+              hexpand: true,
+              min: 0,
+              max: 1,
+              onChange: ({ value }) => (audio.microphone.volume = value),
+            }),
+          ],
+        }),
+        Widget.Label({
+          class_name: "menu-active-percentage input",
+          vpack: "end",
+          label: audio.microphone
+            .bind("volume")
+            .as((v) => `${Math.floor(v * 100)}%`),
+        }),
+      ],
+    }),
+  ];
+};
+
+export { renderActiveInput };

modules/menus/audio/active/SelectedPlayback.js

@@ -0,0 +1,67 @@
+const audio = await Service.import("audio");
+import { getIcon } from "../utils.js";
+
+const renderActivePlayback = () => {
+  return [
+    Widget.Box({
+      class_name: "menu-slider-container playback",
+      children: [
+        Widget.Button({
+          vexpand: false,
+          vpack: "end",
+          setup: (self) => {
+            self.hook(audio, () => {
+              const spkr = audio.speaker;
+              const className = `menu-active-button playback ${spkr.is_muted ? "muted" : ""}`;
+              return (self.class_name = className);
+            });
+          },
+          on_primary_click: () =>
+            (audio.speaker.is_muted = !audio.speaker.is_muted),
+          child: Widget.Icon({
+            class_name: "menu-active-icon playback",
+            setup: (self) => {
+              self.hook(audio, () => {
+                self.icon = getIcon(
+                  audio.speaker.volume,
+                  audio.speaker.is_muted,
+                )["spkr"];
+              });
+            },
+          }),
+        }),
+        Widget.Box({
+          vertical: true,
+          children: [
+            Widget.Label({
+              class_name: "menu-active playback",
+              hpack: "start",
+              truncate: "end",
+              expand: true,
+              wrap: true,
+              label: audio.bind("speaker").as((v) => v.description || ""),
+            }),
+            Widget.Slider({
+              value: audio["speaker"].bind("volume"),
+              class_name: "menu-active-slider menu-slider playback",
+              draw_value: false,
+              hexpand: true,
+              min: 0,
+              max: 1,
+              onChange: ({ value }) => (audio.speaker.volume = value),
+            }),
+          ],
+        }),
+        Widget.Label({
+          vpack: "end",
+          class_name: "menu-active-percentage playback",
+          label: audio.speaker
+            .bind("volume")
+            .as((v) => `${Math.floor(v * 100)}%`),
+        }),
+      ],
+    }),
+  ];
+};
+
+export { renderActivePlayback };

modules/menus/audio/active/index.js

@@ -0,0 +1,39 @@
+import { renderActiveInput } from "./SelectedInput.js";
+import { renderActivePlayback } from "./SelectedPlayback.js";
+
+const activeDevices = () => {
+  return Widget.Box({
+    class_name: "menu-section-container volume",
+    vertical: true,
+    children: [
+      Widget.Box({
+        class_name: "menu-label-container volume",
+        hpack: "fill",
+        child: Widget.Label({
+          class_name: "menu-label audio volume",
+          hexpand: true,
+          hpack: "center",
+          label: "Volume",
+        }),
+      }),
+      Widget.Box({
+        class_name: "menu-items-section selected",
+        vertical: true,
+        children: [
+          Widget.Box({
+            class_name: "menu-active-container playback",
+            vertical: true,
+            children: renderActivePlayback(),
+          }),
+          Widget.Box({
+            class_name: "menu-active-container input",
+            vertical: true,
+            children: renderActiveInput(),
+          }),
+        ],
+      }),
+    ],
+  });
+};
+
+export { activeDevices };