Add mostly final ags config
This commit is contained in:
parent
c310042564
commit
bce65f6835
23 changed files with 999 additions and 156 deletions
|
@ -0,0 +1,78 @@
|
|||
const mpris = await Service.import("mpris");
|
||||
const players = mpris.bind("players");
|
||||
|
||||
// TODO: rework
|
||||
export const currently_playing_controller = Widget.Box({
|
||||
vertical: true,
|
||||
visible: players.as((p) => p.length > 0),
|
||||
children: players.as((p) => p.map(CurrentlyPlaying)),
|
||||
});
|
||||
|
||||
function CurrentlyPlaying(player) {
|
||||
return Widget.Box({
|
||||
class_name: "currently-playing-big",
|
||||
css: player.bind("cover_path").as((url) => {
|
||||
if (url == undefined) {
|
||||
return "";
|
||||
}
|
||||
console.log(url);
|
||||
return `
|
||||
background-image: url('${url}');
|
||||
background-blend-mode: darken;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
`;
|
||||
}),
|
||||
spacing: 4,
|
||||
children: [
|
||||
Widget.Box({
|
||||
class_name: "album-art-big",
|
||||
css: player.bind("cover_path").as((url) => {
|
||||
if (url == undefined) {
|
||||
return `
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
background-image: url('${App.configDir}/assets/music-symbolic.svg');
|
||||
background-size: 50% 50%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
`;
|
||||
}
|
||||
return `background-image: url('${url}'); background-size: cover;`;
|
||||
}),
|
||||
}),
|
||||
Widget.Box({
|
||||
children: [
|
||||
Widget.Label({
|
||||
class_name: "currently-playing-title",
|
||||
label: player.bind("track-title"),
|
||||
xalign: 0.5,
|
||||
hexpand: true,
|
||||
truncate: "end",
|
||||
}),
|
||||
Widget.Label({
|
||||
class_name: "currently-playing-artists",
|
||||
label: player.bind("track-artists").as((artists) => {
|
||||
return artists.join(", ");
|
||||
}),
|
||||
xalign: 0.5,
|
||||
hexpand: true,
|
||||
truncate: "end",
|
||||
}),
|
||||
],
|
||||
vpack: "center",
|
||||
vertical: true,
|
||||
}),
|
||||
// Widget.Icon({
|
||||
// class_name: "playback-status",
|
||||
// icon: player.bind("play-back-status").as((status) => {
|
||||
// if (status == "Playing") {
|
||||
// return "media-playback-start";
|
||||
// } else if (status == "Paused") {
|
||||
// return "media-playback-pause";
|
||||
// }
|
||||
// return "";
|
||||
// }),
|
||||
// }),
|
||||
],
|
||||
});
|
||||
}
|
Loading…
Add table
Add a link
Reference in a new issue