From d22673ca9569eea00f90575de0a16284358ac961 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aleksa=20Siri=C5=A1ki?=
 <31509435+aleksasiriski@users.noreply.github.com>
Date: Thu, 21 Mar 2024 23:11:36 +0100
Subject: [PATCH] feat(images): proxy (#168)

---
 .env.example                                     |  4 ++++
 .../search/display/images/Image.svelte           |  4 +++-
 .../search/display/images/Preview.svelte         |  4 +++-
 src/lib/functions/createPublicApiUrl.ts          | 10 ++++++++++
 src/lib/functions/proxyImageLink.ts              | 16 ++++++++++++++++
 src/lib/types/result.ts                          |  2 ++
 6 files changed, 38 insertions(+), 2 deletions(-)
 create mode 100644 src/lib/functions/createPublicApiUrl.ts
 create mode 100644 src/lib/functions/proxyImageLink.ts

diff --git a/.env.example b/.env.example
index 437a22d8..30a6d3b4 100644
--- a/.env.example
+++ b/.env.example
@@ -1 +1,5 @@
 API_URI=http://localhost:3030 # server reachable
+PUBLIC_API_URI=http://localhost:3030 # client reachable
+# use local frontend with official backend (CORS is enabled for http://localhost:5173)
+# API_URI=https://api.hearch.co
+# PUBLIC_API_URI=https://api.hearch.co
diff --git a/src/lib/components/search/display/images/Image.svelte b/src/lib/components/search/display/images/Image.svelte
index 3be4f2f3..38bf8458 100644
--- a/src/lib/components/search/display/images/Image.svelte
+++ b/src/lib/components/search/display/images/Image.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { proxyImageLink } from '$lib/functions/proxyImageLink';
+
 	// types
 	import type { ResultType } from '$lib/types/result';
 
@@ -31,7 +33,7 @@
 		<img
 			id="img-{result.Rank}"
 			class="w-full h-full object-cover object-center transform hover:scale-110 transition duration-300 ease-in-out"
-			src={result.ImageResult.ThumbnailURL}
+			src={proxyImageLink(result.ImageResult.ThumbnailURL, result.ImageResult.ThumbnailURLHash)}
 			alt={result.Title}
 			{loading}
 		/>
diff --git a/src/lib/components/search/display/images/Preview.svelte b/src/lib/components/search/display/images/Preview.svelte
index 29f5cb77..1560a5d2 100644
--- a/src/lib/components/search/display/images/Preview.svelte
+++ b/src/lib/components/search/display/images/Preview.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { proxyImageLink } from '$lib/functions/proxyImageLink';
+
 	// types
 	import type { ResultType } from '$lib/types/result';
 
@@ -13,7 +15,7 @@
 		>
 			<img
 				id="link-{result.Rank}"
-				src={result.ImageResult.ThumbnailURL}
+				src={proxyImageLink(result.URL, result.URLHash)}
 				alt={result.Title}
 				class="h-full w-full object-contain transform transition"
 			/>
diff --git a/src/lib/functions/createPublicApiUrl.ts b/src/lib/functions/createPublicApiUrl.ts
new file mode 100644
index 00000000..02772d52
--- /dev/null
+++ b/src/lib/functions/createPublicApiUrl.ts
@@ -0,0 +1,10 @@
+import { env } from '$env/dynamic/public';
+
+export function createPublicApiUrl(path: string, params?: string): string {
+	const apiUri: string | undefined = env.PUBLIC_API_URI;
+	if (apiUri === undefined) {
+		throw new Error('PUBLIC_API_URI env is not defined');
+	}
+
+	return (apiUri.endsWith('/') ? apiUri : apiUri + '/') + path + (params ? `?${params}` : '');
+}
diff --git a/src/lib/functions/proxyImageLink.ts b/src/lib/functions/proxyImageLink.ts
new file mode 100644
index 00000000..a1d7e703
--- /dev/null
+++ b/src/lib/functions/proxyImageLink.ts
@@ -0,0 +1,16 @@
+import { error } from '@sveltejs/kit';
+import { createPublicApiUrl } from '$lib/functions/createPublicApiUrl';
+
+export function proxyImageLink(url: string, hash: string): string {
+	const params: string = 'url=' + encodeURIComponent(url) + '&hash=' + hash;
+
+	let apiUrl: string;
+	try {
+		apiUrl = createPublicApiUrl('proxy', params);
+	} catch (err: any) {
+		// Internal Server Error
+		throw error(500, `Failed to create API URL: ${err.message}`);
+	}
+
+	return apiUrl;
+}
diff --git a/src/lib/types/result.ts b/src/lib/types/result.ts
index 22e63dbb..ad4e1e37 100644
--- a/src/lib/types/result.ts
+++ b/src/lib/types/result.ts
@@ -14,12 +14,14 @@ type ImageResult = {
 	Original: ImageFormat;
 	Thumbnail: ImageFormat;
 	ThumbnailURL: string;
+	ThumbnailURLHash: string;
 	Source: string;
 	SourceURL: string;
 };
 
 export type ResultType = {
 	URL: string;
+	URLHash: string;
 	Rank: number;
 	Score: number;
 	Title: string;