nixos-configs/config/ags/js/media-player/player.js

110 lines
2.2 KiB
JavaScript
Raw Normal View History

const { Mpris } = ags.Service;
const { Box, CenterBox, Label } = ags.Widget;
import * as mpris from './mpris.js';
import { Separator } from '../misc/separator.js';
const Top = player => Box({
className: 'top',
halign: 'start',
valign: 'start',
children: [
mpris.PlayerIcon(player, {
symbolic: false,
}),
],
});
const Center = player => Box({
className: 'center',
children: [
CenterBox({
vertical: true,
children: [
Box({
className: 'metadata',
vertical: true,
halign: 'start',
valign: 'center',
hexpand: true,
children: [
mpris.TitleLabel(player),
mpris.ArtistLabel(player),
],
}),
Label(),
Label(),
],
}),
CenterBox({
vertical: true,
children: [
Label(),
mpris.PlayPauseButton(player),
Label(),
],
}),
],
});
const Bottom = player => Box({
className: 'bottom',
children: [
mpris.PreviousButton(player, {
valign: 'end',
halign: 'start',
}),
Separator(8),
mpris.PositionSlider(player),
Separator(8),
mpris.NextButton(player),
Separator(8),
mpris.ShuffleButton(player),
Separator(8),
mpris.LoopButton(player),
],
});
const PlayerBox = player => mpris.CoverArt(player, {
className: `player ${player.name}`,
hexpand: true,
children: [
Top(player),
Center(player),
Bottom(player),
],
});
2023-09-22 14:47:37 -04:00
// TODO: Make this a stack with animations and gestures
export default () => Box({
2023-09-18 08:39:00 -04:00
vertical: true,
className: 'media',
properties: [['players', new Map()]],
connections: [
[Mpris, (box, busName) => {
if (!busName || box._players.has(busName))
return;
2023-09-18 08:39:00 -04:00
const player = Mpris.getPlayer(busName);
player.colors = ags.Variable();
box._players.set(busName, PlayerBox(player));
box.children = Array.from(box._players.values());
}, 'player-added'],
2023-09-18 08:39:00 -04:00
[Mpris, (box, busName) => {
if (!busName || !box._players.has(busName))
return;
box._players.delete(busName);
box.children = Array.from(box._players.values());
}, 'player-closed'],
],
});