Add image viewer widget #565

alanpoon · 2025-08-06T09:48:25Z

Fixes #327

in replacement of #443

Waiting for this PR to be merged: makepad/makepad#788.

alanpoon · 2025-08-11T04:45:09Z

Intention of adding an image magnifier and the ability to pan image.

The image's image_scale, image_pan will always be set to default in draw_walk. Hence unable to dynamically scale and pan image.
makepad/makepad#785

kevinaboos · 2025-10-17T09:08:38Z

Intention of adding an image magnifier and the ability to pan image.

The image's image_scale, image_pan will always be set to default in draw_walk. Hence unable to dynamically scale and pan image. makepad/makepad#785

@alanpoon I just checked with Rik, and this line should not be present in the Image widget. It's some errant code left over from dealing with animations in a strange way.

You can submit a PR to makepad that removes that line, and then continue with this issue here.

alanpoon · 2025-10-18T02:58:24Z

Sure, the makepad PR is here: makepad/makepad#788

alanpoon · 2025-10-19T03:01:23Z

kevinaboos

Thanks Alan, nice work here.

My main comment is that we should decouple the ImageViewer widget from the RoomScreen. It doesn't need to know anything about the RoomScreen except for being able to access the RoomScreen's MediaCache instance (technically even that is not required, see Aarav's PR for an example of just passing the image data directly from the media fetch background task to the ImageViewer via an action).

Also, Aarav and I had a lot of discussions about using actions to communicate with the ImageViewer widget in PR#443. I think you can combine your approach (of storing images in the RoomScreen's MediaCache) with the action-based design from #443 (in which you emit an action including the image data/status instead of directly accessing the widget and calling a function on it). Actions are more idiomatic and also allow easy communication from any context, both in a background task and in a RoomScreen TimelineUpdate handler.

src/home/room_screen.rs

src/app.rs

src/shared/styles.rs

src/shared/text_or_image.rs

src/shared/image_viewer_modal.rs

src/app.rs

alanpoon · 2025-10-30T07:50:33Z

Requires makepad/makepad#806 to be merged to use the rotated_image widget

kevinaboos · 2025-10-30T21:20:06Z

Requires makepad/makepad#806 to be merged to use the rotated_image widget

I've asked Rik to review & merge this.

kevinaboos · 2025-10-30T23:08:06Z

Requires makepad/makepad#806 to be merged to use the rotated_image widget

I've asked Rik to review & merge this.

@alanpoon this PR has been merged, and I've also updated the main Robrix branch to depend on the latest makepad.

kevinaboos · 2025-11-05T01:50:09Z

src/app.rs

+                            content: {
+                                width: Fill, height: Fill,
+                                flow: Down
+                                show_bg: true
+                                draw_bg: {
+                                    color: #000
+                                }
+
+                                <View> {
+                                    width: Fill, height: Fill,
+                                    flow: Overlay
+                                    image_viewer_inner = <ImageViewer> {
+                                        align: {x: 0.5, y: 0.5}
+                                        padding: {bottom: 0}
+                                    }
+                                    image_detail = <RoomImageViewerDetail> {
+                                        width: Fill, height: Fill,
+                                    }
+                                }
+
+                                footer = <RoomImageViewerFooter> {}


all of this should be moved into the ImageViewer itself. The top-level app itself should not have to be concerned with any of these inner details.

kevinaboos · 2025-11-05T01:50:44Z

src/app.rs

+            let scope = &mut Scope::with_data(&mut self.app_state);
+            self.ui.handle_event(cx, event, scope);
+            return;
+        }


what's this for? I don't think any sort of weird hack should be required to draw the modal, right? Draw events aren't "consumed" by just one modal, it's not like a visibility-requiring hit event.

kevinaboos · 2025-11-05T01:58:19Z

src/app.rs

+        // If the image viewer modal is really opened, handles non-Draw events using the modal.
+        let image_viewer_modal = self.ui.modal(ids!(image_viewer));
+        if image_viewer_modal.is_open() && image_viewer_modal.area().rect(cx).size.y > 0.0 {
+            let scope = &mut Scope::with_data(&mut self.app_state);
+            self.ui
+                .view(ids!(popup_list))
+                .handle_event(cx, event, scope);
+            self.ui
+                .modal(ids!(image_viewer))
+                .handle_event(cx, event, scope);
+            // Pass the Signal event to the underlying room screen, so as to populate the full image in the image viewer.
+            if let Event::Signal = event {
+                self.ui.handle_event(cx, event, scope);
+            }
+            if let Event::Actions(actions) = event {
+                for action in actions {
+                    if self.handle_image_viewer_action(cx, action) {
+                        continue;
+                    }
+                }
+            }
+            return;
+        }


why is this one modal so uniquely different than all the other modals? I would only expect you to have to handle opening and closing the ImageViewer modal here, just like all other modals.

I don't understand why you need to explicitly pass events to the modal; this is almost certainly incorrect and will result in the event being delivered to the modal twice.

I forgot to comment on the rationale. Modal widget is not behaving as expected with the events being propagated to underneath layer. This results in other image being clicked while the image viewer modal is opened.

I see, that's concerning. Can you open an issue on the Makepad repo with a minimal example that reproduces this, and then link to it in a code comment here? Thanks.

I'll try to dig into modal issues this week to see if we can fix it there.

kevinaboos · 2025-11-05T01:59:33Z

src/app.rs

+    /// Handles actions for the image viewer.
+    /// Returns a boolean, is true continues the actions for loop.
+    fn handle_image_viewer_action(&mut self, cx: &mut Cx, action: &Action) -> bool {
+
+        match action.downcast_ref() {
+            Some(ImageViewerAction::Show(load_state)) => {
+                match load_state {
+                    LoadState::Loading(texture, image_size) => {
+                        self.ui.modal(ids!(image_viewer)).open(cx);
+                        self.ui.image_viewer(ids!(image_viewer_inner)).reset(cx);
+                        self.ui.room_image_viewer_footer(ids!(footer)).show_loading(cx);
+                        self.ui.view(ids!(footer)).apply_over(cx, live!{
+                            height: 50
+                        });
+                        self.ui.image_viewer(ids!(image_viewer_inner)).display_using_texture(cx, texture.as_ref().clone(), image_size);
+                    }
+                    LoadState::Loaded(image_bytes) => {
+                        self.ui.modal(ids!(image_viewer)).open(cx);
+                        self.ui.image_viewer(ids!(image_viewer_inner)).display_using_background_thread(cx, image_bytes);
+                    }
+                    LoadState::FinishedBackgroundDecoding => {
+                        self.ui.room_image_viewer_footer(ids!(footer)).hide(cx);
+                        // Collapse the footer
+                        self.ui.view(ids!(footer)).apply_over(cx, live!{
+                            height: 0
+                        });
+                    }
+                    LoadState::Error(error) => {
+                        if self.ui.modal(ids!(image_viewer)).is_open() {
+                            self.ui.room_image_viewer_footer(ids!(footer)).show_error(cx, image_viewer_error_to_string(error));
+                            self.ui.view(ids!(footer)).apply_over(cx, live!{
+                                height: 50
+                            });
+                        }
+                    }
+                }
+                true
+            }
+            Some(ImageViewerAction::Hide) => {
+                self.ui.modal(ids!(image_viewer)).close(cx);
+                self.ui.room_image_viewer_detail(ids!(image_detail)).reset_state(cx);
+                true
+            }
+            _ => false
+        }
+    }


again, why does this need to be here in the top-level app? The only thing that actually needs to be in the top-level app module is opening and closing the modal. There should be zero ImageViewer-specific logic here.

kevinaboos · 2025-11-05T02:00:41Z

src/media_cache.rs

+    /// Deletes a specific media format from the cache for the given MXC URI.
+    /// If `format` is None, deletes the entire cache entry for the URI.
+    /// Returns true if an entry was deleted, false if nothing was found.
+    pub fn delete_cache_entry(&mut self, mxc_uri: &OwnedMxcUri, format: Option<MediaFormat>) -> bool {


I like this function, but here are two ways you can improve it?

Use "remove" instead of delete, which matches the rest of Rust.

Return the actual removed cache entry instead of a boolean.

kevinaboos · 2025-11-05T02:14:47Z

src/utils.rs

+/// Returns a human-readable string describing the given ImageViewerError.
+///
+/// This can be used to update the label text of an error display.
+///
+/// The error type is matched against a string which describes the error in a way that is visible to the user.
+///
+/// The strings returned by this function will be appropriate for display in a label or similar widget.
+pub fn image_viewer_error_to_string(error: &ImageViewerError) -> &str {
+    match error {
+        ImageViewerError::NotFound => "Full image is not found",
+        ImageViewerError::BadData => "Image appears to be empty or corrupted",
+        ImageViewerError::UnsupportedFormat => "This image format isn't supported",
+        ImageViewerError::ConnectionFailed => "Check your internet connection",
+        ImageViewerError::Unauthorized => "You don't have permission to view this image",
+        ImageViewerError::ServerError => "Server temporarily unavailable",
+        ImageViewerError::Unknown => "Unable to load image",
+        ImageViewerError::Timeout => "Timed out loading this image",
+    }
+}


this should go into the imageviewer module

kevinaboos · 2025-11-05T02:55:33Z

src/home/room_screen.rs

+                let content_message = wr.text_or_image(ids!(content.message));
+                if let TextOrImageAction::Clicked(mxc_uri) = actions.find_widget_action(content_message.widget_uid()).cast() {
+                    let Some((texture, size)) = content_message.get_texture_and_size(cx) else { continue; };
+                    let texture = std::rc::Rc::new(texture);
+                    let screen_width = wr.area().rect(cx).size.x;
+                    let (capped_width, capped_height) = constrain_image_dimensions(size.x, size.y, screen_width);
+                    if let Some(tl_state) = &mut self.tl_state {
+                        if let Some(item) = tl_state.items.get(index) {
+                            if let Some(event_tl_item) = item.as_event() {
+                                let sender_profile = event_tl_item.sender_profile();
+                                let sender = event_tl_item.sender();
+                                let event_id = event_tl_item.event_id().map(|id| id.to_owned());
+                                let timestamp = event_tl_item.timestamp();
+                                // Extract image name and size from the message content
+                                let (image_name, image_size) = if let Some(message) = event_tl_item.content().as_message() {
+                                    if let MessageType::Image(image_content) = message.msgtype() {
+                                        let name = message.body().to_string();
+                                        let size = image_content.info.as_ref()
+                                            .and_then(|info| info.size)
+                                            .map(|s| i32::try_from(s).unwrap_or_default())
+                                            .unwrap_or(0);
+                                        (name, size)
+                                    } else {
+                                        ("Unknown Image".to_string(), 0)
+                                    }
+                                } else {
+                                    ("Unknown Image".to_string(), 0)
+                                };
+                                cx.action(ImageViewerAction::Show(LoadState::Loading(texture, DVec2 { x: capped_width, y: capped_height })));
+                                let Some(mxc_uri_string) = mxc_uri else { continue; };
+                                let mxc_uri = OwnedMxcUri::from(mxc_uri_string);
+                                populate_matrix_image_modal(cx, mxc_uri, &mut tl_state.media_cache);
+                                cx.widget_action(
+                                    room_screen_widget_uid,
+                                    &scope.path,
+                                    RoomImageViewerDetailAction::SetImageDetail {
+                                        room_id: self.room_id.clone(),
+                                        sender: Some(sender.to_owned()),
+                                        sender_profile: Some(sender_profile.clone()),
+                                        event_id,
+                                        timestamp_millis: timestamp,
+                                        image_name,
+                                        image_size
+                                    }
+                                );
+                            }
+                        }
+                    }
+                    continue
+                }
+                let link_preview_content = wr.link_preview(ids!(content.link_preview_view)).get_children();
+                for text_or_image in link_preview_content.iter() {
+                    let text_or_image = text_or_image.text_or_image(ids!(image_view.image));
+                    if let TextOrImageAction::Clicked(mxc_uri) = actions.find_widget_action(text_or_image.widget_uid()).cast() {
+                        let Some((texture, size)) = text_or_image.get_texture_and_size(cx) else { 
+                            continue; 
+                        };
+                        let screen_width = wr.area().rect(cx).size.x;
+                        let (capped_width, capped_height) = constrain_image_dimensions(size.x, size.y, screen_width);
+                        let texture = std::rc::Rc::new(texture);
+                        let Some(mxc_uri_string) = mxc_uri else { continue; };
+                        let mxc_uri = OwnedMxcUri::from(mxc_uri_string);
+                        cx.action(ImageViewerAction::Show(LoadState::Loading(texture, DVec2 { x: capped_width, y: capped_height })));
+                        let Some(tl_state) = self.tl_state.as_mut() else { continue; };
+                        populate_matrix_image_modal(cx, mxc_uri, &mut tl_state.media_cache);
+                    }
+                }
            }


phew, this is a lot of complex code.... can you clean it up (simplify all the nested indentation) and move it to a separate function?

Also, the latter half that handles link previews can be removed, along with the get_children() function. Although some clients do allow clicking a link preview image, it's better UX to open the link upon clicking any part of a link preview instead of zooming in on a preview image thumbnail.

alanpoon added 4 commits July 10, 2025 11:45

move MEDIA_CACHE to global

e51b874

Merge branch 'main' into image_viewer#327

f323303

some testing

e1d2aaf

Merge branch 'main' into image_viewer#327

e4fe2c8

alanpoon self-assigned this Aug 6, 2025

changed default image

440bde3

alanpoon force-pushed the image_viewer#327 branch from 91bf416 to 440bde3 Compare August 11, 2025 01:10

alanpoon added the blocked-on-makepad Blocked on a Makepad bug or missing Makepad feature label Aug 11, 2025

alanpoon added 2 commits August 27, 2025 14:54

Merge branch 'main' into image_viewer#327

d029bbc

Image Viewer with zoom and pann

ddd04b9

alanpoon force-pushed the image_viewer#327 branch from 1b7875f to ddd04b9 Compare September 1, 2025 23:49

alanpoon added 6 commits September 2, 2025 07:54

fix spelling

d641657

simplify code for populate_image_modal

9fe9ddc

Deallocate image buffer

27ebbd7

Merge branch 'main' into image_viewer#327

92d78b3

remove default_image

de263cc

Merge branch 'main' into image_viewer#327

43137a1

kevinaboos added waiting-on-author This issue is waiting on the original author for a response and removed blocked-on-makepad Blocked on a Makepad bug or missing Makepad feature labels Oct 17, 2025

alanpoon added 4 commits October 18, 2025 21:54

Merge branch 'main' into image_viewer#327

03e4120

code improvement image_viewer

c9f2484

Merge branch 'main' into image_viewer#327

81cf00a

update makepad

ec774a0

alanpoon added waiting-on-review This issue is waiting to be reviewed and removed waiting-on-author This issue is waiting on the original author for a response labels Oct 19, 2025

kevinaboos requested changes Oct 19, 2025

View reviewed changes

alanpoon added 2 commits October 30, 2025 10:24

Change to rotated_image

048c3d3

Merge branch 'main' into image_viewer#327

816fae5

alanpoon added blocked-on-makepad Blocked on a Makepad bug or missing Makepad feature and removed waiting-on-author This issue is waiting on the original author for a response labels Oct 30, 2025

alanpoon force-pushed the image_viewer#327 branch from f2360cc to 1b82f74 Compare October 30, 2025 08:16

Added Image detail for Image Viewer

f0cecc1

alanpoon force-pushed the image_viewer#327 branch from 301a788 to f0cecc1 Compare October 31, 2025 07:55

move image_buffer to background thread

2ca47a3

kevinaboos added waiting-on-author This issue is waiting on the original author for a response and removed blocked-on-makepad Blocked on a Makepad bug or missing Makepad feature labels Nov 2, 2025

alanpoon added 2 commits November 3, 2025 11:26

Fix image viewer size for thumbnail image

082de67

Merge branch 'main' into image_viewer#327

bdf8cfc

alanpoon force-pushed the image_viewer#327 branch 2 times, most recently from 231f433 to 130e1fe Compare November 3, 2025 15:46

alanpoon force-pushed the image_viewer#327 branch from 2d14df8 to 91e324c Compare November 4, 2025 01:45

added room_image_viewer_footer

68179c5

alanpoon force-pushed the image_viewer#327 branch from 9919e8a to 68179c5 Compare November 4, 2025 07:16

alanpoon added waiting-on-review This issue is waiting to be reviewed and removed waiting-on-author This issue is waiting on the original author for a response labels Nov 4, 2025

fix clippy

e55568c

kevinaboos requested changes Nov 5, 2025

View reviewed changes

kevinaboos added waiting-on-author This issue is waiting on the original author for a response and removed waiting-on-review This issue is waiting to be reviewed labels Nov 5, 2025

Add image viewer widget #565

Are you sure you want to change the base?

Add image viewer widget #565

Conversation

alanpoon commented Aug 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

alanpoon commented Aug 11, 2025

Uh oh!

kevinaboos commented Oct 17, 2025

Uh oh!

alanpoon commented Oct 18, 2025

Uh oh!

alanpoon commented Oct 19, 2025

Uh oh!

kevinaboos left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

alanpoon commented Oct 30, 2025

Uh oh!

kevinaboos commented Oct 30, 2025

Uh oh!

kevinaboos commented Oct 30, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

alanpoon commented Aug 6, 2025 •

edited

Loading