diff --git a/Webserver/src/routes/image/+page.svelte b/Webserver/src/routes/image/+page.svelte index 1db9482..cbb7893 100644 --- a/Webserver/src/routes/image/+page.svelte +++ b/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 @@ + +
+ + +
+ + {#if imageURL} User uploaded {/if} {#if uploadStarted} - {#await fileAsDataURL(submitData)} -

Loading image data . . .

-

{uploadData.elapsed} seconds elapsed.

- {:then dataUrl} - {#await sendImage(dataUrl)} -

Sending image . . .

+ {#if submitData.subreddit} + {#await fetchReddit(submitData)} +

Fetching subreddit data . . .

{uploadData.elapsed} seconds elapsed.

- {:then} - {#await placeImage(submitData)} -

Placing image . . .

+ {/await} + {:else} + {#await fileAsDataURL(submitData)} +

Loading image data . . .

+

{uploadData.elapsed} seconds elapsed.

+ {:then dataUrl} + {#await sendImage(dataUrl)} +

Sending image . . .

{uploadData.elapsed} seconds elapsed.

{:then} - {#await updateMatrix(submitData)} -

Updating matrix . . .

+ {#await placeImage(submitData)} +

Placing image . . .

{uploadData.elapsed} seconds elapsed.

{:then} -

Done!

-

{uploadData.elapsed} seconds elapsed.

+ {#await updateMatrix(submitData)} +

Updating matrix . . .

+

{uploadData.elapsed} seconds elapsed.

+ {:then} +

Done!

+

{uploadData.elapsed} seconds elapsed.

+ {/await} {/await} {/await} {/await} - {/await} + {/if} {/if}