shell: sliding mpris player select ui

modules/user/modules/quickshell/shell/bar/mpris/Players.qml

@@ -336,11 +336,29 @@ FullwidthMouseArea {
 						implicitHeight: playerSelector.implicitHeight + 20
 						implicitWidth: playerSelector.implicitWidth
 
-						RowLayout { //ScrollView {
-							id: playerSelector
+						Rectangle {
 							anchors.centerIn: parent
+							implicitWidth: 50
+							implicitHeight: 50
+							radius: 5
+							color: "#20ceffff"
+						}
+
+						RowLayout { //ScrollView {
+							property Item selectedPlayerDisplay: null;
+							onSelectedPlayerDisplayChanged: console.log(selectedPlayerDisplay)
+							id: playerSelector
+							x: parent.width / 2 - (selectedPlayerDisplay ? selectedPlayerDisplay.x + selectedPlayerDisplay.width / 2 : 0)
+							anchors.verticalCenter: parent.verticalCenter
 							width: Math.min(implicitWidth, playerSelectorContainment.width)
 
+							Behavior on x {
+								NumberAnimation {
+									duration: 400
+									easing.type: Easing.OutExpo
+								}
+							}
+
 							//RowLayout {
 								Repeater {
 									model: Mpris.players
@@ -348,28 +366,25 @@ FullwidthMouseArea {
 									MouseArea {
 										required property MprisPlayer modelData;
 										readonly property bool selected: modelData == player;
+										onSelectedChanged: if (selected) playerSelector.selectedPlayerDisplay = this;
 
 										implicitWidth: childrenRect.width
 										implicitHeight: childrenRect.height
 
 										onClicked: MprisController.setActivePlayer(modelData);
 
-										Rectangle {
+										Item {
 											implicitWidth: 50
 											implicitHeight: 50
-											radius: 5
-											color: selected ? "#20ceffff" : "transparent"
 
 											Image {
 												anchors.fill: parent
 												anchors.margins: 5
-												// lazy and wont always work, but good enough until a desktop entry impl.
 												source: {
 													const entry = DesktopEntries.byId(modelData.desktopEntry);
 													console.log(`ent ${entry} id ${modelData.desktopEntry}`)
 													return Quickshell.iconPath(entry?.icon);
 												}
-												//asynchronous: true
 
 												sourceSize.width: 50
 												sourceSize.height: 50
@@ -497,7 +512,7 @@ FullwidthMouseArea {
 									}
 
 									CenteredText {
-										Layout.topMargin: 25
+										Layout.topMargin: 20
 										text: track.artist
 									}