AAAAAAA

changelog

···
     - 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

src-tauri/src/main.rs

···
 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;
···
   // 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<notify::Event, notify::Error> | {
-    // 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();
             }
           },
           _ => {}

src/Components/Managers/PhotoListRenderingManager.tsx

···
 
 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;
···
 
       // 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);
···
         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];
 
···
             // 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';
···
             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

src/Components/Managers/PhotoManager.tsx

···
       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;
···
   
       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;
   
···
       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){
···
   
       if(event.payload === window.PhotoViewerManager.CurrentPhoto()?.path)
         window.PhotoViewerManager.Close()
+
+      this.ReloadFilters();
     })
   }
 
···
       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(){

src/Components/PhotoList.tsx

···
       easing: 'easeInOutQuad'
     })
 
-    window.PhotoListRenderingManager.ComputeLayout(photoContainer!);
+    window.PhotoListRenderingManager.SetCanvas(photoContainer!);
+    window.PhotoListRenderingManager.ComputeLayout();
+
     render();
   });
 
···
       photoContainerBG.width = window.innerWidth;
       photoContainerBG.height = window.innerHeight;
 
-      window.PhotoListRenderingManager.ComputeLayout(photoContainer!);
+      window.PhotoListRenderingManager.ComputeLayout();
     })
 
     photoContainer.addEventListener('click', ( e: MouseEvent ) => {

src/Components/Structs/Photo.ts

···
   loadImage(){
     if(this.loading || this.loaded || imagesLoading >= Vars.MAX_IMAGE_LOAD)return;
 
-    this.loadMeta();
+    // this.loadMeta();
     if(!this.metaLoaded)return;
 
     this.loading = true;

src/Components/Structs/PhotoListRow.ts

···
 export class PhotoListRow{
   public Elements: PhotoListElement[] = [];
   public Height: number = Vars.PHOTO_HEIGHT;
-  public Width: number = 0;
+  public Width: number = 10;
 }