wuyize
/
FluentUI
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

update

main
zhuzihcu 2023-03-24 18:25:13 +08:00
parent d8d95399cd
commit 6d809efd4b
5 changed files with 163 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
example/T_MediaPlayer.qml
View File

@ -7,11 +7,11 @@ import FluentUI 1.0
FluScrollablePage{
title:"ColorPicker"
title:"MediaPlayer"
FluArea{
width: parent.width
height: 280
height: 320
Layout.topMargin: 20
paddings: 10
ColumnLayout{
@ -21,7 +21,10 @@ FluScrollablePage{
}
FluMediaPlayer{
source:{
console.debug("-------------->")
return "http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"
}
}
}

2
example/page/MainPage.qml
View File

@ -11,7 +11,7 @@ FluWindow {
width: 860
height: 600
title: "FluentUI"
minimumWidth: 500
minimumWidth: 520
minimumHeight: 400
FluAppBar{

131
src/controls/FluMediaPlayer.qml
View File

@ -1,28 +1,141 @@
import QtQuick 2.15
import QtMultimedia 5.9
import QtQuick.Controls 2.15
import QtMultimedia 5.15
import QtGraphicalEffects 1.15
import FluentUI 1.0
Item {
width: 320
height: 240
id:control
width: 480
height: 270
property url source
Rectangle{
anchors.fill: parent
color: FluColors.Black
}
MediaPlayer {
id: mediaplayer
source: "http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"
property bool autoSeek:true
autoPlay: true
source: control.source
onError: {
console.debug(error)
}
onPositionChanged: {
if(autoSeek){
slider.seek(mediaplayer.position*slider.maxValue/mediaplayer.duration)
}
}
onStatusChanged: {
if(status===6){
slider.maxValue = mediaplayer.duration
}
}
}
onSourceChanged: {
slider.seek(0)
}
VideoOutput {
anchors.fill: parent
source: mediaplayer
}
MouseArea {
anchors.fill: parent
onPressed: {
console.debug("------>")
mediaplayer.play()
Item{
height: 100
anchors{
bottom: parent.bottom
left: parent.left
right: parent.right
leftMargin: 10
rightMargin: 10
bottomMargin: 10
}
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{
id:slider
size:parent.width-20
y:20
anchors.horizontalCenter: parent.horizontalCenter
enableTip:false
onPressed: {
mediaplayer.autoSeek = false
}
onReleased: {
mediaplayer.seek(value*mediaplayer.duration/slider.maxValue)
mediaplayer.autoSeek = true
}
}
FluText{
id:start_time
anchors{
top: slider.bottom
topMargin: 10
left: slider.left
}
text: formatDuration(slider.value*mediaplayer.duration/slider.maxValue)
}
FluText{
id:end_time
anchors{
top: slider.bottom
right: slider.right
topMargin: 10
}
text: formatDuration(mediaplayer.duration)
}
FluIconButton{
iconSize: 15
iconSource: mediaplayer.playbackState === Audio.PlayingState ? FluentIcons.Pause : FluentIcons.Play
anchors{
horizontalCenter: parent.horizontalCenter
bottom: parent.bottom
bottomMargin: 10
}
onClicked: {
if(mediaplayer.playbackState === Audio.PlayingState){
mediaplayer.pause()
}else{
mediaplayer.play()
}
}
}
}
function formatDuration(duration) {
const seconds = Math.floor(duration / 1000);
const hours = Math.floor(seconds / 3600);
const minutes = Math.floor((seconds % 3600) / 60);
const remainingSeconds = seconds % 60;
return `${pad(hours)}:${pad(minutes)}:${pad(remainingSeconds)}`;
}
function pad(value) {
return value.toString().padStart(2, '0');
}
}

2
src/controls/FluMenu.qml
View File

@ -18,7 +18,7 @@ Menu {
radius: 5
layer.enabled: true
layer.effect: GaussianBlur {
radius: 8
radius: 5
samples: 16
}
}

49
src/controls/FluSlider.qml
View File

@ -6,12 +6,15 @@ Item{
id:root
property int lineSize: 5
property int lineSize: 4
property int size: 180
property int dotSize: 28
property int dotSize: 24
property int value: 50
property int maxValue: 100
enum Orientation {
Horizontal,
Vertical
@ -24,20 +27,15 @@ Item{
property bool isHorizontal: orientation === FluSlider.Horizontal
property bool enableTip : true
signal pressed
signal released
rotation: isHorizontal ? 0 : 180
Component.onCompleted: {
if(isHorizontal){
dot.x =value/100*control.width - dotSize/2
root.value = Qt.binding(function(){
return (dot.x+dotSize/2)/control.width*100
})
}else{
dot.y =value/100*control.height - dotSize/2
root.value = Qt.binding(function(){
return (dot.y+dotSize/2)/control.height*100
})
}
seek(0)
}
FluRectangle {
@ -51,8 +49,8 @@ Item{
Rectangle{
id:rect
radius: 3
width: isHorizontal ? control.width*(value/100) : control.width
height: isHorizontal ? control.height : control.height*(value/100)
width: isHorizontal ? control.width*(value/maxValue) : control.width
height: isHorizontal ? control.height : control.height*(value/maxValue)
color:FluTheme.isDark ? FluTheme.primaryColor.lighter :FluTheme.primaryColor.dark
}
}
@ -94,11 +92,15 @@ Item{
maximumY: isHorizontal ? 0 : (control.height - dotSize/2)
}
onPressed: {
tool_tip.visible = true
if(enableTip){
tool_tip.visible = true
}
root.pressed()
}
onReleased: {
tool_tip.visible = false
root.released()
}
}
@ -109,5 +111,20 @@ Item{
}
}
function seek(position){
console.debug(position)
if(isHorizontal){
dot.x =position/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
root.value = Qt.binding(function(){
return (dot.y+dotSize/2)/control.height*maxValue
})
}
}
}