linphone-desktop/Linphone/view/Control/Display/MediaProgressBar.qml

import QtQuick
import QtQuick.Controls as Control
import QtQuick.Layouts
import QtQuick.Shapes
import QtQuick.Effects

import Linphone
import UtilsCpp

import "qrc:/qt/qml/Linphone/view/Style/buttonStyle.js" as ButtonStyle
import "qrc:/qt/qml/Linphone/view/Control/Tool/Helper/utils.js" as Utils

// =============================================================================

ProgressBar {
	id: mainItem

	property bool stopAtEnd: true
	property bool resetAtEnd: true
	property int progressDuration	// Max duration
	property int progressPosition	// Position of progress bar in [0 ; progressDuration]
	property bool blockValueAtEnd: true

	property bool recording: false
	padding: 0
	clip: true

	function start() {
		mainItem.value = 0;
		animationTest.start();
	}
	function resume() {
		if (mainItem.value >= 100)
			mainItem.value = 0;
		animationTest.start();
	}
	function stop() {
		animationTest.stop();
	}
	signal playStopButtonToggled
	signal endReached
	signal refreshPositionRequested
	signal seekRequested(int ms)
	Timer {
		id: animationTest
		repeat: true
		onTriggered: mainItem.refreshPositionRequested()
		interval: 5
	}
	to: 101
	value: progressPosition * to / progressDuration
	onValueChanged: {
		if (value > 100) {
			if (mainItem.stopAtEnd)
				stop();
			if (mainItem.resetAtEnd) {
				mainItem.value = 0;
				progressPosition = 0;
			} else if (mainItem.blockValueAtEnd) {
				mainItem.value = 100;// Stay at 100
				progressPosition = progressDuration;
			}
			mainItem.endReached();
		}
	}

	background: Item {
		anchors.fill: parent
		Rectangle {
			id: backgroundArea
			anchors.fill: parent
			gradient: Gradient {
				orientation: Gradient.Horizontal
				GradientStop {
					position: 0.0
					color: "#FF9E79"
				}
				GradientStop {
					position: 1.0
					color: "#FE5E00"
				}
			}
			radius: Utils.getSizeWithScreenRatio(70)
		}
		Rectangle {
			id: mask
			anchors.fill: parent
			visible: false
			radius: backgroundArea.radius
		}
		Item {
			id: progressRectangle
			anchors.fill: parent
			visible: false
			Rectangle {
				color: DefaultStyle.grey_0
				width: mainItem.barWidth
				height: backgroundArea.height
				opacity: 0.5
			}
		}
		ShaderEffect {
			id: opacityEffect
			anchors.fill: progressRectangle
			property var source: ShaderEffectSource {
				sourceItem: progressRectangle
			}
			property var maskSource: ShaderEffectSource {
				sourceItem: mask
			}
			fragmentShader: 'qrc:/data/shaders/opacityMask.frag.qsb'
		}
		MouseArea {
			id: progression
			anchors.fill: parent
			onClicked: mouse => {
						   mainItem.seekRequested(mouse.x * mainItem.progressDuration / width);
					   }
		}
	}

	contentItem: Item {
		id: contentRect

		RoundButton {
			z: parent.z + 1
			anchors.left: parent.left
			anchors.leftMargin: Utils.getSizeWithScreenRatio(9)
			anchors.verticalCenter: parent.verticalCenter
			icon.width: Utils.getSizeWithScreenRatio(14)
			icon.height: Utils.getSizeWithScreenRatio(14)
			icon.source: animationTest.running ? mainItem.recording ? AppIcons.stopFill : AppIcons.pauseFill : AppIcons.playFill
			onClicked: {
				mainItem.playStopButtonToggled();
			}
			style: ButtonStyle.player
		}
		Control.Control {
			anchors.right: parent.right
			anchors.rightMargin: Utils.getSizeWithScreenRatio(9)
			anchors.verticalCenter: parent.verticalCenter
			leftPadding: Utils.getSizeWithScreenRatio(18)
			rightPadding: Utils.getSizeWithScreenRatio(18)
			topPadding: Utils.getSizeWithScreenRatio(5)
			bottomPadding: Utils.getSizeWithScreenRatio(5)
			background: Rectangle {
				anchors.fill: parent
				color: DefaultStyle.grey_0
				radius: Utils.getSizeWithScreenRatio(50)
			}
			contentItem: RowLayout {
				spacing: mainItem.recording ? Utils.getSizeWithScreenRatio(5) : 0
				EffectImage {
					visible: mainItem.recording
					colorizationColor: DefaultStyle.danger_500_main
					imageSource: AppIcons.recordFill
					Layout.preferredWidth: Utils.getSizeWithScreenRatio(14)
					Layout.preferredHeight: Utils.getSizeWithScreenRatio(14)
				}
				Text {
					id: durationText
					text: mainItem.progressPosition > 0 ? UtilsCpp.formatElapsedTime(mainItem.progressPosition / 1000) : UtilsCpp.formatElapsedTime(
															  mainItem.progressDuration / 1000)
					font {
						pixelSize: Typography.p1.pixelSize
						weight: Typography.p1.weight
					}
				}
			}
		}
	}
}