[vlc-commits] [Git][videolan/vlc][master] 2 commits: qml: refactor LoaderFade.qml usage in Player.qml

Steve Lhomme (@robUx4) gitlab at videolan.org
Tue Dec 19 06:27:09 UTC 2023



Steve Lhomme pushed to branch master at VideoLAN / VLC


Commits:
27ba392e by Fatih Uzunoglu at 2023-12-18T14:27:26+02:00
qml: refactor LoaderFade.qml usage in Player.qml

- Do not use Loader in LoaderFade.
- Simplify the code.
- QML does not allow multiple inheritance.

- - - - -
51c2ee18 by Fatih Uzunoglu at 2023-12-18T14:28:42+02:00
qml: rename LoaderFade.qml to FadeControllerStateGroup.qml and move to util

- - - - -


4 changed files:

- modules/gui/qt/Makefile.am
- modules/gui/qt/player/qml/Player.qml
- modules/gui/qt/widgets/qml/LoaderFade.qml → modules/gui/qt/util/qml/FadeControllerStateGroup.qml
- modules/gui/qt/vlc.qrc


Changes:

=====================================
modules/gui/qt/Makefile.am
=====================================
@@ -999,6 +999,7 @@ libqt_plugin_la_QML = \
 	util/qml/MLContextMenu.qml \
 	util/qml/ListViewRev15.qml \
 	util/qml/ListViewRev11.qml \
+	util/qml/FadeControllerStateGroup.qml \
 	widgets/qml/ActionButtonOverlay.qml \
 	widgets/qml/ActionButtonPrimary.qml \
 	widgets/qml/BannerTabButton.qml \
@@ -1037,7 +1038,6 @@ libqt_plugin_la_QML = \
 	widgets/qml/TableViewDelegate.qml \
 	widgets/qml/ListCoverShadow.qml \
 	widgets/qml/ListLabel.qml \
-	widgets/qml/LoaderFade.qml \
 	widgets/qml/LocalTabBar.qml \
 	widgets/qml/MediaCover.qml \
 	widgets/qml/SubtitleLabel.qml \


=====================================
modules/gui/qt/player/qml/Player.qml
=====================================
@@ -30,6 +30,7 @@ import "qrc:///widgets/" as Widgets
 import "qrc:///playlist/" as PL
 import "qrc:///util/Helpers.js" as Helpers
 import "qrc:///dialogs/" as DG
+import "qrc:///util/" as Util
 
 FocusScope {
     id: rootPlayer
@@ -38,7 +39,7 @@ FocusScope {
 
     property bool hasEmbededVideo: MainCtx.hasEmbededVideo
 
-    readonly property int positionSliderY: controlBarView.y + controlBarView.sliderY
+    readonly property int positionSliderY: controlBar.y + controlBar.sliderY
 
     readonly property string coverSource: {
         if (MainPlaylistController.currentItem.artwork &&
@@ -88,7 +89,7 @@ FocusScope {
         rootPlayer.Navigation.defaultKeyAction(event)
 
         //unhandled keys are forwarded as hotkeys
-        if (!event.accepted || controlBarView.state !== "visible")
+        if (!event.accepted || controlBar.state !== "visible")
             MainCtx.sendHotkey(event.key, event.modifiers);
     }
 
@@ -133,7 +134,7 @@ FocusScope {
     // Private
 
     function _onNavigationCancel() {
-        if (rootPlayer.hasEmbededVideo && controlBarView.state === "visible") {
+        if (rootPlayer.hasEmbededVideo && controlBar.state === "visible") {
             toolbarAutoHide.setVisibleControlBar(false)
         } else {
             if (MainCtx.hasEmbededVideo && !MainCtx.canShowVideoPIP) {
@@ -183,8 +184,8 @@ FocusScope {
         visible: rootPlayer.hasEmbededVideo
         enabled: rootPlayer.hasEmbededVideo
         anchors.fill: parent
-        anchors.topMargin: rootPlayer._controlsUnderVideo ? topcontrolView.height : 0
-        anchors.bottomMargin: rootPlayer._controlsUnderVideo ? controlBarView.height : 0
+        anchors.topMargin: rootPlayer._controlsUnderVideo ? topBar.height : 0
+        anchors.bottomMargin: rootPlayer._controlsUnderVideo ? controlBar.height : 0
 
         onMouseMoved: {
             //short interval for mouse events
@@ -227,66 +228,30 @@ FocusScope {
         }
     }
 
-    Component {
-        id: acrylicBackground
-
-        Widgets.AcrylicBackground {
-            width: rootPlayer.width
-
-            visible: (rootPlayer._controlsUnderVideo || topcontrolView.resumeVisible)
-
-            opacity: (MainCtx.intfMainWindow.visibility === Window.FullScreen) ? MainCtx.pinOpacity
-                                                                               : 1.0
-
-            tintColor: windowTheme.bg.primary
-        }
-    }
-
-    /* top control bar background */
-    Widgets.LoaderFade {
-        width: parent.width
-
-        state: topcontrolView.state
-
-        height: item.height
-
-        sourceComponent: {
-            if (MainCtx.pinVideoControls)
-                return acrylicBackground
-            else
-                return topcontrolViewBackground
-        }
-
-        onItemChanged: {
-            if (rootPlayer._controlsUnderVideo)
-                item.height = Qt.binding(function () { return topcontrolView.height + topcontrolView.anchors.topMargin; })
-        }
-
-        Component {
-            id: topcontrolViewBackground
+    Rectangle {
+        anchors.top: parent.top
+        anchors.left: parent.left
+        anchors.right: parent.right
 
-            Rectangle {
-                width: rootPlayer.width
-                height: VLCStyle.dp(206, VLCStyle.scale)
+        implicitHeight: VLCStyle.dp(206, VLCStyle.scale)
 
-                visible: rootPlayer.hasEmbededVideo
+        opacity: topBar.opacity
+        visible: !topBarAcrylicBg.visible && MainCtx.hasEmbededVideo
 
-                gradient: Gradient {
-                    GradientStop { position: 0; color: Qt.rgba(0, 0, 0, .8) }
-                    GradientStop { position: 1; color: "transparent" }
-                }
-            }
+        gradient: Gradient {
+            GradientStop { position: 0; color: Qt.rgba(0, 0, 0, .8) }
+            GradientStop { position: 1; color: "transparent" }
         }
     }
 
     Rectangle {
-        anchors.bottom: controlBarView.bottom
-        anchors.left: controlBarView.left
-        anchors.right: controlBarView.right
+        anchors.bottom: controlBar.bottom
+        anchors.left: controlBar.left
+        anchors.right: controlBar.right
 
         implicitHeight: VLCStyle.dp(206, VLCStyle.scale)
 
-        opacity: controlBarView.opacity
+        opacity: controlBar.opacity
 
         gradient: Gradient {
             GradientStop { position: 0; color: "transparent" }
@@ -294,73 +259,82 @@ FocusScope {
             GradientStop { position: 1; color: "black" }
         }
 
-        visible: (controlBarView.item ? !controlBarView.item.background.visible : true)
+        visible: !(controlBar.background && controlBar.background.visible)
     }
 
-    Widgets.LoaderFade {
-        id: topcontrolView
+    TopBar {
+        id: topBar
 
-        property bool resumeVisible: (item) ? item.resumeVisible : false
-
-        anchors {
-            top: parent.top
-            left: parent.left
-            right: parent.right
-        }
+        anchors.top: parent.top
+        anchors.left: parent.left
+        anchors.right: parent.right
 
         z: 1
 
-        sourceComponent: TopBar {
-            id: topbar
+        topMargin: VLCStyle.applicationVerticalMargin
+        sideMargin: VLCStyle.applicationHorizontalMargin
+
+        textWidth: (MainCtx.playlistVisible) ? rootPlayer.width - playlistpopup.width
+                                             : rootPlayer.width
 
-            width: topcontrolView.width
-            height: topbar.implicitHeight
+        // NOTE: With pinned controls, the top controls are hidden when switching to
+        //       fullScreen. Except when resume is visible
+        visible: (MainCtx.pinVideoControls === false
+                  ||
+                  MainCtx.intfMainWindow.visibility !== Window.FullScreen
+                  ||
+                  resumeVisible)
 
-            topMargin: VLCStyle.applicationVerticalMargin
-            sideMargin: VLCStyle.applicationHorizontalMargin
+        focus: true
+        title: MainPlaylistController.currentItem.title
 
-            textWidth: (MainCtx.playlistVisible) ? rootPlayer.width - playlistpopup.width
-                                                 : rootPlayer.width
+        pinControls: MainCtx.pinVideoControls
 
-            // NOTE: With pinned controls, the top controls are hidden when switching to
-            //       fullScreen. Except when resume is visible
-            visible: (MainCtx.pinVideoControls === false
-                      ||
-                      MainCtx.intfMainWindow.visibility !== Window.FullScreen
-                      ||
-                      resumeVisible)
+        showCSD: MainCtx.clientSideDecoration && (MainCtx.intfMainWindow.visibility !== Window.FullScreen)
+        showToolbar: MainCtx.hasToolbarMenu && (MainCtx.intfMainWindow.visibility !== Window.FullScreen)
 
-            focus: true
-            title: MainPlaylistController.currentItem.title
+        Navigation.parentItem: rootPlayer
+        Navigation.downItem: {
+            if (playlistVisibility.isPlaylistVisible)
+                return playlistpopup
+            if (audioControls.visible)
+                return audioControls
+            if (Player.isInteractive)
+                return toggleControlBarButton
+            return controlBar
+        }
 
-            pinControls: MainCtx.pinVideoControls
+        onTogglePlaylistVisibility: playlistVisibility.togglePlaylistVisibility()
 
-            showCSD: MainCtx.clientSideDecoration && (MainCtx.intfMainWindow.visibility !== Window.FullScreen)
-            showToolbar: MainCtx.hasToolbarMenu && (MainCtx.intfMainWindow.visibility !== Window.FullScreen)
+        onRequestLockUnlockAutoHide: {
+            rootPlayer.lockUnlockAutoHide(lock)
+        }
 
-            Navigation.parentItem: rootPlayer
-            Navigation.downItem: {
-                if (playlistVisibility.isPlaylistVisible)
-                    return playlistpopup
-                if (audioControls.visible)
-                    return audioControls
-                if (Player.isInteractive)
-                    return toggleControlBarButton
-                return controlBarView
+        onBackRequested: {
+            if (MainCtx.hasEmbededVideo && !MainCtx.canShowVideoPIP) {
+               MainPlaylistController.stop()
             }
+            History.previous()
+        }
+
+        Util.FadeControllerStateGroup {
+            target: topBar
+        }
 
-            onTogglePlaylistVisibility: playlistVisibility.togglePlaylistVisibility()
+        // TODO: Make TopBar a Control and use background
+        Widgets.AcrylicBackground {
+            id: topBarAcrylicBg
 
-            onRequestLockUnlockAutoHide: {
-                rootPlayer.lockUnlockAutoHide(lock)
-            }
+            z: -1
 
-            onBackRequested: {
-                if (MainCtx.hasEmbededVideo && !MainCtx.canShowVideoPIP) {
-                   MainPlaylistController.stop()
-                }
-                History.previous()
-            }
+            anchors.fill: parent
+
+            opacity: (MainCtx.intfMainWindow.visibility === Window.FullScreen) ? MainCtx.pinOpacity
+                                                                               : 1.0
+
+            tintColor: windowTheme.bg.primary
+
+            visible: MainCtx.pinVideoControls
         }
     }
 
@@ -375,8 +349,8 @@ FocusScope {
         anchors {
             left: parent.left
             right: parent.right
-            top: topcontrolView.bottom
-            bottom: controlBarView.top
+            top: topBar.bottom
+            bottom: controlBar.top
             topMargin: VLCStyle.margin_xsmall
             bottomMargin: VLCStyle.margin_xsmall
         }
@@ -525,8 +499,8 @@ FocusScope {
                 focus: visible
                 spacing: VLCStyle.margin_xxsmall
                 Navigation.parentItem: rootPlayer
-                Navigation.upItem: topcontrolView
-                Navigation.downItem: Player.isInteractive ? toggleControlBarButton : controlBarView
+                Navigation.upItem: topBar
+                Navigation.downItem: Player.isInteractive ? toggleControlBarButton : controlBar
 
                 property bool componentCompleted: false
 
@@ -593,7 +567,7 @@ FocusScope {
 
         anchors {
             // NOTE: When the controls are pinned we display the playqueue under the topBar.
-            top: (rootPlayer._controlsUnderVideo) ? topcontrolView.bottom
+            top: (rootPlayer._controlsUnderVideo) ? topBar.bottom
                                                   : parent.top
 
             right: parent.right
@@ -635,12 +609,12 @@ FocusScope {
                         return VLCStyle.margin_normal
                     else
                         // NOTE: We increase the padding accordingly to avoid overlapping the TopBar.
-                        return topcontrolView.item.reservedHeight
+                        return topBar.reservedHeight
                 }
 
                 Navigation.parentItem: rootPlayer
-                Navigation.upItem: topcontrolView
-                Navigation.downItem: Player.isInteractive ? toggleControlBarButton : controlBarView
+                Navigation.upItem: topBar
+                Navigation.downItem: Player.isInteractive ? toggleControlBarButton : controlBar
                 Navigation.leftAction: closePlaylist
                 Navigation.cancelAction: closePlaylist
 
@@ -649,7 +623,7 @@ FocusScope {
                     if (audioControls.visible)
                         audioControls.forceActiveFocus()
                     else
-                        controlBarView.forceActiveFocus()
+                        controlBar.forceActiveFocus()
                 }
 
 
@@ -707,11 +681,11 @@ FocusScope {
         bgContent: rootPlayer
 
         anchors {
-            bottom: controlBarView.item.visible ? controlBarView.top : rootPlayer.bottom
+            bottom: controlBar.visible ? controlBar.top : rootPlayer.bottom
             left: parent.left
             right: parent.right
 
-            bottomMargin: (rootPlayer._controlsUnderVideo || !controlBarView.item.visible)
+            bottomMargin: (rootPlayer._controlsUnderVideo || !controlBar.visible)
                           ? 0 : - VLCStyle.margin_large
         }
     }
@@ -736,28 +710,26 @@ FocusScope {
                  && rootPlayer.hasEmbededVideo
                  && !(MainCtx.pinVideoControls && !Player.fullscreen)
                  && (toggleControlBarButtonAutoHide.running === true
-                     || controlBarView.state !== "hidden" || toggleControlBarButton.hovered)
+                     || controlBar.state !== "hidden" || toggleControlBarButton.hovered)
         focus: true
         anchors {
-            bottom: controlBarView.state === "hidden" ? parent.bottom : controlBarView.top
+            bottom: controlBar.state === "hidden" ? parent.bottom : controlBar.top
             horizontalCenter: parent.horizontalCenter
         }
         iconSize: VLCStyle.icon_large
-        iconTxt: controlBarView.state === "hidden" ? VLCIcons.expand_inverted : VLCIcons.expand
+        iconTxt: controlBar.state === "hidden" ? VLCIcons.expand_inverted : VLCIcons.expand
 
         Navigation.parentItem: rootPlayer
-        Navigation.upItem: playlistVisibility.isPlaylistVisible ? playlistpopup : (audioControls.visible ? audioControls : topcontrolView)
-        Navigation.downItem: controlBarView
+        Navigation.upItem: playlistVisibility.isPlaylistVisible ? playlistpopup : (audioControls.visible ? audioControls : topBar)
+        Navigation.downItem: controlBar
 
         onClicked: {
             toolbarAutoHide.toggleForceVisible();
         }
     }
 
-    Widgets.LoaderFade {
-        id: controlBarView
-
-        readonly property int sliderY: item.sliderY
+    ControlBar {
+        id: controlBar
 
         anchors {
             bottom: parent.bottom
@@ -765,57 +737,57 @@ FocusScope {
             right: parent.right
         }
 
-        focus: true
+        hoverEnabled: true
 
-        onStateChanged: {
-            if (state === "visible" && item)
-                item.showChapterMarks()
-        }
+        focus: true
 
-        sourceComponent: ControlBar {
-            hoverEnabled: true
+        rightPadding: VLCStyle.applicationHorizontalMargin
+        leftPadding: VLCStyle.applicationHorizontalMargin
+        bottomPadding: VLCStyle.applicationVerticalMargin + VLCStyle.margin_xsmall
 
-            focus: true
+        textPosition: (MainCtx.pinVideoControls)
+                      ? ControlBar.TimeTextPosition.LeftRightSlider
+                      : ControlBar.TimeTextPosition.AboveSlider
 
-            rightPadding: VLCStyle.applicationHorizontalMargin
-            leftPadding: VLCStyle.applicationHorizontalMargin
-            bottomPadding: VLCStyle.applicationVerticalMargin + VLCStyle.margin_xsmall
+        // hide right text so that it won't overlap with playlist
+        showRemainingTime: (textPosition !== ControlBar.TimeTextPosition.AboveSlider)
+                           || !playlistVisibility.isPlaylistVisible
 
-            textPosition: (MainCtx.pinVideoControls)
-                          ? ControlBar.TimeTextPosition.LeftRightSlider
-                          : ControlBar.TimeTextPosition.AboveSlider
+        onStateChanged: {
+            if (state === "visible")
+                showChapterMarks()
+        }
 
-            // hide right text so that it won't overlap with playlist
-            showRemainingTime: (textPosition !== ControlBar.TimeTextPosition.AboveSlider)
-                               || !playlistVisibility.isPlaylistVisible
+        Navigation.parentItem: rootPlayer
+        Navigation.upItem: {
+            if (playlistVisibility.isPlaylistVisible)
+                return playlistpopup
+            if (Player.isInteractive)
+                return toggleControlBarButton
+            if (audioControls.visible)
+                return audioControls
+            return topBar
+        }
 
-            Navigation.parentItem: rootPlayer
-            Navigation.upItem: {
-                if (playlistVisibility.isPlaylistVisible)
-                    return playlistpopup
-                if (Player.isInteractive)
-                    return toggleControlBarButton
-                if (audioControls.visible)
-                    return audioControls
-                return topcontrolView
-            }
+        onRequestLockUnlockAutoHide: rootPlayer.lockUnlockAutoHide(lock)
 
-            onRequestLockUnlockAutoHide: rootPlayer.lockUnlockAutoHide(lock)
+        identifier: (Player.hasVideoOutput) ? PlayerControlbarModel.Videoplayer
+                                            : PlayerControlbarModel.Audioplayer
 
-            identifier: (Player.hasVideoOutput) ? PlayerControlbarModel.Videoplayer
-                                                : PlayerControlbarModel.Audioplayer
+        onHoveredChanged: rootPlayer.lockUnlockAutoHide(hovered)
 
-            onHoveredChanged: rootPlayer.lockUnlockAutoHide(hovered)
+        background: Rectangle {
+            id: controlBarBackground
 
-            background: Rectangle {
-                id: controlBarBackground
+            visible: !MainCtx.hasEmbededVideo || MainCtx.pinVideoControls
 
-                visible: !MainCtx.hasEmbededVideo || MainCtx.pinVideoControls
+            opacity: MainCtx.pinVideoControls ? MainCtx.pinOpacity : 0.7
 
-                opacity: MainCtx.pinVideoControls ? MainCtx.pinOpacity : 0.7
+            color: windowTheme.bg.primary
+        }
 
-                color: windowTheme.bg.primary
-            }
+        Util.FadeControllerStateGroup {
+            target: controlBar
         }
     }
 
@@ -831,10 +803,10 @@ FocusScope {
         function setVisibleControlBar(visible) {
             if (visible)
             {
-                controlBarView.state = "visible"
-                topcontrolView.state = "visible"
-                if (!controlBarView.focus && !topcontrolView.focus)
-                    controlBarView.forceActiveFocus()
+                controlBar.state = "visible"
+                topBar.state = "visible"
+                if (!controlBar.focus && !topBar.focus)
+                    controlBar.forceActiveFocus()
 
                 videoSurface.cursorShape = Qt.ArrowCursor
             }
@@ -842,8 +814,8 @@ FocusScope {
             {
                 if (!rootPlayer._autoHide)
                     return;
-                controlBarView.state = "hidden"
-                topcontrolView.state = "hidden"
+                controlBar.state = "hidden"
+                topBar.state = "hidden"
                 videoSurface.forceActiveFocus()
                 videoSurface.cursorShape = Qt.BlankCursor
             }
@@ -856,7 +828,7 @@ FocusScope {
         }
 
         function toggleForceVisible() {
-            setVisibleControlBar(controlBarView.state !== "visible")
+            setVisibleControlBar(controlBar.state !== "visible")
             toolbarAutoHide.stop()
         }
 
@@ -867,8 +839,8 @@ FocusScope {
     KeyEventFilter {
         id: filter
         target: MainCtx.intfMainWindow
-        enabled: controlBarView.state === "visible"
-                 && (controlBarView.focus || topcontrolView.focus)
+        enabled: controlBar.state === "visible"
+                 && (controlBar.focus || topBar.focus)
         Keys.onPressed: toolbarAutoHide.setVisible(5000)
     }
 


=====================================
modules/gui/qt/widgets/qml/LoaderFade.qml → modules/gui/qt/util/qml/FadeControllerStateGroup.qml
=====================================
@@ -22,22 +22,19 @@ import QtQuick 2.12
 
 import "qrc:///style/"
 
-Loader {
+StateGroup {
     id: root
 
-    // Settings
+    state: target ? target.state : ""
 
-    // NOTE: We could consider applying 'layer.enabled' during transitions since it removes overlap
-    //       artifacts when applying opacity.
-
-    // States
+    property Item target
 
     states: [
         State {
             name: "hidden"
 
             PropertyChanges {
-                target: root
+                target: root.target
 
                 visible: false
                 opacity: 0.0
@@ -47,7 +44,7 @@ Loader {
             name: "visible"
 
             PropertyChanges {
-                target: root
+                target: root.target
 
                 visible: true
                 opacity: 1.0
@@ -61,17 +58,13 @@ Loader {
 
             SequentialAnimation {
                 NumberAnimation {
-                    target: root
-
                     property: "opacity"
 
                     duration: VLCStyle.duration_long
                     easing.type: Easing.InSine
                 }
 
-                PropertyAction{
-                    target: root
-
+                PropertyAction {
                     property: "visible"
                 }
             }
@@ -81,14 +74,10 @@ Loader {
 
             SequentialAnimation {
                 PropertyAction {
-                    target: root
-
                     property: "visible"
                 }
 
                 NumberAnimation {
-                    target: root
-
                     property: "opacity"
 
                     duration: VLCStyle.duration_long


=====================================
modules/gui/qt/vlc.qrc
=====================================
@@ -81,6 +81,7 @@
         <file alias="ListViewRev11.qml">util/qml/ListViewRev11.qml</file>
         <file alias="FSM.qml">util/qml/FSM.qml</file>
         <file alias="FSMState.qml">util/qml/FSMState.qml</file>
+        <file alias="FadeControllerStateGroup.qml">util/qml/FadeControllerStateGroup.qml</file>
     </qresource>
     <qresource prefix="/sd">
         <file alias="capture-card.svg">pixmaps/sd/capture-card.svg</file>
@@ -171,7 +172,6 @@
         <file alias="TrackDelayButton.qml">widgets/qml/TrackDelayButton.qml</file>
         <file alias="CurrentIndicator.qml">widgets/qml/CurrentIndicator.qml</file>
         <file alias="GridItem.qml">widgets/qml/GridItem.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>



View it on GitLab: https://code.videolan.org/videolan/vlc/-/compare/4cd7d490402b1e733f41a5b1b593077a3bc39ab1...51c2ee184ee19e9dd72b9e138375024d48d8be59

-- 
View it on GitLab: https://code.videolan.org/videolan/vlc/-/compare/4cd7d490402b1e733f41a5b1b593077a3bc39ab1...51c2ee184ee19e9dd72b9e138375024d48d8be59
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