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

KomplexHubModule/Controls/ImageView.qml

@@ -17,18 +17,13 @@ Item
     property string thumbnail
     property string portrait
     property string landscape
-    property string small
     property string original
-    property string medium
-    property string large
-    property string extraLarge
+    property string fullScreen
     property string portraitSize
     property string landscapeSize
-    property string smallSize
-    property string originalSize
-    property string mediumSize
-    property string largeSize
-    property string extraLargeSize
+    property string fullScreenSize
+    property string backgroundPortrait
+    property string backgroundLandscape
 
     property int imageHeight
     property int imageWidth
@@ -38,7 +33,27 @@ Item
     Rectangle
     {
         anchors.fill: parent
-        color: palette.base.alpha(1)
+        color: palette.base
+
+        Image
+        {
+            id: backgroundImage
+            source: width > height ? backgroundLandscape : backgroundPortrait
+            transform: Image.PreserveAspectCrop
+            anchors.fill: parent
+            visible: false
+        }
+
+        MultiEffect
+        {
+            anchors.fill: backgroundImage
+            source: backgroundImage
+            blurEnabled: true
+            blurMax: 64
+            blur: 1.0
+            opacity: 0.25
+            saturation: -0.8
+        }
 
         ColumnLayout
         {
@@ -50,20 +65,32 @@ Item
             {
                 Layout.fillWidth: true
                 Layout.alignment: Qt.AlignTop| Qt.AlignHCenter
+                Layout.topMargin: 32
 
-                /** Spacer **/
-                Item { Layout.fillWidth: true }
-
-                Image
+                Rectangle
                 {
-                    width: imageWidth
-                    height: imageHeight
-                    transform: Image.PreserveAspectFit
-                    source: rootItem.large
-                }
+                    Layout.fillWidth: true
+                    Layout.preferredHeight: width / 1.77777777778
+                    Layout.maximumWidth: 800
+                    Layout.alignment: Qt.AlignHCenter
+                    color: palette.base.darker()
 
-                /** Spacer **/
-                Item { Layout.fillWidth: true }
+                    Throbber
+                    {
+                        anchors.fill: parent
+                        id: loadingThrobber
+                        visible: viewImage.status === Image.Loading
+                    }
+
+                    Image
+                    {
+                        id: viewImage
+                        anchors.fill: parent
+                        transform: Image.PreserveAspectCrop
+                        source: rootItem.thumbnail
+                        visible: !(status === Image.Loading)
+                    }
+                }
             }
 
             Text
@@ -91,7 +118,6 @@ Item
                 Layout.fillWidth: true
             }
 
-
             /** Spacer **/
             Item
             {
@@ -119,12 +145,9 @@ Item
                 {
                     id: downloadSelector
                     model:[
-                        "Small: " + smallSize,
-                        "Medium: " + mediumSize,
-                        "Large: " + largeSize,
-                        "Extra Large: " + extraLargeSize,
-                        "Portrait: " + portraitSize,
-                        "Landscape: " + landscapeSize
+                        "Screen (" + fullScreenSize + ")",
+                        "Portrait (" + portraitSize + ")",
+                        "Landscape (" + landscapeSize + ")"
                     ]
                     Layout.fillWidth: true
                     Layout.preferredHeight: 36
@@ -138,21 +161,6 @@ Item
                 }
             }
 
-            // Text {
-            //     property var texts: [
-            //         small,
-            //         medium,
-            //         large,
-            //         extraLarge,
-            //         portrait,
-            //         landscape
-            //     ]
-            //     text: texts[downloadSelector.currentIndex]
-            //     elide: Text.ElideLeft
-
-            //     Layout.fillWidth: true
-            // }
-
             /** Spacer **/
             Item { Layout.fillWidth: true; Layout.fillHeight: true }