[vlc-commits] [Git][videolan/vlc][master] qml/PlayCover: Simplify the 'play' button
Jean-Baptiste Kempf (@jbk)
gitlab at videolan.org
Fri Oct 29 01:38:00 UTC 2021
Jean-Baptiste Kempf pushed to branch master at VideoLAN / VLC
Commits:
4e2f8238 by Benjamin Arnaud at 2021-10-28T19:25:50+00:00
qml/PlayCover: Simplify the 'play' button
- - - - -
10 changed files:
- modules/gui/qt/network/qml/NetworkGridItem.qml
- modules/gui/qt/network/qml/NetworkThumbnailItem.qml
- modules/gui/qt/network/qml/ServicesHomeDisplay.qml
- + modules/gui/qt/pixmaps/play_shadow.png
- modules/gui/qt/style/VLCStyle.qml
- modules/gui/qt/vlc.qrc
- 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/NetworkGridItem.qml
=====================================
@@ -36,9 +36,9 @@ Widgets.GridItem {
playCoverBorderWidth: VLCStyle.gridCover_network_border
- playCoverShowGradient: (model.type !== NetworkMediaModel.TYPE_NODE
- &&
- model.type !== NetworkMediaModel.TYPE_DIRECTORY)
+ playCoverShowPlay: (model.type !== NetworkMediaModel.TYPE_NODE
+ &&
+ model.type !== NetworkMediaModel.TYPE_DIRECTORY)
image: model.artwork && model.artwork.toString() !== "" ? model.artwork : ""
=====================================
modules/gui/qt/network/qml/NetworkThumbnailItem.qml
=====================================
@@ -59,16 +59,17 @@ Item {
}
Widgets.PlayCover {
- radius: background.radius
- anchors.fill: parent
- iconSize: VLCStyle.play_cover_small
- visible: currentlyFocused || containsMouse
+ anchors.centerIn: parent
+
+ width: VLCStyle.play_cover_small
- onIconClicked: playClicked(item.index)
+ visible: ((currentlyFocused || containsMouse)
+ &&
+ (rowModel.type !== NetworkMediaModel.TYPE_NODE
+ &&
+ rowModel.type !== NetworkMediaModel.TYPE_DIRECTORY))
- showGradient: (rowModel.type !== NetworkMediaModel.TYPE_NODE
- &&
- rowModel.type !== NetworkMediaModel.TYPE_DIRECTORY)
+ onClicked: playClicked(item.index)
}
}
@@ -88,16 +89,17 @@ Item {
mipmap: true
Widgets.PlayCover {
- width: artwork.paintedWidth
- height: artwork.paintedHeight
- iconSize: VLCStyle.play_cover_small
- visible: currentlyFocused || containsMouse
+ anchors.centerIn: parent
+
+ width: VLCStyle.play_cover_small
- onIconClicked: playClicked(item.index)
+ visible: ((currentlyFocused || containsMouse)
+ &&
+ (rowModel.type !== NetworkMediaModel.TYPE_NODE
+ &&
+ rowModel.type !== NetworkMediaModel.TYPE_DIRECTORY))
- showGradient: (rowModel.type !== NetworkMediaModel.TYPE_NODE
- &&
- rowModel.type !== NetworkMediaModel.TYPE_DIRECTORY)
+ onClicked: playClicked(item.index)
}
}
}
=====================================
modules/gui/qt/network/qml/ServicesHomeDisplay.qml
=====================================
@@ -318,7 +318,7 @@ Widgets.PageLoader {
pictureHeight: VLCStyle.gridCover_network_height
height: VLCStyle.gridCover_network_height + VLCStyle.margin_xsmall + VLCStyle.fontHeight_normal
playCoverBorderWidth: VLCStyle.gridCover_network_border
- playCoverShowGradient: false
+ playCoverShowPlay: false
pictureOverlay: overlay
unselectedUnderlay: shadows.unselected
selectedUnderlay: shadows.selected
=====================================
modules/gui/qt/pixmaps/play_shadow.png
=====================================
Binary files /dev/null and b/modules/gui/qt/pixmaps/play_shadow.png differ
=====================================
modules/gui/qt/style/VLCStyle.qml
=====================================
@@ -262,6 +262,9 @@ QtObject {
readonly property url noArtArtistCover: "qrc:///noart_artistCover.svg";
readonly property url noArtVideoCover: "qrc:///noart_videoCover.svg";
+ // Play shadow
+ readonly property url playShadow: "qrc:///play_shadow.png";
+
// Player controlbar
readonly property int maxControlbarControlHeight: dp(64, scale)
=====================================
modules/gui/qt/vlc.qrc
=====================================
@@ -120,6 +120,7 @@
<file alias="theme_dark.svg">pixmaps/theme_dark.svg</file>
<file alias="theme_daynight.svg">pixmaps/theme_daynight.svg</file>
<file alias="theme_light.svg">pixmaps/theme_light.svg</file>
+ <file alias="play_shadow.png">pixmaps/play_shadow.png</file>
</qresource>
<qresource prefix="/prefsmenu">
<file alias="cone_audio_64.png">pixmaps/prefs/spref_cone_Audio_64.png</file>
=====================================
modules/gui/qt/widgets/qml/GridItem.qml
=====================================
@@ -53,7 +53,7 @@ Control {
property alias title: titleLabel.text
property alias subtitle: subtitleTxt.text
property alias playCoverBorderWidth: picture.playCoverBorderWidth
- property alias playCoverShowGradient: picture.playCoverShowGradient
+ property alias playCoverShowPlay: picture.playCoverShowPlay
property alias playIconSize: picture.playIconSize
property alias pictureRadius: picture.radius
property alias pictureOverlay: picture.imageOverlay
@@ -96,8 +96,8 @@ Control {
PropertyChanges {
target: picture
- playCoverOpacity: 1
playCoverVisible: true
+ playCoverOpacity: 1.0
}
}
]
@@ -113,11 +113,11 @@ Control {
SequentialAnimation {
PropertyAction {
targets: [picture, selectedUnderlayLoader]
- properties: "playCoverVisible,visible"
+ properties: "visible, playCoverVisible"
}
NumberAnimation {
- properties: "opacity,playCoverOpacity"
+ properties: "opacity, playCoverOpacity"
duration: VLCStyle.duration_slow
easing.type: Easing.InSine
}
@@ -136,18 +136,18 @@ Control {
SequentialAnimation {
PropertyAction {
target: unselectedUnderlayLoader
- property: "visible"
+ property: "visible, playCoverVisible"
}
NumberAnimation {
- properties: "opacity,playCoverOpacity"
+ properties: "opacity, playCoverOpacity"
duration: VLCStyle.duration_normal
easing.type: Easing.OutSine
}
PropertyAction {
targets: [picture, selectedUnderlayLoader]
- properties: "playCoverVisible,visible"
+ properties: "visible"
}
}
}
=====================================
modules/gui/qt/widgets/qml/MediaCover.qml
=====================================
@@ -31,20 +31,20 @@ Rectangle {
// Properties
- property bool playCoverShowGradient: true
-
property real playIconSize: VLCStyle.play_cover_normal
property real playCoverBorderWidth: VLCStyle.table_cover_border
+ property bool playCoverShowPlay: true
+
// Aliases
property alias source: image.source
property alias imageOverlay: overlay.sourceComponent
- property alias playCoverOpacity: playCoverLoader.opacity
property alias playCoverVisible: playCoverLoader.visible
+ property alias playCoverOpacity: playCoverLoader.opacity
// Signals
@@ -76,20 +76,22 @@ Rectangle {
Loader {
id: playCoverLoader
- anchors.fill: parent
+ anchors.centerIn: parent
+
visible: false
+
active: false
+
sourceComponent: Widgets.PlayCover {
- showGradient: playCoverShowGradient
- iconSize: playIconSize
- radius: root.radius
+ width: playIconSize
- onIconClicked: playIconClicked()
+ onClicked: playIconClicked()
}
- onVisibleChanged: {
- if (visible && !active)
- active = true
- }
+ asynchronous: true
+
+ // 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
}
}
=====================================
modules/gui/qt/widgets/qml/PlayCover.qml
=====================================
@@ -1,6 +1,8 @@
/*****************************************************************************
* Copyright (C) 2020 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
@@ -15,66 +17,78 @@
* 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 QtQuick.Controls 2.4
import "qrc:///style/"
+import "qrc:///widgets/" as Widgets
-Rectangle {
- id: root
-
- // Properties
-
- property bool showGradient: true
-
- // Aliases
+MouseArea {
+ // Settings
- property alias iconSize: icon.width
+ width: VLCStyle.play_cover_normal
+ height: width
- // Signals
+ // NOTE: This is the same scaling than the PlayButton, except we make it bigger.
+ // Maybe we could crank this to 1.1.
+ scale: (containsMouse && pressed === false) ? 1.05 : 1.0
- signal iconClicked()
+ opacity: (visible) ? 1.0 : 0.0
- // Settings
+ hoverEnabled: true
- opacity: (visible)
+ // Animations
- color: (showGradient) ? undefined : "transparent"
+ Behavior on scale {
+ // NOTE: We disable the animation while pressing to make it more impactful.
+ enabled: (pressed === false)
- gradient: (showGradient) ? background : undefined
+ NumberAnimation {
+ duration: VLCStyle.duration_faster
- // Animations
+ easing.type: Easing.OutQuad
+ }
+ }
Behavior on opacity {
- NumberAnimation { duration: VLCStyle.duration_fast; easing.type: Easing.OutQuad }
+ NumberAnimation {
+ duration: VLCStyle.duration_fast
+
+ easing.type: Easing.OutQuad
+ }
}
// Children
- Gradient {
- id: background
+ Image {
+ anchors.centerIn: parent
- GradientStop { position: 0.0; color: Qt.rgba(0, 0, 0, 0.5) }
- GradientStop { position: 1.0; color: Qt.rgba(0, 0, 0, 0.7) }
- }
+ // NOTE: We round this to avoid blurry textures with the QML renderer.
+ width: Math.round(parent.width * 3.2)
+ height: width
- Image {
- id: icon
+ z: -1
- anchors.centerIn: parent
+ source: VLCStyle.playShadow
+ }
- visible: showGradient
+ Rectangle {
+ anchors.fill: parent
- source: "qrc:/play_button.svg"
+ radius: width
- fillMode: Image.PreserveAspectFit
+ color: VLCStyle.colors.white
+ }
- mipmap: (width < VLCStyle.icon_normal)
+ Widgets.IconLabel {
+ anchors.centerIn: parent
- MouseArea {
- anchors.fill: parent
+ text: VLCIcons.play
- onClicked: iconClicked()
- }
+ color: (containsMouse) ? VLCStyle.colors.accent
+ : VLCStyle.colors.black
+
+ font.pixelSize: Math.round(parent.width / 2)
}
}
=====================================
modules/gui/qt/widgets/qml/TableColumns.qml
=====================================
@@ -58,8 +58,9 @@ Item {
id: cover
anchors.fill: parent
+
source: (rowModel ? (root.showTitleText ? rowModel.cover : rowModel[model.criteria]) : VLCStyle.noArtCover) || VLCStyle.noArtCover
- playCoverVisible: currentlyFocused || containsMouse
+ playCoverVisible: (currentlyFocused || containsMouse)
playIconSize: VLCStyle.play_cover_small
onPlayIconClicked: g_mainDisplay.play(medialib, rowModel.id)
radius: root.titleCover_radius
View it on GitLab: https://code.videolan.org/videolan/vlc/-/commit/4e2f82386a823ee1c71feade12b636ff0390e2f2
--
View it on GitLab: https://code.videolan.org/videolan/vlc/-/commit/4e2f82386a823ee1c71feade12b636ff0390e2f2
You're receiving this email because of your account on code.videolan.org.
More information about the vlc-commits
mailing list