feat(@desktop/wallet): Make images match their aspect ratio but still…

… have min width and height in collectible details Also make images zoom to cropped when visible in the collectibles list view fixes #14203
status-im · Apr 30, 2024 · ade09c4 · ade09c4
1 parent 792e8d7
commit ade09c4
Show file tree

Hide file tree

Showing 5 changed files with 82 additions and 37 deletions.
diff --git a/ui/StatusQ/src/StatusQ/Components/StatusRoundedMedia.qml b/ui/StatusQ/src/StatusQ/Components/StatusRoundedMedia.qml
@@ -71,6 +71,25 @@ StatusRoundedComponent {
     */
     property url fallbackImageUrl
 
+    /*!
+        \qmlproperty url StatusRoundedMedia::fillMode
+
+        helps set fillModel for the Media file loaded
+
+    */
+    property int fillMode: Image.PreserveAspectFit
+
+    /*!
+        \qmlproperty url StatusRoundedMedia::maxDimension
+
+        is used to set dimension for the image in case of portrait or landscape
+        when fillMode = Image.PreserveAspectFit
+
+        if not set the width/height of parent will be considered
+
+    */
+    property int manualMaxDimension: 0
+
     readonly property int componentMediaType: {
         if (root.mediaType.startsWith("image")) {
             return StatusRoundedMedia.MediaType.Image
@@ -112,67 +131,92 @@ StatusRoundedComponent {
         }
     }
 
-    Loader {
-        id: mediaLoader
-        anchors.fill: parent
-        asynchronous: true
-        visible: !root.isError && !root.isLoading
-    }
+    implicitWidth: !mediaLoader.item || mediaLoader.item.paintedWidth === 0 ? root.manualMaxDimension: mediaLoader.item.paintedWidth
+    implicitHeight: !mediaLoader.item || mediaLoader.item.paintedHeight === 0 ? root.manualMaxDimension: mediaLoader.item.paintedHeight
+    clip: true
 
     Component.onCompleted: updateMediaLoader()
     onMediaUrlChanged: updateMediaLoader()
     onComponentMediaTypeChanged: updateMediaLoader()
     onFallbackImageUrlChanged: updateMediaLoader()
 
+    Loader {
+        id: mediaLoader
+        anchors.centerIn: parent
+        width: root.manualMaxDimension === 0 ? parent.width : root.manualMaxDimension
+        height: root.manualMaxDimension === 0 ? parent.height : root.manualMaxDimension
+        asynchronous: true
+        visible: !root.isError && !root.isLoading
+    }
+
     function updateMediaLoader() {
         d.reset()
         if (root.mediaUrl !== "") {
             if (componentMediaType === StatusRoundedMedia.MediaType.Image) {
-                mediaLoader.setSource("StatusAnimatedImage.qml",
-                                    {
-                                        "source": root.mediaUrl
-                                    });
+                mediaLoader.sourceComponent = animatedImage
                 return
             } else if (componentMediaType === StatusRoundedMedia.MediaType.Video) {
-                mediaLoader.setSource("StatusVideo.qml",
-                                    {
-                                        "player.source": root.mediaUrl
-                                    });
+                mediaLoader.sourceComponent = videoComponent
                 return
             }
         }
-        setFallbackImage()
+        mediaLoader.sourceComponent = fallbackImage
     }
 
     function processError() {
         if (!d.isFallback) {
             // AnimatedImage sometimes cannot load stuff that plan Image can, try that first
             if (componentMediaType === StatusRoundedMedia.MediaType.Image && d.errorCounter <= 1) {
-                mediaLoader.setSource("StatusImage.qml",
-                                    {
-                                        "source": root.mediaUrl
-                                    })
+                mediaLoader.sourceComponent = mainImage
                 return
             } else if (root.fallbackImageUrl !== "") {
-                setFallbackImage()
+                mediaLoader.sourceComponent = fallbackImage
                 return
             }
         }
-        setEmptyComponent()
+        mediaLoader.sourceComponent = emptyComponent
+    }
+
+    Component {
+        id: animatedImage
+        StatusAnimatedImage {
+            property bool imageResized: false
+            source: root.mediaUrl
+            fillMode: root.fillMode
+        }
     }
 
-    function setFallbackImage() {
-        d.isFallback = true
-        mediaLoader.setSource("StatusImage.qml",
-                            {
-                                "source": root.fallbackImageUrl
-                            })
+    Component {
+        id: videoComponent
+        StatusVideo {
+            player.source: root.mediaUrl
+            fillMode: root.fillMode
+        }
+    }
+
+    Component {
+        id: mainImage
+        StatusImage {
+            property bool imageResized: false
+            source: root.mediaUrl
+            fillMode: root.fillMode
+        }
     }
 
-    function setEmptyComponent() {
-        mediaLoader.setSource("StatusImage.qml",
-                            {
-                                "source": ""
-                            });
+    Component {
+        id: fallbackImage
+        StatusImage {
+            property bool imageResized: false
+            source: root.fallbackImageUrl
+            fillMode: root.fillMode
+        }
+    }
+
+    Component {
+        id: emptyComponent
+        StatusImage {
+            source: ""
+            fillMode: root.fillMode
+        }
     }
 }
diff --git a/ui/StatusQ/src/StatusQ/Components/StatusVideo.qml b/ui/StatusQ/src/StatusQ/Components/StatusVideo.qml
@@ -33,6 +33,7 @@ Item {
 
     property alias player: player
     property alias output: output
+    property alias fillMode: output.fillMode
 
     MediaPlayer {
         id: player

diff --git a/ui/app/AppLayouts/Communities/panels/PrivilegedTokenArtworkPanel.qml b/ui/app/AppLayouts/Communities/panels/PrivilegedTokenArtworkPanel.qml
@@ -16,6 +16,7 @@ Control {
 
     property bool showTag: false
     property int size: PrivilegedTokenArtworkPanel.Size.Small
+    property int fillMode: Image.PreserveAspectFit
 
     property alias artwork: image.source
     property alias color: icon.color
@@ -86,7 +87,7 @@ Control {
             anchors.centerIn: parent
             width: d.imageSize
             height: width
-            fillMode: Image.PreserveAspectFit
+            fillMode: root.fillMode
             layer.enabled: true
             layer.effect: OpacityMask {
                 maskSource: Rectangle {

diff --git a/ui/app/AppLayouts/Wallet/views/collectibles/CollectibleDetailView.qml b/ui/app/AppLayouts/Wallet/views/collectibles/CollectibleDetailView.qml
@@ -292,15 +292,12 @@ Item {
          StatusRoundedMedia {
                 id: collectibleImage
                 readonly property bool isEmpty: !mediaUrl.toString() && !fallbackImageUrl.toString()
-                width: 248
-                height: width
                 radius: Style.current.radius
                 color: isError || isEmpty ? Theme.palette.baseColor5 : collectible.backgroundColor
-                border.color: Theme.palette.directColor8
-                border.width: 1
                 mediaUrl: collectible.mediaUrl ?? ""
                 mediaType: modelIndex === 0 && !!collectible ? collectible.mediaType : ""
                 fallbackImageUrl: collectible.imageUrl
+                manualMaxDimension: 240
 
                 Column {
                     anchors.centerIn: parent

diff --git a/ui/app/AppLayouts/Wallet/views/collectibles/CollectibleView.qml b/ui/app/AppLayouts/Wallet/views/collectibles/CollectibleView.qml
@@ -92,6 +92,7 @@ Control {
             fallbackImageUrl: root.fallbackImageUrl
             showLoadingIndicator: true
             color: root.isLoading ? "transparent" : root.backgroundColor
+            fillMode: Image.PreserveAspectCrop
 
             Loader {
                 anchors.fill: parent
@@ -119,6 +120,7 @@ Control {
             size: PrivilegedTokenArtworkPanel.Size.Medium
             artwork: root.fallbackImageUrl
             color: root.ornamentColor
+            fillMode: Image.PreserveAspectCrop
             isOwner: root.privilegesLevel === Constants.TokenPrivilegesLevel.Owner
 
             Loader {