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.

kevinaboos · 2025-10-19T09:09:49Z

src/home/room_screen.rs

+/// 1. Optionally initializes the modal with a new MXC URI
+/// 2. Attempts to fetch or retrieve cached media
+/// 3. Updates the UI based on the current media state: loading, loaded and failed.
+fn populate_image_modal(


this should be moved into the image viewer widget module.

kevinaboos · 2025-10-19T09:18:18Z

src/home/room_screen.rs

+                    if let LoadState::Loaded = populate_image_modal(cx, &mut self.image_viewer_timeout_timer, None, tl) {
+                        let image_viewer_modal = get_global_image_viewer_modal(cx);
+                        image_viewer_modal.set_image_loaded();
+                    }


this is an unusual code flow/design. One would expect the ImageViewer to be completely independent from the timeline, as we'd like to use the same ImageViewer for any image across the app (including user Avatars, room Avatars, etc), not just images in a specific timeline.

Aarav and I already had this discussion in PR #443. In my opinion, the flow of actions there are much clearer and not dependent upon the timeline.

I don't mind storing the full-size image in the timeline's media cache, but the ImageViewer should also be able to watch for actions when media is fetched, rather than exclusively relying on the RoomScreen widget. What happens if the RoomScreen is closed or otherwise not receiving updates by the time that the full-size image is fetched?

Also, with an action-based design, we don't need the ImageViewer to be a global instance.

The issue with Aarav's action-based design is that clicking the image multiple times will cause memory spikes. As the action is sending large image bytes multiple times.

kevinaboos · 2025-10-19T09:19:22Z

src/home/room_screen.rs

+                            populate_image_modal(cx, &mut self.image_viewer_timeout_timer, Some(mxc_uri), tl);
+                        }
+                    }
+                }


we have a better way of doing this now, you can handle this properly by moving it to L856, and in that case you don't have to check for the RoomId or even include the RoomId in the action variant.

kevinaboos · 2025-10-19T10:01:32Z

src/home/room_screen.rs

    /// Whether or not all rooms have been loaded (received from the homeserver).
    #[rust] all_rooms_loaded: bool,
+    /// Timer for displaying `timeout` in the image viewer modal.
+    #[rust] image_viewer_timeout_timer: Timer


If you need a timeout timer, it would be best to put it in the Image viewer widget itself, not in an unrelated widget like the RoomScreen.

However, I don't think you actually need a separate timer here. The fetch-media network request will naturally return an error if it times out, so you should just rely on that and treat it just like any other fetch error. It doesn't make sense to have a special case for time outs.

In that way, you can also display other errors (e.g., no connection, image deleted, invalid URI, etc)

kevinaboos · 2025-10-19T10:05:24Z

src/app.rs

        // Here we set the global singleton for the PopupList widget,
        // which is used to access PopupList Widget from anywhere in the app.
        crate::shared::popup_list::set_global_popup_list(cx, &self.ui);
+        crate::shared::image_viewer_modal::set_global_image_viewer_modal(cx, self.ui.image_viewer_modal(id!(image_viewer_modal)));


Remove. This shouldn't be necessary.

kevinaboos · 2025-10-19T10:11:22Z

src/shared/styles.rs

    pub ICON_LINK            = dep("crate://self/resources/icons/link.svg")
    pub ICON_PIN             = dep("crate://self/resources/icons/pin.svg")
    pub ICON_REPLY           = dep("crate://self/resources/icons/reply.svg")
+    pub ICON_SEARCH          = dep("crate://self/resources/icons/search.svg")


The icon used in the Image viewer should be a magnifying class with a +/- in it, not a search icon.

kevinaboos · 2025-10-19T10:22:46Z

src/shared/text_or_image.rs

+                    if let Some(room_props) = scope.props.get::<RoomScreenProps>() {
+                        let room_id = room_props.room_id.clone();
+                        // Send an Action containing the room_id and MXC URI to the room_screen
+                        cx.widget_action(self.widget_uid(), &scope.path, TextOrImageAction::Clicked(room_id, mxc_uri.clone()));


We can't always guarantee that a TextOrImage widget is a child of a RoomScreen widget, so we shouldn't attempt to access RoomScreenProps via scope.

However, RoomId shouldn't be necessary at all here (see my other comments), so we can remove this entirely.

kevinaboos · 2025-10-19T10:28:59Z

src/shared/text_or_image.rs

+                    cx.set_cursor(MouseCursor::Hand);
+                }
+                Hit::FingerHoverOut(_) => {
+                    cx.set_cursor(MouseCursor::Arrow);


I think you want Default here.

kevinaboos · 2025-10-19T10:30:35Z

src/shared/image_viewer_modal.rs

+                            }
+                        }
+
+                        timeout_label_view = <View> {


In keeping with my other comments, this should be a general error label, not limited to just time outs. The error from the network fetch operation should be shown to the user here (with a user-friendly message).

kevinaboos · 2025-10-19T10:33:26Z

src/app.rs

-    use link::tsp_link::TspVerificationModal;
+    use crate::shared::image_viewer_modal::ImageViewerModal;
+
+    APP_TAB_COLOR = #344054


All of this AppTab stuff is old. Looks like a merge conflict mistake.

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

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 Oct 19, 2025

fix

d85a312

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!

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!

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