blob: 646e5e8effcddb7be5f7d04adda7f0ea87907163 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
|
// Copyright (C) 2016 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick
Item {
id: seekControl
height: Math.min(parent.width, parent.height) / 20
property int duration: 0
property int playPosition: 0
property int seekPosition: 0
property bool enabled: true
property bool seeking: false
Rectangle {
id: background
anchors.fill: parent
color: palette.base
opacity: 0.3
radius: parent.height / 15
}
Rectangle {
id: progressBar
anchors { left: parent.left; top: parent.top; bottom: parent.bottom }
width: seekControl.duration == 0 ? 0 : background.width * seekControl.playPosition / seekControl.duration
color: palette.highlight
opacity: 0.7
}
Text {
width: 90
anchors { left: parent.left; top: parent.top; bottom: parent.bottom; leftMargin: 10 }
horizontalAlignment: Text.AlignLeft
verticalAlignment: Text.AlignVCenter
color: palette.windowText
smooth: true
text: seekControl.formatTime(seekControl.playPosition)
}
Text {
width: 90
anchors { right: parent.right; top: parent.top; bottom: parent.bottom; rightMargin: 10 }
horizontalAlignment: Text.AlignRight
verticalAlignment: Text.AlignVCenter
color: palette.windowText
smooth: true
text: seekControl.formatTime(seekControl.duration)
}
Rectangle {
id: progressHandle
height: parent.height
width: parent.height / 2
color: palette.accent
opacity: 0.5
anchors.verticalCenter: progressBar.verticalCenter
x: seekControl.duration == 0 ? 0 : seekControl.playPosition / seekControl.duration * background.width
MouseArea {
id: mouseArea
anchors { horizontalCenter: parent.horizontalCenter; bottom: parent.bottom }
height: parent.height
width: parent.height * 2
enabled: seekControl.enabled
drag {
target: progressHandle
axis: Drag.XAxis
minimumX: 0
maximumX: background.width
}
onPressed: {
seekControl.seeking = true;
}
onCanceled: {
seekControl.seekPosition = progressHandle.x * seekControl.duration / background.width
seekControl.seeking = false
}
onReleased: (mouse) => {
seekControl.seekPosition = progressHandle.x * seekControl.duration / background.width
seekControl.seeking = false
mouse.accepted = true
}
}
}
Timer { // Update position also while user is dragging the progress handle
id: seekTimer
repeat: true
interval: 300
running: seekControl.seeking
onTriggered: {
seekControl.seekPosition = progressHandle.x*seekControl.duration / background.width
}
}
function formatTime(timeInMs) {
if (!timeInMs || timeInMs <= 0) return "0:00"
let seconds = timeInMs / 1000;
let minutes = Math.floor(seconds / 60)
seconds = Math.floor(seconds % 60)
if (seconds < 10) seconds = "0" + seconds;
return minutes + ":" + seconds
}
}
|
