feat(images): proxy (#168)

.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

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}
 		/>

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"
 			/>

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}` : '');
+}

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;
+}

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;