harbour-fernschreiber/qml/components/AudioPreview.qml

481 lines
18 KiB
QML
Raw Normal View History

2020-08-28 15:14:05 +03:00
/*
Copyright (C) 2020 Sebastian J. Wolf and other contributors
2020-08-28 15:14:05 +03:00
This file is part of Fernschreiber.
Fernschreiber 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 3 of the License, or
(at your option) any later version.
Fernschreiber is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with Fernschreiber. If not, see <http://www.gnu.org/licenses/>.
*/
2020-10-31 22:49:03 +03:00
import QtQuick 2.6
2020-08-28 15:14:05 +03:00
import Sailfish.Silica 1.0
2020-10-31 22:50:32 +03:00
import QtMultimedia 5.6
2020-08-28 15:14:05 +03:00
import "../js/functions.js" as Functions
2020-11-20 23:58:26 +03:00
import "../js/debug.js" as Debug
2020-08-28 15:14:05 +03:00
Item {
id: audioMessageComponent
Reduce ChatPage.qml jit compile time First of all: Take all measurements I mention with a grain of salt – all of them are rough and not necessarily measured more than a few times. All times were measured on an Xperia X run via SDK. Visiting a chat page can take a long time, especially before the qml is cached by the engine. When opening it for the first time after application launch, it sometimes takes >1000ms from onClicked (OverviewPage) to Component.OnCompleted (Chatpage). Subsequent activations take roughly 470-480ms. With these changes, I was able to reduce these times to ~450ms for the first, ~100ms for subsequent activations of the ChatPage on my test device. Things changed: - The components for displaying extra content to a message are (mostly) gone and replaced by a single Loader. This Loader does not use sourceComponent to trade the initial compilation boost for a neglegible bit of runtime penalty. - Connections were consolidated - I was surprised how costly the inclusion of the RemorseItem was (compiling ~75ms, initializing up to ~20ms for every delegate). So I traded a bit for a compromise. deleteMessageRemorseItem is now defined on the appWindow level, where it gets a bit mitigated by the animations at application start. Also, only one deletion at a time is now possible. We can easily revert this change, but I thought it worthwhile despite its drawbacks. - profileThumbnailComponent is now defined directly as sourceComponent, removing the need for its id. Probably didn't do anything. - InReplyToRow had width: parent.width, so I removed horizontalCenter. Also probably didn't change compilation time at all. - Another compromise I was willing to take – your opinion may differ: The PickerPages took ages (~200ms) to just parse/compile inside those Components, so I replaced them with the "string notation" of pageStack.push. Drawback: The first time a picker gets activated, you'll see how slow it is. Subsequent activations aren't that bad – also for the other pickers.
2020-10-30 22:36:32 +03:00
property ListItem messageListItem
property MessageOverlayFlickable overlayFlickable
property var rawMessage: messageListItem ? messageListItem.myMessage : overlayFlickable.overlayMessage
Reduce ChatPage.qml jit compile time First of all: Take all measurements I mention with a grain of salt – all of them are rough and not necessarily measured more than a few times. All times were measured on an Xperia X run via SDK. Visiting a chat page can take a long time, especially before the qml is cached by the engine. When opening it for the first time after application launch, it sometimes takes >1000ms from onClicked (OverviewPage) to Component.OnCompleted (Chatpage). Subsequent activations take roughly 470-480ms. With these changes, I was able to reduce these times to ~450ms for the first, ~100ms for subsequent activations of the ChatPage on my test device. Things changed: - The components for displaying extra content to a message are (mostly) gone and replaced by a single Loader. This Loader does not use sourceComponent to trade the initial compilation boost for a neglegible bit of runtime penalty. - Connections were consolidated - I was surprised how costly the inclusion of the RemorseItem was (compiling ~75ms, initializing up to ~20ms for every delegate). So I traded a bit for a compromise. deleteMessageRemorseItem is now defined on the appWindow level, where it gets a bit mitigated by the animations at application start. Also, only one deletion at a time is now possible. We can easily revert this change, but I thought it worthwhile despite its drawbacks. - profileThumbnailComponent is now defined directly as sourceComponent, removing the need for its id. Probably didn't do anything. - InReplyToRow had width: parent.width, so I removed horizontalCenter. Also probably didn't change compilation time at all. - Another compromise I was willing to take – your opinion may differ: The PickerPages took ages (~200ms) to just parse/compile inside those Components, so I replaced them with the "string notation" of pageStack.push. Drawback: The first time a picker gets activated, you'll see how slow it is. Subsequent activations aren't that bad – also for the other pickers.
2020-10-30 22:36:32 +03:00
property var audioData: ( rawMessage.content['@type'] === "messageVoiceNote" ) ? rawMessage.content.voice_note : ( ( rawMessage.content['@type'] === "messageAudio" ) ? rawMessage.content.audio : "");
2020-08-28 15:14:05 +03:00
property string audioUrl;
property int previewFileId;
property int audioFileId;
property bool onScreen: messageListItem ? messageListItem.page.status === PageStatus.Active : true
2020-08-28 15:14:05 +03:00
property string audioType : "voiceNote";
property bool highlighted;
signal clicked();
2020-08-28 15:14:05 +03:00
width: parent.width
Reduce ChatPage.qml jit compile time First of all: Take all measurements I mention with a grain of salt – all of them are rough and not necessarily measured more than a few times. All times were measured on an Xperia X run via SDK. Visiting a chat page can take a long time, especially before the qml is cached by the engine. When opening it for the first time after application launch, it sometimes takes >1000ms from onClicked (OverviewPage) to Component.OnCompleted (Chatpage). Subsequent activations take roughly 470-480ms. With these changes, I was able to reduce these times to ~450ms for the first, ~100ms for subsequent activations of the ChatPage on my test device. Things changed: - The components for displaying extra content to a message are (mostly) gone and replaced by a single Loader. This Loader does not use sourceComponent to trade the initial compilation boost for a neglegible bit of runtime penalty. - Connections were consolidated - I was surprised how costly the inclusion of the RemorseItem was (compiling ~75ms, initializing up to ~20ms for every delegate). So I traded a bit for a compromise. deleteMessageRemorseItem is now defined on the appWindow level, where it gets a bit mitigated by the animations at application start. Also, only one deletion at a time is now possible. We can easily revert this change, but I thought it worthwhile despite its drawbacks. - profileThumbnailComponent is now defined directly as sourceComponent, removing the need for its id. Probably didn't do anything. - InReplyToRow had width: parent.width, so I removed horizontalCenter. Also probably didn't change compilation time at all. - Another compromise I was willing to take – your opinion may differ: The PickerPages took ages (~200ms) to just parse/compile inside those Components, so I replaced them with the "string notation" of pageStack.push. Drawback: The first time a picker gets activated, you'll see how slow it is. Subsequent activations aren't that bad – also for the other pickers.
2020-10-30 22:36:32 +03:00
height: width / 2
2020-08-28 15:14:05 +03:00
function getTimeString(rawSeconds) {
var minutes = Math.floor( rawSeconds / 60 );
var seconds = rawSeconds - ( minutes * 60 );
if ( minutes < 10 ) {
minutes = "0" + minutes;
}
if ( seconds < 10 ) {
seconds = "0" + seconds;
}
return minutes + ":" + seconds;
}
Component.onCompleted: {
updateAudioThumbnail();
}
function updateAudioThumbnail() {
2020-08-29 17:58:48 +03:00
if (audioData) {
2020-08-28 15:14:05 +03:00
audioType = ( audioData['@type'] === "voiceNote" ) ? "voice" : "audio";
audioFileId = audioData[audioType].id;
if (typeof audioData.album_cover_thumbnail !== "undefined") {
previewFileId = audioData.album_cover_thumbnail.file.id;
if (audioData.album_cover_thumbnail.file.local.is_downloading_completed) {
placeholderImage.source = audioData.album_cover_thumbnail.file.local.path;
2020-08-28 15:14:05 +03:00
} else {
tdLibWrapper.downloadFile(previewFileId);
}
} else {
placeholderImage.source = "image://theme/icon-l-music?white";
placeholderImage.width = Theme.itemSizeLarge
placeholderImage.height = Theme.itemSizeLarge
}
}
}
function handlePlay() {
if (audioData[audioType].local.is_downloading_completed) {
audioUrl = audioData[audioType].local.path;
audioComponentLoader.active = true;
} else {
audioDownloadBusyIndicator.running = true;
tdLibWrapper.downloadFile(audioFileId);
}
}
Connections {
target: tdLibWrapper
onFileUpdated: {
if (typeof audioData === "object") {
if (fileInformation.local.is_downloading_completed) {
if (fileId === previewFileId) {
audioData.album_cover_thumbnail.file = fileInformation;
2020-08-28 15:14:05 +03:00
placeholderImage.source = fileInformation.local.path;
}
if (fileId === audioFileId) {
audioDownloadBusyIndicator.running = false;
audioData[audioType] = fileInformation;
audioUrl = fileInformation.local.path;
if (onScreen) {
audioComponentLoader.active = true;
}
}
}
if (fileId === audioFileId) {
downloadingProgressBar.maximumValue = fileInformation.size;
downloadingProgressBar.value = fileInformation.local.downloaded_size;
}
2020-08-28 15:14:05 +03:00
}
}
}
Image {
id: placeholderImage
width: parent.width
height: parent.height
anchors.centerIn: parent
2020-08-29 17:32:43 +03:00
asynchronous: true
2020-08-28 15:14:05 +03:00
fillMode: Image.PreserveAspectCrop
visible: status === Image.Ready ? true : false
layer.enabled: audioMessageComponent.highlighted
layer.effect: PressEffect { source: placeholderImage }
2020-08-28 15:14:05 +03:00
}
BackgroundImage {
id: backgroundImage
2020-08-28 15:14:05 +03:00
visible: placeholderImage.status !== Image.Ready
layer.enabled: audioMessageComponent.highlighted
layer.effect: PressEffect { source: backgroundImage }
2020-08-28 15:14:05 +03:00
}
Rectangle {
id: placeholderBackground
color: "black"
opacity: 0.3
height: parent.height
width: parent.width
visible: playButton.visible
}
Label {
visible: !!(audioData.performer || audioData.title)
color: placeholderBackground.visible ? "white" : Theme.secondaryHighlightColor
wrapMode: Text.Wrap
anchors {
fill: placeholderBackground
margins: Theme.paddingSmall
}
text: audioData.performer + (audioData.performer && audioData.title ? " - " : "") + audioData.title
font.pixelSize: Theme.fontSizeTiny
}
2020-08-28 15:14:05 +03:00
Column {
2020-08-28 15:14:05 +03:00
width: parent.width
height: downloadingProgressBar.height + audioControlRow.height
anchors.centerIn: parent
Row {
id: audioControlRow
2020-08-28 15:14:05 +03:00
width: parent.width
height: Theme.iconSizeLarge
Item {
2020-08-28 15:14:05 +03:00
height: Theme.iconSizeLarge
2020-12-28 23:20:10 +03:00
width: downloadItem.visible ? parent.width / 2 : parent.width
IconButton {
id: playButton
anchors.centerIn: parent
width: Theme.iconSizeLarge
height: Theme.iconSizeLarge
icon {
source: "image://theme/icon-l-play?white"
asynchronous: true
}
highlighted: audioMessageComponent.highlighted || down
visible: placeholderImage.status === Image.Ready ? true : false
onClicked: {
handlePlay();
2020-08-28 15:14:05 +03:00
}
}
BusyIndicator {
id: audioDownloadBusyIndicator
running: false
visible: running
anchors.centerIn: parent
size: BusyIndicatorSize.Large
}
2020-08-28 15:14:05 +03:00
}
2020-12-28 23:20:10 +03:00
Item {
id: downloadItem
width: parent.width / 2
height: Theme.iconSizeLarge
visible: audioData[audioType].local.is_downloading_completed
Rectangle {
color: Theme.primaryColor
opacity: Theme.opacityFaint
width: Theme.iconSizeLarge * 0.9
height: Theme.iconSizeLarge * 0.9
anchors.centerIn: parent
radius: width / 2
}
IconButton {
id: downloadButton
anchors.centerIn: parent
width: Theme.iconSizeLarge
height: Theme.iconSizeLarge
icon {
source: "image://theme/icon-m-cloud-download?white"
asynchronous: true
}
highlighted: audioMessageComponent.highlighted || down
onClicked: {
tdLibWrapper.copyFileToDownloads(audioData[audioType].local.path);
}
}
}
}
ProgressBar {
id: downloadingProgressBar
minimumValue: 0
maximumValue: 100
value: 0
visible: audioDownloadBusyIndicator.visible
width: parent.width
2020-08-28 15:14:05 +03:00
}
}
2020-08-28 15:14:05 +03:00
Rectangle {
id: audioErrorShade
width: parent.width
height: parent.height
color: "lightgrey"
visible: placeholderImage.status === Image.Error ? true : false
opacity: 0.3
}
Rectangle {
id: errorTextOverlay
color: "black"
opacity: 0.8
width: parent.width
height: parent.height
visible: false
}
Text {
id: errorText
visible: false
width: parent.width
color: Theme.primaryColor
font.pixelSize: Theme.fontSizeExtraSmall
horizontalAlignment: Text.AlignHCenter
anchors {
verticalCenter: parent.verticalCenter
}
wrapMode: Text.Wrap
text: ""
}
Loader {
id: audioComponentLoader
active: false
width: parent.width
height: parent.height
sourceComponent: audioComponent
}
Component {
id: audioComponent
Item {
width: parent ? parent.width : 0
height: parent ? parent.height : 0
Connections {
target: messageAudio
onPlaying: {
playButton.visible = false;
2020-12-28 23:20:10 +03:00
downloadItem.visible = false;
2020-08-28 15:14:05 +03:00
}
}
Connections {
target: audioMessageComponent
onClicked: {
if (messageAudio.playbackState === MediaPlayer.PlayingState) {
messageAudio.pause();
timeLeftItem.visible = true;
} else {
messageAudio.play();
}
}
}
2020-08-28 15:14:05 +03:00
Audio {
id: messageAudio
Component.onCompleted: {
if (messageAudio.error === MediaPlayer.NoError) {
messageAudio.play();
} else {
errorText.text = qsTr("Error loading audio! " + messageAudio.errorString)
errorTextOverlay.visible = true;
errorText.visible = true;
}
}
onStatusChanged: {
if (status == MediaPlayer.NoMedia) {
2020-11-20 23:58:26 +03:00
Debug.log("No Media");
2020-08-28 15:14:05 +03:00
audioBusyIndicator.visible = false;
}
if (status == MediaPlayer.Loading) {
2020-11-20 23:58:26 +03:00
Debug.log("Loading");
2020-08-28 15:14:05 +03:00
audioBusyIndicator.visible = true;
}
if (status == MediaPlayer.Loaded) {
2020-11-20 23:58:26 +03:00
Debug.log("Loaded");
2020-08-28 15:14:05 +03:00
audioBusyIndicator.visible = false;
}
if (status == MediaPlayer.Buffering) {
2020-11-20 23:58:26 +03:00
Debug.log("Buffering");
2020-08-28 15:14:05 +03:00
audioBusyIndicator.visible = true;
}
if (status == MediaPlayer.Stalled) {
2020-11-20 23:58:26 +03:00
Debug.log("Stalled");
2020-08-28 15:14:05 +03:00
audioBusyIndicator.visible = true;
}
if (status == MediaPlayer.Buffered) {
2020-11-20 23:58:26 +03:00
Debug.log("Buffered");
2020-08-28 15:14:05 +03:00
audioBusyIndicator.visible = false;
}
if (status == MediaPlayer.EndOfMedia) {
2020-11-20 23:58:26 +03:00
Debug.log("End of Media");
2020-08-28 15:14:05 +03:00
audioBusyIndicator.visible = false;
}
if (status == MediaPlayer.InvalidMedia) {
2020-11-20 23:58:26 +03:00
Debug.log("Invalid Media");
2020-08-28 15:14:05 +03:00
audioBusyIndicator.visible = false;
}
if (status == MediaPlayer.UnknownStatus) {
2020-11-20 23:58:26 +03:00
Debug.log("Unknown Status");
2020-08-28 15:14:05 +03:00
audioBusyIndicator.visible = false;
}
}
source: audioUrl
onStopped: {
playButton.visible = true;
2020-12-28 23:20:10 +03:00
downloadItem.visible = true;
2020-08-28 15:14:05 +03:00
audioComponentLoader.active = false;
}
}
BusyIndicator {
id: audioBusyIndicator
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
visible: false
running: visible
size: BusyIndicatorSize.Medium
}
Item {
id: timeLeftItem
width: parent.width
height: parent.height
anchors.bottom: parent.bottom
anchors.horizontalCenter: parent.horizontalCenter
opacity: visible ? 1 : 0
Behavior on opacity { NumberAnimation {} }
Rectangle {
id: positionTextOverlay
color: "black"
opacity: 0.3
width: parent.width
height: parent.height
anchors.bottom: parent.bottom
anchors.horizontalCenter: parent.horizontalCenter
visible: pausedRow.visible
}
Row {
id: pausedRow
width: parent.width
height: parent.height - ( messageAudioSlider.visible ? messageAudioSlider.height : 0 ) - ( positionText.visible ? positionText.height : 0 )
visible: audioComponentLoader.active && messageAudio.playbackState === MediaPlayer.PausedState
Item {
height: parent.height
2020-12-28 23:20:10 +03:00
width: parent.width / 2
IconButton {
2020-08-28 15:14:05 +03:00
id: pausedPlayButton
anchors.centerIn: parent
width: Theme.iconSizeLarge
height: Theme.iconSizeLarge
highlighted: audioMessageComponent.highlighted || down
icon {
asynchronous: true
source: "image://theme/icon-l-play?white"
}
onClicked: {
messageAudio.play();
2020-12-28 23:20:10 +03:00
}
}
}
Item {
id: pausedDownloadItem
width: parent.width / 2
height: parent.height
Rectangle {
color: Theme.primaryColor
opacity: Theme.opacityFaint
width: Theme.iconSizeLarge * 0.9
height: Theme.iconSizeLarge * 0.9
anchors.centerIn: parent
radius: width / 2
}
IconButton {
id: pausedDownloadButton
anchors.centerIn: parent
width: Theme.iconSizeLarge
height: Theme.iconSizeLarge
icon {
source: "image://theme/icon-m-cloud-download?white"
asynchronous: true
}
highlighted: audioMessageComponent.highlighted || down
onClicked: {
tdLibWrapper.copyFileToDownloads(audioData[audioType].local.path);
2020-08-28 15:14:05 +03:00
}
}
}
}
Slider {
id: messageAudioSlider
width: parent.width
anchors.horizontalCenter: parent.horizontalCenter
anchors.bottom: positionText.top
minimumValue: 0
maximumValue: messageAudio.duration ? messageAudio.duration : 0
stepSize: 1
value: messageAudio.position
enabled: messageAudio.seekable
visible: (messageAudio.duration > 0)
highlighted: audioMessageComponent.highlighted || down
2020-08-28 15:14:05 +03:00
onReleased: {
messageAudio.seek(Math.floor(value));
messageAudio.play();
}
valueText: getTimeString(Math.round((messageAudio.duration - messageAudioSlider.value) / 1000))
}
Text {
id: positionText
visible: messageAudio.duration === 0
color: Theme.primaryColor
font.pixelSize: Theme.fontSizeTiny
anchors {
bottom: parent.bottom
bottomMargin: Theme.paddingSmall
horizontalCenter: positionTextOverlay.horizontalCenter
}
wrapMode: Text.Wrap
text: ( messageAudio.duration - messageAudio.position ) > 0 ? getTimeString(Math.round((messageAudio.duration - messageAudio.position) / 1000)) : "-:-"
}
}
}
}
}