feat(ags player): add circles indicating how many players there are

This commit is contained in:
matt1432 2023-09-27 13:32:53 -04:00
parent 61fadfce61
commit 1f4914e659
3 changed files with 55 additions and 13 deletions

View file

@ -1,10 +1,11 @@
const { execAsync, lookUpIcon } = ags.Utils; const { execAsync, lookUpIcon } = ags.Utils;
const { Mpris } = ags.Service; const { Mpris } = ags.Service;
const { Button, Icon, Label, Stack, Slider, CenterBox } = ags.Widget; const { Button, Icon, Label, Stack, Slider, CenterBox, Box } = ags.Widget;
const { Gdk } = imports.gi; const { Gdk } = imports.gi;
const display = Gdk.Display.get_default(); const display = Gdk.Display.get_default();
import { EventBox } from '../misc/cursorbox.js'; import { EventBox } from '../misc/cursorbox.js';
import { Separator } from '../misc/separator.js';
const icons = { const icons = {
mpris: { mpris: {
@ -28,7 +29,6 @@ const icons = {
export const CoverArt = (player, params) => CenterBox({ export const CoverArt = (player, params) => CenterBox({
...params, ...params,
className: 'player',
vertical: true, vertical: true,
properties: [['bgStyle', '']], properties: [['bgStyle', '']],
connections: [ connections: [
@ -75,18 +75,45 @@ export const ArtistLabel = (player, params) => Label({
}]], }]],
}); });
export const PlayerIcon = (player, { symbolic = true, ...params } = {}) => Icon({ export const PlayerIcon = (player, { symbolic = true, ...params } = {}) => {
let MainIcon = Icon({
...params, ...params,
className: 'player-icon', className: 'player-icon',
size: 32, size: 32,
tooltipText: player.identity || '', tooltipText: player.identity || '',
connections: [[player, icon => { connections: [
[player, icon => {
const name = `${player.entry}${symbolic ? '-symbolic' : ''}`; const name = `${player.entry}${symbolic ? '-symbolic' : ''}`;
lookUpIcon(name) ? icon.icon = name lookUpIcon(name) ? icon.icon = name
: icon.icon = icons.mpris.fallback; : icon.icon = icons.mpris.fallback;
}]], }],
],
}); });
return Box({
connections: [
[Mpris, box => {
let overlays = box.get_parent().get_parent().get_parent().overlays;
let player = overlays.find(overlay => overlay === box.get_parent().get_parent());
let index = overlays.indexOf(player)
let children = [];
for (let i = 0; i < overlays.length; ++i) {
if (i === index) {
children.push(MainIcon);
children.push(Separator(2));
}
else {
children.push(Box({ className: 'position-indicator' }));
children.push(Separator(2));
}
}
box.children = children;
}],
],
});
}
export const PositionSlider = (player, params) => EventBox({ export const PositionSlider = (player, params) => EventBox({
child: Slider({ child: Slider({
...params, ...params,

View file

@ -59,6 +59,14 @@
} }
} }
.position-indicator {
min-width: 18px;
margin: 7px;
background-color: rgba(255, 255, 255, 0.7);
box-shadow: 0 0 5px 0px rgba(255, 255, 255, 0.3);
border-radius: 100%;
}
.previous, .previous,
.next, .next,
.shuffle, .shuffle,

View file

@ -628,6 +628,13 @@ calendar:indeterminate {
.player button label { .player button label {
min-width: 35px; } min-width: 35px; }
.position-indicator {
min-width: 18px;
margin: 7px;
background-color: rgba(255, 255, 255, 0.7);
box-shadow: 0 0 5px 0px rgba(255, 255, 255, 0.3);
border-radius: 100%; }
.previous, .previous,
.next, .next,
.shuffle, .shuffle,