PFP caching

src/seqta/utils/CloudAuth.ts

@@ -1,4 +1,5 @@
 import browser from "webextension-polyfill";
+import { clearCloudPfpCache } from "@/seqta/utils/cloudPfpCache";
 import { settingsState } from "@/seqta/utils/listeners/SettingsState";
 
 const REDIRECT_URI = "https://accounts.betterseqta.org/auth/bsplus/callback";
@@ -16,6 +17,7 @@ export type CloudUser = {
   username?: string;
   displayName?: string;
   pfpUrl?: string;
+  pfpHash?: string | null;
   admin_level?: number;
 };
 
@@ -201,6 +203,8 @@ class CloudAuthService {
   }
 
   public async logout(): Promise<void> {
+    const userId = this._state.user?.id;
+    if (userId) await clearCloudPfpCache(userId);
     await browser.storage.local.remove([
       STORAGE_KEYS.accessToken,
       STORAGE_KEYS.refreshToken,

src/seqta/utils/cloudPfpCache.ts

@@ -0,0 +1,112 @@
+import localforage from "localforage";
+import { cloudAuth } from "@/seqta/utils/CloudAuth";
+
+const ACCOUNTS_BASE = "https://accounts.betterseqta.org";
+
+const store = localforage.createInstance({
+  name: "cloud-pfp-store",
+  storeName: "cloudPfp",
+});
+
+function hashKey(userId: string) {
+  return `hash:${userId}`;
+}
+
+function blobKey(userId: string) {
+  return `blob:${userId}`;
+}
+
+export function isAccountsHostedPfpUrl(url: string): boolean {
+  if (!url.includes("/api/user/pfp/")) return false;
+  if (url.includes("/hist/")) return false;
+  return /\/api\/user\/pfp\/[^/?#]+/.test(url.split("?")[0]!);
+}
+
+export function pfpUrlWithHash(url: string, hash: string | null | undefined): string {
+  if (!url || !hash || !isAccountsHostedPfpUrl(url)) return url;
+  const base = url.split("?")[0]!;
+  return `${base}?v=${hash}`;
+}
+
+async function fetchServerHash(userId: string): Promise<string | null> {
+  const res = await fetch(`${ACCOUNTS_BASE}/api/user/pfp/${userId}/meta`);
+  if (!res.ok) return null;
+  const data = (await res.json()) as { pfpHash?: string | null };
+  return data.pfpHash ?? null;
+}
+
+async function clearLocal(userId: string): Promise<void> {
+  await store.removeItem(hashKey(userId));
+  await store.removeItem(blobKey(userId));
+}
+
+export async function clearCloudPfpCache(userId?: string): Promise<void> {
+  const id = userId ?? cloudAuth.state.user?.id;
+  if (!id) return;
+  await clearLocal(id);
+}
+
+export type ResolveCloudPfpResult = {
+  src: string;
+  fromCache: boolean;
+};
+
+/**
+ * Returns an object URL or direct URL for the cloud profile picture.
+ * Order: session hash match → local blob; else meta → download → store blob then hash.
+ */
+export async function resolveCloudPfp(
+  userId: string,
+  pfpUrl: string,
+): Promise<ResolveCloudPfpResult | null> {
+  if (!isAccountsHostedPfpUrl(pfpUrl)) {
+    return { src: pfpUrl, fromCache: false };
+  }
+
+  const sessionHash = cloudAuth.state.user?.pfpHash ?? null;
+  const localHash = await store.getItem<string>(hashKey(userId));
+  const localBlob = await store.getItem<Blob>(blobKey(userId));
+
+  let serverHash = sessionHash;
+
+  const localMatches =
+    !!serverHash && serverHash === localHash && localBlob instanceof Blob;
+  if (localMatches) {
+    return { src: URL.createObjectURL(localBlob), fromCache: true };
+  }
+
+  if (!serverHash || serverHash !== localHash) {
+    serverHash = await fetchServerHash(userId);
+  }
+
+  if (!serverHash) {
+    await clearLocal(userId);
+    return null;
+  }
+
+  if (serverHash === localHash && localBlob instanceof Blob) {
+    return { src: URL.createObjectURL(localBlob), fromCache: true };
+  }
+
+  await clearLocal(userId);
+
+  const imageUrl = pfpUrlWithHash(pfpUrl, serverHash);
+  const headers: HeadersInit = {};
+  if (localHash) {
+    headers["If-None-Match"] = `"${localHash}"`;
+  }
+
+  const res = await fetch(imageUrl, { headers });
+  if (res.status === 304 && localBlob instanceof Blob) {
+    await store.setItem(hashKey(userId), serverHash);
+    return { src: URL.createObjectURL(localBlob), fromCache: true };
+  }
+
+  if (!res.ok) return null;
+
+  const blob = await res.blob();
+  await store.setItem(blobKey(userId), blob);
+  await store.setItem(hashKey(userId), serverHash);
+
+  return { src: URL.createObjectURL(blob), fromCache: false };
+}

src/seqta/utils/cloudPfpSync.ts

@@ -1,6 +1,7 @@
 import browser from "webextension-polyfill";
 import localforage from "localforage";
 import { cloudAuth } from "@/seqta/utils/CloudAuth";
+import { clearCloudPfpCache, pfpUrlWithHash } from "@/seqta/utils/cloudPfpCache";
 
 const ACCOUNTS_BASE = "https://accounts.betterseqta.org";
 const PLUGIN_SETTINGS_KEY = "plugin.profile-picture.settings";
@@ -10,9 +11,32 @@ const profileStore = localforage.createInstance({
   storeName: "profilePicture",
 });
 
-function cacheBustPfpUrl(url: string): string {
-  const base = url.split("?")[0]!;
-  return `${base}?v=${Date.now()}`;
+/** Downscale before upload to reduce ingress (server still normalizes). */
+async function downscaleForUpload(blob: Blob, maxEdge = 512): Promise<Blob> {
+  if (!blob.type.startsWith("image/")) return blob;
+
+  const bitmap = await createImageBitmap(blob);
+  const maxSide = Math.max(bitmap.width, bitmap.height);
+  if (maxSide <= maxEdge) {
+    bitmap.close();
+    return blob;
+  }
+
+  const scale = maxEdge / maxSide;
+  const w = Math.max(1, Math.round(bitmap.width * scale));
+  const h = Math.max(1, Math.round(bitmap.height * scale));
+
+  const canvas = new OffscreenCanvas(w, h);
+  const ctx = canvas.getContext("2d");
+  if (!ctx) {
+    bitmap.close();
+    return blob;
+  }
+  ctx.drawImage(bitmap, 0, 0, w, h);
+  bitmap.close();
+
+  const out = await canvas.convertToBlob({ type: "image/jpeg", quality: 0.85 });
+  return out;
 }
 
 export async function isUseCloudPfpEnabled(): Promise<boolean> {
@@ -41,6 +65,9 @@ export async function syncLocalProfilePictureToCloud(): Promise<{
   const token = await cloudAuth.getStoredToken();
   if (!token) return { success: false, error: "Not logged in" };
 
+  const user = cloudAuth.state.user;
+  const userId = user?.id;
+
   const blob = await profileStore.getItem<Blob>("profile-picture");
 
   try {
@@ -57,10 +84,10 @@ export async function syncLocalProfilePictureToCloud(): Promise<{
       if (!res.ok) {
         return { success: false, error: (data.error as string) ?? `Clear failed (${res.status})` };
       }
-      const user = cloudAuth.state.user;
       if (user) {
-        await cloudAuth.setUser({ ...user, pfpUrl: undefined });
+        await cloudAuth.setUser({ ...user, pfpUrl: undefined, pfpHash: null });
       }
+      if (userId) await clearCloudPfpCache(userId);
       return { success: true };
     }
 
@@ -71,8 +98,9 @@ export async function syncLocalProfilePictureToCloud(): Promise<{
       return { success: false, error: "File too large (max 5MB)" };
     }
 
+    const uploadBlob = await downscaleForUpload(blob);
     const formData = new FormData();
-    formData.append("file", blob, "profile-picture");
+    formData.append("file", uploadBlob, "profile-picture.jpg");
 
     const res = await fetch(`${ACCOUNTS_BASE}/api/user/pfp`, {
       method: "POST",
@@ -85,10 +113,15 @@ export async function syncLocalProfilePictureToCloud(): Promise<{
     }
 
     const pfpUrl = data.pfpUrl as string | undefined;
-    const user = cloudAuth.state.user;
+    const pfpHash = (data.pfpHash as string | null | undefined) ?? null;
     if (user && pfpUrl) {
-      await cloudAuth.setUser({ ...user, pfpUrl: cacheBustPfpUrl(pfpUrl) });
+      await cloudAuth.setUser({
+        ...user,
+        pfpUrl: pfpUrlWithHash(pfpUrl, pfpHash),
+        pfpHash,
+      });
     }
+    if (userId) await clearCloudPfpCache(userId);
     return { success: true };
   } catch (err) {
     return {