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 = {
|
||||
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>;
|
||||
|
|
|
@ -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',
|
||||
});
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Reference in a new issue