refactor(ags audio icons): make variables for easy icon changes

This commit is contained in:
matt1432 2023-11-13 16:19:09 -05:00
parent 93285a0db7
commit 5a66324c35
8 changed files with 88 additions and 177 deletions

View file

@ -2,37 +2,14 @@ import Audio from 'resource:///com/github/Aylur/ags/service/audio.js';
import { Label, Box, Icon } from 'resource:///com/github/Aylur/ags/widget.js';
import { execAsync } from 'resource:///com/github/Aylur/ags/utils.js';
import { SpeakerIcon } from '../misc/audio-icons.js';
import Separator from '../misc/separator.js';
import EventBox from '../misc/cursorbox.js';
const items = {
101: 'audio-volume-overamplified-symbolic',
67: 'audio-volume-high-symbolic',
34: 'audio-volume-medium-symbolic',
1: 'audio-volume-low-symbolic',
0: 'audio-volume-muted-symbolic',
};
const SpeakerIndicator = props => Icon({
...props,
icon: '',
connections: [[Audio, self => {
if (!Audio.speaker)
return;
if (Audio.speaker.stream.isMuted) {
self.icon = items[0];
}
else {
const vol = Audio.speaker.volume * 100;
for (const threshold of [-1, 0, 33, 66, 100]) {
if (vol > threshold + 1)
self.icon = items[threshold + 1];
}
}
}, 'speaker-changed']],
binds: [['icon', SpeakerIcon, 'value']],
});
const SpeakerPercentLabel = props => Label({

View file

@ -1,45 +1,16 @@
import Battery from 'resource:///com/github/Aylur/ags/service/battery.js';
import { Label, Icon, Stack, Box } from 'resource:///com/github/Aylur/ags/widget.js';
import { Label, Icon, Box } from 'resource:///com/github/Aylur/ags/widget.js';
import Separator from '../misc/separator.js';
const icons = charging => ([
...Array.from({ length: 10 }, (_, i) => i * 10).map(i => ([
`${i}`, Icon({
className: `${i} ${charging ? 'charging' : 'discharging'}`,
icon: `battery-level-${i}${charging ? '-charging' : ''}-symbolic`,
}),
])),
['100', Icon({
className: `100 ${charging ? 'charging' : 'discharging'}`,
icon: `battery-level-100${charging ? '-charged' : ''}-symbolic`,
})],
]);
const Indicators = charging => Stack({
items: icons(charging),
connections: [[Battery, stack => {
stack.shown = `${Math.floor(Battery.percent / 10) * 10}`;
}]],
});
const Indicator = ({
charging = Indicators(true),
discharging = Indicators(false),
...props
} = {}) => Stack({
...props,
const Indicator = () => Icon({
className: 'battery-indicator',
items: [
['true', charging],
['false', discharging],
],
connections: [[Battery, stack => {
stack.shown = `${Battery.charging || Battery.charged}`;
stack.toggleClassName('charging', Battery.charging);
stack.toggleClassName('charged', Battery.charged);
stack.toggleClassName('low', Battery.percent < 20);
binds: [['icon', Battery, 'icon-name']],
connections: [[Battery, self => {
self.toggleClassName('charging', Battery.charging);
self.toggleClassName('charged', Battery.charged);
self.toggleClassName('low', Battery.percent < 20);
}]],
});

View file

@ -13,7 +13,6 @@ export default () => EventBox({
child: Box({
className: 'osk-toggle',
vertical: false,
children: [Label(' 󰌌 ')],
}),
});

View file

@ -0,0 +1,54 @@
import Audio from 'resource:///com/github/Aylur/ags/service/audio.js';
import Variable from 'resource:///com/github/Aylur/ags/variable.js';
const speakerIcons = {
101: 'audio-volume-overamplified-symbolic',
67: 'audio-volume-high-symbolic',
34: 'audio-volume-medium-symbolic',
1: 'audio-volume-low-symbolic',
0: 'audio-volume-muted-symbolic',
};
const micIcons = {
67: 'audio-input-microphone-high-symbolic',
34: 'audio-input-microphone-medium-symbolic',
1: 'audio-input-microphone-low-symbolic',
0: 'audio-input-microphone-muted-symbolic',
};
export const SpeakerIcon = Variable();
Audio.connect('speaker-changed', () => {
if (!Audio.speaker)
return;
if (Audio.speaker.stream.isMuted) {
SpeakerIcon.value = speakerIcons[0];
}
else {
const vol = Audio.speaker.volume * 100;
for (const threshold of [-1, 0, 33, 66, 100]) {
if (vol > threshold + 1)
SpeakerIcon.value = speakerIcons[threshold + 1];
}
}
});
export const MicIcon = Variable();
Audio.connect('microphone-changed', () => {
if (!Audio.microphone)
return;
if (Audio.microphone.stream.isMuted) {
MicIcon.value = micIcons[0];
}
else {
const vol = Audio.microphone.volume * 100;
for (const threshold of [-1, 0, 33, 66]) {
if (vol > threshold + 1)
MicIcon.value = micIcons[threshold + 1];
}
}
});

View file

@ -1,13 +1,7 @@
import Audio from 'resource:///com/github/Aylur/ags/service/audio.js';
import { Box, Icon, ProgressBar } from 'resource:///com/github/Aylur/ags/widget.js';
const items = {
101: 'audio-volume-overamplified-symbolic',
67: 'audio-volume-high-symbolic',
34: 'audio-volume-medium-symbolic',
1: 'audio-volume-low-symbolic',
0: 'audio-volume-muted-symbolic',
};
import { SpeakerIcon } from '../misc/audio-icons.js';
export default () => Box({
@ -15,34 +9,22 @@ export default () => Box({
children: [
Icon({
hpack: 'start',
binds: [['icon', SpeakerIcon, 'value']],
}),
ProgressBar({
vpack: 'center',
connections: [[Audio, self => {
if (!Audio.speaker)
return;
if (Audio.speaker.stream.isMuted) {
self.icon = items[0];
}
else {
const vol = Audio.speaker.volume * 100;
for (const threshold of [-1, 0, 33, 66, 100]) {
if (vol > threshold + 1)
self.icon = items[threshold + 1];
}
}
self.value = Audio.speaker ? Audio.speaker.volume / 1.5 : 0;
self.sensitive = !Audio.speaker?.stream.isMuted;
const stack = self.get_parent().get_parent();
stack.shown = 'audio';
stack.resetTimer();
}, 'speaker-changed']],
}),
ProgressBar({
vpack: 'center',
connections: [[Audio, self => {
self.value = Audio.speaker ? Audio.speaker.volume / 1.5 : 0;
self.sensitive = !Audio.speaker?.stream.isMuted;
}]],
}),
],
});

View file

@ -1,12 +1,7 @@
import Audio from 'resource:///com/github/Aylur/ags/service/audio.js';
import { Box, Icon, ProgressBar } from 'resource:///com/github/Aylur/ags/widget.js';
const items = {
67: 'audio-input-microphone-high-symbolic',
34: 'audio-input-microphone-medium-symbolic',
1: 'audio-input-microphone-low-symbolic',
0: 'audio-input-microphone-muted-symbolic',
};
import { MicIcon } from '../misc/audio-icons.js';
export default () => Box({
@ -14,34 +9,22 @@ export default () => Box({
children: [
Icon({
hpack: 'start',
binds: [['icon', MicIcon, 'value']],
}),
ProgressBar({
vpack: 'center',
connections: [[Audio, self => {
if (!Audio.microphone)
return;
if (Audio.microphone.stream.isMuted) {
self.icon = items[0];
}
else {
const vol = Audio.microphone.volume * 100;
for (const threshold of [-1, 0, 33, 66]) {
if (vol > threshold + 1)
self.icon = items[threshold + 1];
}
}
self.value = Audio.microphone ? Audio.microphone.volume : 0;
self.sensitive = !Audio.microphone?.stream.isMuted;
const stack = self.get_parent().get_parent();
stack.shown = 'mic';
stack.resetTimer();
}, 'microphone-changed']],
}),
ProgressBar({
vpack: 'center',
connections: [[Audio, self => {
self.value = Audio.microphone ? Audio.microphone.volume : 0;
self.sensitive = !Audio.microphone?.stream.isMuted;
}, 'microphone-changed']],
}),
],
});

View file

@ -1,11 +1,11 @@
import App from 'resource:///com/github/Aylur/ags/app.js';
import Audio from 'resource:///com/github/Aylur/ags/service/audio.js';
import Bluetooth from 'resource:///com/github/Aylur/ags/service/bluetooth.js';
import Network from 'resource:///com/github/Aylur/ags/service/network.js';
import Variable from 'resource:///com/github/Aylur/ags/variable.js';
import { Box, Icon, Label, Revealer } from 'resource:///com/github/Aylur/ags/widget.js';
import { execAsync } from 'resource:///com/github/Aylur/ags/utils.js';
import { SpeakerIcon, MicIcon } from '../misc/audio-icons.js';
import EventBox from '../misc/cursorbox.js';
import Separator from '../misc/separator.js';
@ -228,20 +228,6 @@ const FirstRow = () => Row({
],
});
const items = {
101: 'audio-volume-overamplified-symbolic',
67: 'audio-volume-high-symbolic',
34: 'audio-volume-medium-symbolic',
1: 'audio-volume-low-symbolic',
0: 'audio-volume-muted-symbolic',
};
const itemsMic = {
2: 'audio-input-microphone-high-symbolic',
1: 'audio-input-microphone-muted-symbolic',
0: 'audio-input-microphone-muted-symbolic',
};
const SecondRow = () => Row({
buttons: [
@ -256,20 +242,9 @@ const SecondRow = () => Row({
.catch(print);
},
icon: [Audio, icon => {
if (Audio.speaker) {
if (Audio.speaker.stream.isMuted) {
icon.icon = items[0];
}
else {
const vol = Audio.speaker.volume * 100;
for (const threshold of [-1, 0, 33, 66, 100]) {
if (vol > threshold + 1)
icon.icon = items[threshold + 1];
}
}
}
}, 'speaker-changed'],
icon: [SpeakerIcon, self => {
self.icon = SpeakerIcon.value;
}],
}),
GridButton({
@ -283,20 +258,9 @@ const SecondRow = () => Row({
.catch(print);
},
icon: [Audio, icon => {
if (Audio.microphone) {
if (Audio.microphone.stream.isMuted) {
icon.icon = itemsMic[0];
}
else {
const vol = Audio.microphone.volume * 100;
for (const threshold of [-1, 0, 1]) {
if (vol > threshold + 1)
icon.icon = itemsMic[threshold + 1];
}
}
}
}, 'microphone-changed'],
icon: [MicIcon, self => {
self.icon = MicIcon.value;
}],
}),
GridButton({

View file

@ -1,13 +1,7 @@
import Audio from 'resource:///com/github/Aylur/ags/service/audio.js';
import { Box, Slider, Icon, EventBox } from 'resource:///com/github/Aylur/ags/widget.js';
const items = {
101: 'audio-volume-overamplified-symbolic',
67: 'audio-volume-high-symbolic',
34: 'audio-volume-medium-symbolic',
1: 'audio-volume-low-symbolic',
0: 'audio-volume-muted-symbolic',
};
import { SpeakerIcon } from '../misc/audio-icons.js';
export default () => Box({
@ -24,20 +18,7 @@ export default () => Box({
Icon({
size: 26,
className: 'slider-label',
connections: [[Audio, icon => {
if (Audio.speaker) {
if (Audio.speaker.stream.isMuted) {
icon.icon = items[0];
}
else {
const vol = Audio.speaker.volume * 100;
for (const threshold of [-1, 0, 33, 66, 100]) {
if (vol > threshold + 1)
icon.icon = items[threshold + 1];
}
}
}
}, 'speaker-changed']],
binds: [['icon', SpeakerIcon, 'value']],
}),
Slider({