update(FilePreview): Open image preview in high quality

common/src/lib.rs

@@ -4,6 +4,7 @@ pub mod sounds;
 pub mod state;
 pub mod testing;
 pub mod upload_file_channel;
+pub mod utils;
 pub mod warp_runner;
 
 use anyhow::bail;
@@ -90,6 +91,8 @@ pub struct StaticArgs {
     /// ~/.uplink/.user
     /// contains the following: warp (folder), state.json, debug.log
     pub uplink_path: PathBuf,
+    /// Directory for temporary files and deleted everytime app is closed or opened
+    pub temp_files: PathBuf,
     /// custom themes for the user
     pub themes_path: PathBuf,
     /// custom fonts for the user
@@ -147,6 +150,7 @@ pub static STATIC_ARGS: Lazy<StaticArgs> = Lazy::new(|| {
     StaticArgs {
         dot_uplink: uplink_container.clone(),
         uplink_path: uplink_path.clone(), // TODO: Should this be "User path" instead?
+        temp_files: uplink_container.join("temp_files"),
         themes_path: uplink_container.join("themes"),
         fonts_path: uplink_container.join("fonts"),
         cache_path: uplink_path.join("state.json"),

common/src/utils/clipboard/download_file_for_better_preview.rs

@@ -0,0 +1,8 @@
+pub fn download_file_for_better_preview(file_name: String) {
+    let file_name_with_extension = format!("{}", cx.props.filename);
+    let temp_dir = STATIC_ARGS.temp_files.join(file_name_with_extension);
+    if !temp_dir.exists() {
+        cx.props.on_press.call(Some(temp_dir.clone()));
+    }
+    let temp_path_as_string = temp_dir.clone().to_string_lossy().to_string();
+}

common/src/utils/img_dimensions_preview.rs

@@ -0,0 +1,3 @@
+pub const IMAGE_MAX_WIDTH: &str = "80vw";
+
+pub const IMAGE_MAX_HEIGHT: &str = "80vh";

common/src/utils/lifecycle.rs

@@ -0,0 +1,32 @@
+use dioxus::prelude::*;
+
+pub struct LifeCycle<D: FnOnce()> {
+    ondestroy: Option<D>,
+}
+
+/// It works like a useEffect hook, but it will be called only once
+/// when the component is mounted
+/// and when the component is unmounted
+pub fn use_component_lifecycle<C: FnOnce() + 'static, D: FnOnce() + 'static>(
+    cx: &ScopeState,
+    create: C,
+    destroy: D,
+) -> &LifeCycle<D> {
+    cx.use_hook(|| {
+        cx.spawn(async move {
+            // This will be run once the component is mounted
+            std::future::ready::<()>(()).await;
+            create();
+        });
+        LifeCycle {
+            ondestroy: Some(destroy),
+        }
+    })
+}
+
+impl<D: FnOnce()> Drop for LifeCycle<D> {
+    fn drop(&mut self) {
+        let f = self.ondestroy.take().unwrap();
+        f();
+    }
+}

common/src/utils/local_file_path.rs

@@ -0,0 +1,14 @@
+use std::path::PathBuf;
+
+/// It will work to load local files in img or video tags, but will ignore drive
+const PREFIX_TO_WORK_ON_ALL_OS: &str = "http://dioxus.";
+
+/// This function is used to treat local file path if it needs
+/// to be loaded in img or video tags for example
+pub fn get_fixed_path_to_load_local_file(path: PathBuf) -> String {
+    format!(
+        "{}{}",
+        PREFIX_TO_WORK_ON_ALL_OS,
+        path.to_string_lossy().to_string().replace('\\', "/")
+    )
+}

common/src/utils/mod.rs

@@ -0,0 +1,3 @@
+pub mod img_dimensions_preview;
+pub mod lifecycle;
+pub mod local_file_path;

kit/src/components/embeds/file_embed/mod.rs

@@ -1,11 +1,17 @@
 use std::ffi::OsStr;
+use std::fs;
 use std::path::PathBuf;
 
 use crate::elements::button::Button;
 use crate::elements::Appearance;
 use crate::layout::modal::Modal;
 use common::icons::outline::Shape as Icon;
 use common::icons::Icon as IconElement;
+use common::utils::img_dimensions_preview::IMAGE_MAX_HEIGHT;
+use common::utils::img_dimensions_preview::IMAGE_MAX_WIDTH;
+use common::utils::lifecycle::use_component_lifecycle;
+use common::utils::local_file_path::get_fixed_path_to_load_local_file;
+use common::STATIC_ARGS;
 use dioxus_html::input_data::keyboard_types::Modifiers;
 
 use dioxus::prelude::*;
@@ -54,7 +60,7 @@ pub struct Props<'a> {
     download_pending: Option<bool>,
 
     // called shen the icon is clicked
-    on_press: EventHandler<'a, ()>,
+    on_press: EventHandler<'a, Option<PathBuf>>,
 
     progress: Option<&'a Progression>,
 }
@@ -156,6 +162,17 @@ pub fn FileEmbed<'a>(cx: Scope<'a, Props<'a>>) -> Element<'a> {
     let thumbnail = cx.props.thumbnail.clone().unwrap_or_default();
     let large_thumbnail = thumbnail.clone(); // TODO: This should be the source of the image
     let has_thumbnail = !thumbnail.is_empty();
+    let file_name_with_extension = cx.props.filename.to_string();
+    let temp_dir = STATIC_ARGS.temp_files.join(file_name_with_extension);
+    let temp_dir2 = temp_dir.clone();
+
+    use_component_lifecycle(
+        cx,
+        || {},
+        move || {
+            let _ = fs::remove_file(temp_dir2.clone());
+        },
+    );
 
     cx.render(rsx! (
         div {
@@ -184,23 +201,30 @@ pub fn FileEmbed<'a>(cx: Scope<'a, Props<'a>>) -> Element<'a> {
                         aria_label: "file-icon",
                         if has_thumbnail {
                             rsx!(
-                                fullscreen_preview.then(|| rsx!(
-                                    Modal {
-                                        open: *fullscreen_preview.clone(),
-                                        onclose: move |_| fullscreen_preview.set(false),
-                                        transparent: false,
-                                        close_on_click_inside_modal: true,
-                                        dont_pad: true,
-                                        img {
-                                            id: "image-preview-modal-file-embed",
-                                            aria_label: "image-preview-modal-file-embed",
-                                            src: "{large_thumbnail}",
-                                            max_height: "80vh",
-                                            max_width: "80vw",
-                                            onclick: move |e| e.stop_propagation(),
-                                        },
+                                fullscreen_preview.then(|| {
+                                    if !temp_dir.exists() {
+                                        cx.props.on_press.call(Some(temp_dir.clone()));
                                     }
-                                )),
+                                    let temp_file_path_as_string = get_fixed_path_to_load_local_file(temp_dir.clone());
+                                    rsx!(
+                                            Modal {
+                                                open: *fullscreen_preview.clone(),
+                                                onclose: move |_| fullscreen_preview.set(false),
+                                                transparent: false,
+                                                close_on_click_inside_modal: true,
+                                                dont_pad: true,
+                                                img {
+                                                    id: "image-preview-modal-file-embed",
+                                                    aria_label: "image-preview-modal-file-embed",
+                                                    src: format_args!("{}", if temp_dir.exists()
+                                                        { temp_file_path_as_string}
+                                                        else {large_thumbnail} ),
+                                                    max_height: IMAGE_MAX_HEIGHT,
+                                                    max_width: IMAGE_MAX_WIDTH,
+                                                    onclick: move |e| e.stop_propagation(),
+                                                },
+                                            }
+                                    )}),
                                 div {
                                     class: "image-container",
                                     aria_label: "message-image-container",
@@ -347,7 +371,7 @@ fn show_download_button_if_enabled<'a>(
                     icon: btn_icon,
                     appearance: Appearance::Primary,
                     aria_label: "attachment-button".into(),
-                    onpress: move |_| cx.props.on_press.call(()),
+                    onpress: move |_| cx.props.on_press.call(None),
                 }
             }
         ))

kit/src/components/message/mod.rs

@@ -1,3 +1,4 @@
+use std::path::PathBuf;
 use std::{collections::HashSet, str::FromStr};
 
 use common::language::{get_local_text, get_local_text_with_args};
@@ -91,7 +92,7 @@ pub struct Props<'a> {
     attachments_pending_download: Option<HashSet<File>>,
 
     /// called when an attachment is downloaded
-    on_download: EventHandler<'a, File>,
+    on_download: EventHandler<'a, (File, Option<PathBuf>)>,
 
     /// called when editing is completed
     on_edit: EventHandler<'a, String>,
@@ -169,7 +170,10 @@ pub fn Message<'a>(cx: Scope<'a, Props<'a>>) -> Element<'a> {
                     .as_ref()
                     .map(|x| x.contains(file))
                     .unwrap_or(false),
-                on_press: move |_| cx.props.on_download.call(file.clone()),
+                on_press: move |temp_dir_option| cx
+                    .props
+                    .on_download
+                    .call((file.clone(), temp_dir_option)),
             })
         })
     });

ui/src/bootstrap.rs

@@ -99,11 +99,19 @@ pub fn configure_logger(production_mode: bool, log_to_file: bool) {
 }
 
 pub fn create_uplink_dirs() {
+    // Guarantee all files in temp files directory will be deleted
+    if STATIC_ARGS.temp_files.exists() {
+        std::fs::remove_dir_all(&STATIC_ARGS.temp_files)
+            .expect("Error removing temp files directory");
+    }
     // Initializes the cache dir if needed
     std::fs::create_dir_all(&STATIC_ARGS.uplink_path).expect("Error creating Uplink directory");
     std::fs::create_dir_all(&STATIC_ARGS.warp_path).expect("Error creating Warp directory");
     std::fs::create_dir_all(&STATIC_ARGS.themes_path).expect("error creating themes directory");
-    std::fs::create_dir_all(&STATIC_ARGS.fonts_path).expect("error fonts themes directory");
+    std::fs::create_dir_all(&STATIC_ARGS.fonts_path)
+        .expect("error creating fonts themes directory");
+    std::fs::create_dir_all(&STATIC_ARGS.temp_files)
+        .expect("error creatings temporary files directory");
 }
 
 pub fn platform_quirks() {

ui/src/components/crop_image_tool/circle_format_tool/mod.rs

@@ -1,10 +1,14 @@
-use common::{icons::outline::Shape, language::get_local_text, STATIC_ARGS};
+use common::{
+    icons::outline::Shape, language::get_local_text, utils::lifecycle::use_component_lifecycle,
+    STATIC_ARGS,
+};
 use dioxus::prelude::*;
 use kit::{
     elements::{button::Button, label::Label, range::Range, Appearance},
     layout::modal::Modal,
 };
-use std::path::PathBuf;
+use once_cell::sync::Lazy;
+use std::{fs, path::PathBuf};
 use tokio::io::AsyncWriteExt;
 
 use crate::components::crop_image_tool::b64_encode;
@@ -13,6 +17,8 @@ const ADJUST_CROP_CIRCLE_SIZE_SCRIPT: &str = include_str!("./adjust_crop_circle_
 const GET_IMAGE_DIMENSIONS_SCRIPT: &str = include_str!("../get_image_dimensions.js");
 const SAVE_CROPPED_IMAGE_SCRIPT: &str = include_str!("./save_cropped_image.js");
 const MOVE_IMAGE_SCRIPT: &str = include_str!("../move_image.js");
+static CROPPED_IMAGE_PATH: Lazy<PathBuf> =
+    Lazy::new(|| STATIC_ARGS.temp_files.join("cropped_image.png"));
 
 #[derive(Debug, Clone)]
 struct ImageDimensions {
@@ -67,6 +73,14 @@ pub fn CropCircleImageModal<'a>(cx: Scope<'a, Props<'a>>) -> Element<'a> {
         }
     });
 
+    use_component_lifecycle(
+        cx,
+        || {},
+        move || {
+            let _ = fs::remove_file(CROPPED_IMAGE_PATH.clone());
+        },
+    );
+
     return cx.render(rsx!(div {
         Modal {
             open: *crop_image.clone(),
@@ -132,8 +146,7 @@ pub fn CropCircleImageModal<'a>(cx: Scope<'a, Props<'a>>) -> Element<'a> {
                                                         return;
                                                     },
                                                 };
-                                                let cropped_image_path = STATIC_ARGS.uplink_path.join("cropped_image.png");
-                                                let mut file = match tokio::fs::File::create(cropped_image_path.clone()).await {
+                                                let mut file = match tokio::fs::File::create(CROPPED_IMAGE_PATH.clone()).await {
                                                     Ok(file) => file,
                                                     Err(e) => {
                                                         log::error!("Error creating cropped image file: {}", e);
@@ -149,7 +162,7 @@ pub fn CropCircleImageModal<'a>(cx: Scope<'a, Props<'a>>) -> Element<'a> {
                                                     log::error!("Error syncing cropped image file. {}", e);
                                                     return;
                                                 }
-                                                match tokio::fs::metadata(&cropped_image_path).await {
+                                                match tokio::fs::metadata(&CROPPED_IMAGE_PATH.clone()).await {
                                                     Ok(metadata) => {
                                                         if metadata.len() == 0 {
                                                             log::error!("Cropped image file is empty.");
@@ -161,7 +174,7 @@ pub fn CropCircleImageModal<'a>(cx: Scope<'a, Props<'a>>) -> Element<'a> {
                                                         return;
                                                     }
                                                 }
-                                                cropped_image_pathbuf.with_mut(|f| *f = cropped_image_path.clone());
+                                                cropped_image_pathbuf.with_mut(|f| *f = CROPPED_IMAGE_PATH.clone());
                                                 clicked_button_to_crop.set(true);
                                             }
                                     }

ui/src/components/crop_image_tool/rectangle_format_tool/mod.rs

@@ -1,10 +1,14 @@
-use common::{icons::outline::Shape, language::get_local_text, STATIC_ARGS};
+use common::{
+    icons::outline::Shape, language::get_local_text, utils::lifecycle::use_component_lifecycle,
+    STATIC_ARGS,
+};
 use dioxus::prelude::*;
 use kit::{
     elements::{button::Button, label::Label, range::Range, Appearance},
     layout::modal::Modal,
 };
-use std::path::PathBuf;
+use once_cell::sync::Lazy;
+use std::{fs, path::PathBuf};
 use tokio::io::AsyncWriteExt;
 
 use crate::components::crop_image_tool::b64_encode;
@@ -13,6 +17,8 @@ const ADJUST_CROP_RECTANGLE_SIZE_SCRIPT: &str = include_str!("./adjust_crop_rect
 const GET_IMAGE_DIMENSIONS_SCRIPT: &str = include_str!("../get_image_dimensions.js");
 const SAVE_CROPPED_IMAGE_SCRIPT: &str = include_str!("./save_cropped_image.js");
 const MOVE_IMAGE_SCRIPT: &str = include_str!("../move_image.js");
+static CROPPED_IMAGE_PATH: Lazy<PathBuf> =
+    Lazy::new(|| STATIC_ARGS.temp_files.join("cropped_image_for_banner.png"));
 
 #[derive(Debug, Clone)]
 struct ImageDimensions {
@@ -67,6 +73,14 @@ pub fn CropRectImageModal<'a>(cx: Scope<'a, Props<'a>>) -> Element<'a> {
         }
     });
 
+    use_component_lifecycle(
+        cx,
+        || {},
+        move || {
+            let _ = fs::remove_file(CROPPED_IMAGE_PATH.clone());
+        },
+    );
+
     return cx.render(rsx!(div {
         Modal {
             open: *crop_image.clone(),
@@ -133,8 +147,7 @@ pub fn CropRectImageModal<'a>(cx: Scope<'a, Props<'a>>) -> Element<'a> {
                                                         return;
                                                     },
                                                 };
-                                                let cropped_image_path = STATIC_ARGS.uplink_path.join("cropped_image_for_banner.png");
-                                                let mut file = match tokio::fs::File::create(cropped_image_path.clone()).await {
+                                                let mut file = match tokio::fs::File::create(CROPPED_IMAGE_PATH.clone()).await {
                                                     Ok(file) => file,
                                                     Err(e) => {
                                                         log::error!("Error creating cropped image file: {}", e);
@@ -152,7 +165,7 @@ pub fn CropRectImageModal<'a>(cx: Scope<'a, Props<'a>>) -> Element<'a> {
                                                     return;
                                                 }
 
-                                                cropped_image_pathbuf.with_mut(|f| *f = cropped_image_path.clone());
+                                                cropped_image_pathbuf.with_mut(|f| *f = CROPPED_IMAGE_PATH.clone());
                                                 clicked_button_to_crop.set(true);
                                             }
                                     }