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

src/app/chat/views/gif.nim

@@ -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.} =
+  proc dataLoaded*(self: GifView) {.signal.}
-    result = newQVariant(self.items)
 
-  proc itemsLoaded*(self: GifView) {.signal.}
+  proc getColumnAList*(self: GifView): QVariant {.slot.} =
+    result = newQVariant(self.columnA)
 
-  QtProperty[QVariant] items:
+  QtProperty[QVariant] columnA:
-    read = getItemsList
+    read = getColumnAList
-    notify = itemsLoaded
+    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.updateColumns(data)
-    self.itemsLoaded()
 
   proc search*(self: GifView, query: string) {.slot.} =
     let data = self.client.search(query)
-    self.items.setNewData(data)
+    self.updateColumns(data)
-    self.itemsLoaded()
-  

src/status/gif.nim

@@ -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] =

ui/shared/status/StatusGifColumn.qml

@@ -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}
+}
+##^##*/

ui/shared/status/StatusGifPopup.qml

@@ -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
+                StatusGifColumn {
-
+                    gifList.model: chatsModel.gif.columnA
-                Repeater {
+                    gifWidth: (popup.width / 3) - 12
-                    id: gifSectionsRepeater
+                    gifSelected: popup.gifSelected
-                    model: chatsModel.gif.items
-
-                    delegate: Rectangle {
-                        width: animation.width
-                        height: animation.height
-
-                        AnimatedImage {
-                            id: animation
-                            source: model.url
                 }
 
-                        MouseArea {
+                StatusGifColumn {
-                            anchors.fill: parent
+                    gifList.model: chatsModel.gif.columnB
-                            onClicked: function (event) {
+                    gifWidth: (popup.width / 3) - 12
-                                gifSelected(event, model.url)
+                    gifSelected: popup.gifSelected
-                            }
+                }
-                        }
+
-                    }
+                StatusGifColumn {
+                    gifList.model: chatsModel.gif.columnC
+                    gifWidth: (popup.width / 3) - 12
+                    gifSelected: popup.gifSelected
                 }
             }
+
         }
     }
 }

ui/shared/status/qmldir

@@ -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