perf(ags): optimize material colors

This commit is contained in:
matt1432 2023-09-18 08:39:00 -04:00
parent 348f95484e
commit c018bdbece
3 changed files with 39 additions and 45 deletions

View file

@ -7,6 +7,7 @@ what i want to do:
- learn flakes - learn flakes
- add auto-rotate widget in ags control center - add auto-rotate widget in ags control center
- add toggle of popups window - add toggle of popups window
- when multiple widgets open, clicking on a background one puts it forward
# Docs # Docs

View file

@ -22,24 +22,19 @@ const icons = {
}, },
} }
let coloryou = path => ['bash', '-c', `[[ -f "${path}" ]] && coloryou "${path}"`];
const MEDIA_CACHE_PATH = CACHE_DIR + '/media';
export const CoverArt = (player, params) => CenterBox({ export const CoverArt = (player, params) => CenterBox({
...params, ...params,
className: 'player', className: 'player',
vertical: true, vertical: true,
connections: [ connections: [
[player, box => { [player, box => {
execAsync(coloryou(player.coverPath)) execAsync(['bash', '-c', `[[ -f "${player.coverPath}" ]] && coloryou "${player.coverPath}"`])
.then(out => { .then(out => {
let colors = JSON.parse(out); player.colors.value = JSON.parse(out);
box.setStyle(`background: radial-gradient(circle, box.setStyle(`background: radial-gradient(circle,
rgba(0, 0, 0, 0.4) 30%, rgba(0, 0, 0, 0.4) 30%,
${colors.imageAccent}), ${player.colors.value.imageAccent}),
url("${player.coverPath}"); url("${player.coverPath}");
background-size: cover; background-size: cover;
background-position: center;`); background-position: center;`);
@ -91,16 +86,6 @@ export const PositionSlider = (player, params) => Slider({
}, },
properties: [ properties: [
['update', slider => { ['update', slider => {
execAsync(coloryou(player.coverPath))
.then(out => {
let colors = JSON.parse(out);
slider.setCss(`highlight { background-color: ${colors.buttonAccent}; }
slider { background-color: ${colors.buttonAccent}; }
slider:hover { background-color: #303240; }
trough { background-color: ${colors.buttonAccent}; }`);
}).catch(err => { if (err !== "") print(err) });
if (slider.dragging) if (slider.dragging)
return; return;
@ -112,6 +97,13 @@ export const PositionSlider = (player, params) => Slider({
connections: [ connections: [
[player, s => s._update(s), 'position'], [player, s => s._update(s), 'position'],
[1000, s => s._update(s)], [1000, s => s._update(s)],
[player.colors, s => {
if (player.colors.value)
s.setCss(`highlight { background-color: ${player.colors.value.buttonAccent}; }
slider { background-color: ${player.colors.value.buttonAccent}; }
slider:hover { background-color: #303240; }
trough { background-color: ${player.colors.value.buttonAccent}; }`);
}],
], ],
}); });
@ -153,21 +145,20 @@ const PlayerButton = ({ player, items, onClick, prop }) => Button({
connections: [ connections: [
[player, button => { [player, button => {
button.child.shown = `${player[prop]}`; button.child.shown = `${player[prop]}`;
}],
execAsync(coloryou(player.coverPath)) [player.colors, button => {
.then(out => { if (player.colors.value) {
let colors = JSON.parse(out);
if (prop == 'playBackStatus') { if (prop == 'playBackStatus') {
items.forEach(item => { items.forEach(item => {
item[1].setStyle(`background-color: ${colors.buttonAccent}; item[1].setStyle(`background-color: ${player.colors.value.buttonAccent};
color: ${colors.buttonText};`); color: ${player.colors.value.buttonText};`);
}) });
} }
else { else {
button.setStyle(`color: ${colors.buttonAccent};`); button.setStyle(`color: ${player.colors.value.buttonAccent};`);
}
} }
}).catch(err => { if (err !== "") print(err) });
}], }],
], ],
}); });

View file

@ -92,9 +92,11 @@ export default () => Box({
return; return;
const player = Mpris.getPlayer(busName); const player = Mpris.getPlayer(busName);
player.colors = ags.Variable();
box._players.set(busName, PlayerBox(player)); box._players.set(busName, PlayerBox(player));
box.children = Array.from(box._players.values()); box.children = Array.from(box._players.values());
}, 'player-added'], }, 'player-added'],
[Mpris, (box, busName) => { [Mpris, (box, busName) => {
if (!busName || !box._players.has(busName)) if (!busName || !box._players.has(busName))
return; return;