add filters

changelog

···
   - Migrate to tauri v2
 
   - Photos shouldn't cause the ui to lag while loading
-  - Removed the metadata loading screen in favour of loading the metadata just before an image it rendered
   - Added the context menu back to the photo viewer screen
+  - Added filter menu, you can now search for photos taken in specific worlds or with specific people
   - Fixed some weird bugs where the world data cache would be ignored
   - Fixed the ui forgetting the user account in some cases where the token stored it still valid
   - Updated no photos text to be kinder
   - Settings menu can now be closed with ESC
   - Fixed photos being extremely wide under certain conditions
   - Fixed some icons not showing correctly
+  - Fixed a bug where it would store multiple versions of cache for a world, and then request the world data again everytime
 
   - Photo viewer can now be navigated with keybinds:
     - Up Arrow: Open Tray

src-tauri/src/util/handle_uri_proto.rs

···
     }
 
     // TODO: Only accept files that are in the vrchat photos folder
+    // Slightly more complex than originally thought, need to find a way to cache the VRC photos path
+    // since i need to be able to load lots of photos very quickly. This shouldn't be a security issue
+    // because tauri should only let the frontend of VRCPhotoManager read files throught this. Only
+    // becomes a potential issue if the frontend gets modified or there's an issue with tauri.
+
     let path = uri.path().split_at(1).1;
     let file = fs::File::open(path);
 

src/Components/FilterMenu.tsx

···
+enum FilterType{
+  USER, WORLD
+}
+
+class FilterMenuProps{
+  setFilterType!: ( type: FilterType ) => void;
+  setFilter!: ( filter: string ) => void;
+}
+
+let FilterMenu = ( props: FilterMenuProps ) => {
+  let selectionButtons: HTMLDivElement[] = [];
+
+  let select = ( index: number ) => {
+    selectionButtons.forEach(e => e.classList.remove('selected-filter'));
+    selectionButtons[index].classList.add('selected-filter');
+  }
+
+  return (
+    <>
+      <div class="filter-type-select">
+        <div class="selected-filter" ref={( el ) => selectionButtons.push(el)} onClick={() => {
+          select(0);
+          props.setFilterType(FilterType.USER);
+        }}>User</div>
+        <div ref={( el ) => selectionButtons.push(el)} onClick={() => {
+          select(1);
+          props.setFilterType(FilterType.WORLD);
+        }}>World</div>
+      </div>
+
+      <input class="filter-search" type="text" onInput={( el ) => props.setFilter(el.target.value)} placeholder="Enter Search Term..."></input>
+    </>
+  )
+}
+
+export default FilterMenu
+export { FilterType }

src/Components/PhotoList.tsx

···
 import { listen } from '@tauri-apps/api/event';
 
 import anime from "animejs";
+import FilterMenu, { FilterType } from "./FilterMenu";
 
 const PHOTO_HEIGHT = 200;
 const MAX_IMAGE_LOAD = 10;
···
   NONE
 }
 
-// TODO: Photo filtering / Searching (By users, By date, By world)
 let PhotoList = ( props: PhotoListProps ) => {
   let amountLoaded = 0;
   let imagesLoading = 0;
+
+  let hasFirstLoaded = false;
 
   let photoTreeLoadingContainer: HTMLElement;
 
···
   let photos: Photo[] = [];
   let currentPhotoIndex: number = -1;
 
-  let datesList: any = {};
-
   let scroll: number = 0;
   let targetScroll: number = 0;
 
···
 
   let currentPopup = ListPopup.NONE;
 
+  let filterType: FilterType = FilterType.USER;
+  let filter = '';
+
+  let filteredPhotos: Photo[] = [];
+
   let closeWithKey = ( e: KeyboardEvent ) => {
     if(e.key === 'Escape'){
       closeCurrentPopup();
···
       this.dateString = this.path.split('_')[1];
     }
 
+    loadMeta(){
+      invoke('load_photo_meta', { photo: this.path });
+    }
+
     loadImage(){
       if(this.loading || this.loaded || imagesLoading >= MAX_IMAGE_LOAD)return;
 
-      invoke('load_photo_meta', { photo: this.path });
+      this.loadMeta();
       if(!this.metaLoaded)return;
 
       this.loading = true;
···
 
     switch(action){
       case 'prev':
-        if(!photos[currentPhotoIndex - 1])break;
-        props.setCurrentPhotoView(photos[currentPhotoIndex - 1]);
+        if(!filteredPhotos[currentPhotoIndex - 1])break;
+        props.setCurrentPhotoView(filteredPhotos[currentPhotoIndex - 1]);
 
         currentPhotoIndex--;
         break;
       case 'next':
-        if(!photos[currentPhotoIndex + 1])break;
-        props.setCurrentPhotoView(photos[currentPhotoIndex + 1]);
+        if(!filteredPhotos[currentPhotoIndex + 1])break;
+        props.setCurrentPhotoView(filteredPhotos[currentPhotoIndex + 1]);
 
         currentPhotoIndex++;
         break;
···
     scroll = scroll + (targetScroll - scroll) * 0.2;
 
     let lastPhoto;
-    for (let i = 0; i < photos.length; i++) {
-      let p = photos[i];
+    for (let i = 0; i < filteredPhotos.length; i++) {
+      let p = filteredPhotos[i];
 
       if(currentRowIndex * 210 - scroll > photoContainer.height){
         p.shown = false;
···
       })
     }
 
-    if(photos.length == 0){
+    if(filteredPhotos.length == 0){
       ctx.textAlign = 'center';
       ctx.textBaseline = 'middle';
       ctx.globalAlpha = 1;
       ctx.fillStyle = '#fff';
-      ctx.font = '50px Rubik';
+      ctx.font = '40px Rubik';
 
       ctx.fillText("It's looking empty in here! You have no photos :O", photoContainer.width / 2, photoContainer.height / 2);
     }
···
 
     photo.metaLoaded = true;
     photo.onMetaLoaded();
+
+    if(amountLoaded === photos.length && !hasFirstLoaded){
+      filteredPhotos = photos;
+      hasFirstLoaded = true;
+
+      anime({
+        targets: photoTreeLoadingContainer,
+        height: 0,
+        easing: 'easeInOutQuad',
+        duration: 500,
+        opacity: 0,
+        complete: () => {
+          photoTreeLoadingContainer.style.display = 'none';
+        }
+      })
+
+      anime({
+        targets: '.reload-photos',
+        opacity: 1,
+        duration: 150,
+        easing: 'easeInOutQuad'
+      })
+
+      render();
+    }
   })
 
   listen('photo_create', ( event: any ) => {
     let photo = new Photo(event.payload);
+
     photos.splice(0, 0, photo);
+    photo.loadMeta();
 
     if(!props.isPhotosSyncing() && props.storageInfo().sync){
       props.setIsPhotosSyncing(true);
···
     quitRender = true;
     amountLoaded = 0;
     scroll = 0;
+
     photos = [];
+    filteredPhotos = [];
 
     anime({
       targets: '.reload-photos',
···
       photoPaths.forEach(( path: string ) => {
         let photo = new Photo(path);
         photos.push(photo);
-      })
 
-      anime({
-        targets: photoTreeLoadingContainer,
-        height: 0,
-        easing: 'easeInOutQuad',
-        duration: 500,
-        opacity: 0,
-        complete: () => {
-          photoTreeLoadingContainer.style.display = 'none';
-        }
-      })
-
-      anime({
-        targets: '.reload-photos',
-        opacity: 1,
-        duration: 150,
-        easing: 'easeInOutQuad'
+        photo.loadMeta();
       })
-
-      photoPaths.forEach(( path: string ) => {
-        let date = path.split('_')[1];
-
-        if(!datesList[date])
-          datesList[date] = 1;
-      });
-
-      render();
     })
   }
 
···
     })
 
     photoContainer.addEventListener('click', ( e: MouseEvent ) => {
-      let photo = photos.find(x =>
+      let photo = filteredPhotos.find(x =>
         e.clientX > x.x &&
         e.clientY > x.y &&
         e.clientX < x.x + x.scaledWidth! &&
···
 
       if(photo){
         props.setCurrentPhotoView(photo);
-        currentPhotoIndex = photos.indexOf(photo);
+        currentPhotoIndex = filteredPhotos.indexOf(photo);
       } else
         currentPhotoIndex = -1;
     })
···
     window.removeEventListener('keyup', closeWithKey);
   })
 
-  return ( 
+  let reloadFilters = () => {
+    filteredPhotos = [];
+
+    switch(filterType){
+      case FilterType.USER:
+        photos.map(p => {
+          if(p.metadata){
+            let meta = JSON.parse(p.metadata);
+            let photo = meta.players.find(( y: any ) => y.displayName.toLowerCase().includes(filter) || y.id === filter);
+    
+            if(photo)filteredPhotos.push(p);
+          }
+        })
+        break;
+      case FilterType.WORLD:
+        photos.map(p => {
+          if(p.metadata){
+            let meta = JSON.parse(p.metadata);
+            let photo = meta.world.name.toLowerCase().includes(filter) || meta.world.id === filter;
+    
+            if(photo)filteredPhotos.push(p);
+          }
+        })
+        break;
+    }
+  }
+
+  return (
     <div class="photo-list">
       <div ref={filterContainer!} class="filter-container">
-        <div class="filter-title">Filters</div>
+        <FilterMenu
+          setFilter={( f ) => { filter = f.toLowerCase(); reloadFilters(); }}
+          setFilterType={( t ) => { filterType = t; reloadFilters(); }} />
       </div>
 
       <div class="photo-tree-loading" ref={( el ) => photoTreeLoadingContainer = el}>Scanning Photo Tree...</div>

src/Components/PhotoViewer.tsx

···
       imageViewer.style.opacity = '0';
 
       if(photo){
-        console.log(photo);
-
         (async () => {
           if(!photoPath)
             photoPath = await invoke('get_user_photos_path') + '/';
···
 
             let meta = JSON.parse(photo.metadata);
             let worldData = worldCache.find(x => x.worldData.id === meta.world.id);
-  
+
             allowedToOpenTray = true;
             trayButton.style.display = 'flex';
   
···
                 </div>
               </div> as Node
             );
-  
-  
+
             if(!worldData){
               console.log('Fetching new world data');
   
···
             } else if(worldData.expiresOn < Date.now()){
               console.log('Fetching new world data since cache has expired');
   
-              worldCache = worldCache.filter(x => x !== worldData)
+              worldCache = worldCache.filter(x => x.worldData.id !== meta.world.id)
               invoke('find_world_by_id', { worldId: meta.world.id });
             } else
               loadWorldData(worldData);

src/styles.css

···
 .filter-container{
   display: none;
   position: fixed;
-  top: 50%;
+  bottom: 0;
   left: 50%;
   width: 600px;
-  height: 250px;
-  transform: translate(-50%, -50%);
+  height: 83px;
+  transform: translate(-50%);
   padding: 10px;
-  border-radius: 5px;
+  border-radius: 5px 5px 0 0;
   backdrop-filter: blur(5px);
   background: #555a;
   color: #fff;
···
 
 .filter-container > .filter-title{
   font-size: 30px;
+}
+
+.filter-type-select{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 75%;
+  margin: auto;
+}
+
+.filter-type-select > div{
+  width: 100%;
+  border: #fff 4px solid;
+  border-left: #fff 2px solid;
+  border-right: #fff 2px solid;
+  padding: 5px 0;
+  cursor: pointer;
+  user-select: none;
+}
+
+.filter-type-select > div:first-child{
+  border-left: #fff 4px solid;
+  border-radius: 10px 0 0 10px;
+}
+
+.filter-type-select > div:last-child{
+  border-right: #fff 4px solid;
+  border-radius: 0 10px 10px 0;
+}
+
+.filter-type-select > .selected-filter{
+  background: #00ccff55;
+}
+
+.filter-search{
+  margin-top: 10px;
+  padding: 5px;
+  border: #fff 4px solid;
+  border-radius: 10px;
+  background: #0008;
+  outline: none;
+  color: white;
+  font-size: 15px;
+  font-family: 'Rubik';
+  width: calc(75% - 18px);
 }
 
 .date-list{