status-im/status-desktop
2
0
Fork 0
mirror of https://github.com/status-im/status-desktop.git synced 2025-01-22 20:40:18 +00:00
Code Issues Projects Releases Wiki Activity

feat: enable animated gifs but stop them on click and out of focus

Browse Source
This commit is contained in:
Jonathan Rainville 2020-11-17 14:43:52 -05:00 committed by Iuri Matias
parent 9148be5718
commit 1ec28bca01
6 changed files with 36 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/CompactMessage.qml
View File

@ -137,6 +137,9 @@ Item {
ImageMessage {
color: Style.current.transparent
chatHorizontalPadding: 0
onClicked: {
chatTextItem.clickMessage(false, false, true, image)
}
}
}
}

26
ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/ImageLoader.qml
View File

@ -8,7 +8,9 @@ Item {
property int imageWidth: 350
property bool isCurrentUser: false
property url source
signal clicked(string source)
property bool playing: true
property bool isAnimated: !!source && source.toString().endsWith('.gif')
signal clicked(var image)
id: imageContainer
width: loadingImage.visible ? loadingImage.width : imageMessage.width
@ -34,11 +36,23 @@ Item {
}
}
Image {
Connections {
target: applicationWindow
onActiveChanged: {
if (applicationWindow.active === false) {
imageMessage.playing = false
} else {
imageMessage.playing = Qt.binding(function () {return imageContainer.playing})
}
}
}
AnimatedImage {
id: imageMessage
width: sourceSize.width > imageWidth ? imageWidth : sourceSize.width
fillMode: Image.PreserveAspectFit
source: imageContainer.source
playing: imageContainer.playing
onStatusChanged: {
if (imageMessage.status === Image.Error) {
loadingImage.hasError = true
@ -88,7 +102,13 @@ Item {
cursorShape: Qt.PointingHandCursor
anchors.fill: parent
onClicked: {
imageContainer.clicked(imageContainer.source)
if (imageContainer.isAnimated) {
// FIXME the ListView completely removes Items that scroll out of view
// so when we scroll backto the image, it gets reloaded and playing is reset
imageContainer.playing = !imageContainer.playing
return
}
imageContainer.clicked(imageMessage)
}
}
}

4
ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/ImageMessage.qml
View File

@ -5,7 +5,7 @@ Rectangle {
property int chatVerticalPadding: 12
property int chatHorizontalPadding: 12
property bool isCurrentUser: bool
signal clicked(string source)
signal clicked(var image)
id: imageChatBox
height: {
@ -47,7 +47,7 @@ Rectangle {
source: modelData
isCurrentUser: imageChatBox.isCurrentUser
onClicked: {
imageChatBox.clicked(source)
imageChatBox.clicked(image)
}
}
}

4
ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/MessageMouseArea.qml
View File

@ -11,9 +11,7 @@ MouseArea {
clickMessage(false, isSticker, false);
return;
}
if (mouse.button & Qt.LeftButton) {
if (isImage && !isSticker)
clickMessage(false, false, isImage, image);
if (mouse.button & Qt.LeftButton) {
return;
}
}

2
ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/NormalMessage.qml
View File

@ -221,7 +221,7 @@ Item {
ImageMessage {
isCurrentUser: messageItem.isCurrentUser
onClicked: {
chatTextItem.clickMessage(false, false, true, source)
chatTextItem.clickMessage(false, false, true, image)
}
}
}

12
ui/shared/status/StatusImageModal.qml
View File

@ -22,17 +22,17 @@ Popup {
padding: 0
function setPopupData(image) {
messageImage.source = image;
messageImage.source = image.source;
const maxHeight = applicationWindow.height - 80
const maxWidth = applicationWindow.width - 80
let maxHeight = applicationWindow.height - 80
let maxWidth = applicationWindow.width - 80
if (messageImage.sourceSize.width >= maxWidth || messageImage.sourceSize.height >= maxHeight) {
if (image.sourceSize.width >= maxWidth || image.sourceSize.height >= maxHeight) {
this.width = maxWidth
this.height = maxHeight
} else {
this.width = messageImage.sourceSize.width
this.height = messageImage.sourceSize.height
this.width = image.sourceSize.width
this.height = image.sourceSize.height
}
}