[vlc-commits] qml: add volume indicator tooltip to VolumeWidget

[Fatih Uzunoglu]

vlc | branch: master | Fatih Uzunoglu <fuzun54 at outlook.com> | Tue Aug 11 01:25:33 2020 +0300| [b83027734309ec143292e133fc7ab819aa309a46] | committer: Pierre Lamot

qml: add volume indicator tooltip to VolumeWidget

+ make xPos and yPos of PointingTooltip changeable so that they are not strictly bound to mouseArea

Signed-off-by: Pierre Lamot <pierre at videolabs.io>

> http://git.videolan.org/gitweb.cgi/vlc.git/?a=commit;h=b83027734309ec143292e133fc7ab819aa309a46
---

 modules/gui/qt/player/qml/VolumeWidget.qml     | 42 ++++++++++++++++++++++++--
 modules/gui/qt/widgets/qml/PointingTooltip.qml |  4 +--
 2 files changed, 42 insertions(+), 4 deletions(-)

diff --git a/modules/gui/qt/player/qml/VolumeWidget.qml b/modules/gui/qt/player/qml/VolumeWidget.qml
index 4cd0ddb9b0..fb215b690d 100644
--- a/modules/gui/qt/player/qml/VolumeWidget.qml
+++ b/modules/gui/qt/player/qml/VolumeWidget.qml
@@ -38,6 +38,8 @@ FocusScope{
 
     property color color: VLCStyle.colors.buttonText
 
+    property alias parentWindow: volumeTooltip.parentWindow
+
     RowLayout{
         id: volumeWidget
         Widgets.IconToolButton{
@@ -84,8 +86,31 @@ FocusScope{
                 }
             }
 
-            Keys.onUpPressed: volControl.increase()
-            Keys.onDownPressed: volControl.decrease()
+            Timer {
+                // useful for keyboard volume alteration
+                id: tooltipShower
+                running: false
+                repeat: false
+                interval: 1000
+
+                onRunningChanged: {
+                    if (running)
+                        volumeTooltip.visible = true
+                    else
+                        volumeTooltip.visible = Qt.binding(function() {return sliderMouseArea.containsMouse;})
+                }
+            }
+
+            Keys.onUpPressed: {
+                volControl.increase()
+                tooltipShower.restart()
+            }
+
+            Keys.onDownPressed: {
+                volControl.decrease()
+                tooltipShower.restart()
+            }
+
             Keys.onRightPressed: {
                 var right = widgetfscope.KeyNavigation.right
                 while (right && (!right.enabled || !right.visible)) {
@@ -113,6 +138,18 @@ FocusScope{
                 player.volume = volControl.value
             }
 
+            Widgets.PointingTooltip {
+                id: volumeTooltip
+
+                visible: sliderMouseArea.containsMouse
+
+                text: Math.round(volControl.value * 100) + "%"
+
+                mouseArea: sliderMouseArea
+
+                xPos: (handle.x + handle.width / 2)
+            }
+
             background: Rectangle {
                 id: sliderBg
                 x: volControl.leftPadding
@@ -177,6 +214,7 @@ FocusScope{
             }
 
             handle: Rectangle {
+                id: handle
                 x: volControl.leftPadding + volControl.visualPosition * (volControl.availableWidth - width)
                 y: volControl.topPadding + volControl.availableHeight / 2 - height / 2
 
diff --git a/modules/gui/qt/widgets/qml/PointingTooltip.qml b/modules/gui/qt/widgets/qml/PointingTooltip.qml
index f0d51d9e0e..5d8b216140 100644
--- a/modules/gui/qt/widgets/qml/PointingTooltip.qml
+++ b/modules/gui/qt/widgets/qml/PointingTooltip.qml
@@ -36,8 +36,8 @@ Item {
     property bool fixedY: true
 
     readonly property real position: xPos / mouseArea.width
-    readonly property real xPos: mouseArea.mouseX
-    readonly property real yPos: mouseArea.mouseY
+    property real xPos: mouseArea.mouseX
+    property real yPos: mouseArea.mouseY
 
     width: childrenRect.width
     height: childrenRect.height