chore: Update getBackgroundImages to use getObjectUrl for generating image URLs

src/lib/db/getBackgroundImages.ts

@@ -1,20 +1,29 @@
 import { eq } from "drizzle-orm";
 import { db } from "./db.server";
 import { imagesTable } from "./schema";
+import { getObjectUrl, s3Client } from "$lib/server/s3";
+import { ListObjectsV2Command } from "@aws-sdk/client-s3";
 
-export const getBackgroundImages = async (numberOfResults: number | null) => {
-  const images = await db
-    .select({ url: imagesTable.url })
-    .from(imagesTable)
-    .where(eq(imagesTable.type, "background"))
-    .execute();
+export const getBackgroundImages = async () => {
+  //   const images = await db
+  //     .select({ url: imagesTable.url })
+  //     .from(imagesTable)
+  //     .where(eq(imagesTable.type, "background"))
+  //     .execute();
 
-  if (numberOfResults) {
-    let randomIndex = Math.floor(Math.random() * images.length);
-    return images.slice(randomIndex, randomIndex + numberOfResults) as {
-      url: string;
-    }[];
-  }
+  // list all objects in the bucket using listObjectsV2
+  const data = await s3Client.send(
+    new ListObjectsV2Command({ Bucket: "images" })
+  );
+  const randomImages = data.Contents?.map((item) => item.Key) ?? [];
+  const randomIndex = Math.floor(Math.random() * randomImages.length);
 
-  return images as { url: string }[];
+  const randomImage = randomImages[randomIndex];
+
+  console.log(randomImage);
+
+  const url = getObjectUrl("images", randomImage as string);
+  console.log(url);
+
+  return url as string;
 };

src/lib/server/s3.ts

@@ -85,32 +85,8 @@ export const uploadObject = async (
   try {
     await s3Client.send(putObjectCommand);
 
-    // Determine the provider from the endpoint
-    let endpoint = env.AWS_S3_ENDPOINT as string;
-    if (env.MINIO_CLIENT_OVERRIDE) {
-      endpoint = env.MINIO_CLIENT_OVERRIDE;
-    }
     let objectUrl: string;
-
-    if (endpoint.includes("amazonaws.com")) {
-      // Amazon S3
-      objectUrl = `https://${bucketName}.s3.${env.AWS_REGION}.amazonaws.com/${fileName}`;
-    } else if (endpoint.includes("storage.googleapis.com")) {
-      // Google Cloud Storage
-      objectUrl = `https://storage.googleapis.com/${bucketName}/${fileName}`;
-    } else if (endpoint.includes("digitaloceanspaces.com")) {
-      // DigitalOcean Spaces
-      objectUrl = `https://${bucketName}.${endpoint}/${fileName}`;
-    } else if (endpoint.includes("supabase.co")) {
-      // Supabase Storage
-      endpoint = endpoint.replace("s3", "object/public"); // Remove the version
-      console.log(endpoint);
-      objectUrl = `${endpoint}/${bucketName}/${fileName}`;
-    } else {
-      // Default fallback
-      objectUrl = `${endpoint}/${bucketName}/${fileName}`;
-    }
-
+    objectUrl = getObjectUrl(bucketName, fileName);
     return objectUrl;
   } catch (error) {
     console.error(
@@ -137,3 +113,29 @@ export const deleteObject = async (bucketName: string, fileName: string) => {
     throw error;
   }
 };
+
+export const getObjectUrl = (bucketName: string, fileName: string): string => {
+  let objectUrl: string;
+  let endpoint = env.AWS_S3_ENDPOINT as string;
+
+  if (endpoint.includes("amazonaws.com")) {
+    // Amazon S3
+    objectUrl = `https://${bucketName}.s3.${env.AWS_REGION}.amazonaws.com/${fileName}`;
+  } else if (endpoint.includes("storage.googleapis.com")) {
+    // Google Cloud Storage
+    objectUrl = `https://storage.googleapis.com/${bucketName}/${fileName}`;
+  } else if (endpoint.includes("digitaloceanspaces.com")) {
+    // DigitalOcean Spaces
+    objectUrl = `https://${bucketName}.${endpoint}/${fileName}`;
+  } else if (endpoint.includes("supabase.co")) {
+    // Supabase Storage
+    endpoint = endpoint.replace("s3", "object/public"); // Remove the version
+    console.log(endpoint);
+    objectUrl = `${endpoint}/${bucketName}/${fileName}`;
+  } else {
+    // Default fallback
+    objectUrl = `${endpoint}/${bucketName}/${fileName}`;
+  }
+
+  return objectUrl;
+};

src/routes/login/+page.server.ts

@@ -13,7 +13,7 @@ export const load: PageServerLoad = async (event) => {
   if (event.locals.user) {
     return redirect(302, "/");
   }
-  return { images: await getBackgroundImages(1) };
+  return { image: await getBackgroundImages() };
 };
 
 export const actions: Actions = {

src/routes/login/+page.svelte

@@ -6,7 +6,6 @@
   import { onMount } from "svelte";
 
   export let data;
-
   console.log(data);
 
   let quote: string = "";
@@ -40,7 +39,7 @@
 
 <div
   class="min-h-screen bg-no-repeat bg-cover flex items-center justify-center"
-  style="background-image: url('{data.images[0].url}')"
+  style="background-image: url('{data.image}')"
 >
   <div class="card card-compact w-96 bg-base-100 shadow-xl p-6">
     <article class="text-center text-4xl font-extrabold">

src/routes/settings/admin/+page.server.ts

@@ -209,7 +209,7 @@ export const actions: Actions = {
       method: "POST",
       body: background,
       headers: {
-        bucket: "images",
+        bucket: "backgrounds",
         type: "background",
       },
     });