[vlc-commits] [Git][videolan/vlc][master] 5 commits: qml: add FadingEdge.qml for generic fading edge shader effect
Steve Lhomme (@robUx4)
gitlab at videolan.org
Mon Oct 16 19:37:26 UTC 2023
Steve Lhomme pushed to branch master at VideoLAN / VLC
Commits:
4837659b by Fatih Uzunoglu at 2023-10-16T19:13:01+00:00
qml: add FadingEdge.qml for generic fading edge shader effect
- - - - -
fdf971ce by Fatih Uzunoglu at 2023-10-16T19:13:01+00:00
qml: add FadingEdgeForListView.qml for convenient ListView fading edge support
- - - - -
76595c01 by Fatih Uzunoglu at 2023-10-16T19:13:01+00:00
qml: do not inherit FadingEdgeListView in KeyNavigableListView and use FadingEdgeForListView
- - - - -
74d6497b by Fatih Uzunoglu at 2023-10-16T19:13:01+00:00
qml: remove FadingEdgeListView.qml
- - - - -
7745bb44 by Fatih Uzunoglu at 2023-10-16T19:13:01+00:00
qml: remove obsolete `enableFade` property
- - - - -
6 changed files:
- modules/gui/qt/Makefile.am
- modules/gui/qt/playlist/qml/PlaylistListView.qml
- modules/gui/qt/vlc.qrc
- modules/gui/qt/widgets/qml/FadingEdgeListView.qml → modules/gui/qt/widgets/qml/FadingEdge.qml
- + modules/gui/qt/widgets/qml/FadingEdgeForListView.qml
- modules/gui/qt/widgets/qml/KeyNavigableListView.qml
Changes:
=====================================
modules/gui/qt/Makefile.am
=====================================
@@ -1068,7 +1068,8 @@ libqt_plugin_la_QML = \
gui/qt/widgets/qml/ToolTipExt.qml \
gui/qt/widgets/qml/DropShadowImage.qml \
gui/qt/widgets/qml/DoubleShadow.qml \
- gui/qt/widgets/qml/FadingEdgeListView.qml
+ gui/qt/widgets/qml/FadingEdge.qml \
+ gui/qt/widgets/qml/FadingEdgeForListView.qml
lib_qt_plugin_la_QRC = gui/qt/vlc.qrc
=====================================
modules/gui/qt/playlist/qml/PlaylistListView.qml
=====================================
@@ -285,14 +285,15 @@ T.Pane {
model: root.model
+ BindingCompat on enableBeginningFade {
+ when: (autoScroller.scrollingDirection === Util.ViewDragAutoScrollHandler.Direction.Backward)
+ value: false
+ }
- // NOTE: We want a gentle fade at the beginning / end of the playqueue.
- enableFade: true
-
- enableBeginningFade: (autoScroller.scrollingDirection !== Util.ViewDragAutoScrollHandler.Direction.Backward)
-
- enableEndFade: (autoScroller.scrollingDirection !== Util.ViewDragAutoScrollHandler.Direction.Forward)
-
+ BindingCompat on enableEndFade {
+ when: (autoScroller.scrollingDirection === Util.ViewDragAutoScrollHandler.Direction.Forward)
+ value: false
+ }
backgroundColor: root.background.usingAcrylic ? "transparent"
: listView.colorContext.bg.primary
=====================================
modules/gui/qt/vlc.qrc
=====================================
@@ -224,11 +224,12 @@
<file alias="ScaledImage.qml">widgets/qml/ScaledImage.qml</file>
<file alias="DropShadowImage.qml">widgets/qml/DropShadowImage.qml</file>
<file alias="DoubleShadow.qml">widgets/qml/DoubleShadow.qml</file>
- <file alias="FadingEdgeListView.qml">widgets/qml/FadingEdgeListView.qml</file>
<file alias="CSDThemeButtonSet.qml">widgets/qml/CSDThemeButtonSet.qml</file>
<file alias="CSDThemeButton.qml">widgets/qml/CSDThemeButton.qml</file>
<file alias="TextFieldExt.qml">widgets/qml/TextFieldExt.qml</file>
<file alias="Slider.qml">widgets/qml/Slider.qml</file>
+ <file alias="FadingEdge.qml">widgets/qml/FadingEdge.qml</file>
+ <file alias="FadingEdgeForListView.qml">widgets/qml/FadingEdgeForListView.qml</file>
</qresource>
<qresource prefix="/network">
<file alias="AddressbarButton.qml">network/qml/AddressbarButton.qml</file>
=====================================
modules/gui/qt/widgets/qml/FadingEdgeListView.qml → modules/gui/qt/widgets/qml/FadingEdge.qml
=====================================
@@ -1,5 +1,5 @@
/*****************************************************************************
- * Copyright (C) 2022 VLC authors and VideoLAN
+ * Copyright (C) 2023 VLC authors and VideoLAN
*
* 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
@@ -22,7 +22,7 @@ import org.videolan.compat 0.1
import "qrc:///style/"
import "qrc:///util/Helpers.js" as Helpers
-ListViewCompat {
+Item {
id: root
// backgroundColor is only needed for sub-pixel
@@ -31,151 +31,68 @@ ListViewCompat {
// Ideally it should be fully opaque, but it is
// still better than not providing any color
// information.
- property alias backgroundColor: contentItemCoverRect.color
+ property alias backgroundColor: backgroundRect.color
- Rectangle {
- id: contentItemCoverRect
-
- parent: root.contentItem
+ property alias sourceItem: shaderEffectSource.sourceItem
- x: contentX
- y: contentY
+ property real beginningMargin
+ property real endMargin
- implicitWidth: proxyContentItem.width
- implicitHeight: proxyContentItem.height
+ property real sourceX
+ property real sourceY
- color: "transparent"
-
- z: -99
- visible: proxyContentItem.visible && color.a > 0.0
- }
+ property int orientation: Qt.Vertical
property bool enableBeginningFade: true
property bool enableEndFade: true
- property real fadeSize: root.delegateItem
- ? (orientation === Qt.Vertical ? root.delegateItem.height
- : root.delegateItem.width) / 2
- : (VLCStyle.margin_large * 2)
-
- readonly property bool transitionsRunning: ((add ? add.running : false) ||
- (addDisplaced ? addDisplaced.running : false) ||
- (populate ? populate.running : false) ||
- (remove ? remove.running : false) ||
- (removeDisplaced ? removeDisplaced.running : false))
-
- // TODO: Use itemAtIndex(0) Qt >= 5.13
- // FIXME: Delegate with variable size
- readonly property Item delegateItem: root.contentItem.children.length > 0
- ? root.contentItem.children[root.contentItem.children.length - 1]
- : null
-
- readonly property Item firstVisibleItem: {
- if (transitionsRunning || !delegateItem)
- return null
-
- let margin = 0 // -root.displayMarginBeginning
- if (orientation === Qt.Vertical) {
- // if (headerItem && headerItem.visible && headerPositioning === ListView.OverlayHeader)
- // margin += headerItem.height
-
- return itemAt(contentX + (delegateItem.x + delegateItem.width / 2), contentY + margin - displayMarginBeginning + spacing)
- } else {
- // if (headerItem && headerItem.visible && headerPositioning === ListView.OverlayHeader)
- // margin += headerItem.width
-
- return itemAt(contentX + margin - displayMarginBeginning + spacing, contentY + (delegateItem.y + delegateItem.height / 2))
- }
- }
+ property real fadeSize: VLCStyle.margin_normal
- readonly property Item lastVisibleItem: {
- if (transitionsRunning || !delegateItem)
- return null
+ readonly property bool effectCompatible: (((GraphicsInfo.shaderType === GraphicsInfo.GLSL)) &&
+ ((GraphicsInfo.shaderSourceType & GraphicsInfo.ShaderSourceString)))
- let margin = 0 // -root.displayMarginEnd
- if (orientation === Qt.Vertical) {
- // if (footerItem && footerItem.visible && footerPositioning === ListView.OverlayFooter)
- // margin += footerItem.height
+ Rectangle {
+ id: backgroundRect
- return itemAt(contentX + (delegateItem.x + delegateItem.width / 2), contentY + height - margin + displayMarginEnd - spacing - 1)
- } else {
- // if (footerItem && footerItem.visible && footerPositioning === ListView.OverlayFooter)
- // margin += footerItem.width
+ parent: root.sourceItem
- return itemAt(contentX + width - margin + displayMarginEnd - spacing - 1, contentY + (delegateItem.y + delegateItem.height / 2))
- }
- }
+ anchors.fill: parent
- readonly property bool _fadeRectEnoughSize: (root.orientation === Qt.Vertical
- ? root.height
- : root.width) > (fadeSize * 2 + VLCStyle.dp(25))
-
- readonly property bool _beginningFade: enableBeginningFade &&
- _fadeRectEnoughSize &&
- (orientation === ListView.Vertical ? !atYBeginning
- : !atXBeginning) &&
- (!firstVisibleItem ||
- (!firstVisibleItem.activeFocus &&
- !Helpers.get(firstVisibleItem, "hovered", false)))
-
- readonly property bool _endFade: enableEndFade &&
- _fadeRectEnoughSize &&
- (orientation === ListView.Vertical ? !atYEnd
- : !atXEnd) &&
- (!lastVisibleItem ||
- (!lastVisibleItem.activeFocus &&
- !Helpers.get(lastVisibleItem, "hovered", false)))
-
- BindingCompat on enableBeginningFade {
- when: !!root.headerItem && (root.headerPositioning !== ListView.InlineHeader)
- value: false
- }
+ color: "transparent"
+
+ z: -100
- BindingCompat on enableEndFade {
- when: !!root.footerItem && (root.footerPositioning !== ListView.InlineFooter)
- value: false
+ visible: shaderEffectSource.visible && (color.a > 0.0)
}
ShaderEffectSource {
- id: proxyContentItem
+ id: shaderEffectSource
- visible: (root._beginningFade || root._endFade) ||
- ((shaderEffect) && (shaderEffect.beginningFadeSize > 0 || shaderEffect.endFadeSize > 0))
-
- BindingCompat on visible {
- // Let's see if the effect is compatible...
- value: false
- when: !proxyContentItem.effectCompatible
+ anchors {
+ top: parent.top
+ left: parent.left
+ leftMargin: (root.orientation === Qt.Horizontal ? -root.beginningMargin : 0)
+ topMargin: (root.orientation === Qt.Vertical ? -root.beginningMargin : 0)
}
- readonly property bool effectCompatible: (((GraphicsInfo.shaderType === GraphicsInfo.GLSL)) &&
- ((GraphicsInfo.shaderSourceType & GraphicsInfo.ShaderSourceString)))
-
- property ShaderEffect shaderEffect
-
- anchors.top: parent.top
- anchors.left: parent.left
-
- anchors.leftMargin: (orientation === ListView.Horizontal ? -displayMarginBeginning : 0)
- anchors.topMargin: (orientation === ListView.Vertical ? -displayMarginBeginning : 0)
-
- implicitWidth: Math.ceil(parent.width + (orientation === ListView.Horizontal ? (displayMarginBeginning + displayMarginEnd) : 0))
- implicitHeight: Math.ceil(parent.height + (orientation === ListView.Vertical ? (displayMarginBeginning + displayMarginEnd) : 0))
+ implicitWidth: Math.ceil(parent.width + (root.orientation === Qt.Horizontal ? (root.beginningMargin + root.endMargin) : 0))
+ implicitHeight: Math.ceil(parent.height + (root.orientation === Qt.Vertical ? (root.beginningMargin + root.endMargin) : 0))
- z: root.contentItem.z
-
- sourceItem: root.contentItem
-
- sourceRect: Qt.rect(root.contentX - (orientation === ListView.Horizontal ? displayMarginBeginning : 0),
- root.contentY - (orientation === ListView.Vertical ? displayMarginBeginning : 0),
+ sourceRect: Qt.rect(root.sourceX - (root.orientation === Qt.Horizontal ? root.beginningMargin : 0),
+ root.sourceY - (root.orientation === Qt.Vertical ? root.beginningMargin : 0),
width,
height)
- // Make sure contentItem is not rendered twice:
+ // Make sure sourceItem is not rendered twice:
hideSource: visible
smooth: false
+ visible: effectCompatible && (root.enableBeginningFade || root.enableEndFade) ||
+ ((shaderEffect) && (shaderEffect.beginningFadeSize > 0 || shaderEffect.endFadeSize > 0))
+
+ property ShaderEffect shaderEffect
+
layer.enabled: true
layer.effect: ShaderEffect {
// It makes sense to use the effect for only in the fading part.
@@ -190,18 +107,18 @@ ListViewCompat {
readonly property bool vertical: (root.orientation === Qt.Vertical)
readonly property real normalFadeSize: root.fadeSize / (vertical ? height : width)
- property real beginningFadeSize: root._beginningFade ? normalFadeSize : 0
- property real endFadeSize: root._endFade ? normalFadeSize : 0
+ property real beginningFadeSize: root.enableBeginningFade ? normalFadeSize : 0
+ property real endFadeSize: root.enableEndFade ? normalFadeSize : 0
readonly property real endFadePos: 1.0 - endFadeSize
Component.onCompleted: {
- console.assert(proxyContentItem.shaderEffect == null)
- proxyContentItem.shaderEffect = this
+ console.assert(shaderEffectSource.shaderEffect === null)
+ shaderEffectSource.shaderEffect = this
}
Component.onDestruction: {
- console.assert(proxyContentItem.shaderEffect === this)
- proxyContentItem.shaderEffect = null
+ console.assert(shaderEffectSource.shaderEffect === this)
+ shaderEffectSource.shaderEffect = null
}
// TODO: Qt >= 5.15 use inline component
=====================================
modules/gui/qt/widgets/qml/FadingEdgeForListView.qml
=====================================
@@ -0,0 +1,121 @@
+/*****************************************************************************
+ * Copyright (C) 2022 VLC authors and VideoLAN
+ *
+ * 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.12
+
+import org.videolan.compat 0.1
+
+import "qrc:///style/"
+import "qrc:///util/Helpers.js" as Helpers
+
+FadingEdge {
+ id: root
+
+ /* required */ property ListView listView
+
+ sourceItem: listView.contentItem
+
+ beginningMargin: listView.displayMarginBeginning
+ endMargin: listView.displayMarginEnd
+ orientation: (listView.orientation === ListView.Vertical) ? Qt.Vertical : Qt.Horizontal
+
+ sourceX: listView.contentX
+ sourceY: listView.contentY
+
+ fadeSize: delegateItem ? (orientation === Qt.Vertical ? delegateItem.height
+ : delegateItem.width) / 2
+ : (VLCStyle.margin_large * 2)
+
+ readonly property bool transitionsRunning: ((listView.add ? listView.add.running : false) ||
+ (listView.addDisplaced ? listView.addDisplaced.running : false) ||
+ (listView.populate ? listView.populate.running : false) ||
+ (listView.remove ? listView.remove.running : false) ||
+ (listView.removeDisplaced ? listView.removeDisplaced.running : false))
+
+ // TODO: Use itemAtIndex(0) Qt >= 5.13
+ // FIXME: Delegate with variable size
+ readonly property Item delegateItem: listView.contentItem.children.length > 0
+ ? listView.contentItem.children[listView.contentItem.children.length - 1]
+ : null
+
+ readonly property Item firstVisibleItem: {
+ if (transitionsRunning || !delegateItem)
+ return null
+
+ let margin = 0 // -root.beginningMargin
+ if (orientation === Qt.Vertical) {
+ // if (headerItem && headerItem.visible && headerPositioning === ListView.OverlayHeader)
+ // margin += headerItem.height
+
+ return listView.itemAt(sourceX + (delegateItem.x + delegateItem.width / 2),
+ sourceY + margin - beginningMargin + listView.spacing)
+ } else {
+ // if (headerItem && headerItem.visible && headerPositioning === ListView.OverlayHeader)
+ // margin += headerItem.width
+
+ return listView.itemAt(sourceX + margin - beginningMargin + listView.spacing,
+ sourceY + (delegateItem.y + delegateItem.height / 2))
+ }
+ }
+
+ readonly property Item lastVisibleItem: {
+ if (transitionsRunning || !delegateItem)
+ return null
+
+ let margin = 0 // -root.endMargin
+ if (orientation === Qt.Vertical) {
+ // if (footerItem && footerItem.visible && footerPositioning === ListView.OverlayFooter)
+ // margin += footerItem.height
+
+ return listView.itemAt(sourceX + (delegateItem.x + delegateItem.width / 2),
+ sourceY + listView.height - margin + endMargin - listView.spacing - 1)
+ } else {
+ // if (footerItem && footerItem.visible && footerPositioning === ListView.OverlayFooter)
+ // margin += footerItem.width
+
+ return listView.itemAt(sourceX + listView.width - margin + endMargin - listView.spacing - 1,
+ sourceY + (delegateItem.y + delegateItem.height / 2))
+ }
+ }
+
+ readonly property bool _fadeRectEnoughSize: (orientation === Qt.Vertical ? listView.height
+ : listView.width) > (fadeSize * 2 + VLCStyle.dp(25))
+
+ enableBeginningFade: _fadeRectEnoughSize &&
+ (orientation === Qt.Vertical ? !listView.atYBeginning
+ : !listView.atXBeginning) &&
+ (!firstVisibleItem ||
+ (!firstVisibleItem.activeFocus &&
+ !Helpers.get(firstVisibleItem, "hovered", false)))
+
+ enableEndFade: _fadeRectEnoughSize &&
+ (orientation === Qt.Vertical ? !listView.atYEnd
+ : !listView.atXEnd) &&
+ (!lastVisibleItem ||
+ (!lastVisibleItem.activeFocus &&
+ !Helpers.get(lastVisibleItem, "hovered", false)))
+
+ BindingCompat on enableBeginningFade {
+ when: !!listView.headerItem && (listView.headerPositioning !== ListView.InlineHeader)
+ value: false
+ }
+
+ BindingCompat on enableEndFade {
+ when: !!listView.footerItem && (listView.footerPositioning !== ListView.InlineFooter)
+ value: false
+ }
+}
=====================================
modules/gui/qt/widgets/qml/KeyNavigableListView.qml
=====================================
@@ -28,7 +28,7 @@ import "qrc:///style/"
import "qrc:///util/" as Util
import "qrc:///util/Helpers.js" as Helpers
-FadingEdgeListView {
+ListView {
id: root
// Properties
@@ -38,16 +38,17 @@ FadingEdgeListView {
property bool keyNavigationWraps: false
- // NOTE: Fading is disabled by default, 'enableBeginningFade' and 'enableEndFade' take
- // precedence over 'enableFade'.
- property bool enableFade: false
-
// Private
property bool _keyPressed: false
// Aliases
+ property alias backgroundColor: fadingEdge.backgroundColor
+ property alias enableEndFade: fadingEdge.enableEndFade
+ property alias enableBeginningFade: fadingEdge.enableBeginningFade
+ property alias fadeSize: fadingEdge.fadeSize
+
//forward view properties
property alias buttonLeft: buttonLeft
@@ -257,6 +258,13 @@ FadingEdgeListView {
colorSet: ColorContext.View
}
+ FadingEdgeForListView {
+ id: fadingEdge
+
+ anchors.fill: parent
+
+ listView: root
+ }
Component {
id: sectionHeading
View it on GitLab: https://code.videolan.org/videolan/vlc/-/compare/317de4dfab14a0e1264a338602ad73ccca31867b...7745bb446f6f8dfd51787fe664fa92dde147e095
--
View it on GitLab: https://code.videolan.org/videolan/vlc/-/compare/317de4dfab14a0e1264a338602ad73ccca31867b...7745bb446f6f8dfd51787fe664fa92dde147e095
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