[vlc-commits] [Git][videolan/vlc][master] 4 commits: qml: use sine easing for opacity animation in `PlayCover`
Felix Paul Kühne (@fkuehne)
gitlab at videolan.org
Thu Mar 19 09:07:52 UTC 2026
Felix Paul Kühne pushed to branch master at VideoLAN / VLC
Commits:
555a9d5c by Fatih Uzunoglu at 2026-03-19T09:39:00+01:00
qml: use sine easing for opacity animation in `PlayCover`
This aligns with the usage in other places.
- - - - -
fef7329d by Fatih Uzunoglu at 2026-03-19T09:39:00+01:00
qml: use `OpacityAnimator` instead of `NumberAnimation` in `PlayCover`
- - - - -
2a59cf9c by Fatih Uzunoglu at 2026-03-19T09:39:00+01:00
qml: fix opacity animation in `PlayCover`
`opacity: (visible) ? 1.0 : 0.0` can only work
one way because when `visible` is `false`, the
item would not be visible.
- - - - -
95a92f41 by Fatih Uzunoglu at 2026-03-19T09:39:00+01:00
qml: get rid of unnecessary `Loader` for `PlayCover` in `MediaCover`
Having a `Loader` complicates the item hierarchy and hassles with
positioning.
- - - - -
5 changed files:
- modules/gui/qt/network/qml/NetworkThumbnailItem.qml
- modules/gui/qt/widgets/qml/GridItem.qml
- modules/gui/qt/widgets/qml/MediaCover.qml
- modules/gui/qt/widgets/qml/PlayCover.qml
- modules/gui/qt/widgets/qml/TableColumns.qml
Changes:
=====================================
modules/gui/qt/network/qml/NetworkThumbnailItem.qml
=====================================
@@ -108,7 +108,7 @@ Widgets.TableRowDelegate {
color: root.colorContext.bg.secondary
- playCoverVisible: root._showPlayCover
+ playCoverShowPlay: root._showPlayCover
playIconSize: VLCStyle.play_cover_small
onPlayIconClicked: () => {
=====================================
modules/gui/qt/widgets/qml/GridItem.qml
=====================================
@@ -121,8 +121,7 @@ T.ItemDelegate {
PropertyChanges {
target: picture
- playCoverVisible: true
- playCoverOpacity: 1.0
+ playCoverShowPlay: true
}
}
@@ -137,11 +136,11 @@ T.ItemDelegate {
SequentialAnimation {
PropertyAction {
target: picture
- properties: "playCoverVisible"
+ properties: "playCoverShowPlay"
}
NumberAnimation {
- properties: "opacity, playCoverOpacity"
+ properties: "opacity"
duration: VLCStyle.duration_long
easing.type: Easing.InSine
}
@@ -155,11 +154,11 @@ T.ItemDelegate {
SequentialAnimation {
PropertyAction {
target: picture
- property: "playCoverVisible"
+ property: "playCoverShowPlay"
}
NumberAnimation {
- properties: "opacity, playCoverOpacity"
+ properties: "opacity"
duration: VLCStyle.duration_long
easing.type: Easing.OutSine
}
@@ -285,8 +284,7 @@ T.ItemDelegate {
Widgets.MediaCover {
id: picture
- playCoverVisible: false
- playCoverOpacity: 0
+ playCoverShowPlay: false
radius: VLCStyle.gridCover_radius
color: theme.bg.secondary
=====================================
modules/gui/qt/widgets/qml/MediaCover.qml
=====================================
@@ -32,7 +32,7 @@ Item {
property real playIconSize: VLCStyle.play_cover_normal
- property bool playCoverShowPlay: true
+ property bool playCoverShowPlay: false
readonly property real effectiveRadius: fallbackImage.visible ? fallbackImage.effectiveRadius
: (image.visible ? image.effectiveRadius
@@ -60,8 +60,7 @@ Item {
property alias imageOverlay: overlay.sourceComponent
- property alias playCoverVisible: playCoverLoader.visible
- property alias playCoverOpacity: playCoverLoader.opacity
+ readonly property bool playCoverVisible: (_playCoverItem && _playCoverItem.visible)
required property int pictureWidth
required property int pictureHeight
@@ -173,27 +172,39 @@ Item {
height: root.paintedHeight
}
- Loader {
- id: playCoverLoader
+ Component {
+ id: playCoverComponent
- anchors.centerIn: parent
+ Widgets.PlayCover {
+ anchors.centerIn: parent
+ width: playIconSize
- visible: false
+ // `OpacityAnimator` updates the property once it finishes the animation:
+ visible: (opacity > 0.0 || root.playCoverShowPlay)
- active: false
+ opacity: 0.0
- sourceComponent: Widgets.PlayCover {
- width: playIconSize
+ Behavior on opacity {
+ OpacityAnimator {
+ duration: VLCStyle.duration_short
+
+ easing.type: Easing.InOutSine
+ }
+ }
Component.onCompleted: {
tapped.connect(root.playIconClicked)
+ opacity = Qt.binding(() => { return (root.playCoverShowPlay ? 1.0 : 0.0) })
}
}
+ }
- asynchronous: true
+ property Widgets.PlayCover _playCoverItem
+ onPlayCoverShowPlayChanged: {
// NOTE: We are lazy loading the component when this gets visible and it stays loaded.
// We could consider unloading it when visible goes to false.
- onVisibleChanged: if (playCoverShowPlay && visible) active = true
+ if (playCoverShowPlay && !_playCoverItem)
+ _playCoverItem = playCoverComponent.createObject(root)
}
}
=====================================
modules/gui/qt/widgets/qml/PlayCover.qml
=====================================
@@ -35,8 +35,6 @@ Item {
// Maybe we could crank this to 1.1.
scale: (hoverHandler.hovered && !tapHandler.pressed) ? 1.05 : 1.0
- opacity: (visible) ? 1.0 : 0.0
-
activeFocusOnTab: false
signal tapped(var point)
@@ -59,14 +57,6 @@ Item {
}
}
- Behavior on opacity {
- NumberAnimation {
- duration: VLCStyle.duration_short
-
- easing.type: Easing.OutQuad
- }
- }
-
// Children
TapHandler {
=====================================
modules/gui/qt/widgets/qml/TableColumns.qml
=====================================
@@ -114,7 +114,7 @@ Item {
fillMode: root.fillMode
- playCoverVisible: (titleDel.currentlyFocused || titleDel.containsMouse)
+ playCoverShowPlay: (titleDel.currentlyFocused || titleDel.containsMouse)
playIconSize: VLCStyle.play_cover_small
radius: root.titleCover_radius
color: titleDel.colorContext.bg.secondary
View it on GitLab: https://code.videolan.org/videolan/vlc/-/compare/3e9f4fde77c95553057ad381a14aa84073cb3a13...95a92f41ddcf8d681ca98695ec51e709239110e8
--
View it on GitLab: https://code.videolan.org/videolan/vlc/-/compare/3e9f4fde77c95553057ad381a14aa84073cb3a13...95a92f41ddcf8d681ca98695ec51e709239110e8
You're receiving this email because of your account on code.videolan.org.
More information about the vlc-commits
mailing list