PHOTO TRAY!!!!

src-tauri/Cargo.lock

···
  "notify",
  "open 5.0.1",
  "regex",
+ "reqwest",
  "serde",
  "serde_json",
  "tauri",

src-tauri/Cargo.toml

···
 dirs = "5.0.1"
 notify = "6.1.1"
 regex = "1.10.3"
+reqwest = { version = "0.11", features = ["blocking"] }
 
 [features]
 # this feature is used for production builds or when `devPath` points to the filesystem

src-tauri/src/main.rs

···
 #![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]
 
 mod pngmeta;
+mod worldscraper;
 
 use tauri::{ CustomMenuItem, Manager, SystemTray, SystemTrayEvent, SystemTrayMenu, SystemTrayMenuItem, WindowEvent, http::ResponseBuilder };
 use core::time;
 use std::{ fs, io::Read, path, thread };
 use regex::Regex;
 use pngmeta::PNGImage;
+use worldscraper::World;
 use notify::{ EventKind, RecursiveMode, Watcher };
 
 #[derive(Clone, serde::Serialize)]
···
 #[tauri::command]
 fn start_user_auth() {
   open::that("https://id.phazed.xyz?oauth=79959294626406").unwrap();
+}
+
+#[tauri::command]
+fn open_url( url: &str ) {
+  open::that(url).unwrap();
+}
+
+// Load vrchat world data
+#[tauri::command]
+fn find_world_by_id( world_id: String, window: tauri::Window ){
+  thread::spawn(move || {
+    let world = World::new(world_id);
+    window.emit("world_data", world).unwrap();
+  });
 }
 
 // Scans all files under the "Pictures/VRChat" path
···
 
       Ok(())
     })
-    .invoke_handler(tauri::generate_handler![start_user_auth, load_photos, close_splashscreen, load_photo_meta, delete_photo])
+    .invoke_handler(tauri::generate_handler![start_user_auth, load_photos, close_splashscreen, load_photo_meta, delete_photo, open_url, find_world_by_id])
     .run(tauri::generate_context!())
     .expect("error while running tauri application");
 }

src-tauri/src/worldscraper.rs

···
+use serde::ser::{ Serialize, SerializeStruct, Serializer };
+use serde_json::json;
+
+#[derive(Clone)]
+pub struct World{
+  id: String,
+  name: String,
+  author: String,
+  author_id: String,
+  desc: String,
+  img: String,
+  max_users: u64,
+  visits: u64,
+  favourites: u64,
+  tags: String,
+  from: String,
+  from_site: String
+}
+
+impl World{
+  pub fn new( world_id: String ) -> World {
+    println!("Fetching world data for {}", &world_id);
+
+    let mut world = World {
+      id: "".into(),
+      name: "".into(),
+      author: "".into(),
+      author_id: "".into(),
+      desc: "".into(),
+      img: "".into(),
+      max_users: 0,
+      visits: 0,
+      favourites: 0,
+      tags: "".into(),
+      from: "https://vrclist.com/worlds/".into(),
+      from_site: "vrclist.com".into()
+    };
+
+    let client = reqwest::blocking::Client::new();
+
+    let world_id_str = world_id.to_owned();
+    let fixed_id_req = client.post("https://api.vrclist.com/worlds/id-convert")
+      .header("Content-Type", "application/json")
+      .header("User-Agent", "VRChat-Photo-Manager-Rust/0.0.1")
+      .body(json!({ "world_id": world_id_str }).to_string())
+      .send()
+      .unwrap()
+      .text()
+      .unwrap();
+
+    let fixed_id: serde_json::Value = serde_json::from_str(&fixed_id_req).unwrap();
+    world.from = format!("https://vrclist.com/worlds/{}", fixed_id["id"].to_string());
+
+    let world_data: serde_json::Value = client.post("https://api.vrclist.com/worlds/single")
+      .header("Content-Type", "application/json")
+      .header("User-Agent", "VRChat-Photo-Manager-Rust/0.0.1")
+      .body(json!({ "id": fixed_id["id"].to_string() }).to_string())
+      .send()
+      .unwrap()
+      .json()
+      .unwrap();
+
+    world.id = world_id.clone();
+    world.name = world_data["name"].to_string();
+    world.author = world_data["authorName"].to_string();
+    world.author_id = world_data["authorId"].to_string();
+    world.desc = world_data["description"].to_string();
+    world.img = world_data["imageUrl"].to_string();
+    world.tags = world_data["tags"].to_string();
+
+    match world_data["vrchat_visits"].as_u64() {
+      Some(visits) => { world.visits = visits },
+      None => {}
+    }
+
+    match world_data["capacity"].as_u64() {
+      Some(cap) => { world.max_users = cap; },
+      None => {}
+    }
+
+    println!("Fetched world data for {}", &world_id);
+    world
+  }
+}
+
+impl Serialize for World{
+  fn serialize<S>(&self, serializer: S) -> Result<S::Ok, S::Error>
+  where
+      S: Serializer,
+  {
+    let mut s = serializer.serialize_struct("World", 7)?;
+    s.serialize_field("id", &self.id)?;
+    s.serialize_field("name", &self.name)?;
+    s.serialize_field("author", &self.author)?;
+    s.serialize_field("authorId", &self.author_id)?;
+    s.serialize_field("desc", &self.desc)?;
+    s.serialize_field("img", &self.img)?;
+    s.serialize_field("maxUsers", &self.max_users)?;
+    s.serialize_field("visits", &self.visits)?;
+    s.serialize_field("favourites", &self.favourites)?;
+    s.serialize_field("tags", &self.tags)?;
+    s.serialize_field("from", &self.from)?;
+    s.serialize_field("fromSite", &self.from_site)?;
+
+    s.end()
+  }
+}

src/Components/PhotoList.tsx

···
 import anime from "animejs";
 
 const PHOTO_HEIGHT = 200;
-const MAX_IMAGE_LOAD = 1;
+const MAX_IMAGE_LOAD = 3;
 
-let months = [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ];
+let months = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ];
 
 class PhotoListProps{
   setCurrentPhotoView!: ( view: any ) => any;

src/Components/PhotoViewer.tsx

···
-import { createEffect, onMount } from "solid-js";
+import { For, Show, createEffect, onMount } from "solid-js";
 import { invoke } from '@tauri-apps/api/tauri';
+import { listen } from '@tauri-apps/api/event';
 import anime from 'animejs';
 
 class PhotoViewerProps{
···
   setConfirmationBox!: ( text: string, cb: () => void ) => void;
 }
 
+class WorldCache{
+  expiresOn!: number;
+  worldData!: {
+    id: string,
+    name: string,
+    author: string,
+    authorId: string,
+    desc: string,
+    img: string,
+    maxUsers: number,
+    visits: number,
+    favourites: number,
+    tags: any,
+    from: string,
+    fromSite: string
+  }
+}
+
+let worldCache: WorldCache[] = JSON.parse(localStorage.getItem('worldCache') || "[]");
+
 let PhotoViewer = ( props: PhotoViewerProps ) => {
   let viewer: HTMLElement;
   let imageViewer: HTMLElement;
   let isOpen = false;
+  let trayOpen = false;
+
+  let trayButton: HTMLElement;
+
+  let photoTray: HTMLElement;
+  let photoControls: HTMLElement;
+  let photoTrayCloseBtn: HTMLElement;
+
+  let worldInfoContainer: HTMLElement;
+
+  let openTray = () => {
+    if(trayOpen)return;
+    trayOpen = true;
+
+    anime({ targets: photoTray, bottom: '0px', duration: 500 });
+
+    anime({
+      targets: photoControls,
+      bottom: '160px',
+      scale: '0.75',
+      opacity: 0,
+      duration: 500,
+      complete: () => {
+        photoControls.style.display = 'none';
+      }
+    });
+
+    photoTrayCloseBtn.style.display = 'flex';
+    anime({
+      targets: photoTrayCloseBtn,
+      bottom: '160px',
+      opacity: 1,
+      scale: 1,
+      duration: 500
+    })
+  }
+
+  let closeTray = () => {
+    if(!trayOpen)return;
+
+    anime({ targets: photoTray, bottom: '-150px', duration: 500 });
+
+    anime({
+      targets: photoTrayCloseBtn,
+      bottom: '10px',
+      scale: '0.75',
+      opacity: 0,
+      duration: 500,
+      complete: () => {
+        photoTrayCloseBtn.style.display = 'none';
+        trayOpen = false;
+      }
+    });
+
+    photoControls.style.display = 'flex';
+    anime({
+      targets: photoControls,
+      bottom: '10px',
+      opacity: 1,
+      scale: 1,
+      duration: 500,
+    })
+  }
 
   onMount(() => {
+    anime.set(photoControls, { translateX: '-50%' });
+    anime.set(photoTrayCloseBtn, { translateX: '-50%', opacity: 0, scale: '0.75', bottom: '10px' });
+
     createEffect(() => {
       let photo = props.currentPhotoView();
 
···
           duration: 150,
           easing: 'easeInOutQuad'
         })
+
+        if(photo.metadata){
+          let meta = JSON.parse(photo.metadata);
+
+          let worldData = worldCache.find(x => x.worldData.id === meta.world.id);
+
+          photoTray.innerHTML = '';
+          photoTray.appendChild(
+            <div class="photo-tray-columns">
+              <div class="photo-tray-column" style={{ width: '20%' }}><br />
+                <div class="tray-heading">People</div>
+
+                <For each={meta.players}>
+                  {( item ) =>
+                    <div>
+                      { item.displayName }
+                      <Show when={item.id}>
+                        <i onClick={() => invoke('open_url', { url: 'https://vrchat.com/home/user/' + item.id })} style={{ "margin-left": '10px', "font-size": '12px', 'color': '#bbb', cursor: 'pointer' }} class="fa-solid fa-arrow-up-right-from-square"></i>
+                      </Show>
+                    </div>
+                  }
+                </For><br />
+              </div>
+              <div class="photo-tray-column"><br />
+                <div class="tray-heading">World</div>
+
+                <div ref={( el ) => worldInfoContainer = el}>Loading World Data...</div>
+              </div>
+            </div> as Node
+          );
+
+          if(!worldData)
+            invoke('find_world_by_id', { worldId: meta.world.id });
+          else if(worldData.expiresOn < Date.now())
+            invoke('find_world_by_id', { worldId: meta.world.id });
+          else
+            loadWorldData(worldData);
+
+          trayButton.style.display = 'flex';
+        } else{
+          trayButton.style.display = 'none';
+        }
       }
 
       if(photo && !isOpen){
···
     })
   })
 
+  let loadWorldData = ( data: WorldCache ) => {
+    let tags: string[] = JSON.parse(data.worldData.tags.split('\\\\').join("").split('\\').join("").slice(1, -1));
+
+    worldInfoContainer.innerHTML = '';
+    worldInfoContainer.appendChild(
+      <div>
+        <div class="world-name">{ data.worldData.name } <i onClick={() => invoke('open_url', { url: 'https://vrchat.com/home/world/' + data.worldData.id })} style={{ "margin-left": '0px', "font-size": '12px', 'color': '#bbb', cursor: 'pointer' }} class="fa-solid fa-arrow-up-right-from-square"></i></div>
+        <div style={{ width: '75%', margin: 'auto' }}>{ data.worldData.desc }</div>
+
+        <br />
+        <div class="world-tags">
+          <For each={tags}>
+            {( tag ) =>
+              <div>{ tag.replace("author_tag_", "").replace("system_", "") }</div>
+            }
+          </For>
+        </div>
+      </div> as Node
+    )
+  }
+
+  listen('world_data', ( event: any ) => {
+    let worldData = {
+      expiresOn: Date.now() + 1.2096E+09,
+      worldData: {
+        id: event.payload.id,
+        name: event.payload.name.split('\\').join('').slice(1, -1),
+        author: event.payload.author.split('\\').join('').slice(1, -1),
+        authorId: event.payload.authorId.split('\\').join('').slice(1, -1),
+        desc: event.payload.desc.split('\\').join('').slice(1, -1),
+        img: event.payload.img.split('\\').join('').slice(1, -1),
+        maxUsers: event.payload.maxUsers,
+        visits: event.payload.visits,
+        favourites: event.payload.favourites,
+        tags: event.payload.tags,
+        from: event.payload.from,
+        fromSite: event.payload.fromSite
+      }
+    }
+
+    loadWorldData(worldData);
+
+    worldCache.push(worldData);
+    localStorage.setItem("worldCache", JSON.stringify(worldCache));
+  })
+
   return (
     <div class="photo-viewer" ref={( el ) => viewer = el}>
       <div class="viewer-close viewer-button" onClick={() => props.setCurrentPhotoView(null)}><i class="fa-solid fa-x"></i></div>
···
       <div class="prev-button" onClick={() => props.setPhotoNavChoice('prev')}><i class="fa-solid fa-arrow-left"></i></div>
       <div class="next-button" onClick={() => props.setPhotoNavChoice('next')}><i class="fa-solid fa-arrow-right"></i></div>
 
-      <div class="control-buttons">
+      <div class="photo-tray" ref={( el ) => photoTray = el}></div>
+
+      <div class="photo-tray-close"
+        onClick={() => closeTray()}
+        ref={( el ) => photoTrayCloseBtn = el}
+      ><i class="fa-solid fa-angle-down"></i></div>
+
+      <div class="control-buttons" ref={( el ) => photoControls = el}>
         <div class="viewer-button"
           onMouseOver={( el ) => anime({ targets: el.currentTarget, width: '40px', height: '40px', 'margin-left': '15px', 'margin-right': '15px', 'margin-top': '-10px' })}
           onMouseLeave={( el ) => anime({ targets: el.currentTarget, width: '30px', height: '30px', 'margin-left': '20px', 'margin-right': '20px', 'margin-top': '0px' })}
···
         >
           <i class="fa-solid fa-copy"></i>
         </div>
-        <div class="viewer-button"
-          onMouseOver={( el ) => anime({ targets: el.currentTarget, width: '40px', height: '40px', 'margin-left': '15px', 'margin-right': '15px', 'margin-top': '-10px' })}
-          onMouseLeave={( el ) => anime({ targets: el.currentTarget, width: '30px', height: '30px', 'margin-left': '20px', 'margin-right': '20px', 'margin-top': '0px' })}
-        >
-          <i class="fa-solid fa-info"></i>
-        </div>
-        <div class="viewer-button"
-          onMouseOver={( el ) => anime({ targets: el.currentTarget, width: '40px', height: '40px', 'margin-left': '15px', 'margin-right': '15px', 'margin-top': '-10px' })}
-          onMouseLeave={( el ) => anime({ targets: el.currentTarget, width: '30px', height: '30px', 'margin-left': '20px', 'margin-right': '20px', 'margin-top': '0px' })}
-        >
-          <i class="fa-solid fa-users"></i>
-        </div>
-        <div class="viewer-button"
-          onMouseOver={( el ) => anime({ targets: el.currentTarget, width: '40px', height: '40px', 'margin-left': '15px', 'margin-right': '15px', 'margin-top': '-10px' })}
-          onMouseLeave={( el ) => anime({ targets: el.currentTarget, width: '30px', height: '30px', 'margin-left': '20px', 'margin-right': '20px', 'margin-top': '0px' })}
+        <div class="viewer-button" style={{ width: '50px' }}
+          onMouseOver={( el ) => anime({ targets: el.currentTarget, width: '70px', height: '30px', 'margin-left': '10px', 'margin-right': '10px' })}
+          onMouseLeave={( el ) => anime({ targets: el.currentTarget, width: '50px', height: '30px', 'margin-left': '20px', 'margin-right': '20px' })}
+          ref={( el ) => trayButton = el}
+          onClick={() => openTray()}
         >
-          <i class="fa-solid fa-file"></i>
+          <i class="fa-solid fa-angle-up"></i>
         </div>
         <div class="viewer-button"
           onMouseOver={( el ) => anime({ targets: el.currentTarget, width: '40px', height: '40px', 'margin-left': '15px', 'margin-right': '15px', 'margin-top': '-10px' })}

src/styles.css

···
   display: flex;
   justify-content: center;
   align-items: center;
-  border-radius: 50%;
+  border-radius: 50px;
   font-size: 12px;
   background: #8885;
   backdrop-filter: blur(10px);
···
   z-index: 12;
   opacity: 0;
   pointer-events: none;
+}
+
+.photo-tray{
+  position: fixed;
+  bottom: -150px;
+  left: 0;
+  width: 100%;
+  height: 150px;
+  background: #7778;
+  backdrop-filter: blur(10px);
+  box-shadow: #0008 0 0 10px;
+  padding-bottom: 150px;
+  margin-bottom: -150px;
+}
+
+.photo-tray-close{
+  position: fixed;
+  bottom: 160px;
+  left: 50%;
+  transform: translate(-50%);
+  color: white;
+  background: #8885;
+  backdrop-filter: blur(10px);
+  box-shadow: #0008 0 0 10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 30px;
+  width: 50px;
+  border-radius: 50px;
+  cursor: pointer;
+  font-size: 12px;
+  user-select: none;
+  transition: 0.25s width;
+}
+
+.photo-tray-close:hover{
+  width: 70px;
+}
+
+.photo-tray-columns{
+  width: 100%;
+  height: 100%;
+  display: flex;
+  color: white;
+  text-align: center;
+}
+
+.photo-tray-column{
+  height: 100%;
+  width: 100%;
+  scrollbar-width: thin;
+  overflow-y: auto;
+  overflow-x: hidden;
+  mask-image: linear-gradient(to bottom, #0000 0%, #000 10%, #000 90%, #0000 100%);
+}
+
+.tray-heading{
+  font-weight: bold;
+  font-size: 20px;
+}
+
+.world-tags{
+  display: flex;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+}
+
+.world-tags div{
+  padding: 0 10px;
+  color: #bbb;
+  transition: 0.25s;
+}
+
+.world-tags div:hover{
+  color: #ddd;
+}
+
+.world-name{
+  font-size: 17px;
 }