105 lines
4.5 KiB
TypeScript
105 lines
4.5 KiB
TypeScript
import { bind } from "astal";
|
|
import { Gtk, Widget } from "astal/gtk3";
|
|
import AstalMpris from "gi://AstalMpris";
|
|
import { Separator, SeparatorProps } from "../Separator";
|
|
|
|
const mpris: AstalMpris.Mpris = AstalMpris.get_default();
|
|
|
|
const playerIcons = {
|
|
spotify: '',
|
|
clapper: '',
|
|
mpv: '',
|
|
spotube: '',
|
|
firefox: ''
|
|
}
|
|
|
|
export function Media(): JSX.Element {
|
|
const mediaControlsRevealer: Widget.Revealer = new Widget.Revealer({
|
|
transitionType: Gtk.RevealerTransitionType.SLIDE_RIGHT,
|
|
transitionDuration: 260,
|
|
revealChild: false,
|
|
child: new Widget.Box({
|
|
className: "media-controls",
|
|
expand: false,
|
|
homogeneous: false,
|
|
children: bind(mpris, "players").as((players: Array<AstalMpris.Player>) =>
|
|
players[0] ? [
|
|
new Widget.Button({
|
|
className: "previous",
|
|
label: "",
|
|
onClick: () => players[0].canGoPrevious && players[0].previous()
|
|
} as Widget.ButtonProps),
|
|
new Widget.Button({
|
|
className: "pause",
|
|
label: bind(players[0], "playbackStatus").as((status: AstalMpris.PlaybackStatus) =>
|
|
status === AstalMpris.PlaybackStatus.PLAYING ? "" : ""),
|
|
onClick: () => {
|
|
players[0].playbackStatus === AstalMpris.PlaybackStatus.PAUSED ?
|
|
players[0].play()
|
|
:
|
|
players[0].pause()
|
|
}
|
|
} as Widget.ButtonProps),
|
|
new Widget.Button({
|
|
className: "next",
|
|
label: "",
|
|
onClick: () => players[0].canGoNext && players[0].next()
|
|
} as Widget.ButtonProps)
|
|
] : new Widget.Label({
|
|
label: "Don't Stop The Music!"
|
|
} as Widget.LabelProps)
|
|
)
|
|
} as Widget.BoxProps)
|
|
} as Widget.RevealerProps);
|
|
|
|
const mediaWidget = new Widget.EventBox({
|
|
className: "media-eventbox",
|
|
visible: bind(mpris, "players").as((players: Array<AstalMpris.Player>) => players[0]).as(Boolean),
|
|
child: new Widget.Box({
|
|
className: "media",
|
|
children: [
|
|
new Widget.Box({
|
|
children: bind(mpris, "players").as((players: Array<AstalMpris.Player>) =>
|
|
players[0] ? [
|
|
new Widget.Label({
|
|
className: "icon",
|
|
label: bind(players[0], "busName").as((busName: string) => {
|
|
const playerName: string = busName.split('.')[busName.split('.').length-1];
|
|
return playerIcons[playerName as keyof typeof playerIcons] || "";
|
|
})
|
|
} as Widget.LabelProps),
|
|
new Widget.Label({
|
|
className: "title",
|
|
label: bind(players[0], "title").as((title: string) => title || "No Title")
|
|
} as Widget.LabelProps),
|
|
Separator({
|
|
size: 2,
|
|
cssColor: `rgb(180, 180, 180)`,
|
|
alpha: 1
|
|
} as SeparatorProps),
|
|
new Widget.Label({
|
|
className: "artist",
|
|
label: bind(players[0], "artist").as((artist: string) => artist || "No Artist")
|
|
} as Widget.LabelProps)
|
|
] : new Widget.Label({
|
|
label: "Crazy to think this widget didn't disappear yet!"
|
|
} as Widget.LabelProps)
|
|
)
|
|
} as Widget.BoxProps),
|
|
mediaControlsRevealer
|
|
]
|
|
} as Widget.BoxProps)
|
|
} as Widget.EventBoxProps);
|
|
|
|
mediaWidget.connect("hover", () => {
|
|
mediaControlsRevealer.set_reveal_child(true);
|
|
mediaWidget.className = mediaWidget.className + " reveal";
|
|
});
|
|
mediaWidget.connect("hover-lost", () => {
|
|
mediaControlsRevealer.set_reveal_child(false);
|
|
mediaWidget.className = mediaWidget.className.replaceAll(" reveal", "");
|
|
})
|
|
|
|
return mediaWidget;
|
|
}
|