1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
|
import { bind, Variable } from "astal";
import { Astal, Gtk } from "astal/gtk3";
import AstalMpris from "gi://AstalMpris";
import Players from "../../services/players";
import { isRealPlayer } from "../../utils/mpris";
import PopupWindow from "../../widgets/popupwindow";
const shuffleToIcon = (s: AstalMpris.Shuffle) =>
`caelestia-${s === AstalMpris.Shuffle.ON ? "shuffle" : "consecutive"}-symbolic`;
const playbackToIcon = (s: AstalMpris.PlaybackStatus) =>
`caelestia-${s === AstalMpris.PlaybackStatus.PLAYING ? "pause" : "play"}-symbolic`;
const loopToIcon = (s: AstalMpris.Loop) => {
if (s === AstalMpris.Loop.PLAYLIST) return "caelestia-repeat-symbolic";
if (s === AstalMpris.Loop.TRACK) return "caelestia-repeat-one-symbolic";
return "caelestia-no-repeat-symbolic";
};
const lengthStr = (length: number) =>
`${Math.floor(length / 60)}:${Math.floor(length % 60)
.toString()
.padStart(2, "0")}`;
const Player = ({ player }: { player: AstalMpris.Player }) => {
const background = (
<box className="background" css={bind(player, "artUrl").as(u => u && `background-image: url("${u}");`)} />
);
return (
<overlay
overlays={[
<box className="overlay" />,
<box
vertical
className="player"
setup={self =>
self.connect("size-allocate", () =>
background.set_size_request(self.get_preferred_width()[1], self.get_preferred_height()[1])
)
}
>
<label className="title" label={bind(player, "title").as(t => t ?? "")} />
<label className="artist" label={bind(player, "artist").as(a => a ?? "")} />
<label className="album" label={bind(player, "album").as(a => a ?? "")} />
<box className="controls" halign={Gtk.Align.CENTER}>
<button cursor="pointer" onClicked={() => player.shuffle()} sensitive={player.canControl}>
<icon icon={bind(player, "shuffleStatus").as(shuffleToIcon)} />
</button>
<button cursor="pointer" onClicked={() => player.previous()} sensitive={player.canGoPrevious}>
<icon icon="caelestia-skip-previous-symbolic" />
</button>
<button cursor="pointer" onClicked={() => player.play_pause()} sensitive={player.canControl}>
<icon icon={bind(player, "playbackStatus").as(playbackToIcon)} />
</button>
<button cursor="pointer" onClicked={() => player.next()} sensitive={player.canGoNext}>
<icon icon="caelestia-skip-next-symbolic" />
</button>
<button cursor="pointer" onClicked={() => player.loop()} sensitive={player.canControl}>
<icon icon={bind(player, "loopStatus").as(loopToIcon)} />
</button>
</box>
<slider
hexpand
onDragged={self => player.set_position(self.value * player.length)}
setup={self => {
const update = () => {
self.set_tooltip_text(`${lengthStr(player.position)}/${lengthStr(player.length)}`);
self.set_value(player.position / player.length);
};
self.hook(player, "notify::position", update);
self.hook(player, "notify::length", update);
update();
}}
/>
</box>,
]}
>
{background}
</overlay>
);
};
export default () => {
const shown = Variable("none");
return (
<PopupWindow name="media">
<box className="media">
<eventbox
onClick={(_, event) => {
if (event.button === Astal.MouseButton.SECONDARY) {
const current = Players.get_default().list.find(p => p.busName === shown.get());
if (current) Players.get_default().makeCurrent(current);
}
}}
onScroll={(_, event) => {
const players = AstalMpris.get_default().players.filter(isRealPlayer);
const idx = players.findIndex(p => p.busName === shown.get());
if (idx === -1) return;
if (event.delta_y < 0) {
if (idx > 0) shown.set(players[idx - 1].busName);
} else if (idx < players.length - 1) shown.set(players[idx + 1].busName);
}}
>
<stack
expand
transitionType={Gtk.StackTransitionType.SLIDE_LEFT_RIGHT}
transitionDuration={150}
shown={bind(shown)}
setup={self => {
const players = new Map<string, JSX.Element>();
const addPlayer = (player: AstalMpris.Player) => {
if (!isRealPlayer(player) || players.has(player.busName)) return;
const widget = <Player player={player} />;
self.add_named(widget, player.busName);
if (players.size === 0) shown.set(player.busName);
players.set(player.busName, widget);
};
for (const player of Players.get_default().list) addPlayer(player);
self.hook(AstalMpris.get_default(), "player-added", (_, player) => addPlayer(player));
self.hook(AstalMpris.get_default(), "player-closed", (_, player) => {
players.get(player.busName)?.destroy();
players.delete(player.busName);
if (shown.get() === player.busName)
shown.set(AstalMpris.get_default().players.find(isRealPlayer)?.busName ?? "none");
});
}}
>
<box vertical valign={Gtk.Align.CENTER} name="none">
<label className="icon" label="music_note" />
<label label="No media playing" />
</box>
</stack>
</eventbox>
</box>
</PopupWindow>
);
};
|
