Add image viewer widget

src/app.rs

@@ -13,11 +13,11 @@ use crate::{
         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}
     }, 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::{
+    }, image_viewer::{ImageViewerAction, ImageViewerWidgetRefExt, LoadState}}, sliding_sync::current_user_id, utils::{
         room_name_or_id,
         OwnedRoomIdRon,
     }, verification::VerificationAction, verification_modal::{
@@ -40,6 +40,7 @@ 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 link::tsp_link::TspVerificationModal;
 
 
@@ -96,6 +97,12 @@ live_design! {
                             login_screen = <LoginScreen> {}
                         }
 
+                        image_viewer_modal = <Modal> {
+                            content: {
+                                width: Fill, height: Fill,
+                                image_viewer_inner = <ImageViewer> {}
+                            }
+                        }
                         <PopupList> {}
 
                         // Context menus should be shown in front of other UI elements,
@@ -405,7 +412,36 @@ impl MatchEvent for App {
                 self.ui.modal(ids!(verification_modal)).close(cx);
                 continue;
             }
-
+            let mut image_viewer_inner = self.ui.image_viewer(ids!(image_viewer_inner));
+            match action.downcast_ref() {
+                Some(ImageViewerAction::Show(LoadState::Loading(texture, metadata))) => {
+                    self.ui.modal(ids!(image_viewer_modal)).open(cx);
+                    image_viewer_inner.show_loading(cx, texture.as_ref().clone(), metadata);
+                    continue;
+                }
+                Some(ImageViewerAction::Show(LoadState::Loaded(image_bytes))) => {
+                    image_viewer_inner.show_loaded(cx, image_bytes);
+                    continue;
+                }
+                Some(ImageViewerAction::Show(LoadState::FinishedBackgroundDecoding)) => {
+                    image_viewer_inner.hide_loading(cx);
+                    continue;
+                }
+                Some(ImageViewerAction::Show(LoadState::Error(error))) => {
+                    // This action is emitted when syncing is offline even when the image viewer modal is not opened.
+                    // Hence, we need to check if the modal is open before showing the error.
+                    if self.ui.modal(ids!(image_viewer_modal)).is_open() {
+                        image_viewer_inner.show_error(cx, error);
+                        continue;
+                    }
+                }
+                Some(ImageViewerAction::Hide) => {
+                    self.ui.modal(ids!(image_viewer_modal)).close(cx);
+                    image_viewer_inner.reset(cx);
+                    continue;
+                }
+                _ => {}
+            }
             // Handle actions to open/close the TSP verification modal.
             #[cfg(feature = "tsp")] {
                 use std::ops::Deref;

src/home/link_preview.rs

@@ -624,7 +624,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

@@ -23,6 +23,7 @@ pub mod welcome_screen;
 pub mod event_reaction_list;
 pub mod new_message_context_menu;
 pub mod link_preview;
+pub mod room_image_viewer;
 
 pub fn live_design(cx: &mut Cx) {
     search_messages::live_design(cx);

src/home/room_image_viewer.rs

@@ -0,0 +1,92 @@
+use makepad_widgets::*;
+use matrix_sdk_ui::timeline::EventTimelineItem;
+use matrix_sdk::{
+    media::MediaFormat, ruma::{
+        events::room::message::MessageType,
+        OwnedMxcUri
+    }
+};
+use reqwest::StatusCode;
+
+use crate::{media_cache::{MediaCache, MediaCacheEntry}, shared::{avatar::{AvatarRef, AvatarWidgetRefExt}, image_viewer::{ImageViewerAction, ImageViewerError, LoadState}}};
+
+/// Populates the image viewer modal with the given media content.
+///
+/// If the media is already cached, it will be immediately displayed.
+/// If the media is not cached, it will be fetched from the server.
+/// If the media fetch fails, an error message will be displayed.
+///
+/// This function requires passing in a reference to `Cx`, which isn't used, but acts as a guarantee that this function must only be called by the main UI thread.
+pub fn populate_matrix_image_modal(
+    cx: &mut Cx,
+    mxc_uri: OwnedMxcUri,
+    media_cache: &mut MediaCache,
+) {
+    // Try to get media from cache or trigger fetch
+    let media_entry = media_cache.try_get_media_or_fetch(mxc_uri.clone(), MediaFormat::File);
+
+    // Handle the different media states
+    match media_entry {
+        (MediaCacheEntry::Loaded(data), MediaFormat::File) => {
+            cx.action(ImageViewerAction::Show(LoadState::Loaded(data)));
+        }
+        (MediaCacheEntry::Failed(status_code), MediaFormat::File) => {
+            let error = match status_code {
+                StatusCode::NOT_FOUND => ImageViewerError::NotFound,
+                StatusCode::INTERNAL_SERVER_ERROR => ImageViewerError::ConnectionFailed,
+                StatusCode::PARTIAL_CONTENT => ImageViewerError::BadData,
+                StatusCode::UNAUTHORIZED => ImageViewerError::Unauthorized,
+                StatusCode::REQUEST_TIMEOUT => ImageViewerError::Timeout,
+                _ => ImageViewerError::Unknown,
+            };
+            cx.action(ImageViewerAction::Show(LoadState::Error(error)));
+            // Remove failed media entry from cache for MediaFormat::File so as to start all over again from loading Thumbnail.
+            media_cache.remove_cache_entry(&mxc_uri, Some(MediaFormat::File));
+        }
+        _ => {}
+    }
+}
+
+/// Extracts image name and size from an event timeline item.
+pub fn extract_image_info(event_tl_item: &EventTimelineItem) -> (String, i32) {
+    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)
+    }
+}
+
+/// Condensed message does not have a profile, so we need to find the previous portal list item.
+/// Searches backwards for a non-empty display name and avatar in previous portal list items.
+/// Mutates display_name and avatar_ref.
+/// Returns when first non-empty display name is found.
+pub fn find_previous_profile_in_condensed_message(
+    portal_list: &PortalListRef,
+    mut current_index: usize,
+    display_name: &mut String,
+    avatar_ref: &mut AvatarRef,
+) {
+    // Start from the current index and work backwards
+    while current_index > 0 {
+        current_index -= 1;
+        if let Some((_id, item_ref)) = portal_list.get_item(current_index) {
+            let username = item_ref.label(ids!(content.username_view.username)).text();
+            if !username.is_empty() {
+                *display_name = username;
+                *avatar_ref = item_ref.avatar(ids!(profile.avatar));
+                return;
+            }
+        }
+    }
+}