requesting images from reddit redirect

Webserver/src/routes/image/+page.svelte

@@ -23,13 +23,22 @@
 		width: number;
 		height: number;
 		update: boolean;
+		subreddit?: string;
+	}
+
+	// Data structure to represent subreddit posts
+	interface RedditPosts {
+		sources: string[];
+		index: number;
+		interval: NodeJS.Timeout;
 	}
 
 	// System variables
 	let imageURL: string | null;
 	let uploadData: UploadStat, matrix: Matrix;
 	let uploadStarted = false,
-		submitData: SubmitData;
+		submitData: SubmitData,
+		posts: RedditPosts;
 
 	// Update matrix over endpoint
 	async function updateMatrix(data: SubmitData) {
@@ -121,7 +130,8 @@
 			y: parseInt(fdata.get('y')?.toString() ?? '0'),
 			width: parseInt(fdata.get('w')?.toString() ?? matrix.width.toString()),
 			height: parseInt(fdata.get('h')?.toString() ?? matrix.height.toString()),
-			update: fdata.get('update') ? true : false
+			update: fdata.get('update') ? true : false,
+			subreddit: fdata.get('subreddit')?.toString()
 		};
 
 		// Time upload by saving date
@@ -141,6 +151,38 @@
 		uploadStarted = true;
 	}
 
+	async function fetchReddit(data: SubmitData) {
+		if (!data.subreddit) return;
+
+		// Request subreddit data
+		const response = await fetch(`/api/reddit?subreddit=${data.subreddit}`);
+		const mdata = (await response.json()) as APIResponse;
+
+		// Ignore failed
+		if (!mdata.success) return;
+		const sources = mdata.results! as string[];
+		if (sources.length === 0) return;
+
+		// Get images and automatically update
+		imageURL = sources[0];
+		posts = {
+			interval: setInterval(() => {
+				uploadStarted = false;
+				if (posts.index >= posts.sources.length) {
+					clearInterval(posts.interval);
+					return;
+				}
+				imageURL = posts.sources[++posts.index];
+				setTimeout(() => (uploadStarted = true), 15);
+			}, 30000),
+			index: 0,
+			sources
+		};
+
+		// Remove subreddit tag from submit data
+		delete data.subreddit;
+	}
+
 	// On client loaded
 	onMount(() => {
 		matrix = {
@@ -232,36 +274,61 @@
 	</div>
 
 	<input
-		class="border-2 border-black hover:bg-gray-200 cursor-pointer"
+		class="border-2 border-black border-b-0 hover:bg-gray-200 cursor-pointer"
 		type="submit"
 		value="Upload!"
 	/>
+
+	<div class="grid grid-cols-2">
+		<label class="border-2 border-black border-r-0 border-b-0 pl-1" for="subreddit"
+			>Subreddit name:</label
+		>
+		<input
+			class="border-2 border-black border-b-0 cursor-text pl-1 bg-gray-100"
+			type="text"
+			name="subreddit"
+			id="subreddit"
+		/>
+	</div>
+
+	<input
+		class="border-2 border-black hover:bg-gray-200 cursor-pointer"
+		type="submit"
+		value="Fetch!"
+	/>
 	{#if imageURL}
 		<img class="mt-5 block ml-auto mr-auto" src={imageURL} alt="User uploaded" />
 	{/if}
 </form>
 
 {#if uploadStarted}
-	{#await fileAsDataURL(submitData)}
+	{#if submitData.subreddit}
-		<p>Loading image data . . .</p>
+		{#await fetchReddit(submitData)}
-		<p>{uploadData.elapsed} seconds elapsed.</p>
+			<p>Fetching subreddit data . . .</p>
-	{:then dataUrl}
-		{#await sendImage(dataUrl)}
-			<p>Sending image . . .</p>
 			<p>{uploadData.elapsed} seconds elapsed.</p>
-		{:then}
+		{/await}
-			{#await placeImage(submitData)}
+	{:else}
-				<p>Placing image . . .</p>
+		{#await fileAsDataURL(submitData)}
+			<p>Loading image data . . .</p>
+			<p>{uploadData.elapsed} seconds elapsed.</p>
+		{:then dataUrl}
+			{#await sendImage(dataUrl)}
+				<p>Sending image . . .</p>
 				<p>{uploadData.elapsed} seconds elapsed.</p>
 			{:then}
-				{#await updateMatrix(submitData)}
+				{#await placeImage(submitData)}
-					<p>Updating matrix . . .</p>
+					<p>Placing image . . .</p>
 					<p>{uploadData.elapsed} seconds elapsed.</p>
 				{:then}
-					<p>Done!</p>
+					{#await updateMatrix(submitData)}
-					<p>{uploadData.elapsed} seconds elapsed.</p>
+						<p>Updating matrix . . .</p>
+						<p>{uploadData.elapsed} seconds elapsed.</p>
+					{:then}
+						<p>Done!</p>
+						<p>{uploadData.elapsed} seconds elapsed.</p>
+					{/await}
 				{/await}
 			{/await}
 		{/await}
-	{/await}
+	{/if}
 {/if}