[AI] Added media control buttons to player control

AGENTS.md

@@ -7,8 +7,8 @@
 
 ## Key Singletons
 - `GlobalStates.qml`: Manages global UI visibility (e.g., `mediaControlsOpen`, `notificationPanelOpen`).
-- `common/Config.qml`: Manages JSON configuration and watches for file changes.
+- `common/Config.qml`: Manages JSON configuration at `${XDG_CONFIG_HOME}/hydro-os/config.json` and watches for file changes.
-- `common/Directories.qml`: Defines XDG and repository-specific file paths.
+- `common/Directories.qml`: Defines XDG and repository-specific file paths (e.g., `${XDG_CONFIG_HOME}/hydro-os/color.json`).
 - `common/Appearance.qml`: Handles theme, colors, and transparency.
 
 ## Component Structure
@@ -20,5 +20,5 @@
 - `settings.qml`: Settings view entry point.
 
 ## Development Workflow
-- *TBD*: Check for build/lint/test commands (e.g., `npm`, `make`, or direct `quickshell` execution).
+- **Logs**: Run `quickshell log` and read only after the last "INFO: Reloading configuration..."
-- Logs: Run `quickshell log` and read only after the last "INFO: Reloading configuration..."
+- **Config**: Configuration files are located in `${XDG_CONFIG_HOME}/hydro-os/` and may be auto-created by the application.

bar/Media.qml

@@ -12,7 +12,7 @@ Item {
     property bool borderless: Config.options.bar.borderless
 
     Layout.fillHeight: true
-    implicitWidth: rowLayout.implicitWidth + rowLayout.spacing * 2
+    implicitWidth: mediaLabel.implicitWidth
     implicitHeight: Appearance.sizes.barHeight
 
     Timer {
@@ -37,45 +37,13 @@ Item {
             }
         }
     }
-
+    StyledText {
-    RowLayout {
+    	id: mediaLabel
-        id: rowLayout
+        visible: Config.options.bar.verbose
-
+        anchors.top: parent.top
-        spacing: 4
+        anchors.bottom: parent.bottom
-        anchors.fill: parent
+        horizontalAlignment: Text.AlignHCenter
-        visible: MprisController.hasPlayers
+        color: Appearance.colors.colOnLayer1
-        CircularProgress {
+        text: `${MprisController.activePlayer()?.trackTitle}${MprisController.activePlayer()?.trackArtist ? ' • ' + MprisController.activePlayer().trackArtist : ''}`
-            id: circularProgress
-            visible: false && MprisController.hasPlayers && MprisController.activePlayer().lengthSupported
-            Layout.alignment: Qt.AlignVCenter
-            Layout.leftMargin: rowLayout.spacing
-            lineWidth: 2
-            value: MprisController.activePlayer().lengthSupported ? MprisController.activePlayer()?.position / MprisController.activePlayer()?.length : 0
-            implicitSize: 26
-            colSecondary: Appearance.colors.colSecondaryContainer
-            colPrimary: Appearance.m3colors.m3onSecondaryContainer
-            enableAnimation: false
-
-            MaterialSymbol {
-                visible: MprisController.hasPlayers && MprisController.activePlayer().lengthSupported
-                anchors.centerIn: parent
-                fill: 1
-                text: MprisController.activePlayer()?.isPlaying ? "music_note" : "pause"
-                iconSize: Appearance.font.pixelSize.normal
-                color: Appearance.m3colors.m3onSecondaryContainer
-            }
-        }
-
-        StyledText {
-            visible: Config.options.bar.verbose
-            width: rowLayout.width - (circularProgress.size + rowLayout.spacing * 2)
-            Layout.alignment: Qt.AlignCenter
-            Layout.fillWidth: true
-            Layout.rightMargin: rowLayout.spacing
-            horizontalAlignment: Text.AlignHCenter
-            elide: Text.ElideRight
-            color: Appearance.colors.colOnLayer1
-            text: `${MprisController.activePlayer()?.trackTitle}${MprisController.activePlayer()?.trackArtist ? ' • ' + MprisController.activePlayer().trackArtist : ''}`
-        }
     }
 }

osd/MediaControls.qml

@@ -79,15 +79,15 @@ Scope {
     target: "mediaControls"
 
     function toggle(): void {
-      mediaControlsLoader.active = !mediaControlsLoader.active;
+      GlobalStates.mediaControlsOpen = !GlobalStates.mediaControlsOpen;
     }
 
     function close(): void {
-      mediaControls.loader.active = false;
+      GlobalStates.mediaControlsOpen = false;
     }
 
     function open(): void {
-      mediaControlsLoader.active = true;
+      GlobalStates.mediaControlsOpen = true;
     }
   }
 }

osd/PlayerControl.qml

@@ -22,7 +22,7 @@ Item {
   property string artFilePath: `${artDownloadLocation}/${artFileName}`
   property color artDominantColor: ColorUtils.mix((colorQuantizer?.colors[0] ?? Appearance.colors.colPrimary), Appearance.colors.colPrimaryContainer, 0.8) || Appearance.m3colors.m3secondaryContainer
   property bool downloaded: false
-  
+
   implicitWidth: widgetWidth
   implicitHeight: widgetHeight
 
@@ -101,7 +101,6 @@ Item {
         radius: background.radius
       }
     }
-    /*
     Image {
       id: blurredArt
       anchors.fill: parent
@@ -122,7 +121,6 @@ Item {
         blur: 1
       }
     }
-    */
 
     Rectangle {
       anchors.fill: parent
@@ -190,9 +188,54 @@ Item {
         elide: Text.ElideRight
         text: playerController.player?.trackArtist
       }
-      Item { // spacing
+      RowLayout {
-        Layout.fillHeight: true
+        Layout.fillWidth: true
+        Layout.preferredHeight: 32
+        spacing: 8
+
+        RippleButton {
+          implicitWidth: 32
+          implicitHeight: 32
+          onClicked: playerController.player?.previous()
+          contentItem: MaterialSymbol {
+            text: "skip_previous"
+            iconSize: 24
+            anchors.centerIn: parent
+            color: blendedColors.colOnLayer1
+          }
+        }
+
+        RippleButton {
+          id: playPauseButton
+          implicitWidth: 32
+          implicitHeight: 32
+          onClicked: {
+            if (playerController.player?.playbackState == MprisPlaybackState.Playing) {
+              playerController.player?.pause()
+            } else {
+              playerController.player?.play()
+            }
+          }
+          contentItem: MaterialSymbol {
+            text: playerController.player?.playbackState == MprisPlaybackState.Playing ? "pause" : "play_arrow"
+            iconSize: 24
+            anchors.centerIn: parent
+            color: blendedColors.colOnLayer1
+          }
+        }
+
+        RippleButton {
+          implicitWidth: 32
+          implicitHeight: 32
+          onClicked: playerController.player?.next()
+          contentItem: MaterialSymbol {
+            text: "skip_next"
+            iconSize: 24
+            anchors.centerIn: parent
+            color: blendedColors.colOnLayer1
+          }
+        }
       }
     }
   }
-}
+}

shell.qml

@@ -7,6 +7,6 @@ import qs.background
 Scope {
   Bar {}
   VolumeDisplay {}
-  //MediaControls {}
+  MediaControls {}
   NotificationPanel {}
 }