don't load all photos on startup

changelog

···
   - Fixed filters not updating photo list
   - Fixed adding / removing photos not updating the photo list
 
+  Hotfix 1:
+    - Fixed new installations immediately crashing
+
   Dev Stuff:
-    - Split frontend up into many smaller files for easier editing
+    - Split frontend up into many smaller files for easier editing
+
+v0.2.4:
+  - Refactor loading system to not load all photos at the start 
+    (should help with large numbers of photos)

src-tauri/Cargo.lock

···
 
 [[package]]
 name = "vrcpm-rs"
-version = "0.2.3"
+version = "0.2.3-hot1"
 dependencies = [
  "dirs",
  "fast_image_resize",

src-tauri/Cargo.toml

···
 [package]
 name = "vrcpm-rs"
-version = "0.2.3"
+version = "0.2.3-hot1"
 description = "VRChat Photo Manager"
 authors = ["_phaz"]
 edition = "2021"

src-tauri/src/frontend_calls/close_splashscreen.rs

···
     }
   }
 
-  let value = get_config_value_string("start-in-bg".to_owned()).unwrap();
+  let value: String = match get_config_value_string("start-in-bg".to_owned()) { Some(val) => val, None => "false".to_owned() };
   if value == "true"{
     show = false;
   }

src-tauri/src/util/get_photo_path.rs

···
     .unwrap()
     .join("PhazeDev/VRChatPhotoManager/.photos_path");
 
-  dbg!(&config_path);
-
   match fs::read_to_string(config_path) {
     Ok(path) => {
       path::PathBuf::from(path)

src/Components/FilterMenu.tsx

···
+import { Show } from "solid-js";
 import { FilterType } from "./Structs/FilterType";
 
 let FilterMenu = () => {
···
 
   return (
     <>
+      <Show when={!window.PhotoManager.HasBeenIndexed()}>
+        <div>Your photos aren't indexed due to the large number, filters may take a while to load.</div>
+        <div style={{ height: '8px' }}></div>
+      </Show>
       <div class="filter-type-select">
         <div class="selected-filter" ref={( el ) => selectionButtons.push(el)} onClick={() => {
           select(0);

src/Components/Managers/PhotoListRenderingManager.tsx

···
   private _layout: PhotoListRow[] = [];
   private _canvas!: HTMLCanvasElement;
 
+  private _isLoading = false;
+
   constructor(){}
 
   public SetCanvas( canvas: HTMLCanvasElement ){
···
       }
       
       currentY += row.Height + 10;
+    }
+
+    if(!this._isLoading){
+      console.log('Loading more photos...');
+      this._isLoading = true;
+
+      window.PhotoManager.LoadSomeAndReloadFilters()
+        .then(() => {
+          this._isLoading = false;
+        });
     }
   }
 }

src/Components/Managers/PhotoManager.tsx

···
 
   private _filterType: FilterType = FilterType.USER;
   private _filter: string = "";
+  
+  private _lastLoaded: number = 0;
+  private _onLoadedMeta: any = {};
+  private _hasBeenIndexed: Accessor<boolean>;
 
   constructor(){
     let [ photoCount, setPhotoCount ] = createSignal(-1);
···
 
     this.PhotoCount = photoCount;
     this.PhotoSize = photoSize;
+
+    let setHasBeenIndexed;
+    [ this._hasBeenIndexed, setHasBeenIndexed ] = createSignal(false);
+    console.log(this._hasBeenIndexed())
 
     listen('photos_loaded', ( event: any ) => {
       let photoPaths = event.payload.photos.reverse();
···
       setPhotoSize(event.payload.size);
 
       let doesHaveLegacy = false;
+      
+      if(photoPaths.length <= Vars.MAX_PHOTOS_BULK_LOAD)
+        setHasBeenIndexed(true);
 
-      photoPaths.forEach(( path: string ) => {
+      photoPaths.forEach(( path: string, i: number ) => {
         let photo
 
         if(path.slice(0, 9) === "legacy://"){
-          photo = new Photo(path.slice(9), true);
+          photo = new Photo(path.slice(9), true, i);
           doesHaveLegacy = true;
         } else
-          photo = new Photo(path, false);
+          photo = new Photo(path, false, i);
 
         this.Photos.push(photo);
-        photo.loadMeta();
+
+        if(photoPaths.length <= Vars.MAX_PHOTOS_BULK_LOAD)
+          photo.loadMeta();
       })
 
       if(doesHaveLegacy){
···
       }
 
       console.log(this.Photos.length + ' Photos found.');
-      if(this.Photos.length === 0){
+      if(this.Photos.length === 0 || photoPaths.length > Vars.MAX_PHOTOS_BULK_LOAD){
         console.log('No photos found, Skipping loading stage.');
 
         this.FilteredPhotos = this.Photos;
···
 
         this._finishedLoadingCallbacks.forEach(cb => cb());
       }
+
+      console.log(this._hasBeenIndexed())
     });
 
     listen('photo_meta_loaded', ( event: any ) => {
···
   
       let photo = this.Photos.find(x => x.path === data.path);
       if(!photo)return console.error('Cannot find photo.', data);
+
+      this._lastLoaded = photo.index;
+
+      if(this._onLoadedMeta[photo.index]){
+        this._onLoadedMeta[photo.index]();
+        delete this._onLoadedMeta[photo.index];
+      }
   
       photo.width = data.width;
       photo.height = data.height;
···
     })
 
     listen('photo_create', async ( event: any ) => {
-      let photo = new Photo(event.payload);
-  
+      let photo = new Photo(event.payload, false, 0);
+      
+      this.Photos.forEach(p => p.index++); // Probably a really dumb way of doing this
       this.Photos.splice(0, 0, photo);
 
       photo.onMetaLoaded = () => this.ReloadFilters();
···
 
   public SetFilter( filter: string ){
     this._filter = filter;
+    this.ReloadFilters();
+  }
+
+  public HasBeenIndexed(){
+    return this._hasBeenIndexed();
+  }
+
+  public LoadPhotoMetaAndWait( photo: Photo ){
+    return new Promise(res => {
+      photo.loadMeta();
+      this._onLoadedMeta[photo.index] = res;
+    })
+  }
+
+  public async LoadSomeAndReloadFilters(){
+    if(this.Photos.length < this._lastLoaded + 1)return;
+
+    for (let i = 1; i < 10; i++) {
+      if(!this.Photos[this._lastLoaded + 1])break;
+      await this.LoadPhotoMetaAndWait(this.Photos[this._lastLoaded + 1]);
+    }
+
     this.ReloadFilters();
   }
 

src/Components/PhotoList.tsx

···
 
   return (
     <div class="photo-list">
-      <div ref={filterContainer!} class="filter-container">
+      <div ref={filterContainer!} class="filter-container" style={{
+        height: window.PhotoManager.HasBeenIndexed() ? '83px' : '110px',
+        width: window.PhotoManager.HasBeenIndexed() ? '600px' : '650px'
+      }}>
         <FilterMenu />
       </div>
 

src/Components/Structs/Photo.ts

···
   date: Date;
 
   legacy: boolean = false;
+  index: number = 0;
 
   public onMetaLoaded: () => void = () => {};
 
-  constructor( path: string, isLegacy: boolean = false ){
+  constructor( path: string, isLegacy: boolean = false, i: number ){
     this.path = path;
     this.legacy = isLegacy;
+    this.index = i;
+
+    let split = this.path.split('_');
 
     if(this.legacy)
-      this.dateString = this.path.split('_')[2];
+      this.dateString = split[2];
     else
-      this.dateString = this.path.split('_')[1];
+      this.dateString = split[1];
 
     let splitDateString = this.dateString.split('-');
 
···
     this.date.setFullYear(parseInt(splitDateString[0]));
     this.date.setMonth(parseInt(splitDateString[1]));
     this.date.setDate(parseInt(splitDateString[2]));
+
+    let resSplit = split[3].split('x');
+
+    let width = parseInt(resSplit[0]);
+    let height = parseInt(resSplit[1]);
+
+    if(!isNaN(width) || !isNaN(height)){
+      this.width = width;
+      this.height = height;
+  
+      let scale = Vars.PHOTO_HEIGHT / this.height;
+  
+      this.scaledWidth = this.width * scale;
+      this.scaledHeight = Vars.PHOTO_HEIGHT;
+    }
   }
 
   loadMeta(){
···
     if(this.loading || this.loaded || imagesLoading >= Vars.MAX_IMAGE_LOAD)return;
 
     // this.loadMeta();
-    if(!this.metaLoaded)return;
+    if(!this.metaLoaded)return this.loadMeta();
 
     this.loading = true;
 

src/Components/Structs/Vars.ts

···
 export class Vars{
   static MAX_IMAGE_LOAD = 10;
   static PHOTO_HEIGHT = 200;
+
+  static MAX_PHOTOS_BULK_LOAD = 100;
 }