Download images when clicking on them

This commit is contained in:
2026-05-24 13:53:30 +02:00
parent 7d75e010c7
commit fc721ba817
9 changed files with 118 additions and 35 deletions

1
Cargo.lock generated
View File

@@ -2487,6 +2487,7 @@ dependencies = [
"bytes",
"chrono",
"image",
"mime",
"reqwest",
"serde",
"serde_json",

View File

@@ -24,6 +24,7 @@ pub struct Api {
client: immich_sdk::Client,
buckets: Mutex<HashMap<TimeBucketKey, Arc<TimeBucket>>>,
thumbnails: Mutex<CacheMap<AssetId, Arc<AssetThumbnail>>>,
assets: Mutex<CacheMap<AssetId, Arc<AssetThumbnail>>>,
}
fn serialize_thumbnail(_id: &AssetId, thumbnail: &Arc<AssetThumbnail>) -> Vec<u8> {
@@ -61,12 +62,50 @@ fn deserialize_thumbnail(&id: &AssetId, bytes: &[u8]) -> anyhow::Result<Arc<Asse
impl Api {
pub fn new(client: immich_sdk::Client) -> Arc<Self> {
let client_ = client.clone();
let asset_fetcher = AsyncFnFetcher::new(move |asset_id: &AssetId| {
let client = client_.clone();
let asset_id = asset_id.clone();
tokio::spawn(async move {
let asset = client
.assets()
.download(asset_id)
.edited()
.execute()
.await
.context(anyhow!("Failed to get asset {asset_id}"))?;
let asset = asset
.decode()
.context(anyhow!("Failed to decode asset {asset_id}"))?
.into_rgba8();
let pixel_buffer = SharedPixelBuffer::<Rgba8Pixel>::clone_from_slice(
&asset,
asset.width(),
asset.height(),
);
Ok(Arc::new(AssetThumbnail {
id: asset_id,
thumbnail: pixel_buffer,
}))
})
});
let asset_map = CacheMap::new(
Arc::new(asset_fetcher) as Arc<dyn Fetcher<Arc<AssetThumbnail>, Key = AssetId>>,
"assets",
serialize_thumbnail,
deserialize_thumbnail,
)
.unwrap();
let client_ = client.clone();
let thumbnail_fetcher = AsyncFnFetcher::new(move |asset_id: &AssetId| {
let client = client_.clone();
let asset_id = asset_id.clone();
tokio::spawn(async move {
let response = client
let asset = client
.assets()
.thumbnail(asset_id)
.size(immich_sdk::AssetMediaSize::Thumbnail)
@@ -74,7 +113,7 @@ impl Api {
.await
.context(anyhow!("Failed to get asset thumbnail for {asset_id}"))?;
let thumbnail = response
let thumbnail = asset
.decode()
.context(anyhow!("Failed to decode asset thumbnail for {asset_id}"))?
.into_rgba8();
@@ -91,7 +130,7 @@ impl Api {
}))
})
});
let cache_map = CacheMap::new(
let thumbnail_map = CacheMap::new(
Arc::new(thumbnail_fetcher) as Arc<dyn Fetcher<Arc<AssetThumbnail>, Key = AssetId>>,
"thumbnails",
serialize_thumbnail,
@@ -102,7 +141,8 @@ impl Api {
Arc::new(Self {
client,
buckets: Default::default(),
thumbnails: Mutex::new(cache_map),
thumbnails: Mutex::new(thumbnail_map),
assets: Mutex::new(asset_map),
})
}
}
@@ -220,4 +260,11 @@ impl Api {
.await
.context(anyhow!("Failed to fetch thumbnail for {asset_id:?}"))
}
pub async fn get_asset(&self, asset_id: AssetId) -> anyhow::Result<Arc<AssetThumbnail>> {
let fetch = self.assets.lock().unwrap().get(asset_id);
fetch
.await
.context(anyhow!("Failed to fetch asset {asset_id:?}"))
}
}

View File

@@ -89,7 +89,7 @@ where
deserialize: fn(&K, &[u8]) -> anyhow::Result<V>,
) -> anyhow::Result<Self> {
let data_dir = BASE_DIRECTORIES
.create_cache_directory("thumbnails")
.create_cache_directory(cache_name)
.context(anyhow!(
"Failed to create XDG data folder for {cache_name:?}"
))?;

View File

@@ -139,7 +139,7 @@ fn start_api(app: &AppWindow, immich: &config::ImmichLogin) {
asset_id: SharedString::new(),
image: preview_image.clone(),
ratio: 1.0,
kind: ui::PreviewKind::None,
kind: ui::ImageKind::None,
})
.collect::<VecModel<_>>(),
),
@@ -170,6 +170,36 @@ fn start_api(app: &AppWindow, immich: &config::ImmichLogin) {
calculate_timeline_visibility(&app, api, scroll);
});
});
let app_weak = app.as_weak();
let api = api_.clone();
global.on_view_image(move |asset_id_str| {
tracing::info!("on_view_image({asset_id_str})");
let api = api.clone();
let app_weak = app_weak.clone();
tokio::spawn(async move {
let asset_id: AssetId = asset_id_str.parse().unwrap();
let asset = api.get_asset(asset_id).await.unwrap();
let image = asset.thumbnail.clone();
tracing::info!("got image for {asset_id_str}");
let _ = app_weak.upgrade_in_event_loop(move |app| {
let global = app.global::<ui::Global>();
let existing = global.get_viewed_image();
if existing.asset_id != asset_id_str {
return;
}
global.set_viewed_image(ui::ImagePreview {
asset_id: asset_id_str,
ratio: image.size().width as f32 / image.size().height as f32,
image: slint::Image::from_rgba8(image),
kind: ui::ImageKind::Original,
});
});
});
});
}
fn calculate_timeline_visibility(app: &AppWindow, api: Arc<Api>, scroll: f32) {
@@ -299,7 +329,7 @@ fn unload_bucket(time_bucket: &TimeBucketKey, app: &AppWindow) {
let Some(mut preview) = bucket.previews.row_data(j) else {
break;
};
preview.kind = ui::PreviewKind::None;
preview.kind = ui::ImageKind::None;
preview.image = placeholder_preview.clone();
bucket.previews.set_row_data(j, preview);
}
@@ -326,7 +356,7 @@ fn load_bucket(time_bucket: TimeBucketKey, app_weak: Weak<AppWindow>, api: Arc<A
.iter()
.map(|entry| ui::ImagePreview {
asset_id: entry.id.to_shared_string(), // slint doesn't have a uuid type
kind: ui::PreviewKind::Thumbhash,
kind: ui::ImageKind::Thumbhash,
ratio: entry.ratio as f32,
// TODO: don't unwrap
image: entry
@@ -375,7 +405,7 @@ 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.kind = ui::ImageKind::Thumbnail;
preview.ratio =
thumbnail.thumbnail.width() as f32 / thumbnail.thumbnail.height() as f32;
bucket.previews.set_row_data(i, preview);

View File

@@ -39,8 +39,8 @@ export component AppWindow inherits Window {
if Global.logged-in: Timeline {}
}
if Global.previewed-image.asset-id != "" : ImageViewer {
image: Global.previewed-image.image;
if Global.viewed-image.asset-id != "" : ImageViewer {
image: Global.viewed-image.image;
}
}

View File

@@ -4,7 +4,7 @@ export global Global {
in-out property <bool> logged-in: false;
in-out property <length> min-image-size: 160px;
in-out property <length> image-margin: 2px;
in-out property <ImagePreview> previewed-image;
in-out property <ImagePreview> viewed-image;
in-out property <[ImageBucket]> image-buckets: [
{ key: "2026-02-01", title: "Feb 1, 2026", count: 12 },
{ key: "2026-02-02", title: "Feb 2, 2026", count: 12 },
@@ -16,4 +16,5 @@ export global Global {
callback login-api-key(url: string, api_key: string);
callback set-timeline-width(length);
callback timeline-scrolled(length);
callback view-image(string);
}

View File

@@ -21,7 +21,7 @@ export component ImageViewer inherits Rectangle {
interval: 0.2s;
triggered => {
self.running = false;
Global.previewed-image.asset-id = "";
Global.viewed-image.asset-id = "";
}
}
@@ -64,6 +64,8 @@ export component ImageViewer inherits Rectangle {
Image {
source: image;
image-fit: ImageFit.contain;
width: root.width;
height: root.height;
function calc-y() -> length {
parent.y + parent.height / 2 - self.height / 2

View File

@@ -17,7 +17,8 @@ component ImagePreview inherits Rectangle {
touch := TouchArea {
clicked => {
Global.previewed-image = root.preview;
Global.viewed-image = root.preview;
Global.view-image(root.preview.asset-id);
}
}
}

View File

@@ -1,7 +1,8 @@
export enum PreviewKind {
export enum ImageKind {
None,
Thumbhash,
Thumbnail,
Original,
}
export struct ImagePreview {
@@ -13,7 +14,7 @@ export struct ImagePreview {
// Image aspect ratio. (width/height)
ratio: float,
kind: PreviewKind,
kind: ImageKind,
}
export enum Visibility {