photo syncing is "semi-stable"

src-tauri/src/main.rs

···
 
 // On requested sync the photos to the cloud
 #[tauri::command]
-fn sync_photos( token: String ){
+fn sync_photos( token: String, window: tauri::Window ){
   thread::spawn(move || {
-    photosync::sync_photos(token, get_photo_path());
+    photosync::sync_photos(token, get_photo_path(), window);
   });
 }
 

src-tauri/src/photosync.rs

···
-use std::{ path, /*fs*/ };
-// use regex::Regex;
+use std::{ fs, path, time::Duration };
+use regex::Regex;
+use reqwest::{ self, Error };
+use serde::Serialize;
+use serde_json::Value;
+use tauri::Manager;
 
-pub fn sync_photos( _token: String, _path: path::PathBuf ){
-  // match fs::metadata(&path){
-  //   Ok(_) => {}
-  //   Err(_) => {
-  //     fs::create_dir(&path).unwrap();
-  //   }
-  // };
+#[derive(Clone, Serialize)]
+struct PhotoUploadMeta{
+  photos_uploading: usize,
+  photos_total: usize
+}
 
-  // let mut photos: Vec<path::PathBuf> = Vec::new();
-  // let mut size: usize = 0;
+pub fn sync_photos( token: String, path: path::PathBuf, window: tauri::Window ){
+  match fs::metadata(&path){
+    Ok(_) => {}
+    Err(_) => {
+      fs::create_dir(&path).unwrap();
+    }
+  };
 
-  // for folder in fs::read_dir(&path).unwrap() {
-  //   let f = folder.unwrap();
+  let mut photos: Vec<String> = Vec::new();
 
-  //   if f.metadata().unwrap().is_dir() {
-  //     for photo in fs::read_dir(f.path()).unwrap() {
-  //       let p = photo.unwrap();
+  for folder in fs::read_dir(&path).unwrap() {
+    let f = folder.unwrap();
 
-  //       dbg!(p.file_name());
-  //     }
-  //   }
-  // }
+    if f.metadata().unwrap().is_dir() {
+      for photo in fs::read_dir(f.path()).unwrap() {
+        let p = photo.unwrap();
+
+        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(p.file_name().to_str().unwrap()) ||
+          re2.is_match(p.file_name().to_str().unwrap())
+        {
+          photos.push(p.file_name().into_string().unwrap());
+        }
+      }
+    }
+  }
+
+  let body: Value = reqwest::blocking::get(format!("https://photos.phazed.xyz/api/v1/photos/exists?token={}", &token)).unwrap()
+    .json().unwrap();
+
+  let mut photos_to_upload: Vec<String> = Vec::new();
+  let uploaded_photos = body["files"].as_array().unwrap();
+
+  let photos_len = photos.len();
+
+  for photo in photos{
+    let mut found_photo = false;
+
+    for uploaded_photo in uploaded_photos{
+      if photo == uploaded_photo.as_str().unwrap(){
+        found_photo = true;
+        break;
+      }
+    }
+
+    if !found_photo {
+      photos_to_upload.push(photo);
+    }
+  }
+
+  window.emit_all("photos-upload-meta", PhotoUploadMeta { photos_uploading: photos_to_upload.len(), photos_total: photos_len }).unwrap();
+  let mut photos_left = photos_to_upload.len();
+
+  let client = reqwest::blocking::Client::new();
+
+  loop {
+    match photos_to_upload.pop(){
+      Some(photo) => {
+        let folder_name = photo.clone().replace("VRChat_", "");
+        let mut folder_name = folder_name.split("-");
+        let folder_name = format!("{}-{}", folder_name.nth(0).unwrap(), folder_name.nth(0).unwrap());
+
+        let full_path = format!("{}\\{}\\{}", path.to_str().unwrap(), folder_name, photo);
+        let file = fs::File::open(full_path).unwrap();
+
+        let res: Result<Value, Error> = client.put(format!("https://photos.phazed.xyz/api/v1/photos?token={}", &token))
+          .header("Content-Type", "image/png")
+          .header("filename", photo)
+          .body(file)
+          .timeout(Duration::from_secs(120))
+          .send().unwrap().json();
+
+        match res {
+          Ok(res) => {
+            if !res["ok"].as_bool().unwrap(){
+              println!("Failed to upload: {}", res["error"].as_str().unwrap());
+              window.emit_all("sync-failed", res["error"].as_str().unwrap()).unwrap();
+              break;
+            }
+          }
+          Err(err) => {
+            dbg!(err);
+          }
+        }
+
+        photos_left -= 1;
+        window.emit_all("photos-upload-meta", PhotoUploadMeta { photos_uploading: photos_left, photos_total: photos_len }).unwrap();
+      }
+      None => {
+        break;
+      }
+    }
+  }
+
+  window.emit_all("sync-finished", "h").unwrap();
+  println!("Finished Uploading.");
 }

src/Components/App.tsx

···
 
   let [ requestPhotoReload, setRequestPhotoReload ] = createSignal(false);
 
+  let isPhotosSyncing = false;
+
   let setConfirmationBox = ( text: string, cb: () => void ) => {
     setConfirmationBoxText(text);
     confirmationBoxCallback = cb;
···
         setLoggedIn({ loggedIn: true, username: data.data.user.username, avatar: data.data.user.avatar, id: data.data.user._id, serverVersion: data.data.user.serverVersion });
         setStorageInfo({ storage: data.data.user.storage, used: data.data.user.used, sync: data.data.user.settings.enableSync });
 
-        invoke('sync_photos', { token: localStorage.getItem('token') });
+        if(!isPhotosSyncing){
+          isPhotosSyncing = true;
+          invoke('sync_photos', { token: localStorage.getItem('token') });
+        }
       })
       .catch(e => {
         console.error(e);
···
         setLoggedIn({ loggedIn: true, username: data.data.user.username, avatar: data.data.user.avatar, id: data.data.user._id, serverVersion: data.data.user.serverVersion });
         setStorageInfo({ storage: data.data.user.storage, used: data.data.user.used, sync: data.data.user.settings.enableSync });
 
-        invoke('sync_photos', { token: localStorage.getItem('token') });
+        if(!isPhotosSyncing){
+          isPhotosSyncing = true;
+          invoke('sync_photos', { token: localStorage.getItem('token') });
+        }
       })
       .catch(e => {
         setLoadingType('none');
···
     console.warn('Authetication Denied');
   })
 
+  listen('sync-finished', () => {
+    isPhotosSyncing = false;
+  })
+
   onMount(() => {
     anime.set('.settings',
     {
···
 
   return (
     <div class="container">
-      <NavBar setLoadingType={setLoadingType} loggedIn={loggedIn} />
+      <NavBar setLoadingType={setLoadingType} loggedIn={loggedIn} setStorageInfo={setStorageInfo} />
       <PhotoList
+        isPhotosSyncing={isPhotosSyncing}
         setCurrentPhotoView={setCurrentPhotoView}
         currentPhotoView={currentPhotoView}
         photoNavChoice={photoNavChoice}
···
         photoSize={photoSize}
         setRequestPhotoReload={setRequestPhotoReload}
         loggedIn={loggedIn}
-        storageInfo={storageInfo} />
+        storageInfo={storageInfo}
+        setStorageInfo={setStorageInfo}
+        setConfirmationBox={setConfirmationBox} />
 
       <div class="copy-notif">Image Copied!</div>
 

src/Components/NavBar.tsx

···
 import { invoke } from '@tauri-apps/api/tauri';
+import { listen } from '@tauri-apps/api/event';
+import { fetch, ResponseType } from "@tauri-apps/api/http"
 import anime from 'animejs';
-import { Show, onMount } from 'solid-js';
+import { Show, createSignal, onMount } from 'solid-js';
 
 class NavBarProps{
   setLoadingType!: ( type: string ) => string;
   loggedIn!: () => { loggedIn: boolean, username: string, avatar: string, id: string, serverVersion: string };
+  setStorageInfo!: ( info: { storage: number, used: number, sync: boolean } ) => { storage: number, used: number, sync: boolean };
 }
 
 let NavBar = ( props: NavBarProps ) => {
···
   let inAnimation = false;
   let dropdown: HTMLElement;
 
+  let [ isSyncing, setIsSyncing ] = createSignal(false);
+  let [ syncPhotoTotal, setSyncPhotoTotal ] = createSignal(0);
+  let [ syncPhotoUploading, setSyncPhotoUploading ] = createSignal(0);
+  let [ syncError, setSyncError ] = createSignal("");
+
   onMount(() => {
     anime.set(dropdown, { opacity: 0,  translateX: -10 });
     dropdown.style.display = 'none';
   })
 
+  listen('photos-upload-meta', ( e: any ) => {
+    setIsSyncing(true);
+    setSyncPhotoTotal(e.payload.photos_total);
+    setSyncPhotoUploading(e.payload.photos_total - e.payload.photos_uploading);
+
+    console.log(e.payload)
+  })
+
   let setDropdownVisibility = ( visible: boolean ) => {
     if(inAnimation)return;
 
···
     }
   }
 
+
+  listen('sync-failed', ( e: any ) => {
+    setSyncError(e.payload);
+  })
+
   window.CloseAllPopups.push(() => setDropdownVisibility(false));
 
   return (
···
               })
           }}>Photos</div>
         </div>
+        <div class="nav-tab" style={{ width: '200px', "text-align": 'center' }}>
+          <Show when={isSyncing()}>
+            <Show when={ syncError() == "" } fallback={ "Error: " + syncError() }>
+              <div style={{ width: '100%', "text-align": 'center', 'font-size': '14px' }}>
+                Uploading: { syncPhotoUploading() } / { syncPhotoTotal() }<br />
+                <div style={{ width: '80%', height: '2px', margin: 'auto', "margin-top": '5px', background: '#111' }}>
+                  <div style={{ height: '2px', width: (syncPhotoUploading() / syncPhotoTotal()) * 100 + '%', background: '#00ccff' }}></div>
+                </div>
+              </div>
+            </Show>
+          </Show>
+        </div>
         <div class="account" onClick={() => setDropdownVisibility(!dropdownVisible)}>
           <Show when={props.loggedIn().loggedIn}>
             <div class="user-pfp" style={{ background: `url('https://cdn.phazed.xyz/id/avatars/${props.loggedIn().id}/${props.loggedIn().avatar}.png')` }}></div>
···
             easing: 'easeInOutQuad',
             duration: 250
           })
+
+          fetch<any>('https://photos.phazed.xyz/api/v1/account', {
+            method: 'GET',
+            headers: { auth: localStorage.getItem('token')! },
+            responseType: ResponseType.JSON
+          })
+            .then(data => {
+              if(!data.data.ok){
+                console.error(data);
+                return;
+              }
+
+              console.log(data.data);
+              props.setStorageInfo({ storage: data.data.user.storage, used: data.data.user.used, sync: data.data.user.settings.enableSync });
+            })
+            .catch(e => {
+              console.error(e);
+            })
 
           setDropdownVisibility(false);
         }}>Settings</div>

src/Components/PhotoList.tsx

···
   requestPhotoReload!: () => boolean;
   setRequestPhotoReload!: ( val: boolean ) => boolean;
   loggedIn!: () => { loggedIn: boolean, username: string, avatar: string, id: string, serverVersion: string };
+  isPhotosSyncing!: boolean;
 }
 
 let PhotoList = ( props: PhotoListProps ) => {
···
   listen('photo_create', ( event: any ) => {
     let photo = new Photo(event.payload);
     photos.splice(0, 0, photo);
+
+    if(!props.isPhotosSyncing){
+      props.isPhotosSyncing = true;
+      invoke('sync_photos', { token: localStorage.getItem('token') });
+    }
   })
 
   listen('photo_remove', ( event: any ) => {

src/Components/PhotoViewer.tsx

···
 
         if(photo.metadata){
           let meta = JSON.parse(photo.metadata);
-
           let worldData = worldCache.find(x => x.worldData.id === meta.world.id);
 
           photoTray.innerHTML = '';
···
 
           if(!worldData)
             invoke('find_world_by_id', { worldId: meta.world.id });
-          else if(worldData.expiresOn < Date.now())
+          else if(worldData.expiresOn < Date.now()){
+            worldCache = worldCache.filter(x => x !== worldData)
             invoke('find_world_by_id', { worldId: meta.world.id });
-          else
+          } else
             loadWorldData(worldData);
 
           trayButton.style.display = 'flex';
···
   })
 
   let loadWorldData = ( data: WorldCache ) => {
+    let meta = props.currentPhotoView().metadata;
+    if(!meta)return;
+
     worldInfoContainer.innerHTML = '';
     worldInfoContainer.appendChild(
       <div>
-        <Show when={ data.worldData.found == false && props.currentPhotoView().metadata }>
+        <Show when={ data.worldData.found == false && meta }>
           <div>
-            <div class="world-name">{ JSON.parse(props.currentPhotoView().metadata).world.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 class="world-name">{ JSON.parse(meta).world.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' }}>Could not fetch world information... Is the world private?</div>
           </div>
         </Show>
···
                 <div>{ tag.replace("author_tag_", "").replace("system_", "") }</div>
               }
             </For>
-          </div>
+          </div><br />
         </Show>
       </div> as Node
     )

src/Components/SettingsMenu.tsx

···
 import { relaunch } from '@tauri-apps/api/process';
 import { invoke } from '@tauri-apps/api/tauri';
 import anime from "animejs";
+import { fetch, ResponseType } from "@tauri-apps/api/http"
 
 class SettingsMenuProps{
   photoCount!: () => number;
···
   setRequestPhotoReload!: ( val: boolean ) => boolean;
   loggedIn!: () => { loggedIn: boolean, username: string, avatar: string, id: string, serverVersion: string };
   storageInfo!: () => { storage: number, used: number, sync: boolean };
+  setStorageInfo!: ( info: { storage: number, used: number, sync: boolean } ) => { storage: number, used: number, sync: boolean };
+  setConfirmationBox!: ( text: string, cb: () => void ) => void;
 }
 
 let SettingsMenu = ( props: SettingsMenuProps ) => {
···
     })
   })
 
+  let refreshAccount = () => {
+    fetch<any>('https://photos.phazed.xyz/api/v1/account', {
+      method: 'GET',
+      headers: { auth: localStorage.getItem('token')! },
+      responseType: ResponseType.JSON
+    })
+      .then(data => {
+        if(!data.data.ok){
+          console.error(data);
+          return;
+        }
+
+        console.log(data.data);
+        props.setStorageInfo({ storage: data.data.user.storage, used: data.data.user.used, sync: data.data.user.settings.enableSync });
+      })
+      .catch(e => {
+        console.error(e);
+      })
+  }
+
   return (
     <div class="settings">
       <div class="settings-container" ref={( el ) => settingsContainer = el}>
···
             <div class="account-profile">
               <div class="account-pfp" style={{ background: `url('https://cdn.phazed.xyz/id/avatars/${props.loggedIn().id}/${props.loggedIn().avatar}.png')` }}></div>
               <div class="account-desc">
+                <div class="reload-photos" onClick={() => refreshAccount()}><i class="fa-solid fa-arrows-rotate"></i></div>
                 <h2>{ props.loggedIn().username }</h2>
 
                 <Show when={props.storageInfo().sync}>
···
             </div>
 
             <div class="account-notice">To enable cloud storage or get more storage please contact "_phaz" on discord</div>
+
+            <div class="account-notice" style={{ display: 'flex' }}>
+              <div class="button-danger" onClick={() => props.setConfirmationBox("You are about to delete all your photos from the cloud, and disable syncing. This will NOT delete any local files.", () => {})}>Delete All Photos.</div> <div>This deletes all photos stored in the cloud and disables syncing.</div>
+            </div>
           </Show>
         </div>
       </div>

src/styles.css

···
 }
 
 .navbar .tabs{
-  width: calc(100% - 100px);
+  width: calc(100% - 200px);
   height: 100%;
   display: flex;
 }