Render thumbnails at correct aspect ratio

src/main.rs

@@ -98,6 +98,7 @@ fn main() -> anyhow::Result<()> {
                             .map(|_| ui::ImagePreview {
                                 asset_id: SharedString::new(),
                                 image: preview_image.clone(),
+                                ratio: 1.0,
                                 kind: ui::PreviewKind::None,
                             })
                             .collect::<VecModel<_>>(),
@@ -290,6 +291,7 @@ fn load_bucket(time_bucket: TimeBucketKey, app_weak: Weak<AppWindow>, api: Arc<A
                     .map(|entry| ui::ImagePreview {
                         asset_id: entry.id.to_shared_string(), // slint doesn't have a uuid type
                         kind: ui::PreviewKind::Thumbhash,
+                        ratio: entry.ratio as f32,
                         // TODO: don't unwrap
                         image: entry
                             .thumbhash
@@ -338,6 +340,8 @@ fn load_thumbnail(
             let mut preview = bucket.previews.row_data(i).expect("i is in the list");
             preview.image = slint::Image::from_rgba8(thumbnail.thumbnail.clone());
             preview.kind = ui::PreviewKind::Thumbnail;
+            preview.ratio =
+                thumbnail.thumbnail.width() as f32 / thumbnail.thumbnail.height() as f32;
             bucket.previews.set_row_data(i, preview);
         });
     });

ui/timeline.slint

@@ -7,10 +7,11 @@ component ImagePreview inherits Rectangle {
     in property <length> size: 32px;
     width: size;
     height: size;
+    clip: true;
 
     Image {
-        width: 100%;
+        width: preview.ratio < 1.0 ? size : size * preview.ratio;
-        height: 100%;
+        height: preview.ratio > 1.0 ? size : size / preview.ratio;
         source: preview.image;
     }
 

ui/types.slint

@@ -6,7 +6,13 @@ export enum PreviewKind {
 
 export struct ImagePreview {
     asset_id: string,
+
+    // Thumbnail/thumbhash/etc
     image: image,
+
+    // Image aspect ratio. (width/height)
+    ratio: float,
+
     kind: PreviewKind,
 }