status-im
/
status-desktop
mirror of https://github.com/status-im/status-desktop.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix(images): Display image placeholder when image from album not loaded 

Fixes: #9990
This commit is contained in:
Boris Melnik 2023-04-05 19:13:41 +03:00
parent 0682672890
commit cbdc3e61b5
11 changed files with 48 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/app/modules/main/activity_center/module.nim
View File

@ -134,6 +134,7 @@ proc createMessageItemFromDto(self: Module, message: MessageDto, communityId: st
message.albumId,
if (len(message.albumId) == 0): @[] else: @[message.image],
if (len(message.albumId) == 0): @[] else: @[message.id],
message.albumImagesCount,
))
method convertToItems*(

4
src/app/modules/main/chat_section/chat_content/messages/module.nim
View File

@ -122,6 +122,7 @@ proc createFetchMoreMessagesItem(self: Module): Item =
albumId = "",
albumMessageImages = @[],
albumMessageIds = @[],
albumImagesCount = 0,
)
proc createChatIdentifierItem(self: Module): Item =
@ -180,6 +181,7 @@ proc createChatIdentifierItem(self: Module): Item =
albumId = "",
albumMessageImages = @[],
albumMessageIds = @[],
albumImagesCount = 0,
)
proc checkIfMessageLoadedAndScrollToItIfItIs(self: Module) =
@ -296,6 +298,7 @@ method newMessagesLoaded*(self: Module, messages: seq[MessageDto], reactions: se
message.albumId,
if (len(message.albumId) == 0): @[] else: @[message.image],
if (len(message.albumId) == 0): @[] else: @[message.id],
message.albumImagesCount,
)
for r in reactions:
@ -429,6 +432,7 @@ method messagesAdded*(self: Module, messages: seq[MessageDto]) =
message.albumId,
if (len(message.albumId) == 0): @[] else: @[message.image],
if (len(message.albumId) == 0): @[] else: @[message.id],
message.albumImagesCount,
)
items.add(item)

1
src/app/modules/main/chat_section/chat_content/module.nim
View File

@ -223,6 +223,7 @@ proc buildPinnedMessageItem(self: Module, messageId: string, actionInitiatedBy:
message.albumId,
if (len(message.albumId) == 0): @[] else: @[message.image],
if (len(message.albumId) == 0): @[] else: @[message.id],
message.albumImagesCount,
)
item.pinned = true
item.pinnedBy = actionInitiatedBy

8
src/app/modules/shared_models/message_item.nim
View File

@ -59,6 +59,7 @@ type
albumId: string
albumMessageImages: seq[string]
albumMessageIds: seq[string]
albumImagesCount: int
proc initItem*(
id,
@ -103,6 +104,7 @@ proc initItem*(
albumId: string,
albumMessageImages: seq[string],
albumMessageIds: seq[string],
albumImagesCount: int,
): Item =
result = Item()
result.id = id
@ -152,6 +154,7 @@ proc initItem*(
result.albumId = albumId
result.albumMessageImages = albumMessageImages
result.albumMessageIds = albumMessageIds
result.albumImagesCount = albumImagesCount
if quotedMessageContentType == ContentType.DiscordMessage.int:
result.quotedMessageAuthorDisplayName = quotedMessageDiscordMessage.author.name
@ -226,6 +229,7 @@ proc initNewMessagesMarkerItem*(clock, timestamp: int64): Item =
albumId = "",
albumMessageImages = @[],
albumMessageIds = @[],
albumImagesCount = 0,
)
proc `$`*(self: Item): string =
@ -366,6 +370,9 @@ proc albumMessageIds*(self: Item): seq[string] {.inline.} =
proc `albumMessageIds=`*(self: Item, value: seq[string]) {.inline.} =
self.albumMessageIds = value
proc albumImagesCount*(self: Item): int {.inline.} =
self.albumImagesCount
proc messageContainsMentions*(self: Item): bool {.inline.} =
self.messageContainsMentions
@ -491,6 +498,7 @@ proc toJsonNode*(self: Item): JsonNode =
"albumId": self.albumId,
"albumMessageImages": self.albumMessageImages,
"albumMessageIds": self.albumMessageIds,
"albumImagesCount": self.albumImagesCount,
}
proc editMode*(self: Item): bool {.inline.} =

4
src/app/modules/shared_models/message_model.nim
View File

@ -62,6 +62,7 @@ type
QuotedMessageAuthorIsContact
QuotedMessageAuthorColorHash
AlbumMessageImages
AlbumImagesCount
QtObject:
type
@ -163,6 +164,7 @@ QtObject:
ModelRole.QuotedMessageAuthorIsContact.int: "quotedMessageAuthorIsContact",
ModelRole.QuotedMessageAuthorColorHash.int: "quotedMessageAuthorColorHash",
ModelRole.AlbumMessageImages.int: "albumMessageImages",
ModelRole.AlbumImagesCount.int: "albumImagesCount",
}.toTable
method data(self: Model, index: QModelIndex, role: int): QVariant =
@ -309,6 +311,8 @@ QtObject:
result = newQVariant(item.messageAttachments.join(" "))
of ModelRole.AlbumMessageImages:
result = newQVariant(item.albumMessageImages.join(" "))
of ModelRole.AlbumImagesCount:
result = newQVariant(item.albumImagesCount)
proc updateItemAtIndex(self: Model, index: int) =
let ind = self.createIndex(index, 0, nil)

2
src/app_service/service/message/dto/message.nim
View File

@ -104,6 +104,7 @@ type MessageDto* = object
sticker*: Sticker
image*: string
albumId*: string
albumImagesCount*: int
gapParameters*: GapParameters
timestamp*: int64
contentType*: int
@ -224,6 +225,7 @@ proc toMessageDto*(jsonObj: JsonNode): MessageDto =
discard jsonObj.getProp("contactRequestState", result.contactRequestState)
discard jsonObj.getProp("image", result.image)
discard jsonObj.getProp("albumId", result.albumId)
discard jsonObj.getProp("albumImagesCount", result.albumImagesCount)
discard jsonObj.getProp("editedAt", result.editedAt)
discard jsonObj.getProp("deleted", result.deleted)
discard jsonObj.getProp("deletedForMe", result.deletedForMe)

1
test/nim/message_model_test.nim
View File

@ -52,6 +52,7 @@ proc createTestMessageItem(id: string, clock: int64): Item =
albumId = "",
albumMessageImages = @[],
albumMessageIds = @[],
albumImagesCount = 0,
)
let message0_chatIdentifier = createTestMessageItem("chat-identifier", -2)

27
ui/StatusQ/src/StatusQ/Components/StatusMessage.qml
View File

@ -317,14 +317,33 @@ Control {
width: messageLayout.width
spacing: 9
Repeater {
model: root.messageDetails.album
StatusImageMessage {
model: root.messageDetails.albumCount
Loader {
active: true
property bool imageLoaded: index < root.messageDetails.album.length
property string imagePath: imageLoaded ? root.messageDetails.album[index] : ""
sourceComponent: imageLoaded ? imageComponent : imagePlaceholderComponent
}
Component {
id: imageComponent
StatusImageMessage {
Layout.alignment: Qt.AlignLeft
imageWidth: Math.min(parent.width / root.messageDetails.album.length - 9 * (root.messageDetails.album.length - 1), 144)
source: modelData
imageWidth: Math.min(parent.width / root.messageDetails.albumCount - 9 * (root.messageDetails.albumCount - 1), 144)
source: root.messageDetails.album[index]
onClicked: root.imageClicked(image, mouse, imageSource)
shapeType: root.messageDetails.amISender ? StatusImageMessage.ShapeType.RIGHT_ROUNDED : StatusImageMessage.ShapeType.LEFT_ROUNDED
}
}
Component {
id: imagePlaceholderComponent
LoadingComponent {
radius: 4
height: 194
width: 144
}
}
}
Item {

1
ui/StatusQ/src/StatusQ/Components/StatusMessageDetails.qml
View File

@ -13,4 +13,5 @@ QtObject {
property string messageContent: ""
property string messageOriginInfo: ""
property var album: []
property int albumCount: 0
}

1
ui/app/AppLayouts/Chat/views/ChatMessagesView.qml
View File

@ -293,6 +293,7 @@ Item {
unparsedText: model.unparsedText
messageImage: model.messageImage
album: model.albumMessageImages.split(" ")
albumCount: model.albumImagesCount
messageTimestamp: model.timestamp
messageOutgoingStatus: model.outgoingStatus
resendError: model.resendError

2
ui/imports/shared/views/chat/MessageView.qml
View File

@ -77,6 +77,7 @@ Loader {
property var quotedMessageAuthorDetailsColorHash
property var album: []
property int albumCount: 0
// External behavior changers
property bool isInPinnedPopup: false // The pinned popup limits the number of buttons shown
@ -586,6 +587,7 @@ Loader {
return "";
}
album: root.album
albumCount: root.albumCount
amISender: root.amISender
sender.id: root.senderIsEnsVerified ? "" : Utils.getCompressedPk(root.senderId)