feat(Files): Add possibility to preview video files

Satellite-im · Jan 11, 2024 · ae7f736 · ae7f736
1 parent fbbdd75
commit ae7f736
Show file tree

Hide file tree

Showing 7 changed files with 63 additions and 21 deletions.
diff --git a/common/src/lib.rs b/common/src/lib.rs
@@ -197,6 +197,10 @@ pub const VIDEO_FILE_EXTENSIONS: &[&str] = &[
 
 pub const DOC_EXTENSIONS: &[&str] = &[".doc", ".docx", ".pdf", ".txt"];
 
+pub fn is_video(file_name: &str) -> bool {
+    VIDEO_FILE_EXTENSIONS.iter().any(|x| file_name.ends_with(x))
+}
+
 pub fn get_images_dir() -> anyhow::Result<PathBuf> {
     if !cfg!(feature = "production_mode") {
         return Ok(Path::new("ui").join("extra").join("images"));

diff --git a/common/src/utils/clear_temp_files_dir.rs b/common/src/utils/clear_temp_files_dir.rs
@@ -0,0 +1,23 @@
+use std::{fs, io, path::PathBuf};
+
+use crate::STATIC_ARGS;
+
+pub fn clear_temp_files_directory(path_to_delete_specific_file: Option<PathBuf>) -> io::Result<()> {
+    match path_to_delete_specific_file {
+        Some(path) => fs::remove_file(&path)?,
+        None => {
+            let temp_files_dir = fs::read_dir(STATIC_ARGS.temp_files.clone())?;
+            for entry in temp_files_dir {
+                let entry = entry?;
+                let path = entry.path();
+                if path.is_dir() {
+                    fs::remove_dir_all(&path)?;
+                } else {
+                    fs::remove_file(&path)?;
+                }
+            }
+        }
+    }
+
+    Ok(())
+}
diff --git a/common/src/utils/mod.rs b/common/src/utils/mod.rs
@@ -1,2 +1,3 @@
+pub mod clear_temp_files_dir;
 pub mod img_dimensions_preview;
 pub mod lifecycle;
diff --git a/kit/src/components/embeds/file_embed/mod.rs b/kit/src/components/embeds/file_embed/mod.rs
@@ -7,6 +7,7 @@ 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::clear_temp_files_dir::clear_temp_files_directory;
 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;
@@ -163,13 +164,12 @@ pub fn FileEmbed<'a>(cx: Scope<'a, Props<'a>>) -> Element<'a> {
     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());
+            let _ = clear_temp_files_directory(None);
         },
     );
 

diff --git a/ui/src/components/files/file_preview.rs b/ui/src/components/files/file_preview.rs
@@ -4,8 +4,7 @@ use std::path::PathBuf;
 use common::language::get_local_text;
 use common::state::State;
 use common::utils::img_dimensions_preview::{IMAGE_MAX_HEIGHT, IMAGE_MAX_WIDTH};
-use common::utils::lifecycle::use_component_lifecycle;
-use common::STATIC_ARGS;
+use common::{STATIC_ARGS, is_video};
 use common::{icons::outline::Shape as Icon, warp_runner::thumbnail_to_base64};
 use dioxus::prelude::*;
 use kit::components::context_menu::{ContextItem, ContextMenu};
@@ -22,21 +21,13 @@ pub fn FilePreview<'a>(cx: Scope<'a, Props<'a>>) -> Element<'a> {
     let thumbnail = thumbnail_to_base64(cx.props.file);
     let state = use_shared_state::<State>(cx)?;
     let temp_dir = STATIC_ARGS.temp_files.join(cx.props.file.name());
-    let temp_dir2 = temp_dir.clone();
+    let is_video = is_video(&cx.props.file.name());
 
     if !temp_dir.exists() {
         cx.props.on_download.call(Some(temp_dir.clone()));
     }
     let temp_file_path_as_string = temp_dir.clone().to_string_lossy().to_string();
 
-    use_component_lifecycle(
-        cx,
-        || {},
-        move || {
-            let _ = fs::remove_file(temp_dir2.clone());
-        },
-    );
-
     cx.render(rsx!(
         ContextMenu {
             id: "file-preview-context-menu".into(),
@@ -51,13 +42,25 @@ pub fn FilePreview<'a>(cx: Scope<'a, Props<'a>>) -> Element<'a> {
                     }
                 },
             )),
-            img {
-                id: "file_preview_img",
-                aria_label: "file-preview-image",
-                max_height: IMAGE_MAX_HEIGHT,
-                max_width: IMAGE_MAX_WIDTH,
-                src: format_args!("{}", if temp_dir.exists() { temp_file_path_as_string } else {thumbnail} ),
-            },
+            if is_video {
+                rsx!(video {
+                    id: "file_preview_img",
+                    aria_label: "file-preview-image",
+                    max_height: IMAGE_MAX_HEIGHT,
+                    max_width: IMAGE_MAX_WIDTH,
+                    controls: true, 
+                    src: format_args!("{}", if temp_dir.exists() { temp_file_path_as_string } else {"".to_string()} ),
+
+                })
+            } else {
+                rsx!(img {
+                    id: "file_preview_img",
+                    aria_label: "file-preview-image",
+                    max_height: IMAGE_MAX_HEIGHT,
+                    max_width: IMAGE_MAX_WIDTH,
+                    src: format_args!("{}", if temp_dir.exists() { temp_file_path_as_string } else {thumbnail} ),
+                },)
+            }
         },
     ))
 }
diff --git a/ui/src/layouts/storage/files_layout/mod.rs b/ui/src/layouts/storage/files_layout/mod.rs
@@ -7,6 +7,8 @@ use common::icons::outline::Shape as Icon;
 use common::language::get_local_text;
 use common::state::{ui, Action, State};
 use common::upload_file_channel::CANCEL_FILE_UPLOADLISTENER;
+use common::utils::clear_temp_files_dir::clear_temp_files_directory;
+use common::utils::lifecycle::use_component_lifecycle;
 use common::warp_runner::{RayGunCmd, WarpCmd};
 use common::WARP_CMD_CH;
 use dioxus::prelude::*;
@@ -104,6 +106,14 @@ pub fn FilesLayout(cx: Scope<'_>) -> Element<'_> {
 
     let tx_cancel_file_upload = CANCEL_FILE_UPLOADLISTENER.tx.clone();
 
+    use_component_lifecycle(
+        cx,
+        || {},
+        move || {
+            let _ = clear_temp_files_directory(None);
+        },
+    );
+
     cx.render(rsx!(
         if let Some(file) = storage_controller.read().show_file_modal.as_ref() {
             let file2 = file.clone();

diff --git a/ui/src/layouts/storage/shared_component.rs b/ui/src/layouts/storage/shared_component.rs
@@ -6,6 +6,7 @@ use crate::layouts::storage::send_files_layout::send_files_components::{
 use super::files_layout::controller::StorageController;
 use common::icons::outline::Shape as Icon;
 use common::icons::Icon as IconElement;
+use common::is_video;
 use common::state::{State, ToastNotification};
 use common::warp_runner::thumbnail_to_base64;
 use common::{language::get_local_text, ROOT_DIR_NAME};
@@ -283,7 +284,7 @@ pub fn FilesAndFolders<'a>(cx: Scope<'a, FilesAndFoldersProps<'a>>) -> Element<'
                                         ));
                                         return;
                                     }
-                                    if file3.thumbnail().is_empty() {
+                                    if file3.thumbnail().is_empty() && !is_video(&file3.name()) {
                                         state
                                         .write()
                                         .mutate(common::state::Action::AddToastNotification(