This commit is contained in:
朱子楚\zhuzi
2023-03-25 20:45:33 +08:00
parent e2d72d4510
commit 5e61af99ba
7 changed files with 84 additions and 75 deletions

View File

@ -1,20 +1,24 @@
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtMultimedia 5.15
import QtGraphicalEffects 1.15
import FluentUI 1.0
Item {
Rectangle {
property url source
id:control
width: 480
height: 270
color: FluColors.Black
clip: true
property url source
property bool showControl: true
Rectangle{
MouseArea{
anchors.fill: parent
color: FluColors.Black
onClicked: {
showControl = !showControl
}
}
MediaPlayer {
@ -38,7 +42,7 @@ Item {
}
onSourceChanged: {
slider.seek(0)
slider.seek(0)
}
VideoOutput {
@ -48,24 +52,27 @@ Item {
Item{
height: 100
y:showControl ? control.height - 110 : control.height
anchors{
bottom: parent.bottom
left: parent.left
right: parent.right
leftMargin: 10
rightMargin: 10
bottomMargin: 10
}
MouseArea{
anchors.fill: parent
}
Behavior on y{
NumberAnimation{
duration: 150
}
}
Rectangle{
anchors.fill: parent
color:FluTheme.isDark ? Qt.rgba(45/255,45/255,45/255,0.97) : Qt.rgba(237/255,237/255,237/255,0.97)
radius: 5
layer.enabled: true
layer.effect: GaussianBlur {
radius: 5
samples: 16
}
}
FluSlider{
@ -81,6 +88,9 @@ Item {
mediaplayer.seek(value*mediaplayer.duration/slider.maxValue)
mediaplayer.autoSeek = true
}
onLineClickFunc:function(val){
mediaplayer.seek(val*mediaplayer.duration/slider.maxValue)
}
}
FluText{
@ -135,7 +145,13 @@ Item {
return value.toString().padStart(2, '0');
}
function pause(){
mediaplayer.pause()
}
function play(){
mediaplayer.play()
}
}

View File

@ -1,7 +1,6 @@
import QtQuick 2.15
import QtQuick.Layouts 1.15
import QtQuick.Controls 2.15
import QtGraphicalEffects 1.15
Menu {
id: popup
@ -11,18 +10,11 @@ Menu {
height: container.height
background: Item {
Rectangle{
anchors.fill: parent
color:FluTheme.isDark ? Qt.rgba(45/255,45/255,45/255,0.97) : Qt.rgba(237/255,237/255,237/255,0.97)
radius: 5
layer.enabled: true
layer.effect: GaussianBlur {
radius: 5
samples: 16
}
}
FluShadow{
radius: 5
}

View File

@ -4,39 +4,51 @@ import QtGraphicalEffects 1.15
Item{
id:root
property int size: 180
property int dotSize: 24
property int value: 50
property int maxValue: 100
enum Orientation {
Horizontal,
Vertical
}
height: control.height
width: control.width
property int size: 180
property int dotSize: 24
property int value: 50
property int maxValue: 100
property int orientation: FluSlider.Horizontal
property bool isHorizontal: orientation === FluSlider.Horizontal
property bool enableTip : true
property var onLineClickFunc
signal pressed
signal released
id:root
height: control.height
width: control.width
rotation: isHorizontal ? 0 : 180
Component.onCompleted: {
seek(0)
}
MouseArea{
id:mouse_line
anchors.centerIn: control
width: isHorizontal ? control.width : 10
height: isHorizontal ? 10 : control.height
hoverEnabled: true
onClicked:
(mouse) => {
var val;
if(isHorizontal){
val = mouse.x*maxValue/control.width
}else{
val = mouse.y*maxValue/control.height
}
if(onLineClickFunc){
onLineClickFunc(val)
}else{
seek(val)
}
}
}
Rectangle {
id: control
width: isHorizontal ? size : 4
@ -51,6 +63,8 @@ Item{
height: isHorizontal ? 5 : control.height*(value/maxValue)
color:FluTheme.isDark ? FluTheme.primaryColor.lighter :FluTheme.primaryColor.dark
}
}
Rectangle{
@ -70,7 +84,7 @@ Item{
radius: dotSize/4
color:FluTheme.isDark ? FluTheme.primaryColor.lighter :FluTheme.primaryColor.dark
anchors.centerIn: parent
scale: control_mouse.containsMouse ? 1.2 : 1
scale: control_mouse.containsMouse || mouse_line.containsMouse ? 1.3 : 1
Behavior on scale {
NumberAnimation{
duration: 150
@ -109,14 +123,14 @@ Item{
}
}
function seek(position){
function seek(val){
if(isHorizontal){
dot.x =position/maxValue*control.width - dotSize/2
dot.x =val/maxValue*control.width - dotSize/2
root.value = Qt.binding(function(){
return (dot.x+dotSize/2)/control.width*maxValue
})
}else{
dot.y =position/maxValue*control.height - dotSize/2
dot.y =val/maxValue*control.height - dotSize/2
root.value = Qt.binding(function(){
return (dot.y+dotSize/2)/control.height*maxValue
})