Clean up media module logic and code. (#380)

* Organized media menu code

* More consolidation

modules/menus/media/components/controls/index.ts

@@ -0,0 +1,22 @@
+import { BoxWidget } from 'lib/types/widget.js';
+import { shuffleControl } from './shuffle/index.js';
+import { previousTrack } from './previous/index.js';
+import { playPause } from './playpause/index.js';
+import { nextTrack } from './next/index.js';
+import { loopControl } from './loop/index.js';
+
+const Controls = (): BoxWidget => {
+    return Widget.Box({
+        class_name: 'media-indicator-current-player-controls',
+        vertical: true,
+        children: [
+            Widget.Box({
+                class_name: 'media-indicator-current-controls',
+                hpack: 'center',
+                children: [shuffleControl(), previousTrack(), playPause(), nextTrack(), loopControl()],
+            }),
+        ],
+    });
+};
+
+export { Controls };

modules/menus/media/components/controls/loop/helpers.ts

@@ -0,0 +1,11 @@
+import { LoopStatus } from 'lib/types/mpris';
+import { MprisPlayer } from 'types/service/mpris';
+
+export const isValidLoopStatus = (status: string): status is LoopStatus =>
+    ['none', 'track', 'playlist'].includes(status);
+
+export const isLoopActive = (player: MprisPlayer): string => {
+    return player['loop_status'] !== null && ['track', 'playlist'].includes(player['loop_status'].toLowerCase())
+        ? 'active'
+        : '';
+};

modules/menus/media/components/controls/loop/index.ts

@@ -0,0 +1,59 @@
+import icons from 'lib/icons';
+import { BoxWidget } from 'lib/types/widget';
+import { getPlayerInfo } from '../../helpers';
+import { MprisPlayer } from 'types/service/mpris';
+import { isLoopActive, isValidLoopStatus } from './helpers';
+
+const media = await Service.import('mpris');
+
+export const loopControl = (): BoxWidget => {
+    return Widget.Box({
+        class_name: 'media-indicator-control loop',
+        children: [
+            Widget.Button({
+                hpack: 'center',
+                setup: (self) => {
+                    self.hook(media, () => {
+                        const foundPlayer = getPlayerInfo();
+                        if (foundPlayer === undefined) {
+                            self.tooltip_text = 'Unavailable';
+                            self.class_name = 'media-indicator-control-button shuffle disabled';
+                            return;
+                        }
+
+                        self.tooltip_text = foundPlayer.loop_status !== null ? foundPlayer.loop_status : 'None';
+
+                        self.on_primary_click = (): void => {
+                            foundPlayer.loop();
+                        };
+
+                        const statusTag = foundPlayer.loop_status !== null ? 'enabled' : 'disabled';
+                        const isActiveTag = isLoopActive(foundPlayer);
+
+                        self.class_name = `media-indicator-control-button loop ${isActiveTag} ${statusTag}`;
+                    });
+                },
+                child: Widget.Icon({
+                    setup: (self) => {
+                        self.hook(media, () => {
+                            const foundPlayer: MprisPlayer = getPlayerInfo();
+
+                            if (foundPlayer === undefined) {
+                                self.icon = icons.mpris.loop['none'];
+                                return;
+                            }
+
+                            const loopStatus = foundPlayer.loop_status?.toLowerCase();
+
+                            if (loopStatus && isValidLoopStatus(loopStatus)) {
+                                self.icon = icons.mpris.loop[loopStatus];
+                            } else {
+                                self.icon = icons.mpris.loop['none'];
+                            }
+                        });
+                    },
+                }),
+            }),
+        ],
+    });
+};

modules/menus/media/components/controls/next/index.ts

@@ -0,0 +1,30 @@
+const media = await Service.import('mpris');
+import icons from 'lib/icons';
+import { BoxWidget } from 'lib/types/widget';
+import { getPlayerInfo } from '../../helpers';
+
+export const nextTrack = (): BoxWidget => {
+    return Widget.Box({
+        class_name: `media-indicator-control next`,
+        children: [
+            Widget.Button({
+                hpack: 'center',
+                child: Widget.Icon(icons.mpris.next),
+                setup: (self) => {
+                    self.hook(media, () => {
+                        const foundPlayer = getPlayerInfo();
+                        if (foundPlayer === undefined) {
+                            self.class_name = 'media-indicator-control-button next disabled';
+                            return;
+                        }
+
+                        self.on_primary_click = (): void => {
+                            foundPlayer.next();
+                        };
+                        self.class_name = `media-indicator-control-button next ${foundPlayer.can_go_next !== null && foundPlayer.can_go_next ? 'enabled' : 'disabled'}`;
+                    });
+                },
+            }),
+        ],
+    });
+};

modules/menus/media/components/controls/playpause/helpers.ts

@@ -0,0 +1,4 @@
+import { PlaybackStatus } from 'lib/types/mpris';
+
+export const isValidPlaybackStatus = (status: string): status is PlaybackStatus =>
+    ['playing', 'paused', 'stopped'].includes(status);

modules/menus/media/components/controls/playpause/index.ts

@@ -0,0 +1,43 @@
+const media = await Service.import('mpris');
+import { getPlayerInfo } from '../../helpers';
+import { MprisPlayer } from 'types/service/mpris';
+import { isValidPlaybackStatus } from './helpers';
+import Button from 'types/widgets/button';
+import Icon from 'types/widgets/icon';
+import { Attribute } from 'lib/types/widget';
+import icons from 'modules/icons/index';
+
+export const playPause = (): Button<Icon<Attribute>, Attribute> => {
+    return Widget.Button({
+        hpack: 'center',
+        setup: (self) => {
+            self.hook(media, () => {
+                const foundPlayer = getPlayerInfo();
+                if (foundPlayer === undefined) {
+                    self.class_name = 'media-indicator-control-button play disabled';
+                    return;
+                }
+
+                self.on_primary_click = (): void => {
+                    foundPlayer.playPause();
+                };
+                self.class_name = `media-indicator-control-button play ${foundPlayer.can_play !== null ? 'enabled' : 'disabled'}`;
+            });
+        },
+        child: Widget.Icon({
+            icon: Utils.watch(icons.mpris.paused, media, 'changed', () => {
+                const foundPlayer: MprisPlayer = getPlayerInfo();
+                if (foundPlayer === undefined) {
+                    return icons.mpris['paused'];
+                }
+                const playbackStatus = foundPlayer.play_back_status?.toLowerCase();
+
+                if (playbackStatus && isValidPlaybackStatus(playbackStatus)) {
+                    return icons.mpris[playbackStatus];
+                } else {
+                    return icons.mpris['paused'];
+                }
+            }),
+        }),
+    });
+};

modules/menus/media/components/controls/previous/index.ts

@@ -0,0 +1,27 @@
+const media = await Service.import('mpris');
+import icons from 'lib/icons';
+import { Attribute } from 'lib/types/widget';
+import { getPlayerInfo } from '../../helpers';
+import Button from 'types/widgets/button';
+import Icon from 'types/widgets/icon';
+
+export const previousTrack = (): Button<Icon<Attribute>, Attribute> => {
+    return Widget.Button({
+        hpack: 'center',
+        child: Widget.Icon(icons.mpris.prev),
+        setup: (self) => {
+            self.hook(media, () => {
+                const foundPlayer = getPlayerInfo();
+                if (foundPlayer === undefined) {
+                    self.class_name = 'media-indicator-control-button prev disabled';
+                    return;
+                }
+
+                self.on_primary_click = (): void => {
+                    foundPlayer.previous();
+                };
+                self.class_name = `media-indicator-control-button prev ${foundPlayer.can_go_prev !== null && foundPlayer.can_go_prev ? 'enabled' : 'disabled'}`;
+            });
+        },
+    });
+};

modules/menus/media/components/controls/shuffle/helpers.ts

@@ -0,0 +1,5 @@
+import { MprisPlayer } from 'types/service/mpris';
+
+export const isShuffleActive = (player: MprisPlayer): string => {
+    return player['shuffle_status'] !== null && player['shuffle_status'] ? 'active' : '';
+};

modules/menus/media/components/controls/shuffle/index.ts

@@ -0,0 +1,40 @@
+const media = await Service.import('mpris');
+import { Attribute, Child } from 'lib/types/widget';
+import { getPlayerInfo } from '../../helpers';
+import Box from 'types/widgets/box';
+import { isShuffleActive } from './helpers';
+import icons from 'lib/icons';
+
+export const shuffleControl = (): Box<Child, Attribute> => {
+    return Widget.Box({
+        class_name: 'media-indicator-control shuffle',
+        children: [
+            Widget.Button({
+                hpack: 'center',
+                hasTooltip: true,
+                setup: (self) => {
+                    self.hook(media, () => {
+                        const foundPlayer = getPlayerInfo();
+                        if (foundPlayer === undefined) {
+                            self.tooltip_text = 'Unavailable';
+                            self.class_name = 'media-indicator-control-button shuffle disabled';
+                            return;
+                        }
+
+                        self.tooltip_text =
+                            foundPlayer.shuffle_status !== null
+                                ? foundPlayer.shuffle_status
+                                    ? 'Shuffling'
+                                    : 'Not Shuffling'
+                                : null;
+                        self.on_primary_click = (): void => {
+                            foundPlayer.shuffle();
+                        };
+                        self.class_name = `media-indicator-control-button shuffle ${isShuffleActive(foundPlayer)} ${foundPlayer.shuffle_status !== null ? 'enabled' : 'disabled'}`;
+                    });
+                },
+                child: Widget.Icon(icons.mpris.shuffle['enabled']),
+            }),
+        ],
+    });
+};