Show the blurhash of media attachments (#1370)

This uses https://github.com/whisperfish/blurhash-rs The implementation
uses the "stupid" approach of recompiling the blur every "app_logic"
call, but the rebuilds are rare enough that it's fine in practise

<img width="966" height="955" alt="image"
src="https://github.com/user-attachments/assets/87738d10-02f5-4594-8245-c22661162802"
/>

This also avoids needing to think about retaining resources for images,
so that's positive.

Author: DJMcNab

Cargo.lock

@@ -15,6 +15,7 @@ tracing.workspace = true
 xilem = { version = "0.3.0", path = "../xilem" }
 image = { workspace = true, features = ["jpeg", "png"] }
 anyhow = "1.0.98"
+blurhash = "0.2.3"
 
 [lints]
 workspace = true

placehero/Cargo.toml

@@ -42,7 +42,7 @@ impl Avatars {
     /// This will fetch the image data from the URL, and cache it.
     /// If the image hasn't yet loaded, will show a placeholder,
     ///
-    ///  Requires that this View is within a [`Self::provide`] call.
+    /// Requires that this View is within a [`Self::provide`] call.
     // TODO: ArcStr for URL?
     pub(crate) fn avatar<State: 'static, Action: 'static>(
         url: String,

placehero/src/avatars.rs

@@ -18,6 +18,8 @@ pub(crate) use timeline::Timeline;
 mod thread;
 pub(crate) use thread::thread;
 
+mod media;
+
 /// Renders the key parts of a Status, in a shared way.
 ///
 /// This is the shared functionality between a timeline and the list of views.
@@ -60,7 +62,14 @@ fn base_status<State: 'static>(
                 .text_alignment(TextAlign::End),
         ))
         .must_fill_major_axis(true),
-        prose(status_html_to_plaintext(status.content.as_str())),
+        prose(status_html_to_plaintext(status.content.as_str())).flex(CrossAxisAlignment::Start),
+        status
+            .media_attachments
+            .iter()
+            .map(|attachment| {
+                media::attachment::<State>(attachment).flex(CrossAxisAlignment::Start)
+            })
+            .collect::<Vec<_>>(),
         flex_row((
             label(format!("💬 {}", status.replies_count)).flex(1.0),
             label(format!("🔄 {}", status.reblogs_count)).flex(1.0),
@@ -70,6 +79,7 @@ fn base_status<State: 'static>(
             }),
         ))
         // TODO: The "extra space" amount actually ends up being zero, so this doesn't do anything.
-        .main_axis_alignment(MainAxisAlignment::SpaceEvenly),
+        .main_axis_alignment(MainAxisAlignment::SpaceEvenly)
+        .flex(CrossAxisAlignment::Start),
     )
 }

placehero/src/components.rs

@@ -0,0 +1,128 @@
+// Copyright 2025 the Xilem Authors
+// SPDX-License-Identifier: Apache-2.0
+
+use std::{
+    sync::Arc,
+    time::{Duration, Instant},
+};
+
+use megalodon::entities::{Attachment, attachment::AttachmentType};
+use xilem::{
+    Blob, Image, ImageFormat, WidgetView,
+    core::one_of::{OneOf, OneOf4},
+    masonry::properties::types::AsUnit,
+    view::{flex_col, image, prose, sized_box},
+};
+
+use crate::actions::Navigation;
+
+/// Render a single media attachment for use in a status.
+///
+/// This currently doesn't perform any caching.
+pub(crate) fn attachment<State: 'static>(
+    attachment: &Attachment,
+) -> impl WidgetView<State, Navigation> + use<State> {
+    match attachment.r#type {
+        AttachmentType::Audio => OneOf4::A(audio_attachment(attachment)),
+        AttachmentType::Video | AttachmentType::Gifv => OneOf::B(video_attachment(attachment)),
+        AttachmentType::Image => OneOf::C(image_attachment(attachment)),
+        AttachmentType::Unknown => OneOf::D(flex_col((
+            maybe_blurhash(attachment),
+            prose("Unknown media"),
+        ))),
+    }
+}
+
+/// If the attachment has a [blurhash], create a view of it.
+///
+/// This view currently does not cache the blurhash, or take any other steps to
+/// avoid recalculating the image.
+/// We haven't ran into this being a performance issue.
+fn maybe_blurhash<State: 'static>(
+    attachment: &Attachment,
+) -> Option<impl WidgetView<State, Navigation> + use<State>> {
+    let start = Instant::now();
+    let blurhash = attachment.blurhash.as_deref()?;
+    // TODO: Maybe use `memoize` here? We don't at the moment because we
+    // wouldn't have any way to pass the "attachment" in.
+    let (width, height) = 'dimensions: {
+        if let Some(meta) = &attachment.meta {
+            if let Some(width) = meta.width
+                && let Some(height) = meta.height
+            {
+                break 'dimensions (width, height);
+            } else if let Some(original) = &meta.original
+                && let Some(width) = original.width
+                && let Some(height) = original.height
+            {
+                break 'dimensions (width, height);
+            }
+        }
+        tracing::error!("Couldn't find dimensions for blurhash. Using default.");
+        (960, 960)
+    };
+    // TODO: Shrink width and height in a more sane way (e.g. aspect ratio which gets closest to 64x64?)
+    let blur_width = width / 16;
+    let blur_height = height / 16;
+    let result_bytes = blurhash::decode(blurhash, blur_width, blur_height, 1.0).ok()?;
+    let image_data = Blob::new(Arc::new(result_bytes));
+    // This image format doesn't seem to be documented by the blurhash crate, but this value seems to work.
+    let image2 = Image::new(image_data, ImageFormat::Rgba8, blur_width, blur_height);
+    let took = start.elapsed();
+    if took > Duration::from_millis(5) {
+        tracing::info!("Calculating a blurhash (size {blur_width}x{blur_height}) took {took:?}.");
+    }
+
+    // Retain the aspect ratio, and don't go bigger than the image's actual dimensions.
+    // Prefer to fill up the width rather than the height.
+    Some(sized_box(sized_box(image(&image2)).expand_width()).width(width.px()))
+}
+
+/// Show some useful info for audio attachments.
+fn audio_attachment<State: 'static>(
+    attachment: &Attachment,
+) -> impl WidgetView<State, Navigation> + use<State> {
+    flex_col((
+        maybe_blurhash(attachment),
+        prose("Audio File - Unsupported"),
+        attachment.meta.as_ref().map(|meta| {
+            meta.length
+                .as_deref()
+                .map(|it| prose(format!("Length: {it}")))
+        }),
+        attachment.description.as_deref().map(prose),
+    ))
+}
+
+/// Show some useful info for audio attachments.
+fn video_attachment<State: 'static>(
+    attachment: &Attachment,
+) -> impl WidgetView<State, Navigation> + use<State> {
+    flex_col((
+        maybe_blurhash(attachment),
+        prose("Video File - Unsupported"),
+        attachment.meta.as_ref().map(|meta| {
+            meta.length
+                .as_deref()
+                .map(|it| prose(format!("Length: {it}")))
+        }),
+        attachment.description.as_deref().map(prose),
+    ))
+}
+
+/// Show some useful info for audio attachments.
+fn image_attachment<State: 'static>(
+    attachment: &Attachment,
+) -> impl WidgetView<State, Navigation> + use<State> {
+    flex_col((
+        maybe_blurhash(attachment),
+        prose("Image File - Unsupported"),
+        attachment.meta.as_ref().map(|meta| {
+            meta.size
+                .as_deref()
+                .or_else(|| meta.original.as_ref().and_then(|it| it.size.as_deref()))
+                .map(|it| prose(format!("Dimensions: {it}")))
+        }),
+        attachment.description.as_deref().map(prose),
+    ))
+}