perf(wim ags player): hide not visible players

devices/wim/config/ags/js/media-player/gesture.js

@@ -18,20 +18,34 @@ export default ({
     const widget = EventBox();
     const gesture = Gtk.GestureDrag.new(widget);
 
+    // Have empty PlayerBox to define the size of the widget
+    const emptyPlayer = Box({ className: 'player' });
+
+    // Set this prop to differentiate it easily
+    emptyPlayer.empty = true;
+
     widget.add(Overlay({
         ...props,
         properties: [
             ...properties,
             ['dragging', false],
+            ['showTopOnly', (overlay) => overlay.list()
+                .forEach((over) => {
+                    if (over === overlay.list().at(-1)) {
+                        over.visible = true;
+                    }
+                    else {
+                        over.visible = false;
+                    }
+                })],
         ],
 
-        // Have empty PlayerBox to define the size of the widget
-        child: Box({ className: 'player' }),
+        child: emptyPlayer,
 
         connections: [
             ...connections,
 
-            [gesture, (overlay) => {
+            [gesture, (overlay, x) => {
                 // Don't allow gesture when only one player
                 if (overlay.list().length <= 1) {
                     return;
@@ -42,6 +56,15 @@ export default ({
 
                 const playerBox = overlay.list().at(-1);
 
+                if (x) {
+                    overlay.list().forEach((over) => {
+                        over.visible = true;
+                    });
+                }
+                else {
+                    overlay._showTopOnly(overlay);
+                }
+
                 // Slide right
                 if (offset >= 0) {
                     playerBox.setCss(`
@@ -104,6 +127,8 @@ export default ({
                         playerBox.setCss(playerBox._bgStyle);
 
                         widget.sensitive = true;
+
+                        overlay._showTopOnly(overlay);
                     });
                 }
                 else {
@@ -115,7 +140,7 @@ export default ({
     }));
 
     widget.child.list = () => widget.child.get_children()
-        .filter((ch) => ch._bgStyle);
+        .filter((ch) => !ch.empty);
 
     return widget;
 };

devices/wim/config/ags/js/media-player/player.js

@@ -85,7 +85,8 @@ const Bottom = (player) => Box({
     ],
 });
 
-const PlayerBox = (player) => mpris.CoverArt(player, {
+const PlayerBox = (player) => {
+    const widget = mpris.CoverArt(player, {
         className: `player ${player.name}`,
         hexpand: true,
 
@@ -96,6 +97,11 @@ const PlayerBox = (player) => mpris.CoverArt(player, {
         ],
     });
 
+    widget.visible = false;
+
+    return widget;
+};
+
 export default () => Box({
     className: 'media',
 
@@ -135,19 +141,13 @@ export default () => Box({
                     }
                 }
 
+                // Make the new player
                 const player = Mpris.getPlayer(busName);
 
                 player.colors = Variable();
-
                 overlay._players.set(busName, PlayerBox(player));
-
-                const result = [];
-
-                overlay._players.forEach((widget) => {
-                    result.push(widget);
-                });
-
-                overlay.overlays = result;
+                overlay.overlays = Array.from(overlay._players.values())
+                    .map((widget) => widget);
 
                 // Select favorite player at startup
                 if (!overlay._setup && overlay._players.has(FAVE_PLAYER)) {
@@ -157,6 +157,8 @@ export default () => Box({
                     );
                     overlay._setup = true;
                 }
+
+                // Move previousFirst on top again
                 else if (overlay._players.get(previousFirst)) {
                     overlay.reorder_overlay(
                         overlay._players.get(previousFirst),
@@ -181,16 +183,12 @@ export default () => Box({
                     }
                 }
 
+                // Remake overlays without deleted one
                 overlay._players.delete(busName);
+                overlay.overlays = Array.from(overlay._players.values())
+                    .map((widget) => widget);
 
-                const result = [];
-
-                overlay._players.forEach((widget) => {
-                    result.push(widget);
-                });
-
-                overlay.overlays = result;
-
+                // Move previousFirst on top again
                 if (overlay._players.has(previousFirst)) {
                     overlay.reorder_overlay(
                         overlay._players.get(previousFirst),