matt1432/nixos-configs
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

refactor(ags players): clarify some code

Browse source
This commit is contained in:
matt1432 2023-11-01 14:33:06 -04:00
parent ee84e4c7bc
commit 0f02a0494e
4 changed files with 99 additions and 111 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
devices/wim/config/ags/js/media-player/gesture.js
View file

@ -22,19 +22,23 @@ export default ({
...properties, ...properties,
['dragging', false], ['dragging', false],
], ],
// Have empty PlayerBox to define the size of the widget
child: Box({ className: 'player' }), child: Box({ className: 'player' }),
connections: [ connections: [
...connections, ...connections,
[gesture, overlay => { [gesture, overlay => {
// Don't allow gesture when only one player
if (overlay.list().length <= 1) if (overlay.list().length <= 1)
return; return;
overlay._dragging = true; overlay._dragging = true;
const offset = gesture.get_offset()[1]; var offset = gesture.get_offset()[1];
const playerBox = overlay.list().at(-1); const playerBox = overlay.list().at(-1);
// Sliding right
if (offset >= 0) { if (offset >= 0) {
playerBox.setStyle(` playerBox.setStyle(`
margin-left: ${offset}px; margin-left: ${offset}px;
@ -42,18 +46,20 @@ export default ({
${playerBox._bgStyle} ${playerBox._bgStyle}
`); `);
} }
// Sliding left
else { else {
const newOffset = Math.abs(offset); offset = Math.abs(offset);
playerBox.setStyle(` playerBox.setStyle(`
margin-left: -${newOffset}px; margin-left: -${offset}px;
margin-right: ${newOffset}px; margin-right: ${offset}px;
${playerBox._bgStyle} ${playerBox._bgStyle}
`); `);
} }
overlay._selected = playerBox;
}, 'drag-update'], }, 'drag-update'],
[gesture, overlay => { [gesture, overlay => {
// Don't allow gesture when only one player
if (overlay.list().length <= 1) if (overlay.list().length <= 1)
return; return;
@ -62,8 +68,12 @@ export default ({
const playerBox = overlay.list().at(-1); const playerBox = overlay.list().at(-1);
// If crosses threshold after letting go, slide away
if (Math.abs(offset) > MAX_OFFSET) { if (Math.abs(offset) > MAX_OFFSET) {
// Disable inputs during animation
widget.sensitive = false; widget.sensitive = false;
// Slide away right
if (offset >= 0) { if (offset >= 0) {
playerBox.setStyle(` playerBox.setStyle(`
${TRANSITION} ${TRANSITION}
@ -72,6 +82,8 @@ export default ({
opacity: 0; ${playerBox._bgStyle} opacity: 0; ${playerBox._bgStyle}
`); `);
} }
// Slide away left
else { else {
playerBox.setStyle(` playerBox.setStyle(`
${TRANSITION} ${TRANSITION}
@ -79,14 +91,18 @@ export default ({
margin-right: ${OFFSCREEN}px; margin-right: ${OFFSCREEN}px;
opacity: 0; ${playerBox._bgStyle}`); opacity: 0; ${playerBox._bgStyle}`);
} }
timeout(500, () => { timeout(500, () => {
// Put the player in the back after anim
overlay.reorder_overlay(playerBox, 0); overlay.reorder_overlay(playerBox, 0);
// Recenter player
playerBox.setStyle(playerBox._bgStyle); playerBox.setStyle(playerBox._bgStyle);
overlay._selected = overlay.list().at(-1);
widget.sensitive = true; widget.sensitive = true;
}); });
} }
else { else {
// Recenter with transition for animation
playerBox.setStyle(`${TRANSITION} ${playerBox._bgStyle}`); playerBox.setStyle(`${TRANSITION} ${playerBox._bgStyle}`);
} }
}, 'drag-end'], }, 'drag-end'],

177
devices/wim/config/ags/js/media-player/mpris.js
View file

@ -1,9 +1,8 @@
import Mpris from 'resource:///com/github/Aylur/ags/service/mpris.js'; import Mpris from 'resource:///com/github/Aylur/ags/service/mpris.js';
import { Button, Icon, Label, Stack, Slider, CenterBox, Box } from 'resource:///com/github/Aylur/ags/widget.js'; import { Button, Icon, Label, Stack, Slider, CenterBox, Box } from 'resource:///com/github/Aylur/ags/widget.js';
import { execAsync, lookUpIcon, interval, readFileAsync } from 'resource:///com/github/Aylur/ags/utils.js'; import { execAsync, lookUpIcon, readFileAsync } from 'resource:///com/github/Aylur/ags/utils.js';
import Gdk from 'gi://Gdk'; import Gdk from 'gi://Gdk';
import GLib from 'gi://GLib';
const display = Gdk.Display.get_default(); const display = Gdk.Display.get_default();
import Separator from '../misc/separator.js'; import Separator from '../misc/separator.js';
@ -66,12 +65,14 @@ export const CoverArt = (player, props) => CenterBox({
player.colors.value = JSON.parse(out); player.colors.value = JSON.parse(out);
self._bgStyle = `background: radial-gradient(circle, self._bgStyle = `
rgba(0, 0, 0, 0.4) 30%, background: radial-gradient(circle,
${player.colors.value.imageAccent}), rgba(0, 0, 0, 0.4) 30%,
url("${player.coverPath}"); ${player.colors.value.imageAccent}),
background-size: cover; url("${player.coverPath}");
background-position: center;`; background-size: cover;
background-position: center;
`;
if (!self.get_parent()._dragging) if (!self.get_parent()._dragging)
self.setStyle(self._bgStyle); self.setStyle(self._bgStyle);
@ -103,6 +104,7 @@ export const ArtistLabel = (player, props) => Label({
}); });
export const PlayerIcon = (player, { symbolic = true, ...props } = {}) => { export const PlayerIcon = (player, { symbolic = true, ...props } = {}) => {
// Get player's icon
const MainIcon = Icon({ const MainIcon = Icon({
...props, ...props,
className: 'player-icon', className: 'player-icon',
@ -115,43 +117,37 @@ export const PlayerIcon = (player, { symbolic = true, ...props } = {}) => {
}]], }]],
}); });
const widget = Box({}); // Multiple player indicators
var overlay; return Box({
const source = interval(100, () => { properties: [['overlay']],
if (player.colors.value) { connections: [[Mpris, self => {
overlay = widget.get_parent().get_parent().get_parent(); if (!self._overlay)
updateIcons(); self._overlay = self.get_parent().get_parent().get_parent();
overlay._mprisConnections.set(player.busName, Mpris.connect('changed', updateIcons));
GLib.source_remove(source); const overlays = self._overlay.list();
}
const player = overlays.find(overlay => {
return overlay === self.get_parent().get_parent();
});
const index = overlays.indexOf(player);
const 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));
}
}
self.children = children;
}]],
}); });
const updateIcons = () => {
const overlays = overlay.list();
const player = overlays.find(overlay => {
return overlay === widget.get_parent().get_parent();
});
const index = overlays.indexOf(player);
const 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));
}
}
widget.children = children;
};
return widget;
}; };
// FIXME: get the cursors right or just don't display when disabled
export const PositionSlider = (player, props) => EventBox({ export const PositionSlider = (player, props) => EventBox({
child: Slider({ child: Slider({
...props, ...props,
@ -172,7 +168,7 @@ export const PositionSlider = (player, props) => EventBox({
.new_from_name(display, 'pointer')); .new_from_name(display, 'pointer'));
} }
slider.sensitive = player.length > 0; slider.visible = player.length > 0;
if (player.length > 0) if (player.length > 0)
slider.value = player.position / player.length; slider.value = player.position / player.length;
} }
@ -183,68 +179,36 @@ export const PositionSlider = (player, props) => EventBox({
[player.colors, s => { [player.colors, s => {
const c = player.colors.value; const c = player.colors.value;
if (player.colors.value) { if (player.colors.value) {
s.setCss(`highlight { background-color: ${c.buttonAccent}; } s.setCss(`
slider { background-color: ${c.buttonAccent}; } highlight { background-color: ${c.buttonAccent}; }
slider:hover { background-color: ${c.hoverAccent}; } slider { background-color: ${c.buttonAccent}; }
trough { background-color: ${c.buttonText}; }`); slider:hover { background-color: ${c.hoverAccent}; }
trough { background-color: ${c.buttonText}; }
`);
} }
}], }],
], ],
}), }),
}); });
function lengthStr(length) {
const min = Math.floor(length / 60);
const sec0 = Math.floor(length % 60) < 10 ? '0' : '';
const sec = Math.floor(length % 60);
return `${min}:${sec0}${sec}`;
}
export const PositionLabel = player => Label({
properties: [['update', self => {
player.length > 0 ? self.label = lengthStr(player.position)
: self.visible = !!player;
}]],
connections: [
[player, l => l._update(l), 'position'],
[1000, l => l._update(l)],
],
});
export const LengthLabel = player => Label({
connections: [[player, self => {
player.length > 0 ? self.label = lengthStr(player.length)
: self.visible = !!player;
}]],
});
export const Slash = player => Label({
label: '/',
connections: [[player, self => {
self.visible = player.length > 0;
}]],
});
// TODO: use label instead of stack to fix UI issues
const PlayerButton = ({ player, items, onClick, prop }) => Button({ const PlayerButton = ({ player, items, onClick, prop }) => Button({
child: Stack({ items }), child: Stack({ items }),
onPrimaryClickRelease: () => player[onClick](), onPrimaryClickRelease: () => player[onClick](),
properties: [['hovered', false]], properties: [['hovered', false]],
onHover: self => { onHover: self => {
self._hovered = true; self._hovered = true;
if (! self.child.sensitive || ! self.sensitive) self.window.set_cursor(Gdk.Cursor.new_from_name(display, 'pointer'));
self.window.set_cursor(Gdk.Cursor.new_from_name(display, 'not-allowed'));
else
self.window.set_cursor(Gdk.Cursor.new_from_name(display, 'pointer'));
if (prop == 'playBackStatus') { if (prop == 'playBackStatus') {
items.forEach(item => { items.forEach(item => {
item[1].setStyle(`background-color: ${player.colors.value.hoverAccent}; item[1].setStyle(`
color: ${player.colors.value.buttonText}; background-color: ${player.colors.value.hoverAccent};
min-height: 40px; min-width: 36px; color: ${player.colors.value.buttonText};
margin-bottom: 1px; margin-right: 1px;`); min-height: 40px;
min-width: 36px;
margin-bottom: 1px;
margin-right: 1px;
`);
}); });
} }
}, },
@ -253,9 +217,12 @@ const PlayerButton = ({ player, items, onClick, prop }) => Button({
self.window.set_cursor(null); self.window.set_cursor(null);
if (prop == 'playBackStatus') { if (prop == 'playBackStatus') {
items.forEach(item => { items.forEach(item => {
item[1].setStyle(`background-color: ${player.colors.value.buttonAccent}; item[1].setStyle(`
color: ${player.colors.value.buttonText}; background-color: ${player.colors.value.buttonAccent};
min-height: 42px; min-width: 38px;`); color: ${player.colors.value.buttonText};
min-height: 42px;
min-width: 38px;
`);
}); });
} }
}, },
@ -272,23 +239,31 @@ const PlayerButton = ({ player, items, onClick, prop }) => Button({
if (prop == 'playBackStatus') { if (prop == 'playBackStatus') {
if (button._hovered) { if (button._hovered) {
items.forEach(item => { items.forEach(item => {
item[1].setStyle(`background-color: ${player.colors.value.hoverAccent}; item[1].setStyle(`
color: ${player.colors.value.buttonText}; background-color: ${player.colors.value.hoverAccent};
min-height: 40px; min-width: 36px; color: ${player.colors.value.buttonText};
margin-bottom: 1px; margin-right: 1px;`); min-height: 40px;
min-width: 36px;
margin-bottom: 1px;
margin-right: 1px;
`);
}); });
} }
else { else {
items.forEach(item => { items.forEach(item => {
item[1].setStyle(`background-color: ${player.colors.value.buttonAccent}; item[1].setStyle(`
color: ${player.colors.value.buttonText}; background-color: ${player.colors.value.buttonAccent};
min-height: 42px; min-width: 38px;`); color: ${player.colors.value.buttonText};
min-height: 42px;
min-width: 38px;`);
}); });
} }
} }
else { else {
button.setCss(`* { color: ${player.colors.value.buttonAccent}; } button.setCss(`
*:hover { color: ${player.colors.value.hoverAccent}; }`); * { color: ${player.colors.value.buttonAccent}; }
*:hover { color: ${player.colors.value.hoverAccent}; }
`);
} }
} }
}], }],

4
devices/wim/config/ags/js/media-player/player.js
View file

@ -38,7 +38,6 @@ const Center = player => Box({
mpris.ArtistLabel(player), mpris.ArtistLabel(player),
], ],
}), }),
null, null,
null, null,
], ],
@ -93,7 +92,6 @@ export default () => Box({
child: PlayerGesture({ child: PlayerGesture({
properties: [ properties: [
['players', new Map()], ['players', new Map()],
['mprisConnections', new Map()],
['setup', false], ['setup', false],
], ],
connections: [ connections: [
@ -158,8 +156,6 @@ export default () => Box({
} }
overlay._players.delete(busName); overlay._players.delete(busName);
Mpris.disconnect(overlay._mprisConnections.get(busName));
overlay._mprisConnections.delete(busName);
const result = []; const result = [];
overlay._players.forEach(widget => { overlay._players.forEach(widget => {

1
devices/wim/config/ags/js/notifications/popup.js
View file

@ -7,6 +7,7 @@ import GLib from 'gi://GLib';
import Notification from './base.js'; import Notification from './base.js';
// FIXME: slide away when notif is seen
const Popups = () => Box({ const Popups = () => Box({
vertical: true, vertical: true,
properties: [ properties: [