fix: Optimize MediaMini widget progress ring display

Assets/Translations/en.json

@@ -231,6 +231,10 @@
           "description": "Display an audio visualizer when music is playing.",
           "label": "Show visualizer"
         },
+        "show-progress-ring": {
+          "description": "Display a circular progress indicator showing track progress.",
+          "label": "Show progress ring"
+        },
         "use-fixed-width": {
           "description": "When enabled, the widget will always use the maximum width instead of dynamically adjusting to content.",
           "label": "Use Fixed Width"

Modules/Bar/Widgets/MediaMini.qml

@@ -42,6 +42,7 @@ Item {
   readonly property bool showVisualizer: (widgetSettings.showVisualizer !== undefined) ? widgetSettings.showVisualizer : widgetMetadata.showVisualizer
   readonly property string visualizerType: (widgetSettings.visualizerType !== undefined && widgetSettings.visualizerType !== "") ? widgetSettings.visualizerType : widgetMetadata.visualizerType
   readonly property string scrollingMode: (widgetSettings.scrollingMode !== undefined) ? widgetSettings.scrollingMode : widgetMetadata.scrollingMode
+  readonly property bool showProgressRing: (widgetSettings.showProgressRing !== undefined) ? widgetSettings.showProgressRing : widgetMetadata.showProgressRing
 
   // Maximum widget width with user settings support
   readonly property real maxWidth: (widgetSettings.maxWidth !== undefined) ? widgetSettings.maxWidth : Math.max(widgetMetadata.maxWidth, screen ? screen.width * 0.06 : 0)
@@ -333,6 +334,7 @@ Item {
               id: progressCanvas
               anchors.fill: parent
               anchors.margins: 0 // Align exactly with parent to avoid clipping
+              visible: showProgressRing // Control visibility with setting
               z: 0 // Behind the album art
 
               // Calculate progress ratio: 0 to 1
@@ -351,21 +353,21 @@ Item {
                 var ctx = getContext("2d");
                 var centerX = width / 2;
                 var centerY = height / 2;
-                var radius = Math.min(width, height) / 2 - 3; // Larger radius to create visible ring
+                var radius = Math.min(width, height) / 2 - (1.25 * scaling); // Larger radius, accounting for line width to approach edge
 
                 ctx.reset();
 
                 // Background circle (full track, not played yet)
                 ctx.beginPath();
                 ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
-                ctx.lineWidth = 3; // Thicker line for better visibility
+                ctx.lineWidth = 3 * scaling; // Thicker line width based on scaling property
                 ctx.strokeStyle = Qt.alpha(Color.mOnSurface, 0.4); // More opaque for better visibility
                 ctx.stroke();
 
                 // Progress arc (played portion)
                 ctx.beginPath();
                 ctx.arc(centerX, centerY, radius, -Math.PI / 2, -Math.PI / 2 + progressRatio * 2 * Math.PI);
-                ctx.lineWidth = 3; // Thicker line for better visibility
+                ctx.lineWidth = 3 * scaling; // Thicker line width based on scaling property
                 ctx.strokeStyle = Color.mPrimary; // Use primary color for progress
                 ctx.lineCap = "round";
                 ctx.stroke();
@@ -386,7 +388,7 @@ Item {
             NImageCircled {
               id: trackArt
               anchors.fill: parent
-              anchors.margins: 4 // Make album art slightly smaller to reveal progress ring underneath
+              anchors.margins: showProgressRing ? (2.5 * scaling) : 0.5 // Make album art smaller only when progress ring is visible, scaled with widget
               imagePath: MediaService.trackArtUrl
               fallbackIcon: MediaService.isPlaying ? "media-pause" : "media-play"
               fallbackIconSize: 10
@@ -553,7 +555,7 @@ Item {
         id: progressCanvasVertical
         anchors.fill: parent
         anchors.margins: 0 // Align with parent container (mainContainer which matches mediaMini)
-        visible: isVerticalBar
+        visible: isVerticalBar && showProgressRing // Control visibility with setting
         z: 0 // Behind other content
 
         // Calculate progress ratio: 0 to 1
@@ -580,14 +582,14 @@ Item {
           // Background circle (full track, not played yet)
           ctx.beginPath();
           ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
-          ctx.lineWidth = 3; // Thicker line for better visibility in vertical layout
+          ctx.lineWidth = 1.5 * scaling; // Line width based on scaling property, thinner for vertical layout
           ctx.strokeStyle = Qt.alpha(Color.mOnSurface, 0.4); // More opaque for better visibility
           ctx.stroke();
 
           // Progress arc (played portion)
           ctx.beginPath();
           ctx.arc(centerX, centerY, radius, -Math.PI / 2, -Math.PI / 2 + progressRatio * 2 * Math.PI);
-          ctx.lineWidth = 3; // Thicker line for better visibility in vertical layout
+          ctx.lineWidth = 1.5 * scaling; // Line width based on scaling property, thinner for vertical layout
           ctx.strokeStyle = Color.mPrimary; // Use primary color for progress
           ctx.lineCap = "round";
           ctx.stroke();

Modules/Panels/Settings/Bar/WidgetSettings/MediaMiniSettings.qml

@@ -23,6 +23,7 @@ ColumnLayout {
   property string valueScrollingMode: widgetData.scrollingMode || widgetMetadata.scrollingMode
   property int valueMaxWidth: widgetData.maxWidth !== undefined ? widgetData.maxWidth : widgetMetadata.maxWidth
   property bool valueUseFixedWidth: widgetData.useFixedWidth !== undefined ? widgetData.useFixedWidth : widgetMetadata.useFixedWidth
+  property bool valueShowProgressRing: widgetData.showProgressRing !== undefined ? widgetData.showProgressRing : widgetMetadata.showProgressRing
 
   Component.onCompleted: {
     if (widgetData && widgetData.hideMode !== undefined) {
@@ -41,6 +42,7 @@ ColumnLayout {
     settings.scrollingMode = valueScrollingMode;
     settings.maxWidth = parseInt(widthInput.text) || widgetMetadata.maxWidth;
     settings.useFixedWidth = valueUseFixedWidth;
+    settings.showProgressRing = valueShowProgressRing;
     return settings;
   }
 
@@ -130,6 +132,13 @@ ColumnLayout {
     onToggled: checked => valueUseFixedWidth = checked
   }
 
+  NToggle {
+    label: I18n.tr("bar.widget-settings.media-mini.show-progress-ring.label")
+    description: I18n.tr("bar.widget-settings.media-mini.show-progress-ring.description")
+    checked: valueShowProgressRing
+    onToggled: checked => valueShowProgressRing = checked
+  }
+
   NComboBox {
     label: I18n.tr("bar.widget-settings.media-mini.scrolling-mode.label")
     description: I18n.tr("bar.widget-settings.media-mini.scrolling-mode.description")

Services/UI/BarWidgetRegistry.qml

@@ -161,6 +161,7 @@ Singleton {
                                     "showAlbumArt": false,
                                     "showArtistFirst": true,
                                     "showVisualizer": false,
+                                    "showProgressRing": true,
                                     "visualizerType": "linear"
                                   },
                                   "Microphone": {