[vlc-commits] [Git][videolan/vlc][master] 6 commits: qml/ScanProgressBar: Revamp implementation and design
Steve Lhomme (@robUx4)
gitlab at videolan.org
Tue Sep 13 06:12:10 UTC 2022
Steve Lhomme pushed to branch master at VideoLAN / VLC
Commits:
4971d68e by Benjamin Arnaud at 2022-09-13T05:16:47+00:00
qml/ScanProgressBar: Revamp implementation and design
- - - - -
3c522587 by Benjamin Arnaud at 2022-09-13T05:16:47+00:00
qml/MainDisplay: Revamp the 'ScanProgressBar' implementation
- - - - -
b0f1e57f by Benjamin Arnaud at 2022-09-13T05:16:47+00:00
qml/VLCColors: Create 'playerSeekBar' color
- - - - -
6e310d37 by Benjamin Arnaud at 2022-09-13T05:16:47+00:00
qml/MainDisplay: Create the 'displayMargin' property
- - - - -
b8c1e1d8 by Benjamin Arnaud at 2022-09-13T05:16:47+00:00
qml/MainDisplay: Create the 'hasMiniPlayer' property
- - - - -
ba9b27e1 by Benjamin Arnaud at 2022-09-13T05:16:47+00:00
qml/ScanProgressBar: Support VLCStyle safe areas
- - - - -
10 changed files:
- modules/gui/qt/maininterface/qml/MainDisplay.qml
- modules/gui/qt/maininterface/qml/MainGridView.qml
- modules/gui/qt/maininterface/qml/MainTableView.qml
- modules/gui/qt/medialibrary/qml/MusicArtistsAlbums.qml
- modules/gui/qt/medialibrary/qml/MusicTracksDisplay.qml
- modules/gui/qt/network/qml/ServicesHomeDisplay.qml
- modules/gui/qt/player/qml/ControlBar.qml
- modules/gui/qt/style/VLCColors.qml
- modules/gui/qt/widgets/qml/ScanProgressBar.qml
- po/POTFILES.in
Changes:
=====================================
modules/gui/qt/maininterface/qml/MainDisplay.qml
=====================================
@@ -41,11 +41,22 @@ FocusScope {
"properties": {}
})
- property alias g_mainDisplay: root
+ // Properties
+
+ property bool hasMiniPlayer: miniPlayer.visible
+
+ // NOTE: The main view must be above the indexing bar and the mini player.
+ property int displayMargin: (loaderProgress.active) ? miniPlayer.height + loaderProgress.height
+ : miniPlayer.height
+
property bool _inhibitMiniPlayer: false
property bool _showMiniPlayer: false
property var _oldViewProperties: ({}) // saves last state of the views
+ // Aliases
+
+ property alias g_mainDisplay: root
+
onViewChanged: {
_oldViewProperties[view.name] = view.properties
loadView()
@@ -258,7 +269,9 @@ FocusScope {
top: parent.top
left: parent.left
bottom: parent.bottom
- bottomMargin: miniPlayer.height
+
+ bottomMargin: root.displayMargin
+
right: playlistColumn.visible ? playlistColumn.left : parent.right
rightMargin: (MainCtx.playlistDocked && MainCtx.playlistVisible)
? 0
@@ -286,21 +299,6 @@ FocusScope {
// Enable clipping so that the effect does not sit
// on top of the source.
clip: miniPlayer.visible && miniPlayer.effectAvailable
-
- Loader {
- z: 1
- anchors {
- left: parent.left
- right: parent.right
- bottom: parent.bottom
- rightMargin: VLCStyle.margin_small
- leftMargin: VLCStyle.margin_small
- topMargin: VLCStyle.dp(10, VLCStyle.scale)
- bottomMargin: VLCStyle.dp(10, VLCStyle.scale)
- }
- active: MainCtx.mediaLibraryAvailable && !MainCtx.mediaLibrary.idle
- source: "qrc:///widgets/ScanProgressBar.qml"
- }
}
FocusScope {
@@ -315,7 +313,7 @@ FocusScope {
playlist.minimumWidth,
root.width / 2)
width: 0
- height: parent.height - miniPlayer.height
+ height: parent.height - root.displayMargin
visible: false
@@ -369,7 +367,9 @@ FocusScope {
focus: true
rightPadding: VLCStyle.applicationHorizontalMargin
- bottomPadding: topPadding + Math.max(VLCStyle.applicationVerticalMargin - miniPlayer.height, 0)
+
+ bottomPadding: topPadding + Math.max(VLCStyle.applicationVerticalMargin
+ - root.displayMargin, 0)
Navigation.parentItem: medialibId
Navigation.upItem: sourcesBanner
@@ -428,6 +428,30 @@ FocusScope {
}
}
+ Loader {
+ id: loaderProgress
+
+ anchors.left: parent.left
+ anchors.right: parent.right
+ anchors.bottom: miniPlayer.top
+
+ active: (MainCtx.mediaLibraryAvailable && MainCtx.mediaLibrary.idle === false)
+
+ source: "qrc:///widgets/ScanProgressBar.qml"
+
+ onItemChanged: {
+ if (item === null) return
+
+ // NOTE: These are required for the FrostedGlassEffect.
+
+ item.source = Qt.binding(function() { return stackView })
+
+ item.sourceRect = Qt.binding(function() {
+ return stackView.mapFromItem(parent, x, y, width, height)
+ })
+ }
+ }
+
P.PIPPlayer {
id: playerPip
anchors {
=====================================
modules/gui/qt/maininterface/qml/MainGridView.qml
=====================================
@@ -22,5 +22,5 @@ import "qrc:///widgets/" as Widgets
Widgets.ExpandGridView {
id: root
- displayMarginEnd: miniPlayer.height
+ displayMarginEnd: g_mainDisplay.displayMargin
}
=====================================
modules/gui/qt/maininterface/qml/MainTableView.qml
=====================================
@@ -23,5 +23,5 @@ import "qrc:///widgets/" as Widgets
Widgets.KeyNavigableTableView {
id: root
- displayMarginEnd: miniPlayer.height
+ displayMarginEnd: g_mainDisplay.displayMargin
}
=====================================
modules/gui/qt/medialibrary/qml/MusicArtistsAlbums.qml
=====================================
@@ -124,7 +124,10 @@ FocusScope {
visible: artistModel.count > 0
focus: artistModel.count > 0
- displayMarginEnd: miniPlayer.height // to get blur effect while scrolling in mainview
+
+ // To get blur effect while scrolling in mainview
+ displayMarginEnd: g_mainDisplay.displayMargin
+
Navigation.parentItem: root
Navigation.rightAction: function() {
=====================================
modules/gui/qt/medialibrary/qml/MusicTracksDisplay.qml
=====================================
@@ -50,7 +50,9 @@ FocusScope {
else
tracklistdisplay_id.currentIndex = 0;
}
- displayMarginEnd: miniPlayer.height // to get blur effect while scrolling in mainview
+
+ // To get blur effect while scrolling in mainview
+ displayMarginEnd: g_mainDisplay.displayMargin
}
EmptyLabelButton {
=====================================
modules/gui/qt/network/qml/ServicesHomeDisplay.qml
=====================================
@@ -172,7 +172,9 @@ Widgets.PageLoader {
leftMargin: VLCStyle.margin_large
rightMargin: VLCStyle.margin_large
spacing: VLCStyle.margin_xsmall
- displayMarginEnd: miniPlayer.height // to get blur effect while scrolling in mainview
+
+ // To get blur effect while scrolling in mainview
+ displayMarginEnd: g_mainDisplay.displayMargin
delegate: Rectangle {
width: servicesView.width - VLCStyle.margin_large * 2
=====================================
modules/gui/qt/player/qml/ControlBar.qml
=====================================
@@ -178,7 +178,7 @@ Control {
id: trackPositionSlider
visible: false
- backgroundColor: Qt.lighter(colors.playerBg, 1.6180)
+ backgroundColor: colors.playerSeekBar
barHeight: VLCStyle.heightBar_xxsmall
enabled: Player.playingState === Player.PLAYING_STATE_PLAYING || Player.playingState === Player.PLAYING_STATE_PAUSED
colors: root.colors
=====================================
modules/gui/qt/style/VLCColors.qml
=====================================
@@ -145,6 +145,7 @@ Item {
property color playerFgInactive: textInactive
property color playerControlBarFg: playerFg
property color playerBg: bg
+ property color playerSeekBar: Qt.lighter(playerBg, 1.6180)
property color playerBorder: buttonText
property color separator: blendColors(bg, text, .95)
=====================================
modules/gui/qt/widgets/qml/ScanProgressBar.qml
=====================================
@@ -15,113 +15,152 @@
* 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 QtQuick.Templates 2.4 as T
+import QtQuick.Layouts 1.11
+import org.videolan.vlc 0.1
import org.videolan.medialib 0.1
import "qrc:///style/"
-T.ProgressBar {
- id: control
+FrostedGlassEffect {
+ // Settings
- from: 0
- to: 100
- value: MediaLib.parsingProgress
- indeterminate: MediaLib.discoveryPending
- visible: !MediaLib.idle
- height: contentItem.implicitHeight
- width: implicitWidth
+ height: _getHeight()
- contentItem: Column {
- spacing: VLCStyle.margin_normal
- width: control.width
- height: implicitHeight
- visible: control.visible
+ tint: VLCStyle.colors.lowerBanner
- Rectangle {
- id: bg
+ // Functions
- width: parent.width
- height: VLCStyle.heightBar_xsmall
- color: VLCStyle.colors.bgAlt
+ // Private
- function fromRGB(r, g, b, a) {
- return Qt.rgba( r / 255, g / 255, b / 255, a / 255)
- }
+ function _getHeight() {
+ var height = column.implicitHeight + VLCStyle.margin_small * 2
+
+ // NOTE: We don't need to take the vertical safe area into consideration when the
+ // miniPlayer is visible.
+ if (g_mainDisplay.hasMiniPlayer)
+ return height
+ else
+ return height + VLCStyle.applicationVerticalMargin
+ }
+
+ // Children
+
+ ColumnLayout {
+ id: column
+
+ anchors.fill: parent
+
+ anchors.leftMargin: VLCStyle.margin_large + VLCStyle.applicationHorizontalMargin
+ anchors.rightMargin: anchors.leftMargin
+
+ anchors.topMargin: VLCStyle.margin_small
+
+ anchors.bottomMargin: (g_mainDisplay.hasMiniPlayer) ? VLCStyle.margin_small
+ : VLCStyle.margin_small
+ + VLCStyle.applicationVerticalMargin
+
+ spacing: VLCStyle.margin_small
+
+ T.ProgressBar {
+ id: control
+
+ Layout.fillWidth: true
+
+ height: VLCStyle.heightBar_xxsmall
+
+ from: 0
+ to: 100
+
+ value: MediaLib.parsingProgress
+
+ indeterminate: MediaLib.discoveryPending
+
+ contentItem: Item {
+ Rectangle {
+ anchors.left: parent.left
+ anchors.right: parent.right
+
+ anchors.verticalCenter: parent.verticalCenter
- Rectangle {
- id: progressBar
-
- width: parent.height
- height: parent.width * control.visualPosition
- rotation: -90
- y: width
- transformOrigin: Item.TopLeft
- visible: !control.indeterminate
- gradient: Gradient {
- GradientStop { position: 0.00; color: bg.fromRGB(248, 154, 6, 200) }
- GradientStop { position: 0.48; color: bg.fromRGB(226, 90, 1, 255) }
- GradientStop { position: 0.89; color: bg.fromRGB(248, 124, 6, 255) }
- GradientStop { position: 1.00; color: bg.fromRGB(255, 136, 0, 100) }
+ height: VLCStyle.heightBar_xxxsmall
+
+ color: VLCStyle.colors.sliderBarMiniplayerBgColor
}
- }
- Rectangle {
- id: indeterminateBar
-
- property real pos: 0
-
- anchors.centerIn: parent
- anchors.horizontalCenterOffset: ((bg.width - indeterminateBar.height) / 2) * pos
- width: parent.height
- height: parent.width * .24
- rotation: 90
- visible: control.indeterminate
- gradient: Gradient {
- GradientStop { position: 0.00; color: bg.fromRGB(248, 154, 6, 0) }
- GradientStop { position: 0.09; color: bg.fromRGB(253, 136, 0, 0) }
- GradientStop { position: 0.48; color: bg.fromRGB(226, 90, 1, 255) }
- GradientStop { position: 0.89; color: bg.fromRGB(248, 124, 6, 255) }
- GradientStop { position: 1.00; color: bg.fromRGB(255, 136, 0, 0) }
+ Rectangle {
+ anchors.verticalCenter: parent.verticalCenter
+
+ width: parent.width * control.visualPosition
+ height: VLCStyle.heightBar_xxsmall
+
+ // NOTE: We want round corners.
+ radius: height
+
+ visible: (control.indeterminate === false)
+
+ color: VLCStyle.colors.accent
}
- SequentialAnimation on pos {
- id: loadingAnim
+ Rectangle {
+ property real position: 0
- loops: Animation.Infinite
- running: control.indeterminate
+ anchors.verticalCenter: parent.verticalCenter
- NumberAnimation {
- from: - 1
- to: 1
- duration: VLCStyle.durationSliderBouncing
- easing.type: Easing.OutBounce
- }
+ // NOTE: Why 0.24 though ?
+ width: parent.width * 0.24
+ height: VLCStyle.heightBar_xxsmall
- PauseAnimation {
- duration: VLCStyle.duration_veryLong
- }
+ x: Math.round((parent.width - width) * position)
- NumberAnimation {
- to: - 1
- from: 1
- duration: VLCStyle.durationSliderBouncing
- easing.type: Easing.OutBounce
- }
+ // NOTE: We want round corners.
+ radius: height
+
+ visible: control.indeterminate
- PauseAnimation {
- duration: VLCStyle.duration_veryLong
+ color: VLCStyle.colors.accent
+
+ SequentialAnimation on position {
+ loops: Animation.Infinite
+
+ running: visible
+
+ NumberAnimation {
+ from: 0
+ to: 1.0
+
+ duration: VLCStyle.durationSliderBouncing
+ easing.type: Easing.OutBounce
+ }
+
+ NumberAnimation {
+ from: 1.0
+ to: 0
+
+ duration: VLCStyle.durationSliderBouncing
+ easing.type: Easing.OutBounce
+ }
}
}
}
}
SubtitleLabel {
- text: MediaLib.discoveryPending ? MediaLib.discoveryEntryPoint : (MediaLib.parsingProgress + "%")
+ Layout.fillWidth: true
+
+ text: (MediaLib.discoveryPending) ? I18n.qtr("Scanning %1")
+ .arg(MediaLib.discoveryEntryPoint)
+ : I18n.qtr("Indexing Medias (%1%)")
+ .arg(MediaLib.parsingProgress)
+
+ elide: Text.ElideMiddle
+
+ font.pixelSize: VLCStyle.fontSize_large
font.weight: Font.Normal
- width: parent.width
}
}
}
=====================================
po/POTFILES.in
=====================================
@@ -922,6 +922,7 @@ modules/gui/qt/widgets/native/searchlineedit.cpp
modules/gui/qt/widgets/native/searchlineedit.hpp
modules/gui/qt/widgets/qml/DragItem.qml
modules/gui/qt/widgets/qml/ListItem.qml
+modules/gui/qt/widgets/qml/ScanProgressBar.qml
modules/gui/qt/widgets/qml/SearchBox.qml
modules/gui/qt/widgets/qml/SortControl.qml
modules/gui/qt/widgets/qml/TableColumns.qml
View it on GitLab: https://code.videolan.org/videolan/vlc/-/compare/09e3cc77daeaf597a53f5a3937c386ea1e73e47c...ba9b27e1aedcb35300bb919392ad4dd086c2c286
--
View it on GitLab: https://code.videolan.org/videolan/vlc/-/compare/09e3cc77daeaf597a53f5a3937c386ea1e73e47c...ba9b27e1aedcb35300bb919392ad4dd086c2c286
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