Minor tweaks of the QQPlayer example.

Signed-off-by: Yuhang Zhao <2546789017@qq.com>

examples/QQPlayer-demo/main.cpp

@@ -3,9 +3,9 @@
 #include <QQmlApplicationEngine>
 
 int main(int argc, char *argv[]) {
+    // Enable Qt RHI, the default backend on Windows is D3D 11.1
     qputenv("QSG_RHI", "1");
     qputenv("QSG_INFO", "1");
-    // qputenv("QSG_RHI_BACKEND", "opengl");
 #if (QT_VERSION <= QT_VERSION_CHECK(6, 0, 0))
     QGuiApplication::setAttribute(
         Qt::ApplicationAttribute::AA_EnableHighDpiScaling);

examples/QQPlayer-demo/resources/qml/ProgressSlider.qml

@@ -14,13 +14,17 @@ Slider {
     property int normalHeight: 4
     property color backgroundColor: "#bdbebf"
     property color foregroundColor: "#21be2b"
+    property color handleColor: "#f0f0f0"
+    property int handleWidth: 14
+    property int handleBorderWidth: 0
+    property color handleBorderColor: "transparent"
 
     background: Rectangle {
         x: 0
-        y: control.height / 2 - height / 2
+        y: control.availableHeight / 2 - height / 2
         implicitWidth: 200
         implicitHeight: control.hovered ? control.hoveredHeight : control.normalHeight
-        width: control.width
+        width: control.availableWidth
         height: implicitHeight
         color: control.backgroundColor
 
@@ -43,5 +47,20 @@ Slider {
         }
     }
 
-    handle: Item {}
+    handle: Rectangle {
+        x: control.visualPosition * (control.availableWidth - width)
+        y: control.availableHeight / 2 - height / 2
+        implicitWidth: control.handleWidth
+        implicitHeight: implicitWidth
+        radius: implicitHeight / 2
+        color: control.handleColor
+        border.width: control.handleBorderWidth
+        border.color: control.handleBorderColor
+
+        Behavior on x {
+            NumberAnimation {
+                duration: control.progressDuration
+            }
+        }
+    }
 }

examples/QQPlayer-demo/resources/qml/main.qml

@@ -99,8 +99,11 @@ Window {
         ProgressSlider {
             id: progressSlider
             anchors.bottom: parent.top
+            anchors.bottomMargin: -2
             anchors.left: parent.left
             anchors.right: parent.right
+            foregroundColor: "#1ab7e4"
+            handleColor: "#923cf2"
         }
 
         StopButton {