fix(ags): use Stack.children

modules/ags/config/global-types.d.ts

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

modules/ags/config/ts/media-player/mpris.ts

@@ -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,8 +328,9 @@ const PlayerButton = ({
 
                         if (prop === 'playBackStatus') {
                             if (self.attribute.hovered) {
-                                Array.from(items).forEach((item) => {
-                                    item[1].setCss(`
+                                Object.values(children)
+                                    .forEach((ch: AgsWidget) => {
+                                        ch.setCss(`
                                             background-color: ${c.hoverAccent};
                                             color: ${c.buttonText};
                                             min-height: 40px;
@@ -341,8 +341,9 @@ const PlayerButton = ({
                                     });
                             }
                             else {
-                                items.forEach((item) => {
-                                    item[1].setCss(`
+                                Object.values(children)
+                                    .forEach((ch: AgsWidget) => {
+                                        ch.setCss(`
                                             background-color: ${c.buttonAccent};
                                             color: ${c.buttonText};
                                             min-height: 42px;
@@ -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',
 });

modules/ags/config/ts/osd/main.ts

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