First basic image and caption viewing

Author: NetroScript

package.json

@@ -18,6 +18,7 @@
 		"@sveltejs/adapter-node": "^1.3.1",
 		"@sveltejs/adapter-static": "^2.0.3",
 		"@sveltejs/kit": "^1.5.0",
+		"@tailwindcss/forms": "^0.5.4",
 		"@tailwindcss/typography": "^0.5.9",
 		"@tauri-apps/cli": "^1.4.0",
 		"@typescript-eslint/eslint-plugin": "^5.45.0",
@@ -39,6 +40,7 @@
 	},
 	"type": "module",
 	"dependencies": {
+		"@svelte-put/dragscroll": "^3.0.0",
 		"@tauri-apps/api": "^1.4.0"
 	}
 }

pnpm-lock.yaml

@@ -24,6 +24,7 @@ tokio = { version = "1", features = ["full"] }
 actix-web = "4.3.1"
 actix-files = "0.6.2"
 once_cell = "1.18.0"
+actix-cors = "0.6.4"
 
 [features]
 # this feature is used for production builds or when `devPath` points to the filesystem and the built-in dev server is disabled.

src-tauri/Cargo.lock

@@ -24,7 +24,7 @@ static PORT: Lazy<Arc<RwLock<Option<u16>>>> = Lazy::new(|| Arc::new(RwLock::new(
 
 fn main() {
     #[cfg(debug_assertions)]
-    ts::export(collect_types![select_folder], "../src/lib/bindings.ts").unwrap();
+    ts::export(collect_types![select_folder, get_served_dir, get_available_files], "../src/lib/bindings.ts").unwrap();
 
     // Run the server as long as tauri runs
 
@@ -38,7 +38,7 @@ fn main() {
             });
             Ok(())
         })
-        .invoke_handler(tauri::generate_handler![select_folder])
+        .invoke_handler(tauri::generate_handler![select_folder, get_served_dir, get_available_files])
         .run(tauri::generate_context!())
         .expect("error while running tauri application");
 }
@@ -54,11 +54,88 @@ async fn select_folder() -> Result<String, String> {
     let dialog_result: Option<PathBuf> = FileDialogBuilder::new().pick_folder();
 
     // Return the path as a string if the user selected a folder
-    match dialog_result {
+    let path = match dialog_result {
         Some(path) => match path.to_str() {
             Some(path_str) => Ok(path_str.to_string()),
             None => Err("Error converting path to string".to_string()),
         },
         None => Err("No folder selected".to_string()),
+    };
+
+    // Save the path to the global variable
+    if let Ok(path) = &path {
+
+        let mut served_dir_write = SERVED_DIR.write().unwrap();
+        *served_dir_write = path.clone();
+
+        // Now remove the lock
+        drop(served_dir_write);
+
+        // Print out the port number and the currently served absolute path to the console
+        println!(
+            "Serving files from {} on port {}",
+            SERVED_DIR.read().unwrap(),
+            PORT.read().unwrap().unwrap()
+        );
+    } else {
+        println!("No folder selected");
     }
+
+    path
+}
+
+
+// Expose a command to return the currently served directory, and the port number
+#[tauri::command]
+#[specta::specta]
+async fn get_served_dir() -> Result<(String, u16), String> {
+    let port = PORT.read().unwrap().unwrap();
+    let served_dir = SERVED_DIR.read().unwrap().clone();
+
+    Ok((served_dir, port))
+}
+
+// Expose a command to obtain all files available in the currently served directory
+// Directory traversal is recursive, with a maximum file count of 10000
+#[tauri::command]
+#[specta::specta]
+async fn get_available_files() -> Result<Vec<String>, String> {
+    use std::fs;
+    use std::path::PathBuf;
+
+    let served_dir = SERVED_DIR.read().unwrap().clone();
+
+    let mut files: Vec<String> = Vec::new();
+
+    // Recursively traverse the directory, and add all files to the vector
+    let mut dir_queue: Vec<PathBuf> = Vec::new();
+    dir_queue.push(PathBuf::from(served_dir.clone()));
+
+    while let Some(dir) = dir_queue.pop() {
+        if let Ok(entries) = fs::read_dir(dir) {
+            for entry in entries {
+                if let Ok(entry) = entry {
+                    let path = entry.path();
+                    if path.is_dir() {
+                        dir_queue.push(path);
+                    } else if let Some(path_str) = path.to_str() {
+
+                        // Only store the part of the path that is relative to the served directory
+                        let path_str = path_str.replace(&served_dir, "");
+                        // Also remove the leading slash (can also be a backslash on Windows)
+                        let path_str = path_str.trim_start_matches('/').trim_start_matches('\\');
+
+                        files.push(path_str.to_string());
+
+                        // Limit the file count to 10000
+                        if files.len() > 10000 {
+                            return Ok(files);
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    Ok(files)
 }

src-tauri/Cargo.toml

@@ -5,6 +5,7 @@ use tauri::AppHandle;
 use actix_files::NamedFile;
 use actix_web::{web, App, HttpServer, Result, middleware};
 use std::path::PathBuf;
+use actix_cors::Cors;
 use super::PORT;
 use super::SERVED_DIR;
 
@@ -20,9 +21,16 @@ pub async fn init(app: AppHandle) -> std::io::Result<()> {
 
     // Create server, bind it to any available port
     let server = HttpServer::new(move || {
+
+        let cors = Cors::default().allow_any_origin().send_wildcard();
+
+        // Additionally just return 200 if checkAlive as route is called
+
         App::new()
             .app_data(tauri_app.clone())
+            .wrap(cors)
             .wrap(middleware::Logger::default())
+            .route("/checkAlive", web::get().to(|| async { "OK" }))
             .service(web::resource("/{filename:.*}").route(web::get().to(serve_file)))
     })
     .bind("127.0.0.1:0")?;
@@ -56,3 +64,4 @@ async fn serve_file(path: web::Path<(String,)>) -> Result<NamedFile> {
 
     Ok(NamedFile::open(file_path)?)
 }
+

src-tauri/src/main.rs

@@ -64,10 +64,10 @@
     "windows": [
       {
         "fullscreen": false,
-        "height": 600,
+        "height": 900,
         "resizable": true,
         "title": "image-set-tag-editor",
-        "width": 800
+        "width": 1600
       }
     ]
   }

src-tauri/src/server/mod.rs

@@ -14,4 +14,12 @@ export function selectFolder() {
     return invoke()<string>("select_folder")
 }
 
+export function getServedDir() {
+    return invoke()<[string, number]>("get_served_dir")
+}
+
+export function getAvailableFiles() {
+    return invoke()<string[]>("get_available_files")
+}
+
 

src-tauri/tauri.conf.json

@@ -0,0 +1,61 @@
+import { writable, derived, get } from 'svelte/store';
+
+export const working_folder = writable('');
+export const file_server_port = writable(0);
+export const available_files = writable<string[]>([]);
+
+const VALID_IMAGE_FORMATS = ['.jpg', '.png', '.gif', '.bmp', '.webp', '.jpeg', '.avif']
+
+// Have a derived store, which combines all available files into an image file, and a corresponding caption file (the first non image file with the same name)
+export const available_images = writable<{image: string, caption: string, caption_file: string, viewed: boolean}[]>([]);
+export const is_loading_image_data = writable(false);
+
+const update_available_files = async () => {
+    const image_map = new Map<string, {image: string, caption: string, caption_file: string, viewed: boolean}>();
+
+
+    const unprocessed_files = [];
+    
+    for (const file of get(available_files)) {
+        // Get the file without the extension
+        const [file_name, file_extension] = file.split('.');
+        if (VALID_IMAGE_FORMATS.includes(`.${file_extension.toLocaleLowerCase()}`)) {
+            image_map.set(file_name, {
+                image: file,
+                caption: '',
+                caption_file: '',
+                viewed: false,
+            });
+        } else {
+            unprocessed_files.push(file);
+        }
+    };
+
+    for (const file of unprocessed_files) {
+        const [file_name, file_extension] = file.split('.');
+        const image = image_map.get(file_name);
+        if (image && image.caption === '') {
+            image.caption_file = file;
+
+            // Fetch the text caption from our file server
+            image.caption = await fetch(`http://localhost:${get(file_server_port)}/${file}`).then((response) => {
+                return response.text();
+            }).catch((error) => {
+                console.error(error);
+            }) || '';
+
+        }
+    }
+
+    return Array.from(image_map.values());
+}
+
+
+// But we need to manually, asynchronously update the available images by subscribing to the available files store
+available_files.subscribe(async (files) => {
+    is_loading_image_data.set(true);
+    available_images.set(await update_available_files());
+    is_loading_image_data.set(false);
+});
+
+