Convert all remaining files to typescript.

modules/menus/media/media.ts

@@ -0,0 +1,76 @@
+const media = await Service.import("mpris");
+import { MediaInfo } from "./components/mediainfo.js";
+import { Controls } from "./components/controls.js";
+import { Bar } from "./components/bar.js";
+import { MprisPlayer } from "types/service/mpris.js";
+
+const Media = () => {
+    const curPlayer = Variable("");
+
+    media.connect("changed", () => {
+        const statusOrder = {
+            Playing: 1,
+            Paused: 2,
+            Stopped: 3,
+        };
+
+        const isPlaying = media.players.find(
+            (p) => p["play-back-status"] === "Playing",
+        );
+
+        if (isPlaying) {
+            curPlayer.value = media.players.sort(
+                (a, b) =>
+                    statusOrder[a["play-back-status"]] -
+                    statusOrder[b["play-back-status"]],
+            )[0].name;
+        }
+    });
+
+    const getPlayerInfo = (): MprisPlayer => {
+        return media.players.find((p) => p.name === curPlayer.value) || media.players[0];
+    };
+
+    return Widget.Box({
+        class_name: "menu-section-container",
+        children: [
+            Widget.Box({
+                class_name: "menu-items-section",
+                vertical: false,
+                child: Widget.Box({
+                    class_name: "menu-content",
+                    children: [
+                        Widget.Box({
+                            class_name: "media-content",
+                            child: Widget.Box({
+                                class_name: "media-indicator-right-section",
+                                hpack: "fill",
+                                hexpand: true,
+                                vertical: true,
+                                children: [
+                                    MediaInfo(getPlayerInfo),
+                                    Controls(getPlayerInfo),
+                                    Bar(getPlayerInfo),
+                                ],
+                            }),
+                        }),
+                    ],
+                    setup: (self) => {
+                        self.hook(media, () => {
+                            const curPlayer = getPlayerInfo();
+                            if (curPlayer !== undefined) {
+                                self.css = `background-image: linear-gradient(
+                  rgba(30, 30, 46, 0.85),
+                  rgba(30, 30, 46, 0.9),
+                  #1e1e2e 40em), url("${curPlayer.track_cover_url}");
+                   `;
+                            }
+                        });
+                    },
+                }),
+            }),
+        ],
+    });
+};
+
+export { Media };