diff --git a/changelog b/changelog index 0a0d247..f6fcea3 100644 --- a/changelog +++ b/changelog @@ -64,7 +64,10 @@ v0.2.2: - Fixed world cache not being saved to the config file v0.2.3: - - Finally replaced the awful render function in the frontend + - Finally replaced the awful render function in the frontend, ( should use less resources when app is open ) + - Fixed photos not being lined up + - Fixed filters not updating photo list + - Fixed adding / removing photos not updating the photo list Dev Stuff: - Split frontend up into many smaller files for easier editing \ No newline at end of file diff --git a/src-tauri/src/main.rs b/src-tauri/src/main.rs index c8608ef..6ea0c7f 100644 --- a/src-tauri/src/main.rs +++ b/src-tauri/src/main.rs @@ -12,7 +12,7 @@ use frontend_calls::*; use notify::{EventKind, RecursiveMode, Watcher}; use pngmeta::PNGImage; use regex::Regex; -use util::cache::Cache; +use util::{cache::Cache, get_photo_path::get_photo_path}; use std::{env, fs, thread}; use tauri::{Emitter, Manager, State, WindowEvent}; use tauri_plugin_deep_link::DeepLinkExt; @@ -92,35 +92,36 @@ fn main() { // Listen for file updates, store each update in an mpsc channel and send to the frontend let (sender, receiver) = std::sync::mpsc::channel(); let mut watcher = notify::recommended_watcher(move | res: Result | { - // TODO: Fix this, why does it not work?? it does work??? match res { - Ok(event) => { + Ok(event) => { match event.kind{ EventKind::Remove(_) => { let path = event.paths.first().unwrap(); + let name = path.file_name().unwrap().to_str().unwrap().to_owned(); let re1 = Regex::new(r"(?m)VRChat_[0-9]{4}-[0-9]{2}-[0-9]{2}_[0-9]{2}-[0-9]{2}-[0-9]{2}.[0-9]{3}_[0-9]{4}x[0-9]{4}.png").unwrap(); let re2 = Regex::new(r"(?m)/VRChat_[0-9]{4}-[0-9]{2}-[0-9]{2}_[0-9]{2}-[0-9]{2}-[0-9]{2}.[0-9]{3}_[0-9]{4}x[0-9]{4}_wrld_[a-z0-9]{8}-[a-z0-9]{4}-[a-z0-9]{4}-[a-z0-9]{4}-[a-z0-9]{12}.png/gm").unwrap(); if - re1.is_match(path.to_str().unwrap()) || - re2.is_match(path.to_str().unwrap()) + re1.is_match(&name) || + re2.is_match(&name) { - sender.send((2, path.clone().strip_prefix(util::get_photo_path::get_photo_path()).unwrap().to_path_buf())).unwrap(); + sender.send((2, path.strip_prefix(get_photo_path()).unwrap().to_str().unwrap().to_owned())).unwrap(); } }, EventKind::Create(_) => { let path = event.paths.first().unwrap(); + let name = path.file_name().unwrap().to_str().unwrap().to_owned(); let re1 = Regex::new(r"(?m)VRChat_[0-9]{4}-[0-9]{2}-[0-9]{2}_[0-9]{2}-[0-9]{2}-[0-9]{2}.[0-9]{3}_[0-9]{4}x[0-9]{4}.png").unwrap(); let re2 = Regex::new(r"(?m)/VRChat_[0-9]{4}-[0-9]{2}-[0-9]{2}_[0-9]{2}-[0-9]{2}-[0-9]{2}.[0-9]{3}_[0-9]{4}x[0-9]{4}_wrld_[a-z0-9]{8}-[a-z0-9]{4}-[a-z0-9]{4}-[a-z0-9]{4}-[a-z0-9]{12}.png/gm").unwrap(); if - re1.is_match(path.to_str().unwrap()) || - re2.is_match(path.to_str().unwrap()) + re1.is_match(&name) || + re2.is_match(&name) { thread::sleep(time::Duration::from_millis(1000)); - sender.send((1, path.clone().strip_prefix(util::get_photo_path::get_photo_path()).unwrap().to_path_buf())).unwrap(); + sender.send((1, path.strip_prefix(get_photo_path()).unwrap().to_str().unwrap().to_owned())).unwrap(); } }, _ => {} diff --git a/src/Components/Managers/PhotoListRenderingManager.tsx b/src/Components/Managers/PhotoListRenderingManager.tsx index b783ed0..9a5a58e 100644 --- a/src/Components/Managers/PhotoListRenderingManager.tsx +++ b/src/Components/Managers/PhotoListRenderingManager.tsx @@ -7,10 +7,17 @@ const MONTHS = [ "January", "February", "March", "April", "May", "June", "July", export class PhotoListRenderingManager{ private _layout: PhotoListRow[] = []; + private _canvas!: HTMLCanvasElement; constructor(){} - public ComputeLayout( canvas: HTMLCanvasElement ){ + public SetCanvas( canvas: HTMLCanvasElement ){ + this._canvas = canvas; + } + + public ComputeLayout(){ + this._layout = []; + let lastDateString = null; let row = new PhotoListRow(); row.Height = 100; @@ -36,14 +43,14 @@ export class PhotoListRenderingManager{ // Check if the current row width plus another photo is too big to fit, push this row to the // layout and add the photo to the next row instead - if(row.Width + photo.scaledWidth! + 10 > canvas.width - 100){ + if(row.Width + photo.scaledWidth! + 10 > this._canvas.width - 100){ this._layout.push(row); row = new PhotoListRow(); } // We should now add this photo to the current row row.Elements.push(new PhotoListPhoto(photo)); - row.Width += photo.scaledWidth!; + row.Width += photo.scaledWidth! + 10; } this._layout.push(row); @@ -81,9 +88,13 @@ export class PhotoListRenderingManager{ currentY += row.Height + 10; continue; } + + // === DEBUG === + // ctx.strokeStyle = '#f00'; + // ctx.strokeRect((canvas.width / 2) - row.Width / 2, currentY - 5 - scroll, row.Width, row.Height + 10); // Loop through all elements in the row - let rowXPos = 0; + let rowXPos = 10; for (let j = 0; j < row.Elements.length; j++) { let el = row.Elements[j]; @@ -93,8 +104,8 @@ export class PhotoListRenderingManager{ // and then render that text // === DEBUG === - ctx.strokeStyle = '#f00'; - ctx.strokeRect(0, currentY - scroll, canvas.width, row.Height); + // ctx.strokeStyle = '#f00'; + // ctx.strokeRect(0, currentY - scroll, canvas.width, row.Height); ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; @@ -108,8 +119,8 @@ export class PhotoListRenderingManager{ let photo = (el as PhotoListPhoto).Photo; // === DEBUG === - ctx.strokeStyle = '#f00'; - ctx.strokeRect((rowXPos - row.Width / 2) + canvas.width / 2, currentY - scroll, photo.scaledWidth!, row.Height); + // ctx.strokeStyle = '#f00'; + // ctx.strokeRect((rowXPos - row.Width / 2) + canvas.width / 2, currentY - scroll, photo.scaledWidth!, row.Height); if(!photo.loaded) // If the photo is not loaded, start a new task and load it in that task diff --git a/src/Components/Managers/PhotoManager.tsx b/src/Components/Managers/PhotoManager.tsx index bd3c248..40ac329 100644 --- a/src/Components/Managers/PhotoManager.tsx +++ b/src/Components/Managers/PhotoManager.tsx @@ -69,7 +69,7 @@ export class PhotoManager{ let data: PhotoMetadata = event.payload; let photo = this.Photos.find(x => x.path === data.path); - if(!photo)return; + if(!photo)return console.error('Cannot find photo.', data); photo.width = data.width; photo.height = data.height; @@ -84,11 +84,8 @@ export class PhotoManager{ photo.metaLoaded = true; photo.onMetaLoaded(); - - // this.ReloadFilters(); - - console.log(this._amountLoaded, this.Photos.length); - if(this._amountLoaded === this.Photos.length && !this.HasFirstLoaded){ + + if(this._amountLoaded === this.Photos.length - 1 && !this.HasFirstLoaded){ this.FilteredPhotos = this.Photos; this.HasFirstLoaded = true; @@ -100,6 +97,8 @@ export class PhotoManager{ let photo = new Photo(event.payload); this.Photos.splice(0, 0, photo); + + photo.onMetaLoaded = () => this.ReloadFilters(); photo.loadMeta(); if(!window.SyncManager.IsSyncing() && window.AccountManager.Storage()?.isSyncing){ @@ -113,6 +112,8 @@ export class PhotoManager{ if(event.payload === window.PhotoViewerManager.CurrentPhoto()?.path) window.PhotoViewerManager.Close() + + this.ReloadFilters(); }) } @@ -133,24 +134,30 @@ export class PhotoManager{ case FilterType.USER: this.Photos.map(p => { if(p.metadata){ - let meta = JSON.parse(p.metadata); - let photo = meta.players.find(( y: any ) => y.displayName.toLowerCase().includes(this._filter) || y.id === this._filter); - - if(photo)this.FilteredPhotos.push(p); + try{ + let meta = JSON.parse(p.metadata); + let photo = meta.players.find(( y: any ) => y.displayName.toLowerCase().includes(this._filter) || y.id === this._filter); + + if(photo)this.FilteredPhotos.push(p); + } catch(e){} } }) break; case FilterType.WORLD: this.Photos.map(p => { if(p.metadata){ - let meta = JSON.parse(p.metadata); - let photo = meta.world.name.toLowerCase().includes(this._filter) || meta.world.id === this._filter; - - if(photo)this.FilteredPhotos.push(p); + try{ + let meta = JSON.parse(p.metadata); + let photo = meta.world.name.toLowerCase().includes(this._filter) || meta.world.id === this._filter; + + if(photo)this.FilteredPhotos.push(p); + } catch(e){} } }) break; } + + window.PhotoListRenderingManager.ComputeLayout(); } public Load(){ diff --git a/src/Components/PhotoList.tsx b/src/Components/PhotoList.tsx index 80fc068..3263311 100644 --- a/src/Components/PhotoList.tsx +++ b/src/Components/PhotoList.tsx @@ -129,7 +129,9 @@ let PhotoList = () => { easing: 'easeInOutQuad' }) - window.PhotoListRenderingManager.ComputeLayout(photoContainer!); + window.PhotoListRenderingManager.SetCanvas(photoContainer!); + window.PhotoListRenderingManager.ComputeLayout(); + render(); }); @@ -163,7 +165,7 @@ let PhotoList = () => { photoContainerBG.width = window.innerWidth; photoContainerBG.height = window.innerHeight; - window.PhotoListRenderingManager.ComputeLayout(photoContainer!); + window.PhotoListRenderingManager.ComputeLayout(); }) photoContainer.addEventListener('click', ( e: MouseEvent ) => { diff --git a/src/Components/Structs/Photo.ts b/src/Components/Structs/Photo.ts index 259245f..905c351 100644 --- a/src/Components/Structs/Photo.ts +++ b/src/Components/Structs/Photo.ts @@ -55,7 +55,7 @@ export class Photo{ loadImage(){ if(this.loading || this.loaded || imagesLoading >= Vars.MAX_IMAGE_LOAD)return; - this.loadMeta(); + // this.loadMeta(); if(!this.metaLoaded)return; this.loading = true; diff --git a/src/Components/Structs/PhotoListRow.ts b/src/Components/Structs/PhotoListRow.ts index 0a0cecd..c243ff3 100644 --- a/src/Components/Structs/PhotoListRow.ts +++ b/src/Components/Structs/PhotoListRow.ts @@ -4,5 +4,5 @@ import { Vars } from "./Vars"; export class PhotoListRow{ public Elements: PhotoListElement[] = []; public Height: number = Vars.PHOTO_HEIGHT; - public Width: number = 0; + public Width: number = 10; } \ No newline at end of file