✨ feat(center-window/big-media): add player select button

ags/style.scss

@@ -198,32 +198,26 @@ tooltip > box {
   }
 }
 
-popover.menu {
+popover.menu contents {
   background: wal.$background;
   border-radius: 14px;
-  $padding: 4px;
+  padding: 4px;
 
-  & contents {
+  & viewport > stack > * > * > * {
-    & viewport > stack > * {
+    & > separator {
-      padding: 4px;
+      min-height: .5px;
-      padding-top: 0;
+      margin: 3px 2px;
+      background: rgba(colors.$fg-disabled, .1);
+    }
 
-      & > * > * {
+    & > *:not(separator) > * {
-        & > separator {
+      padding: 6px;
-          min-height: .5px;
+      border-radius: 10px;
-          margin: 3px 2px;
+      font-size: 12px;
-          background: rgba(colors.$fg-disabled, .1);
+      font-weight: 600;
-        }
+                                 
-        & > *:not(separator) > * {
+      &:hover, &:focus {
-          padding: 6px;
+        background: wal.$color1;
-          border-radius: 10px;
-          font-size: 12px;
-          font-weight: 600;
-                                     
-          &:hover, &:focus {
-            background: wal.$color1;
-          }
-        }
       }
     }
   }
@@ -231,25 +225,39 @@ popover.menu {
 
 .button-row {
   & > button {
+    $active-radius: 8px;
+    $corner-radius: calc($active-radius + 2px);
+
     background: colors.$bg-secondary;
     margin: 0 1px;
     padding: 4px 6px;
     border-radius: 2px;
+    transition: 120ms linear;
 
     &:hover {
       background: colors.$bg-tertiary;
     }
 
+    &:active {
+      border-radius: $active-radius;
+    }
+
     &:first-child {
-      border-top-left-radius: 10px;
-      border-bottom-left-radius: 10px;
       margin-left: 0;
+
+      &:not(:active) {
+        border-top-left-radius: $corner-radius;
+        border-bottom-left-radius: $corner-radius;
+      }
     }
 
     &:last-child {
-      border-top-right-radius: 10px;
-      border-bottom-right-radius: 10px;
       margin-right: 0;
+
+      &:not(:active) {
+        border-top-right-radius: $corner-radius;
+        border-bottom-right-radius: $corner-radius;
+      }
     }
   }
 }

ags/style/_bar.scss

@@ -1,8 +1,18 @@
 @use "sass:color";
 @use "./mixins";
 @use "./colors";
-@use "./wal";
+
-@use "./functions";
+
+$radius: 18px;
+$padding: 4px;
+$color-hover: colors.$bg-primary;
+
+
+@mixin button-reactivity {
+  &:active {
+    box-shadow: 0 0 0 2px $color-hover;
+  }
+}
 
 .bar-container {
   padding: 6px;
@@ -17,16 +27,14 @@
 
   // Style widget groups
   & > .bar-centerbox > * {
-    $radius: 18px !global;
-    $padding: 4px !global;
-    $color-hover: colors.$bg-primary;
-
     background: rgba(colors.$bg-translucent, .6);
     border-radius: $radius;
     padding: 0 $padding;
 
     & > box:not(.workspaces-row):not(.tray):not(.focused-client):not(.media), 
     & > button {
+      @include button-reactivity;
+
       border-radius: calc($radius - $padding);
       margin: $padding 0;
       padding: 0 8px;
@@ -48,6 +56,10 @@
       padding: 0 6px;
       background: colors.$bg-tertiary;
 
+      &:active {
+        border-radius: 10px;
+      }
+
       & label.id {
         font-weight: 600;
         margin-right: 4px;
@@ -110,15 +122,13 @@
 
   .media {
     $spacing: 5px;
+    $hover-color: color.scale($color: colors.$bg-primary, $lightness: 15%);
+
     background: colors.$bg-primary;
     border-radius: calc($radius - $padding);
     margin: $padding 0;
     padding: 0 calc($padding + 3px);
 
-    &:hover {
-      background: color.scale($color: colors.$bg-primary, $lightness: 15%);
-    }
-
     & image.player-icon {
       -gtk-icon-size: 14px;
       margin-right: $spacing;
@@ -135,6 +145,15 @@
         -gtk-icon-size: 10px;
       }
     }
+
+    
+    &:hover {
+      background: $hover-color;
+    }
+
+    &:active {
+      box-shadow: 0 0 0 2px $hover-color;
+    }
   }
 
   .tray {

ags/style/_center-window.scss

@@ -1,6 +1,7 @@
 @use "sass:color";
 @use "./wal";
 @use "./colors";
+@use "./mixins";
 
 
 .popup-window.center-window .center-window-container {
@@ -34,6 +35,44 @@
       }
     }
 
+    & .player-select {
+      @include mixins.button-reactive-secondary;
+
+      border-radius: 14px;
+
+      & revealer label {
+        margin-left: 4px;
+      }
+
+      margin-right: 2px;
+      margin-bottom: 2px;
+
+      image.arrow {
+        -gtk-icon-size: 12px;
+        margin-left: 6px;
+        margin-top: 1px;
+      }
+    }
+
+    & popover contents {
+      background: colors.$bg-primary;
+      border-radius: 16px;
+      padding: 4px;
+
+      & button {
+        padding: 6px;
+        border-radius: 12px;
+
+        & image {
+          margin-right: 4px;
+        }
+
+        &:hover {
+          background: colors.$bg-secondary;
+        }
+      }
+    }
+
     & slider {
       all: unset;
       opacity: 0;

ags/style/_control-center.scss

@@ -63,14 +63,16 @@
     }
 
     button {
-      @include mixins.hover-shadow2;
-
       padding: 4px;
       border-radius: 16px;
 
       icon {
         font-size: 14px;
       }
+
+      &:hover {
+        background: rgba(colors.$fg-primary, .2);
+      }
     }
 
     & .page .content {
@@ -125,8 +127,6 @@
     }
 
     & button {
-      @include mixins.hover-shadow;
-
       padding: 6px;
       border-radius: 12px;
 
@@ -143,6 +143,10 @@
       & icon {
         font-size: 16px;
       }
+
+      &:hover {
+        background: rgba(colors.$fg-primary, .1);
+      }
     }
 
     & .bottom-buttons button {
@@ -194,14 +198,19 @@
         background: colors.$bg-secondary;
       }
 
-      &.has-more > .toggle-button {
+      &.has-more > .toggle-button, 
+      &.has-more > button.toggle-button:active {
         border-top-right-radius: 0;
         border-bottom-right-radius: 0;
       }
 
-      & > .toggle-button {
+      & > button.toggle-button {
         border-radius: $radius;
 
+        &:active {
+          border-radius: calc($radius - 4px);
+        }
+
         & .content {
           padding: 8px;
 
@@ -228,6 +237,11 @@
         border-top-right-radius: $radius;
         border-bottom-right-radius: $radius;
 
+        &:active {
+          border-top-right-radius: calc($radius - 4px);
+          border-bottom-right-radius: calc($radius - 4px);
+        }
+
         & label {
           font-size: 16px;
         }
@@ -272,6 +286,7 @@ box.notif-history {
     margin-top: 12px;
 
     & button {
+      @include mixins.button-reactive-secondary;
       padding: 7px;
 
       & label {

ags/style/_mixins.scss

@@ -1,7 +1,5 @@
 @use "sass:color";
-@use "./wal";
 @use "./colors";
-@use "./functions" as funs;
 
 @mixin reset-props {
   all: unset;
@@ -14,20 +12,30 @@
   color: colors.$fg-primary;
 }
 
-@mixin hover-shadow {
+@mixin button-reactive-primary {
+  background: colors.$bg-primary;
+  border-radius: 14px;
+  padding: 6px;
+
   &:hover {
-    box-shadow: inset 0 0 0 500px rgba(colors.$fg-primary, .1);
+    background: colors.$bg-secondary;
+  }
+
+  &:active {
+    border-radius: 10px;
   }
 }
 
-@mixin hover-shadow2 {
+@mixin button-reactive-secondary {
-  &:hover {
+  background: colors.$bg-secondary;
-    box-shadow: inset 0 0 0 500px rgba(colors.$fg-primary, .2);
+  border-radius: 12px;
-  }
+  padding: 6px;
-}
 
-@mixin hover-shadow3 {
   &:hover {
-    box-shadow: inset 0 0 0 500px rgba(colors.$fg-primary, .3);
+    background: colors.$bg-tertiary;
+  }
+
+  &:active {
+    border-radius: 9px;
   }
 }

ags/style/_wal.scss

@@ -1,26 +1,26 @@
 // SCSS Variables
 // Generated by 'wal'
-$wallpaper: "/home/joaov/wallpapers/Anna Yanami Makeine Blue Sky.jpg";
+$wallpaper: "/home/joaov/wallpapers/Frieren Battleground.jpg";
 
 // Special
-$background: #2d3643;
+$background: #181515;
-$foreground: #caccd0;
+$foreground: #c5c4c4;
-$cursor: #caccd0;
+$cursor: #c5c4c4;
 
 // Colors
-$color0: #2d3643;
+$color0: #181515;
-$color1: #738AA7;
+$color1: #975969;
-$color2: #3784E4;
+$color2: #7f6960;
-$color3: #5A99EA;
+$color3: #7f697f;
-$color4: #B8A9A4;
+$color4: #a57e83;
-$color5: #8CB9EB;
+$color5: #878193;
-$color6: #A2C8EF;
+$color6: #9d8793;
-$color7: #a0a4a9;
+$color7: #9b9090;
-$color8: #707b89;
+$color8: #715c5c;
-$color9: #87a5cb;
+$color9: #CA778C;
-$color10: #87a5cb;
+$color10: #AA8C81;
-$color11: #9db5d4;
+$color11: #AA8CAA;
-$color12: #dab6a8;
+$color12: #DCA8AF;
-$color13: #b7cae0;
+$color13: #B4ADC5;
-$color14: #c5d5e6;
+$color14: #D2B5C5;
-$color15: #caccd0;
+$color15: #c5c4c4;

ags/widget/center-window/BigMedia.tsx

@@ -2,9 +2,9 @@ import { timeout } from "ags/time";
 import { execAsync } from "ags/process";
 import { Astal, Gtk } from "ags/gtk4";
 import { Clipboard } from "../../scripts/clipboard";
-import { player } from "../bar/Media";
+import { player, setPlayer } from "../bar/Media";
-import { createBinding, With } from "ags";
+import { Accessor, createBinding, createConnection, For, With } from "ags";
-import { pathToURI } from "../../scripts/utils";
+import { getPlayerIconFromBusName, pathToURI } from "../../scripts/utils";
 
 import AstalMpris from "gi://AstalMpris";
 import AstalIO from "gi://AstalIO";
@@ -23,13 +23,16 @@ export const BigMedia = () => {
 
                     <Gtk.Revealer hexpand={false} revealChild={
                         createBinding(player, "artUrl").as(Boolean)
-                    } transitionType={Gtk.RevealerTransitionType.SLIDE_DOWN} transitionDuration={250}>
+                    } transitionType={Gtk.RevealerTransitionType.SLIDE_LEFT} transitionDuration={300}>
 
                         <Gtk.Box class={"image"} css={createBinding(player, "artUrl").as((art) => 
                               `background-image: url("${pathToURI(art)}");`)} 
                           hexpand={false} vexpand={false} widthRequest={132} heightRequest={128}
-                          valign={Gtk.Align.START} halign={Gtk.Align.CENTER}
+                          valign={Gtk.Align.START} halign={Gtk.Align.CENTER}>
-                        />
+
+                            <PlayerSelectButton player={player} halign={Gtk.Align.END}
+                              valign={Gtk.Align.END} />
+                        </Gtk.Box>
                     </Gtk.Revealer>
                     
                     <Gtk.Box class={"info"} orientation={Gtk.Orientation.VERTICAL}
@@ -49,6 +52,16 @@ export const BigMedia = () => {
                         />
                     </Gtk.Box>
 
+                    <Gtk.Box>
+                        <With value={createBinding(player, "artUrl").as(Boolean)}>
+                            {(hasAlbumArt) => !hasAlbumArt &&
+                                <PlayerSelectButton player={player} reveal={true} 
+                                  halign={Gtk.Align.CENTER} valign={Gtk.Align.CENTER} 
+                                />
+                            }
+                        </With>
+                    </Gtk.Box>
+
                     <Gtk.Box class={"progress"} hexpand visible={createBinding(player, "canSeek")}>
                         <Astal.Slider hexpand max={createBinding(player, "length").as(Math.floor)}
                           value={createBinding(player, "position").as(Math.floor)}
@@ -151,3 +164,82 @@ export const BigMedia = () => {
         </With>
     </Gtk.Box> as Gtk.Box;
 }
+
+export function PlayerSelectButton({ player, reveal, halign = Gtk.Align.CENTER, valign = Gtk.Align.CENTER }: {
+    player: AstalMpris.Player, 
+    reveal?: Accessor<boolean>|boolean,
+    halign?: Gtk.Align;
+    valign?: Gtk.Align;
+}) {
+    const availablePlayers = createBinding(AstalMpris.get_default(), "players").as(players =>
+        players.filter(p => p.available));
+
+    return <Gtk.Box vexpand={false} valign={valign} halign={halign}> 
+        <With value={availablePlayers.as(apls => apls.length > 1)}>
+            {(show: boolean) => show &&
+                <Gtk.MenuButton halign={Gtk.Align.CENTER} hexpand
+                  class={"player-select"} popover={
+                    <Gtk.Popover class={"players-list"} hasArrow={false}>
+                        <Gtk.Box orientation={Gtk.Orientation.VERTICAL}>
+                            <For each={availablePlayers}>
+                                {(pl: AstalMpris.Player) => 
+                                    <Gtk.Button class={"player"} onClicked={() => setPlayer(pl)}>
+                                        <Gtk.Box>
+                                            <Gtk.Image iconName={createBinding(player, "busName").as(
+                                                getPlayerIconFromBusName
+                                            )} />
+                                            <Gtk.Label label={createBinding(player, "identity")} 
+                                              hexpand={false} class={"identity"} singleLineMode
+                                              maxWidthChars={8}
+                                            />
+                                        </Gtk.Box>
+                                    </Gtk.Button>
+                                }
+                            </For>
+                        </Gtk.Box>
+                    </Gtk.Popover> as Gtk.Popover
+                  } $={(self) => {
+                      const controllerMotion = Gtk.EventControllerMotion.new();
+                      self.add_controller(controllerMotion);
+
+                      self.set_child(
+                          <Gtk.Box class={"player"}>
+                              <Gtk.Image iconName={createBinding(player, "busName").as(
+                                  getPlayerIconFromBusName)} 
+                              />
+                              <Gtk.Revealer transitionType={Gtk.RevealerTransitionType.SLIDE_LEFT}
+                                transitionDuration={280} revealChild={reveal ?? createConnection(false,
+                                      [controllerMotion, "enter", () => {
+                                          self.add_css_class("reveal");
+                                          return true;
+                                      }],
+                                      [controllerMotion, "leave", () => {
+                                          self.remove_css_class("reveal");
+                                          return false;
+                                      }]
+                                  )
+                                }>
+
+                                  <Gtk.Box>
+                                      <Gtk.Label label={createBinding(player, "identity")} 
+                                        class={"identity"} maxWidthChars={6} 
+                                        ellipsize={Pango.EllipsizeMode.END} 
+                                        tooltipText={createBinding(player, "identity")}
+                                      />
+                                      <Gtk.Image iconName={
+                                            createConnection("go-next-symbolic",
+                                                [self.popover, "show", () => "go-down-symbolic"],
+                                                [self.popover, "closed", () => "go-next-symbolic"]
+                                            )
+                                        } class={"arrow"} iconSize={Gtk.IconSize.NORMAL} 
+                                      />
+                                  </Gtk.Box>
+                              </Gtk.Revealer>
+                          </Gtk.Box> as Gtk.Box
+                      );
+                  }}
+                />
+            }
+        </With>
+    </Gtk.Box>;
+}