update

example/Info.plist

@@ -1,28 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
-<plist version="1.0">
-<dict>
-	<key>CFBundleExecutable</key>
-	<string>example</string>
-	<key>CFBundleIconFile</key>
-	<string></string>
-	<key>CFBundleIdentifier</key>
-	<string>com.yourcompany.example</string>
-	<key>CFBundlePackageType</key>
-	<string>APPL</string>
-	<key>CFBundleSignature</key>
-	<string>????</string>
-	<key>LSMinimumSystemVersion</key>
-	<string>10.14</string>
-	<key>NOTE</key>
-	<string>This file was generated by Qt/QMake.</string>
-	<key>NSPrincipalClass</key>
-	<string>NSApplication</string>
-	<key>NSSupportsAutomaticGraphicsSwitching</key>
-	<true/>
-	<key>CFBundleDevelopmentRegion</key>
-	<string>en</string>
-	<key>CFBundleAllowMixedLocalizations</key>
-	<true/>
-</dict>
-</plist>

example/T_MediaPlayer.qml

@@ -9,6 +9,14 @@ FluScrollablePage{
 
     title:"MediaPlayer"
 
+    onVisibleChanged: {
+        if(visible){
+            player.play()
+        }else{
+            player.pause()
+        }
+    }
+
     FluArea{
         width: parent.width
         height: 320
@@ -21,6 +29,7 @@ FluScrollablePage{
             }
 
             FluMediaPlayer{
+                id:player
                 source:"http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"
             }
 

example/T_Typography.qml

@@ -8,6 +8,10 @@ FluContentPage {
     title: "Typography"
     property int textSize: 13
 
+    Component.onCompleted: {
+        slider.seek(31)
+    }
+
     ScrollView{
         clip: true
         width: parent.width
@@ -68,17 +72,17 @@ FluContentPage {
 
 
     FluSlider{
+        id:slider
         orientation:FluSlider.Vertical
         anchors{
             right: parent.right
-            rightMargin: 30
+            rightMargin: 45
             top: parent.top
             topMargin: 30
         }
         onValueChanged:{
             textSize = value/100*16+8
         }
-        value: 31
     }
 
 }

example/example.pro

@@ -1,6 +1,5 @@
 QT += quick concurrent network multimedia
 CONFIG += c++11
-CONFIG -= app_bundle
 DEFINES += QT_DEPRECATED_WARNINGS QT_NO_WARNING_OUTPUT
 
 SOURCES += \
@@ -8,9 +7,12 @@ SOURCES += \
         main.cpp
 
 RESOURCES += qml.qrc
+
 RC_ICONS = favicon.ico
+
 QML_IMPORT_PATH =
 QML_DESIGNER_IMPORT_PATH =
+
 CONFIG(debug,debug|release) {
     DESTDIR = $$absolute_path($${_PRO_FILE_PWD_}/../bin/debug)
 } else {

src/controls/FluMediaPlayer.qml

@@ -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
 
-
+    MouseArea{
-    Rectangle{
         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()
+    }
 
 }
 

src/controls/FluMenu.qml

@@ -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
         }

src/controls/FluSlider.qml

@@ -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
     }
-
+    property int size: 180
-    height: control.height
+    property int dotSize: 24
-    width: control.width
+    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
             })