From 1f4914e6590cc761fbb09f4021d22d732e7492ec Mon Sep 17 00:00:00 2001
From: matt1432 <matt@nelim.org>
Date: Wed, 27 Sep 2023 13:32:53 -0400
Subject: [PATCH] feat(ags player): add circles indicating how many players
 there are

---
 config/ags/js/media-player/mpris.js | 53 ++++++++++++++++++++++-------
 config/ags/scss/widgets/player.scss |  8 +++++
 config/ags/style.css                |  7 ++++
 3 files changed, 55 insertions(+), 13 deletions(-)

diff --git a/config/ags/js/media-player/mpris.js b/config/ags/js/media-player/mpris.js
index c789e06..05afe80 100644
--- a/config/ags/js/media-player/mpris.js
+++ b/config/ags/js/media-player/mpris.js
@@ -1,10 +1,11 @@
 const { execAsync, lookUpIcon } = ags.Utils;
 const { Mpris } = ags.Service;
-const { Button, Icon, Label, Stack, Slider, CenterBox } = ags.Widget;
+const { Button, Icon, Label, Stack, Slider, CenterBox, Box } = ags.Widget;
 const { Gdk } = imports.gi;
 const display = Gdk.Display.get_default();
 
 import { EventBox } from '../misc/cursorbox.js';
+import { Separator } from '../misc/separator.js';
 
 const icons = {
   mpris: {
@@ -28,7 +29,6 @@ const icons = {
 
 export const CoverArt = (player, params) => CenterBox({
   ...params,
-  className: 'player',
   vertical: true,
   properties: [['bgStyle', '']],
   connections: [
@@ -75,17 +75,44 @@ export const ArtistLabel = (player, params) => Label({
   }]],
 });
 
-export const PlayerIcon = (player, { symbolic = true, ...params } = {}) => Icon({
-  ...params,
-  className: 'player-icon',
-  size: 32,
-  tooltipText: player.identity || '',
-  connections: [[player, icon => {
-    const name = `${player.entry}${symbolic ? '-symbolic' : ''}`;
-    lookUpIcon(name) ? icon.icon = name
-                     : icon.icon = icons.mpris.fallback;
-  }]],
-});
+export const PlayerIcon = (player, { symbolic = true, ...params } = {}) => {
+  let MainIcon = Icon({
+    ...params,
+    className: 'player-icon',
+    size: 32,
+    tooltipText: player.identity || '',
+    connections: [
+      [player, icon => {
+        const name = `${player.entry}${symbolic ? '-symbolic' : ''}`;
+        lookUpIcon(name) ? icon.icon = name
+          : icon.icon = icons.mpris.fallback;
+      }],
+    ],
+  });
+
+  return Box({
+    connections: [
+      [Mpris, box => {
+        let overlays = box.get_parent().get_parent().get_parent().overlays;
+        let player = overlays.find(overlay => overlay === box.get_parent().get_parent());
+        let index = overlays.indexOf(player)
+
+        let children = [];
+        for (let i = 0; i < overlays.length; ++i) {
+          if (i === index) {
+            children.push(MainIcon);
+            children.push(Separator(2));
+          }
+          else {
+            children.push(Box({ className: 'position-indicator' }));
+            children.push(Separator(2));
+          }
+        }
+        box.children = children;
+      }],
+    ],
+  });
+}
 
 export const PositionSlider = (player, params) => EventBox({
   child: Slider({
diff --git a/config/ags/scss/widgets/player.scss b/config/ags/scss/widgets/player.scss
index 06fa64a..b2cb9a9 100644
--- a/config/ags/scss/widgets/player.scss
+++ b/config/ags/scss/widgets/player.scss
@@ -59,6 +59,14 @@
   }
 }
 
+.position-indicator {
+  min-width: 18px;
+  margin: 7px;
+  background-color: rgba(255, 255, 255, 0.7);
+  box-shadow: 0 0 5px 0px rgba(255, 255, 255, 0.3);
+  border-radius: 100%;
+}
+
 .previous,
 .next,
 .shuffle,
diff --git a/config/ags/style.css b/config/ags/style.css
index bba32d4..76c6818 100644
--- a/config/ags/style.css
+++ b/config/ags/style.css
@@ -628,6 +628,13 @@ calendar:indeterminate {
   .player button label {
     min-width: 35px; }
 
+.position-indicator {
+  min-width: 18px;
+  margin: 7px;
+  background-color: rgba(255, 255, 255, 0.7);
+  box-shadow: 0 0 5px 0px rgba(255, 255, 255, 0.3);
+  border-radius: 100%; }
+
 .previous,
 .next,
 .shuffle,