perf(ags): optimize material colors
This commit is contained in:
parent
348f95484e
commit
c018bdbece
3 changed files with 39 additions and 45 deletions
|
@ -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
|
||||||
|
|
||||||
|
|
|
@ -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) });
|
}
|
||||||
}],
|
}],
|
||||||
],
|
],
|
||||||
});
|
});
|
||||||
|
|
|
@ -83,24 +83,26 @@ const PlayerBox = player => mpris.CoverArt(player, {
|
||||||
});
|
});
|
||||||
|
|
||||||
export default () => Box({
|
export default () => Box({
|
||||||
vertical: true,
|
vertical: true,
|
||||||
className: 'media',
|
className: 'media',
|
||||||
properties: [['players', new Map()]],
|
properties: [['players', new Map()]],
|
||||||
connections: [
|
connections: [
|
||||||
[Mpris, (box, busName) => {
|
[Mpris, (box, busName) => {
|
||||||
if (!busName || box._players.has(busName))
|
if (!busName || box._players.has(busName))
|
||||||
return;
|
return;
|
||||||
|
|
||||||
const player = Mpris.getPlayer(busName);
|
const player = Mpris.getPlayer(busName);
|
||||||
box._players.set(busName, PlayerBox(player));
|
player.colors = ags.Variable();
|
||||||
box.children = Array.from(box._players.values());
|
box._players.set(busName, PlayerBox(player));
|
||||||
}, 'player-added'],
|
box.children = Array.from(box._players.values());
|
||||||
[Mpris, (box, busName) => {
|
}, 'player-added'],
|
||||||
if (!busName || !box._players.has(busName))
|
|
||||||
return;
|
|
||||||
|
|
||||||
box._players.delete(busName);
|
[Mpris, (box, busName) => {
|
||||||
box.children = Array.from(box._players.values());
|
if (!busName || !box._players.has(busName))
|
||||||
}, 'player-closed'],
|
return;
|
||||||
],
|
|
||||||
|
box._players.delete(busName);
|
||||||
|
box.children = Array.from(box._players.values());
|
||||||
|
}, 'player-closed'],
|
||||||
|
],
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in a new issue