Add image viewer widget

src/app.rs

@@ -10,16 +10,15 @@ use makepad_widgets::{makepad_micro_serde::*, *};
 use matrix_sdk::ruma::{OwnedRoomId, RoomId};
 use crate::{
     avatar_cache::clear_avatar_cache, home::{
-        main_desktop_ui::MainDesktopUiAction, new_message_context_menu::NewMessageContextMenuWidgetRefExt, room_screen::{clear_timeline_states, MessageAction}, rooms_list::{clear_all_invited_rooms, enqueue_rooms_list_update, RoomsListAction, RoomsListRef, RoomsListUpdate}
+        main_desktop_ui::MainDesktopUiAction, new_message_context_menu::NewMessageContextMenuWidgetRefExt, room_image_viewer_detail::RoomImageViewerDetailWidgetRefExt, room_image_viewer_footer::RoomImageViewerFooterWidgetRefExt, room_screen::{MessageAction, clear_timeline_states}, rooms_list::{RoomsListAction, RoomsListRef, RoomsListUpdate, clear_all_invited_rooms, enqueue_rooms_list_update}
     }, join_leave_room_modal::{
         JoinLeaveModalKind, JoinLeaveRoomModalAction, JoinLeaveRoomModalWidgetRefExt
-    }, login::login_screen::LoginAction, logout::logout_confirm_modal::{LogoutAction, LogoutConfirmModalAction, LogoutConfirmModalWidgetRefExt}, persistence, profile::user_profile_cache::clear_user_profile_cache, room::BasicRoomDetails, shared::callout_tooltip::{
+    }, login::login_screen::LoginAction, logout::logout_confirm_modal::{LogoutAction, LogoutConfirmModalAction, LogoutConfirmModalWidgetRefExt}, persistence, profile::user_profile_cache::clear_user_profile_cache, room::BasicRoomDetails, shared::{callout_tooltip::{
         CalloutTooltipOptions,
         CalloutTooltipWidgetRefExt,
         TooltipAction,
-    }, sliding_sync::current_user_id, utils::{
-        room_name_or_id,
-        OwnedRoomIdRon,
+    }, image_viewer::{ImageViewerAction, ImageViewerWidgetRefExt, LoadState}}, sliding_sync::current_user_id, utils::{
+        OwnedRoomIdRon, image_viewer_error_to_string, room_name_or_id
     }, verification::VerificationAction, verification_modal::{
         VerificationModalAction,
         VerificationModalWidgetRefExt,
@@ -40,6 +39,9 @@ live_design! {
     use crate::shared::popup_list::*;
     use crate::home::new_message_context_menu::*;
     use crate::shared::callout_tooltip::CalloutTooltip;
+    use crate::shared::image_viewer::ImageViewer;
+    use crate::home::room_image_viewer_detail::RoomImageViewerDetail;
+    use crate::home::room_image_viewer_footer::RoomImageViewerFooter;
     use link::tsp_link::TspVerificationModal;
 
 
@@ -96,7 +98,32 @@ live_design! {
                             login_screen = <LoginScreen> {}
                         }
 
-                        <PopupList> {}
+                        image_viewer = <Modal> {
+                            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> {}
+                            }
+                        }
+
+                        popup_list = <PopupList> {}
 
                         // Context menus should be shown in front of other UI elements,
                         // but behind verification modals.
@@ -388,6 +415,10 @@ impl MatchEvent for App {
                 _ => {}
             }
 
+            if self.handle_image_viewer_action(cx, action) {
+                continue;
+            }
+
             // `VerificationAction`s come from a background thread, so they are NOT widget actions.
             // Therefore, we cannot use `as_widget_action().cast()` to match them.
             //
@@ -481,7 +512,38 @@ impl AppMain for App {
                 }
             }
         }
+
+        // Ensure all draw events are handled on the main UI thread regardless of modal consuming the events.
+        if let Event::Draw(_) = event {
+            let scope = &mut Scope::with_data(&mut self.app_state);
+            self.ui.handle_event(cx, event, scope);
+            return;
+        }
 
+        // 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;
+        }
+
         // Forward events to the MatchEvent trait implementation.
         self.match_event(cx, event);
         let scope = &mut Scope::with_data(&mut self.app_state);
@@ -590,6 +652,53 @@ impl App {
             closure(cx);
         }
     }
+
+    /// 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
+        }
+    }
 }
 
 /// App-wide state that is stored persistently across multiple app runs

src/home/link_preview.rs

@@ -270,6 +270,14 @@ impl LinkPreviewRef {
         }
     }
 
+    /// Gets the children of the LinkPreview widget.
+    pub fn get_children(&self) -> Vec<ViewRef> {
+        if let Some(inner) = self.borrow() {
+            return inner.children.clone();
+        }
+        Vec::new()
+    }
+
     /// Shows the collapsible button for the link preview.
     /// 
     /// This function is usually called when the link preview is updated.
@@ -624,7 +632,7 @@ fn insert_into_cache(
 
     if let Some(sender) = update_sender {
         // Reuse TimelineUpdate MediaFetched to trigger redraw in the timeline.
-        let _ = sender.send(TimelineUpdate::MediaFetched);
+        let _ = sender.send(TimelineUpdate::MediaFetched(None));
     }
     SignalToUI::set_ui_signal();
 }

src/home/mod.rs

@@ -22,6 +22,8 @@ pub mod welcome_screen;
 pub mod event_reaction_list;
 pub mod new_message_context_menu;
 pub mod link_preview;
+pub mod room_image_viewer_detail;
+pub mod room_image_viewer_footer;
 
 pub fn live_design(cx: &mut Cx) {
     search_messages::live_design(cx);
@@ -46,4 +48,6 @@ pub fn live_design(cx: &mut Cx) {
     light_themed_dock::live_design(cx);
     event_reaction_list::live_design(cx);
     link_preview::live_design(cx);
+    room_image_viewer_detail::live_design(cx);
+    room_image_viewer_footer::live_design(cx);
 }