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

feat(@desktop/chat): display gif with 3 columns

This commit is contained in:
Anthony Laibe 2021-07-29 15:33:22 +02:00 committed by Iuri Matias
parent edc5bd81c0
commit c5051d4d4f
5 changed files with 120 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
src/app/chat/views/gif.nim
View File

@ -7,7 +7,9 @@ import ../../../status/gif
QtObject:
type GifView* = ref object of QObject
items*: GifList
columnA*: GifList
columnB*: GifList
columnC*: GifList
client: GifClient
proc setup(self: GifView) =
@ -20,25 +22,62 @@ QtObject:
new(result, delete)
result = GifView()
result.client = newGifClient()
result.items = newGifList()
result.columnA = newGifList()
result.columnB = newGifList()
result.columnC = newGifList()
result.setup()
proc getItemsList*(self: GifView): QVariant {.slot.} =
result = newQVariant(self.items)
proc dataLoaded*(self: GifView) {.signal.}
proc itemsLoaded*(self: GifView) {.signal.}
proc getColumnAList*(self: GifView): QVariant {.slot.} =
result = newQVariant(self.columnA)
QtProperty[QVariant] items:
read = getItemsList
notify = itemsLoaded
QtProperty[QVariant] columnA:
read = getColumnAList
notify = dataLoaded
proc getColumnBList*(self: GifView): QVariant {.slot.} =
result = newQVariant(self.columnB)
QtProperty[QVariant] columnB:
read = getColumnBList
notify = dataLoaded
proc getColumnCList*(self: GifView): QVariant {.slot.} =
result = newQVariant(self.columnC)
QtProperty[QVariant] columnC:
read = getColumnCList
notify = dataLoaded
proc updateColumns(self: GifView, data: seq[GifItem]) =
var columnAData: seq[GifItem] = @[]
var columnAHeight = 0
var columnBData: seq[GifItem] = @[]
var columnBHeight = 0
var columnCData: seq[GifItem] = @[]
var columnCHeight = 0
for item in data:
if columnAHeight <= columnBHeight:
columnAData.add(item)
columnAHeight += item.height
elif columnBHeight <= columnCHeight:
columnBData.add(item)
columnBHeight += item.height
else:
columnCData.add(item)
columnCHeight += item.height
self.columnA.setNewData(columnAData)
self.columnB.setNewData(columnBData)
self.columnC.setNewData(columnCData)
self.dataLoaded()
proc load*(self: GifView) {.slot.} =
let data = self.client.getTrendings()
self.items.setNewData(data)
self.itemsLoaded()
self.updateColumns(data)
proc search*(self: GifView, query: string) {.slot.} =
let data = self.client.search(query)
self.items.setNewData(data)
self.itemsLoaded()
self.updateColumns(data)

7
src/status/gif.nim
View File

@ -14,19 +14,21 @@ let TENOR_API_KEY_RESOLVED =
TENOR_API_KEY
const baseUrl = "https://g.tenor.com/v1/"
let defaultParams = fmt("&media_filter=basic&limit=10&key={TENOR_API_KEY_RESOLVED}")
let defaultParams = fmt("&media_filter=minimal&limit=50&key={TENOR_API_KEY_RESOLVED}")
type
GifItem* = object
id*: int
title*: string
url*: string
height*: int
proc toGifItem(jsonMsg: JsonNode): GifItem =
return GifItem(
id: jsonMsg{"id"}.getInt,
title: jsonMsg{"title"}.getStr,
url: jsonMsg{"media"}[0]["gif"]["url"].getStr
url: jsonMsg{"media"}[0]["gif"]["url"].getStr,
height: jsonMsg{"media"}[0]["gif"]["dims"][1].getInt
)
proc `$`*(self: GifItem): string =
@ -51,6 +53,7 @@ proc tenorQuery(self: GifClient, path: string): seq[GifItem] =
return items
except:
echo getCurrentExceptionMsg()
return @[]
proc search*(self: GifClient, query: string): seq[GifItem] =

41
ui/shared/status/StatusGifColumn.qml Normal file
View File

@ -0,0 +1,41 @@
import QtQuick 2.13
import QtQuick.Controls 2.13
import QtQuick.Layouts 1.3
Column {
id: root
spacing: 4
property alias gifList: repeater
property var gifWidth: 0
property var gifSelected: function () {}
Repeater {
id: repeater
delegate: Rectangle {
height: animation.height
width: root.gifWidth
AnimatedImage {
id: animation
source: model.url
width: root.gifWidth
fillMode: Image.PreserveAspectFit
}
MouseArea {
anchors.fill: parent
onClicked: function (event) {
root.gifSelected(event, model.url)
}
}
}
}
}
/*##^##
Designer {
D{i:0;formeditorColor:"#ffffff";height:440;width:360}
}
##^##*/

41
ui/shared/status/StatusGifPopup.qml
View File

@ -41,7 +41,7 @@ Popup {
Connections {
target: chatsModel.gif
onItemsLoaded: {
onDataLoaded: {
loading = false
}
}
@ -88,6 +88,7 @@ Popup {
Component {
id: gifItems
ScrollView {
id: scrollView
property ScrollBar vScrollBar: ScrollBar.vertical
@ -98,34 +99,30 @@ Popup {
ScrollBar.vertical.policy: ScrollBar.AlwaysOn
ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
Column {
Row {
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
spacing: 4
spacing: 5
Repeater {
id: gifSectionsRepeater
model: chatsModel.gif.items
delegate: Rectangle {
width: animation.width
height: animation.height
AnimatedImage {
id: animation
source: model.url
StatusGifColumn {
gifList.model: chatsModel.gif.columnA
gifWidth: (popup.width / 3) - 12
gifSelected: popup.gifSelected
}
MouseArea {
anchors.fill: parent
onClicked: function (event) {
gifSelected(event, model.url)
}
}
}
StatusGifColumn {
gifList.model: chatsModel.gif.columnB
gifWidth: (popup.width / 3) - 12
gifSelected: popup.gifSelected
}
StatusGifColumn {
gifList.model: chatsModel.gif.columnC
gifWidth: (popup.width / 3) - 12
gifSelected: popup.gifSelected
}
}
}
}
}

1
ui/shared/status/qmldir
View File

@ -6,6 +6,7 @@ StatusEmojiCategoryButton 1.0 StatusEmojiCategoryButton.qml
StatusEmojiPopup 1.0 StatusEmojiPopup.qml
StatusEmojiSection 1.0 StatusEmojiSection.qml
StatusGifPopup 1.0 StatusGifPopup.qml
StatusGifColumn 1.0 StatusGifColumn.qml
StatusIconButton 1.0 StatusIconButton.qml
StatusImageIdenticon 1.0 StatusImageIdenticon.qml
StatusLetterIdenticon 1.0 StatusLetterIdenticon.qml