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

* Organized media menu code

* More consolidation

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