fix(ags): use Stack.children
All checks were successful
Discord / discord commits (push) Has been skipped

This commit is contained in:
matt1432 2024-02-03 14:25:47 -05:00
parent 4c27f20dbe
commit 6a880378fe
3 changed files with 69 additions and 66 deletions

View file

@ -68,7 +68,7 @@ export type PlayerOverlay = AgsOverlay<AgsWidget, {
export type PlayerButtonType = {
player: MprisPlayer
colors: Var<Colors>
items: Array<[name: string, widget: AgsWidget]>
children: StackProps['children']
onClick: string
prop: string
};
@ -159,8 +159,8 @@ export type ProgressBarGeneric = AgsProgressBar<unknown & Widget, unknown>;
import AgsRevealer, { RevealerProps } from 'types/widgets/revealer';
export type RevealerGeneric = AgsRevealer<unknown & Widget, unknown>;
import AgsStack from 'types/widgets/stack';
export type StackGeneric = AgsStack<unknown & Widget, unknown>;
import AgsStack, { StackProps } from 'types/widgets/stack';
export type StackGeneric = AgsStack<{ [name: string]: Widget; }, unknown>;
import AgsWindow from 'types/widgets/window';
export type WindowGeneric = AgsWindow<unknown & Widget, unknown>;

View file

@ -40,7 +40,6 @@ import {
PlayerButtonType,
PlayerDrag,
PlayerOverlay,
StackGeneric,
} from 'global-types';
@ -269,13 +268,13 @@ export const PositionSlider = (
const PlayerButton = ({
player,
colors,
items,
children = {},
onClick,
prop,
}: PlayerButtonType) => CursorBox({
child: Button({
attribute: { hovered: false },
child: Stack({ items }),
child: Stack({ children }),
on_primary_click_release: () => player[onClick](),
@ -285,8 +284,8 @@ const PlayerButton = ({
if (prop === 'playBackStatus' && colors.value) {
const c = colors.value;
items.forEach((item) => {
item[1].setCss(`
Object.values(children).forEach((ch: AgsWidget) => {
ch.setCss(`
background-color: ${c.hoverAccent};
color: ${c.buttonText};
min-height: 40px;
@ -303,8 +302,8 @@ const PlayerButton = ({
if (prop === 'playBackStatus' && colors.value) {
const c = colors.value;
items.forEach((item) => {
item[1].setCss(`
Object.values(children).forEach((ch: AgsWidget) => {
ch.setCss(`
background-color: ${c.buttonAccent};
color: ${c.buttonText};
min-height: 42px;
@ -317,7 +316,7 @@ const PlayerButton = ({
setup: (self) => {
self
.hook(player, () => {
(self.child as StackGeneric).shown = `${player[prop]}`;
self.child.shown = `${player[prop]}`;
})
.hook(colors, () => {
if (!Mpris.players.find((p) => player === p)) {
@ -329,26 +328,28 @@ const PlayerButton = ({
if (prop === 'playBackStatus') {
if (self.attribute.hovered) {
Array.from(items).forEach((item) => {
item[1].setCss(`
background-color: ${c.hoverAccent};
color: ${c.buttonText};
min-height: 40px;
min-width: 36px;
margin-bottom: 1px;
margin-right: 1px;
`);
});
Object.values(children)
.forEach((ch: AgsWidget) => {
ch.setCss(`
background-color: ${c.hoverAccent};
color: ${c.buttonText};
min-height: 40px;
min-width: 36px;
margin-bottom: 1px;
margin-right: 1px;
`);
});
}
else {
items.forEach((item) => {
item[1].setCss(`
background-color: ${c.buttonAccent};
color: ${c.buttonText};
min-height: 42px;
min-width: 38px;
`);
});
Object.values(children)
.forEach((ch: AgsWidget) => {
ch.setCss(`
background-color: ${c.buttonAccent};
color: ${c.buttonText};
min-height: 42px;
min-width: 38px;
`);
});
}
}
else {
@ -369,16 +370,16 @@ export const ShuffleButton = (
) => PlayerButton({
player,
colors,
items: [
['true', Label({
children: {
true: Label({
class_name: 'shuffle enabled',
label: icons.mpris.shuffle.enabled,
})],
['false', Label({
}),
false: Label({
class_name: 'shuffle disabled',
label: icons.mpris.shuffle.disabled,
})],
],
}),
},
onClick: 'shuffle',
prop: 'shuffleStatus',
});
@ -389,20 +390,20 @@ export const LoopButton = (
) => PlayerButton({
player,
colors,
items: [
['None', Label({
children: {
None: Label({
class_name: 'loop none',
label: icons.mpris.loop.none,
})],
['Track', Label({
}),
Track: Label({
class_name: 'loop track',
label: icons.mpris.loop.track,
})],
['Playlist', Label({
}),
Playlist: Label({
class_name: 'loop playlist',
label: icons.mpris.loop.playlist,
})],
],
}),
},
onClick: 'loop',
prop: 'loopStatus',
});
@ -413,20 +414,20 @@ export const PlayPauseButton = (
) => PlayerButton({
player,
colors,
items: [
['Playing', Label({
children: {
Playing: Label({
class_name: 'pausebutton playing',
label: icons.mpris.playing,
})],
['Paused', Label({
}),
Paused: Label({
class_name: 'pausebutton paused',
label: icons.mpris.paused,
})],
['Stopped', Label({
}),
Stopped: Label({
class_name: 'pausebutton stopped paused',
label: icons.mpris.stopped,
})],
],
}),
},
onClick: 'playPause',
prop: 'playBackStatus',
});
@ -437,16 +438,16 @@ export const PreviousButton = (
) => PlayerButton({
player,
colors,
items: [
['true', Label({
children: {
true: Label({
class_name: 'previous',
label: icons.mpris.prev,
})],
['false', Label({
}),
false: Label({
class_name: 'previous',
label: icons.mpris.prev,
})],
],
}),
},
onClick: 'previous',
prop: 'canGoPrev',
});
@ -457,16 +458,16 @@ export const NextButton = (
) => PlayerButton({
player,
colors,
items: [
['true', Label({
children: {
true: Label({
class_name: 'next',
label: icons.mpris.next,
})],
['false', Label({
}),
false: Label({
class_name: 'next',
label: icons.mpris.next,
})],
],
}),
},
onClick: 'next',
prop: 'canGoNext',
});

View file

@ -25,13 +25,15 @@ const OSDs = () => {
attribute: { popup: (osd: BoxGeneric) => {
if (!osd) {
console.log();
//
}
} },
});
// Send reference of stack to all items
stack.items = OSDList.map((osd, i) => [`${i}`, osd(stack)]);
// Send reference of stack to all children
stack.children = Object.fromEntries(
OSDList.map((osd, i) => [`${i}`, osd(stack)]),
);
// Delay popup method so it
// doesn't show any OSDs at launch