fix(ags): use Stack.children
All checks were successful
Discord / discord commits (push) Has been skipped
All checks were successful
Discord / discord commits (push) Has been skipped
This commit is contained in:
parent
4c27f20dbe
commit
6a880378fe
3 changed files with 69 additions and 66 deletions
6
modules/ags/config/global-types.d.ts
vendored
6
modules/ags/config/global-types.d.ts
vendored
|
@ -68,7 +68,7 @@ export type PlayerOverlay = AgsOverlay<AgsWidget, {
|
||||||
export type PlayerButtonType = {
|
export type PlayerButtonType = {
|
||||||
player: MprisPlayer
|
player: MprisPlayer
|
||||||
colors: Var<Colors>
|
colors: Var<Colors>
|
||||||
items: Array<[name: string, widget: AgsWidget]>
|
children: StackProps['children']
|
||||||
onClick: string
|
onClick: string
|
||||||
prop: string
|
prop: string
|
||||||
};
|
};
|
||||||
|
@ -159,8 +159,8 @@ export type ProgressBarGeneric = AgsProgressBar<unknown & Widget, unknown>;
|
||||||
import AgsRevealer, { RevealerProps } from 'types/widgets/revealer';
|
import AgsRevealer, { RevealerProps } from 'types/widgets/revealer';
|
||||||
export type RevealerGeneric = AgsRevealer<unknown & Widget, unknown>;
|
export type RevealerGeneric = AgsRevealer<unknown & Widget, unknown>;
|
||||||
|
|
||||||
import AgsStack from 'types/widgets/stack';
|
import AgsStack, { StackProps } from 'types/widgets/stack';
|
||||||
export type StackGeneric = AgsStack<unknown & Widget, unknown>;
|
export type StackGeneric = AgsStack<{ [name: string]: Widget; }, unknown>;
|
||||||
|
|
||||||
import AgsWindow from 'types/widgets/window';
|
import AgsWindow from 'types/widgets/window';
|
||||||
export type WindowGeneric = AgsWindow<unknown & Widget, unknown>;
|
export type WindowGeneric = AgsWindow<unknown & Widget, unknown>;
|
||||||
|
|
|
@ -40,7 +40,6 @@ import {
|
||||||
PlayerButtonType,
|
PlayerButtonType,
|
||||||
PlayerDrag,
|
PlayerDrag,
|
||||||
PlayerOverlay,
|
PlayerOverlay,
|
||||||
StackGeneric,
|
|
||||||
} from 'global-types';
|
} from 'global-types';
|
||||||
|
|
||||||
|
|
||||||
|
@ -269,13 +268,13 @@ export const PositionSlider = (
|
||||||
const PlayerButton = ({
|
const PlayerButton = ({
|
||||||
player,
|
player,
|
||||||
colors,
|
colors,
|
||||||
items,
|
children = {},
|
||||||
onClick,
|
onClick,
|
||||||
prop,
|
prop,
|
||||||
}: PlayerButtonType) => CursorBox({
|
}: PlayerButtonType) => CursorBox({
|
||||||
child: Button({
|
child: Button({
|
||||||
attribute: { hovered: false },
|
attribute: { hovered: false },
|
||||||
child: Stack({ items }),
|
child: Stack({ children }),
|
||||||
|
|
||||||
on_primary_click_release: () => player[onClick](),
|
on_primary_click_release: () => player[onClick](),
|
||||||
|
|
||||||
|
@ -285,8 +284,8 @@ const PlayerButton = ({
|
||||||
if (prop === 'playBackStatus' && colors.value) {
|
if (prop === 'playBackStatus' && colors.value) {
|
||||||
const c = colors.value;
|
const c = colors.value;
|
||||||
|
|
||||||
items.forEach((item) => {
|
Object.values(children).forEach((ch: AgsWidget) => {
|
||||||
item[1].setCss(`
|
ch.setCss(`
|
||||||
background-color: ${c.hoverAccent};
|
background-color: ${c.hoverAccent};
|
||||||
color: ${c.buttonText};
|
color: ${c.buttonText};
|
||||||
min-height: 40px;
|
min-height: 40px;
|
||||||
|
@ -303,8 +302,8 @@ const PlayerButton = ({
|
||||||
if (prop === 'playBackStatus' && colors.value) {
|
if (prop === 'playBackStatus' && colors.value) {
|
||||||
const c = colors.value;
|
const c = colors.value;
|
||||||
|
|
||||||
items.forEach((item) => {
|
Object.values(children).forEach((ch: AgsWidget) => {
|
||||||
item[1].setCss(`
|
ch.setCss(`
|
||||||
background-color: ${c.buttonAccent};
|
background-color: ${c.buttonAccent};
|
||||||
color: ${c.buttonText};
|
color: ${c.buttonText};
|
||||||
min-height: 42px;
|
min-height: 42px;
|
||||||
|
@ -317,7 +316,7 @@ const PlayerButton = ({
|
||||||
setup: (self) => {
|
setup: (self) => {
|
||||||
self
|
self
|
||||||
.hook(player, () => {
|
.hook(player, () => {
|
||||||
(self.child as StackGeneric).shown = `${player[prop]}`;
|
self.child.shown = `${player[prop]}`;
|
||||||
})
|
})
|
||||||
.hook(colors, () => {
|
.hook(colors, () => {
|
||||||
if (!Mpris.players.find((p) => player === p)) {
|
if (!Mpris.players.find((p) => player === p)) {
|
||||||
|
@ -329,8 +328,9 @@ const PlayerButton = ({
|
||||||
|
|
||||||
if (prop === 'playBackStatus') {
|
if (prop === 'playBackStatus') {
|
||||||
if (self.attribute.hovered) {
|
if (self.attribute.hovered) {
|
||||||
Array.from(items).forEach((item) => {
|
Object.values(children)
|
||||||
item[1].setCss(`
|
.forEach((ch: AgsWidget) => {
|
||||||
|
ch.setCss(`
|
||||||
background-color: ${c.hoverAccent};
|
background-color: ${c.hoverAccent};
|
||||||
color: ${c.buttonText};
|
color: ${c.buttonText};
|
||||||
min-height: 40px;
|
min-height: 40px;
|
||||||
|
@ -341,8 +341,9 @@ const PlayerButton = ({
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
items.forEach((item) => {
|
Object.values(children)
|
||||||
item[1].setCss(`
|
.forEach((ch: AgsWidget) => {
|
||||||
|
ch.setCss(`
|
||||||
background-color: ${c.buttonAccent};
|
background-color: ${c.buttonAccent};
|
||||||
color: ${c.buttonText};
|
color: ${c.buttonText};
|
||||||
min-height: 42px;
|
min-height: 42px;
|
||||||
|
@ -369,16 +370,16 @@ export const ShuffleButton = (
|
||||||
) => PlayerButton({
|
) => PlayerButton({
|
||||||
player,
|
player,
|
||||||
colors,
|
colors,
|
||||||
items: [
|
children: {
|
||||||
['true', Label({
|
true: Label({
|
||||||
class_name: 'shuffle enabled',
|
class_name: 'shuffle enabled',
|
||||||
label: icons.mpris.shuffle.enabled,
|
label: icons.mpris.shuffle.enabled,
|
||||||
})],
|
}),
|
||||||
['false', Label({
|
false: Label({
|
||||||
class_name: 'shuffle disabled',
|
class_name: 'shuffle disabled',
|
||||||
label: icons.mpris.shuffle.disabled,
|
label: icons.mpris.shuffle.disabled,
|
||||||
})],
|
}),
|
||||||
],
|
},
|
||||||
onClick: 'shuffle',
|
onClick: 'shuffle',
|
||||||
prop: 'shuffleStatus',
|
prop: 'shuffleStatus',
|
||||||
});
|
});
|
||||||
|
@ -389,20 +390,20 @@ export const LoopButton = (
|
||||||
) => PlayerButton({
|
) => PlayerButton({
|
||||||
player,
|
player,
|
||||||
colors,
|
colors,
|
||||||
items: [
|
children: {
|
||||||
['None', Label({
|
None: Label({
|
||||||
class_name: 'loop none',
|
class_name: 'loop none',
|
||||||
label: icons.mpris.loop.none,
|
label: icons.mpris.loop.none,
|
||||||
})],
|
}),
|
||||||
['Track', Label({
|
Track: Label({
|
||||||
class_name: 'loop track',
|
class_name: 'loop track',
|
||||||
label: icons.mpris.loop.track,
|
label: icons.mpris.loop.track,
|
||||||
})],
|
}),
|
||||||
['Playlist', Label({
|
Playlist: Label({
|
||||||
class_name: 'loop playlist',
|
class_name: 'loop playlist',
|
||||||
label: icons.mpris.loop.playlist,
|
label: icons.mpris.loop.playlist,
|
||||||
})],
|
}),
|
||||||
],
|
},
|
||||||
onClick: 'loop',
|
onClick: 'loop',
|
||||||
prop: 'loopStatus',
|
prop: 'loopStatus',
|
||||||
});
|
});
|
||||||
|
@ -413,20 +414,20 @@ export const PlayPauseButton = (
|
||||||
) => PlayerButton({
|
) => PlayerButton({
|
||||||
player,
|
player,
|
||||||
colors,
|
colors,
|
||||||
items: [
|
children: {
|
||||||
['Playing', Label({
|
Playing: Label({
|
||||||
class_name: 'pausebutton playing',
|
class_name: 'pausebutton playing',
|
||||||
label: icons.mpris.playing,
|
label: icons.mpris.playing,
|
||||||
})],
|
}),
|
||||||
['Paused', Label({
|
Paused: Label({
|
||||||
class_name: 'pausebutton paused',
|
class_name: 'pausebutton paused',
|
||||||
label: icons.mpris.paused,
|
label: icons.mpris.paused,
|
||||||
})],
|
}),
|
||||||
['Stopped', Label({
|
Stopped: Label({
|
||||||
class_name: 'pausebutton stopped paused',
|
class_name: 'pausebutton stopped paused',
|
||||||
label: icons.mpris.stopped,
|
label: icons.mpris.stopped,
|
||||||
})],
|
}),
|
||||||
],
|
},
|
||||||
onClick: 'playPause',
|
onClick: 'playPause',
|
||||||
prop: 'playBackStatus',
|
prop: 'playBackStatus',
|
||||||
});
|
});
|
||||||
|
@ -437,16 +438,16 @@ export const PreviousButton = (
|
||||||
) => PlayerButton({
|
) => PlayerButton({
|
||||||
player,
|
player,
|
||||||
colors,
|
colors,
|
||||||
items: [
|
children: {
|
||||||
['true', Label({
|
true: Label({
|
||||||
class_name: 'previous',
|
class_name: 'previous',
|
||||||
label: icons.mpris.prev,
|
label: icons.mpris.prev,
|
||||||
})],
|
}),
|
||||||
['false', Label({
|
false: Label({
|
||||||
class_name: 'previous',
|
class_name: 'previous',
|
||||||
label: icons.mpris.prev,
|
label: icons.mpris.prev,
|
||||||
})],
|
}),
|
||||||
],
|
},
|
||||||
onClick: 'previous',
|
onClick: 'previous',
|
||||||
prop: 'canGoPrev',
|
prop: 'canGoPrev',
|
||||||
});
|
});
|
||||||
|
@ -457,16 +458,16 @@ export const NextButton = (
|
||||||
) => PlayerButton({
|
) => PlayerButton({
|
||||||
player,
|
player,
|
||||||
colors,
|
colors,
|
||||||
items: [
|
children: {
|
||||||
['true', Label({
|
true: Label({
|
||||||
class_name: 'next',
|
class_name: 'next',
|
||||||
label: icons.mpris.next,
|
label: icons.mpris.next,
|
||||||
})],
|
}),
|
||||||
['false', Label({
|
false: Label({
|
||||||
class_name: 'next',
|
class_name: 'next',
|
||||||
label: icons.mpris.next,
|
label: icons.mpris.next,
|
||||||
})],
|
}),
|
||||||
],
|
},
|
||||||
onClick: 'next',
|
onClick: 'next',
|
||||||
prop: 'canGoNext',
|
prop: 'canGoNext',
|
||||||
});
|
});
|
||||||
|
|
|
@ -25,13 +25,15 @@ const OSDs = () => {
|
||||||
|
|
||||||
attribute: { popup: (osd: BoxGeneric) => {
|
attribute: { popup: (osd: BoxGeneric) => {
|
||||||
if (!osd) {
|
if (!osd) {
|
||||||
console.log();
|
//
|
||||||
}
|
}
|
||||||
} },
|
} },
|
||||||
});
|
});
|
||||||
|
|
||||||
// Send reference of stack to all items
|
// Send reference of stack to all children
|
||||||
stack.items = OSDList.map((osd, i) => [`${i}`, osd(stack)]);
|
stack.children = Object.fromEntries(
|
||||||
|
OSDList.map((osd, i) => [`${i}`, osd(stack)]),
|
||||||
|
);
|
||||||
|
|
||||||
// Delay popup method so it
|
// Delay popup method so it
|
||||||
// doesn't show any OSDs at launch
|
// doesn't show any OSDs at launch
|
||||||
|
|
Loading…
Reference in a new issue