custum-hyprpanel/modules/bar/media/index.ts

import Gdk from 'gi://Gdk?version=3.0';
const mpris = await Service.import("mpris");
import { openMenu } from "../utils.js";
import options from "options";
import { getCurrentPlayer } from 'lib/shared/media.js';

const { show_artist, truncation, truncation_size, show_label, show_active_only } = options.bar.media;

const Media = () => {
    const activePlayer = Variable(mpris.players[0]);
    const isVis = Variable(!show_active_only.value);

    show_active_only.connect("changed", () => {
        isVis.value = !show_active_only.value || mpris.players.length > 0;
    });

    mpris.connect("changed", () => {
        const curPlayer = getCurrentPlayer(activePlayer.value);
        activePlayer.value = curPlayer;
        isVis.value = !show_active_only.value || mpris.players.length > 0;
    });

    const getIconForPlayer = (playerName: string): string => {
        const windowTitleMap = [
            ["Firefox", "󰈹"],
            ["Microsoft Edge", "󰇩"],
            ["Discord", ""],
            ["Plex", "󰚺"],
            ["Spotify", "󰓇"],
            ["(.*)", "󰝚"],
        ];

        const foundMatch = windowTitleMap.find((wt) =>
            RegExp(wt[0], "i").test(playerName),
        );

        return foundMatch ? foundMatch[1] : "󰝚";
    };

    const songIcon = Variable("");

    const mediaLabel = Utils.watch("Media", [mpris, show_artist, truncation, truncation_size, show_label], () => {
        if (activePlayer.value && show_label.value) {
            const { track_title, identity, track_artists } = activePlayer.value;
            songIcon.value = getIconForPlayer(identity);
            const trackArtist = show_artist.value
                ? ` - ${track_artists.join(', ')}`
                : ``;
            const truncatedLabel = truncation.value
                ? `${track_title + trackArtist}`.substring(0, truncation_size.value)
                : `${track_title + trackArtist}`;

            return track_title.length === 0
                ? `No media playing...`
                : ((truncatedLabel.length < truncation_size.value) || !truncation.value)
                    ? `${truncatedLabel}`
                    : `${truncatedLabel.substring(0, truncatedLabel.length - 3)}...`;
        } else {
            songIcon.value = getIconForPlayer(activePlayer.value?.identity || "");
            return `Media`;
        }
    });

    return {
        component: Widget.Box({
            visible: false,
            child: Widget.Box({
                className: Utils.merge([options.theme.bar.buttons.style.bind("value"), show_label.bind("value")], (style, showLabel) => {
                    const styleMap = {
                        default: "style1",
                        split: "style2",
                        wave: "style3",
                    };
                    return `media ${styleMap[style]}`;
                }),
                child: Widget.Box({
                    children: [
                        Widget.Label({
                            class_name: "bar-button-icon media txt-icon bar",
                            label: songIcon.bind("value").as(v => v || "󰝚"),
                        }),
                        Widget.Label({
                            class_name: "bar-button-label media",
                            label: mediaLabel,
                        }),
                    ],
                }),
            }),
        }),
        isVis,
        boxClass: "media",
        name: "media",
        props: {
            on_scroll_up: () => activePlayer.value?.next(),
            on_scroll_down: () => activePlayer.value?.previous(),
            on_primary_click: (clicked: any, event: Gdk.Event) => {
                openMenu(clicked, event, "mediamenu");
            },
        },
    };
};

export { Media };