refactor(ags audio icons): make variables for easy icon changes
This commit is contained in:
parent
93285a0db7
commit
5a66324c35
8 changed files with 88 additions and 177 deletions
|
@ -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({
|
||||
|
|
|
@ -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);
|
||||
}]],
|
||||
});
|
||||
|
||||
|
|
|
@ -13,7 +13,6 @@ export default () => EventBox({
|
|||
|
||||
child: Box({
|
||||
className: 'osk-toggle',
|
||||
vertical: false,
|
||||
children: [Label(' ')],
|
||||
}),
|
||||
});
|
||||
|
|
54
devices/wim/config/ags/js/misc/audio-icons.js
Normal file
54
devices/wim/config/ags/js/misc/audio-icons.js
Normal 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];
|
||||
}
|
||||
}
|
||||
});
|
|
@ -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;
|
||||
}]],
|
||||
}),
|
||||
],
|
||||
});
|
||||
|
|
|
@ -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']],
|
||||
}),
|
||||
],
|
||||
});
|
||||
|
|
|
@ -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({
|
||||
|
|
|
@ -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({
|
||||
|
|
Loading…
Reference in a new issue