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 = { 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>;

View file

@ -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',
}); });

View file

@ -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