Introduce some lazy loading

This commit is contained in:
Sebastian J. Wolf 2020-09-21 22:10:03 +02:00
parent cfb93912ec
commit c5dade71b0
7 changed files with 157 additions and 70 deletions

View file

@ -50,7 +50,9 @@ DISTFILES += qml/harbour-fernschreiber.qml \
SAILFISHAPP_ICONS = 86x86 108x108 128x128 172x172 256x256 SAILFISHAPP_ICONS = 86x86 108x108 128x128 172x172 256x256
TRANSLATIONS += translations/harbour-fernschreiber-de.ts TRANSLATIONS += translations/harbour-fernschreiber-de.ts \
translations/harbour-fernschreiber-es.ts \
translations/harbour-fernschreiber-zh_CN.ts
LIBS += -L$$PWD/tdlib/lib/ -ltdjson LIBS += -L$$PWD/tdlib/lib/ -ltdjson

View file

@ -47,7 +47,7 @@ Item {
function updatePicture() { function updatePicture() {
if (typeof photoData === "object") { if (typeof photoData === "object") {
if (photoData.local.is_downloading_completed) { if (photoData.local.is_downloading_completed) {
singleImage.source = photoData.local.path; profileImageLoader.active = true;
} else { } else {
tdLibWrapper.downloadFile(photoData.id); tdLibWrapper.downloadFile(photoData.id);
} }
@ -82,49 +82,70 @@ Item {
console.log("File updated, completed? " + fileInformation.local.is_downloading_completed); console.log("File updated, completed? " + fileInformation.local.is_downloading_completed);
if (fileInformation.local.is_downloading_completed) { if (fileInformation.local.is_downloading_completed) {
photoData = fileInformation; photoData = fileInformation;
singleImage.source = photoData.local.path; profileImageLoader.active = true;
} }
} }
} }
} }
Image { Component {
id: singleImage id: profileImageComponent
width: parent.width - Theme.paddingSmall Item {
height: parent.height - Theme.paddingSmall width: parent.width
anchors.centerIn: parent height: width
fillMode: Image.PreserveAspectCrop Image {
autoTransform: true id: singleImage
width: parent.width - Theme.paddingSmall
height: parent.height - Theme.paddingSmall
anchors.centerIn: parent
source: profileThumbnail.photoData.local.path
fillMode: Image.PreserveAspectCrop
autoTransform: true
asynchronous: true
visible: false
}
Rectangle {
id: profileThumbnailMask
width: parent.width - Theme.paddingSmall
height: parent.height - Theme.paddingSmall
color: Theme.primaryColor
radius: parent.width / 2
anchors.centerIn: singleImage
visible: false
}
OpacityMask {
id: maskedThumbnail
source: singleImage
maskSource: profileThumbnailMask
anchors.fill: singleImage
visible: singleImage.status === Image.Ready ? true : false
opacity: singleImage.status === Image.Ready ? 1 : 0
Behavior on opacity { NumberAnimation {} }
}
}
}
Loader {
id: profileImageLoader
active: false
asynchronous: true asynchronous: true
visible: false width: parent.width
} sourceComponent: profileImageComponent
onLoaded: {
Rectangle { console.log(profileThumbnail.photoData.local.path);
id: profileThumbnailMask }
width: parent.width - Theme.paddingSmall
height: parent.height - Theme.paddingSmall
color: Theme.primaryColor
radius: parent.width / 2
anchors.centerIn: singleImage
visible: false
}
OpacityMask {
id: maskedThumbnail
source: singleImage
maskSource: profileThumbnailMask
anchors.fill: singleImage
visible: singleImage.status === Image.Ready ? true : false
opacity: singleImage.status === Image.Ready ? 1 : 0
Behavior on opacity { NumberAnimation {} }
} }
Item { Item {
id: replacementThumbnailItem id: replacementThumbnailItem
width: parent.width - Theme.paddingSmall width: parent.width - Theme.paddingSmall
height: parent.height - Theme.paddingSmall height: parent.height - Theme.paddingSmall
visible: singleImage.status !== Image.Ready //visible: singleImage.status !== Image.Ready
visible: !profileImageLoader.active
Rectangle { Rectangle {
id: replacementThumbnailBackground id: replacementThumbnailBackground

View file

@ -56,7 +56,7 @@ Page {
} }
Label { Label {
text: "Fernschreiber 0.1" text: "Fernschreiber 0.2"
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
font.pixelSize: Theme.fontSizeExtraLarge font.pixelSize: Theme.fontSizeExtraLarge
anchors { anchors {

View file

@ -354,10 +354,8 @@ Page {
id: chatView id: chatView
anchors.fill: parent anchors.fill: parent
opacity: chatPage.loading ? 0 : 1 opacity: chatPage.loading ? 0 : 1
Behavior on opacity { NumberAnimation {} } Behavior on opacity { NumberAnimation {} }
clip: true clip: true
property int lastReadSentIndex: 0 property int lastReadSentIndex: 0
@ -540,50 +538,116 @@ Page {
visible: (text !== "") visible: (text !== "")
} }
WebPagePreview { Component {
id: webPagePreview id: webPagePreviewComponent
webPageData: ( typeof display.content.web_page !== "undefined" ) ? display.content.web_page : "" WebPagePreview {
id: webPagePreview
webPageData: ( typeof display.content.web_page !== "undefined" ) ? display.content.web_page : ""
width: parent.width
visible: typeof display.content.web_page !== "undefined"
}
}
Loader {
id: webPagePreviewLoader
active: ( typeof display.content.web_page !== "undefined" )
asynchronous: true
width: parent.width width: parent.width
visible: typeof display.content.web_page !== "undefined" sourceComponent: webPagePreviewComponent
} }
ImagePreview { Component {
id: messageImagePreview id: imagePreviewComponent
photoData: ( display.content['@type'] === "messagePhoto" ) ? display.content.photo : "" ImagePreview {
id: messageImagePreview
photoData: ( display.content['@type'] === "messagePhoto" ) ? display.content.photo : ""
width: parent.width
height: parent.width * 2 / 3
visible: display.content['@type'] === "messagePhoto"
}
}
Loader {
id: imagePreviewLoader
active: ( display.content['@type'] === "messagePhoto" )
asynchronous: true
width: parent.width width: parent.width
height: parent.width * 2 / 3 sourceComponent: imagePreviewComponent
visible: display.content['@type'] === "messagePhoto"
} }
StickerPreview { Component {
id: messageStickerPreview id: stickerPreviewComponent
stickerData: ( display.content['@type'] === "messageSticker" ) ? display.content.sticker : "" StickerPreview {
visible: display.content['@type'] === "messageSticker" id: messageStickerPreview
anchors.horizontalCenter: parent.horizontalCenter stickerData: ( display.content['@type'] === "messageSticker" ) ? display.content.sticker : ""
visible: display.content['@type'] === "messageSticker"
anchors.horizontalCenter: parent.horizontalCenter
}
} }
VideoPreview { Loader {
id: messageVideoPreview id: stickerPreviewLoader
videoData: ( display.content['@type'] === "messageVideo" ) ? display.content.video : ( ( display.content['@type'] === "messageAnimation" ) ? display.content.animation : "") active: ( display.content['@type'] === "messageSticker" )
asynchronous: true
width: parent.width width: parent.width
height: ( display.content['@type'] === "messageVideo" ) ? Functions.getVideoHeight(width, display.content.video) : Functions.getVideoHeight(width, display.content.animation) sourceComponent: stickerPreviewComponent
visible: ( display.content['@type'] === "messageVideo" || display.content['@type'] === "messageAnimation" )
onScreen: chatPage.status === PageStatus.Active
} }
AudioPreview { Component {
id: messageAudioPreview id: videoPreviewComponent
audioData: ( display.content['@type'] === "messageVoiceNote" ) ? display.content.voice_note : ( ( display.content['@type'] === "messageAudio" ) ? display.content.audio : "") VideoPreview {
id: messageVideoPreview
videoData: ( display.content['@type'] === "messageVideo" ) ? display.content.video : ( ( display.content['@type'] === "messageAnimation" ) ? display.content.animation : "")
width: parent.width
height: ( display.content['@type'] === "messageVideo" ) ? Functions.getVideoHeight(width, display.content.video) : Functions.getVideoHeight(width, display.content.animation)
visible: ( display.content['@type'] === "messageVideo" || display.content['@type'] === "messageAnimation" )
onScreen: chatPage.status === PageStatus.Active
}
}
Loader {
id: videoPreviewLoader
active: (( display.content['@type'] === "messageVideo" ) || ( display.content['@type'] === "messageAnimation" ))
asynchronous: true
width: parent.width width: parent.width
height: parent.width / 2 sourceComponent: videoPreviewComponent
visible: ( display.content['@type'] === "messageVoiceNote" || display.content['@type'] === "messageAudio" )
onScreen: chatPage.status === PageStatus.Active
} }
DocumentPreview { Component {
id: messageDocumentPreview id: audioPreviewComponent
documentData: ( display.content['@type'] === "messageDocument" ) ? display.content.document : "" AudioPreview {
visible: display.content['@type'] === "messageDocument" id: messageAudioPreview
audioData: ( display.content['@type'] === "messageVoiceNote" ) ? display.content.voice_note : ( ( display.content['@type'] === "messageAudio" ) ? display.content.audio : "")
width: parent.width
height: parent.width / 2
visible: ( display.content['@type'] === "messageVoiceNote" || display.content['@type'] === "messageAudio" )
onScreen: chatPage.status === PageStatus.Active
}
}
Loader {
id: audioPreviewLoader
active: (( display.content['@type'] === "messageVoiceNote" ) || ( display.content['@type'] === "messageAudio" ))
asynchronous: true
width: parent.width
sourceComponent: audioPreviewComponent
}
Component {
id: documentPreviewComponent
DocumentPreview {
id: messageDocumentPreview
documentData: ( display.content['@type'] === "messageDocument" ) ? display.content.document : ""
visible: display.content['@type'] === "messageDocument"
}
}
Loader {
id: documentPreviewLoader
active: ( display.content['@type'] === "messageDocument" )
asynchronous: true
width: parent.width
sourceComponent: documentPreviewComponent
} }
Timer { Timer {

View file

@ -11,8 +11,8 @@ Name: harbour-fernschreiber
# << macros # << macros
Summary: Fernschreiber is a Telegram client for Sailfish OS Summary: Fernschreiber is a Telegram client for Sailfish OS
Version: 0.1 Version: 0.2
Release: 6 Release: 1
Group: Qt/Qt Group: Qt/Qt
License: LICENSE License: LICENSE
URL: http://werkwolf.eu/ URL: http://werkwolf.eu/

View file

@ -1,7 +1,7 @@
Name: harbour-fernschreiber Name: harbour-fernschreiber
Summary: Fernschreiber is a Telegram client for Sailfish OS Summary: Fernschreiber is a Telegram client for Sailfish OS
Version: 0.1 Version: 0.2
Release: 6 Release: 1
# The contents of the Group field should be one of the groups listed here: # The contents of the Group field should be one of the groups listed here:
# https://github.com/mer-tools/spectacle/blob/master/data/GROUPS # https://github.com/mer-tools/spectacle/blob/master/data/GROUPS
Group: Qt/Qt Group: Qt/Qt

View file

@ -631,7 +631,7 @@ void TDLibWrapper::setInitialParameters()
QSettings hardwareSettings("/etc/hw-release", QSettings::NativeFormat); QSettings hardwareSettings("/etc/hw-release", QSettings::NativeFormat);
initialParameters.insert("device_model", hardwareSettings.value("NAME", "Unknown Mobile Device").toString()); initialParameters.insert("device_model", hardwareSettings.value("NAME", "Unknown Mobile Device").toString());
initialParameters.insert("system_version", QSysInfo::prettyProductName()); initialParameters.insert("system_version", QSysInfo::prettyProductName());
initialParameters.insert("application_version", "0.1"); initialParameters.insert("application_version", "0.2");
requestObject.insert("parameters", initialParameters); requestObject.insert("parameters", initialParameters);
this->sendRequest(requestObject); this->sendRequest(requestObject);
} }