refactor: snapshot fetching

Author: Lunari8546

components/atelier/render/Snapshot.vue

@@ -27,10 +27,10 @@ const props = defineProps<{
   slides?: string;
 }>();
 
+// TODO: Replace with useAsyncData.
 const url = asyncComputed(async () => {
-  return await useSnapshot().fetch(
-    props.deck,
-    props.slides ?? (await fetchSlides(props.deck, 0)).id
-  );
+  const slideId = props.slides ?? (await fetchSlides(props.deck, 0)).id;
+
+  return await useSnapshot().fetch(props.deck, slideId);
 });
 </script>

composables/useSnapshot.ts

@@ -1,20 +1,13 @@
 import html2canvas from "html2canvas";
 
 export function useSnapshot() {
+  const config = useRuntimeConfig();
   const client = useSupabaseClient<Database>();
 
-  const { slides, currentSlides, trees } = storeToRefs(useDeckStore());
-
-  const bucket = "snapshots";
+  const { currentSlides, trees } = storeToRefs(useDeckStore());
 
   const capture = async () => {
-    if (!trees.value[currentSlides.value.index].children.length) return;
-    if (
-      localStorage.getItem(
-        `snapshot-${currentSlides.value.deck}-${currentSlides.value.id}.png`
-      )
-    )
-      return;
+    if (isEmptyTree(trees.value[currentSlides.value.index])) return;
 
     const blob = await html2canvas(document.querySelector(".render")!, {
       width: 192,
@@ -39,7 +32,7 @@ export function useSnapshot() {
     );
 
     const { error } = await client.storage
-      .from(bucket)
+      .from("snapshots")
       .upload(
         `${currentSlides.value.deck}/${currentSlides.value.id}.png`,
         blob,
@@ -54,43 +47,39 @@ export function useSnapshot() {
 
   const fetch = async (
     deck: string = currentSlides.value.deck,
-    slidesId: string = currentSlides.value.id
+    slides: string = currentSlides.value.id
   ) => {
-    if (!deck || !slidesId) return;
-
-    const key = `snapshot-${deck}-${slidesId}`;
-    const expires = 60 * 60; // 1 hour.
-
-    if (localStorage.getItem(key)) {
-      const item = JSON.parse(localStorage.getItem(key)!);
+    if (currentSlides.value?.id === slides) {
+      if (isEmptyTree(trees.value[currentSlides.value.index])) {
+        return;
+      }
+    }
 
-      if (item.expires > Date.now()) return item.url;
+    const { data, error } = await client.storage.from("snapshots").list(deck, {
+      search: `${slides}.png`,
+    });
 
-      localStorage.removeItem(key);
-    }
+    if (!data?.length || error) return;
 
-    if (
-      trees.value[0] === EMPTY_TREE &&
-      !trees.value[slides.value.findIndex((slide) => slide.id === slidesId)]
-        .children.length
-    )
-      return;
+    const url = new URL(
+      `${config.public.supabaseUrl}/storage/v1/object/authenticated/snapshots/${deck}/${slides}.png`
+    );
 
-    const { data, error } = await client.storage
-      .from(bucket)
-      .createSignedUrl(`${deck}/${slidesId}.png`, expires);
+    url.searchParams.append("timestamp", Date.now().toString());
 
-    if (error) throw error;
+    const {
+      data: { session },
+    } = await client.auth.getSession();
 
-    localStorage.setItem(
-      key,
-      JSON.stringify({
-        url: data.signedUrl,
-        expires: Date.now() + expires * 1000,
-      })
-    );
+    const response = await globalThis.fetch(url, {
+      method: "GET",
+      headers: {
+        authorization: `Bearer ${session?.access_token}`,
+        accept: "image/png",
+      },
+    });
 
-    return data.signedUrl;
+    return url.toString();
   };
 
   return {

nuxt.config.ts

@@ -33,4 +33,10 @@ export default defineNuxtConfig({
     glsl: true,
   },
   compatibilityDate: "2024-08-15",
+  runtimeConfig: {
+    public: {
+      supabaseUrl: process.env.SUPABASE_URL,
+      supabaseKey: process.env.SUPABASE_KEY,
+    },
+  },
 });

pages/atelier/[id].vue

@@ -87,8 +87,6 @@ onMounted(() => {
       () => refreshSlides()
     )
     .subscribe();
-
-  useSnapshot().capture();
 });
 
 onUnmounted(() => {

stores/useDeckStore.ts

@@ -428,7 +428,8 @@ export const useDeckStore = defineStore("deck", () => {
       if (error) throw error;
     }
 
-    useSnapshot().capture();
+    await useSnapshot().capture();
+    // await useSnapshot().fetch(currentSlides.value.deck, currentSlides.value.id);
 
     pendingChanges.value = {
       nodes: [],

types/tree.ts

@@ -3,6 +3,12 @@ export interface Tree extends NodeModel {
   children: Tree[];
 }
 
+export const isEmptyTree = (tree: Tree) => {
+  return !Object.values(tree).some(
+    (value) => value !== "" && value !== "group" && !Array.isArray(value)
+  );
+};
+
 export const EMPTY_TREE: Tree = {
   id: "",
   slides: "",