1 files changed, 67 insertions, 19 deletions

diff --git a/.config/quickshell/Modules/Music.qml b/.config/quickshell/Modules/Music.qml
index efb717e..8c79092 100644
--- a/.config/quickshell/Modules/Music.qml
+++ b/.config/quickshell/Modules/Music.qml
@@ -1,5 +1,6 @@
 import Quickshell
 import QtQuick
+import QtQuick.Layouts
 import qs.Services
 
 MouseArea {
@@ -7,10 +8,10 @@ MouseArea {
 	anchors.centerIn: parent
 	height: parent.implicitHeight
 	width: musicRow.implicitWidth
-	state: "POPUP_CLOSED"
+	state: "popup-closed"
 
 	hoverEnabled: true
-	onEntered: state = "POPUP_OPEN"
+	onEntered: state = "popup-open"
 
 	property string fontFamily: "FiraCode Nerd Font"
 	property int fontSize: 14
@@ -19,7 +20,7 @@ MouseArea {
 
 	states: [
 		State {
-			name: "POPUP_CLOSED"
+			name: "popup-closed"
 			PropertyChanges { target: popup; visible: false }
 			PropertyChanges { target: musicRow; visible: true; spacing: 4 }
 			PropertyChanges { target: songContainer; bottomRightRadius: 4; topRightRadius: 4 }
@@ -30,11 +31,12 @@ MouseArea {
 				target: popupRect
 				width: musicRow.width
 				height: 36
+				opacity: 0
 				border.color: Flexoki.bg
 			}
 		},
 		State {
-			name: "POPUP_OPEN"
+			name: "popup-open"
 			PropertyChanges { target: popup; visible: true }
 			PropertyChanges { target: musicRow; visible: false; spacing: -1 }
 			PropertyChanges { target: songContainer; bottomRightRadius: 0; topRightRadius: 0 }
@@ -45,6 +47,7 @@ MouseArea {
 				target: popupRect
 				width: 700
 				height: 500
+				opacity: 1
 				border.color: Flexoki.ui2
 			}
 		}
@@ -52,10 +55,13 @@ MouseArea {
 
 	transitions: [
 		Transition {
-			from: "POPUP_CLOSED"
-			to: "POPUP_OPEN"
+			from: "popup-closed"
+			to: "popup-open"
 
 			SequentialAnimation {
+				// show immediately so mouseleave works
+				PropertyAction { target: popup; property: "visible" }
+
 				ParallelAnimation {
 					NumberAnimation {
 						target: songContainer
@@ -86,7 +92,7 @@ MouseArea {
 					}
 				}
 
-				PropertyAction { target: popup; property: "visible" }
+				PropertyAction { target: popupRect; property: "opacity" }
 				PropertyAction { target: musicRow; property: "visible" }
 
 				ParallelAnimation {
@@ -116,8 +122,9 @@ MouseArea {
 			}
 		},
 		Transition {
-			from: "POPUP_OPEN"
-			to: "POPUP_CLOSED"
+			// TODO: this transition flickers sometimes
+			from: "popup-open"
+			to: "popup-closed"
 
 			SequentialAnimation {
 				ParallelAnimation {
@@ -144,7 +151,8 @@ MouseArea {
 				}
 
 				PropertyAction { target: musicRow; property: "visible" }
-				PropertyAction { target: popup; property: "visible" }
+				PropertyAction { target: popup; properties: "visible" }
+				PropertyAction { target: popupRect; property: "opacity" }
 
 				ParallelAnimation {
 					NumberAnimation {
@@ -194,24 +202,64 @@ MouseArea {
 			id: popupRect
 			anchors.horizontalCenter: parent.horizontalCenter
 			anchors.top: parent.top
-			width: 700
-			height: 36
 			color: Flexoki.bg
-			border.color: Flexoki.ui
 			border.width: 2
 			radius: 18
 
 			MouseArea {
 				anchors.fill: parent
 				hoverEnabled: true
-				onExited: root.state = "POPUP_CLOSED"
+				onExited: root.state = "popup-closed"
 			}
 
-			Text {
-				visible: false
-				anchors.centerIn: parent
-				color: Flexoki.tx
-				text: "Hello world!"
+			RowLayout {	
+				id: popupContent
+
+				anchors.fill: parent
+				anchors.topMargin: 32
+				anchors.bottomMargin: 32
+				anchors.leftMargin: 100
+				anchors.rightMargin: 100
+				spacing: 60
+
+				Image {
+					id: cover
+					asynchronous: true
+					source: "file://" + Song.coverPath
+					sourceSize.width: 300
+					sourceSize.height: 300
+					width: 300
+					height: 300
+
+					Connections {
+						target: Song
+
+						function onCoverLoaded() {
+							cover.source = "file://" + Song.coverPath
+						}
+					}
+				}
+
+				ColumnLayout {
+					Text {
+						Layout.alignment: Qt.AlignHCenter
+						color: Flexoki.re
+						text: Song.artist
+						font.pixelSize: root.fontSize
+					}
+					Text {
+						Layout.alignment: Qt.AlignHCenter
+						color: Flexoki.tx
+						text: Song.album
+						font.pixelSize: root.fontSize
+					}
+					Text {
+						Layout.alignment: Qt.AlignHCenter
+						color: Flexoki.tx
+						text: Song.title
+						font.pixelSize: root.fontSize
+					}
+				}
 			}
 		}
 	}