[UI] Use ProgressBar as it is more suited for this task rather than changing the width of a rectangle.

src/qml/ControlsBar.qml

@@ -120,7 +120,7 @@ Item {
                     progressBar.to = duration
                 })
                 player.cachedDurationChanged.connect(function(duration) {
-                    cachedLength.width = progressBackground.width / progressBar.to * duration
+                    cachedLength.value = progressBar.value + duration
                 })
             }
             onMoved: {
@@ -153,16 +153,35 @@ Item {
                 width: progressBar.availableWidth
                 height: implicitHeight
                 color: Qt.rgba(255, 255, 255, 0.6)
-                radius: height
+                ProgressBar {
+                    id: cachedLength
+                    background: Item {}
+                    contentItem: Item {
                         Rectangle {
+                            width: cachedLength.visualPosition * parent.width
+                            height: parent.height
+                            color: "white"
+                        }
+                    }
+                    z: 40
+                    to: progressBar.to
+                    anchors.fill: parent
+                }
+                ProgressBar {
+                    z: 50
                     id: progressLength
-                    width: progressBar.visualPosition * parent.width
+                    width: parent.width
+                    height: parent.height
+                    to: progressBar.to
+                    value: progressBar.value
+                    opacity: 1
+                    anchors.leftMargin: 0
+                    background: Item {}
+                    contentItem: Item {
+                        Rectangle {
+                            width: progressLength.visualPosition * parent.width + progressBar.handle.width / 2
                             height: parent.height
                             color: appearance.progressSliderColor
-                    opacity: 1
-                    radius: height
-                    anchors.leftMargin: 100
-
                             Image {
                                 visible: fun.nyanCat
                                 id: rainbow
@@ -173,22 +192,12 @@ Item {
                                 fillMode: Image.TileHorizontally
                             }
                         }
-                Rectangle {
+                    }
-                    id: cachedLength
-                    z: 100
-                    radius: height
-                    anchors.left: progressLength.right
-                    anchors.leftMargin: 2
-                    //anchors.left: progressBar.handle.horizontalCenter
-                    anchors.bottom: progressBar.background.bottom
-                    anchors.top: progressBar.background.top
-                    height: progressBar.background.height
-                    color: "white"
-                    opacity: 0.8
                 }
             }
 
             handle: Rectangle {
+                z: 70
                 id: handleRect
                 x: progressBar.leftPadding + progressBar.visualPosition
                    * (progressBar.availableWidth - width) 
@@ -198,6 +207,7 @@ Item {
                 radius: 12 + (progressBackground.height / 2)
                 color: fun.nyanCat ? "transparent" : appearance.progressSliderColor
                 AnimatedImage {
+                    z: 80
                     visible: fun.nyanCat
                     paused: progressBar.pressed
                     height: 30