Large update. Added Video, Image and Live item views. Added Live search

KomplexHubContent/pages/VideoSearchPage.qml

@@ -13,6 +13,9 @@ Item
 
     property string query
     readonly property bool searchable: paginator.searchable
+    property bool popup: false
+    property int resultWidth: 256
+    property int resultHeight: 245
 
     VideoSearchModel
     {
@@ -27,37 +30,94 @@ Item
         anchors.fill: parent
         model: searchModel
         loading: model.state === VideoSearchModel.Loading
+        visible: opacity > 0.01
 
         delegate: ItemDelegate
         {
             id: resultDelegate
 
-            width: 256
-            height: 245
+            width: resultWidth
+            height: resultHeight
 
-            required property string author
-            required property string description
             required property string uuid
-            required property string thumbnail
+            required property string author
             required property string authorId
+            required property string authorUrl
+            required property string thumbnail
             required property int index
 
             SearchResultItem
             {
                 anchors.fill: parent
-                title: parent.author
-                description: parent.description
+                author: parent.author
+                description: qsTr("No description available")
                 thumbnail: parent.thumbnail
                 uuid: parent.uuid
+                pexels: true
+                selected: paginator.currentIndex === parent.index
 
-                selected: resultDelegate.highlighted
-            }
+                onTriggered: () => paginator.currentIndex = parent.index
 
-            MouseArea
-            {
-                anchors.fill: parent
-                onClicked: paginator.currentIndex = index
+                onViewMoreTriggered: () =>
+                {
+                    showVideoPopup(parent.index)
+                }
             }
         }
     }
+
+    Rectangle
+    {
+        id: popupContainer
+        anchors.fill: parent
+        opacity: 0
+        visible: opacity > 0.01
+        color: palette.base
+
+        VideoView
+        {
+            id: viewMoreVideoPopup
+            anchors.fill: parent
+            opacity: 0
+
+            Behavior on opacity
+            {
+                NumberAnimation
+                {
+                    duration: 250
+                }
+            }
+        }
+
+        Behavior on opacity
+        {
+            NumberAnimation
+            {
+                duration: 250
+            }
+        }
+    }
+
+    function showVideoPopup(index)
+    {
+        searchModel.setItem(index)
+        viewMoreVideoPopup.author = searchModel.data(searchModel.index(index,0), VideoSearchModel.AuthorRole)
+        viewMoreVideoPopup.authorUrl = searchModel.data(searchModel.index(index,0), VideoSearchModel.AuthorUrlRole)
+        viewMoreVideoPopup.uuid = searchModel.data(searchModel.index(index,0), VideoSearchModel.UuidRole)
+        viewMoreVideoPopup.thumbnail = searchModel.data(searchModel.index(index,0), VideoSearchModel.ThumbnailRole)
+        viewMoreVideoPopup.modelIndex = index
+        viewMoreVideoPopup.model = searchModel.itemModel
+        viewMoreVideoPopup.opacity = 1
+        paginator.opacity = 0
+        popupContainer.opacity = 1
+        rootItem.popup = true
+    }
+
+    function closePopup()
+    {
+        viewMoreVideoPopup.opacity = 0
+        popupContainer.opacity = 0
+        paginator.opacity = 1
+        rootItem.popup = false
+    }
 }