From 5166e188834dd6006a176ab556bf49ece7920c37 Mon Sep 17 00:00:00 2001 From: Yoann Lopes Date: Mon, 31 Oct 2011 20:10:33 +0100 Subject: Improved ListView scrolling performance. --- qml/AlbumPage.qml | 3 ++ qml/ArtistPage.qml | 3 ++ qml/PlaylistDelegate.qml | 97 +++++++++++++++++++++++++++++------------------- qml/PlaylistPage.qml | 5 ++- qml/SearchPage.qml | 13 ++++--- qml/ToplistPage.qml | 15 +++++--- qml/TrackDelegate.qml | 55 +++++++++++++++++---------- qml/TracklistPage.qml | 2 + 8 files changed, 123 insertions(+), 70 deletions(-) diff --git a/qml/AlbumPage.qml b/qml/AlbumPage.qml index 44ed13e..56c947f 100644 --- a/qml/AlbumPage.qml +++ b/qml/AlbumPage.qml @@ -101,6 +101,7 @@ Page { id: tracks anchors.fill: parent + cacheBuffer: 3000 model: browse.tracks header: AlbumHeader { albumName: album ? album.name : "" @@ -115,6 +116,8 @@ Page { onCountChanged: { delegate = browse.hasMultipleArtists ? compilationDelegate : albumDelegate } + + Component.onCompleted: positionViewAtBeginning() } ScrollDecorator { flickableItem: tracks } diff --git a/qml/ArtistPage.qml b/qml/ArtistPage.qml index 06c2aef..b1aeddb 100644 --- a/qml/ArtistPage.qml +++ b/qml/ArtistPage.qml @@ -114,6 +114,9 @@ Page { anchors.fill: parent anchors.rightMargin: UI.MARGIN_XLARGE anchors.leftMargin: UI.MARGIN_XLARGE + cacheBuffer: 3000 + + Component.onCompleted: positionViewAtBeginning() Component { id: trackComponent diff --git a/qml/PlaylistDelegate.qml b/qml/PlaylistDelegate.qml index cbc934e..6d82496 100644 --- a/qml/PlaylistDelegate.qml +++ b/qml/PlaylistDelegate.qml @@ -5,22 +5,22 @@ ** Contact: Yoann Lopes (yoann.lopes@nokia.com) ** ** This file is part of the MeeSpot project. -** +** ** Redistribution and use in source and binary forms, with or without ** modification, are permitted provided that the following conditions ** are met: -** +** ** Redistributions of source code must retain the above copyright notice, ** this list of conditions and the following disclaimer. -** +** ** Redistributions in binary form must reproduce the above copyright ** notice, this list of conditions and the following disclaimer in the ** documentation and/or other materials provided with the distribution. -** +** ** Neither the name of Nokia Corporation and its Subsidiary(-ies) nor the names of its ** contributors may be used to endorse or promote products derived from ** this software without specific prior written permission. -** +** ** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS ** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT ** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS @@ -151,28 +151,35 @@ Item { elide: Text.ElideRight } - BorderImage { + Loader { id: unseenBox - source: "images/icon-m-common-green.png" anchors.verticalCenter: parent.verticalCenter x: mainText.paintedWidth + UI.MARGIN_XLARGE - visible: listItem.unseens > 0 - width: unseenText.width > 14 ? unseenText.width + 14 : 28 - border.left: 10 - border.right: 10 - border.top: 10 - border.bottom: 10 + sourceComponent: listItem.unseens > 0 ? unseensComponent : null + } - Label { - id: unseenText - anchors.centerIn: parent - font.family: listItem.titleFont - font.pixelSize: listItem.subtitleSize - font.bold: true - color: listItem.titleColor - horizontalAlignment: Text.AlignHCenter - verticalAlignment: Text.AlignVCenter - text: listItem.unseens + Component { + id: unseensComponent + BorderImage { + source: "images/icon-m-common-green.png" + visible: listItem.unseens > 0 + width: unseenText.width > 14 ? unseenText.width + 14 : 28 + border.left: 10 + border.right: 10 + border.top: 10 + border.bottom: 10 + + Label { + id: unseenText + anchors.centerIn: parent + font.family: listItem.titleFont + font.pixelSize: listItem.subtitleSize + font.bold: true + color: listItem.titleColor + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter + text: listItem.unseens + } } } } @@ -226,34 +233,48 @@ Item { } } - ProgressBar { + Loader { id: downloadBar anchors.left: offlineStatusIcon.right anchors.right: parent.right anchors.rightMargin: UI.MARGIN_XLARGE anchors.bottom: parent.bottom anchors.bottomMargin: 3 - platformStyle: ProgressBarStyle { - knownTexture: "qrc:/qml/images/meegotouch-progressindicator-bar-known-texture.png" - barMask: "image://theme/meegotouch-progressindicator-bar-mask" + sourceComponent: listItem.offlineStatus == SpotifyPlaylist.Downloading ? downloadBarComponent : null + } + + Component { + id: downloadBarComponent + ProgressBar { + platformStyle: ProgressBarStyle { + knownTexture: "qrc:/qml/images/meegotouch-progressindicator-bar-known-texture.png" + barMask: "image://theme/meegotouch-progressindicator-bar-mask" + } + visible: listItem.offlineStatus == SpotifyPlaylist.Downloading + minimumValue: 0 + maximumValue: 100 + value: listItem.downloadProgress } - visible: listItem.offlineStatus == SpotifyPlaylist.Downloading - minimumValue: 0 - maximumValue: 100 - value: listItem.downloadProgress } - Label { + Loader { id: waitingText anchors.left: offlineStatusIcon.right anchors.right: parent.right anchors.verticalCenter: parent.verticalCenter - visible: listItem.offlineStatus == SpotifyPlaylist.Waiting && !spotifySession.offlineMode - font.family: listItem.subtitleFont - font.pixelSize: listItem.subtitleSize - font.weight: Font.Light - color: listItem.subtitleColor - text: "Waiting for sync" + sourceComponent: listItem.offlineStatus == SpotifyPlaylist.Waiting && !spotifySession.offlineMode ? waitingTextComponent : null + } + + Component { + id: waitingTextComponent + Label { + visible: listItem.offlineStatus == SpotifyPlaylist.Waiting && !spotifySession.offlineMode + font.family: listItem.subtitleFont + font.pixelSize: listItem.subtitleSize + font.weight: Font.Light + color: listItem.subtitleColor + text: "Waiting for sync" + } } } } diff --git a/qml/PlaylistPage.qml b/qml/PlaylistPage.qml index bf2bf4b..49eeb79 100644 --- a/qml/PlaylistPage.qml +++ b/qml/PlaylistPage.qml @@ -77,8 +77,11 @@ Page { id: playlists anchors.fill: parent + cacheBuffer: 3000 model: spotifySession.user ? spotifySession.user.playlists : 0 + Component.onCompleted: positionViewAtBeginning() + delegate: PlaylistDelegate { title: (modelData.type == SpotifyPlaylist.Playlist ? modelData.name : (modelData.type == SpotifyPlaylist.Starred ? "Starred" @@ -106,7 +109,7 @@ Page { if (modelData.type == SpotifyPlaylist.Playlist) staticIcon = "image://theme/icon-m-music-video-all-songs"; else if (modelData.type == SpotifyPlaylist.Starred) - staticIcon = theme.inverted ? "image://theme/icon-m-common-favorite-mark-inverse" : "image://theme/icon-m-common-favorite-mark"; + staticIcon = "image://theme/icon-m-common-favorite-mark-inverse"; else if (modelData.type == SpotifyPlaylist.Inbox) staticIcon = "image://theme/icon-m-toolbar-directory-move-to-white-selected"; } diff --git a/qml/SearchPage.qml b/qml/SearchPage.qml index 35ce002..1e0dc85 100644 --- a/qml/SearchPage.qml +++ b/qml/SearchPage.qml @@ -5,22 +5,22 @@ ** Contact: Yoann Lopes (yoann.lopes@nokia.com) ** ** This file is part of the MeeSpot project. -** +** ** Redistribution and use in source and binary forms, with or without ** modification, are permitted provided that the following conditions ** are met: -** +** ** Redistributions of source code must retain the above copyright notice, ** this list of conditions and the following disclaimer. -** +** ** Redistributions in binary form must reproduce the above copyright ** notice, this list of conditions and the following disclaimer in the ** documentation and/or other materials provided with the distribution. -** +** ** Neither the name of Nokia Corporation and its Subsidiary(-ies) nor the names of its ** contributors may be used to endorse or promote products derived from ** this software without specific prior written permission. -** +** ** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS ** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT ** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS @@ -166,6 +166,9 @@ Page { anchors.rightMargin: UI.MARGIN_XLARGE anchors.leftMargin: UI.MARGIN_XLARGE onMovementStarted: results.focus = true + cacheBuffer: 8000 + + Component.onCompleted: positionViewAtBeginning() Component { id: trackComponent diff --git a/qml/ToplistPage.qml b/qml/ToplistPage.qml index 018c42b..0ac47c9 100644 --- a/qml/ToplistPage.qml +++ b/qml/ToplistPage.qml @@ -5,22 +5,22 @@ ** Contact: Yoann Lopes (yoann.lopes@nokia.com) ** ** This file is part of the MeeSpot project. -** +** ** Redistribution and use in source and binary forms, with or without ** modification, are permitted provided that the following conditions ** are met: -** +** ** Redistributions of source code must retain the above copyright notice, ** this list of conditions and the following disclaimer. -** +** ** Redistributions in binary form must reproduce the above copyright ** notice, this list of conditions and the following disclaimer in the ** documentation and/or other materials provided with the distribution. -** +** ** Neither the name of Nokia Corporation and its Subsidiary(-ies) nor the names of its ** contributors may be used to endorse or promote products derived from ** this software without specific prior written permission. -** +** ** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS ** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT ** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS @@ -129,9 +129,11 @@ Page { model: searchNew.albums clip: true snapMode: ListView.SnapToItem - cacheBuffer: height * 2 + cacheBuffer: 3000 pressDelay: 50 + Component.onCompleted: positionViewAtBeginning() + delegate: SpotifyImage { spotifyId: modelData.coverId height: newAlbumsView.height @@ -228,6 +230,7 @@ Page { anchors.fill: parent anchors.rightMargin: UI.MARGIN_XLARGE anchors.leftMargin: UI.MARGIN_XLARGE + cacheBuffer: 8000 Component { id: trackComponent diff --git a/qml/TrackDelegate.qml b/qml/TrackDelegate.qml index b7fdfd8..37cba77 100644 --- a/qml/TrackDelegate.qml +++ b/qml/TrackDelegate.qml @@ -5,22 +5,22 @@ ** Contact: Yoann Lopes (yoann.lopes@nokia.com) ** ** This file is part of the MeeSpot project. -** +** ** Redistribution and use in source and binary forms, with or without ** modification, are permitted provided that the following conditions ** are met: -** +** ** Redistributions of source code must retain the above copyright notice, ** this list of conditions and the following disclaimer. -** +** ** Redistributions in binary form must reproduce the above copyright ** notice, this list of conditions and the following disclaimer in the ** documentation and/or other materials provided with the distribution. -** +** ** Neither the name of Nokia Corporation and its Subsidiary(-ies) nor the names of its ** contributors may be used to endorse or promote products derived from ** this software without specific prior written permission. -** +** ** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS ** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT ** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS @@ -52,7 +52,7 @@ Item { property alias name: mainText.text property alias artistAndAlbum: subText.text property alias duration: timing.text - property alias coverId: coverImage.spotifyId + property string coverId: "" property bool highlighted: false property bool starred: false property bool available: true @@ -118,35 +118,50 @@ Item { color: "#22FFFFFF" } - Label { + Loader { id: indexText anchors.left: parent.left anchors.verticalCenter: parent.verticalCenter width: listItem.showIndex ? 48 : 0 - text: (index + 1) + ". " - font.family: UI.FONT_FAMILY_LIGHT - font.pixelSize: UI.FONT_SMALL - horizontalAlignment: Text.AlignRight - visible: listItem.showIndex + sourceComponent: listItem.showIndex ? indexTextComponent : null } - Rectangle { + Component { + id: indexTextComponent + Label { + text: (index + 1) + ". " + font.family: UI.FONT_FAMILY_LIGHT + font.pixelSize: UI.FONT_SMALL + horizontalAlignment: Text.AlignRight + visible: listItem.showIndex + } + } + + Loader { id: coverContainer - width: coverImage.spotifyId.length > 0 ? 64 : 0; height: width + width: listItem.coverId.length > 0 ? 64 : 0; height: width anchors.left: indexText.right anchors.verticalCenter: parent.verticalCenter - color: "#202020" - opacity: listItem.available ? 1.0 : 0.2 + sourceComponent: listItem.coverId.length > 0 ? coverContainerComponent : null + } + + Component { + id: coverContainerComponent + Rectangle { + color: "#202020" + opacity: listItem.available ? 1.0 : 0.2 - SpotifyImage { - id: coverImage - anchors.fill: parent + SpotifyImage { + id: coverImage + anchors.fill: parent + spotifyId: listItem.coverId + } } } Column { anchors.left: coverContainer.right - anchors.leftMargin: coverImage.spotifyId.length > 0 ? UI.MARGIN_XLARGE : 0 + anchors.leftMargin: listItem.coverId.length > 0 ? UI.MARGIN_XLARGE : 0 anchors.right: parent.right anchors.verticalCenter: parent.verticalCenter opacity: listItem.available ? 1.0 : 0.3 diff --git a/qml/TracklistPage.qml b/qml/TracklistPage.qml index 121b9b9..cf8b70d 100644 --- a/qml/TracklistPage.qml +++ b/qml/TracklistPage.qml @@ -98,6 +98,7 @@ Page { id: tracks anchors.fill: parent + cacheBuffer: 3000 highlightMoveDuration: 1 model: playlist.tracks header: ViewHeader { @@ -108,6 +109,7 @@ Page { Component.onCompleted: { tracks.delegate = playlist.type == SpotifyPlaylist.Inbox ? inboxDelegate : trackDelegate + positionViewAtBeginning(); } } -- cgit v1.2.3