feat(ags player): make indicators clickable and big refactor

This commit is contained in:
matt1432 2023-11-28 12:24:58 -05:00
parent 5b72e6fa0a
commit 04312dcc2c
3 changed files with 93 additions and 105 deletions

View file

@ -7,7 +7,7 @@ const MAX_OFFSET = 200;
const OFFSCREEN = 500;
const ANIM_DURATION = 500;
const TRANSITION = `transition: margin ${ANIM_DURATION}ms ease,
opacity 3s ease;`;
opacity ${ANIM_DURATION}ms ease;`;
export default ({
@ -24,20 +24,11 @@ export default ({
// Set this prop to differentiate it easily
emptyPlayer.empty = true;
widget.add(Overlay({
const content = Overlay({
...props,
properties: [
...properties,
['dragging', false],
['showTopOnly', (overlay) => overlay.list()
.forEach((over) => {
if (over === overlay.list().at(-1)) {
over.visible = true;
}
else {
over.visible = false;
}
})],
],
child: emptyPlayer,
@ -52,7 +43,7 @@ export default ({
});
}
else {
overlay._showTopOnly(overlay);
overlay.showTopOnly();
}
// Don't allow gesture when only one player
@ -128,7 +119,7 @@ export default ({
widget.sensitive = true;
overlay._showTopOnly(overlay);
overlay.showTopOnly();
});
}
else {
@ -137,10 +128,31 @@ export default ({
}
}, 'drag-end'],
],
}));
});
widget.child.list = () => widget.child.get_children()
widget.add(content);
// Overlay methods
content.list = () => content.get_children()
.filter((ch) => !ch.empty);
content.includesWidget = (playerW) => {
return content.list().find((w) => w === playerW);
};
content.showTopOnly = () => content.list().forEach((over) => {
over.visible = over === content.list().at(-1);
});
content.moveToTop = (player) => {
player.visible = true;
content.reorder_overlay(player, -1);
timeout(ANIM_DURATION, () => {
content.showTopOnly();
});
};
widget.getOverlay = () => content;
return widget;
};

View file

@ -6,6 +6,8 @@ import { execAsync, lookUpIcon, readFileAsync } from 'resource:///com/github/Ayl
import Separator from '../misc/separator.js';
import EventBox from '../misc/cursorbox.js';
const ICON_SIZE = 32;
const icons = {
mpris: {
fallback: 'audio-x-generic-symbolic',
@ -31,7 +33,10 @@ export const CoverArt = (player, props) => CenterBox({
...props,
vertical: true,
properties: [['bgStyle', '']],
properties: [
['bgStyle', ''],
['player', player],
],
setup: (self) => {
// Give temp cover art
@ -109,53 +114,39 @@ export const ArtistLabel = (player, props) => Label({
binds: [['label', player, 'track-artists', (a) => a.join(', ') || '']],
});
export const PlayerIcon = (player, { symbolic = true, ...props } = {}) => {
// Get player's icon
const MainIcon = Icon({
export const PlayerIcon = (player, overlay, props) => {
const playerIcon = (p, widget, over) => EventBox({
...props,
className: 'player-icon',
size: 32,
tooltipText: player.identity || '',
tooltipText: p.identity || '',
connections: [[player, (self) => {
const name = `${player.entry}${symbolic ? '-symbolic' : ''}`;
onPrimaryClickRelease: () => {
widget?.moveToTop(over);
},
lookUpIcon(name) ?
self.icon = name :
self.icon = icons.mpris.fallback;
child: Icon({
className: widget ? 'position-indicator' : 'player-icon',
size: widget ? '' : ICON_SIZE,
connections: [[p, (self) => {
self.icon = lookUpIcon(p.entry) ?
p.entry :
icons.mpris.fallback;
}]],
}),
});
// Multiple player indicators
return Box({
properties: [['overlay']],
connections: [[Mpris, (self) => {
if (!self._overlay) {
self._overlay = self.get_parent().get_parent().get_parent();
}
const thisIndex = overlay.list()
.indexOf(self.get_parent().get_parent());
const overlays = self._overlay.list();
self.children = overlay.list().map((over, i) => {
self.children.push(Separator(2));
const playerWidget = overlays.find((overlay) => {
return overlay === self.get_parent().get_parent();
});
const index = overlays.indexOf(playerWidget);
const children = [];
for (let i = 0; i < overlays.length; ++i) {
if (i === index) {
children.push(Separator(2));
children.push(MainIcon);
}
else {
children.push(Separator(2));
// TODO: make this clickable to switch
children.push(Box({ className: 'position-indicator' }));
}
}
self.children = children.reverse();
return i === thisIndex ?
playerIcon(player) :
playerIcon(over._player, overlay, over);
}).reverse();
}]],
});
};
@ -216,11 +207,13 @@ const PlayerButton = ({ player, items, onClick, prop }) => EventBox({
onHover: (self) => {
self._hovered = true;
if (prop === 'playBackStatus') {
if (prop === 'playBackStatus' && player.colors.value) {
const c = player.colors.value;
items.forEach((item) => {
item[1].setCss(`
background-color: ${player.colors.value.hoverAccent};
color: ${player.colors.value.buttonText};
background-color: ${c.hoverAccent};
color: ${c.buttonText};
min-height: 40px;
min-width: 36px;
margin-bottom: 1px;
@ -232,11 +225,13 @@ const PlayerButton = ({ player, items, onClick, prop }) => EventBox({
onHoverLost: (self) => {
self._hovered = false;
if (prop === 'playBackStatus') {
if (prop === 'playBackStatus' && player.colors.value) {
const c = player.colors.value;
items.forEach((item) => {
item[1].setCss(`
background-color: ${player.colors.value.buttonAccent};
color: ${player.colors.value.buttonText};
background-color: ${c.buttonAccent};
color: ${c.buttonText};
min-height: 42px;
min-width: 38px;
`);

View file

@ -10,15 +10,13 @@ import Separator from '../misc/separator.js';
const FAVE_PLAYER = 'org.mpris.MediaPlayer2.spotify';
const Top = (player) => Box({
const Top = (player, overlay) => Box({
className: 'top',
hpack: 'start',
vpack: 'start',
children: [
mpris.PlayerIcon(player, {
symbolic: false,
}),
mpris.PlayerIcon(player, overlay),
],
});
@ -85,13 +83,13 @@ const Bottom = (player) => Box({
],
});
const PlayerBox = (player) => {
const PlayerBox = (player, overlay) => {
const widget = mpris.CoverArt(player, {
className: `player ${player.name}`,
hexpand: true,
children: [
Top(player),
Top(player, overlay),
Center(player),
Bottom(player),
],
@ -102,10 +100,8 @@ const PlayerBox = (player) => {
return widget;
};
export default () => Box({
className: 'media',
child: PlayerGesture({
export default () => {
const content = PlayerGesture({
properties: [
['players', new Map()],
['setup', false],
@ -131,39 +127,29 @@ export default () => Box({
}
}
// Get the one on top so it stays there
let previousFirst = overlay.get_children().at(-1);
for (const [key, value] of overlay._players.entries()) {
if (value === previousFirst) {
previousFirst = key;
break;
}
}
// Get the one on top so we can move it up later
const previousFirst = overlay.list().at(-1);
// Make the new player
const player = Mpris.getPlayer(busName);
player.colors = Variable();
overlay._players.set(busName, PlayerBox(player));
overlay._players.set(
busName,
PlayerBox(player, content.getOverlay()),
);
overlay.overlays = Array.from(overlay._players.values())
.map((widget) => widget);
// Select favorite player at startup
if (!overlay._setup && overlay._players.has(FAVE_PLAYER)) {
overlay.reorder_overlay(
overlay._players.get(FAVE_PLAYER),
-1,
);
overlay.moveToTop(overlay._players.get(FAVE_PLAYER));
overlay._setup = true;
}
// Move previousFirst on top again
else if (overlay._players.get(previousFirst)) {
overlay.reorder_overlay(
overlay._players.get(previousFirst),
-1,
);
else if (overlay.includesWidget(previousFirst)) {
overlay.moveToTop(previousFirst);
}
}, 'player-added'],
@ -173,15 +159,8 @@ export default () => Box({
return;
}
// Get the one on top so it stays there
let previousFirst = overlay.get_children().at(-1);
for (const [key, value] of overlay._players.entries()) {
if (value === previousFirst) {
previousFirst = key;
break;
}
}
// Get the one on top so we can move it up later
const previousFirst = overlay.list().at(-1);
// Remake overlays without deleted one
overlay._players.delete(busName);
@ -189,13 +168,15 @@ export default () => Box({
.map((widget) => widget);
// Move previousFirst on top again
if (overlay._players.has(previousFirst)) {
overlay.reorder_overlay(
overlay._players.get(previousFirst),
-1,
);
if (overlay.includesWidget(previousFirst)) {
overlay.moveToTop(previousFirst);
}
}, 'player-closed'],
],
}),
});
});
return Box({
className: 'media',
child: content,
});
};