feat(wim ags osd): add transition between OSDs and refactor
This commit is contained in:
parent
158758b4ab
commit
37f75000b4
8 changed files with 172 additions and 209 deletions
|
|
@ -1,39 +0,0 @@
|
|||
import Audio from 'resource:///com/github/Aylur/ags/service/audio.js';
|
||||
|
||||
import { Box, Icon, ProgressBar } from 'resource:///com/github/Aylur/ags/widget.js';
|
||||
|
||||
import { SpeakerIcon } from '../misc/audio-icons.js';
|
||||
|
||||
const AUDIO_MAX = 1.5;
|
||||
|
||||
|
||||
export default () => Box({
|
||||
className: 'osd',
|
||||
children: [
|
||||
Icon({
|
||||
hpack: 'start',
|
||||
binds: [['icon', SpeakerIcon, 'value']],
|
||||
}),
|
||||
|
||||
ProgressBar({
|
||||
vpack: 'center',
|
||||
|
||||
connections: [[Audio, (self) => {
|
||||
if (!Audio.speaker) {
|
||||
return;
|
||||
}
|
||||
|
||||
self.value = Audio.speaker ?
|
||||
Audio.speaker.volume / AUDIO_MAX :
|
||||
0;
|
||||
|
||||
self.sensitive = !Audio.speaker?.stream.isMuted;
|
||||
|
||||
const stack = self.get_parent().get_parent();
|
||||
|
||||
stack.shown = 'audio';
|
||||
stack.resetTimer();
|
||||
}, 'speaker-changed']],
|
||||
}),
|
||||
],
|
||||
});
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
import { Box, Icon, ProgressBar } from 'resource:///com/github/Aylur/ags/widget.js';
|
||||
|
||||
import Brightness from '../../services/brightness.js';
|
||||
|
||||
|
||||
export default () => Box({
|
||||
className: 'osd',
|
||||
children: [
|
||||
Icon({
|
||||
hpack: 'start',
|
||||
icon: 'display-brightness-symbolic',
|
||||
}),
|
||||
|
||||
ProgressBar({
|
||||
vpack: 'center',
|
||||
|
||||
connections: [[Brightness, (self) => {
|
||||
self.value = Brightness.screen;
|
||||
|
||||
const stack = self.get_parent().get_parent();
|
||||
|
||||
stack.shown = 'brightness';
|
||||
stack.resetTimer();
|
||||
}, 'screen']],
|
||||
}),
|
||||
],
|
||||
});
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
import { Box, Icon, Label } from 'resource:///com/github/Aylur/ags/widget.js';
|
||||
|
||||
import Brightness from '../../services/brightness.js';
|
||||
|
||||
|
||||
export default () => Box({
|
||||
className: 'osd',
|
||||
children: [
|
||||
Icon({
|
||||
hpack: 'start',
|
||||
icon: 'caps-lock-symbolic',
|
||||
|
||||
connections: [[Brightness, (self, state) => {
|
||||
self.icon = state ?
|
||||
'caps-lock-symbolic' :
|
||||
'capslock-disabled-symbolic';
|
||||
|
||||
const stack = self.get_parent().get_parent();
|
||||
|
||||
stack.shown = 'caps';
|
||||
stack.resetTimer();
|
||||
}, 'caps']],
|
||||
}),
|
||||
|
||||
Label({
|
||||
vpack: 'center',
|
||||
label: 'Caps Lock',
|
||||
}),
|
||||
],
|
||||
});
|
||||
42
devices/wim/config/ags/js/osd/ctor.js
Normal file
42
devices/wim/config/ags/js/osd/ctor.js
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
import { Box, Icon, ProgressBar } from 'resource:///com/github/Aylur/ags/widget.js';
|
||||
|
||||
const Y_POS = 80;
|
||||
|
||||
|
||||
export default ({ stack, icon, info } = {}) => {
|
||||
let connectFunc;
|
||||
|
||||
const osd = Box({
|
||||
css: `margin-bottom: ${Y_POS}px;`,
|
||||
children: [Box({
|
||||
className: 'osd',
|
||||
children: [
|
||||
Icon({
|
||||
hpack: 'start',
|
||||
// Can take a string or an object of props
|
||||
...(typeof icon === 'string' ? { icon } : icon),
|
||||
}),
|
||||
// Can take a static widget instead of a progressbar
|
||||
info.logic ?
|
||||
ProgressBar({ vpack: 'center' }) :
|
||||
info.widget,
|
||||
],
|
||||
})],
|
||||
});
|
||||
|
||||
// Handle requests to show the OSD
|
||||
// Different wether it's a bar or static
|
||||
if (info.logic) {
|
||||
connectFunc = (self) => new Promise((r) => {
|
||||
info.logic(self);
|
||||
r();
|
||||
}).then(() => stack.popup(osd));
|
||||
}
|
||||
else {
|
||||
connectFunc = () => stack.popup(osd);
|
||||
}
|
||||
|
||||
osd.children[0].children[1].connectTo(info.mod, connectFunc, info.signal);
|
||||
|
||||
return osd;
|
||||
};
|
||||
|
|
@ -1,34 +0,0 @@
|
|||
import { Box, Icon, ProgressBar } from 'resource:///com/github/Aylur/ags/widget.js';
|
||||
|
||||
import Brightness from '../../services/brightness.js';
|
||||
|
||||
|
||||
export default () => Box({
|
||||
className: 'osd',
|
||||
|
||||
children: [
|
||||
Icon({
|
||||
hpack: 'start',
|
||||
icon: 'keyboard-brightness-symbolic',
|
||||
}),
|
||||
|
||||
ProgressBar({
|
||||
vpack: 'center',
|
||||
|
||||
connections: [[Brightness, (self) => {
|
||||
if (!self.value) {
|
||||
self.value = Brightness.kbd / 2;
|
||||
|
||||
return;
|
||||
}
|
||||
self.value = Brightness.kbd / 2;
|
||||
self.sensitive = Brightness.kbd !== 0;
|
||||
|
||||
const stack = self.get_parent().get_parent();
|
||||
|
||||
stack.shown = 'kbd';
|
||||
stack.resetTimer();
|
||||
}, 'kbd']],
|
||||
}),
|
||||
],
|
||||
});
|
||||
|
|
@ -3,63 +3,58 @@ import App from 'resource:///com/github/Aylur/ags/app.js';
|
|||
import { timeout } from 'resource:///com/github/Aylur/ags/utils.js';
|
||||
import { Stack } from 'resource:///com/github/Aylur/ags/widget.js';
|
||||
|
||||
import GLib from 'gi://GLib';
|
||||
import PopupWindow from '../misc/popup.js';
|
||||
|
||||
import Audio from './audio.js';
|
||||
import Brightness from './brightness.js';
|
||||
import CapsLock from './caps.js';
|
||||
import Keyboard from './kbd.js';
|
||||
import Microphone from './mic.js';
|
||||
// Import all the OSDs as an array
|
||||
const OSDList = [];
|
||||
|
||||
import * as Modules from './osds.js';
|
||||
for (const osd in Modules) {
|
||||
OSDList.push(Modules[osd]);
|
||||
} // Array
|
||||
|
||||
const HIDE_DELAY = 2000;
|
||||
|
||||
|
||||
export default () => {
|
||||
let setup = 0;
|
||||
|
||||
const OSDs = () => {
|
||||
const stack = Stack({
|
||||
css: 'margin-bottom: 80px;',
|
||||
items: [
|
||||
['audio', Audio()],
|
||||
['brightness', Brightness()],
|
||||
['caps', CapsLock()],
|
||||
['kbd', Keyboard()],
|
||||
['mic', Microphone()],
|
||||
],
|
||||
});
|
||||
|
||||
const window = PopupWindow({
|
||||
name: 'osd',
|
||||
anchor: ['bottom'],
|
||||
exclusivity: 'ignore',
|
||||
closeOnUnfocus: 'stay',
|
||||
transition: 'slide_up',
|
||||
transition: 'over_up_down',
|
||||
transitionDuration: 200,
|
||||
child: stack,
|
||||
});
|
||||
|
||||
let timer;
|
||||
stack.items = OSDList.map((osd, i) => [`${i}`, osd(stack)]);
|
||||
|
||||
stack.resetTimer = () => {
|
||||
// Each osd calls resetTimer once at startup
|
||||
// FIXME: doesn't seem to work anymore, find alternative
|
||||
if (setup <= stack.items.length + 1) {
|
||||
++setup;
|
||||
stack.popup = () => { /**/ };
|
||||
|
||||
return;
|
||||
}
|
||||
// Delay popup method so it
|
||||
// doesn't show any OSDs at launch
|
||||
timeout(1000, () => {
|
||||
let count = 0;
|
||||
|
||||
App.openWindow('osd');
|
||||
if (timer) {
|
||||
GLib.source_remove(timer);
|
||||
}
|
||||
stack.popup = (osd) => {
|
||||
++count;
|
||||
stack.set_visible_child(osd);
|
||||
App.openWindow('osd');
|
||||
|
||||
timer = timeout(HIDE_DELAY, () => {
|
||||
App.closeWindow('osd');
|
||||
timer = null;
|
||||
});
|
||||
};
|
||||
timeout(HIDE_DELAY, () => {
|
||||
--count;
|
||||
|
||||
return window;
|
||||
if (count === 0) {
|
||||
App.closeWindow('osd');
|
||||
}
|
||||
});
|
||||
};
|
||||
});
|
||||
|
||||
return stack;
|
||||
};
|
||||
|
||||
export default () => PopupWindow({
|
||||
name: 'osd',
|
||||
anchor: ['bottom'],
|
||||
exclusivity: 'ignore',
|
||||
closeOnUnfocus: 'stay',
|
||||
transition: 'slide_up',
|
||||
transitionDuration: 200,
|
||||
child: OSDs(),
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,35 +0,0 @@
|
|||
import Audio from 'resource:///com/github/Aylur/ags/service/audio.js';
|
||||
|
||||
import { Box, Icon, ProgressBar } from 'resource:///com/github/Aylur/ags/widget.js';
|
||||
|
||||
import { MicIcon } from '../misc/audio-icons.js';
|
||||
|
||||
|
||||
export default () => Box({
|
||||
className: 'osd',
|
||||
|
||||
children: [
|
||||
Icon({
|
||||
hpack: 'start',
|
||||
binds: [['icon', MicIcon, 'value']],
|
||||
}),
|
||||
|
||||
ProgressBar({
|
||||
vpack: 'center',
|
||||
|
||||
connections: [[Audio, (self) => {
|
||||
if (!Audio.microphone) {
|
||||
return;
|
||||
}
|
||||
|
||||
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']],
|
||||
}),
|
||||
],
|
||||
});
|
||||
91
devices/wim/config/ags/js/osd/osds.js
Normal file
91
devices/wim/config/ags/js/osd/osds.js
Normal file
|
|
@ -0,0 +1,91 @@
|
|||
import Audio from 'resource:///com/github/Aylur/ags/service/audio.js';
|
||||
|
||||
import { Label } from 'resource:///com/github/Aylur/ags/widget.js';
|
||||
import OSD from './ctor.js';
|
||||
|
||||
import Brightness from '../../services/brightness.js';
|
||||
import { SpeakerIcon } from '../misc/audio-icons.js';
|
||||
import { MicIcon } from '../misc/audio-icons.js';
|
||||
|
||||
const AUDIO_MAX = 1.5;
|
||||
|
||||
|
||||
export const SpeakerOSD = (stack) => OSD({
|
||||
stack,
|
||||
icon: { binds: [['icon', SpeakerIcon, 'value']] },
|
||||
info: {
|
||||
mod: Audio,
|
||||
signal: 'speaker-changed',
|
||||
logic: (self) => {
|
||||
if (!Audio.speaker) {
|
||||
return;
|
||||
}
|
||||
|
||||
self.value = Audio.speaker ?
|
||||
Audio.speaker.volume / AUDIO_MAX :
|
||||
0;
|
||||
|
||||
self.sensitive = !Audio.speaker?.stream.isMuted;
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const ScreenBrightnessOSD = (stack) => OSD({
|
||||
stack,
|
||||
icon: 'display-brightness-symbolic',
|
||||
info: {
|
||||
mod: Brightness,
|
||||
signal: 'screen',
|
||||
logic: (self) => {
|
||||
self.value = Brightness.screen;
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const KbdBrightnessOSD = (stack) => OSD({
|
||||
stack,
|
||||
icon: 'keyboard-brightness-symbolic',
|
||||
info: {
|
||||
mod: Brightness,
|
||||
signal: 'kbd',
|
||||
logic: (self) => {
|
||||
if (!self.value) {
|
||||
self.value = Brightness.kbd / 2;
|
||||
|
||||
return;
|
||||
}
|
||||
self.value = Brightness.kbd / 2;
|
||||
self.sensitive = Brightness.kbd !== 0;
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const MicOSD = (stack) => OSD({
|
||||
stack,
|
||||
icon: { binds: [['icon', MicIcon, 'value']] },
|
||||
info: {
|
||||
mod: Audio,
|
||||
signal: 'microphone-changed',
|
||||
logic: (self) => {
|
||||
if (!Audio.microphone) {
|
||||
return;
|
||||
}
|
||||
|
||||
self.value = Audio.microphone ? Audio.microphone.volume : 0;
|
||||
self.sensitive = !Audio.microphone?.stream.isMuted;
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const CapsLockOSD = (stack) => OSD({
|
||||
stack,
|
||||
icon: { binds: [['icon', Brightness, 'caps-icon']] },
|
||||
info: {
|
||||
mod: Brightness,
|
||||
signal: 'caps',
|
||||
widget: Label({
|
||||
vpack: 'center',
|
||||
label: 'Caps Lock',
|
||||
}),
|
||||
},
|
||||
});
|
||||
Loading…
Reference in a new issue