[vlc-commits] [Git][videolan/vlc][master] 2 commits: qml/widgets: Create LoaderFade

Jean-Baptiste Kempf (@jbk) gitlab at videolan.org
Sun Mar 5 19:12:40 UTC 2023



Jean-Baptiste Kempf pushed to branch master at VideoLAN / VLC


Commits:
081a6c0e by Benjamin Arnaud at 2023-03-05T18:50:48+00:00
qml/widgets: Create LoaderFade

- - - - -
d4d9ccb5 by Benjamin Arnaud at 2023-03-05T18:50:48+00:00
qml/Player: Fade to hide instead of scrolling

- - - - -


4 changed files:

- modules/gui/qt/Makefile.am
- modules/gui/qt/player/qml/Player.qml
- modules/gui/qt/vlc.qrc
- + modules/gui/qt/widgets/qml/LoaderFade.qml


Changes:

=====================================
modules/gui/qt/Makefile.am
=====================================
@@ -1011,6 +1011,7 @@ libqt_plugin_la_QML = \
 	gui/qt/widgets/qml/ListCoverShadow.qml \
 	gui/qt/widgets/qml/ListItem.qml \
 	gui/qt/widgets/qml/ListLabel.qml \
+	gui/qt/widgets/qml/LoaderFade.qml \
 	gui/qt/widgets/qml/LocalTabBar.qml \
 	gui/qt/widgets/qml/MediaCover.qml \
 	gui/qt/widgets/qml/SubtitleLabel.qml \


=====================================
modules/gui/qt/player/qml/Player.qml
=====================================
@@ -239,23 +239,22 @@ FocusScope {
     }
 
     /* top control bar background */
-    Widgets.DrawerExt {
-        edge: Widgets.DrawerExt.Edges.Top
+    Widgets.LoaderFade {
         state: topcontrolView.state
         width: parent.width
         visible: rootPlayer.hasEmbededVideo || rootPlayer.pinVideoControls
-        height: contentItem.height
+        height: item.height
 
-        component: {
+        sourceComponent: {
             if (rootPlayer.pinVideoControls)
                 return acrylicBackground
             else
                 return topcontrolViewBackground
         }
 
-        onContentItemChanged: {
+        onItemChanged: {
             if (rootPlayer.pinVideoControls)
-                contentItem.height = Qt.binding(function () { return topcontrolView.height + topcontrolView.anchors.topMargin; })
+                item.height = Qt.binding(function () { return topcontrolView.height + topcontrolView.anchors.topMargin; })
         }
 
         Component {
@@ -273,19 +272,21 @@ FocusScope {
     }
 
     /* bottom control bar background */
-    Widgets.DrawerExt {
+    Widgets.LoaderFade {
         anchors.bottom: controlBarView.bottom
         anchors.left: controlBarView.left
         anchors.right: controlBarView.right
-        height: contentItem.height
-        edge: Widgets.DrawerExt.Edges.Bottom
+
+        height: item.height
+
         state: controlBarView.state
-        component: rootPlayer.pinVideoControls
-                   ? backgroundForPinnedControls
-                   : (rootPlayer.hasEmbededVideo ? forVideoMedia : forMusicMedia)
-        onContentItemChanged: {
+
+        sourceComponent: rootPlayer.pinVideoControls
+                         ? backgroundForPinnedControls
+                         : (rootPlayer.hasEmbededVideo ? forVideoMedia : forMusicMedia)
+        onItemChanged: {
             if (rootPlayer.pinVideoControls)
-                contentItem.height = Qt.binding(function () { return rootPlayer.height - rootPlayer.positionSliderY; })
+                item.height = Qt.binding(function () { return rootPlayer.height - rootPlayer.positionSliderY; })
         }
 
         Component {
@@ -314,7 +315,7 @@ FocusScope {
         }
     }
 
-    Widgets.DrawerExt{
+    Widgets.LoaderFade{
         id: topcontrolView
 
         anchors {
@@ -324,10 +325,10 @@ FocusScope {
         }
 
         z: 1
-        edge: Widgets.DrawerExt.Edges.Top
+
         state: "visible"
 
-        component: TopBar {
+        sourceComponent: TopBar {
             id: topbar
 
             width: topcontrolView.width
@@ -558,7 +559,7 @@ FocusScope {
                         return VLCStyle.margin_normal
                     else
                         // NOTE: We increase the padding accordingly to avoid overlapping the TopBar.
-                        return topcontrolView.contentItem.reservedHeight
+                        return topcontrolView.item.reservedHeight
                 }
 
                 Navigation.parentItem: rootPlayer
@@ -602,33 +603,34 @@ FocusScope {
         bgContent: rootPlayer
 
         anchors {
-            bottom: controlBarView.contentItem.visible ? controlBarView.top : rootPlayer.bottom
+            bottom: controlBarView.item.visible ? controlBarView.top : rootPlayer.bottom
             left: parent.left
             right: parent.right
-            bottomMargin: rootPlayer.pinVideoControls || !controlBarView.contentItem.visible ? 0 : - VLCStyle.margin_large
+            bottomMargin: rootPlayer.pinVideoControls || !controlBarView.item.visible ? 0 : - VLCStyle.margin_large
         }
     }
 
-    Widgets.DrawerExt {
+    Widgets.LoaderFade {
         id: controlBarView
 
-        readonly property int sliderY: rootPlayer.pinVideoControls ? contentItem.sliderY - VLCStyle.margin_xxxsmall : contentItem.sliderY
+        readonly property int sliderY: rootPlayer.pinVideoControls ? item.sliderY - VLCStyle.margin_xxxsmall : item.sliderY
 
         anchors {
             bottom: parent.bottom
             left: parent.left
             right: parent.right
         }
+
         focus: true
+
         state: "visible"
-        edge: Widgets.DrawerExt.Edges.Bottom
 
         onStateChanged: {
             if (state === "visible")
-                contentItem.showChapterMarks()
+                item.showChapterMarks()
         }
 
-        component: MouseArea {
+        sourceComponent: MouseArea {
             id: controllerMouseArea
 
             readonly property alias sliderY: controllerId.sliderY


=====================================
modules/gui/qt/vlc.qrc
=====================================
@@ -168,6 +168,7 @@
         <file alias="CurrentIndicator.qml">widgets/qml/CurrentIndicator.qml</file>
         <file alias="GridItem.qml">widgets/qml/GridItem.qml</file>
         <file alias="ListItem.qml">widgets/qml/ListItem.qml</file>
+        <file alias="LoaderFade.qml">widgets/qml/LoaderFade.qml</file>
         <file alias="DrawerExt.qml">widgets/qml/DrawerExt.qml</file>
         <file alias="KeyNavigableListView.qml">widgets/qml/KeyNavigableListView.qml</file>
         <file alias="KeyNavigableTableView.qml">widgets/qml/KeyNavigableTableView.qml</file>


=====================================
modules/gui/qt/widgets/qml/LoaderFade.qml
=====================================
@@ -0,0 +1,100 @@
+/*****************************************************************************
+ * Copyright (C) 2019 VLC authors and VideoLAN
+ *
+ * Authors: Benjamin Arnaud <bunjee at omega.gg>
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 2 of the License, or
+ * ( at your option ) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program; if not, write to the Free Software
+ * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston MA 02110-1301, USA.
+ *****************************************************************************/
+
+import QtQuick 2.11
+
+import "qrc:///style/"
+
+Loader {
+    id: root
+
+    // Settings
+
+    // NOTE: We could consider applying 'layer.enabled' during transitions since it removes overlap
+    //       artifacts when applying opacity.
+
+    // States
+
+    states: [
+        State {
+            name: "hidden"
+
+            PropertyChanges {
+                target: root
+
+                visible: false
+                opacity: 0.0
+            }
+        },
+        State {
+            name: "visible"
+
+            PropertyChanges {
+                target: root
+
+                visible: true
+                opacity: 1.0
+            }
+        }
+    ]
+
+    transitions: [
+        Transition {
+            to: "hidden"
+
+            SequentialAnimation {
+                NumberAnimation {
+                    target: root
+
+                    property: "opacity"
+
+                    duration: VLCStyle.duration_long
+                    easing.type: Easing.InSine
+                }
+
+                PropertyAction{
+                    target: root
+
+                    property: "visible"
+                }
+            }
+        },
+        Transition {
+            to: "visible"
+
+            SequentialAnimation {
+                PropertyAction {
+                    target: root
+
+                    property: "visible"
+                }
+
+                NumberAnimation {
+                    target: root
+
+                    property: "opacity"
+
+                    duration: VLCStyle.duration_long
+                    easing.type: Easing.OutSine
+                }
+            }
+        }
+    ]
+}



View it on GitLab: https://code.videolan.org/videolan/vlc/-/compare/f61680a096e4b4ab0bfbeb1f193684ab08f5c13f...d4d9ccb5849867797d4edc222f943d156231b748

-- 
View it on GitLab: https://code.videolan.org/videolan/vlc/-/compare/f61680a096e4b4ab0bfbeb1f193684ab08f5c13f...d4d9ccb5849867797d4edc222f943d156231b748
You're receiving this email because of your account on code.videolan.org.


VideoLAN code repository instance


More information about the vlc-commits mailing list