[vlc-commits] qml: add seekpoints to sliderBar

[Abel Tesfaye]

vlc | branch: master | Abel Tesfaye <Abeltesfaye45 at gmail.com> | Fri May 31 14:00:57 2019 +0300| [2d1a1e3085e971cf4298a3995c801fc8f188323a] | committer: Thomas Guillem

qml: add seekpoints to sliderBar

Fixes #22196

Signed-off-by: Thomas Guillem <thomas at gllm.fr>
Signed-off-by: Pierre Lamot <pierre at videolabs.io>

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

 modules/gui/qt/qml/player/SliderBar.qml | 57 +++++++++++++++++++++++++++++++--
 modules/gui/qt/qml/style/VLCColors.qml  |  2 ++
 2 files changed, 56 insertions(+), 3 deletions(-)

diff --git a/modules/gui/qt/qml/player/SliderBar.qml b/modules/gui/qt/qml/player/SliderBar.qml
index 884c00375f..f9372479ff 100644
--- a/modules/gui/qt/qml/player/SliderBar.qml
+++ b/modules/gui/qt/qml/player/SliderBar.qml
@@ -17,6 +17,7 @@
  *****************************************************************************/
 import QtQuick 2.11
 import QtQuick.Controls 2.4
+import QtQuick.Layouts 1.3
 
 import "qrc:///style/"
 
@@ -24,12 +25,20 @@ Slider {
     id: control
     property int barHeight: 5
     property bool _isHold: false
-
+    property bool _isSeekPointsShown: true
+    
     anchors.margins: VLCStyle.margin_xxsmall
 
     Keys.onRightPressed: player.jumpFwd()
     Keys.onLeftPressed: player.jumpBwd()
 
+    Timer {
+        id: seekpointTimer
+        running: player.hasChapters && !control.hovered && _isSeekPointsShown
+        interval: 3000
+        onTriggered: control._isSeekPointsShown = false
+    }
+
     Item {
         id: timeTooltip
         property real location: 0
@@ -57,8 +66,9 @@ Slider {
             color: VLCStyle.colors.bgAlt
 
             Text {
-                anchors.centerIn: parent
-                text: (player.length.scale(timeTooltip.position).toString())
+                text: player.length.scale(timeTooltip.position).toString() +
+                      (player.hasChapters ?
+                           " - " + player.chapters.getNameAtPosition(timeTooltip.position) : "")
                 color: VLCStyle.colors.text
             }
         }
@@ -91,6 +101,9 @@ Slider {
         color: "transparent"
 
         MouseArea {
+            id: sliderRectMouseArea
+            property bool isEntered: false
+
             anchors.fill: parent
             hoverEnabled: true
 
@@ -108,6 +121,14 @@ Slider {
                 }
                 timeTooltip.location = event.x
             }
+            onEntered: {
+                if(player.hasChapters)
+                    control._isSeekPointsShown = true
+            }
+            onExited: {
+                if(player.hasChapters)
+                    seekpointTimer.restart()
+            }
         }
 
         Rectangle {
@@ -214,6 +235,36 @@ Slider {
                 rightMargin: VLCStyle.margin_xxsmall
             }
         }
+
+        RowLayout {
+            id: seekpointsRow
+            spacing: 0
+            visible: player.hasChapters
+            Repeater {
+                id: seekpointsRptr
+                model: player.chapters
+                Rectangle {
+                    id: seekpointsRect
+                    property real position: model.position
+
+                    color: VLCStyle.colors.seekpoint
+                    width: 1 * VLCStyle.scale
+                    height: control.barHeight
+                    x: sliderRect.width * seekpointsRect.position
+                }
+            }
+
+            OpacityAnimator on opacity {
+                from: 1
+                to: 0
+                running: !control._isSeekPointsShown
+            }
+            OpacityAnimator on opacity{
+                from: 0
+                to: 1
+                running: control._isSeekPointsShown
+            }
+        }
     }
 
     handle: Rectangle {
diff --git a/modules/gui/qt/qml/style/VLCColors.qml b/modules/gui/qt/qml/style/VLCColors.qml
index ef3df59a4d..a1be281883 100644
--- a/modules/gui/qt/qml/style/VLCColors.qml
+++ b/modules/gui/qt/qml/style/VLCColors.qml
@@ -79,6 +79,8 @@ Item {
 
     property color buffer: "#696969";
 
+    property color seekpoint: "red";
+
     property var colorSchemes: ["system", "day", "night"]
 
     state: "system"