Update changelog for v1.0.0-101pika12; use ClippingRectangle for now playing art and improve visual elements in NowPlaying QML file

.github/release-nest-v3

@@ -1 +1 @@
-2
+1

pikabar/debian/changelog

@@ -1,3 +1,9 @@
+pikabar (1.0.0-101pika12) pika; urgency=medium
+
+  * Use ClippingRectangle for now playing art
+
+ -- ferrreo <harderthanfire@gmail.com>  Sat, 01 Oct 2022 14:50:00 +0300
+
 pikabar (1.0.0-101pika11) pika; urgency=medium
 
   * Fix spacings

pikabar/usr/share/pikabar/widgets/NowPlaying.qml

@@ -2,6 +2,7 @@ import QtQuick
 import Quickshell
 import Quickshell.Services.Mpris
 import Quickshell.Io
+import Quickshell.Widgets
 import QtQuick.Window
 import "root:/"
 
@@ -79,8 +80,9 @@ BarWidget {
             leftMargin: 8
             rightMargin: 8
         }
-        color: "#2D2D2D"
+        color: "transparent"
         radius: 8
+        visible: root.player?.playbackState === MprisPlaybackState.Playing || root.player?.playbackState === MprisPlaybackState.Paused
 
         Rectangle {
             id: artContainer
@@ -90,26 +92,20 @@ BarWidget {
             anchors.leftMargin: 32
             anchors.verticalCenter: parent.verticalCenter
             color: "transparent"
-            radius: 8
-
-            Rectangle {
-                anchors.fill: parent
-                color: parent.color
             radius: parent.radius
-                clip: true
+
+            ClippingRectangle {
+                anchors.fill: parent
+                color: "transparent"
+                radius: parent.radius
+                border.color: "#9900246b"
+                border.width: 2
 
                 Image {
                     id: artImage
                     anchors.fill: parent
                     source: root.player?.trackArtUrl ?? ""
-                    fillMode: Image.PreserveAspectCrop
+                    fillMode: Image.PreserveAspectFit
-
-                    layer.enabled: true
-                    layer.effect: ShaderEffect {
-                        property real radius: artContainer.radius
-                        property size size: Qt.size(artImage.width, artImage.height)
-                        fragmentShader: "../roundedimage.frag.qsb"
-                    }
                 }
             }
 
@@ -138,28 +134,16 @@ BarWidget {
             MouseArea {
                 id: mouseArea
                 anchors.fill: parent
-                hoverEnabled: root.player?.playbackState === MprisPlaybackState.Stopped || root.player?.playbackState === MprisPlaybackState.Playing || root.player?.playbackState === MprisPlaybackState.Paused
+                hoverEnabled: true
                 cursorShape: Qt.PointingHandCursor
                 onClicked: root.player?.togglePlaying()
             }
-
-            Rectangle {
-                anchors.fill: parent
-                color: "transparent"
-                border.color: "#00246b"
-                border.width: 2
-                radius: parent.radius
-                antialiasing: true
-                smooth: true
-                visible: root.player?.playbackState === MprisPlaybackState.Playing || root.player?.playbackState === MprisPlaybackState.Paused
-            }
         }
 
         Item {
             id: titleContainer
             anchors.left: artContainer.right
             anchors.right: parent.right
-            anchors.verticalCenter: parent.verticalCenter
             anchors.leftMargin: 16
             anchors.rightMargin: 12
             height: 42
@@ -183,7 +167,6 @@ BarWidget {
                 width: Math.min(implicitWidth, 200)
                 anchors.left: parent.left
                 anchors.top: parent.verticalCenter
-                anchors.topMargin: 2
                 text: root.player?.trackArtists || ""
                 elide: Text.ElideRight
                 color: Globals.commonStyles.textColor